Skip to content

Commit

Permalink
materializecss#52: removed scss functions from css styles (moved to v…
Browse files Browse the repository at this point in the history 
…ariables) + adjusted hover/focus to better reflect latest material design
  • Loading branch information
@bugy
bugy committed Mar 22, 2021
1 parent 94ad89c commit 3694625
Show file tree
Hide file tree
Showing 9 changed files with 131 additions and 90 deletions.
16 changes: 8 additions & 8 deletions sass/components/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,6 @@
}
}

// Shared focus button style
.btn,
.btn-floating {
&:focus {
background-color: darken($button-raised-background, 10%);
}
}

// Raised Button
.btn {
text-decoration: none;
Expand All @@ -75,6 +67,10 @@
background-color: $button-raised-background-hover;
@extend .z-depth-1-half;
}
&:focus {
background-color: $button-raised-background-focus;
@extend .z-depth-1-half;
}
}

// Floating button
Expand All @@ -83,6 +79,10 @@
background-color: $button-floating-background-hover;
@extend .z-depth-1-half;
}
&:focus {
background-color: $button-floating-background-focus;
@extend .z-depth-1-half;
}
&:before {
border-radius: 0;
}
Expand Down
9 changes: 8 additions & 1 deletion sass/components/_dropdown.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
$dropdown-bg-color: $bg-color !default;
$dropdown-hover-bg-color: $bg-hover-color-opaque !default;
$dropdown-focus-bg-color: $bg-focus-color-opaque !default;
$dropdown-color: $secondary-color !default;
$dropdown-item-height: 50px !default;


.dropdown-content {
&:focus {
outline: 0;
Expand Down Expand Up @@ -68,7 +75,7 @@

body.keyboard-focused {
.dropdown-content li:focus {
background-color: darken($dropdown-hover-bg-color, 8%);
background-color: $dropdown-focus-bg-color;
}
}

Expand Down
2 changes: 1 addition & 1 deletion sass/components/_global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -647,7 +647,7 @@ td, th{
height: 4px;
display: block;
width: 100%;
background-color: lighten($progress-bar-color, 40%);
background-color: $progress-bar-track-color;
border-radius: 2px;
margin: $element-top-margin 0 $element-bottom-margin 0;
overflow: hidden;
Expand Down
35 changes: 19 additions & 16 deletions sass/components/_sidenav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,33 +33,31 @@
float: none;
line-height: $sidenav-line-height;

&.active { background-color: rgba(0,0,0,.05); }
&.active {
background-color: rgba(0, 0, 0, .05);
}
}

li > a {
color: $sidenav-font-color;
display: block;
font-size: $sidenav-font-size;
font-weight: 500;
height: $sidenav-item-height;
line-height: $sidenav-line-height;
padding: 0 ($sidenav-padding * 2);

&:hover { background-color: rgba(0,0,0,.05);}
&:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating) {
color: $sidenav-font-color;

&:hover {
background-color: rgba(0, 0, 0, .05);
}
}

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

&.btn,
&.btn-large,
&.btn-floating { color: $button-raised-color; }
&.btn-flat { color: $button-flat-color; }

&.btn:hover,
&.btn-large:hover { background-color: lighten($button-raised-background, 5%); }
&.btn-floating:hover { background-color: $button-raised-background; }

& > i,
& > [class^="mdi-"], li > a > [class*="mdi-"],
& > i.material-icons {
Expand All @@ -68,7 +66,7 @@
line-height: $sidenav-line-height;
margin: 0 ($sidenav-padding * 2) 0 0;
width: $sidenav-item-height / 2;
color: rgba(0,0,0,.54);
color: rgba(0, 0, 0, .54);
}
}

Expand All @@ -84,7 +82,7 @@

cursor: initial;
pointer-events: none;
color: rgba(0,0,0,.54);
color: rgba(0, 0, 0, .54);
font-size: $sidenav-font-size;
font-weight: 500;
line-height: $sidenav-line-height;
Expand All @@ -96,7 +94,10 @@
margin-bottom: $sidenav-padding / 2;

& > a {
&:hover { background-color: transparent; }
&:hover {
background-color: transparent;
}

height: auto;
padding: 0;
}
Expand Down Expand Up @@ -192,10 +193,12 @@
.sidenav .collapsible-body > ul:not(.collapsible) > li.active,
.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
background-color: $primary-color;

a {
color: $sidenav-bg-color;
}
}

.sidenav .collapsible-body {
padding: 0;
}
Expand All @@ -208,7 +211,7 @@
right: 0;
opacity: 0;
height: 120vh;
background-color: rgba(0,0,0,.5);
background-color: rgba(0, 0, 0, .5);
z-index: 997;
display: none;
}
36 changes: 28 additions & 8 deletions sass/components/_tabs.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
$tabs-text-active-color: $primary-color-font-emphasize-color !default;
$tabs-text-inactive-color: $primary-color-font-medium-color !default;
$tabs-text-disabled-color: $primary-color-font-disabled-color !default;
$tabs-underline-color: $tabs-text-active-color !default;
$tabs-bg-color: $bg-color !default;

