Skip to content

Commit

Permalink
Merge pull request materializecss#213 from bugy/color-variables
Browse files Browse the repository at this point in the history
  • Loading branch information
DanielRuf authored Oct 25, 2021
2 parents 360f549 + 8643039 commit 84a4547
Show file tree
Hide file tree
Showing 13 changed files with 160 additions and 115 deletions.
12 changes: 6 additions & 6 deletions js/timepicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@

// Append popover to input by default
const optEl = this.options.container;
let containerEl = (optEl instanceof HTMLElement?optEl:document.querySelector(optEl));
let containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
if (this.options.container && !!containerEl) {
this.$modalEl.appendTo(containerEl);
} else {
Expand All @@ -238,8 +238,8 @@
this.vibrate = navigator.vibrate
? 'vibrate'
: navigator.webkitVibrate
? 'webkitVibrate'
: null;
? 'webkitVibrate'
: null;

this._canvas = this.modalEl.querySelector('.timepicker-canvas');
this.plate = this.modalEl.querySelector('.timepicker-plate');
Expand Down Expand Up @@ -341,7 +341,7 @@
if (this.options.twelveHour) {
for (let i = 1; i < 13; i += 1) {
let tick = $tick.clone();
let radian = i / 6 * Math.PI;
let radian = (i / 6) * Math.PI;
let radius = this.options.outerRadius;
tick.css({
left:
Expand All @@ -356,7 +356,7 @@
} else {
for (let i = 0; i < 24; i += 1) {
let tick = $tick.clone();
let radian = i / 6 * Math.PI;
let radian = (i / 6) * Math.PI;
let inner = i > 0 && i < 13;
let radius = inner ? this.options.innerRadius : this.options.outerRadius;
tick.css({
Expand All @@ -377,7 +377,7 @@
// Minutes view
for (let i = 0; i < 60; i += 5) {
let tick = $tick.clone();
let radian = i / 30 * Math.PI;
let radian = (i / 30) * Math.PI;
tick.css({
left:
this.options.dialRadius +
Expand Down
41 changes: 17 additions & 24 deletions sass/_style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,13 @@ nav {
// background-color: color("materialize-red", "lighten-2");

a {
color: rgba(0,0,0,.87);
color: $font-color-main;
}
ul li a:hover, ul li.active {
background-color: color("materialize-red", "lighten-1");
ul li a:hover {
background-color: $primary-color-when-hovered-solid;
}
ul li.active {
background-color: $primary-color-when-focused-solid;
}
}

Expand All @@ -42,7 +45,7 @@ td, th {
}

.header {
color: color("materialize-red", "lighten-2");
color: $primary-color;
font-weight: 300;
}

Expand Down Expand Up @@ -182,7 +185,7 @@ a.sidenav-trigger.top-nav {
top: 28px;
float: none;
margin-left: 1.5rem;
color: color("materialize-red", "lighten-3");
color: $primary-color;
font-size: 36px;
z-index: 2;

Expand Down Expand Up @@ -308,9 +311,9 @@ a.sidenav-trigger.top-nav {
#download-button,
#upgrade-button {
&:hover {
background-color: lighten(color("materialize-red", "base"), 30%);
background-color: $primary-color-when-hovered-solid;
}
background-color: color("materialize-red", "lighten-2");
background-color: $primary-color;
width: 260px;
height: 70px;
margin: 4px;
Expand All @@ -325,7 +328,7 @@ a.sidenav-trigger.top-nav {

i {
margin: 40px 0;
color: color("materialize-red", "lighten-2");
color: $primary-color;
font-size: 7rem;
display: block;
}
Expand All @@ -343,14 +346,14 @@ a.sidenav-trigger.top-nav {
background-color: #FFF;
position: relative;
a {
color: color("materialize-red", "lighten-2");
color: $primary-color;
}
li {
&:hover {
background-color: color("materialize-red", "lighten-5");
background-color: $primary-color-when-hovered-solid;
}
&.active {
background-color: color("materialize-red", "lighten-5");
background-color: $primary-color-when-focused-solid;
}
}
.container {
Expand Down Expand Up @@ -390,11 +393,11 @@ a.sidenav-trigger.top-nav {
height: 300px;
}
#site-layout-example-right {
background-color: color("teal", "lighten-1");
background-color: $secondary-color;
height: 300px;
}
#site-layout-example-top {
background-color: color("red", "lighten-2");
background-color: $primary-color;
height: 42px;
}

Expand Down Expand Up @@ -566,7 +569,7 @@ thead {

// Shadow demo styling
.shadow-demo {
background-color: color("teal", "lighten-1");
background-color: $secondary-color;
width: 100px;
height: 100px;
margin: 20px auto;
Expand Down Expand Up @@ -594,18 +597,8 @@ thead {
ul.table-of-contents {
margin-top: 0;
padding-top: 48px;

a {
&.active {
color: rgba(0,0,0,.8);
}
color: rgba(0,0,0,.55);
font-weight: 400;
}
}



// Prism Styling
code, pre {
position: relative;
Expand Down
2 changes: 1 addition & 1 deletion sass/components/_badges.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ span.badge {
font-size: 1rem;
line-height: $badge-height;
height: $badge-height;
color: color('grey', 'darken-1');
color: $badge-color;
float: right;
box-sizing: border-box;

Expand Down
16 changes: 8 additions & 8 deletions sass/components/_buttons.scss
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
4 changes: 2 additions & 2 deletions sass/components/_dropdown.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@

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

Expand All @@ -82,4 +82,4 @@ body.keyboard-focused {

.dropdown-trigger {
cursor: pointer;
}
}
4 changes: 2 additions & 2 deletions sass/components/_global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ a {
.divider {
height: 1px;
overflow: hidden;
background-color: color("grey", "lighten-2");
background-color: $divider-color;
}


Expand Down Expand Up @@ -528,7 +528,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
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 * 0.5;
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 * 0.5;

& > 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;
}
11 changes: 6 additions & 5 deletions sass/components/_table_of_contents.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,23 @@
li {
padding: 2px 0;
}

a {
display: inline-block;
font-weight: 300;
color: #757575;
font-weight: 400;
color: $font-color-medium;
padding-left: 16px;
height: 1.5rem;
line-height: 1.5rem;
letter-spacing: .4;
display: inline-block;

&:hover {
color: lighten(#757575, 20%);
color: $font-color-main;
padding-left: 15px;
border-left: 1px solid $primary-color;
}

&.active {
color: $font-color-main;
font-weight: 500;
padding-left: 14px;
border-left: 2px solid $primary-color;
Expand Down
Loading

0 comments on commit 84a4547

Please sign in to comment.