feat(windows): initial add of toolbar with some custom theming

references #5565
ionic-team · Feb 23, 2016 · 6062bb6 · 6062bb6
1 parent b91f8de
commit 6062bb6
Show file tree

Hide file tree

Showing 3 changed files with 316 additions and 5 deletions.
diff --git a/ionic/components.wp.scss b/ionic/components.wp.scss
@@ -6,4 +6,5 @@
 // Windows Components
 @import
   "components/app/app.wp",
-  "components/button/button.wp";
+  "components/button/button.wp",
+  "components/toolbar/toolbar.wp";
diff --git a/ionic/components/toolbar/toolbar.wp.scss b/ionic/components/toolbar/toolbar.wp.scss
@@ -0,0 +1,310 @@
+@import "../../globals.wp";
+@import "./toolbar";
+@import "./toolbar-button";
+
+// Windows Toolbar
+// --------------------------------------------------
+
+$toolbar-order-wp: (
+  back-button: 0,
+  menu-toggle-start: 1,
+  buttons-left: 2,
+  content: 3,
+  buttons-start: 4,
+  buttons-end: 5,
+  buttons-right: 6,
+  menu-toggle-end: 7,
+);
+
+$toolbar-wp-padding:                     4px !default;
+$toolbar-wp-height:                      4.6rem !default;
+$toolbar-wp-title-font-size:             2.0rem !default;
+$toolbar-wp-button-font-size:            1.4rem !default;
+$navbar-wp-height:                       $toolbar-wp-height !default;
+
+$bar-button-wp-color:                    $toolbar-wp-button-color !default;
+$bar-button-wp-border-radius:            2px !default;
+
+
+.toolbar {
+  padding: $toolbar-wp-padding;
+  min-height: $toolbar-wp-height;
+}
+
+ion-navbar-section {
+  min-height: $navbar-wp-height;
+}
+
+
+// Windows Toolbar Background
+// --------------------------------------------------
+
+.toolbar-background {
+  border-color: $toolbar-wp-border-color;
+  background: $toolbar-wp-background;
+}
+
+
+// Windows Toolbar Content
+// --------------------------------------------------
+
+.toolbar-content {
+  flex: 1;
+  order: map-get($toolbar-order-wp, content);
+  max-width: 100%;
+}
+
+.toolbar-title {
+  color: $toolbar-wp-text-color;
+  padding: 0 12px;
+  font-size: $toolbar-wp-title-font-size;
+  font-weight: 500;
+}
+
+@mixin wp-toolbar-theme($color-name, $color-value) {
+  .toolbar[#{$color-name}] {
+    $fg-color: color-inverse($color-value);
+
+    .toolbar-background {
+      background: $color-value;
+    }
+
+    .bar-button-default,
+    .bar-button-outline,
+    .toolbar-title {
+      color: $fg-color;
+    }
+
+    .bar-button-default,
+    .bar-button-outline {
+      ion-button-effect {
+        background-color: $fg-color;
+      }
+    }
+
+    .bar-button-outline {
+      border-color: $fg-color;
+    }
+
+    @each $color-name, $color-value in $colors-wp {
+      @include wp-bar-button-default($color-name, $color-value);
+      @include wp-bar-button-outline($color-name, $color-value);
+      @include wp-bar-button-solid($color-name, $color-value);
+    }
+  }
+}
+
+
+// Windows Toolbar Button Placement
+// --------------------------------------------------
+
+ion-buttons {
+  order: map-get($toolbar-order-wp, buttons-start);
+  transform: translateZ(0px);
+}
+
+ion-buttons[left] {
+  order: map-get($toolbar-order-wp, buttons-left);
+}
+
+ion-buttons[left] .bar-button:first-child {
+  margin-left: 0;
+}
+
+ion-buttons[end] {
+  text-align: right;
+  order: map-get($toolbar-order-wp, buttons-end);
+}
+
+ion-buttons[right] {
+  text-align: right;
+  order: map-get($toolbar-order-wp, buttons-right);
+}
+
+
+// Windows Toolbar Button Default
+// --------------------------------------------------
+
+.bar-button {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: 0.2rem;
+  margin-right: 0.2rem;
+  padding: 0 5px;
+  height: 32px;
+  border: 0;
+  font-size: $toolbar-wp-button-font-size;
+  border-radius: $bar-button-wp-border-radius;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.bar-button-solid,
+.bar-button-outline {
+  // restrict the ripple to button size
+  overflow: hidden;
+}
+
+@mixin wp-bar-button-default($color-name, $color-value) {
+
+  .bar-button-#{$color-name} {
+    color: $color-value;
+    background-color: transparent;
+
+    &:hover:not(.disable-hover) {
+      color: $color-value;
+    }
+  }
+
+}
+
+
+// Windows Toolbar Button Outline
+// --------------------------------------------------
+
+.bar-button-outline {
+  border-width: 1px;
+  border-style: solid;
+  border-color: $bar-button-wp-color;
+  color: $bar-button-wp-color;
+  background-color: transparent;
+
+  &:hover:not(.disable-hover) {
+    opacity: 0.4;
+  }
+
+  &.activated {
+    color: color-inverse($bar-button-wp-color);
+    background-color: $bar-button-wp-color;
+  }
+}
+
+@mixin wp-bar-button-outline($color-name, $color-value) {
+
+  .bar-button-outline-#{$color-name} {
+    $fg-color: color-shade($color-value);
+    border-color: $fg-color;
+    color: $fg-color;
+    background-color: transparent;
+
+    &.activated {
+      color: color-inverse($fg-color);
+      background-color: $fg-color;
+    }
+  }
+
+}
+
+
+// Windows Toolbar Button Solid
+// --------------------------------------------------
+
+.bar-button-solid {
+  color: color-inverse($bar-button-wp-color);
+  background-color: $bar-button-wp-color;
+
+  &:hover:not(.disable-hover) {
+    color: color-inverse($bar-button-wp-color);
+  }
+
+  &.activated {
+    color: color-inverse($bar-button-wp-color);
+    background-color: color-shade($bar-button-wp-color);
+  }
+}
+
+@mixin wp-bar-button-solid($color-name, $color-value) {
+
+  .bar-button-solid-#{$color-name} {
+    color: color-inverse($color-value);
+    background-color: $color-value;
+
+    &.activated {
+      background-color: color-shade($color-value);
+    }
+  }
+
+}
+
+
+// Windows Toolbar Button Icon
+// --------------------------------------------------
+
+.bar-button-icon-left ion-icon {
+  padding-right: 0.3em;
+  font-size: 1.4em;
+  line-height: 0.67;
+  pointer-events: none;
+}
+
+.bar-button-icon-right ion-icon {
+  padding-left: 0.4em;
+  font-size: 1.4em;
+  line-height: 0.67;
+  pointer-events: none;
+}
+
+.bar-button-icon-only {
+  padding: 0;
+
+  ion-icon {
+    padding: 0 0.1em;
+    font-size: 1.8em;
+    line-height: 0.67;
+    min-width: 28px;
+    pointer-events: none;
+  }
+}
+
+
+// Windows Toolbar Back Button
+// --------------------------------------------------
+
+.back-button {
+  margin: 0 0 0 12px;
+  box-shadow: none;
+}
+
+.back-button-icon {
+  margin: 0;
+  min-width: 44px;
+  font-size: 2.4rem;
+  font-weight: normal;
+  text-align: left;
+}
+
+
+// Windows Toolbar Menu Toggle
+// --------------------------------------------------
+
+.bar-button-menutoggle {
+  margin: 0 6px;
+  padding: 0 2px;
+  min-width: 44px;
+  order: map-get($toolbar-order-wp, menu-toggle-start);
+
+  ion-icon {
+    padding: 0 6px;
+    font-size: 2.4rem;
+  }
+}
+
+.bar-button-menutoggle[end],
+.bar-button-menutoggle[right] {
+  margin: 0 2px;
+  min-width: 28px;
+  order: map-get($toolbar-order-wp, menu-toggle-end);
+}
+
+
+// Windows Toolbar Color Generation
+// --------------------------------------------------
+
+@include wp-bar-button-default(default, $bar-button-wp-color);
+
+@each $color-name, $color-value in $colors-wp {
+  @include wp-toolbar-theme($color-name, $color-value);
+  @include wp-bar-button-default($color-name, $color-value);
+  @include wp-bar-button-outline($color-name, $color-value);
+  @include wp-bar-button-solid($color-name, $color-value);
+}
diff --git a/ionic/themes/default.wp.scss b/ionic/themes/default.wp.scss
@@ -21,19 +21,19 @@ $font-size-wp-base:                   $font-size-base !default;
 
 $toolbar-wp-background:               $toolbar-background !default;
 $toolbar-wp-border-color:             $toolbar-border-color !default;
-$toolbar-wp-text-color:               #424242 !default;
+$toolbar-wp-text-color:               $toolbar-text-color !default;
 $toolbar-wp-active-color:             $toolbar-active-color !default;
 $toolbar-wp-inactive-color:           $toolbar-inactive-color !default;
-$toolbar-wp-button-color:             #424242 !default;
+$toolbar-wp-button-color:             $toolbar-text-color !default;
 
 
 // Windows List
 // --------------------------------------------------
 
 $list-wp-text-color:                  $list-text-color !default;
-$list-wp-border-color:                #dedede !default;
+$list-wp-border-color:                $list-border-color !default;
 $list-wp-background-color:            $list-background-color !default;
-$list-wp-activated-background-color:  #f1f1f1 !default;
+$list-wp-activated-background-color:  #AAAAAA !default;
 
 
 // Windows Item