From d00292fbb95a43d862d6802e7755b06d2dd42760 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Thu, 9 May 2019 19:04:17 +0200
Subject: [PATCH] Migrate from CSS to SCSS. There's still a lot of potential,
though.
---
css/uhr-black.scss | 26 ++++++++-------
css/{uhr-red.css => uhr-blue.scss} | 28 ++++++++--------
css/{uhr-blue.css => uhr-green.scss} | 28 ++++++++--------
css/uhr-pink.css | 41 -----------------------
css/uhr-pink.scss | 43 ++++++++++++++++++++++++
css/{uhr-green.css => uhr-red.scss} | 28 ++++++++--------
css/{uhr-white.css => uhr-white.scss} | 44 +++++++++++++------------
css/{uhr-yellow.css => uhr-yellow.scss} | 44 +++++++++++++------------
dist/assets/uhr-black.css | 2 +-
dist/assets/uhr-blue.css | 2 +-
dist/assets/uhr-green.css | 2 +-
dist/assets/uhr-pink.css | 2 +-
dist/assets/uhr-red.css | 2 +-
dist/assets/uhr-white.css | 2 +-
dist/assets/uhr-yellow.css | 2 +-
webpack.common.js | 12 +++----
16 files changed, 161 insertions(+), 147 deletions(-)
rename css/{uhr-red.css => uhr-blue.scss} (59%)
rename css/{uhr-blue.css => uhr-green.scss} (60%)
delete mode 100644 css/uhr-pink.css
create mode 100644 css/uhr-pink.scss
rename css/{uhr-green.css => uhr-red.scss} (59%)
rename css/{uhr-white.css => uhr-white.scss} (50%)
rename css/{uhr-yellow.css => uhr-yellow.scss} (50%)
diff --git a/css/uhr-black.scss b/css/uhr-black.scss
index bf55a62..764c4be 100644
--- a/css/uhr-black.scss
+++ b/css/uhr-black.scss
@@ -12,20 +12,22 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
-.uhr.black {
- background-color: #111;
+.black {
+ &.uhr {
+ background-color: #111;
- .dot:not(.active) {
- border-color: rgba(255, 255, 255, 0.1);
- box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
+ .dot:not(.active) {
+ border-color: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
+ }
+
+ .letter:not(.active) {
+ color: rgba(255, 255, 255, 0.1);
+ text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
+ }
}
- .letter:not(.active) {
- color: rgba(255, 255, 255, 0.1);
- text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
+ .onoffswitch-inner:before {
+ background-color: #111;
}
}
-
-.black .onoffswitch-inner:before {
- background-color: #111;
-}
diff --git a/css/uhr-red.css b/css/uhr-blue.scss
similarity index 59%
rename from css/uhr-red.css
rename to css/uhr-blue.scss
index 621517c..613e709 100644
--- a/css/uhr-red.css
+++ b/css/uhr-blue.scss
@@ -12,20 +12,22 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
-.uhr.red {
- background-color: #700;
-}
+.blue {
+ &.uhr {
+ background-color: #00a;
-.red .onoffswitch-inner:before {
- background-color: #700;
-}
+ .dot:not(.active) {
+ border-color: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
+ }
-.uhr.red .dot:not(.active) {
- border-color: rgba(255, 255, 255, 0.1);
- box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
-}
+ .letter:not(.active) {
+ color: rgba(255, 255, 255, 0.1);
+ text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
+ }
+ }
-.uhr.red .letter:not(.active) {
- color: rgba(255, 255, 255, 0.1);
- text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
+ .onoffswitch-inner:before {
+ background-color: #00a;
+ }
}
diff --git a/css/uhr-blue.css b/css/uhr-green.scss
similarity index 60%
rename from css/uhr-blue.css
rename to css/uhr-green.scss
index 743fc10..56b9abb 100644
--- a/css/uhr-blue.css
+++ b/css/uhr-green.scss
@@ -12,20 +12,22 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
-.uhr.blue {
- background-color: #00a;
-}
+.green {
+ &.uhr {
+ background-color: #0c0;
-.blue .onoffswitch-inner:before {
- background-color: #00a;
-}
+ .dot:not(.active) {
+ border-color: rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1);
+ }
-.uhr.blue .dot:not(.active) {
- border-color: rgba(255, 255, 255, 0.1);
- box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
-}
+ .letter:not(.active) {
+ color: rgba(0, 0, 0, 0.1);
+ text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1);
+ }
+ }
-.uhr.blue .letter:not(.active) {
- color: rgba(255, 255, 255, 0.1);
- text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
+ .onoffswitch-inner:before {
+ background-color: #0c0;
+ }
}
diff --git a/css/uhr-pink.css b/css/uhr-pink.css
deleted file mode 100644
index 27525f4..0000000
--- a/css/uhr-pink.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program. If not, see <http://www.gnu.org/licenses/>.
-*/
-.uhr.pink {
- background-color: #f0a;
-}
-
-.uhr.pink .dot.active {
- border-color: #fff;
- box-shadow: 0 0 0.1em #fff;
-}
-
-.uhr.pink .letter.active {
- color: #fff;
- text-shadow: 0 0 0.1em #fff;
-}
-
-.pink .onoffswitch-inner:before {
- background-color: #f0a;
-}
-
-.uhr.pink .dot:not(.active) {
- border-color: rgba(255, 255, 255, 0.1);
- box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
-}
-
-.uhr.pink .letter:not(.active) {
- color: rgba(255, 255, 255, 0.1);
- text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
-}
diff --git a/css/uhr-pink.scss b/css/uhr-pink.scss
new file mode 100644
index 0000000..5c9a3dd
--- /dev/null
+++ b/css/uhr-pink.scss
@@ -0,0 +1,43 @@
+/*
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+*/
+.pink {
+ &.uhr {
+ background-color: #f0a;
+
+ .dot.active {
+ border-color: #fff;
+ box-shadow: 0 0 0.1em #fff;
+ }
+
+ .letter.active {
+ color: #fff;
+ text-shadow: 0 0 0.1em #fff;
+ }
+
+ .dot:not(.active) {
+ border-color: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
+ }
+
+ .letter:not(.active) {
+ color: rgba(255, 255, 255, 0.1);
+ text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
+ }
+ }
+
+ .onoffswitch-inner:before {
+ background-color: #f0a;
+ }
+}
diff --git a/css/uhr-green.css b/css/uhr-red.scss
similarity index 59%
rename from css/uhr-green.css
rename to css/uhr-red.scss
index bd821a5..428ee49 100644
--- a/css/uhr-green.css
+++ b/css/uhr-red.scss
@@ -12,20 +12,22 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
-.uhr.green {
- background-color: #0c0;
-}
+.red {
+ &.uhr {
+ background-color: #700;
-.green .onoffswitch-inner:before {
- background-color: #0c0;
-}
+ .dot:not(.active) {
+ border-color: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
+ }
-.uhr.green .dot:not(.active) {
- border-color: rgba(0, 0, 0, 0.1);
- box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1);
-}
+ .letter:not(.active) {
+ color: rgba(255, 255, 255, 0.1);
+ text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
+ }
+ }
-.uhr.green .letter:not(.active) {
- color: rgba(0, 0, 0, 0.1);
- text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1);
+ .onoffswitch-inner:before {
+ background-color: #700;
+ }
}
diff --git a/css/uhr-white.css b/css/uhr-white.scss
similarity index 50%
rename from css/uhr-white.css
rename to css/uhr-white.scss
index 7989be0..969d1a0 100644
--- a/css/uhr-white.css
+++ b/css/uhr-white.scss
@@ -12,30 +12,32 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
-.uhr.white {
- background-color: #ccc;
-}
+.white {
+ &.uhr {
+ background-color: #ccc;
-.uhr.white .dot.active {
- border-color: #fff;
- box-shadow: 0 0 0.1em #fff;
-}
+ .dot.active {
+ border-color: #fff;
+ box-shadow: 0 0 0.1em #fff;
+ }
-.uhr.white .letter.active {
- color: #fff;
- text-shadow: 0 0 0.1em #fff;
-}
+ .letter.active {
+ color: #fff;
+ text-shadow: 0 0 0.1em #fff;
+ }
-.white .onoffswitch-inner:before {
- background-color: #ccc;
-}
+ .dot:not(.active) {
+ border-color: rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1);
+ }
-.uhr.white .dot:not(.active) {
- border-color: rgba(0, 0, 0, 0.1);
- box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1);
-}
+ .letter:not(.active) {
+ color: rgba(0, 0, 0, 0.1);
+ text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1);
+ }
+ }
-.uhr.white .letter:not(.active) {
- color: rgba(0, 0, 0, 0.1);
- text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1);
+ .onoffswitch-inner:before {
+ background-color: #ccc;
+ }
}
diff --git a/css/uhr-yellow.css b/css/uhr-yellow.scss
similarity index 50%
rename from css/uhr-yellow.css
rename to css/uhr-yellow.scss
index d109178..9d44d1b 100644
--- a/css/uhr-yellow.css
+++ b/css/uhr-yellow.scss
@@ -12,30 +12,32 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
-.uhr.yellow {
- background-color: #fd0;
-}
+.yellow {
+ &.uhr {
+ background-color: #fd0;
-.uhr.yellow .dot.active {
- border-color: #fff;
- box-shadow: 0 0 0.1em #fff;
-}
+ .dot.active {
+ border-color: #fff;
+ box-shadow: 0 0 0.1em #fff;
+ }
-.uhr.yellow .letter.active {
- color: #fff;
- text-shadow: 0 0 0.1em #fff;
-}
+ .letter.active {
+ color: #fff;
+ text-shadow: 0 0 0.1em #fff;
+ }
-.yellow .onoffswitch-inner:before {
- background-color: #fd0;
-}
+ .dot:not(.active) {
+ border-color: rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.05);
+ }
-.uhr.yellow .dot:not(.active) {
- border-color: rgba(0, 0, 0, 0.05);
- box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.05);
-}
+ .letter:not(.active) {
+ color: rgba(0, 0, 0, 0.05);
+ text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.05);
+ }
+ }
-.uhr.yellow .letter:not(.active) {
- color: rgba(0, 0, 0, 0.05);
- text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.05);
+ .onoffswitch-inner:before {
+ background-color: #fd0;
+ }
}
diff --git a/dist/assets/uhr-black.css b/dist/assets/uhr-black.css
index 21b75c7..e02e7f2 100644
--- a/dist/assets/uhr-black.css
+++ b/dist/assets/uhr-black.css
@@ -1 +1 @@
-.uhr.black{background-color:#111}.uhr.black .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.black .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}.black .onoffswitch-inner:before{background-color:#111}
+.black.uhr{background-color:#111}.black.uhr .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.black.uhr .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}.black .onoffswitch-inner:before{background-color:#111}
diff --git a/dist/assets/uhr-blue.css b/dist/assets/uhr-blue.css
index 85d8597..92e51e6 100644
--- a/dist/assets/uhr-blue.css
+++ b/dist/assets/uhr-blue.css
@@ -1 +1 @@
-.uhr.blue{background-color:#00a}.blue .onoffswitch-inner:before{background-color:#00a}.uhr.blue .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.blue .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}
+.blue.uhr{background-color:#00a}.blue.uhr .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.blue.uhr .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}.blue .onoffswitch-inner:before{background-color:#00a}
diff --git a/dist/assets/uhr-green.css b/dist/assets/uhr-green.css
index cdd5d56..77a98dd 100644
--- a/dist/assets/uhr-green.css
+++ b/dist/assets/uhr-green.css
@@ -1 +1 @@
-.uhr.green{background-color:#0c0}.green .onoffswitch-inner:before{background-color:#0c0}.uhr.green .dot:not(.active){border-color:rgba(0,0,0,0.1);box-shadow:0 0 0.1em rgba(0,0,0,0.1)}.uhr.green .letter:not(.active){color:rgba(0,0,0,0.1);text-shadow:0 0 0.1em rgba(0,0,0,0.1)}
+.green.uhr{background-color:#0c0}.green.uhr .dot:not(.active){border-color:rgba(0,0,0,0.1);box-shadow:0 0 0.1em rgba(0,0,0,0.1)}.green.uhr .letter:not(.active){color:rgba(0,0,0,0.1);text-shadow:0 0 0.1em rgba(0,0,0,0.1)}.green .onoffswitch-inner:before{background-color:#0c0}
diff --git a/dist/assets/uhr-pink.css b/dist/assets/uhr-pink.css
index 657023f..efde2c3 100644
--- a/dist/assets/uhr-pink.css
+++ b/dist/assets/uhr-pink.css
@@ -1 +1 @@
-.uhr.pink{background-color:#f0a}.uhr.pink .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.uhr.pink .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.pink .onoffswitch-inner:before{background-color:#f0a}.uhr.pink .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.pink .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}
+.pink.uhr{background-color:#f0a}.pink.uhr .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.pink.uhr .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.pink.uhr .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.pink.uhr .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}.pink .onoffswitch-inner:before{background-color:#f0a}
diff --git a/dist/assets/uhr-red.css b/dist/assets/uhr-red.css
index b572799..fd902e7 100644
--- a/dist/assets/uhr-red.css
+++ b/dist/assets/uhr-red.css
@@ -1 +1 @@
-.uhr.red{background-color:#700}.red .onoffswitch-inner:before{background-color:#700}.uhr.red .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.red .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}
+.red.uhr{background-color:#700}.red.uhr .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.red.uhr .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}.red .onoffswitch-inner:before{background-color:#700}
diff --git a/dist/assets/uhr-white.css b/dist/assets/uhr-white.css
index 92639d2..c921f95 100644
--- a/dist/assets/uhr-white.css
+++ b/dist/assets/uhr-white.css
@@ -1 +1 @@
-.uhr.white{background-color:#ccc}.uhr.white .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.uhr.white .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.white .onoffswitch-inner:before{background-color:#ccc}.uhr.white .dot:not(.active){border-color:rgba(0,0,0,0.1);box-shadow:0 0 0.1em rgba(0,0,0,0.1)}.uhr.white .letter:not(.active){color:rgba(0,0,0,0.1);text-shadow:0 0 0.1em rgba(0,0,0,0.1)}
+.white.uhr{background-color:#ccc}.white.uhr .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.white.uhr .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.white.uhr .dot:not(.active){border-color:rgba(0,0,0,0.1);box-shadow:0 0 0.1em rgba(0,0,0,0.1)}.white.uhr .letter:not(.active){color:rgba(0,0,0,0.1);text-shadow:0 0 0.1em rgba(0,0,0,0.1)}.white .onoffswitch-inner:before{background-color:#ccc}
diff --git a/dist/assets/uhr-yellow.css b/dist/assets/uhr-yellow.css
index 7292498..60a4638 100644
--- a/dist/assets/uhr-yellow.css
+++ b/dist/assets/uhr-yellow.css
@@ -1 +1 @@
-.uhr.yellow{background-color:#fd0}.uhr.yellow .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.uhr.yellow .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.yellow .onoffswitch-inner:before{background-color:#fd0}.uhr.yellow .dot:not(.active){border-color:rgba(0,0,0,0.05);box-shadow:0 0 0.1em rgba(0,0,0,0.05)}.uhr.yellow .letter:not(.active){color:rgba(0,0,0,0.05);text-shadow:0 0 0.1em rgba(0,0,0,0.05)}
+.yellow.uhr{background-color:#fd0}.yellow.uhr .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.yellow.uhr .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.yellow.uhr .dot:not(.active){border-color:rgba(0,0,0,0.05);box-shadow:0 0 0.1em rgba(0,0,0,0.05)}.yellow.uhr .letter:not(.active){color:rgba(0,0,0,0.05);text-shadow:0 0 0.1em rgba(0,0,0,0.05)}.yellow .onoffswitch-inner:before{background-color:#fd0}
diff --git a/webpack.common.js b/webpack.common.js
index 711f0b1..9109683 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -17,12 +17,12 @@ module.exports = (env, argv) => ({
layout_pt: require.resolve('./src/layout/layout-pt.ts'),
style_main: require.resolve('./resources/styles/uhr.scss'),
style_black: require.resolve('./css/uhr-black.scss'),
- style_blue: require.resolve('./css/uhr-blue.css'),
- style_green: require.resolve('./css/uhr-green.css'),
- style_pink: require.resolve('./css/uhr-pink.css'),
- style_red: require.resolve('./css/uhr-red.css'),
- style_white: require.resolve('./css/uhr-white.css'),
- style_yellow: require.resolve('./css/uhr-yellow.css')
+ style_blue: require.resolve('./css/uhr-blue.scss'),
+ style_green: require.resolve('./css/uhr-green.scss'),
+ style_pink: require.resolve('./css/uhr-pink.scss'),
+ style_red: require.resolve('./css/uhr-red.scss'),
+ style_white: require.resolve('./css/uhr-white.scss'),
+ style_yellow: require.resolve('./css/uhr-yellow.scss')
},
module: {
rules: [