vault/ui/app/styles/core/control.scss
Vault Automation 796c5fb294
[HDS-5060] UI: Align typography styles to HDS tokens (#10193) (#10360)
Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com>
2025-10-23 16:37:36 -04:00

66 lines
1.0 KiB
SCSS

/**
* Copyright IBM Corp. 2016, 2025
* SPDX-License-Identifier: BUSL-1.1
*/
// This file defines the style for .control
.control.has-icons-left .icon,
.control.has-icons-right .icon {
height: 2.5rem;
}
.control.has-icons-right .input {
padding-right: 2.25em;
}
.control {
font-size: var(--token-typography-body-300-font-size);
max-width: 100%;
position: relative;
text-align: left;
// Modifiers
&.has-icons-left,
&.has-icons-right {
.input,
.select select {
padding-left: 2rem;
&:focus,
&:active,
&.is-active {
& ~ .icon {
color: currentColor;
}
}
}
}
&.has-checkbox-right {
label.checkbox {
display: inline-flex;
height: 2.5em;
position: absolute;
top: 0;
right: 0;
justify-content: flex-end;
margin-left: auto;
}
.input,
.select select {
padding-right: 10em;
}
}
}
.control {
&.is-expanded {
flex-grow: 1;
flex-shrink: 1;
}
&.is-narrow {
flex: none;
width: 6%;
}
}