mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
71 lines
1.3 KiB
SCSS
71 lines
1.3 KiB
SCSS
@import '~/styles/variables';
|
|
|
|
.content {
|
|
@include inner_shadow;
|
|
|
|
background: $input_bg_color;
|
|
min-height: $input_height;
|
|
border-radius: $input_radius;
|
|
position: relative;
|
|
color: $input_text_color;
|
|
font: $input_font;
|
|
min-width: 0;
|
|
|
|
::placeholder {
|
|
font: $input_placeholder_font;
|
|
color: $input-grey_color;
|
|
}
|
|
|
|
&.has_error {
|
|
box-shadow: inset $content_bg_danger 0 0 0 1px;
|
|
}
|
|
}
|
|
|
|
.error,
|
|
.title {
|
|
pointer-events: none;
|
|
touch-action: none;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
max-width: calc(100% - 10px);
|
|
}
|
|
|
|
.error {
|
|
position: absolute;
|
|
font: $font_12_semibold;
|
|
padding: 0 $gap * 0.5;
|
|
border-radius: 4px;
|
|
color: white;
|
|
background-color: $content_bg_danger;
|
|
bottom: 0;
|
|
right: $gap * 0.5;
|
|
transform: translate(0, 50%);
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: $gap;
|
|
left: $gap * 0.5;
|
|
padding: 0 $gap * 0.5;
|
|
transform: translate(0, 0) scale(1);
|
|
font: $input_font;
|
|
transition: transform 0.25s;
|
|
transform-origin: 0 50%;
|
|
border-radius: 6px;
|
|
background-color: $input_bg_color;
|
|
color: $input_grey_color;
|
|
text-transform: uppercase;
|
|
|
|
.focused &,
|
|
.not_empty & {
|
|
transform: translate(0, -100%) scale(0.75);
|
|
}
|
|
|
|
.focused.has_error &,
|
|
.not_empty.has_error & {
|
|
color: white;
|
|
background-color: $content_bg_danger;
|
|
}
|
|
}
|