130 lines
4.0 KiB
SCSS
130 lines
4.0 KiB
SCSS
@use '@lucas-labs/lui-micro/color' as color;
|
|
@use '@lucas-labs/lui-micro/var' as var;
|
|
|
|
@mixin -all-inputs($state: null) {
|
|
input#{$state},
|
|
textarea#{$state},
|
|
.ui.input > input#{$state},
|
|
.ui.form input:not([type])#{$state},
|
|
.ui.form select#{$state},
|
|
.ui.form textarea#{$state},
|
|
.ui.form input[type='date']#{$state},
|
|
.ui.form input[type='datetime-local']#{$state},
|
|
.ui.form input[type='email']#{$state},
|
|
.ui.form input[type='file']#{$state},
|
|
.ui.form input[type='number']#{$state},
|
|
.ui.form input[type='password']#{$state},
|
|
.ui.form input[type='search']#{$state},
|
|
.ui.form input[type='tel']#{$state},
|
|
.ui.form input[type='text']#{$state},
|
|
.ui.form input[type='time']#{$state},
|
|
.ui.form input[type='url']#{$state},
|
|
.ui.selection.dropdown#{$state} {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin input {
|
|
@include -all-inputs {
|
|
border-color: var(--color-input-border);
|
|
color: var(--color-input-text);
|
|
border-radius: var(--border-radius);
|
|
line-height: 20px;
|
|
padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/.75x');
|
|
|
|
+ .ui.button:last-child {
|
|
border-top-right-radius: var(--border-radius);
|
|
border-bottom-right-radius: var(--border-radius);
|
|
}
|
|
}
|
|
|
|
@include -all-inputs(':hover') {
|
|
border-color: var(--color-input-border);
|
|
color: var(--color-input-text);
|
|
}
|
|
|
|
@include -all-inputs(':focus') {
|
|
border-radius: var(--border-radius);
|
|
border-color: var(--color-input-border);
|
|
color: var(--color-input-text);
|
|
outline: 2px solid var(--color-accent);
|
|
background-color: color.get('elevation/2');
|
|
}
|
|
|
|
@include -all-inputs('.active') {
|
|
border-radius: var(--border-radius);
|
|
outline: 2px solid var(--color-accent);
|
|
|
|
> input.search {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.ui.action.input:not([class*='left action']) > input:focus {
|
|
border-right-color: var(--color-input-border);
|
|
z-index: 1;
|
|
}
|
|
|
|
.ui.action.input > .dropdown:not(:first-child):not(:last-child),
|
|
.ui.action.input > .button:not(:first-child):not(:last-child),
|
|
.ui.action.input > .buttons:not(:first-child):not(:last-child) > .button {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.ui.action.input:not([class*='left action']) > input:focus + .ui.dropdown.selection,
|
|
.ui.action.input:not([class*='left action']) > input:focus + .ui.dropdown.selection:hover,
|
|
.ui.action.input:not([class*='left action']) > input:focus + .button,
|
|
.ui.action.input:not([class*='left action']) > input:focus + .button:hover,
|
|
.ui.action.input:not([class*='left action']) > input:focus + i.icon + .button,
|
|
.ui.action.input:not([class*='left action']) > input:focus + i.icon + .button:hover {
|
|
border-left-color: var(--color-input-border);
|
|
}
|
|
|
|
.ui.form .field > label {
|
|
margin: 0 0 var.get('measure/.375x');
|
|
font-size: var.get('font-size/md');
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ui.form textarea,
|
|
.ui.form input:not([type]),
|
|
.ui.form input[type='date'],
|
|
.ui.form input[type='datetime-local'],
|
|
.ui.form input[type='email'],
|
|
.ui.form input[type='number'],
|
|
.ui.form input[type='password'],
|
|
.ui.form input[type='search'],
|
|
.ui.form input[type='tel'],
|
|
.ui.form input[type='time'],
|
|
.ui.form input[type='text'],
|
|
.ui.form input[type='file'],
|
|
.ui.form input[type='url'] {
|
|
min-height: 2.71428571em;
|
|
}
|
|
|
|
.ui.selection.dropdown {
|
|
min-height: 2.71428571em;
|
|
> input {
|
|
min-height: 0;
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui.multiple.dropdown > .label,
|
|
.ui.multiple.search.dropdown > input.search {
|
|
padding: var.get('measure/.375x') var.get('measure/.75x');
|
|
margin: 0.14285714rem 0.28571429rem 0.14285714rem 0;
|
|
}
|
|
|
|
.ui.multiple.search.dropdown > input.search {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.ui.checkbox label,
|
|
.ui.radio.checkbox label {
|
|
margin-left: 20px !important;
|
|
}
|
|
}
|