CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3833 style: Style checkboxes and radio on alerts

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-03-29 11:34:49 +02:00
parent bbd0d5bb9b
commit 88d479ccfd
1 changed files with 48 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/theme/theme.base.scss
View File

@ -870,7 +870,8 @@ ion-action-sheet.md {
// Radio. // Radio.
ion-radio, ion-radio,
input[type=radio] { input[type=radio],
.select-alert.ios .alert-radio-icon {
--color: var(--text-color); --color: var(--text-color);
--color-checked: var(--color); --color-checked: var(--color);
--border-radius: 50%; --border-radius: 50%;
@ -882,7 +883,8 @@ input[type=radio] {
} }
.ios ion-radio, .ios ion-radio,
.ios input[type=radio] { .ios input[type=radio],
.select-alert.ios .alert-radio-icon {
--border-width: 1px; --border-width: 1px;
--outer-border-width: 1px; --outer-border-width: 1px;
} }
@ -911,8 +913,8 @@ input[type=radio] {
&.radio-checked { &.radio-checked {
&::part(container) { &::part(container) {
border-color: var(--color-checked); border-color: var(--color);
background: var(--color-checked); background: var(--color);
} }
&::part(mark) { &::part(mark) {
@ -921,6 +923,44 @@ input[type=radio] {
} }
} }
.select-alert.ios {
.alert-radio-icon {
height: var(--size);
width: var(--size);
min-width: var(--size);
border-radius: var(--border-radius);
border-width: var(--outer-border-width);
border-style: var(--border-style);
border-color: var(--color);
@include margin(10px, 8px, 10px, 8px);
display: flex;
align-items: center;
justify-content: center;
.alert-radio-inner {
top: auto;
left: auto;
position: static;
border-radius: var(--inner-border-radius);
width: calc(50% + var(--outer-border-width));
height: calc(50% + var(--outer-border-width));
transform: scale3d(0, 0, 0);
transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
background: var(--contrast-background);
border: 0 !important;
}
}
button[aria-checked=true] .alert-radio-icon {
border-color: var(--color-checked);
background: var(--color-checked);
.alert-radio-inner {
transform: scale3d(1, 1, 1);
}
}
}
// Checkbox. // Checkbox.
ion-checkbox, ion-checkbox,
input[type=checkbox] { input[type=checkbox] {
@ -938,6 +978,10 @@ input[type=checkbox] {
--outer-border-width: 1px; --outer-border-width: 1px;
} }
.select-alert.ios .alert-checkbox-icon {
border-radius: 2px;
}
// Select. // Select.
ion-select::part(text) { ion-select::part(text) {
white-space: normal; white-space: normal;