Permalink
Browse files

feature: nav-pills added

  • Loading branch information...
MikeMitterer committed Mar 19, 2015
1 parent f2b96d8 commit 21cf50b85e0f644105ec8a7d93f21fba33462b82
View
@@ -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" />
@@ -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; }
@@ -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;
+ }
+
+
+}
@@ -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>
View
@@ -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>
View
@@ -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>
@@ -629,3 +629,5 @@ body > h2 {
.panel.sample .wsk-panel {
margin-bottom: 12px; }
+
+/*# sourceMappingURL=demo.css.map */

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -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 {
Oops, something went wrong.

0 comments on commit 21cf50b

Please sign in to comment.