feature: nav-pills added

MikeMitterer · Mar 19, 2015 · 21cf50b · 21cf50b
1 parent f2b96d8
commit 21cf50b
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 5 deletions.
diff --git a/WskMaterial.iml b/WskMaterial.iml
@@ -17,6 +17,8 @@
       <excludeFolder url="file://$MODULE_DIR$/example/badge/web/packages" />
       <excludeFolder url="file://$MODULE_DIR$/example/button/build" />
       <excludeFolder url="file://$MODULE_DIR$/example/button/packages/wsk_material" />
+      <excludeFolder url="file://$MODULE_DIR$/example/button/web/assets/packages" />
+      <excludeFolder url="file://$MODULE_DIR$/example/button/web/assets/svgs/packages" />
       <excludeFolder url="file://$MODULE_DIR$/example/button/web/packages" />
       <excludeFolder url="file://$MODULE_DIR$/example/card/build" />
       <excludeFolder url="file://$MODULE_DIR$/example/card/packages/wsk_material" />
@@ -60,10 +62,14 @@
       <excludeFolder url="file://$MODULE_DIR$/example/list/packages/wsk_material" />
       <excludeFolder url="file://$MODULE_DIR$/example/list/web/images/packages" />
       <excludeFolder url="file://$MODULE_DIR$/example/list/web/packages" />
+      <excludeFolder url="file://$MODULE_DIR$/example/nav-pills/build" />
+      <excludeFolder url="file://$MODULE_DIR$/example/nav-pills/packages/wsk_material" />
+      <excludeFolder url="file://$MODULE_DIR$/example/nav-pills/web/packages" />
       <excludeFolder url="file://$MODULE_DIR$/example/packages" />
       <excludeFolder url="file://$MODULE_DIR$/example/palette/build" />
       <excludeFolder url="file://$MODULE_DIR$/example/palette/packages/wsk_material" />
       <excludeFolder url="file://$MODULE_DIR$/example/palette/web/packages" />
+      <excludeFolder url="file://$MODULE_DIR$/example/panel/build" />
       <excludeFolder url="file://$MODULE_DIR$/example/panel/packages/wsk_material" />
       <excludeFolder url="file://$MODULE_DIR$/example/panel/web/packages" />
       <excludeFolder url="file://$MODULE_DIR$/example/radio/build" />

