diff options
author | TrueKuehli <rctcoaster2000@hotmail.de> | 2018-09-30 16:04:18 +0200 |
---|---|---|
committer | TrueKuehli <rctcoaster2000@hotmail.de> | 2018-09-30 16:04:18 +0200 |
commit | c0a4272fcc15da322b3b63fb0a3e211e786504e0 (patch) | |
tree | 8c2445b34d0a69e59b36e2b71e01820f0316669f /WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss | |
parent | f97f25ea54a0f888d2195d6868346854a2a005e0 (diff) |
Split up SASS into multiple files
This will make adding pages much more easy, as some elements can be reused.
Diffstat (limited to 'WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss')
-rw-r--r-- | WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss | 56 |
1 files changed, 56 insertions, 0 deletions
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; + } + } + } +} |