penpot/frontend/src/app/main/ui/components/select.scss
2024-01-18 11:00:46 +01:00

117 lines
2.6 KiB
SCSS

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@import "refactor/common-refactor.scss";
.custom-select {
@include titleTipography;
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
height: $s-32;
width: 100%;
margin: 0;
padding: $s-8;
border-radius: $br-8;
background-color: var(--menu-background-color);
border: $s-1 solid var(--menu-background-color);
color: var(--menu-foreground-color);
cursor: pointer;
&.icon {
grid-template-columns: auto 1fr auto;
}
.current-icon {
@include flexCenter;
width: $s-24;
padding-right: $s-4;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.dropdown-button {
@include flexCenter;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
}
.custom-select-dropdown {
@extend .dropdown-wrapper;
.separator {
margin: 0;
height: $s-12;
border-top: 1px solid $db-primary;
}
}
.checked-element {
@extend .dropdown-element-base;
.icon {
@include flexCenter;
height: $s-24;
width: $s-24;
padding-right: $s-4;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.label {
flex-grow: 1;
width: 100%;
}
.check-icon {
@include flexCenter;
svg {
@extend .button-icon-small;
visibility: hidden;
stroke: var(--icon-foreground);
}
}
&.is-selected {
color: var(--menu-foreground-color);
.check-icon svg {
stroke: var(--menu-foreground-color);
visibility: visible;
}
}
}
&:hover {
background-color: var(--menu-background-color-hover);
border: $s-1 solid var(--menu-background-color-hover);
.dropdown-button {
svg {
stroke: var(--menu-foreground-color-hover);
}
}
}
&:focus {
background-color: var(--menu-background-color-focus);
border: $s-1 solid var(--menu-border-color-focus);
}
&.disabled {
background-color: var(--menu-background-color-disabled);
color: var(--menu-foreground-color-disabled);
border: $s-1 solid var(--menu-border-color-disabled);
pointer-events: none;
cursor: default;
.dropdown-button svg {
stroke: var(--menu-foreground-color-disabled);
}
}
}
.current-label {
@include textEllipsis;
}