diff --git a/example/button/web/demo.css b/example/button/web/demo.css
@@ -554,7 +554,7 @@ body > h2 {
 
 .PreviewBlock {
   background: #f5f5f5;
-  padding: 20px; }
+  padding: 24px; }
 
 .wsk-shadow--z1 {
   box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
@@ -1087,7 +1087,7 @@ dt {
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
     background-color: rgba(153, 153, 153, 0.4); }
   .wsk-button--fab.wsk-button--colored {
-    background: #ec407a;
+    background-color: #ec407a;
     color: #fff; }
     .wsk-button--fab.wsk-button--colored:hover {
       background-color: #e91e63; }
@@ -1135,3 +1135,15 @@ dt {
 .button-block {
   display: inline-block;
   margin: 20px 20px 20px 0; }
+
+.svg-gps-fixed {
+  background-repeat: no-repeat;
+  background-size: 24px 24px;
+  background-position: 50% 50%;
+  background-image: svgShapeComponent(#bbdefb);
+  background-image: url(assets/svgs/ic_gps_fixed_24px.svg); }
+  .svg-gps-fixed.wsk-button--colored {
+    background-image: url(assets/svgs/ic_gps_fixed_24px-white.svg); }
+  .svg-gps-fixed:after {
+    content: ".";
+    color: transparent; }
diff --git a/example/button/web/demo.scss b/example/button/web/demo.scss
@@ -6,3 +6,23 @@
   display: inline-block;
   margin: 20px 20px 20px 0;
 }
+
+
+.svg-gps-fixed {
+    background-repeat: no-repeat;
+    background-size: 24px 24px;
+    background-position: 50% 50%;
+    background-image: svgShapeComponent(nth($palette-primary, 2));
+
+    background-image: url(assets/svgs/ic_gps_fixed_24px.svg);
+    &.wsk-button--colored {
+        background-image: url(assets/svgs/ic_gps_fixed_24px-white.svg);
+    }
+
+    &:after {
+        content: ".";
+        color : transparent;
+    }
+
+
+}
diff --git a/example/button/web/index.html b/example/button/web/index.html
@@ -55,10 +55,41 @@ <h3>With Ripples</h3>
     <div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored wsk-js-ripple-effect">Raised</button></div>
     <div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-js-ripple-effect">♥</button></div>
 
+
     <h3>.wsk-button--mini-fab</h3>
 
     <div class="button-block"><button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-button--mini-fab wsk-js-ripple-effect">♥</button></div>
 
+    <h3>FAB SVG's</h3>
+    <div class="button-block">
+        <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-js-ripple-effect">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>
+        </button>
+        <button class="wsk-button wsk-js-button wsk-button--fab wsk-js-ripple-effect">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>
+        </button>
+
+        <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-js-ripple-effect svg-gps-fixed"></button>
+
+        <button class="wsk-button wsk-js-button wsk-button--fab wsk-js-ripple-effect svg-gps-fixed"></button>
+    </div>
+
+    <h3>Mini-FAB SVG's</h3>
+      <div class="button-block">
+          <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--mini-fab wsk-js-ripple-effect">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>
+          </button>
+
+          <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--mini-fab wsk-js-ripple-effect svg-gps-fixed"></button>
+
+          <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-button--mini-fab wsk-js-ripple-effect">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>
+          </button>
+
+          <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-button--mini-fab wsk-js-ripple-effect svg-gps-fixed"></button>
+
+      </div>
+
     <h3>Disabled</h3>
 
     <div class="button-block">Flat: <button class="wsk-button wsk-js-button wsk-js-ripple-effect" disabled>Flat</button></div>

diff --git a/example/index.html b/example/index.html
@@ -118,6 +118,11 @@ <h4>Components</h4>
                                 <span class="wsk-list-view--name"><a href="list/index.html">list</a></span>
                             </li>
 
+                            <li>
+                                <span class="wsk-list-view--avatar component"></span>
+                                <span class="wsk-list-view--name"><a href="nav-pills/index.html">nav-pills</a></span>
+                            </li>
+
                             <li>
                                 <span class="wsk-list-view--avatar component"></span>
                                 <span class="wsk-list-view--name"><a href="palette/index.html">palette</a></span>

diff --git a/example/localindex.html b/example/localindex.html
@@ -58,6 +58,7 @@ <h2>WSK-Material-Samples (local-version)</h2>
             <li><a href="layout-header-drawer/web/index.html">layout-header-drawer</a></li>
             <li><a href="layout-header-drawer-footer/web/index.html">layout-header-drawer-footer</a></li>
             <li><a href="list/web/index.html">list</a></li>
+            <li><a href="nav-pills/web/index.html">nav-pills</a></li>
             <li><a href="palette/web/index.html">palette</a></li>
             <li><a href="panel/web/index.html">panel</a></li>
             <li><a href="radio/web/index.html">radio</a><span class="script">[ main.dart ]</span></li>

diff --git a/example/panel/web/demo.css b/example/panel/web/demo.css
diff --git a/example/panel/web/demo.css.map b/example/panel/web/demo.css.map
diff --git a/lib/sass/button/_button.scss b/lib/sass/button/_button.scss
@@ -140,6 +140,7 @@ $button-icon-size-mini: 24px !default;
     padding: 0;
     overflow: hidden;
     background: $button-primary-color;
+
     @include shadow-z1();
 
     &.wsk-button--mini-fab {
@@ -165,7 +166,7 @@ $button-icon-size-mini: 24px !default;
     }
 
     &.wsk-button--colored {
-      background: $button-fab-color-alt;
+      background-color: $button-fab-color-alt;
       color: $button-secondary-color-alt;
 
       &:hover {