From dd206ad7d67b3e39a5d5e3ae4d762e67783a755b Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 23 Feb 2016 15:56:59 -0500 Subject: [PATCH] feat(windows): add radio component for wp mode fixed radio and checkbox in alert, updated toolbar references #5565 --- ionic/components.wp.scss | 1 + ionic/components/alert/alert.wp.scss | 14 ++- ionic/components/checkbox/checkbox.wp.scss | 2 +- ionic/components/radio/radio.wp.scss | 121 +++++++++++++++++++++ ionic/components/toolbar/toolbar.wp.scss | 7 +- 5 files changed, 136 insertions(+), 9 deletions(-) create mode 100644 ionic/components/radio/radio.wp.scss diff --git a/ionic/components.wp.scss b/ionic/components.wp.scss index 0f5e283f04..452054ebfe 100644 --- a/ionic/components.wp.scss +++ b/ionic/components.wp.scss @@ -11,4 +11,5 @@ "components/badge/badge.wp", "components/button/button.wp", "components/checkbox/checkbox.wp", + "components/radio/radio.wp", "components/toolbar/toolbar.wp"; diff --git a/ionic/components/alert/alert.wp.scss b/ionic/components/alert/alert.wp.scss index 9bdec4a79e..5c238bce03 100644 --- a/ionic/components/alert/alert.wp.scss +++ b/ionic/components/alert/alert.wp.scss @@ -35,6 +35,9 @@ $alert-wp-button-width: 49.5% !default; $alert-wp-button-margin-right: 1% !default; $alert-wp-button-font-weight: 300 !default; +$alert-wp-checkbox-background-color: map-get($colors-wp, primary) !default; +$alert-wp-radio-background-color: map-get($colors-wp, primary) !default; + $alert-wp-buttons-padding: 8px 20px 20px 20px !default; $alert-wp-buttons-justify-content: flex-end !default; @@ -150,11 +153,10 @@ $alert-wp-buttons-justify-content: flex-end !default; left: 2px; width: 8px; height: 8px; - background-color: $alert-wp-button-text-color; + background-color: $alert-wp-radio-background-color; border-radius: 50%; content: ''; - transition: transform 280ms cubic-bezier(.4, 0, .2, 1); - transform: scale3d(0, 0, 0); + display: none; } } @@ -166,7 +168,7 @@ $alert-wp-buttons-justify-content: flex-end !default; } .alert-radio-icon:after { - transform: scale3d(1, 1, 1); + display: block; } } @@ -197,8 +199,8 @@ $alert-wp-buttons-justify-content: flex-end !default; } .alert-checkbox[aria-checked=true] .alert-checkbox-icon { - background-color: $alert-wp-button-text-color; - border-color: $alert-wp-button-text-color; + background-color: $alert-wp-checkbox-background-color; + border-color: $alert-wp-checkbox-background-color; &:after { position: absolute; diff --git a/ionic/components/checkbox/checkbox.wp.scss b/ionic/components/checkbox/checkbox.wp.scss index c34e66e6ef..aaf34f6df4 100644 --- a/ionic/components/checkbox/checkbox.wp.scss +++ b/ionic/components/checkbox/checkbox.wp.scss @@ -22,7 +22,7 @@ $checkbox-wp-icon-checkmark-color: $background-wp-color !default; $checkbox-wp-icon-border-width: 2px !default; $checkbox-wp-icon-border-style: solid !default; $checkbox-wp-icon-border-radius: 0 !default; -$checkbox-wp-icon-border-color-off: darken($list-wp-border-color, 40%) !default; +$checkbox-wp-icon-border-color-off: #333333 !default; $checkbox-wp-icon-border-color-on: map-get($colors-wp, primary) !default; $checkbox-wp-transition-duration: 280ms !default; diff --git a/ionic/components/radio/radio.wp.scss b/ionic/components/radio/radio.wp.scss new file mode 100644 index 0000000000..85517da55d --- /dev/null +++ b/ionic/components/radio/radio.wp.scss @@ -0,0 +1,121 @@ +@import "../../globals.wp"; + +// Windows Radio +// -------------------------------------------------- + +$radio-wp-color-on: map-get($colors-wp, primary) !default; +$radio-wp-color-off: #333333 !default; + +$radio-wp-icon-width: 16px !default; +$radio-wp-icon-height: 16px !default; +$radio-wp-icon-border-width: 2px !default; +$radio-wp-icon-border-style: solid !default; +$radio-wp-icon-border-radius: 50% !default; + +$radio-wp-disabled-opacity: 0.3 !default; + + +ion-radio { + position: relative; + display: inline-block; +} + + +// Windows Radio Outer Circle: Unchecked +// ----------------------------------------- + +.radio-icon { + position: relative; + top: 0; + left: 0; + display: block; + width: $radio-wp-icon-width; + height: $radio-wp-icon-height; + margin: 0; + border-width: $radio-wp-icon-border-width; + border-style: $radio-wp-icon-border-style; + border-color: $radio-wp-color-off; + border-radius: $radio-wp-icon-border-radius; +} + + +// Windows Radio Inner Circle: Unchecked +// ----------------------------------------- + +.radio-inner { + position: absolute; + top: $radio-wp-icon-border-width; + left: $radio-wp-icon-border-width; + width: $radio-wp-icon-width / 2; + height: $radio-wp-icon-height / 2; + background-color: $radio-wp-color-off; + border-radius: 50%; + display: none; +} + + +// Windows Radio Outer Circle: Checked +// ----------------------------------------- + +.radio-checked { + border-color: $radio-wp-color-on; +} + + +// Windows Radio Inner Circle: Checked +// ----------------------------------------- + +.radio-checked .radio-inner { + // transform: scale3d(1, 1, 1); + display: block; +} + + +// Windows Radio: Disabled +// ----------------------------------------- + +.radio-disabled, +.item-radio-disabled ion-label { + opacity: $radio-wp-disabled-opacity; + pointer-events: none; +} + + +// Windows Radio Within An Item +// ----------------------------------------- + +.item ion-radio { + position: static; + display: block; + margin: $item-wp-padding-media-top ($item-wp-padding-right / 2) $item-wp-padding-media-bottom 0; +} + +.item-radio ion-label { + margin-left: 0; +} + + +// Windows Radio Color Mixin +// -------------------------------------------------- + +@mixin radio-theme-wp($color-name, $color-value) { + + ion-radio[#{$color-name}] { + + .radio-checked { + border-color: $color-value; + } + + } + +} + + +// Generate Windows Radio Colors +// -------------------------------------------------- + +@each $color-name, $color-value in $colors-wp { + + @include radio-theme-wp($color-name, $color-value); + +} diff --git a/ionic/components/toolbar/toolbar.wp.scss b/ionic/components/toolbar/toolbar.wp.scss index c27ba62ff9..8ffda2806f 100644 --- a/ionic/components/toolbar/toolbar.wp.scss +++ b/ionic/components/toolbar/toolbar.wp.scss @@ -18,7 +18,9 @@ $toolbar-order-wp: ( $toolbar-wp-padding: 4px !default; $toolbar-wp-height: 4.6rem !default; -$toolbar-wp-title-font-size: 2.0rem !default; +$toolbar-wp-title-font-size: 1.5rem !default; +$toolbar-wp-title-font-weight: bold !default; +$toolbar-wp-title-text-transform: uppercase !default; $toolbar-wp-button-font-size: 1.4rem !default; $navbar-wp-height: $toolbar-wp-height !default; @@ -58,7 +60,8 @@ ion-navbar-section { color: $toolbar-wp-text-color; padding: 0 12px; font-size: $toolbar-wp-title-font-size; - font-weight: 500; + font-weight: $toolbar-wp-title-font-weight; + text-transform: $toolbar-wp-title-text-transform; } @mixin wp-toolbar-theme($color-name, $color-value) {