Fix input border-bottom modofier. Add overflow-y: scroll to avoid screen sliding left on modal's close

This commit is contained in:
Konstantinos Triantafyllou 2022-06-28 21:10:46 +03:00
parent 7ac04f0f3b
commit 8c4585873a
2 changed files with 28 additions and 12 deletions

View File

@ -31,3 +31,9 @@
/* Inverse */
@inverse-base-link-color: @global-inverse-color;
@inverse-base-link-hover-color: @global-inverse-color;
.hook-base-misc() {
body {
overflow-y: scroll;
}
}

View File

@ -16,17 +16,17 @@
--input-shadow: none;
--input-border: transparent;
--input-border-width: @global-border-width;
--input-border-bottom: var(--input-border);
--input-border-style: solid;
/* Hover Styling */
--input-background-hover: var(--input-background);
--input-shadow-hover: var(--input-shadow);
--input-border-hover: var(--input-border);
--input-border-bottom-hover: var(--input-border-bottom);
--input-border-style-hover: var(--input-border-style);
/* Focus Styling */
--input-background-focus: var(--input-background);
--input-shadow-focus: var(--input-shadow);
--input-border-focus: var(--input-border);
--input-border-bottom-focus: var(--input-border-bottom);
--input-border-style-focus: var(--input-border-style);
/* Disabled */
--input-color-disabled: @global-muted-color;
/* Danger */
@ -39,8 +39,9 @@
}
.input-wrapper {
border: var(--input-border-width) solid var(--input-border);
border-bottom: var(--input-border-width) solid var(--input-border-bottom);
border-width: var(--input-border-width);
border-color: var(--input-border);
border-style: var(--input-border-style);
border-radius: var(--input-border-radius);
& > .input-box {
@ -146,8 +147,8 @@
}
&:hover {
border: var(--input-border-width) solid var(--input-border-hover);
border-bottom: var(--input-border-width) solid var(--input-border-bottom-hover);
border-color: var(--input-border-hover);
border-style: var(--input-border-style-hover);
& > .input-box {
box-shadow: var(--input-shadow-hover);
@ -156,8 +157,8 @@
}
&.focused {
border: var(--input-border-width) solid var(--input-border-focus);
border-bottom: var(--input-border-width) solid var(--input-border-bottom-focus);
border-color: var(--input-border-focus);
border-style: var(--input-border-style-focus);
& > .input-box {
box-shadow: var(--input-shadow-focus);
@ -179,7 +180,7 @@
}
&.danger {
border: var(--input-border-width) solid var(--input-danger-color);
border-color: var(--input-danger-color);
& > .input-box {
& .input::placeholder, & .placeholder {
color: var(--input-danger-color);
@ -224,10 +225,11 @@
&.border-bottom {
--input-border-radius: 0;
--input-border-bottom: @global-muted-background;
--input-border: @global-muted-background;
--input-border-style: hidden hidden solid hidden;
--input-padding-horizontal: 0;
--input-padding-vertical: 5px;
--input-border-bottom-focus: @global-color;
--input-border-focus: @global-color;
--input-font-size: 14px;
}
@ -265,6 +267,14 @@
&.small-vertical {
--input-padding-vertical: 10px;
}
&.small-font-size {
--input-font-size: 14px;
}
&.normal-font-size {
--input-font-size: 16px;
}
}
.uk-dropdown.options {