reorganise css files

2017-10-02 13:51:59 +02:00
parent e955555f1a
commit 090e0e332a
14 changed files with 300 additions and 362 deletions
--- a/assets/stylesheets/global/header.css
+++ b/assets/stylesheets/global/header.css
@@ -0,0 +1,125 @@
+@block header {
+  margin-bottom: var(--grid-gutter);
+
+  @media (--breakpoint-desktop) {
+    flex-wrap: nowrap;
+  }
+
+  @element upper-wrapper {
+    background: var(--color-palette-blue-dark);
+    padding: calc(var(--grid-gutter) / 2) 0;
+    color: var(--color-text-dark-bg);
+  }
+
+  @element upper {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 0.8em;
+
+    @media (--breakpoint-desktop) {
+      justify-content: space-between;
+    }
+  }
+
+  @element lower-wrapper {
+  }
+
+  @element lower {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: var(--grid-gutter) 0 calc(var(--grid-gutter) / 4);
+    border-bottom: 1px solid var(--color-bg-separator);
+  }
+
+  @element title {
+    display: flex;
+    align-items: center;
+    font-family: var(--font-regular);
+    letter-spacing: 3px;
+    text-transform: uppercase;
+
+    & img {
+      display: inline-block;
+      width: 24px;
+      height: auto;
+      margin-right: calc(var(--grid-gutter) / 2);
+    }
+  }
+
+  @element logo {
+    display: flex;
+    flex: 0 0 100%;
+    justify-content: center;
+
+    @media (--breakpoint-desktop) {
+      flex: 0 0 200px;
+    }
+
+    & img {
+      width: 100%;
+      height: auto;
+      max-width: 169px;
+    }
+  }
+
+  @element controls {
+    display: flex;
+    flex: 0 0 100%;
+    flex-direction: column;
+    justify-content: space-around;
+
+    @media (--breakpoint-desktop) {
+      flex: 0 0 auto;
+    }
+
+    & form {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+
+      @media (--breakpoint-desktop) {
+        justify-content: flex-end;
+      }
+
+      & .group {
+        flex: 0 0 auto;
+        display: flex;
+        padding: 0 calc(var(--grid-gutter) / 2);
+        margin: 0;
+
+        border: none;
+        background: var(--color-palette-blue-medium);
+        border-radius: var(--border-radius);
+        color: inherit;
+
+        & + .group {
+          margin-left: var(--grid-gutter)
+        }
+
+        & select,
+        & label {
+          flex: 0 0 auto;
+          display: inline-block;
+          margin-top: 0;
+          margin-bottom: 0;
+
+          color: inherit;
+          font-weight: normal;
+          font-family: var(--font-light);
+          font-size: 0.8em;
+
+          background: transparent;
+          border: none;
+        }
+
+        & select {
+          margin-top: 2px;
+        }
+      }
+    }
+  }
+}