feat(windows): add detail-push icon

references #5565
ionic-team · Feb 25, 2016 · 706e0d7 · 706e0d7
1 parent 8df8420
commit 706e0d7
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/ionic/components/item/item.wp.scss b/ionic/components/item/item.wp.scss
@@ -14,6 +14,7 @@ $item-wp-font-size:                  1.6rem !default;
 $item-wp-avatar-size:                4rem !default;
 $item-wp-thumbnail-size:             8rem !default;
 $item-wp-note-color:                 $input-wp-border-color !default;
+$item-wp-detail-push-color:          $input-wp-border-color !default;
 
 $item-wp-divider-bg:                 #fff !default;
 $item-wp-divider-color:              #222 !default;
@@ -78,6 +79,16 @@ $item-wp-sliding-content-bg:         $list-wp-background-color !default;
   border-bottom: 1px solid $list-wp-border-color;
 }
 
+button.item:not([detail-none]) .item-inner,
+a.item:not([detail-none]) .item-inner,
+.item[detail-push] .item-inner {
+  @include wp-detail-push-icon($item-wp-detail-push-color);
+  background-repeat: no-repeat;
+  background-position: right ($item-wp-padding-right - 2) center;
+  background-size: 14px 14px;
+  padding-right: 32px;
+}
+
 
 // Windows Item Media
 // --------------------------------------------------

diff --git a/ionic/themes/dark.wp.scss b/ionic/themes/dark.wp.scss
@@ -72,11 +72,14 @@ $toggle-wp-handle-background-color-off: map-get($colors-wp, light) !default;
 $input-wp-border-color:                 map-get($colors-wp, light) !default;
 
 
-// Ripple Color
+// Windows Icon
 // --------------------------------------------------
 
-@function ripple-background-color($button-color) {
-  @return rgba( red($button-color), green($button-color), blue($button-color), 0.1);
+$icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
+
+@mixin wp-detail-push-icon($fg-color) {
+  $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
+  @include svg-background-image($svg);
 }
 
 
@@ -90,7 +93,7 @@ $input-wp-border-color:                 map-get($colors-wp, light) !default;
 }
 
 
-// Roboto Font
+// Noto Sans Font
 @at-root {
   @import "../fonts/noto-sans";
 }
diff --git a/ionic/themes/default.wp.scss b/ionic/themes/default.wp.scss
@@ -55,6 +55,17 @@ $item-wp-padding-icon-bottom:         10px !default;
 $input-wp-border-color:               #818181 !default;
 
 
+// Windows Icon
+// --------------------------------------------------
+
+$icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
+
+@mixin wp-detail-push-icon($fg-color) {
+  $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
+  @include svg-background-image($svg);
+}
+
+
 // Windows Body
 // --------------------------------------------------
 
@@ -65,7 +76,7 @@ $input-wp-border-color:               #818181 !default;
 }
 
 
-// Roboto Font
+// Noto Sans Font
 @at-root {
   @import "../fonts/noto-sans";
 }