Marc Mintel
5397309103
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
70 lines
1.6 KiB
Plaintext
70 lines
1.6 KiB
Plaintext
@import '../../../scss/styles.scss';
|
|
|
|
@layer payload-default {
|
|
.popup-button-list {
|
|
--list-button-padding: calc(var(--base) * 0.5);
|
|
--popup-button-list-gap: 3px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: left;
|
|
[dir='rtl'] &__text-align--left {
|
|
text-align: right;
|
|
}
|
|
&__text-align--left {
|
|
text-align: left;
|
|
}
|
|
|
|
&__text-align--center {
|
|
text-align: center;
|
|
}
|
|
[dir='rtl'] &__text-align--right {
|
|
text-align: left;
|
|
}
|
|
&__text-align--right {
|
|
text-align: right;
|
|
}
|
|
|
|
&__button {
|
|
@extend %btn-reset;
|
|
padding-left: var(--list-button-padding);
|
|
padding-right: var(--list-button-padding);
|
|
padding-top: calc(2px + var(--popup-button-list-gap) / 2);
|
|
padding-bottom: calc(2px + var(--popup-button-list-gap) / 2);
|
|
cursor: pointer;
|
|
text-align: inherit;
|
|
line-height: var(--base);
|
|
text-decoration: none;
|
|
border-radius: 3px;
|
|
width: 100%;
|
|
button {
|
|
@extend %btn-reset;
|
|
|
|
&:focus-visible {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:focus-within {
|
|
outline: none;
|
|
background-color: var(--popup-button-highlight);
|
|
}
|
|
}
|
|
|
|
&__button--selected {
|
|
background-color: var(--theme-elevation-150);
|
|
}
|
|
|
|
&__disabled {
|
|
cursor: not-allowed;
|
|
--popup-button-highlight: transparent;
|
|
background-color: var(--popup-button-highlight);
|
|
color: var(--theme-elevation-350);
|
|
&:hover {
|
|
--popup-button-highlight: var(--theme-elevation-50);
|
|
}
|
|
}
|
|
}
|
|
}
|