235 lines
4.5 KiB
SCSS
235 lines
4.5 KiB
SCSS
select,
|
||
input[type="text"],
|
||
input[type="number"] {
|
||
height: var(--input-h);
|
||
border: 1px solid var(--color-interface-200);
|
||
background-color: var(--color-interface-100);
|
||
font-family: var(--sans-serif);
|
||
color: var(--color-txt);
|
||
font-size: 1rem;
|
||
padding-left: 0.5ch;
|
||
padding-right: 0.5ch;
|
||
}
|
||
|
||
input[type="number"]{
|
||
padding-left: 0.75ch;
|
||
}
|
||
|
||
select{
|
||
flex-grow: 1;
|
||
width: 100%;
|
||
}
|
||
|
||
.input-with-unit{
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5ch;
|
||
|
||
input[type="range"]{
|
||
flex-grow: 1;
|
||
margin-right: 1ch;
|
||
}
|
||
|
||
.number-input{
|
||
--input-w: 4ch;
|
||
flex-grow: 1;
|
||
max-width: calc(var(--input-w)*1.75);
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.number-input{
|
||
flex-grow: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
|
||
}
|
||
input[type="number"]{
|
||
width: var(--input-w);
|
||
padding-right: calc(var(--input-w)*0.5);
|
||
|
||
}
|
||
}
|
||
|
||
.unit-toggle{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.25ch;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.field-checkbox{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5ch;
|
||
input[type="checkbox"]{
|
||
accent-color: var(--color-interface-800);
|
||
}
|
||
|
||
}
|
||
|
||
|
||
/* Label with tooltip ---------------------------------------------- */
|
||
.label-with-tooltip {
|
||
text-decoration: underline dotted 1px var(--color-200);
|
||
text-underline-offset: 2px;
|
||
cursor: help;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: attr(data-css);
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 0;
|
||
margin-bottom: 4px;
|
||
padding: 0.25rem 0.5rem;
|
||
background: var(--color-interface-700);
|
||
color: var(--color-interface-050);
|
||
font-family: var(--mono);
|
||
font-size: 0.75rem;
|
||
border-radius: 4px;
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition:
|
||
opacity 0.15s ease,
|
||
visibility 0.15s ease;
|
||
z-index: 10;
|
||
}
|
||
|
||
&:hover::after {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
}
|
||
|
||
|
||
// INPUT COLOR ------------------------------------------------
|
||
|
||
.input-with-color {
|
||
width: 100%;
|
||
.clr-field {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: var(--input-h) minmax(0, 1fr);
|
||
grid-gap: 1ch;
|
||
button {
|
||
grid-column: 1;
|
||
position: relative;
|
||
border-radius: var(--border-radius);
|
||
cursor: pointer;
|
||
pointer-events: auto;
|
||
}
|
||
input {
|
||
grid-column: 2;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// INPUT RANGE ---------------------------------------------
|
||
|
||
input[type="range"] {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
|
||
&::-webkit-slider-runnable-track {
|
||
height: 6px;
|
||
background: linear-gradient(to right, var(--color-interface-400) var(--progress, 0%), var(--color-interface-200) var(--progress, 0%));
|
||
border: none;
|
||
border-radius: 2px;
|
||
}
|
||
&::-moz-range-track {
|
||
height: 6px;
|
||
background: linear-gradient(to right, var(--color-interface-400) var(--progress, 0%), var(--color-interface-200) var(--progress, 0%));
|
||
border: none;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
|
||
&::-moz-range-progress {
|
||
height: 6px;
|
||
background: var(--color-interface-400);
|
||
border: none;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
// Thumb
|
||
&::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 14px;
|
||
height: 14px;
|
||
background: var(--color-interface-900);
|
||
border: none;
|
||
border-radius: 3px;
|
||
margin-top: -5px;
|
||
}
|
||
&::-moz-range-thumb {
|
||
width: 14px;
|
||
height: 14px;
|
||
background: var(--color-interface-900);
|
||
border: none;
|
||
border-radius: 3px;
|
||
}
|
||
}
|
||
|
||
// INPUT NUMBER ---------------------------------------------
|
||
|
||
// disable natif
|
||
input[type="number"]::-webkit-inner-spin-button,
|
||
input[type="number"]::-webkit-outer-spin-button {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
margin: 0;
|
||
}
|
||
|
||
input[type="number"] {
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
.number-input {
|
||
position: relative;
|
||
input {
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
.spinner-buttons {
|
||
height: var(--input-h);
|
||
width: var(--input-h);
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
|
||
button {
|
||
height: calc(var(--input-h) * 0.5);
|
||
cursor: pointer;
|
||
padding: 0;
|
||
svg {
|
||
width: 10px;
|
||
height: auto;
|
||
}
|
||
svg path {
|
||
fill: var(--color-interface-600);
|
||
}
|
||
&:hover {
|
||
svg path {
|
||
fill: var(--color-interface-900);
|
||
}
|
||
}
|
||
}
|
||
.spinner-down {
|
||
svg {
|
||
// position: relative;
|
||
// top: -2px;
|
||
}
|
||
}
|
||
}
|
||
}
|