Added --fixed modifier for header + example

brainly · Nov 9, 2015 · 3337f99 · 3337f99
1 parent 14a5598
commit 3337f99
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 0 deletions.
diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
@@ -28,6 +28,14 @@ $includeHtml: false !default;
       }
     }
 
+    &--fixed {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: $mintHeaderZIndex;
+    }
+
     &__left {
       display: flex;
       align-items: center;

diff --git a/src/components/header/header.html b/src/components/header/header.html
@@ -75,3 +75,13 @@ <h3 class="docs-block__header">Example usage</h3>
         </div>
     </div>
 </section>
+
+<section class="docs-block">
+  <aside class="docs-block__info">
+    <h3 class="docs-block__header">Fixed header</h3>
+  </aside>
+  <div class="docs-block__content">
+    <iframe width="600" height="480" src='components/header/small-device.html'></iframe>
+  </div>
+</section>
+
diff --git a/src/components/header/small-device.html b/src/components/header/small-device.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="../../../style-guide.css">
+  <link rel="stylesheet" href="../../css/main.css">
+</head>
+<body class="docs--header-small-example">
+<script src="images/icons.js"></script>
+<div>
+  <div class="mint-header mint-header--fixed">
+    <div class="mint-header__container">
+      <div class="mint-header__left">
+        <a href="#" class="mint-home-button">
+          <img class="mint-home-button__logo-small" src="images/logo-mobile.svg" />
+          <img class="mint-home-button__logo-big" src="images/logo.svg" />
+        </a>
+      </div>
+      <div class="mint-header__middle">
+        <div class="mint-search mint-search--short">
+          <input type="search" placeholder="Find all the answers..."
+                 class="mint-input mint-input--full mint-input--transparent-border mint-input--low mint-input--with-icon"/>
+
+          <div class="mint-search__button">
+            <button class="mint-icon-as-button mint-icon-as-button--small" type="submit">
+              <div class="mint-icon-as-button__hole">
+                <svg class="mint-icon mint-icon--adaptive mint-icon--x18">
+                  <use xlink:href="#icon-search"></use>
+                </svg>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="mint-header__right mint-hide-for-small-only">
+        <button class="mint-button-secondary mint-button-secondary--light">
+          <div class="mint-button-secondary__hole">Register</div>
+        </button>
+        <button class="mint-icon-as-button mint-icon-as-button--light">
+          <div class="mint-icon-as-button__hole">
+            <div class="mint-overlayed-box">
+              <svg class="mint-icon mint-icon--x26 mint-icon--adaptive">
+                <use xlink:href="#icon-messages"></use>
+              </svg>
+              <div class="mint-overlayed-box__overlay">
+                <div class="mint-badge mint-badge--error">1</div>
+              </div>
+            </div>
+          </div>
+        </button>
+        <div class="mint-avatar mint-avatar--big">
+          <img class="mint-avatar__image mint-avatar__image--big"
+               src="http://lorempixel.com/76/76/"/>
+        </div>
+      </div>
+      <div class="mint-header__right mint-hide-for-medium-up">
+        <button class="mint-icon-as-button mint-icon-as-button--light">
+          <div class="mint-icon-as-button__hole">
+            <svg class="mint-icon mint-icon--x26 mint-icon--adaptive">
+              <use xlink:href="#icon-menu"></use>
+            </svg>
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
diff --git a/src/docs/_sass/main.scss b/src/docs/_sass/main.scss
@@ -102,3 +102,10 @@ article {
     margin: 21px 0 0;
   }
 }
+
+.docs--header-small-example {
+  height: 1000px;
+  // scss-lint:disable NameFormat
+  background: linear-gradient(0deg, $grayPrimary 40%, $white);
+  // scss-lint:enable NameFormat
+}
diff --git a/src/sass/_config.scss b/src/sass/_config.scss
@@ -78,6 +78,7 @@ $layoutDefaultPadding: 24px;
 $defaultComponentHeight: 20px;
 
 // Vertical stack
+$mintHeaderZIndex: 101;
 $overlayZIndex: 999;
 $toplayerZIndex: 1000;