javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +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

135
core/src/components/checkbox/checkbox.md.scss Normal file
View File

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