Skip to content

Commit 3c8a8cb

Browse files
bugybugy
committed
refactor(styles): #52 removed scss functions from css styles (moved to variables) + adjusted hover/focus to better reflect latest material design
1 parent 47e5044 commit 3c8a8cb

File tree

9 files changed

+131
-90
lines changed

9 files changed

+131
-90
lines changed

‎sass/components/_buttons.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,6 @@
5353
}
5454
}
5555

56-
// Shared focus button style
57-
.btn,
58-
.btn-floating {
59-
&:focus {
60-
background-color: darken($button-raised-background, 10%);
61-
}
62-
}
63-
6456
// Raised Button
6557
.btn {
6658
text-decoration: none;
@@ -75,6 +67,10 @@
7567
background-color: $button-raised-background-hover;
7668
@extend .z-depth-1-half;
7769
}
70+
&:focus {
71+
background-color: $button-raised-background-focus;
72+
@extend .z-depth-1-half;
73+
}
7874
}
7975

8076
// Floating button
@@ -83,6 +79,10 @@
8379
background-color: $button-floating-background-hover;
8480
@extend .z-depth-1-half;
8581
}
82+
&:focus {
83+
background-color: $button-floating-background-focus;
84+
@extend .z-depth-1-half;
85+
}
8686
&:before {
8787
border-radius: 0;
8888
}

‎sass/components/_dropdown.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
$dropdown-bg-color: $bg-color !default;
2+
$dropdown-hover-bg-color: $bg-hover-color-opaque !default;
3+
$dropdown-focus-bg-color: $bg-focus-color-opaque !default;
4+
$dropdown-color: $secondary-color !default;
5+
$dropdown-item-height: 50px !default;
6+
7+
18
.dropdown-content {
29
&:focus {
310
outline: 0;
@@ -68,7 +75,7 @@
6875

6976
body.keyboard-focused {
7077
.dropdown-content li:focus {
71-
background-color: darken($dropdown-hover-bg-color, 8%);
78+
background-color: $dropdown-focus-bg-color;
7279
}
7380
}
7481

‎sass/components/_global.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -647,7 +647,7 @@ td, th{
647647
height: 4px;
648648
display: block;
649649
width: 100%;
650-
background-color: lighten($progress-bar-color, 40%);
650+
background-color: $progress-bar-track-color;
651651
border-radius: 2px;
652652
margin: $element-top-margin 0 $element-bottom-margin 0;
653653
overflow: hidden;

‎sass/components/_sidenav.scss‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,33 +33,31 @@
3333
float: none;
3434
line-height: $sidenav-line-height;
3535

36-
&.active { background-color: rgba(0,0,0,.05); }
36+
&.active {
37+
background-color: rgba(0, 0, 0, .05);
38+
}
3739
}
3840

3941
li > a {
40-
color: $sidenav-font-color;
4142
display: block;
4243
font-size: $sidenav-font-size;
4344
font-weight: 500;
4445
height: $sidenav-item-height;
4546
line-height: $sidenav-line-height;
4647
padding: 0 ($sidenav-padding * 2);
4748

48-
&:hover { background-color: rgba(0,0,0,.05);}
49+
&:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating) {
50+
color: $sidenav-font-color;
51+
52+
&:hover {
53+
background-color: rgba(0, 0, 0, .05);
54+
}
55+
}
4956

5057
&.btn, &.btn-large, &.btn-flat, &.btn-floating {
5158
margin: 10px 15px;
5259
}
5360

54-
&.btn,
55-
&.btn-large,
56-
&.btn-floating { color: $button-raised-color; }
57-
&.btn-flat { color: $button-flat-color; }
58-
59-
&.btn:hover,
60-
&.btn-large:hover { background-color: lighten($button-raised-background, 5%); }
61-
&.btn-floating:hover { background-color: $button-raised-background; }
62-
6361
& > i,
6462
& > [class^="mdi-"], li > a > [class*="mdi-"],
6563
& > i.material-icons {
@@ -68,7 +66,7 @@
6866
line-height: $sidenav-line-height;
6967
margin: 0 ($sidenav-padding * 2) 0 0;
7068
width: $sidenav-item-height / 2;
71-
color: rgba(0,0,0,.54);
69+
color: rgba(0, 0, 0, .54);
7270
}
7371
}
7472

@@ -84,7 +82,7 @@
8482

8583
cursor: initial;
8684
pointer-events: none;
87-
color: rgba(0,0,0,.54);
85+
color: rgba(0, 0, 0, .54);
8886
font-size: $sidenav-font-size;
8987
font-weight: 500;
9088
line-height: $sidenav-line-height;
@@ -96,7 +94,10 @@
9694
margin-bottom: $sidenav-padding / 2;
9795

9896
& > a {
99-
&:hover { background-color: transparent; }
97+
&:hover {
98+
background-color: transparent;
99+
}
100+
100101
height: auto;
101102
padding: 0;
102103
}
@@ -192,10 +193,12 @@
192193
.sidenav .collapsible-body > ul:not(.collapsible) > li.active,
193194
.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
194195
background-color: $primary-color;
196+
195197
a {
196198
color: $sidenav-bg-color;
197199
}
198200
}
201+
199202
.sidenav .collapsible-body {
200203
padding: 0;
201204
}
@@ -208,7 +211,7 @@
208211
right: 0;
209212
opacity: 0;
210213
height: 120vh;
211-
background-color: rgba(0,0,0,.5);
214+
background-color: rgba(0, 0, 0, .5);
212215
z-index: 997;
213216
display: none;
214217
}

