diff --git a/client/components/combobox.less b/client/components/combobox.less index d7628114a..c6225679d 100644 --- a/client/components/combobox.less +++ b/client/components/combobox.less @@ -4,6 +4,7 @@ .item i { position : absolute; right : 10px; + top:0; color : inherit; } .dropdown-options { diff --git a/client/homebrew/pages/vaultPage/vaultPage.less b/client/homebrew/pages/vaultPage/vaultPage.less index 72ff916fe..b1375b9b9 100644 --- a/client/homebrew/pages/vaultPage/vaultPage.less +++ b/client/homebrew/pages/vaultPage/vaultPage.less @@ -105,9 +105,13 @@ display : flex; align-items : center; margin : 10px 0; + + > * { + margin: 0 10px; + } } input[type='text'], textarea, select { - margin : 0 10px; + color : var(--input-text-clr); background-color : var(--input-bg); border : 1px solid var(--input-placeholder-clr); @@ -116,6 +120,72 @@ &:invalid { background : #ffbcb5; } } + + .tagInputWrap { + grid-template-columns: 200px 3fr; + gap: 10px; + display: grid; + + .tagInput-dropdown { + z-index: 400; + max-width: 200px; + + } + } + .list { + display : flex; + flex : 1 0; + flex-wrap : wrap; + + > * { flex : 0 0 auto; } + + #groupedIcon { + #backgroundColors; + position : relative; + top : -0.3em; + right : -0.3em; + display : inline-block; + min-width : 20px; + height : ~'calc(100% + 0.6em)'; + color : white; + text-align : center; + cursor : pointer; + + i { + position : relative; + top : 50%; + transform : translateY(-50%); + } + + &:not(:last-child) { border-right : 1px solid black; } + + &:last-child { border-radius : 0 0.5em 0.5em 0; } + } + + .tag { + padding : 0.35em; + margin : 2px; + font-size : 0.95em; + border-radius : 0.5em; + + .icon { #groupedIcon; } + + button { + cursor : pointer; + + &:hover { color : @redLight; } + } + } + } + .tag { + color : var(--input-bg); + background : var(--input-text-clr); + border-radius: .5em; + margin: 2px; + padding: .35em; + font-size: .95em; + } + #searchButton { .colorButton(@green); position : absolute;