Switch to more straight forward scss $var names
This commit is contained in:
parent
a9315803f0
commit
75a72397e3
12 changed files with 44 additions and 44 deletions
|
@ -1,4 +1,4 @@
|
||||||
$gold-primary: #ECB200;
|
$gold1: #ECB200;
|
||||||
$gold-secondary: lighten($gold-primary, 5%);
|
$gold2: lighten($gold1, 5%);
|
||||||
$blue-primary: darken(#e4eff8, 35%);
|
$blue1: darken(#e4eff8, 35%);
|
||||||
$white-primary: #FFF;
|
$white: #FFF;
|
||||||
|
|
|
@ -2,10 +2,10 @@
|
||||||
@import "colors";
|
@import "colors";
|
||||||
|
|
||||||
.row.title {
|
.row.title {
|
||||||
color: $blue-primary;
|
color: $blue1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.dropdown-row .react-select {
|
.row.dropdown-row .react-select {
|
||||||
color: $gold-primary;
|
color: $gold1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,31 +1,31 @@
|
||||||
|
|
||||||
.play.icon {
|
.play.icon {
|
||||||
fill: $blue-primary;
|
fill: $blue1;
|
||||||
stroke: darken($blue-primary, 40%);
|
stroke: darken($blue1, 40%);
|
||||||
stroke-width: 2px;
|
stroke-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pause.icon {
|
.pause.icon {
|
||||||
background: unset;
|
background: unset;
|
||||||
rect {
|
rect {
|
||||||
fill: $blue-primary;
|
fill: $blue1;
|
||||||
stroke: darken($blue-primary, 40%);
|
stroke: darken($blue1, 40%);
|
||||||
stroke-width: 1px;
|
stroke-width: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.refresh.icon {
|
.refresh.icon {
|
||||||
background: unset;
|
background: unset;
|
||||||
fill: $blue-primary;
|
fill: $blue1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stalled.icon {
|
.stalled.icon {
|
||||||
div { background: $gold-secondary; }
|
div { background: $gold2; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.sound-on.icon, .sound-off.icon {
|
.sound-on.icon, .sound-off.icon {
|
||||||
polygon {
|
polygon {
|
||||||
fill: $blue-primary;
|
fill: $blue1;
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,10 +2,10 @@
|
||||||
@import "themes/blue/colors";
|
@import "themes/blue/colors";
|
||||||
.react-select.theme {
|
.react-select.theme {
|
||||||
.selected-option.blue .circle {
|
.selected-option.blue .circle {
|
||||||
background: $blue-primary;
|
background: $blue1;
|
||||||
}
|
}
|
||||||
ul li.blue .circle {
|
ul li.blue .circle {
|
||||||
background: $blue-primary;
|
background: $blue1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,17 +7,17 @@
|
||||||
|
|
||||||
ul.body.index li.surah a {
|
ul.body.index li.surah a {
|
||||||
&:active, &:link, &:visited {
|
&:active, &:link, &:visited {
|
||||||
color: $blue-primary;
|
color: $blue1;
|
||||||
}
|
}
|
||||||
|
|
||||||
div:first-child .id {
|
div:first-child .id {
|
||||||
color: $gold-secondary;
|
color: $gold2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.surah.choose-random {
|
.row.surah.choose-random {
|
||||||
&:active, &:link, &:visited {
|
&:active, &:link, &:visited {
|
||||||
color: $blue-primary;
|
color: $blue1;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
@ -3,17 +3,17 @@
|
||||||
@import "themes/blue/components/Icon";
|
@import "themes/blue/components/Icon";
|
||||||
|
|
||||||
.row.details {
|
.row.details {
|
||||||
color: $gold-primary;
|
color: $gold1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.footer .timer {
|
.row.footer .timer {
|
||||||
color: $blue-primary;
|
color: $blue1;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.body.stream {
|
ul.body.stream {
|
||||||
li.ayah {
|
li.ayah {
|
||||||
span.title span {
|
span.title span {
|
||||||
color: $gold-primary;
|
color: $gold1;
|
||||||
}
|
}
|
||||||
p { }
|
p { }
|
||||||
}
|
}
|
||||||
|
@ -26,7 +26,7 @@
|
||||||
.row.dropdown-row {
|
.row.dropdown-row {
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
span.surah-name {
|
span.surah-name {
|
||||||
color: lighten($gold-primary, 25%);
|
color: lighten($gold1, 25%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,2 +1,2 @@
|
||||||
$green: #606850;
|
$green1: #606850;
|
||||||
$white-primary: #FFF;
|
$white: #FFF;
|
||||||
|
|
|
@ -2,11 +2,11 @@
|
||||||
@import "colors";
|
@import "colors";
|
||||||
|
|
||||||
.row.title {
|
.row.title {
|
||||||
color: $green;
|
color: $green1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.dropdown-row .react-select {
|
.row.dropdown-row .react-select {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: $green;
|
color: $green1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
.play.icon {
|
.play.icon {
|
||||||
background: unset;
|
background: unset;
|
||||||
g path {
|
g path {
|
||||||
fill: $green;
|
fill: $green1;
|
||||||
stroke: $green;
|
stroke: $green1;
|
||||||
stroke-width: 3px;
|
stroke-width: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -11,14 +11,14 @@
|
||||||
.pause.icon {
|
.pause.icon {
|
||||||
background: unset;
|
background: unset;
|
||||||
g rect {
|
g rect {
|
||||||
fill: $green;
|
fill: $green1;
|
||||||
stroke: $green;
|
stroke: $green1;
|
||||||
stroke-width: 1px;
|
stroke-width: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.refresh.icon {
|
.refresh.icon {
|
||||||
background: unset;
|
background: unset;
|
||||||
fill: $green;
|
fill: $green1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,10 +2,10 @@
|
||||||
@import "themes/green/colors";
|
@import "themes/green/colors";
|
||||||
.react-select.theme {
|
.react-select.theme {
|
||||||
.selected-option.green .circle {
|
.selected-option.green .circle {
|
||||||
background: $green;
|
background: $green1;
|
||||||
}
|
}
|
||||||
ul li.green .circle {
|
ul li.green .circle {
|
||||||
background: $green;
|
background: $green1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,12 +3,12 @@
|
||||||
|
|
||||||
ul.body.index a {
|
ul.body.index a {
|
||||||
&:active, &:link, &:visited {
|
&:active, &:link, &:visited {
|
||||||
color: $green;
|
color: $green1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.surah.id {
|
.surah.id {
|
||||||
background: $green;
|
background: $green1;
|
||||||
color: $white-primary;
|
color: $white;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
}
|
}
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
|
|
||||||
.row.surah.choose-random {
|
.row.surah.choose-random {
|
||||||
&:active, &:link, &:visited {
|
&:active, &:link, &:visited {
|
||||||
color: $green;
|
color: $green1;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
@ -3,31 +3,31 @@
|
||||||
@import "themes/green/components/Icon";
|
@import "themes/green/components/Icon";
|
||||||
|
|
||||||
.row.details {
|
.row.details {
|
||||||
color: $green;
|
color: $green1;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.body.stream li.ayah {
|
ul.body.stream li.ayah {
|
||||||
span.title span:first-child {
|
span.title span:first-child {
|
||||||
color: $green;
|
color: $green1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.timer {
|
.timer {
|
||||||
color: $green;
|
color: $green1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row .shape.refresh {
|
.row .shape.refresh {
|
||||||
background: unset;
|
background: unset;
|
||||||
fill: $green;
|
fill: $green1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stalled.icon {
|
.stalled.icon {
|
||||||
background: $green;
|
background: $green1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sound-on.icon, .svg.sound-off.icon {
|
.sound-on.icon, .svg.sound-off.icon {
|
||||||
polygon {
|
polygon {
|
||||||
fill: $green;
|
fill: $green1;
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -38,7 +38,7 @@
|
||||||
|
|
||||||
.row.dropdown-row {
|
.row.dropdown-row {
|
||||||
.surah-name {
|
.surah-name {
|
||||||
color: lighten($green, 15%);
|
color: lighten($green1, 15%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue