diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss index ad6876d241..d961c43bda 100644 --- a/ionic/components/button/modes/ios.scss +++ b/ionic/components/button/modes/ios.scss @@ -1,8 +1,5 @@ @import "../../../globals.ios"; @import "../button"; -@import "../button-fab"; -@import "../button-icon"; -@import "../button-size"; // iOS Button // -------------------------------------------------- @@ -156,3 +153,11 @@ $button-ios-border-radius: 4px !default; @include ios-button-outline($color-name, $color-value); @include ios-button-clear($color-name, $color-value); } + + +// Core Button Overrides +// -------------------------------------------------- + +@import "../button-fab"; +@import "../button-icon"; +@import "../button-size"; diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss index 5ad83d1837..a3611e5c27 100644 --- a/ionic/components/button/modes/md.scss +++ b/ionic/components/button/modes/md.scss @@ -1,8 +1,5 @@ @import "../../../globals.md"; @import "../button"; -@import "../button-fab"; -@import "../button-icon"; -@import "../button-size"; // Material Design Button // -------------------------------------------------- @@ -250,3 +247,11 @@ $button-md-hover-opacity: 0.8 !default; @include md-button-outline($color-name, $color-value); @include md-button-clear($color-name, $color-value); } + + +// Core Button Overrides +// -------------------------------------------------- + +@import "../button-fab"; +@import "../button-icon"; +@import "../button-size"; diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss deleted file mode 100644 index 52d55bf78a..0000000000 --- a/ionic/components/checkbox/checkbox.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import "../../globals.core"; - -// Checkbox -// -------------------------------------------------- - - -ion-checkbox { - cursor: pointer; - @include user-select-none(); -} - -ion-checkbox[aria-disabled=true] { - opacity: 0.5; - color: $subdued-text-color; - pointer-events: none; -} diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index 17704a8b86..50f4ee7c96 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/ionic/components/checkbox/checkbox.ts @@ -39,9 +39,9 @@ import {Form} from '../../util/form'; }, template: '
' + - '' + - '' + - '' + + '
' + + '
' + + '
' + '' + '' + '' + diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss index 721c1a6fa4..1999356935 100644 --- a/ionic/components/checkbox/modes/ios.scss +++ b/ionic/components/checkbox/modes/ios.scss @@ -1,5 +1,5 @@ @import "../../../globals.ios"; -@import "../checkbox"; + // iOS Checkbox Structure // -------------------------------------------------- @@ -13,13 +13,15 @@ $checkbox-ios-checkmark-color-on: $background-ios-color !default; ion-checkbox { + cursor: pointer; + @include user-select-none(); - &[aria-checked=true] checkbox-icon { + &[aria-checked=true] .checkbox-icon { background-color: $checkbox-ios-background-color-on; border-color: $checkbox-ios-border-color-on; } - &[aria-checked=true] checkbox-icon:after { + &[aria-checked=true] .checkbox-icon:after { position: absolute; border: 1px solid $checkbox-ios-checkmark-color-on; top: 3px; @@ -38,12 +40,17 @@ ion-checkbox { } -media-checkbox { - display: block; +ion-checkbox[aria-disabled=true] { + opacity: 0.5; + color: $subdued-text-ios-color; + pointer-events: none; +} + +.media-checkbox { margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px; } -checkbox-icon { +.checkbox-icon { position: relative; display: block; width: $checkbox-ios-icon-size; @@ -59,7 +66,7 @@ checkbox-icon { @mixin checkbox-theme-ios($color-name, $bg-on) { - ion-checkbox[#{$color-name}][aria-checked=true] checkbox-icon { + ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon { background-color: $bg-on; border-color: $bg-on; } @@ -67,11 +74,9 @@ checkbox-icon { } -// Generate iOS Checkbox Auxiliary Colors +// Generate iOS Checkbox Colors // -------------------------------------------------- -@each $color-name, $value in $colors-ios { - - @include checkbox-theme-ios($color-name, $value); - +@each $color-name, $color-value in $colors-ios { + @include checkbox-theme-ios($color-name, $color-value); } diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss index ca7067bc9c..528a216b1b 100644 --- a/ionic/components/checkbox/modes/md.scss +++ b/ionic/components/checkbox/modes/md.scss @@ -1,5 +1,4 @@ @import "../../../globals.md"; -@import "../checkbox"; // Material Design Checkbox // -------------------------------------------------- @@ -15,6 +14,9 @@ $checkbox-md-checkmark-color-on: $background-md-color !default; ion-checkbox { + cursor: pointer; + @include user-select-none(); + &.item .item-inner { border: none; padding-right: 0; @@ -26,12 +28,12 @@ ion-checkbox { padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0; } - &[aria-checked=true] checkbox-icon { + &[aria-checked=true] .checkbox-icon { background-color: $checkbox-md-background-color-on; border-color: $checkbox-md-border-color-on; } - &[aria-checked=true] checkbox-icon:after { + &[aria-checked=true] .checkbox-icon:after { position: absolute; border: 2px solid $checkbox-md-checkmark-color-on; top: 0; @@ -46,15 +48,19 @@ ion-checkbox { } -media-checkbox { - display: block; +ion-checkbox[aria-disabled=true] { + opacity: 0.5; + color: $subdued-text-md-color; + pointer-events: none; +} + +.media-checkbox { // TODO convert these to sass variables margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px; } -checkbox-icon { +.checkbox-icon { position: relative; - display: block; width: $checkbox-md-icon-size; height: $checkbox-md-icon-size; border-radius: $checkbox-md-border-radius; @@ -68,7 +74,7 @@ checkbox-icon { @mixin checkbox-theme-md($color-name, $bg-on) { - ion-checkbox[#{$color-name}][aria-checked=true] checkbox-icon { + ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon { background-color: $bg-on; border-color: $bg-on; } @@ -80,7 +86,5 @@ checkbox-icon { // -------------------------------------------------- @each $color-name, $color-value in $colors-md { - @include checkbox-theme-md($color-name, $color-value); - }