secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Build process improvements

Browse Source 
- Ensure static directory is always fully regenerated, to ensure
  reproducibility
- Exclude Photoshop and Illustrator assets from the static directory
- Switch from node-sass to sass, because not everyone has a C compiler
  available or can easily work with node-gyp
- Fix many sass compilation errors and warnings
This commit is contained in:
Matthew Gamble
2021-01-07 14:38:00 +11:00
parent 37a06a304c
commit 2c671bd89c
50 changed files with 487 additions and 4841 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/scss/components/_autocomplete-field.scss
View File

@ -32,11 +32,11 @@
left: 0;
right: 0;
z-index: 97;
background: colour(dark_grey);
color: colour(white);
background: colour('dark_grey');
color: colour('white');
.type {
&:not(:first-child){
&:not(:first-child) {
padding-top: 5px;
}
@ -50,11 +50,11 @@
.result {
display: block;
padding: 10px 14px;
border-top: 1px solid lighten(colour(dark_grey), 10%);
border-top: 1px solid lighten(colour('dark_grey'), 10%);
cursor: pointer;
&:hover {
background: lighten(colour(dark_grey), 10%);
background: lighten(colour('dark_grey'), 10%);
}
}
}
@ -62,12 +62,12 @@
.all-results {
display: block;
padding: 10px 14px;
border-top: 1px solid lighten(colour(dark_grey), 10%);
border-top: 1px solid lighten(colour('dark_grey'), 10%);
cursor: pointer;
font-weight: bold;
&:hover {
background: lighten(colour(dark_grey), 10%);
background: lighten(colour('dark_grey'), 10%);
}
}
}

4
src/scss/components/_colour-field.scss
View File

@ -4,7 +4,7 @@
@include animate(0.1s);
display: inline-block;
border-radius: 3px;
background: colour(grey);
background: colour('grey');
width: 26px;
height: 26px;
margin: 2px 8px 2px 0;
@ -44,4 +44,4 @@
}
}
}
}
}

6
src/scss/components/_commands.scss
View File

@ -2,7 +2,7 @@
.commands {
&__item {
text-align: center;
color: colour(white);
color: colour('white');
display: inline-block;
position: relative;
width: 26px;
@ -25,7 +25,7 @@
left: 0;
width: 100%;
padding-bottom: 100%;
background: colour(grey);
background: colour('grey');
z-index: -1;
border-radius: 50%;
opacity: 1;
@ -56,4 +56,4 @@
cursor: pointer;
}
}
}
}

42
src/scss/components/_context-menu.scss
View File

@ -29,7 +29,7 @@
width: 100%;
&__link--close-submenu {
color: colour(mid_grey);
color: colour('mid_grey');
}
&__label {
@ -79,8 +79,8 @@
}
.notouch &:active {
background: colour(turquoise);
color: colour(white);
background: colour('turquoise');
color: colour('white');
}
.icon {
@ -104,7 +104,7 @@
font-style: normal;
&.context-menu__item:last-of-type {
border-bottom: 1px solid colour(middle_grey);
border-bottom: 1px solid colour('middle_grey');
}
}
@ -112,7 +112,7 @@
height: 1px;
padding: 0;
margin: 0;
background: colour(middle_grey);
background: colour('middle_grey');
opacity: 0.5;
}
@ -138,11 +138,11 @@
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
@include theme('light') {
background: colour(white);
background: colour('white');
}
@include theme('dark') & {
background: colour(grey);
@include theme('dark') {
background: colour('grey');
}
&--closing {
@ -160,12 +160,12 @@
right: 0;
bottom: 0;
@include theme('dark') & {
background: colour(grey);
@include theme('dark') {
background: colour('grey');
}
@include theme('light') {
background: colour(white);
background: colour('white');
}
}
}
@ -204,11 +204,11 @@
&__title {
@include clearfix();
color: colour(mid_grey);
color: colour('mid_grey');
padding: 16px 22px;
@include theme('light') {
color: colour(darkest_grey);
color: colour('darkest_grey');
}
.thumbnail {
@ -275,13 +275,13 @@
text-transform: none;
font-weight: 700;
font-size: 1.2rem;
color: colour(white);
color: colour('white');
background: none;
transform: none;
padding: 16px 22px;
@include theme('light') {
color: colour(darkest_grey);
color: colour('darkest_grey');
}
.icon {
@ -295,8 +295,8 @@
&:focus,
&:active {
@include noanimate();
color: colour(white) !important;
background: colour(turquoise) !important;
color: colour('white') !important;
background: colour('turquoise') !important;
}
}
}
@ -317,7 +317,7 @@
box-sizing: border-box;
@include theme('light') {
color: colour(darkest_grey);
color: colour('darkest_grey');
}
&:before {
@ -327,8 +327,8 @@
&:focus,
&:active {
@include noanimate();
color: colour(white) !important;
background: colour(turquoise) !important;
color: colour('white') !important;
background: colour('turquoise') !important;
}
}
}
@ -355,4 +355,4 @@
@include responsive($bp_medium){
padding: 12px;
}
}
}

