vault/ui/app/styles/core/select.scss
claire bontempo 7f03393630
UI: Increase base font size (#23994)
* fix button padding

* rename spacing variables using numerical values

* fix toggle aligment

* remove unused toggle classes

* replace margin and padding with spacing vars

* increase base font size

* remove switch css, use toggle consistently

* remaining margin/padding size vars to spacing pixels

* add deprecated note, rever changes to size vars

* decrease console size

* remove function

* adjust card size for small selectable cards

* fix select to fit to content width

* fix toolbar-scroller height

* add changelog;

* fix checkbox styling
2023-11-13 21:29:39 +00:00

85 lines
1.7 KiB
SCSS

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
select {
width: 100%;
appearance: none;
}
.select select {
background-color: $ui-gray-050;
box-shadow: 0 3px 1px rgba($black, 0.12);
border: 1px solid $grey-light;
border-radius: $radius;
color: $grey-dark;
cursor: pointer;
display: block;
font-size: 1em;
height: 2.5rem;
max-width: 100%;
outline: none;
padding-bottom: calc(0.375em - 1px);
padding-left: $spacing-10;
padding-right: $spacing-10;
padding-top: calc(0.375em - 1px);
text-rendering: auto !important;
@include until($desktop) {
font-size: 1rem;
}
&::placeholder {
opacity: 0.5;
}
&:active,
&:focus,
&:focus-visible,
&.is-active {
border-color: $blue-500;
box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25);
}
}
.select select:not([multiple]) {
padding-right: $spacing-36;
}
.select select[disabled] {
border-color: $grey-light;
background-color: $ui-gray-100;
color: $ui-gray-500;
cursor: not-allowed;
user-select: none;
&:hover {
border-color: $grey-light;
}
}
.select {
display: inline-block;
height: 2.5rem;
max-width: 100%;
position: relative;
vertical-align: top;
}
.select::after {
content: svg-uri(
'<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" fill="currentColor"/></svg>'
);
border: 0;
display: block;
height: 24px;
margin: 0;
pointer-events: none;
position: absolute;
right: $spacing-8;
top: 50%;
transform: translateY(-50%);
width: 24px;
z-index: 4;
}