mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
baa04cde4d
Using the :active pseudo works fine for desktop, but mobile is a completely different beast, especially with the quirks of each platform. By intentionally not using any :active selectors and manually adding/removing a .active class, it gives us a precise control on how the active state works for ALL platforms. Additionally, this places less selectors in the css, and reduces the possibility of unnecessary repaints. Currently this method of using .active instead of :active is being applied to .button and .item elements.
118 lines
2.9 KiB
SCSS
118 lines
2.9 KiB
SCSS
|
|
/**
|
|
* Checkbox
|
|
* --------------------------------------------------
|
|
*/
|
|
|
|
.checkbox {
|
|
// set the color defaults
|
|
@include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default);
|
|
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: ($checkbox-height / 4) ($checkbox-width / 4);
|
|
cursor: pointer;
|
|
|
|
&.checkbox-light {
|
|
@include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light);
|
|
}
|
|
&.checkbox-stable {
|
|
@include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable);
|
|
}
|
|
&.checkbox-positive {
|
|
@include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive);
|
|
}
|
|
&.checkbox-calm {
|
|
@include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm);
|
|
}
|
|
&.checkbox-assertive {
|
|
@include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive);
|
|
}
|
|
&.checkbox-balanced {
|
|
@include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced);
|
|
}
|
|
&.checkbox-energized {
|
|
@include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized);
|
|
}
|
|
&.checkbox-royal {
|
|
@include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal);
|
|
}
|
|
&.checkbox-dark {
|
|
@include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark);
|
|
}
|
|
}
|
|
|
|
.checkbox input {
|
|
position: relative;
|
|
width: $checkbox-width;
|
|
height: $checkbox-height;
|
|
border: 0;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
|
|
&:before {
|
|
/* what the checkbox looks like when its not checked */
|
|
display: table;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: $checkbox-border-radius;
|
|
background: $checkbox-off-bg-color;
|
|
content: ' ';
|
|
transition: background-color .1s ease-in-out;
|
|
}
|
|
}
|
|
|
|
/* the checkmark within the box */
|
|
.checkbox input:after {
|
|
@include transition(opacity .05s ease-in-out);
|
|
@include rotate(-45deg);
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 26%;
|
|
display: table;
|
|
width: ($checkbox-width / 2) + 1;
|
|
height: ($checkbox-width / 3) + 1;
|
|
border: $checkbox-check-width solid $checkbox-check-color;
|
|
border-top: 0;
|
|
border-right: 0;
|
|
content: ' ';
|
|
opacity: 0;
|
|
}
|
|
|
|
.grade-c .checkbox input:after {
|
|
@include rotate(0);
|
|
top: 3px;
|
|
left: 4px;
|
|
border: none;
|
|
color: $checkbox-check-color;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
content: '\2713';
|
|
}
|
|
|
|
/* what the checkmark looks like when its checked */
|
|
.checkbox input:checked:after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* make sure item content have enough padding on left to fit the checkbox */
|
|
.item-checkbox {
|
|
padding-left: ($item-padding * 2) + $checkbox-width;
|
|
|
|
&.active {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* position the checkbox to the left within an item */
|
|
.item-checkbox .checkbox {
|
|
@include display-flex();
|
|
@include align-items(center);
|
|
position: absolute;
|
|
top: 0;
|
|
left: $item-padding / 2;
|
|
z-index: $z-index-item-checkbox;
|
|
height: 100%;
|
|
}
|