83 lines
1.7 KiB
SCSS
83 lines
1.7 KiB
SCSS
@import "./radio";
|
|
@import "./radio.ios.vars";
|
|
|
|
// iOS Radio
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--color-checked: #{ion-color(primary, base)};
|
|
|
|
width: $radio-ios-icon-width;
|
|
height: $radio-ios-icon-height;
|
|
}
|
|
|
|
:host(.ion-color.radio-checked) .radio-inner {
|
|
border-color: current-color(base);
|
|
}
|
|
|
|
.item-radio.item-ios ion-label {
|
|
@include margin-horizontal(0, null);
|
|
}
|
|
|
|
|
|
// iOS Radio Checkmark: Checked
|
|
// -----------------------------------------
|
|
|
|
.radio-inner {
|
|
width: 33%;
|
|
height: 50%;
|
|
}
|
|
|
|
:host(.radio-checked) .radio-inner {
|
|
transform: rotate(45deg);
|
|
|
|
border-width: $radio-ios-icon-border-width;
|
|
border-top-width: 0;
|
|
border-left-width: 0;
|
|
border-style: $radio-ios-icon-border-style;
|
|
border-color: var(--color-checked);
|
|
}
|
|
|
|
|
|
// iOS Radio: Disabled
|
|
// -----------------------------------------
|
|
|
|
:host(.radio-disabled) {
|
|
opacity: $radio-ios-disabled-opacity;
|
|
}
|
|
|
|
|
|
// iOS Radio: Keyboard Focus
|
|
// -----------------------------------------
|
|
|
|
:host(.ion-focused) .radio-icon::after {
|
|
@include border-radius(var(--inner-border-radius));
|
|
@include position(-8px, null, null, -9px);
|
|
|
|
display: block;
|
|
position: absolute;
|
|
|
|
width: 36px;
|
|
height: 36px;
|
|
|
|
background: $radio-ios-background-color-focused;
|
|
|
|
content: "";
|
|
opacity: .2;
|
|
}
|
|
|
|
|
|
// iOS Radio Within An Item
|
|
// -----------------------------------------
|
|
|
|
:host(.in-item) {
|
|
@include margin($radio-ios-item-end-margin-top, $radio-ios-item-end-margin-end, $radio-ios-item-end-margin-bottom, $radio-ios-item-end-margin-start);
|
|
|
|
display: block;
|
|
position: static;
|
|
}
|
|
|
|
:host(.in-item[slot="start"]) {
|
|
@include margin($radio-ios-item-start-margin-top, $radio-ios-item-start-margin-end, $radio-ios-item-start-margin-bottom, $radio-ios-item-start-margin-start);
|
|
}
|