.tabs {
&.tabs-transparent {
background-color: transparent;

.tab a,
.tab.disabled a,
.tab.disabled a:hover {
color: rgba(255,255,255,0.7);
color: rgba(255, 255, 255, 0.7);
}

.tab a:hover,
Expand Down Expand Up @@ -45,19 +51,28 @@
text-transform: uppercase;

a {
&.active {
background-color: transparent;
}

&.active,
&:focus,
&:hover {
color: $tabs-text-active-color;
}


&:focus,
&:focus.active {
background-color: transparentize($tabs-underline-color, .8);
background-color: $primary-color-focus-opaque;
outline: none;
}

&:hover,
&.active {
background-color: transparent;
color: $tabs-text-color;
&:hover {
background-color: $primary-color-hover-opaque;
}

color: rgba($tabs-text-color, .7);
color: $tabs-text-inactive-color;
display: block;
width: 100%;
height: 100%;
Expand All @@ -70,10 +85,15 @@

&.disabled a,
&.disabled a:hover {
color: rgba($tabs-text-color, .4);
&:not(:focus) {
background-color: transparent;
}

color: $tabs-text-disabled-color;
cursor: default;
}
}

.indicator {
position: absolute;
bottom: 0;
Expand Down
2 changes: 1 addition & 1 deletion sass/components/_timepicker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@

.timepicker-tick.active,
.timepicker-tick:hover {
background-color: transparentize($secondary-color, .75);
background-color: $secondary-color-hover-opaque;
}
.timepicker-dial {
transition: transform 350ms, opacity 350ms;
Expand Down
65 changes: 31 additions & 34 deletions sass/components/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@
// 6. Collapsible
// 7. Chips
// 8. Date + Time Picker
// 9. Dropdown
// 9. -
// 10. Forms
// 11. Global
// 12. Grid
// 13. Navigation Bar
// 14. Side Navigation
// 15. Photo Slider
// 16. Spinners | Loaders
// 17. Tabs
// 17. -
// 18. Tables
// 19. Toasts
// 20. Typography
Expand All @@ -35,14 +35,27 @@
// ==========================================================================

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

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

$bg-color: #FFFFFF;
$bg-hover-color-opaque: rgba(0, 0, 0, 0.04);
$bg-hover-color-solid: darken($bg-color, 4%);
$bg-focus-color-opaque: rgba(0, 0, 0, 0.12);
$bg-focus-color-solid: darken($bg-color, 12%);

$hover-on-secondary-color: lighten($secondary-color, 4%);
$focus-on-secondary-color: lighten($secondary-color, 12%);
$secondary-color-hover-opaque: rgba($secondary-color, 0.08);
$secondary-color-focus-opaque: rgba($secondary-color, 0.24);

// 2. Badges
// ==========================================================================
Expand All @@ -54,9 +67,15 @@ $badge-height: 22px !default;
// 3. Buttons
// ==========================================================================

// Raised buttons
$button-raised-background: $secondary-color !default;
$button-raised-background-hover: $hover-on-secondary-color !default;
$button-raised-background-focus: $focus-on-secondary-color !default;
$button-raised-color: #fff !default;

// Shared styles
$button-border: none !default;
$button-background-focus: lighten($secondary-color, 4%) !default;
$button-background-focus: $button-raised-background-focus !default;
$button-font-size: 14px !default;
$button-icon-font-size: 1.3rem !default;
$button-height: 36px !default;
Expand All @@ -67,11 +86,6 @@ $button-radius: 2px !default;
$button-disabled-background: #DFDFDF !default;
$button-disabled-color: #9F9F9F !default;

// Raised buttons
$button-raised-background: $secondary-color !default;
$button-raised-background-hover: lighten($button-raised-background, 5%) !default;
$button-raised-color: #fff !default;

// Large buttons
$button-large-font-size: 15px !default;
$button-large-icon-font-size: 1.6rem !default;
Expand All @@ -89,9 +103,10 @@ $button-flat-color: #343434 !default;
$button-flat-disabled-color: lighten(#999, 10%) !default;

// Floating buttons
$button-floating-background: $secondary-color !default;
$button-floating-background-hover: $button-floating-background !default;
$button-floating-color: #fff !default;
$button-floating-background: $button-raised-background !default;
$button-floating-background-hover: $button-raised-background-hover !default;
$button-floating-background-focus: $button-raised-background-focus !default;
$button-floating-color: $button-raised-color !default;
$button-floating-size: 40px !default;
$button-floating-radius: 50% !default;

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


// 9. Dropdown
// ==========================================================================

$dropdown-bg-color: #fff !default;
$dropdown-hover-bg-color: #eee !default;
$dropdown-color: $secondary-color !default;
$dropdown-item-height: 50px !default;


// 10. Forms
// ==========================================================================

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

// Radio Buttons
$radio-fill-color: $secondary-color !default;
$radio-focus-color: $secondary-color-focus-opaque !default;
$radio-empty-color: #5a5a5a !default;
$radio-border: 2px solid $radio-fill-color !default;

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

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


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


// 17. Tabs
// 17. -
// ==========================================================================

$tabs-underline-color: $primary-color-light !default;
$tabs-text-color: $primary-color !default;
$tabs-bg-color: #fff !default;


// 18. Tables
// ==========================================================================

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

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

0 comments on commit 3694625

Please sign in to comment.