mirror of
https://github.com/System-End/theseus.git
synced 2026-04-19 16:38:18 +00:00
133 lines
No EOL
3.4 KiB
SCSS
133 lines
No EOL
3.4 KiB
SCSS
@use "sass:color";
|
|
@use "sass:map";
|
|
@use "colors";
|
|
|
|
// Variables
|
|
$tag-padding: (
|
|
default: 0.25rem 0.625rem,
|
|
large: 0.375rem 0.75rem,
|
|
small: 0.125rem 0.375rem
|
|
);
|
|
|
|
$tag-font-size: (
|
|
default: 0.75rem,
|
|
large: 0.875rem,
|
|
small: 0.6875rem
|
|
);
|
|
|
|
// Mixins
|
|
@mixin form-element-base {
|
|
background-color: var(--pico-form-element-background-color) !important;
|
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color) !important;
|
|
border-radius: var(--pico-border-radius) !important;
|
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal) !important;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
@mixin focus-state {
|
|
border-color: var(--pico-primary) !important;
|
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus) !important;
|
|
}
|
|
|
|
@mixin hover-transition {
|
|
transition: background-color var(--pico-transition) !important;
|
|
}
|
|
|
|
// Base styles
|
|
.selectize-input {
|
|
@include form-element-base;
|
|
font-size: var(--pico-font-size) !important;
|
|
line-height: var(--pico-line-height) !important;
|
|
transition: border-color var(--pico-transition), box-shadow var(--pico-transition) !important;
|
|
|
|
&:focus {
|
|
@include focus-state;
|
|
}
|
|
|
|
> input {
|
|
color: var(--pico-color) !important;
|
|
}
|
|
}
|
|
|
|
// Tag styles
|
|
.selectize-input > .item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background-color: rgba(map.get(colors.$palette, info), 0.1) !important;
|
|
color: map.get(colors.$palette, info) !important;
|
|
border-radius: 4px;
|
|
gap: 0.25rem;
|
|
font-size: map.get($tag-font-size, default);
|
|
font-weight: 500;
|
|
line-height: 1.125;
|
|
padding: map.get($tag-padding, default);
|
|
@include hover-transition;
|
|
|
|
a {
|
|
color: var(--pico-primary) !important;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: var(--pico-primary-hover) !important;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(map.get(colors.$palette, info), 0.15) !important;
|
|
}
|
|
|
|
&.tag-large {
|
|
padding: map.get($tag-padding, large);
|
|
font-size: map.get($tag-font-size, large);
|
|
}
|
|
|
|
&.tag-small {
|
|
padding: map.get($tag-padding, small);
|
|
font-size: map.get($tag-font-size, small);
|
|
}
|
|
}
|
|
|
|
// Dropdown styles
|
|
.selectize-dropdown {
|
|
@include form-element-base;
|
|
box-shadow: var(--pico-card-box-shadow) !important;
|
|
margin-top: 0.25rem !important;
|
|
z-index: 50 !important;
|
|
padding: 0 !important;
|
|
|
|
.selectize-dropdown-content {
|
|
max-height: 300px !important;
|
|
overflow-y: auto !important;
|
|
padding: 0.5rem 0 !important;
|
|
|
|
.option {
|
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal) !important;
|
|
color: var(--pico-muted-color) !important;
|
|
cursor: pointer !important;
|
|
@include hover-transition;
|
|
border: none !important;
|
|
background: none !important;
|
|
|
|
&:hover, &.active {
|
|
background-color: var(--pico-primary-hover) !important;
|
|
color: var(--pico-primary-inverse) !important;
|
|
}
|
|
|
|
&.selected {
|
|
background-color: var(--pico-primary) !important;
|
|
color: var(--pico-primary-inverse) !important;
|
|
}
|
|
}
|
|
|
|
.create {
|
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal) !important;
|
|
cursor: pointer !important;
|
|
@include hover-transition;
|
|
background-color: var(--pico-form-element-background-color) !important;
|
|
color: var(--pico-color) !important;
|
|
border: none !important;
|
|
}
|
|
}
|
|
} |