Browse code

fix #108

Still needs a fix for ghost buttons

Gregory Potdevin authored on 05/08/2016 21:12:10
Showing 4 changed files
... ...
@@ -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 {