File size: 2,609 Bytes
930af4a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
.input,
.textarea {
    background-color: color(typography, 1);
    border-width: 1px;
    border-style: solid;
    border-color: color(bg, 3);
	border-radius: 2px;
    color: color(typography, 2);
    max-width: 100%;
    width: 100%;

    &::placeholder {
        color: color(typography, 2);
    }

    &::-ms-input-placeholder {
        color: color(typography, 2);
    }

    &:-ms-input-placeholder {
        color: color(typography, 2);
    }

    &:hover {
        border-color: darken(color(bg, 3), 5%);
    }

    &:active,
    &:focus {
        outline: none;
        border-color: color(bg, 3);
    }

    &[disabled] {
        cursor: not-allowed;
        background-color: color(bg, 2);
        border-color: color(bg, 2);
    }
}

.input {
    -moz-appearance: none;
    -webkit-appearance: none;
    @include font-size(7, mobile, true, false, true);
    @if ( get-font-size(7, desktop) != get-font-size(7, mobile) ) {
        @include media( '>medium' ) {
            @include font-size(7, desktop, true, false, true);
        }
    }
    line-height: 20px;
    padding: 13px 16px;
	height: 48px;
    box-shadow: none;

    .inline-input {
        display: inline;
        width: auto;
    }
}

.textarea {
    display: block;
    min-width: 100%;
    resize: vertical;

    .inline-textarea {
        display: inline;
        width: auto;
    }
}

.field-grouped {

    > .control {

        &:not(:last-child) {
            margin-bottom: 8px;
        }
    }
}

.switch[type="checkbox"] {
	outline: 0;
	user-select: none;
	position: absolute;
	opacity: 0;

	+ label {
		display: inline-flex;
	    position: relative;
		line-height: 36px;
	    padding-left: 78px;
		user-select: none;
	    cursor: pointer;

		&::before,
		&::after {
			content: '';
			position: absolute;
			display: block;
		}

		&::before {
			top: 0;
			left: 0;
			width: 64px;
			height: 36px;
			border-radius: 18px;
			background: color(bg, 3);
		}

		&::after {
			top: 6px;
			left: 6px;
			width: 24px;
			height: 24px;
			border-radius: 12px;
			background: color(bg, 1);
			transition: all .15s ease-out;
		}
	}

	&:checked {

		+ label {

			&::before {
				background: color(primary, 1);
			}

			&::after {
				left: 34px;
			}
		}
	}
}

@include media( '>medium' ) {

    .field-grouped {
        display: flex;

        > .control {
            flex-shrink: 0;

            &.control-expanded {
                flex-grow: 1;
                flex-shrink: 1;
            }

            &:not(:last-child) {
                margin-bottom: 0;
                margin-right: 8px;
            }
        }
    }
}