Fix input border-bottom modofier. Add overflow-y: scroll to avoid screen sliding left on modal's close
This commit is contained in:
parent
7ac04f0f3b
commit
8c4585873a
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue