Carlos Alcaide
62b097170c
- Refactor RevealComponent class to inherit from RoseDropdown, no logic need it. Now there is no need to keep any logic or state. - Refactor component, to toggle Summary text and set chevron icon with CSS. - Removed old commented code. Please feel free to suggest a change to bring it back if can be useful.
71 lines
1.6 KiB
SCSS
71 lines
1.6 KiB
SCSS
@use '../../variables/sizing';
|
|
@use '../../utilities/type';
|
|
@use 'sass:math';
|
|
|
|
$checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'></path></svg>");
|
|
|
|
.rose-dropdown-item {
|
|
@include type.type(s);
|
|
min-width: (sizing.rems(m)) * 20;
|
|
$line-height: math.div(36, 14);
|
|
line-height: $line-height;
|
|
|
|
--color: var(--stark);
|
|
--background-color: transparent;
|
|
|
|
color: var(--color);
|
|
background-color: var(--background-color);
|
|
|
|
&:hover {
|
|
--background-color: var(--ui-gray-subtler-5);
|
|
}
|
|
|
|
.rose-form-radio {
|
|
color: currentColor;
|
|
margin-bottom: 0;
|
|
|
|
.rose-form-radio-label {
|
|
display: block;
|
|
padding-top: sizing.rems(xs) + sizing.rems(xxxxs);
|
|
padding-bottom: sizing.rems(xs) + sizing.rems(xxxxs);
|
|
padding-left: sizing.rems(s);
|
|
padding-right: sizing.rems(xl);
|
|
font-weight: normal;
|
|
|
|
// &::before,
|
|
// &::after {
|
|
// display: none;
|
|
// }
|
|
|
|
&::after {
|
|
top: sizing.rems(xxs) + sizing.rems(xxxs);
|
|
right: sizing.rems(xs);
|
|
left: auto;
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
|
|
.rose-form-radio-field {
|
|
&:not(:checked) {
|
|
~ .rose-form-radio-label {
|
|
&::after {
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
}
|
|
&:checked {
|
|
~ .rose-form-radio-label {
|
|
color: var(--action);
|
|
background-color: var(--action-subtler-1h);
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
~ .rose-form-radio-label {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|