4
src/scss/components/_debug.scss
View File

@ -8,7 +8,7 @@
z-index: 96;
padding: 10px;
background: rgba(100,100,100, 0.8);
color: colour(white);
color: colour('white');
pointer-events: none;
width: 220px;
max-width: 98vw;
@ -21,4 +21,4 @@
padding-top: 0;
}
}
}
}

20
src/scss/components/_dragger.scss
View File

@ -15,8 +15,8 @@
left: 0;
top: 0;
z-index: 97;
background: colour(blue);
color: colour(white);
background: colour('blue');
color: colour('white');
padding: 12px 20px;
pointer-events: none;
}
@ -28,10 +28,10 @@
width: 100%;
height: 100%;
z-index: 98;
background: darken(colour(dark_grey), 1%);
background: darken(colour('dark_grey'), 1%);
@include theme('light') {
background: colour(faint_grey);
background: colour('faint_grey');
}
.dropzone {
@ -39,16 +39,16 @@
@include gradient_overlay(3px,0);
margin: 15px;
padding: 40px 20px;
background: colour(grey);
background: colour('grey');
border: 5px solid transparent;
border-radius: 3px;
color: colour(white);
color: colour('white');
font-size: 18px;
text-align: center;
@include theme('light') {
background: colour(light_grey);
color: colour(darkest_grey);
background: colour('light_grey');
color: colour('darkest_grey');
}
& * {
@ -62,11 +62,11 @@
}
&.hover {
border-color: colour(blue);
border-color: colour('blue');
&:before {
opacity: 0.15;
}
}
}
}
}

30
src/scss/components/_dropdown-field.scss
View File

@ -25,14 +25,14 @@
cursor: pointer;
.notouch &:hover {
color: colour(blue);
color: colour('blue');
}
}
}
&--expanded {
.label:not(.button) {
color: colour(blue);
color: colour('blue');
}
.dropdown-field__options {
display: block;
@ -66,7 +66,7 @@
display: block;
width: 6px;
height: 6px;
background: colour(white);
background: colour('white');
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
@ -75,20 +75,20 @@
right: 9px;
@include theme('light') {
background: colour(white);
background: colour('white');
}
}
&__liner {
color: colour(black);
background: colour(white);
color: colour('black');
background: colour('white');
min-width: 120px;
max-height: 70vh;
overflow-y: auto;
border-radius: 3px;
@include theme('light') {
background: colour(white);
background: colour('white');
}
}
@ -98,7 +98,7 @@
position: relative;
padding: 9px 12px 8px 24px;
cursor: pointer;
color: colour(darkest_grey);
color: colour('darkest_grey');
.icon {
position: absolute;
@ -108,7 +108,7 @@
}
.notouch &:hover {
color: colour(darkest_grey);
color: colour('darkest_grey');
&:before {
opacity: 0.15;
@ -145,10 +145,10 @@
&,
&:hover {
color: colour(white);
color: colour('white');
@include theme('light') {
color: colour(dark_grey) !important;
color: colour('dark_grey') !important;
}
}
}
@ -169,11 +169,11 @@
&__liner {
background: transparent;
color: colour(white) !important;
color: colour('white') !important;
margin: -3px -5px;
@include theme('light') {
color: colour(dark_grey) !important;
color: colour('dark_grey') !important;
}
&:before {
@ -185,10 +185,10 @@
display: block;
padding: 3px 5px;
border-radius: 0;
color: colour(white) !important;
color: colour('white') !important;
@include theme('light') {
color: colour(dark_grey) !important;
color: colour('dark_grey') !important;
}
&:before {

6
src/scss/components/_error-message.scss
View File

@ -8,11 +8,11 @@
top: 40px;
left: 40px;
font-size: 2rem;
color: colour(red);
color: colour('red');
}
&__title {
color: colour(red);
color: colour('red');
padding: 4px 0 10px 0 !important;
margin: 0;
}
@ -20,4 +20,4 @@
&__trace {
padding: 10px;
}
}
}

8
src/scss/components/_filter-field.scss
View File

@ -33,7 +33,7 @@
&:hover {
.icon {
color: colour(blue);
color: colour('blue');
}
}
}
@ -46,7 +46,7 @@
.icon {
&:hover {
color: colour(red);
color: colour('red');
cursor: pointer;
}
}
@ -77,9 +77,9 @@
border-bottom: 2px solid rgba(128,128,128,0.25);
&:focus {
border-color: colour(white);
border-color: colour('white');
}
}
}
}
}
}

