mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-27 15:30:57 +00:00
110 lines
2.8 KiB
CSS
110 lines
2.8 KiB
CSS
.m_f3f1af94 {
|
|
--radio-size-xs: 16px;
|
|
--radio-size-sm: 20px;
|
|
--radio-size-md: 24px;
|
|
--radio-size-lg: 30px;
|
|
--radio-size-xl: 36px;
|
|
--radio-size: var(--radio-size-sm);
|
|
|
|
--radio-icon-size-xs: 6px;
|
|
--radio-icon-size-sm: 8px;
|
|
--radio-icon-size-md: 10px;
|
|
--radio-icon-size-lg: 14px;
|
|
--radio-icon-size-xl: 16px;
|
|
--radio-icon-size: var(--radio-icon-size-sm);
|
|
--radio-icon-color: var(--mantine-color-white);
|
|
}
|
|
|
|
.m_89c4f5e4 {
|
|
position: relative;
|
|
width: var(--radio-size);
|
|
height: var(--radio-size);
|
|
order: 1;
|
|
}
|
|
|
|
.m_89c4f5e4:where([data-label-position='left']) {
|
|
order: 2;
|
|
}
|
|
|
|
.m_f3ed6b2b {
|
|
color: var(--radio-icon-color);
|
|
opacity: var(--radio-icon-opacity, 0);
|
|
transform: var(--radio-icon-transform, scale(0.2) translateY(calc(0.625rem * var(--mantine-scale))));
|
|
transition:
|
|
opacity 100ms ease,
|
|
transform 200ms ease;
|
|
pointer-events: none;
|
|
width: var(--radio-icon-size);
|
|
height: var(--radio-icon-size);
|
|
position: absolute;
|
|
top: calc(50% - var(--radio-icon-size) / 2);
|
|
left: calc(50% - var(--radio-icon-size) / 2);
|
|
}
|
|
|
|
.m_8a3dbb89 {
|
|
border: 1px solid;
|
|
position: relative;
|
|
appearance: none;
|
|
width: var(--radio-size);
|
|
height: var(--radio-size);
|
|
border-radius: var(--radio-radius, var(--radio-size));
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition-property: background-color, border-color;
|
|
transition-timing-function: ease;
|
|
transition-duration: 100ms;
|
|
cursor: var(--mantine-cursor-type);
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
:where([data-mantine-color-scheme='light']) .m_8a3dbb89 {
|
|
background-color: var(--mantine-color-white);
|
|
border-color: var(--mantine-color-gray-4);
|
|
}
|
|
|
|
:where([data-mantine-color-scheme='dark']) .m_8a3dbb89 {
|
|
background-color: var(--mantine-color-dark-6);
|
|
border-color: var(--mantine-color-dark-4);
|
|
}
|
|
|
|
.m_8a3dbb89:checked {
|
|
background-color: var(--radio-color, var(--mantine-primary-color-filled));
|
|
border-color: var(--radio-color, var(--mantine-primary-color-filled));
|
|
}
|
|
|
|
.m_8a3dbb89:checked + .m_f3ed6b2b {
|
|
--radio-icon-opacity: 1;
|
|
--radio-icon-transform: scale(1);
|
|
}
|
|
|
|
.m_8a3dbb89:disabled {
|
|
cursor: not-allowed;
|
|
background-color: var(--mantine-color-disabled);
|
|
border-color: var(--mantine-color-disabled-border);
|
|
}
|
|
|
|
.m_8a3dbb89:disabled + .m_f3ed6b2b {
|
|
--radio-icon-color: var(--mantine-color-disabled-color);
|
|
}
|
|
|
|
.m_8a3dbb89:where([data-error]) {
|
|
border-color: var(--mantine-color-error);
|
|
}
|
|
|
|
.m_1bfe9d39 + .m_f3ed6b2b {
|
|
--radio-icon-color: var(--radio-color);
|
|
}
|
|
|
|
.m_1bfe9d39:checked:not(:disabled) {
|
|
background-color: transparent;
|
|
border-color: var(--radio-color);
|
|
}
|
|
|
|
.m_1bfe9d39:checked:not(:disabled) + .m_f3ed6b2b {
|
|
--radio-icon-color: var(--radio-color);
|
|
--radio-icon-opacity: 1;
|
|
--radio-icon-transform: none;
|
|
}
|