javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(packages): move the packages to root

Browse Source
This commit is contained in:
Brandy Carney
2018-03-12 16:02:25 -04:00
parent 097f1a2cd3
commit d37623a2ca
1255 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
core/src/components/checkbox/checkbox.ios.scss Normal file
View File

@ -0,0 +1,127 @@
@import "./checkbox";
@import "./checkbox.ios.vars";
// iOS Checkbox
// --------------------------------------------------
// iOS Checkbox Outer Circle: Unchecked
// -----------------------------------------
.checkbox-ios .checkbox-icon {
@include border-radius($checkbox-ios-icon-border-radius);
position: relative;
width: $checkbox-ios-icon-size;
height: $checkbox-ios-icon-size;
border-width: $checkbox-ios-icon-border-width;
border-style: $checkbox-ios-icon-border-style;
border-color: $checkbox-ios-icon-border-color-off;
background-color: $checkbox-ios-background-color-off;
contain: strict;
}
// iOS Checkbox Outer Circle: Checked
// -----------------------------------------
.checkbox-ios .checkbox-checked {
border-color: $checkbox-ios-icon-border-color-on;
background-color: $checkbox-ios-background-color-on;
}
// iOS Checkbox Inner Checkmark: Checked
// -----------------------------------------
.checkbox-ios .checkbox-checked .checkbox-inner {
@include position(4px, null, null, 7px);
position: absolute;
width: 4px;
height: 9px;
border-width: $checkbox-ios-icon-checkmark-width;
border-top-width: 0;
border-left-width: 0;
border-style: $checkbox-ios-icon-checkmark-style;
border-color: $checkbox-ios-icon-checkmark-color;
transform: rotate(45deg);
}
// iOS Checkbox: Disabled
// -----------------------------------------
.checkbox-ios.checkbox-disabled,
.item-ios.item-checkbox-disabled ion-label {
opacity: $checkbox-ios-disabled-opacity;
pointer-events: none;
}
// iOS Checkbox Keyboard Focus
// -----------------------------------------
.checkbox-key .checkbox-icon::after {
@include border-radius(50%);
@include position(-9px, null, null, -9px);
position: absolute;
display: block;
width: 36px;
height: 36px;
background: $checkbox-ios-background-color-focused;
content: "";
opacity: .2;
}
// iOS Checkbox Within An Item
// -----------------------------------------
.item.item-ios .checkbox-ios {
@include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start);
position: static;
display: block;
}
.item.item-ios .checkbox-ios[slot="end"] {
@include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start);
}
// iOS Checkbox Color Mixin
// --------------------------------------------------
@mixin checkbox-theme-ios($color-name) {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.checkbox-ios-#{$color-name} .checkbox-checked {
border-color: $color-base;
background-color: $color-base;
}
.checkbox-ios-#{$color-name} .checkbox-checked .checkbox-inner {
border-color: $color-contrast;
}
}
// Generate iOS Checkbox Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
@include checkbox-theme-ios($color-name);
}