UNPKG

3.31 kBSCSSView Raw
1@import "mixins/objects.grid";
2@import "mixins/components.inputs";
3
4// INPUT GROUP
5.c-input-group {
6 @include grid;
7
8 .c-button {
9 border-radius: 0;
10
11 &:not(:first-child) {
12 border-left-width: 0;
13 }
14
15 &:first-child {
16 border-top-left-radius: $border-radius;
17 border-bottom-left-radius: $border-radius;
18 }
19
20 &:last-child {
21 border-top-right-radius: $border-radius;
22 border-bottom-right-radius: $border-radius;
23 }
24 }
25
26 .o-field {
27 @include grid__cell--fit;
28
29 .c-field {
30 border-radius: 0;
31 }
32
33 &:not(:first-child) .c-field {
34 border-left-width: 0;
35 }
36
37 &:first-child .c-field {
38 border-top-left-radius: $border-radius;
39 border-bottom-left-radius: $border-radius;
40 }
41
42 &:last-child .c-field {
43 border-top-right-radius: $border-radius;
44 border-bottom-right-radius: $border-radius;
45 }
46
47 &--fixed {
48 @include grid__cell--width-fixed;
49 }
50 }
51}
52
53.c-input-group--rounded {
54 .c-button {
55 &:first-child {
56 border-top-left-radius: $border-radius-rounded;
57 border-bottom-left-radius: $border-radius-rounded;
58 }
59
60 &:last-child {
61 border-top-right-radius: $border-radius-rounded;
62 border-bottom-right-radius: $border-radius-rounded;
63 }
64 }
65
66 .o-field {
67 &:first-child .c-field {
68 border-top-left-radius: $border-radius-rounded;
69 border-bottom-left-radius: $border-radius-rounded;
70 }
71
72 &:last-child .c-field {
73 border-top-right-radius: $border-radius-rounded;
74 border-bottom-right-radius: $border-radius-rounded;
75 }
76 }
77}
78
79.c-input-group--rounded-left {
80 .c-button {
81 &:first-child {
82 border-top-left-radius: $border-radius-rounded;
83 border-bottom-left-radius: $border-radius-rounded;
84 }
85 }
86
87 .o-field {
88 &:first-child .c-field {
89 border-top-left-radius: $border-radius-rounded;
90 border-bottom-left-radius: $border-radius-rounded;
91 }
92 }
93}
94
95.c-input-group--rounded-right {
96 .c-button {
97 &:last-child {
98 border-top-right-radius: $border-radius-rounded;
99 border-bottom-right-radius: $border-radius-rounded;
100 }
101 }
102
103 .o-field {
104 &:last-child .c-field {
105 border-top-right-radius: $border-radius-rounded;
106 border-bottom-right-radius: $border-radius-rounded;
107 }
108 }
109}
110
111.c-input-group--stacked {
112 @include grid;
113 @include grid--wrap;
114
115 .o-field:not(:first-child) .c-field {
116 border-left-width: $field-border-width;
117 }
118
119 .c-button:not(:first-child) {
120 border-left-width: $button-border-width;
121 }
122
123 .o-field,
124 .c-button {
125 @include grid__cell--full;
126 }
127
128 .c-button {
129 &:not(:first-child) {
130 border-top: 0;
131 }
132
133 &:not(:first-child):not(:last-child) {
134 border-radius: 0;
135 }
136
137 &:first-child {
138 border-radius: $field-border-radius $field-border-radius 0 0;
139 }
140
141 &:last-child {
142 border-radius: 0 0 $field-border-radius $field-border-radius;
143 }
144 }
145
146 .o-field {
147 &:not(:first-child) .c-field {
148 border-top: 0;
149 }
150
151 &:not(:first-child):not(:last-child) .c-field {
152 border-radius: 0;
153 }
154
155 &:first-child .c-field {
156 border-radius: $field-border-radius $field-border-radius 0 0;
157 }
158
159 &:last-child .c-field {
160 border-radius: 0 0 $field-border-radius $field-border-radius;
161 }
162 }
163}