fix: Fixed-header-layout shows burger-button correct

MikeMitterer · Mar 3, 2015 · 0c822d4 · 0c822d4
1 parent eaa1b49
commit 0c822d4
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 4 deletions.
diff --git a/example/layout/web/demo.css b/example/layout/web/demo.css
@@ -1223,7 +1223,13 @@ dt {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
-      display: flex; } }
+      display: flex; }
+    .wsk-layout__header .wsk-layout-title {
+      margin-left: 24px; }
+    .wsk-layout--fixed-header.wsk-layout--overlay-drawer-button > .wsk-layout__header > .wsk-layout-icon {
+      left: 48px; }
+    .wsk-layout--fixed-header.wsk-layout--overlay-drawer-button > .wsk-layout__header .wsk-layout-title {
+      margin-left: 12px; } }
 
 .wsk-layout__header--multi-row {
   -webkit-box-orient: vertical;

diff --git a/example/layout/web/demo.scss b/example/layout/web/demo.scss
@@ -1,5 +1,5 @@
 @import 'packages/wsk_material/sass/styleguide_demo_bp';
-@import 'packages/wsk_material/sass/layout/_layout';
+@import 'packages/wsk_material/sass/layout/layout';
 @import 'packages/wsk_material/sass/textfield/_textfield';
 @import 'packages/wsk_material/sass/animation/animation';
 @import 'packages/wsk_material/sass/palette/palette';

diff --git a/example/layout/web/index.html b/example/layout/web/index.html
@@ -158,7 +158,7 @@ <h3>Fixed header</h3>
   <p>Always shows a header, even in smaller screens.</p>
 
   <div class="demo-container">
-    <div class="wsk-layout wsk-js-layout wsk-layout--fixed-header">
+    <div class="wsk-layout wsk-js-layout wsk-layout--fixed-header wsk-layout--overlay-drawer-button">
       <div class="wsk-layout__header">
         <!-- Icon -->
         <img class="wsk-layout-icon" src="images/app-icon.png"/>

diff --git a/lib/sass/layout/_layout.scss b/lib/sass/layout/_layout.scss
@@ -325,6 +325,19 @@ $layout-tab-highlight-thickness: 2px;
       .wsk-layout--fixed-header > & {
         display: flex;
       }
+
+      & .wsk-layout-title {
+        margin-left: 24px;
+      }
+
+      .wsk-layout--fixed-header.wsk-layout--overlay-drawer-button > & {
+            & > .wsk-layout-icon {
+                left: $layout-header-basic-mobile-indent + 32px;
+            }
+           & .wsk-layout-title {
+                margin-left: 12px;
+           }
+      }
     }
   }
 

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,5 +1,5 @@
 name: wsk_material
-description: Web Starter Kit - Material Design with Dart
+description: Material Design for your Application. Based on Googles Web Starter Kit
 version: 0.6.7
 author: Mike Mitterer <office@mikemitterer.at>
 homepage: https://github.com/MikeMitterer/dart-wsk-material