37
src/scss/components/_grid.scss
View File

@ -29,7 +29,7 @@
&__secondary {
@include one_line_text;
padding-top: 2px;
color: colour(secondary_grey);
color: colour('secondary_grey');
.source {
padding-right: 6px;
@ -74,7 +74,7 @@
text-align: center;
font-size: 14px;
font-weight: 600;
color: colour(white);
color: colour('white');
z-index: 2;
}
}
@ -103,11 +103,12 @@
.grid__item {
@include grid_item(5);
}
&--single-row {
// This doesn't build with dart-sass, and doesn't compile to something that works at all under node-sass
/*&--single-row {
.grid-item:nth-child(1n + 6) {
display: none;
}
}
}*/
}
}
@ -126,11 +127,12 @@
.grid__item {
@include grid_item(4);
}
&--single-row {
// This doesn't build with dart-sass, and doesn't compile to something that works at all under node-sass
/*&--single-row {
.grid-item:nth-child(1n + 5) {
display: none;
}
}
}*/
}
}
@ -149,11 +151,12 @@
.grid__item {
@include grid_item(4);
}
&--single-row {
// This doesn't build with dart-sass, and doesn't compile to something that works at all under node-sass
/*&--single-row {
.grid-item:nth-child(1n + 5) {
display: none;
}
}
}*/
}
}
@ -172,11 +175,12 @@
.grid__item {
@include grid_item(3, 2%, 4%);
}
&--single-row {
// This doesn't build with dart-sass, and doesn't compile to something that works at all under node-sass
/*&--single-row {
.grid-item:nth-child(1n + 4) {
display: none;
}
}
}*/
}
}
@ -195,11 +199,12 @@
.grid__item {
@include grid_item(2, 2%, 4%);
}
&--single-row {
// This doesn't build with dart-sass, and doesn't compile to something that works at all under node-sass
/*&--single-row {
.grid-item:nth-child(1n + 5) {
display: none;
}
}
}*/
}
}
}
@ -208,7 +213,7 @@
padding-bottom: 60px;
.tile {
color: colour(white);
color: colour('white');
text-align: center;
position: relative;
z-index: 1;
@ -217,7 +222,7 @@
border-radius: 3px;
@include theme('light') {
color: colour(darkest_grey);
color: colour('darkest_grey');
}
.content {
@ -241,11 +246,11 @@
display: block;
width: 100%;
padding-bottom: 100%;
background: lighten(colour(dark_grey), 2%);
background: lighten(colour('dark_grey'), 2%);
z-index: -2;
@include theme('light') {
background: darken(colour(faint_grey), 5%);
background: darken(colour('faint_grey'), 5%);
}
}

10
src/scss/components/_header.scss
View File

@ -42,12 +42,12 @@ main {
padding: 13px 10px;
margin: 0;
min-width: 0;
color: colour(light_grey);
color: colour('light_grey');
vertical-align: unset;
border: none;
&:hover {
color: colour(blue);
color: colour('blue');
box-shadow: none;
&:before {
@ -56,10 +56,10 @@ main {
}
@include theme('light') {
color: colour(darkest_grey);
color: colour('darkest_grey');
&:hover {
color: colour(blue);
color: colour('blue');
}
&:active {
@ -107,4 +107,4 @@ main {
}
}
}
}
}

4
src/scss/components/_icon-field.scss
View File

@ -13,7 +13,7 @@
&--selected {
&:after {
background: colour(grey) !important;
background: colour('grey') !important;
@include theme('light') {
background: rgba(128,128,128,0.4) !important;
@ -53,4 +53,4 @@
}
}
}
}
}

