... | ... |
@@ -1074,7 +1074,9 @@ |
1074 | 1074 |
|
1075 | 1075 |
<div class="c-input-group"> |
1076 | 1076 |
<button class="c-button c-button--secondary">Action</button> |
1077 |
+ <button class="c-button c-button--success">Action</button> |
|
1077 | 1078 |
<input class="c-field" placeholder="Textbox" id="inputgroup3"> |
1079 |
+ <button class="c-button c-button--error">Action</button> |
|
1078 | 1080 |
<button class="c-button c-button--primary">Action</button> |
1079 | 1081 |
</div> |
1080 | 1082 |
</div> |
... | ... |
@@ -1094,7 +1096,9 @@ |
1094 | 1096 |
|
1095 | 1097 |
<div class="c-input-group c-input-group--rounded"> |
1096 | 1098 |
<button class="c-button c-button--ghost">Action</button> |
1099 |
+ <button class="c-button c-button--ghost">Action</button> |
|
1097 | 1100 |
<input class="c-field" placeholder="Textbox" id="inputgroup5"> |
1101 |
+ <button class="c-button c-button--ghost-secondary">Action</button> |
|
1098 | 1102 |
<button class="c-button c-button--ghost-primary">Action</button> |
1099 | 1103 |
</div> |
1100 | 1104 |
</div> |
... | ... |
@@ -1 +1 @@ |
1 |
-/*!v2.12.0*/.c-label{padding:1em 0;cursor:pointer}.c-field,.c-label{display:block;width:100%}.c-field{padding:.5em;outline:0;margin:0;font-size:1em;font-weight:400;font-family:inherit;background-color:#fff;border:1px solid #adadad;border-radius:4px;resize:vertical;-webkit-appearance:none;-moz-appearance:none;appearance:none}.c-field:focus{border-color:#42a5f5;box-shadow:inset 0 0 0 2px #6ebaf7}.c-label__field{padding:.5em;outline:0;display:block;width:100%;margin:0;font-size:1em;font-weight:400;font-family:inherit;background-color:#fff;border:1px solid #adadad;border-radius:4px;resize:vertical;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:.5em 0 0}.c-label__field:focus{border-color:#42a5f5;box-shadow:inset 0 0 0 2px #6ebaf7}.c-field--error{border-color:#ef4f52;color:#ef4f52}.c-field--success{border-color:#66bb6a;color:inherit}.c-field--disabled,.c-field:disabled{color:#adadad;cursor:not-allowed;background-color:#f1f1f1;border-color:#adadad}.c-field--super{font-size:3em}.c-field--xlarge{font-size:2em}.c-field--large{font-size:1.5em}.c-field--medium{font-size:1em}.c-field--small{font-size:.9em}.c-field--xsmall{font-size:.7em}.c-choice{padding:.5em 0;margin:0;outline:0;display:block;font-size:1em;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.c-choice:focus{border-color:#42a5f5;box-shadow:inset 0 0 0 2px #6ebaf7}.c-choice--error{color:#ef4f52}.c-choice--success{color:#66bb6a}.c-choice--disabled,.c-choice:disabled{color:#adadad;cursor:not-allowed}.c-choice--super{font-size:3em}.c-choice--xlarge{font-size:2em}.c-choice--large{font-size:1.5em}.c-choice--medium{font-size:1em}.c-choice--small{font-size:.9em}.c-choice--xsmall{font-size:.7em}select.c-choice{padding:.5em;outline:0;display:block;width:100%;margin:0;font-size:1em;font-weight:400;font-family:inherit;background-color:#fff;border:1px solid #adadad;border-radius:4px;resize:vertical;-webkit-appearance:none;-moz-appearance:none;appearance:none}select.c-choice:focus{border-color:#42a5f5;box-shadow:inset 0 0 0 2px #6ebaf7}select:not([multiple]).c-choice{padding:.5em 0;margin:0;display:block;font-size:1em;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;-webkit-appearance:menulist;-moz-appearance:menulist;appearance:menulist;height:2.5em}select:not([multiple]).c-choice:focus{border-color:#42a5f5;box-shadow:inset 0 0 0 2px #6ebaf7}select:not([multiple]).c-choice--super{font-size:3em}select:not([multiple]).c-choice--xlarge{font-size:2em}select:not([multiple]).c-choice--large{font-size:1.5em}select:not([multiple]).c-choice--medium{font-size:1em}select:not([multiple]).c-choice--small{font-size:.9em}select:not([multiple]).c-choice--xsmall{font-size:.7em}select.c-choice--error{border-color:#ef4f52;color:#ef4f52}select.c-choice--success{border-color:#66bb6a;color:inherit}select.c-choice--disabled,select.c-choice:disabled{color:#adadad;cursor:not-allowed;background-color:#f1f1f1;border-color:#adadad}.c-choice input{outline:0;margin-right:.1em;font-size:1em}.c-choice input:focus{border-color:#42a5f5;box-shadow:inset 0 0 0 2px #6ebaf7}.c-choice input:disabled{color:#adadad;cursor:not-allowed}.c-input-group{display:-ms-flexbox;display:flex}.c-input-group .c-field{-ms-flex:1;flex:1;height:100%}.c-input-group .c-field:not(:first-child):not(:last-child){border-radius:0;border-right:0;border-left:0}.c-input-group .c-field:first-child{border-radius:4px 0 0 4px;border-right:0}.c-input-group .c-field:last-child{border-radius:0 4px 4px 0;border-left:0}.c-input-group .c-button:first-child{border-radius:4px 0 0 4px;border-width:1px}.c-input-group .c-button:last-child{border-radius:0 4px 4px 0;border-width:1px}.c-input-group--rounded .c-button:first-child,.c-input-group--rounded .c-field:first-child{border-radius:30em 0 0 30em}.c-input-group--rounded .c-button:last-child,.c-input-group--rounded .c-field:last-child{border-radius:0 30em 30em 0}.c-input-group--rounded-left .c-button:first-child,.c-input-group--rounded-left .c-field:first-child{border-radius:30em 0 0 30em}.c-input-group--rounded-right .c-button:last-child,.c-input-group--rounded-right .c-field:last-child{border-radius:0 30em 30em 0}.c-field-group{display:block}.c-field-group .c-field:not(:first-child){border-top:0}.c-field-group .c-field:not(:first-child):not(:last-child){border-radius:0}.c-field-group .c-field:first-child{border-radius:4px 4px 0 0}.c-field-group .c-field:last-child{border-radius:0 0 4px 4px}.c-field-group-inline{display:-ms-flexbox;display:flex}.c-field-group-inline .c-field:not(:first-child){border-left:0}.c-field-group-inline .c-field:not(:first-child):not(:last-child){border-radius:0}.c-field-group-inline .c-field:first-child{border-radius:4px 0 0 4px}.c-field-group-inline .c-field:last-child{border-radius:0 4px 4px 0}.c-fieldset,.c-fieldset.c-list{display:block;width:100%;border:0;padding:0;margin:.5em 0}.c-fieldset__legend{display:block;width:100%;padding:1em 0;cursor:pointer;padding:.3em 0}.c-fieldset--disabled .c-field,.c-fieldset:disabled .c-field{color:#adadad;cursor:not-allowed;background-color:#f1f1f1;border-color:#adadad}.c-fieldset--disabled .c-choice,.c-fieldset:disabled .c-choice{color:#adadad;cursor:not-allowed}.c-form-element{padding:1em 0;position:relative}.c-form-element .c-label:first-child{padding:0 0 .5em} |
|
2 | 1 |
\ No newline at end of file |
2 |
+/*!v2.12.0*/.c-label{padding:1em 0;cursor:pointer}.c-field,.c-label{display:block;width:100%}.c-field{padding:.5em;outline:0;margin:0;font-size:1em;font-weight:400;font-family:inherit;background-color:#fff;border:1px solid #adadad;border-radius:4px;resize:vertical;-webkit-appearance:none;-moz-appearance:none;appearance:none}.c-field:focus{border-color:#42a5f5;box-shadow:inset 0 0 0 2px #6ebaf7}.c-label__field{padding:.5em;outline:0;display:block;width:100%;margin:0;font-size:1em;font-weight:400;font-family:inherit;background-color:#fff;border:1px solid #adadad;border-radius:4px;resize:vertical;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:.5em 0 0}.c-label__field:focus{border-color:#42a5f5;box-shadow:inset 0 0 0 2px #6ebaf7}.c-field--error{border-color:#ef4f52;color:#ef4f52}.c-field--success{border-color:#66bb6a;color:inherit}.c-field--disabled,.c-field:disabled{color:#adadad;cursor:not-allowed;background-color:#f1f1f1;border-color:#adadad}.c-field--super{font-size:3em}.c-field--xlarge{font-size:2em}.c-field--large{font-size:1.5em}.c-field--medium{font-size:1em}.c-field--small{font-size:.9em}.c-field--xsmall{font-size:.7em}.c-choice{padding:.5em 0;margin:0;outline:0;display:block;font-size:1em;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.c-choice:focus{border-color:#42a5f5;box-shadow:inset 0 0 0 2px #6ebaf7}.c-choice--error{color:#ef4f52}.c-choice--success{color:#66bb6a}.c-choice--disabled,.c-choice:disabled{color:#adadad;cursor:not-allowed}.c-choice--super{font-size:3em}.c-choice--xlarge{font-size:2em}.c-choice--large{font-size:1.5em}.c-choice--medium{font-size:1em}.c-choice--small{font-size:.9em}.c-choice--xsmall{font-size:.7em}select.c-choice{padding:.5em;outline:0;display:block;width:100%;margin:0;font-size:1em;font-weight:400;font-family:inherit;background-color:#fff;border:1px solid #adadad;border-radius:4px;resize:vertical;-webkit-appearance:none;-moz-appearance:none;appearance:none}select.c-choice:focus{border-color:#42a5f5;box-shadow:inset 0 0 0 2px #6ebaf7}select:not([multiple]).c-choice{padding:.5em 0;margin:0;display:block;font-size:1em;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;-webkit-appearance:menulist;-moz-appearance:menulist;appearance:menulist;height:2.5em}select:not([multiple]).c-choice:focus{border-color:#42a5f5;box-shadow:inset 0 0 0 2px #6ebaf7}select:not([multiple]).c-choice--super{font-size:3em}select:not([multiple]).c-choice--xlarge{font-size:2em}select:not([multiple]).c-choice--large{font-size:1.5em}select:not([multiple]).c-choice--medium{font-size:1em}select:not([multiple]).c-choice--small{font-size:.9em}select:not([multiple]).c-choice--xsmall{font-size:.7em}select.c-choice--error{border-color:#ef4f52;color:#ef4f52}select.c-choice--success{border-color:#66bb6a;color:inherit}select.c-choice--disabled,select.c-choice:disabled{color:#adadad;cursor:not-allowed;background-color:#f1f1f1;border-color:#adadad}.c-choice input{outline:0;margin-right:.1em;font-size:1em}.c-choice input:focus{border-color:#42a5f5;box-shadow:inset 0 0 0 2px #6ebaf7}.c-choice input:disabled{color:#adadad;cursor:not-allowed}.c-input-group{display:-ms-flexbox;display:flex}.c-input-group .c-field{-ms-flex:1;flex:1;height:100%;border-radius:0}.c-input-group .c-field:not(:first-child):not(:last-child){border-right:0;border-left:0}.c-input-group .c-field:first-child{border-bottom-left-radius:4px;border-top-left-radius:4px;border-right:0}.c-input-group .c-field:last-child{border-bottom-right-radius:4px;border-top-right-radius:4px;border-left:0}.c-input-group .c-button{border-radius:0}.c-input-group .c-button:first-child{border-bottom-left-radius:4px;border-top-left-radius:4px;border-width:1px}.c-input-group .c-button:last-child{border-bottom-right-radius:4px;border-top-right-radius:4px;border-width:1px}.c-input-group--rounded .c-button:first-child,.c-input-group--rounded .c-field:first-child{border-bottom-left-radius:30em;border-top-left-radius:30em}.c-input-group--rounded .c-button:last-child,.c-input-group--rounded .c-field:last-child{border-bottom-right-radius:30em;border-top-right-radius:30em}.c-input-group--rounded-left .c-button:first-child,.c-input-group--rounded-left .c-field:first-child{border-bottom-left-radius:30em;border-top-left-radius:30em}.c-input-group--rounded-right .c-button:last-child,.c-input-group--rounded-right .c-field:last-child{border-bottom-right-radius:30em;border-top-right-radius:30em}.c-field-group{display:block}.c-field-group .c-field:not(:first-child){border-top:0}.c-field-group .c-field:not(:first-child):not(:last-child){border-radius:0}.c-field-group .c-field:first-child{border-radius:4px 4px 0 0}.c-field-group .c-field:last-child{border-radius:0 0 4px 4px}.c-field-group-inline{display:-ms-flexbox;display:flex}.c-field-group-inline .c-field:not(:first-child){border-left:0}.c-field-group-inline .c-field:not(:first-child):not(:last-child){border-radius:0}.c-field-group-inline .c-field:first-child{border-radius:4px 0 0 4px}.c-field-group-inline .c-field:last-child{border-radius:0 4px 4px 0}.c-fieldset,.c-fieldset.c-list{display:block;width:100%;border:0;padding:0;margin:.5em 0}.c-fieldset__legend{display:block;width:100%;padding:1em 0;cursor:pointer;padding:.3em 0}.c-fieldset--disabled .c-field,.c-fieldset:disabled .c-field{color:#adadad;cursor:not-allowed;background-color:#f1f1f1;border-color:#adadad}.c-fieldset--disabled .c-choice,.c-fieldset:disabled .c-choice{color:#adadad;cursor:not-allowed}.c-form-element{padding:1em 0;position:relative}.c-form-element .c-label:first-child{padding:0 0 .5em} |
|
3 | 3 |
\ No newline at end of file |
... | ... |
@@ -158,6 +158,7 @@ select.c-choice--disabled, select.c-choice:disabled { |
158 | 158 |
|
159 | 159 |
.c-field { |
160 | 160 |
@include input-group__field; |
161 |
+ @include input--grouped; |
|
161 | 162 |
} |
162 | 163 |
|
163 | 164 |
.c-field:not(:first-child):not(:last-child) { |
... | ... |
@@ -171,6 +172,10 @@ select.c-choice--disabled, select.c-choice:disabled { |
171 | 172 |
.c-field:last-child { |
172 | 173 |
@include input-group__field--right; |
173 | 174 |
} |
175 |
+ |
|
176 |
+ .c-button { |
|
177 |
+ @include input--grouped; |
|
178 |
+ } |
|
174 | 179 |
|
175 | 180 |
.c-button:first-child { |
176 | 181 |
@include input-group__button--left; |
... | ... |
@@ -173,38 +173,47 @@ |
173 | 173 |
height: 100%; |
174 | 174 |
} |
175 | 175 |
|
176 |
-@mixin input-group__field--center { |
|
176 |
+@mixin input--grouped { |
|
177 | 177 |
border-radius: 0; |
178 |
+} |
|
179 |
+ |
|
180 |
+@mixin input-group__field--center { |
|
178 | 181 |
border-right: 0; |
179 | 182 |
border-left: 0; |
180 | 183 |
} |
181 | 184 |
|
182 | 185 |
@mixin input-group__field--left { |
183 |
- border-radius: $border-radius 0 0 $border-radius; |
|
186 |
+ border-bottom-left-radius: $border-radius; |
|
187 |
+ border-top-left-radius: $border-radius; |
|
184 | 188 |
border-right: 0; |
185 | 189 |
} |
186 | 190 |
|
187 | 191 |
@mixin input-group__field--right { |
188 |
- border-radius: 0 $border-radius $border-radius 0; |
|
192 |
+ border-bottom-right-radius: $border-radius; |
|
193 |
+ border-top-right-radius: $border-radius; |
|
189 | 194 |
border-left: 0; |
190 | 195 |
} |
191 | 196 |
|
192 | 197 |
@mixin input-group__button--left { |
193 |
- border-radius: $border-radius 0 0 $border-radius; |
|
198 |
+ border-bottom-left-radius: $border-radius; |
|
199 |
+ border-top-left-radius: $border-radius; |
|
194 | 200 |
border-width: 1px; |
195 | 201 |
} |
196 | 202 |
|
197 | 203 |
@mixin input-group__button--right { |
198 |
- border-radius: 0 $border-radius $border-radius 0; |
|
204 |
+ border-bottom-right-radius: $border-radius; |
|
205 |
+ border-top-right-radius: $border-radius; |
|
199 | 206 |
border-width: 1px; |
200 | 207 |
} |
201 | 208 |
|
202 | 209 |
@mixin input-group-rounded--left { |
203 |
- border-radius: $border-radius-rounded 0 0 $border-radius-rounded; |
|
210 |
+ border-bottom-left-radius: $border-radius-rounded; |
|
211 |
+ border-top-left-radius: $border-radius-rounded; |
|
204 | 212 |
} |
205 | 213 |
|
206 | 214 |
@mixin input-group-rounded--right { |
207 |
- border-radius: 0 $border-radius-rounded $border-radius-rounded 0; |
|
215 |
+ border-bottom-right-radius: $border-radius-rounded; |
|
216 |
+ border-top-right-radius: $border-radius-rounded; |
|
208 | 217 |
} |
209 | 218 |
|
210 | 219 |
@mixin field-group { |