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

Add border-bottom modifier for search. Add paddings for tab left and right

This commit is contained in:
Konstantinos Triantafyllou 2022-10-12 12:24:36 +03:00
parent 8bb758b340
commit f2d544d4f1
2 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
less/search.less
View File

@ -3,8 +3,13 @@
--search-input-shadow: none;
--search-input-background: none;
--search-input-border-width: 0;
--search-input-border-style: solid;
--search-input-border: transparent;
--search-input-border-radius: 500px;
/* Focus Styling */
--search-input-border-focus: var(--search-input-border);
--search-input-border-style-focus: var(--search-input-border-style);
/* Icon */
--search-input-icon-color: @global-secondary-background;
--search-input-icon-color-collapsed: @global-color;
--search-input-icon-color-disabled: @global-muted-color;
@ -17,6 +22,16 @@
width: 100%;
transition: width 0.5s ease-out;
/* Override border style variable in order to cheat angular optimization (DO NOT REMOVE)*/
& {
border-style: var(--search-input-border-style);
}
&.focused {
border-color: var(--search-input-border-focus);
border-style: var(--search-input-border-style-focus);
}
&.collapsed {
width: calc(2 * var(--search-input-icon-padding) + 26px);
@ -55,7 +70,6 @@
}
/* Modifiers */
&.inner {
--search-input-background: @global-inverse-color;
--search-input-shadow: @global-inset-shadow;
@ -71,6 +85,21 @@
--search-input-background: @global-background;
--search-input-shadow: @global-medium-box-shadow;
}
&.border-bottom {
--search-input-border-width: 1px;
--search-input-border-radius: 0;
--search-input-icon-padding: 10px;
--search-input-border: @global-muted-background;
--search-input-border-style: hidden hidden solid hidden;
--search-input-border-focus: @secondary-color;
.input-wrapper {
--input-padding-horizontal: 0;
--input-padding-vertical: 0;
--input-font-size: 14px;
}
}
}
}

8
less/tab.less
View File

@ -7,6 +7,12 @@
@tab-item-padding-horizontal: 10px;
@tab-item-padding-vertical: 10px;
/*Left & Right*/
@tab-left-item-padding-horizontal: 5px;
@tab-left-item-padding-vertical: 5px;
@tab-right-item-padding-horizontal: 5px;
@tab-right-item-padding-vertical: 5px;
/** Hover */
@tab-item-hover-color: @global-secondary-background;
@ -51,6 +57,7 @@
.hook-tab-left-item() {
border-right: @tab-item-border-width solid transparent;
border-bottom: none;
padding: @tab-left-item-padding-vertical @tab-left-item-padding-horizontal;
}
.hook-tab-right() {
@ -67,4 +74,5 @@
.hook-tab-right-item() {
border-left: @tab-item-border-width solid transparent;
border-bottom: none;
padding: @tab-right-item-padding-vertical @tab-right-item-padding-horizontal;
}