4
src/scss/components/_icon.scss
View File

@ -82,7 +82,7 @@
bottom: 0;
width: 4px;
height: 100%;
background: colour(turquoise);
background: colour('turquoise');
animation-name: playing_bar;
animation-iteration-count: infinite;
@ -110,4 +110,4 @@
}
}
}
}
}

4
src/scss/components/_images.scss
View File

@ -83,12 +83,12 @@
background: rgba(0,0,0,0.4);
font-size: 2rem;
cursor: pointer;
color: colour(white);
color: colour('white');
border: 0 !important;
margin: 0 5px;
&:hover {
background: colour(black);
background: colour('black');
}
}
}

18
src/scss/components/_lists.scss
View File

@ -28,7 +28,7 @@
bottom: 0;
right: 0;
height: 3px;
background: colour(blue);
background: colour('blue');
opacity: 0;
}
@ -81,7 +81,7 @@
}
/*
.icon.source {
color: colour(mid_grey);
color: colour('mid_grey');
position: absolute;
top: 16px;
right: 40px;
@ -115,7 +115,7 @@
&__column {
&__item {
&--name {
color: colour(turquoise);
color: colour('turquoise');
.icon {
padding-left: 5px;
@ -252,9 +252,11 @@
}
}
@include theme('light') .flag {
background: colour(light_grey);
color: colour(white);
@include theme('light') {
.flag {
background: colour('light_grey');
color: colour('white');
}
}
}
}
@ -283,7 +285,7 @@
width: 34px;
font-size: 14px;
display: block;
color: colour(mid_grey);
color: colour('mid_grey');
padding: 0;
.icon {
@ -352,4 +354,4 @@
}
}
}
}
}

8
src/scss/components/_loader.scss
View File

@ -14,7 +14,7 @@ h4 {
&__offline {
padding: 2rem;
color: colour(middle_grey);
color: colour('middle_grey');
text-align: center;
font-size: 1rem;
@ -27,7 +27,7 @@ h4 {
&__progress-text {
text-align: center;
color: colour(middle_grey);
color: colour('middle_grey');
margin: -65px auto 0;
font-size: 0.82rem;
}
@ -58,7 +58,7 @@ h4 {
&__foreground {
@include spin();
stroke: colour(blue);
stroke: colour('blue');
}
}
@ -73,7 +73,7 @@ h4 {
}
&__foreground {
stroke: colour(white);
stroke: colour('white');
}
}
}

20
src/scss/components/_notifications.scss
View File

@ -12,8 +12,8 @@
position: relative;
padding: 0.9rem 1rem;
margin: 0.5rem;
background: colour(soft_grey);
color: colour(white);
background: colour('soft_grey');
color: colour('white');
pointer-events: all;
border-radius: 3px;
font-size: 0.9rem;
@ -86,21 +86,21 @@
&--good,
&--success {
background: colour(green);
background: colour('green');
}
&--broadcast {
background: colour(yellow);
color: colour(black);
background: colour('yellow');
color: colour('black');
}
&--warning {
background: colour(orange);
background: colour('orange');
}
&--bad,
&--error {
background: colour(red);
background: colour('red');
}
&--shortcut {
@ -110,8 +110,8 @@
height: 400px;
width: 400px;
margin: -200px 0 0 -200px;
background: colour(overlay_dark);
color: colour(white);
background: colour('overlay_dark');
color: colour('white');
border-radius: 10px;
text-align: center;
@ -168,4 +168,4 @@
bottom: 68px;
}
}
}
}

16
src/scss/components/_output-control.scss
View File

@ -21,21 +21,21 @@
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
z-index: 9;
@include theme('dark') & {
color: colour(white);
background: lighten(colour(grey), 4%);
@include theme('dark') {
color: colour('white');
background: lighten(colour('grey'), 4%);
&:after {
background: lighten(colour(grey), 4%);
background: lighten(colour('grey'), 4%);
}
}
@include theme('light') {
color: colour(darkest_grey);
background: colour(white);
color: colour('darkest_grey');
background: colour('white');
&:after {
background: colour(white);
background: colour('white');
}
}
@ -144,7 +144,7 @@
border-radius: 0;
max-height: 50vh;
@include theme('dark') & {
@include theme('dark') {
box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.6);
}

2
src/scss/components/_parallax.scss
View File

@ -98,7 +98,7 @@ $parallax: 'parallax';
@include theme('light') {
&__stage {
background-color: colour(faint_grey);
background-color: colour('faint_grey');
}
&__overlay {

6
src/scss/components/_pin-list.scss
View File

@ -10,10 +10,10 @@
opacity: 0;
&:not(:hover) {
color: colour(mid_grey);
color: colour('mid_grey');
@include theme('light') {
color: colour(soft_grey);
color: colour('soft_grey');
}
}
}
@ -24,4 +24,4 @@
}
}
}
}
}

22
src/scss/components/_playback-controls.scss
View File

@ -17,20 +17,20 @@
z-index: -1;
}
@include theme('dark') & {
color: colour(white);
@include theme('dark') {
color: colour('white');
&__background {
background: colour(grey);
background: colour('grey');
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.6);
}
}
@include theme('light') {
color: colour(darkest_grey);
color: colour('darkest_grey');
&__background {
background: colour(white);
background: colour('white');
box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.1);
}
}
@ -140,7 +140,7 @@
margin-right: 12px;
&__image {
background-color: colour(middle_grey);
background-color: colour('middle_grey');
}
&:before {
@ -156,7 +156,7 @@
margin-top: -9px;
text-align: center;
font-size: 18px;
color: colour(white);
color: colour('white');
z-index: 3;
opacity: 0;
}
@ -218,10 +218,10 @@
display: inline-block;
vertical-align: bottom;
background: none;
color: colour(white);
color: colour('white');
@include theme('light') {
color: colour(darkest_grey);
color: colour('darkest_grey');
}
.icon {
@ -230,7 +230,7 @@
}
&--active {
color: colour(turquoise) !important;
color: colour('turquoise') !important;
}
&:hover,
@ -252,7 +252,7 @@
&.play {
@include theme('light') {
color: colour(turquoise);
color: colour('turquoise');
}
.icon {

6
src/scss/components/_popularity.scss
View File

@ -10,7 +10,7 @@
width: 2px;
height: 0.5em;
margin: 0.25em 1px;
background: colour(light_grey);
background: colour('light_grey');
opacity: 0.2;
&.filled {
@ -18,7 +18,7 @@
}
@include theme('light') {
background: colour(darkest_grey);
background: colour('darkest_grey');
}
}
}
@ -26,4 +26,4 @@
&-value {
display: none;
}
}
}

4
src/scss/components/_related-artists.scss
View File

@ -34,10 +34,10 @@
border: 0;
.related-artists__item__thumbnail {
border-color: colour(turquoise);
border-color: colour('turquoise');
opacity: 1;
}
}
}
}
}
}

32
src/scss/components/_sidebar.scss
View File

@ -6,7 +6,7 @@
z-index: 96;
width: 220px;
overflow: hidden;
color: colour(white);
color: colour('white');
box-sizing: border-box;
transform-style: preserve-3d;
@ -32,7 +32,7 @@
font-family: "Overpass";
font-weight: 600;
font-size: 1.05rem;
color: colour(white);
color: colour('white');
text-decoration: none;
display: flex;
padding: 0.75em 0.85em;
@ -40,13 +40,13 @@
border-radius: 3px;
line-break: anywhere;
@include theme('dark') & {
@include theme('dark') {
@include gradient_overlay(3px);
}
@include theme('light') {
@include animate();
color: colour(darkest_grey);
color: colour('darkest_grey');
font-weight: 600;
}
@ -75,26 +75,26 @@
}
&.sidebar__menu__item {
color: colour(mid_grey);
color: colour('mid_grey');
@include theme('light') {
color: colour(soft_grey);
color: colour('soft_grey');
}
&--active {
background: transparent;
color: colour(turquoise) !important;
color: colour('turquoise') !important;
}
}
}
&--active {
background: colour(turquoise);
color: colour(white) !important;
background: colour('turquoise');
color: colour('white') !important;
.status {
.icon {
color: colour(white) !important;
color: colour('white') !important;
}
}
@ -114,7 +114,7 @@
}
@include theme('light') {
color: lighten(colour(darkest_grey), 20%);
color: lighten(colour('darkest_grey'), 20%);
}
}
@ -136,7 +136,7 @@
padding: 0 26px 5px 26px;
font-size: 12px;
text-transform: uppercase;
color: colour(middle_grey);
color: colour('middle_grey');
}
}
}
@ -152,7 +152,7 @@
z-index: 99;
@include theme('light') {
color: colour(darkest_grey);
color: colour('darkest_grey');
}
}
@ -166,11 +166,11 @@
z-index: 100;
@include theme('light') {
background: lighten(colour(faint_grey), 2%);
background: lighten(colour('faint_grey'), 2%);
}
@include theme('dark') & {
background: colour(darkest_grey);
@include theme('dark') {
background: colour('darkest_grey');
}
.sidebar-open & {

14
src/scss/components/_slider.scss
View File

@ -35,7 +35,7 @@
height: 12px;
top: -4px;
right: -6px;
background: lighten(colour(turquoise), 10%);
background: lighten(colour('turquoise'), 10%);
}
}
}
@ -52,7 +52,7 @@
&__progress {
position: absolute;
background: colour(turquoise);
background: colour('turquoise');
pointer-events: none;
top: 0;
left: 0;
@ -65,7 +65,7 @@
@include animate(0.1s);
content: '';
display: block;
background: colour(turquoise);
background: colour('turquoise');
position: absolute;
top: 0;
right: -1px;
@ -79,10 +79,10 @@
&--disabled,
&--muted {
.slider__track__progress {
background: colour(mid_grey);
background: colour('mid_grey');
&:after {
background: colour(mid_grey) !important;
background: colour('mid_grey') !important;
}
}
}
@ -95,7 +95,7 @@
height: 12px;
top: -4px;
right: -6px;
background: lighten(colour(turquoise), 10%);
background: lighten(colour('turquoise'), 10%);
}
}
}
@ -155,4 +155,4 @@
}
}
}
}
}

22
src/scss/components/_snapcast.scss
View File

@ -10,11 +10,11 @@
float: left;
padding: 8px 5px 0;
border: 0;
color: colour(white);
color: colour('white');
background: transparent;
@include theme('light') {
color: colour(darkest_grey);
color: colour('darkest_grey');
}
}
@ -62,13 +62,13 @@
&:hover {
.menu-item__inner {
background: lighten(colour(dark_grey), 8%);
background: lighten(colour('dark_grey'), 8%);
}
}
&--active {
.menu-item__inner {
background: lighten(colour(dark_grey), 8%);
background: lighten(colour('dark_grey'), 8%);
padding-bottom: 30px;
}
}
@ -76,17 +76,17 @@
@include theme('light') {
&:hover{
.menu-item__inner {
background: darken(colour(faint_grey), 8%);
background: darken(colour('faint_grey'), 8%);
}
&:after {
background: darken(colour(faint_grey), 8%);
background: darken(colour('faint_grey'), 8%);
}
}
&--active {
.menu-item__inner {
background: darken(colour(faint_grey), 8%);
background: darken(colour('faint_grey'), 8%);
}
}
}
@ -98,7 +98,7 @@
padding: 20px 20px 0 20px;
margin: 0 -20px -20px -20px;
border-radius: 0 0 3px 3px;
background: lighten(colour(dark_grey), 8%);
background: lighten(colour('dark_grey'), 8%);
.field:last-child {
padding-bottom: 0;
@ -110,7 +110,7 @@
}
@include theme('light') {
background: darken(colour(faint_grey), 8%);
background: darken(colour('faint_grey'), 8%);
}
&__volume-control {
@ -195,7 +195,7 @@
left: 50%;
bottom: 0;
width: 1px;
background: colour(grey);
background: colour('grey');
z-index: 0;
}
@ -242,4 +242,4 @@
display: block;
}
}
}
}

12
src/scss/components/_sources-priority-field.scss
View File

@ -12,16 +12,16 @@
font-size: 12px;
font-weight: normal;
background: rgba(255,255,255,0.1);
color: colour(white);
color: colour('white');
&.sortable-chosen {
background: colour(grey);
background: colour('grey');
}
.icon {
font-size: 14px;
padding-right: 0.1em;
color: colour(darkest_grey);
color: colour('darkest_grey');
}
&:hover {
@ -29,12 +29,12 @@
}
@include theme('light') {
background: colour(faint_grey);
background: colour('faint_grey');
color: inherit;
&:hover {
background: darken(colour(faint_grey), 4%);
background: darken(colour('faint_grey'), 4%);
}
}
}
}
}

14
src/scss/components/_sub-tabs.scss
View File

@ -60,10 +60,10 @@
&:hover {
.menu-item__inner {
background: lighten(colour(dark_grey), 4%);
background: lighten(colour('dark_grey'), 4%);
@include theme('light') {
background: darken(colour(faint_grey), 4%);
background: darken(colour('faint_grey'), 4%);
}
}
}
@ -76,14 +76,14 @@
&--active {
.menu-item__inner {
background: lighten(colour(dark_grey), 4%);
background: lighten(colour('dark_grey'), 4%);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding-bottom: 40px;
margin-bottom: 0;
@include theme('light') {
background: darken(colour(faint_grey), 4%);
background: darken(colour('faint_grey'), 4%);
}
}
}
@ -93,14 +93,14 @@
&__content {
padding: 20px;
border-radius: 0 0 3px 3px;
background: lighten(colour(dark_grey), 4%);
background: lighten(colour('dark_grey'), 4%);
.field:last-child {
padding-bottom: 0;
}
@include theme('light') {
background: darken(colour(faint_grey), 4%);
background: darken(colour('faint_grey'), 4%);
}
}
@ -140,4 +140,4 @@
margin-top: 0;
}
}
}
}

12
src/scss/components/_sub-views.scss
View File

@ -2,7 +2,7 @@
&__option {
@include feature_font();
@include animate();
color: colour(white);
color: colour('white');
display: inline-block;
margin-right: 25px;
font-size: 15px;
@ -12,7 +12,7 @@
cursor: pointer;
@include theme('light') {
color: colour(darkest_grey);
color: colour('darkest_grey');
}
h4 {
@ -27,18 +27,18 @@
}
&--active {
border-color: colour(white) !important;
border-color: colour('white') !important;
@include theme('light') {
border-color: colour(darkest_grey) !important;
border-color: colour('darkest_grey') !important;
}
}
&:not(.sub-views__option--active):hover {
border-color: colour(soft_grey) !important;
border-color: colour('soft_grey') !important;
@include theme('light') {
border-color: colour(light_grey) !important;
border-color: colour('light_grey') !important;
}
}
}

12
src/scss/components/_tooltip.scss
View File

@ -15,8 +15,8 @@ $module: 'tooltip';
padding: 8px 10px 6px;
border-radius: 3px;
pointer-events: none;
background: colour(white);
color: colour(black);
background: colour('white');
color: colour('black');
font-size: 11px;
z-index: 97;
white-space: nowrap;
@ -32,7 +32,7 @@ $module: 'tooltip';
display: block;
width: 6px;
height: 6px;
background: colour(white);
background: colour('white');
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
@ -42,11 +42,11 @@ $module: 'tooltip';
}
@include theme('light') {
background: colour(dark_grey);
color: colour(white);
background: colour('dark_grey');
color: colour('white');
&:after {
background: colour(dark_grey);
background: colour('dark_grey');
}
}
}