From c0a4272fcc15da322b3b63fb0a3e211e786504e0 Mon Sep 17 00:00:00 2001 From: TrueKuehli Date: Sun, 30 Sep 2018 16:04:18 +0200 Subject: Split up SASS into multiple files This will make adding pages much more easy, as some elements can be reused. --- .../src/style/partials/backdrop/_menu.scss | 41 ++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss (limited to 'WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss') diff --git a/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss b/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss new file mode 100644 index 0000000..e98c798 --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss @@ -0,0 +1,41 @@ +.backdrop { + .menu-actions { + box-sizing: border-box; + transition: max-height 200ms ease, color 200ms ease, background-color 100ms ease;; + position: relative; + max-height: 16rem; + margin: 0 1rem; + + .menu-option { + color: $primary-text; + text-decoration: none; + box-sizing: border-box; + display: inline-block; + font-size: 1.5rem; + width: 100%; + text-align: center; + padding: 1rem; + border: none; + border-radius: 8px; + cursor: pointer; + + &:hover { + background-color: $secondary-half-dark; + } + + &.active { + background-color: $secondary-dark; + } + } + + &.hidden { + max-height: 0; + color: rgba(0,0,0,0); + + .menu-option { + color: rgba(0,0,0,0); + background-color: rgba(0,0,0,0) !important; + } + } + } +} -- cgit v1.2.3-54-g00ecf From fe1356caa9a3739c338ff7d7b1e4e7a4b45c0b72 Mon Sep 17 00:00:00 2001 From: TrueKuehli Date: Sun, 30 Sep 2018 16:15:38 +0200 Subject: Moved color import to the modules requiring it --- WebInterface/NodeJSServer/src/style/index.scss | 1 - WebInterface/NodeJSServer/src/style/partials/_base.scss | 2 ++ WebInterface/NodeJSServer/src/style/partials/_btn.scss | 2 ++ WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss | 2 ++ WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss | 2 ++ .../NodeJSServer/src/style/partials/front-layer/_notifications.scss | 2 ++ .../NodeJSServer/src/style/partials/front-layer/_server-listing.scss | 2 ++ WebInterface/NodeJSServer/src/style/partials/modal/_base.scss | 4 +++- 8 files changed, 15 insertions(+), 2 deletions(-) (limited to 'WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss') diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss index da347cb..285a47b 100644 --- a/WebInterface/NodeJSServer/src/style/index.scss +++ b/WebInterface/NodeJSServer/src/style/index.scss @@ -1,4 +1,3 @@ -@import 'partials/colors'; @import 'partials/base'; @import 'partials/btn'; @import 'partials/backdrop/base'; diff --git a/WebInterface/NodeJSServer/src/style/partials/_base.scss b/WebInterface/NodeJSServer/src/style/partials/_base.scss index 77d5bdd..5f300fd 100644 --- a/WebInterface/NodeJSServer/src/style/partials/_base.scss +++ b/WebInterface/NodeJSServer/src/style/partials/_base.scss @@ -1,3 +1,5 @@ +@import 'colors'; + html,body { height: 100vh; margin: 0; diff --git a/WebInterface/NodeJSServer/src/style/partials/_btn.scss b/WebInterface/NodeJSServer/src/style/partials/_btn.scss index 6c41b1f..cf5ee33 100644 --- a/WebInterface/NodeJSServer/src/style/partials/_btn.scss +++ b/WebInterface/NodeJSServer/src/style/partials/_btn.scss @@ -1,3 +1,5 @@ +@import 'colors'; + .btn { border: none; border-radius: 4px; diff --git a/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss b/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss index b283c0b..1b7a924 100644 --- a/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss +++ b/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss @@ -1,3 +1,5 @@ +@import '../colors'; + .backdrop { background-color: $secondary; color: $secondary-text; diff --git a/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss b/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss index e98c798..26833d5 100644 --- a/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss +++ b/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss @@ -1,3 +1,5 @@ +@import '../colors'; + .backdrop { .menu-actions { box-sizing: border-box; diff --git a/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss b/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss index 1465b77..4dd7361 100644 --- a/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss +++ b/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss @@ -1,3 +1,5 @@ +@import '../colors'; + .front-layer { .banner { z-index: 1; diff --git a/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss b/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss index 2921e22..2efb73b 100644 --- a/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss +++ b/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss @@ -1,3 +1,5 @@ +@import '../colors'; + .front-layer { .server-listing { box-sizing: border-box; diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss index c8705e4..1e7742e 100644 --- a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss +++ b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss @@ -1,3 +1,5 @@ +@import '../colors'; + .modal-container { position:absolute; top: 0; @@ -13,7 +15,7 @@ } .modal { - background-color: #546e7a; + background-color: $secondary; margin: auto; padding: 1rem; border-style: none; -- cgit v1.2.3-54-g00ecf