Skip to content
This repository was archived by the owner on Feb 7, 2023. It is now read-only.

Commit facce7e

Browse files
bradfrostbradfrost
committed
Style updates to styleguide.css: adjust icon size and spacing, added overflow: auto to dropdowns, increased width
1 parent 0505d87 commit facce7e

File tree

4 files changed

+56
-64
lines changed

4 files changed

+56
-64
lines changed

‎core/styleguide/css/styleguide.css

100644100755
Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -204,14 +204,18 @@
204204
-o-transition: max-height 0.1s ease-out;
205205
transition: max-height 0.1s ease-out; }
206206
.sg-acc-panel.active {
207-
max-height: 50em; }
207+
max-height: 50em;
208+
overflow: auto; }
208209
.sg-acc-panel.sg-right {
209210
position: absolute;
210211
left: auto;
211212
right: 0; }
212213
.sg-acc-panel.sg-left {
213214
position: absolute;
214215
left: auto; }
216+
.sg-acc-panel [class^="icon-"]:before, .sg-acc-panel [class*=" icon-"]:before {
217+
display: inline-block;
218+
margin-right: 0.4em; }
215219

216220
/* Controls (sizing, view mode) */
217221
.sg-controls {
@@ -220,22 +224,16 @@
220224
top: 0;
221225
right: 0;
222226
z-index: 2; }
223-
.sg-controls .sg-acc-panel.active {
224-
max-height: 21em; }
225-
.sg-controls .sg-nav-phases .sg-acc-panel {
226-
min-width: 0; }
227-
.sg-controls .sg-nav-phases .sg-acc-panel.active {
228-
max-height: none; }
229-
@media all and (min-width: 69.5em) {
227+
@media all and (min-width: 72em) {
230228
.sg-controls {
231-
width: 41.5em; } }
229+
width: 44em; } }
232230