‎sass/components/_tabs.scss‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1+
$tabs-text-active-color: $primary-color-font-emphasize-color !default;
2+
$tabs-text-inactive-color: $primary-color-font-medium-color !default;
3+
$tabs-text-disabled-color: $primary-color-font-disabled-color !default;
4+
$tabs-underline-color: $tabs-text-active-color !default;
5+
$tabs-bg-color: $bg-color !default;
6+
17
.tabs {
28
&.tabs-transparent {
39
background-color: transparent;
410

511
.tab a,
612
.tab.disabled a,
713
.tab.disabled a:hover {
8-
color: rgba(255,255,255,0.7);
14+
color: rgba(255, 255, 255, 0.7);
915
}
1016

1117
.tab a:hover,
@@ -45,19 +51,28 @@
4551
text-transform: uppercase;
4652

4753
a {
54+
&.active {
55+
background-color: transparent;
56+
}
57+
58+
&.active,
59+
&:focus,
60+
&:hover {
61+
color: $tabs-text-active-color;
62+
}
63+
64+
4865
&:focus,
4966
&:focus.active {
50-
background-color: transparentize($tabs-underline-color, .8);
67+
background-color: $primary-color-focus-opaque;
5168
outline: none;
5269
}
5370

54-
&:hover,
55-
&.active {
56-
background-color: transparent;
57-
color: $tabs-text-color;
71+
&:hover {
72+
background-color: $primary-color-hover-opaque;
5873
}
5974

60-
color: rgba($tabs-text-color, .7);
75+
color: $tabs-text-inactive-color;
6176
display: block;
6277
width: 100%;
6378
height: 100%;
@@ -70,10 +85,15 @@
7085

7186
&.disabled a,
7287
&.disabled a:hover {
73-
color: rgba($tabs-text-color, .4);
88+
&:not(:focus) {
89+
background-color: transparent;
90+
}
91+
92+
color: $tabs-text-disabled-color;
7493
cursor: default;
7594
}
7695
}
96+
7797
.indicator {
7898
position: absolute;
7999
bottom: 0;

‎sass/components/_timepicker.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100

101101
.timepicker-tick.active,
102102
.timepicker-tick:hover {
103-
background-color: transparentize($secondary-color, .75);
103+
background-color: $secondary-color-hover-opaque;
104104
}
105105
.timepicker-dial {
106106
transition: transform 350ms, opacity 350ms;

‎sass/components/_variables.scss‎

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@
1212
// 6. Collapsible
1313
// 7. Chips
1414
// 8. Date + Time Picker
15-
// 9. Dropdown
15+
// 9. -
1616
// 10. Forms
1717
// 11. Global
1818
// 12. Grid
1919
// 13. Navigation Bar
2020
// 14. Side Navigation
2121
// 15. Photo Slider
2222
// 16. Spinners | Loaders
23-
// 17. Tabs
23+
// 17. -
2424
// 18. Tables
2525
// 19. Toasts
2626
// 20. Typography
@@ -35,14 +35,27 @@
3535
// ==========================================================================
3636

3737
$primary-color: color("materialize-red", "lighten-2") !default;
38-
$primary-color-light: lighten($primary-color, 15%) !default;
39-
$primary-color-dark: darken($primary-color, 15%) !default;
38+
$primary-color-font-emphasize-color: $primary-color;
39+
$primary-color-font-medium-color: rgba($primary-color, 0.7);
40+
$primary-color-font-disabled-color: rgba($primary-color, 0.4);
41+
$primary-color-hover-opaque: rgba($primary-color, 0.06);
42+
$primary-color-focus-opaque: rgba($primary-color, 0.18);
4043

4144
$secondary-color: color("teal", "lighten-1") !default;
4245
$success-color: color("green", "base") !default;
4346
$error-color: color("red", "base") !default;
4447
$link-color: color("light-blue", "darken-1") !default;
4548

49+
$bg-color: #FFFFFF;
50+
$bg-hover-color-opaque: rgba(0, 0, 0, 0.04);
51+
$bg-hover-color-solid: darken($bg-color, 4%);
52+
$bg-focus-color-opaque: rgba(0, 0, 0, 0.12);
53+
$bg-focus-color-solid: darken($bg-color, 12%);
54+
55+
$hover-on-secondary-color: lighten($secondary-color, 4%);
56+
$focus-on-secondary-color: lighten($secondary-color, 12%);
57+
$secondary-color-hover-opaque: rgba($secondary-color, 0.08);
58+
$secondary-color-focus-opaque: rgba($secondary-color, 0.24);
4659

4760
// 2. Badges
4861
// ==========================================================================
@@ -54,9 +67,15 @@ $badge-height: 22px !default;
5467
// 3. Buttons
5568
// ==========================================================================
5669

70+
// Raised buttons
71+
$button-raised-background: $secondary-color !default;
72+
$button-raised-background-hover: $hover-on-secondary-color !default;
73+
$button-raised-background-focus: $focus-on-secondary-color !default;
74+
$button-raised-color: #fff !default;
75+
5776
// Shared styles
5877
$button-border: none !default;
59-
$button-background-focus: lighten($secondary-color, 4%) !default;
78+
$button-background-focus: $button-raised-background-focus !default;
6079
$button-font-size: 14px !default;
6180
$button-icon-font-size: 1.3rem !default;
6281
$button-height: 36px !default;
@@ -67,11 +86,6 @@ $button-radius: 2px !default;
6786
$button-disabled-background: #DFDFDF !default;
6887
$button-disabled-color: #9F9F9F !default;
6988

70-
// Raised buttons
71-
$button-raised-background: $secondary-color !default;
72-
$button-raised-background-hover: lighten($button-raised-background, 5%) !default;
73-
$button-raised-color: #fff !default;
74-
7589
// Large buttons
7690
$button-large-font-size: 15px !default;
7791
$button-large-icon-font-size: 1.6rem !default;
@@ -89,9 +103,10 @@ $button-flat-color: #343434 !default;
89103
$button-flat-disabled-color: lighten(#999, 10%) !default;
90104

91105
// Floating buttons
92-
$button-floating-background: $secondary-color !default;
93-
$button-floating-background-hover: $button-floating-background !default;
94-
$button-floating-color: #fff !default;
106+
$button-floating-background: $button-raised-background !default;
107+
$button-floating-background-hover: $button-raised-background-hover !default;
108+
$button-floating-background-focus: $button-raised-background-focus !default;
109+
$button-floating-color: $button-raised-color !default;
95110
$button-floating-size: 40px !default;
96111
$button-floating-radius: 50% !default;
97112

@@ -150,15 +165,6 @@ $timepicker-clock-color: rgba(0, 0, 0, .87) !default;
150165
$timepicker-clock-plate-bg: #eee !default;
151166

152167

153-
// 9. Dropdown
154-
// ==========================================================================
155-
156-
$dropdown-bg-color: #fff !default;
157-
$dropdown-hover-bg-color: #eee !default;
158-
$dropdown-color: $secondary-color !default;
159-
$dropdown-item-height: 50px !default;
160-
161-
162168
// 10. Forms
163169
// ==========================================================================
164170

@@ -184,6 +190,7 @@ $placeholder-text-color: lighten($input-border-color, 20%) !default;
184190

185191
// Radio Buttons
186192
$radio-fill-color: $secondary-color !default;
193+
$radio-focus-color: $secondary-color-focus-opaque !default;
187194
$radio-empty-color: #5a5a5a !default;
188195
$radio-border: 2px solid $radio-fill-color !default;
189196

@@ -203,12 +210,6 @@ $select-padding: 5px !default;
203210
$select-radius: 2px !default;
204211
$select-disabled-color: rgba(0,0,0,.3) !default;
205212

206-
// Switches
207-
$switch-bg-color: $secondary-color !default;
208-
$switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%) !default;
209-
$switch-unchecked-bg: #F1F1F1 !default;
210-
$switch-unchecked-lever-bg: rgba(0,0,0,.38) !default;
211-
$switch-radius: 15px !default;
212213

213214

214215
// 11. Global
@@ -276,14 +277,9 @@ $slider-indicator-color: color('green', 'base') !default;
276277
$spinner-default-color: $secondary-color !default;
277278

278279

279-
// 17. Tabs
280+
// 17. -
280281
// ==========================================================================
281282

282-
$tabs-underline-color: $primary-color-light !default;
283-
$tabs-text-color: $primary-color !default;
284-
$tabs-bg-color: #fff !default;
285-
286-
287283
// 18. Tables
288284
// ==========================================================================
289285

@@ -347,3 +343,4 @@ $collection-line-height: 1.5rem !default;
347343
// ==========================================================================
348344

349345
$progress-bar-color: $secondary-color !default;
346+
$progress-bar-track-color: lighten($progress-bar-color, 40%) !default;

0 commit comments

Comments
 (0)