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/_base.scss | 56 ++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss (limited to 'WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss') diff --git a/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss b/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss new file mode 100644 index 0000000..b283c0b --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss @@ -0,0 +1,56 @@ +.backdrop { + background-color: $secondary; + color: $secondary-text; + font-size: 1rem; + + .header-bar { + display: flex; + align-items: center; + + @media (max-height: 550px) { + margin-top: 0.125rem; + } + + .menu-icon { + background-image: url("../ressources/menu.png"); + background-position: center; + background-repeat: no-repeat; + width: 36px; + height: 36px; + padding: 4px; + margin: 1rem; + display: inline-block; + border: none; + border-radius: 32px; + transition: background-color 100ms ease; + + @media (max-height: 550px) { + padding: 0; + margin: 0.125rem; + } + + &:hover { + background-color: $secondary-dark; + } + + &.open { + background-image: url("../ressources/menu_close.png"); + } + } + + .header { + margin: 0; + padding: 16px; + text-align: center; + flex-grow: 1; + + @media (min-width: 450px) { + margin-right: 56px; + } + + @media (max-height: 550px) { + padding: 0; + } + } + } +} -- 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/_base.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