233231
.sg-control-trigger {
234232
border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
235233
@media all and (min-width: 48em) {
236234
.sg-control-trigger {
237235
border: 0; } }
238-
@media all and (min-width: 69.5em) {
236+
@media all and (min-width: 72em) {
239237
.sg-control-trigger {
240238
float: left;
241239
width: 6em; } }
@@ -265,7 +263,7 @@
265263
.sg-current-size:hover .sg-input {
266264
background: #999999;
267265
color: #000; }
268-
@media all and (min-width: 69.5em) {
266+
@media all and (min-width: 72em) {
269267
.sg-current-size {
270268
float: left; } }
271269

@@ -275,7 +273,7 @@
275273
.sg-size {
276274
width: auto; } }
277275

278-
@media all and (min-width: 69.5em) {
276+
@media all and (min-width: 72em) {
279277
.sg-size-options {
280278
float: left;
281279
position: static;
@@ -651,7 +649,7 @@ div.clear {
651649
font-weight: normal;
652650
font-style: normal; }
653651

654-
.icon-search, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-radio-checked, .icon-radio-unchecked, .icon-file, .icon-link, .icon-keyboard, .icon-qrcode, .icon-eye, .sg-checkbox {
652+
.icon-search, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-radio-checked, .sg-checkbox.active, .icon-radio-unchecked, .sg-checkbox, .icon-file, .icon-link, .icon-keyboard, .icon-qrcode, .icon-eye, .sg-checkbox {
655653
font-family: 'icomoon';
656654
speak: none;
657655
font-style: normal;
@@ -664,7 +662,8 @@ div.clear {
664662
-moz-osx-font-smoothing: grayscale; }
665663

666664
.icon-search:before {
667-
content: "\e600"; }
665+
content: "\e600";
666+
font-size: 85%; }
668667

669668
.icon-cog:before {
670669
content: "\e601"; }
@@ -678,10 +677,10 @@ div.clear {
678677
.icon-menu:before {
679678
content: "\e604"; }
680679

681-
.icon-radio-checked:before, .sg-checkbox.active:before {
680+
.icon-radio-checked:before, .sg-checkbox.active:before, .sg-checkbox.active:before {
682681
content: "\e605"; }
683682

684-
.icon-radio-unchecked:before, .sg-checkbox:before {
683+
.icon-radio-unchecked:before, .sg-checkbox:before, .sg-checkbox:before {
685684
content: "\e606"; }
686685

687686
.icon-file:before {

‎core/styleguide/css/styleguide.scss

100644100755
Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ $offset-top: 2em;
7676
$sg-bp-small : 24em;
7777
$sg-bp-small-2 : 30em;
7878
$sg-bp-med : 48em;
79-
$sg-bp-large : 69.5em;
79+
$sg-bp-large : 72em;
8080
$sg-bp-xl : 80em;
8181

8282
$animate-quick: 0.2s;
@@ -299,6 +299,7 @@ $animate-quick: 0.2s;
299299

300300
&.active {
301301
max-height: 50em;
302+
overflow: auto;
302303
}
303304

304305
&.sg-right {
@@ -311,6 +312,13 @@ $animate-quick: 0.2s;
311312
position: absolute;
312313
left: auto;
313314
}
315+
316+
[class^="icon-"], [class*=" icon-"] {
317+
&:before {
318+
display: inline-block;
319+
margin-right: 0.4em;
320+
}
321+
}
314322
}
315323

316324
/* Controls (sizing, view mode) */
@@ -320,21 +328,9 @@ $animate-quick: 0.2s;
320328
top: 0;
321329
right: 0;
322330
z-index: 2;
323-
324-
.sg-acc-panel.active {
325-
max-height: 21em;
326-
}
327-
328-
.sg-nav-phases .sg-acc-panel {
329-
min-width: 0;
330-
331-
&.active {
332-
max-height: none;
333-
}
334-
}
335331

336332
@media all and (min-width: $sg-bp-large) {
337-
width: 41.5em;
333+
width: 44em;
338334
}
339335
}
340336

@@ -464,15 +460,15 @@ $animate-quick: 0.2s;
464460

465461
//Checklist dropdown lists
466462
.sg-checkbox {
467-
@extend .icon-checkbox-unchecked;
463+
@extend .icon-radio-unchecked;
468464

469465
&:before {
470466
display: inline-block;
471467
margin-right: 0.4em;
472468
}
473469

474470
&.active {
475-
@extend .icon-checkbox-checked;
471+
@extend .icon-radio-checked;
476472
}
477473
}
478474

@@ -917,6 +913,7 @@ div.clear {
917913

918914
.icon-search:before {
919915
content: "\e600";
916+
font-size: 85%;
920917
}
921918
.icon-cog:before {
922919
content: "\e601";

‎public/styleguide/css/styleguide.css

100644100755
Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -204,14 +204,18 @@
204204
-o-transition: max-height 0.1s ease-out;
205205
transition: max-height 0.1s ease-out; }
206206
.sg-acc-panel.active {
207-
max-height: 50em; }
207+
max-height: 50em;
208+
overflow: auto; }
208209
.sg-acc-panel.sg-right {
209210
position: absolute;
210211
left: auto;
211212
right: 0; }
212213
.sg-acc-panel.sg-left {
213214
position: absolute;
214215
left: auto; }
216+
.sg-acc-panel [class^="icon-"]:before, .sg-acc-panel [class*=" icon-"]:before {
217+
display: inline-block;
218+
margin-right: 0.4em; }
215219

216220
/* Controls (sizing, view mode) */
217221
.sg-controls {
@@ -220,22 +224,16 @@
220224
top: 0;
221225
right: 0;
222226
z-index: 2; }
223-
.sg-controls .sg-acc-panel.active {
224-
max-height: 21em; }
225-
.sg-controls .sg-nav-phases .sg-acc-panel {
226-
min-width: 0; }
227-
.sg-controls .sg-nav-phases .sg-acc-panel.active {
228-
max-height: none; }
229-
@media all and (min-width: 69.5em) {
227+
@media all and (min-width: 72em) {
230228
.sg-controls {
231-
width: 41.5em; } }
229+
width: 44em; } }
232230

233231
.sg-control-trigger {
234232
border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
235233
@media all and (min-width: 48em) {
236234
.sg-control-trigger {
237235
border: 0; } }
238-
@media all and (min-width: 69.5em) {
236+
@media all and (min-width: 72em) {
239237
.sg-control-trigger {
240238
float: left;
241239
width: 6em; } }
@@ -265,7 +263,7 @@
265263
.sg-current-size:hover .sg-input {
266264
background: #999999;
267265
color: #000; }
268-
@media all and (min-width: 69.5em) {
266+
@media all and (min-width: 72em) {
269267
.sg-current-size {
270268
float: left; } }
271269

@@ -275,7 +273,7 @@
275273
.sg-size {
276274
width: auto; } }
277275

278-
@media all and (min-width: 69.5em) {
276+
@media all and (min-width: 72em) {
279277
.sg-size-options {
280278
float: left;
281279
position: static;
@@ -651,7 +649,7 @@ div.clear {
651649
font-weight: normal;
652650
font-style: normal; }
653651

654-
.icon-search, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-radio-checked, .icon-radio-unchecked, .icon-file, .icon-link, .icon-keyboard, .icon-qrcode, .icon-eye, .sg-checkbox {
652+
.icon-search, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-radio-checked, .sg-checkbox.active, .icon-radio-unchecked, .sg-checkbox, .icon-file, .icon-link, .icon-keyboard, .icon-qrcode, .icon-eye, .sg-checkbox {
655653
font-family: 'icomoon';
656654
speak: none;
657655
font-style: normal;
@@ -664,7 +662,8 @@ div.clear {
664662
-moz-osx-font-smoothing: grayscale; }
665663

666664
.icon-search:before {
667-
content: "\e600"; }
665+
content: "\e600";
666+
font-size: 85%; }
668667

669668
.icon-cog:before {
670669
content: "\e601"; }
@@ -678,10 +677,10 @@ div.clear {
678677
.icon-menu:before {
679678
content: "\e604"; }
680679

681-
.icon-radio-checked:before, .sg-checkbox.active:before {
680+
.icon-radio-checked:before, .sg-checkbox.active:before, .sg-checkbox.active:before {
682681
content: "\e605"; }
683682

684-
.icon-radio-unchecked:before, .sg-checkbox:before {
683+
.icon-radio-unchecked:before, .sg-checkbox:before, .sg-checkbox:before {
685684
content: "\e606"; }
686685

687686
.icon-file:before {

‎public/styleguide/css/styleguide.scss

100644100755
Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ $offset-top: 2em;
7676
$sg-bp-small : 24em;
7777
$sg-bp-small-2 : 30em;
7878
$sg-bp-med : 48em;
79-
$sg-bp-large : 69.5em;
79+
$sg-bp-large : 72em;
8080
$sg-bp-xl : 80em;
8181

8282
$animate-quick: 0.2s;
@@ -299,6 +299,7 @@ $animate-quick: 0.2s;
299299

300300
&.active {
301301
max-height: 50em;
302+
overflow: auto;
302303
}
303304

304305
&.sg-right {
@@ -311,6 +312,13 @@ $animate-quick: 0.2s;
311312
position: absolute;
312313
left: auto;
313314
}
315+
316+
[class^="icon-"], [class*=" icon-"] {
317+
&:before {
318+
display: inline-block;
319+
margin-right: 0.4em;
320+
}
321+
}
314322
}
315323

316324
/* Controls (sizing, view mode) */
@@ -320,21 +328,9 @@ $animate-quick: 0.2s;
320328
top: 0;
321329
right: 0;
322330
z-index: 2;
323-
324-
.sg-acc-panel.active {
325-
max-height: 21em;
326-
}
327-
328-
.sg-nav-phases .sg-acc-panel {
329-
min-width: 0;
330-
331-
&.active {
332-
max-height: none;
333-
}
334-
}
335331

336332
@media all and (min-width: $sg-bp-large) {
337-
width: 41.5em;
333+
width: 44em;
338334
}
339335
}
340336

@@ -464,15 +460,15 @@ $animate-quick: 0.2s;
464460

465461
//Checklist dropdown lists
466462
.sg-checkbox {
467-
@extend .icon-checkbox-unchecked;
463+
@extend .icon-radio-unchecked;
468464

469465
&:before {
470466
display: inline-block;
471467
margin-right: 0.4em;
472468
}
473469

474470
&.active {
475-
@extend .icon-checkbox-checked;
471+
@extend .icon-radio-checked;
476472
}
477473
}
478474

@@ -917,6 +913,7 @@ div.clear {
917913

918914
.icon-search:before {
919915
content: "\e600";
916+
font-size: 85%;
920917
}
921918
.icon-cog:before {
922919
content: "\e601";

0 commit comments

Comments
 (0)