| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- @import "../../themes/ionic.globals.wp";
-
- // Windows Checkbox
- // --------------------------------------------------
-
- /// @prop - Border bottom width of the checkbox
- $checkbox-wp-border-bottom-width: 1px !default;
-
- /// @prop - Border bottom style of the checkbox
- $checkbox-wp-border-bottom-style: solid !default;
-
- /// @prop - Border bottom color of the checkbox
- $checkbox-wp-border-bottom-color: $list-wp-border-color !default;
-
- /// @prop - Opacity of the disabled checkbox
- $checkbox-wp-disabled-opacity: .3 !default;
-
- /// @prop - Background color of the checkbox icon when off
- $checkbox-wp-icon-background-color-off: $list-wp-background-color !default;
-
- /// @prop - Background color of the checkbox icon when on
- $checkbox-wp-icon-background-color-on: color($colors-wp, primary) !default;
-
- /// @prop - Size of the checkbox icon
- $checkbox-wp-icon-size: 16px !default;
-
- /// @prop - Width of the checkbox icon checkmark
- $checkbox-wp-icon-checkmark-width: 1px !default;
-
- /// @prop - Style of the checkbox icon checkmark
- $checkbox-wp-icon-checkmark-style: solid !default;
-
- /// @prop - Color of the checkbox icon checkmark
- $checkbox-wp-icon-checkmark-color: color-contrast($colors-wp, $checkbox-wp-icon-background-color-on) !default;
-
- /// @prop - Border width of the checkbox icon
- $checkbox-wp-icon-border-width: 2px !default;
-
- /// @prop - Border style of the checkbox icon
- $checkbox-wp-icon-border-style: solid !default;
-
- /// @prop - Border radius of the checkbox icon
- $checkbox-wp-icon-border-radius: 0 !default;
-
- /// @prop - Border color of the checkbox icon when off
- $checkbox-wp-icon-border-color-off: #333 !default;
-
- /// @prop - Border color of the checkbox icon when on
- $checkbox-wp-icon-border-color-on: color($colors-wp, primary) !default;
-
- // deprecated
- $checkbox-wp-item-left-margin: null !default;
-
- /// @prop - Margin top of the start checkbox item
- $checkbox-wp-item-start-margin-top: $item-wp-padding-media-top !default;
-
- /// @prop - Margin end of the start checkbox item
- $checkbox-wp-item-start-margin-end: $item-wp-padding-end !default;
-
- /// @prop - Margin bottom of the start checkbox item
- $checkbox-wp-item-start-margin-bottom: $item-wp-padding-media-bottom !default;
-
- /// @prop - Margin start of the start checkbox item
- $checkbox-wp-item-start-margin-start: 4px !default;
-
- // deprecated
- $checkbox-wp-item-right-margin: null !default;
-
- /// @prop - Margin top of the end checkbox item
- $checkbox-wp-item-end-margin-top: 11px !default;
-
- /// @prop - Margin end of the end checkbox item
- $checkbox-wp-item-end-margin-end: 10px !default;
-
- /// @prop - Margin bottom of the end checkbox item
- $checkbox-wp-item-end-margin-bottom: 10px !default;
-
- /// @prop - Margin start of the end checkbox item
- $checkbox-wp-item-end-margin-start: 0 !default;
-
- .checkbox-wp {
- position: relative;
- display: inline-block;
- }
-
-
- // Windows Checkbox Outer Square: Unchecked
- // -----------------------------------------
-
- .checkbox-wp .checkbox-icon {
- @include border-radius($checkbox-wp-icon-border-radius);
-
- position: relative;
-
- width: $checkbox-wp-icon-size;
- height: $checkbox-wp-icon-size;
-
- border-width: $checkbox-wp-icon-border-width;
- border-style: $checkbox-wp-icon-border-style;
- border-color: $checkbox-wp-icon-border-color-off;
- background-color: $checkbox-wp-icon-background-color-off;
- }
-
-
- // Windows Checkbox Outer Square: Checked
- // -----------------------------------------
-
- .checkbox-wp .checkbox-checked {
- border-color: $checkbox-wp-icon-border-color-on;
- background-color: $checkbox-wp-icon-background-color-on;
- }
-
-
- // Windows Checkbox Inner Checkmark: Checked
- // -----------------------------------------
-
- .checkbox-wp .checkbox-checked .checkbox-inner {
- @include position(-2px, null, null, 3px);
-
- position: absolute;
-
- width: 6px;
- height: 12px;
-
- border-width: $checkbox-wp-icon-checkmark-width;
- border-top-width: 0;
- border-left-width: 0;
- border-style: $checkbox-wp-icon-checkmark-style;
- border-color: $checkbox-wp-icon-checkmark-color;
- transform: rotate(45deg);
- }
-
-
- // Windows Checkbox: Disabled
- // -----------------------------------------
-
- .checkbox-wp.checkbox-disabled,
- .item-wp.item-checkbox-disabled ion-label {
- opacity: $checkbox-wp-disabled-opacity;
-
- pointer-events: none;
- }
-
-
- // Windows Checkbox Within An Item
- // -----------------------------------------
-
- .item.item-wp .checkbox-wp {
- position: static;
- display: block;
-
- @include deprecated-variable(margin, $checkbox-wp-item-left-margin) {
- @include margin($checkbox-wp-item-start-margin-top, $checkbox-wp-item-start-margin-end, $checkbox-wp-item-start-margin-bottom, $checkbox-wp-item-start-margin-start);
- }
- }
-
- .item.item-wp .checkbox-wp[item-right], // deprecated
- .item.item-wp .checkbox-wp[item-end] {
- @include deprecated-variable(margin, $checkbox-wp-item-right-margin) {
- @include margin($checkbox-wp-item-end-margin-top, $checkbox-wp-item-end-margin-end, $checkbox-wp-item-end-margin-bottom, $checkbox-wp-item-end-margin-start);
- }
- }
-
- .checkbox-wp + .item-inner ion-label {
- @include margin-horizontal(0, null);
- }
-
-
- // Windows Checkbox Color Mixin
- // --------------------------------------------------
-
- @mixin checkbox-theme-wp($color-name, $color-base, $color-contrast) {
-
- .checkbox-wp-#{$color-name} .checkbox-checked {
- border-color: $color-base;
- background-color: $color-base;
- }
-
- .checkbox-wp-#{$color-name} .checkbox-checked .checkbox-inner {
- border-color: $color-contrast;
- }
-
- }
-
-
- // Generate Windows Checkbox Colors
- // --------------------------------------------------
-
- @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
- @include checkbox-theme-wp($color-name, $color-base, $color-contrast);
- }
|