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