MaDgIK
/
openaire-theme
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add border-bottom input

This commit is contained in:
Konstantinos Triantafyllou 2022-04-07 18:19:19 +03:00
parent 09341b1889
commit 0b66dc8cb9
2 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/structure/input.css
View File

@ -13,14 +13,17 @@
--input-background: transparent;
--input-shadow: none;
--input-border: 1px solid transparent;
--input-border-bottom: var(--input-border);
/* 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);
/* 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);
/* Disabled */
--input-color-disabled: var(--disable-color);
--input-background-disabled: var(--muted-color);
@ -38,15 +41,18 @@
.input-wrapper {
border: var(--input-border);
border-bottom: var(--input-border-bottom);
border-radius: var(--input-border-radius);
}
.input-wrapper:hover {
border: var(--input-border-hover);
border-bottom: var(--input-border-bottom-hover);
}
.input-wrapper.focused {
border: var(--input-border-focus);
border-bottom: var(--input-border-bottom-focus);
}
.input-wrapper.danger {
@ -148,6 +154,7 @@
.input-wrapper > .input-box .icon {
transition: all 0.3s linear 0s;
transform: var(--input-arrow-transform);
margin-right: var(--input-padding-horizontal);
}
.input-wrapper.opened > .input-box.select .icon {
@ -215,7 +222,7 @@
max-width: calc(100% - var(--input-padding-horizontal));
}
.input-box:not(.static) .uk-grid .input, .input-box .uk-grid-margin .input, .input-box:not(.static) .chip, .input-box .uk-grid-margin.chip {
.input-box .uk-grid .input, .input-box .uk-grid-margin .input, .input-box:not(.static) .chip, .input-box .uk-grid-margin.chip {
margin-top: 10px;
}
@ -234,6 +241,14 @@
--input-border: 1px solid var(--muted-color);
}
.input-wrapper.border-bottom {
--input-border-radius: 0;
--input-border-bottom: 1px solid var(--muted-color);
--input-padding-horizontal: 0;
--input-padding-vertical: 5px;
--input-border-bottom-focus: 1px solid var(--grey-color);
}
.input-wrapper.filter {
--input-placeholder-color: var(--primary-color);
--input-font-size: 14px;

5
css/structure/shadow.css
View File

@ -1,7 +1,8 @@
:root {
--shadow-main: -15px -15px 20px rgb(255 255 255 / 30%), 15px 15px 20px rgb(0 0 0 / 10%);
--shadow-main: -15px -15px 20px rgba(255, 255, 255, 0.6), 15px 15px 20px rgba(0, 0, 0, 0.07);
--shadow-main-dark: -15px -15px 20px rgb(255 255 255 / 5%), 15px 15px 20px rgb(0 0 0 / 30%);
--shadow-button: -5px -5px 15px rgb(255 255 255 / 5%), 5px 5px 15px rgb(0 0 0 / 30%);
--shadow-button: -15px -15px 20px rgba(255, 255, 255, 0.6), 15px 15px 20px rgba(0, 0, 0, 0.07);
--shadow-button-dark: -5px -5px 15px rgb(255 255 255 / 5%), 5px 5px 15px rgb(0 0 0 / 30%);
--shadow-inset: inset -3px -3px 6px rgb(255 255 255 / 90%), inset 3px 3px 6px rgb(0 0 0 / 10%);
--shadow-nav: 0 3px 6px 0 rgb(0 0 0 / 10%);
}