mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-23 22:12:44 +03:00
EZQMS-333: Customizable RadioButton label (#3900)
* ezqms-333: update RadioButton structure Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com> * ezqms-333: fix formatting Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com> * ezqms-333: fix formatting Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com> * ezqms-333: fix radio styles Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com> --------- Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com>
This commit is contained in:
Alexey Zinoviev
GitHub
parent
f1b0cb7dd7
commit
28ee0e8f62
@ -302,7 +302,6 @@
|
||||
|
||||
/* Radio Button */
|
||||
.antiRadio {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: min-content;
|
||||
@ -325,93 +324,133 @@
|
||||
&.gap-medium { margin-bottom: .5rem; }
|
||||
|
||||
label {
|
||||
padding-left: 1.375rem;
|
||||
font-size: .8125rem;
|
||||
flex: 1 1 auto;
|
||||
padding-left: 0.375rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--theme-content-color);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: .25rem;
|
||||
left: .25rem;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
background-color: var(--primary-button-color);
|
||||
border-radius: 50%;
|
||||
opacity: .8;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
.marker {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
background-color: var(--theme-button-default);
|
||||
border: 1px solid var(--theme-divider-color);
|
||||
|
||||
&::before {
|
||||
top: -.1875rem;
|
||||
left: -.1875rem;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: calc(-0.1875rem - 1px);
|
||||
left: calc(-0.1875rem - 1px);
|
||||
width: 1.375rem;
|
||||
height: 1.375rem;
|
||||
border: 1px solid var(--primary-button-default);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
top: 0rem;
|
||||
left: 0rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-color: var(--theme-button-default);
|
||||
border: 1px solid var(--theme-divider-color);
|
||||
position: absolute;
|
||||
top: calc(0.25rem - 1px);
|
||||
left: calc(0.25rem - 1px);
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
background-color: var(--primary-button-color);
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.disabled, .checked):hover {
|
||||
&::after { background-color: var(--theme-button-hovered); }
|
||||
label { color: var(--theme-caption-color); }
|
||||
.marker {
|
||||
background-color: var(--theme-button-hovered);
|
||||
}
|
||||
&.checked:not(.disabled):hover {
|
||||
&::after { background-color: var(--primary-button-hovered); }
|
||||
|
||||
label {
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
&.checked:not(.disabled):hover {
|
||||
.marker {
|
||||
background-color: var(--primary-button-hovered);
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--theme-caption-color);
|
||||
&::after { opacity: 1; }
|
||||
}
|
||||
}
|
||||
&:focus-within:not(.disabled) {
|
||||
&::before { content: ''; }
|
||||
label { color: var(--theme-caption-color); }
|
||||
.marker {
|
||||
&::before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
label::after { opacity: 1; }
|
||||
&:active::after { background-color: var(--primary-button-pressed); }
|
||||
&:active {
|
||||
.marker {
|
||||
background-color: var(--primary-button-pressed);
|
||||
}
|
||||
}
|
||||
|
||||
.marker::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
&.checked:not(.disabled) {
|
||||
&::after { background-color: var(--primary-button-default); }
|
||||
label::after { content: ''; }
|
||||
.marker {
|
||||
background-color: var(--primary-button-default);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
&::after {
|
||||
.marker {
|
||||
background-color: var(--primary-button-disabled);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.checked {
|
||||
marker::after {
|
||||
content: '';
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--theme-darker-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&.checked label::after {
|
||||
content: '';
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
&:not(.disabled),
|
||||
&:not(.disabled) label { cursor: pointer; }
|
||||
&:not(.disabled) label {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:not(.disabled):active {
|
||||
&::after { background-color: var(--primary-button-pressed); }
|
||||
label::after {
|
||||
.marker {
|
||||
background-color: var(--primary-button-pressed);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* StatesBar */
|
||||
.antiStatesBar {
|
||||
|
||||
@ -49,12 +49,14 @@
|
||||
if (!disabled && group !== value) action()
|
||||
}}
|
||||
/>
|
||||
<div class="marker" />
|
||||
<label for={id} class:overflow-label={labelOverflow}>
|
||||
<slot />
|
||||
<slot>
|
||||
{#if labelIntl}
|
||||
<Label label={labelIntl} params={labelParams} />
|
||||
{:else}
|
||||
{label}
|
||||
{/if}
|
||||
</slot>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user