1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-07 23:03:00 +03:00

Improved input size consistency

Specifically updates dropdown search and user-search implementation,
although does affect all inputs.
Decouples breadcrum and select-style dropdown search toggles.

Addresses #2678
This commit is contained in:
Dan Brown
2022-05-14 16:05:29 +01:00
parent 9fda0df798
commit d20c74babf
9 changed files with 99 additions and 67 deletions

View File

@@ -731,6 +731,55 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
}
}
.dropdown-search {
position: relative;
}
.dropdown-search-toggle-breadcrumb {
border: 1px solid transparent;
border-radius: 4px;
line-height: normal;
padding: $-xs;
&:hover {
border-color: #DDD;
}
.svg-icon {
margin-inline-end: 0;
}
}
.dropdown-search-toggle-select {
display: flex;
gap: $-s;
line-height: normal;
.svg-icon {
height: 16px;
margin: 0;
}
.avatar {
height: 22px;
width: 22px;
}
.avatar + span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dropdown-search-toggle-caret {
font-size: 1.15rem;
}
}
.dropdown-search-toggle-select-label {
min-width: 0;
white-space: nowrap;
}
.dropdown-search-toggle-select-caret {
font-size: 1.5rem;
line-height: 0;
margin-left: auto;
margin-top: -2px;
}
.dropdown-search-dropdown {
box-shadow: $bs-med;
overflow: hidden;
@@ -789,10 +838,4 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.dropdown-search-dropdown .dropdown-search-list {
max-height: 240px;
}
}
.custom-select-input {
max-width: 280px;
border: 1px solid #D4D4D4;
border-radius: 3px;
}

View File

@@ -7,7 +7,8 @@
@include lightDark(color, #666, #AAA);
display: inline-block;
font-size: $fs-m;
padding: $-xs*1.5;
padding: $-xs*1.8;
height: 40px;
width: 250px;
max-width: 100%;
@@ -373,6 +374,7 @@ input[type=color] {
max-width: 840px;
margin: 0 auto;
border: none;
height: auto;
}
}
@@ -413,9 +415,11 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
}
input {
display: block;
padding: $-xs * 1.5;
padding-inline-start: $-l + 4px;
width: 300px;
max-width: 100%;
height: auto;
}
&.flexible input {
width: 100%;

View File

@@ -86,6 +86,8 @@ header .search-box {
border-radius: 40px;
color: #EEE;
z-index: 2;
height: auto;
padding: $-xs*1.5;
padding-inline-start: 40px;
&:focus {
outline: none;
@@ -279,29 +281,6 @@ header .search-box {
}
}
.dropdown-search {
position: relative;
.dropdown-search-toggle {
padding: $-xs;
border: 1px solid transparent;
border-radius: 4px;
&:hover {
border-color: #DDD;
}
}
.svg-icon {
margin-inline-end: 0;
}
}
.dropdown-search-toggle.compact {
padding: $-xxs $-xs;
.avatar {
height: 22px;
width: 22px;
}
}
.faded {
a, button, span, span > div {
color: #666;

View File

@@ -155,6 +155,13 @@ body.flexbox {
}
}
.gap-m {
gap: $-m;
}
.justify-flex-start {
justify-content: flex-start;
}
.justify-flex-end {
justify-content: flex-end;
}