feat(windows): initial add of windows mode

basically a copy of md for now references #5565
ionic-team · Feb 23, 2016 · a9c995d · a9c995d
1 parent 1495a13
commit a9c995d
Show file tree

Hide file tree

Showing 14 changed files with 581 additions and 2 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -266,6 +266,7 @@ gulp.task('sass', function() {
   gulp.src([
     'ionic/ionic.ios.scss',
     'ionic/ionic.md.scss',
+    'ionic/ionic.wp.scss',
     'ionic/ionic.scss'
   ])
   .pipe(sass({
@@ -300,6 +301,7 @@ gulp.task('sass.themes', function() {
 
   buildTheme('ios');
   buildTheme('md');
+  buildTheme('wp');
 });
 
 /**

diff --git a/ionic/components.wp.scss b/ionic/components.wp.scss
@@ -0,0 +1,9 @@
+
+// Windows Globals
+@import "globals.wp";
+
+
+// Windows Components
+@import
+  "components/app/app.wp",
+  "components/button/button.wp";
diff --git a/ionic/components/app/app.wp.scss b/ionic/components/app/app.wp.scss
@@ -0,0 +1,39 @@
+@import "../../globals.wp";
+
+// Windows App
+// --------------------------------------------------
+
+ion-content {
+  color: $text-wp-color;
+}
+
+p {
+  color: $paragraph-wp-color;
+}
+
+a {
+  color: $link-wp-color;
+}
+
+hr {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+@each $color-name, $color-value in $colors-wp {
+  h1, h2, h3, h4, h5, h6,
+  p,
+  span,
+  a:not([button]),
+  small,
+  b,
+  i,
+  strong,
+  em,
+  sub,
+  sup,
+  ion-icon {
+    &[#{$color-name}] {
+      color: $color-value !important;
+    }
+  }
+}
diff --git a/ionic/components/button/button.wp.scss b/ionic/components/button/button.wp.scss
@@ -0,0 +1,308 @@
+@import "../../globals.wp";
+@import "./button";
+
+// Windows Button
+// --------------------------------------------------
+
+$button-wp-margin:                         0.4rem 0.2rem !default;
+$button-wp-padding:                        0 1.1em !default;
+$button-wp-font-size:                      1.4rem !default;
+$button-wp-height:                         3.6rem !default;
+$button-wp-box-shadow:                     0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$button-wp-box-shadow-active:              0 3px 5px rgba(0, 0, 0, 0.14), 0 3px 5px rgba(0, 0, 0, 0.21) !default;
+
+$button-wp-border-radius:                  2px !default;
+$button-wp-animation-curve:                cubic-bezier(0.4, 0, 0.2, 1) !default;
+$button-wp-transition-duration:            300ms !default;
+
+$button-wp-clear-hover-background-color:   rgba(158, 158, 158, 0.1) !default;
+$button-wp-clear-active-background-color:  rgba(158, 158, 158, 0.2) !default;
+
+$button-wp-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
+$button-wp-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
+
+$button-wp-color:                          map-get($colors-wp, primary) !default;
+$button-wp-color-activated:                color-shade($button-wp-color) !default;
+$button-wp-text-color:                     color-inverse($button-wp-color) !default;
+$button-wp-hover-opacity:                  0.8 !default;
+
+$button-wp-large-font-size:                2rem !default;
+$button-wp-large-height:                   2.8em !default;
+$button-wp-large-padding:                  1.0em !default;
+$button-wp-small-font-size:                1.3rem !default;
+$button-wp-small-height:                   2.1em !default;
+$button-wp-small-padding:                  0.9em !default;
+$button-wp-small-icon-font-size:           1.4em !default;
+
+
+// Windows Default Button
+// --------------------------------------------------
+
+.button {
+  margin: $button-wp-margin;
+  padding: $button-wp-padding;
+  height: $button-wp-height;
+  border-radius: $button-wp-border-radius;
+
+  font-weight: 500;
+  font-size: $button-wp-font-size;
+
+  color: $button-wp-text-color;
+  background-color: $button-wp-color;
+  box-shadow: $button-wp-box-shadow;
+
+  text-transform: uppercase;
+
+  transition: box-shadow $button-wp-transition-duration $button-wp-animation-curve,
+              background-color $button-wp-transition-duration $button-wp-animation-curve,
+              color $button-wp-transition-duration $button-wp-animation-curve;
+
+  &:hover:not(.disable-hover) {
+    background-color: $button-wp-color;
+  }
+
+  &.activated {
+    box-shadow: $button-wp-box-shadow-active;
+    background-color: $button-wp-color-activated;
+  }
+
+  ion-button-effect {
+    background-color: $button-wp-text-color;
+  }
+}
+
+
+// Windows Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin wp-button-default($color-name, $color-value) {
+
+  .button-#{$color-name} {
+    $bg-color: $color-value;
+    $bg-color-activated: color-shade($bg-color);
+    $fg-color: color-inverse($bg-color);
+
+    color: $fg-color;
+    background-color: $bg-color;
+
+    &:hover:not(.disable-hover) {
+      background-color: $bg-color;
+    }
+
+    &.activated {
+      opacity: 1;
+      background-color: $bg-color-activated;
+    }
+
+    ion-button-effect {
+      background-color: $fg-color;
+    }
+  }
+
+}
+
+
+// Windows Button Sizes
+// --------------------------------------------------
+
+.button-large {
+  padding: 0 $button-wp-large-padding;
+  height: $button-wp-large-height;
+  font-size: $button-wp-large-font-size;
+}
+
+.button-small {
+  padding: 0 $button-wp-small-padding;
+  height: $button-wp-small-height;
+  font-size: $button-wp-small-font-size;
+}
+
+.button-small.button-icon-only ion-icon {
+  font-size: $button-wp-small-icon-font-size;
+}
+
+// Windows Block Button
+// --------------------------------------------------
+
+.button-block {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// Windows Full Button
+// --------------------------------------------------
+
+.button-full {
+  margin-right: 0;
+  margin-left: 0;
+  border-radius: 0;
+  border-right-width: 0;
+  border-left-width: 0;
+}
+
+// Windows Outline Button
+// --------------------------------------------------
+
+.button-outline {
+  border-width: 1px;
+  border-style: solid;
+  border-color: $button-wp-color;
+  background-color: transparent;
+  color: $button-wp-color;
+  box-shadow: none;
+
+  &:hover:not(.disable-hover) {
+    background-color: $button-wp-clear-hover-background-color;
+  }
+
+  &.activated {
+    opacity: 1;
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  ion-button-effect {
+    background-color: $button-wp-color;
+  }
+}
+
+
+// Windows Outline Button Color Mixin
+// --------------------------------------------------
+
+@mixin wp-button-outline($color-name, $color-value) {
+
+  .button-outline-#{$color-name} {
+    $fg-color: color-shade($color-value, 5%);
+    border-color: $fg-color;
+    background-color: transparent;
+    color: $fg-color;
+
+    &:hover:not(.disable-hover) {
+      background-color: $button-wp-clear-hover-background-color;
+    }
+
+    &.activated {
+      background-color: transparent;
+    }
+
+    ion-button-effect {
+      background-color: $fg-color;
+    }
+  }
+
+}
+
+
+// Windows Clear Button
+// --------------------------------------------------
+
+.button-clear {
+  border-color: transparent;
+  opacity: 1;
+  box-shadow: none;
+  background-color: transparent;
+  color: $button-wp-color;
+
+  &.activated {
+    background-color: $button-wp-clear-active-background-color;
+    box-shadow: none;
+  }
+
+  &:hover:not(.disable-hover) {
+    background-color: $button-wp-clear-hover-background-color;
+  }
+
+  ion-button-effect {
+    background-color: #999;
+  }
+}
+
+
+// Windows Clear Button Color Mixin
+// --------------------------------------------------
+
+@mixin wp-button-clear($color-name, $color-value) {
+
+  .button-clear-#{$color-name} {
+    $fg-color: $color-value;
+    border-color: transparent;
+    background-color: transparent;
+    color: $fg-color;
+
+    &.activated {
+      background-color: $button-wp-clear-active-background-color;
+      box-shadow: none;
+    }
+
+    &:hover:not(.disable-hover) {
+      color: $fg-color;
+    }
+  }
+}
+
+
+// Windows Round Button
+// --------------------------------------------------
+
+.button-round {
+  padding: $button-round-padding;
+  border-radius: $button-round-border-radius;
+}
+
+
+// Windows FAB Button
+// --------------------------------------------------
+
+.button-fab {
+  border-radius: 50%;
+  box-shadow: $button-wp-fab-box-shadow;
+
+  transition: box-shadow $button-wp-transition-duration $button-wp-animation-curve,
+              background-color $button-wp-transition-duration $button-wp-animation-curve,
+              color $button-wp-transition-duration $button-wp-animation-curve;
+
+  &.activated {
+    box-shadow: $button-wp-fab-box-shadow-active;
+  }
+}
+
+.button-icon-only {
+  padding: 0;
+}
+
+
+// Windows Ripple Effect
+// --------------------------------------------------
+
+$ripple-background-color:       #555 !default;
+
+ion-button-effect {
+  position: absolute;
+  z-index: 0;
+  display: block;
+  border-radius: 50%;
+
+  background-color: $ripple-background-color;
+  opacity: 0.2;
+
+  pointer-events: none;
+  transition-timing-function: ease-in-out;
+}
+
+
+// Generate Windows Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-wp {
+  @include wp-button-default($color-name, $color-value);
+  @include wp-button-outline($color-name, $color-value);
+  @include wp-button-clear($color-name, $color-value);
+}
+
+
+// Core Button Overrides
+// --------------------------------------------------
+
+@import "./button-fab";
+@import "./button-icon";
diff --git a/ionic/config/bootstrap.ts b/ionic/config/bootstrap.ts
@@ -81,7 +81,7 @@ function setupDom(window, document, config, platform, clickBlock, featureDetect)
   }
 
   // set the mode class name
-  // ios/md
+  // ios/md/wp
   bodyEle.classList.add(mode);
 
   // language and direction