diff options
Diffstat (limited to 'core/css/inputs.scss')
| -rw-r--r-- | core/css/inputs.scss | 904 |
1 files changed, 414 insertions, 490 deletions
diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 057daf672ee..27136b69ad4 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -1,134 +1,170 @@ -/** - * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com> - * @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de> - * @copyright Copyright (c) 2016, Joas Schilling <coding@schilljs.com> - * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net> - * @copyright Copyright (c) 2016, jowi <sjw@gmx.ch> - * @copyright Copyright (c) 2015, Joas Schilling <nickvergessen@owncloud.com> - * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de> - * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net> - * - * @license GNU AGPL version 3 or any later version - * +/*! + * SPDX-FileCopyrightText: 2016-2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-FileCopyrightText: 2016 ownCloud, Inc. + * SPDX-License-Identifier: AGPL-3.0-or-later */ +@use 'variables'; +@use 'sass:color'; +@use 'functions'; /* Specifically override browser styles */ input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] { font-family: var(--font-face); } + .select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget { font-family: var(--font-face) !important; } -$default-height: 34px; +.select2-container.select2-drop-above .select2-choice { + background-image: unset !important; +} + +$opacity-disabled: .7; /* Simple selector to allow easy overriding */ select, -button:not(.button-vue), +button:not( + .button-vue, + /* "vs__" class prefix is used in the vue-select lib */ + [class^="vs__"] +), input, textarea, div[contenteditable=true], div[contenteditable=false] { width: 130px; - min-height: $default-height; + min-height: var(--default-clickable-area); box-sizing: border-box; } /** - * color-text-lighter normal state - * color-text-lighter active state - * color-text-maxcontrast disabled state + * color-main-text normal state + * color-main-text active state + * color-text-maxcontrast disabled state */ +button:not(.button-vue), +input:not([type='range']), +textarea { + &:disabled { + cursor: default; + color: var(--color-text-maxcontrast); + border-color: var(--color-border-dark); + opacity: $opacity-disabled; + } +} + +input:not([type="range"]) { + outline: none; +} + /* Default global values */ div.select2-drop .select2-search input, // TODO: REMOVE WHEN DROPPING SELECT2 -select, -button:not(.button-vue), .button, -input:not([type='range']), -textarea, -div[contenteditable=true], +input[type='submit'], +input[type='button'], +input[type='reset'], +button:not( + .button-vue, + [class^="vs__"] +), +.button, .pager li a { - margin: 3px 3px 3px 0; - padding: 7px 6px; - font-size: 13px; + padding: 7px 14px; background-color: var(--color-main-background); color: var(--color-main-text); border: 1px solid var(--color-border-dark); + font-size: var(--default-font-size); outline: none; border-radius: var(--border-radius); cursor: text; - &:not(:disabled):not(.primary) { - &:hover, - &:focus, - &.active { - /* active class used for multiselect */ - border-color: var(--color-primary-element); - outline: none; + &:not(.app-navigation-entry-button) { + margin: 3px; + margin-inline-start: 0; + } + &:not( + :disabled, + .primary + ) { + &:not(.app-navigation-entry-button) { + &:hover, + &:focus, + &.active { + /* active class used for multiselect */ + border-color: var(--color-main-text); + outline: none; + } + &:active { + outline: none; + background-color: var(--color-main-background); + color: var(--color-main-text); + } } - &:active { - outline: none; - background-color: var(--color-main-background); - color: var(--color-text-light); + &:focus-visible { + box-shadow: 0 0 0 4px var(--color-main-background) !important; + outline: 2px solid var(--color-main-text) !important; } } &:disabled { background-color: var(--color-background-dark); - color: var(--color-text-maxcontrast); + color: var(--color-main-text); cursor: default; opacity: 0.5; } &:required { box-shadow: none; } - &:invalid { - box-shadow: none !important; - border-color: var(--color-error); + &:user-invalid { + box-shadow: 0 0 0 2px var(--color-error) !important; } /* Primary action button, use sparingly */ &.primary { background-color: var(--color-primary-element); border-color: var(--color-primary-element); - color: var(--color-primary-text); + color: var(--color-primary-element-text); cursor: pointer; /* Apply border to primary button if on log in page (and not in a dark container) or if in header */ #body-login :not(.body-login-container) &, #header & { - border-color: var(--color-primary-text); + border-color: var(--color-primary-element-text); } &:not(:disabled) { &:hover, &:focus, &:active { - background-color: var(--color-primary-element-light); - border-color: var(--color-primary-element-light); + background-color: var(--color-primary-element-hover); + border-color: var(--color-primary-element-hover); + } + &:focus, + &:focus-visible { + box-shadow: 0 0 0 2px var(--color-main-text); } &:active { - color: var(--color-primary-text-dark); + color: var(--color-primary-element-text-dark); } } &:disabled { // opacity is already defined to .5 if disabled background-color: var(--color-primary-element); - color: var(--color-primary-text-dark); + color: var(--color-primary-element-text-dark); cursor: default; } } } div[contenteditable=false] { - margin: 3px 3px 3px 0; + margin: 3px; + margin-inline-start: 0; padding: 7px 6px; font-size: 13px; - background-color: var(--color-main-background); - color: var(--color-text-lighter); border: 1px solid var(--color-background-darker); outline: none; border-radius: var(--border-radius); background-color: var(--color-background-dark); - color: var(--color-text-lighter); + color: var(--color-text-maxcontrast); cursor: default; opacity: 0.5; } @@ -138,8 +174,9 @@ input { &:not([type='radio']):not([type='checkbox']):not([type='range']):not([type='submit']):not([type='button']):not([type='reset']):not([type='color']):not([type='file']):not([type='image']) { -webkit-appearance: textfield; -moz-appearance: textfield; + appearance: textfield; // force height for inline elements like inputs (not textarea, contenteditable...) - height: $default-height; + height: var(--default-clickable-area); } &[type='radio'], &[type='checkbox'], @@ -168,23 +205,101 @@ input { /* 'Click' inputs */ select, -button:not(.button-vue), .button, +button:not( + .button-vue, + [class^="vs__"] +), +.button, input[type='button'], input[type='submit'], input[type='reset'] { - padding: 6px 16px; + padding: calc((var(--default-clickable-area) - 1lh) / 2) calc(3 * var(--default-grid-baseline)); + font-size: var(--default-font-size); width: auto; - min-height: $default-height; + min-height: var(--default-clickable-area); cursor: pointer; box-sizing: border-box; - background-color: var(--color-background-dark); + color: var(--color-primary-element-light-text); + background-color: var(--color-primary-element-light); + border: none; + + &:hover, + &:focus { + background-color: var(--color-primary-element-light-hover); + } &:disabled { cursor: default; } } + +input:not( + [type='range'], + .input-field__input, + [type='submit'], + [type='button'], + [type='reset'], + .multiselect__input, + .select2-input, + .action-input__input, + [class^="vs__"] +), select, -button:not(.button-vue), .button { +div[contenteditable=true], +textarea { + margin: 3px; + margin-inline-start: 0; + padding: 0 12px; + font-size: var(--default-font-size); + background-color: var(--color-main-background); + color: var(--color-main-text); + border: 2px solid var(--color-border-maxcontrast); + height: 36px; + outline: none; + border-radius: var(--border-radius-large); + text-overflow: ellipsis; + cursor: pointer; + &:not(:disabled):hover, &:not(:disabled):focus, &:not(:disabled):active { + border-color: 2px solid var(--color-main-text); + box-shadow: 0 0 0 2px var(--color-main-background); + } + &:not(:disabled):focus { + cursor: text; + } +} + +.multiselect__input, .select2-input { + background-color: var(--color-main-background); + color: var(--color-main-text); +} + +textarea, div[contenteditable=true] { + padding: 12px; + height: auto; +} + +/* Override the ugly select arrow */ +select { + background: var(--icon-triangle-s-dark) no-repeat; + appearance: none; + background-color: var(--color-main-background); + padding-inline-end: 28px !important; +} + +body[dir='ltr'] select { + background-position: right 8px center; +} + +body[dir='rtl'] select { + background-position: left 8px center; +} + +select, +button:not( + .button-vue, + [class^="vs__"] +), +.button { * { cursor: pointer; } @@ -197,12 +312,16 @@ button:not(.button-vue), .button { } /* Buttons */ -button:not(.button-vue), .button, +button:not( + .button-vue, + [class^="vs__"] +), +.button, input[type='button'], input[type='submit'], input[type='reset'] { font-weight: bold; - border-radius: var(--border-radius-pill); + border-radius: var(--border-radius-element); /* Get rid of the inside dotted line in Firefox */ &::-moz-focus-inner { @@ -213,9 +332,19 @@ input[type='reset'] { background-color: var(--color-error) !important; border-color: var(--color-error) !important; color: #fff !important; + &:hover{ + background-color: var(--color-error-hover) !important; + border-color: var(--color-main-text) !important; + } } } -button:not(.button-vue):not(.action-button), .button { + +button:not( + .button-vue, + .action-button, + [class^="vs__"] +), +.button { > span { /* icon position inside buttons */ &[class^='icon-'], @@ -227,94 +356,59 @@ button:not(.button-vue):not(.action-button), .button { } } -textarea, div[contenteditable=true] { - color: var(--color-main-text); - cursor: text; - font-family: inherit; - height: auto; - &:not(:disabled) { - &:active, - &:hover, - &:focus { - border-color: var(--color-background-darker) !important; - background-color: var(--color-main-background) !important; - } - } -} - -div[contenteditable=false] { - color: var(--color-text-lighter); - font-family: inherit; - height: auto; -} - -/* Override the ugly select arrow */ -select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: var(--icon-triangle-s-000) no-repeat right 4px center; - background-color: inherit; - outline: 0; - padding-right: 24px !important; - // force height for inline elements like inputs (not textarea, contenteditable...) - height: $default-height; -} - /* Confirm inputs */ -input { - &[type='text'], - &[type='password'], - &[type='email'] { - + .icon-confirm { - margin-left: -8px !important; - border-left-color: transparent !important; - border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; - background-clip: padding-box; - /* Avoid background under border */ - background-color: var(--color-main-background) !important; - opacity: 1; - height: $default-height; - width: $default-height; - padding: 7px 6px; - cursor: pointer; - margin-right: 0; - &:disabled { - cursor: default; - @include icon-color('confirm-fade', 'actions', $color-black, 2, true); - } +input[type='text'], +input[type='password'], +input[type='email'] { + + .icon-confirm { + margin-inline-start: -13px !important; + border-inline-start-color: transparent !important; + border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important; + border-width: 2px; + background-clip: padding-box; + /* Avoid background under border */ + background-color: var(--color-main-background) !important; + opacity: 1; + height: var(--default-clickable-area); + width: var(--default-clickable-area); + padding: 7px 6px; + cursor: pointer; + margin-inline-end: 0; + &:disabled { + cursor: default; + @include functions.icon-color('confirm-fade', 'actions', variables.$color-black, 2, true); } + } - /* only show confirm borders if input is not focused */ - &:not(:active):not(:hover):not(:focus){ - &:invalid { - + .icon-confirm { - border-color: var(--color-error); - } - } + /* only show confirm borders if input is not focused */ + &:not(:active):not(:hover):not(:focus){ + &:invalid { + .icon-confirm { - &:active, - &:hover, - &:focus { - border-color: var(--color-primary-element) !important; - border-radius: var(--border-radius) !important; - &:disabled { - border-color: var(--color-background-darker) !important; - } - } + border-color: var(--color-error); } } - &:active, - &:hover, - &:focus { - + .icon-confirm { + + .icon-confirm { + &:active, + &:hover, + &:focus { border-color: var(--color-primary-element) !important; - border-left-color: transparent !important; - /* above previous input */ - z-index: 2; + border-radius: var(--border-radius) !important; + &:disabled { + border-color: var(--color-background-darker) !important; + } } } } + &:active, + &:hover, + &:focus { + + .icon-confirm { + border-color: var(--color-primary-element) !important; + border-inline-start-color: transparent !important; + /* above previous input */ + z-index: 2; + } + } } @@ -323,6 +417,7 @@ button img, .button img { cursor: pointer; } + select, .button.multiselect { font-weight: normal; @@ -330,127 +425,124 @@ select, /* Radio & Checkboxes */ $checkbox-radio-size: 14px; -$color-checkbox-radio-disabled: nc-darken($color-main-background, 27%); -$color-checkbox-radio-border: nc-darken($color-main-background, 47%); $color-checkbox-radio-white: #fff; -input { - &[type='checkbox'], - &[type='radio'] { - &.radio, - &.checkbox { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; - + label { - user-select: none; - } - &:disabled + label, - &:disabled + label:before { - cursor: default; - } - + label:before { - content: ''; - display: inline-block; - height: $checkbox-radio-size; - width: $checkbox-radio-size; - vertical-align: middle; - border-radius: 50%; - margin: 0 6px 3px 3px; - border: 1px solid $color-checkbox-radio-border; - } - &:not(:disabled):not(:checked) + label:hover:before, - &:focus + label:before { - border-color: var(--color-primary-element); - } - &:focus-visible + label { - outline-style: solid; - outline-color: var(--color-main-text); - outline-width: 1px; - outline-offset: 2px; - } - &:checked + label:before, - &.checkbox:indeterminate + label:before { - /* ^ :indeterminate have a strange behavior on radio, - so we respecified the checkbox class again to be safe */ - box-shadow: inset 0px 0px 0px 2px var(--color-main-background); - background-color: var(--color-primary-element); - border-color: var(--color-primary-element); - } - &:disabled + label:before { - border: 1px solid $color-checkbox-radio-border; - background-color: $color-checkbox-radio-disabled !important; /* override other status */ - } - &:checked:disabled + label:before { - background-color: $color-checkbox-radio-disabled; - } +input[type='checkbox'], +input[type='radio'] { + &.radio, + &.checkbox { + position: absolute; + inset-inline-start: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + + label { + user-select: none; + } + &:disabled + label, + &:disabled + label:before { + cursor: default; + } + + label:before { + content: ''; + display: inline-block; + height: $checkbox-radio-size; + width: $checkbox-radio-size; + vertical-align: middle; + border-radius: 50%; + margin: 0 3px; + margin-inline: 3px 6px; + border: 1px solid var(--color-text-maxcontrast); + } + &:not(:disabled):not(:checked) + label:hover:before, + &:focus + label:before { + border-color: var(--color-primary-element); + } + &:focus-visible + label { + outline-style: solid; + outline-color: var(--color-main-text); + outline-width: 1px; + outline-offset: 2px; + } + &:checked + label:before, + &.checkbox:indeterminate + label:before { + /* ^ :indeterminate have a strange behavior on radio, + so we respecified the checkbox class again to be safe */ + box-shadow: inset 0px 0px 0px 2px var(--color-main-background); + background-color: var(--color-primary-element); + border-color: var(--color-primary-element); + } + &:disabled + label:before { + border: 1px solid var(--color-text-maxcontrast); + background-color: var(--color-text-maxcontrast) !important; /* override other status */ + } + &:checked:disabled + label:before { + background-color: var(--color-text-maxcontrast); + } - // Detail description below label of checkbox or radio button - & + label ~ em { - display: inline-block; - margin-left: 25px; - } - & + label ~ em:last-of-type { - margin-bottom: $checkbox-radio-size; - } + // Detail description below label of checkbox or radio button + & + label ~ em { + display: inline-block; + margin-inline-start: 25px; } - &.checkbox { - + label:before { - border-radius: 1px; - height: $checkbox-radio-size; - width: $checkbox-radio-size; - box-shadow: none !important; - background-position: center; - } - &:checked + label:before { - background-image: url('../img/actions/checkbox-mark.svg'); - } - &:indeterminate + label:before { - background-image: url('../img/actions/checkbox-mixed.svg'); - } + & + label ~ em:last-of-type { + margin-bottom: $checkbox-radio-size; + } + } + &.checkbox { + + label:before { + border-radius: 1px; + height: $checkbox-radio-size; + width: $checkbox-radio-size; + box-shadow: none !important; + background-position: center; + } + &:checked + label:before { + background-image: url('../img/actions/checkbox-mark.svg'); } + &:indeterminate + label:before { + background-image: url('../img/actions/checkbox-mixed.svg'); + } + } - /* We do not use the nc-darken function as this is not supposed to be changed */ - &.radio--white, - &.checkbox--white { - + label:before, - &:focus + label:before { - border-color: darken($color-checkbox-radio-white, 27%); - } - &:not(:disabled):not(:checked) + label:hover:before { - border-color: $color-checkbox-radio-white; - } - &:checked + label:before { - box-shadow: inset 0px 0px 0px 2px var(--color-main-background); - background-color: darken($color-checkbox-radio-white, 14%); - border-color: darken($color-checkbox-radio-white, 14%); - } - &:disabled + label:before { - background-color: darken($color-checkbox-radio-white, 27%) !important; /* override other status */ - border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */ - } - &:checked:disabled + label:before { - box-shadow: inset 0px 0px 0px 2px var(--color-main-background); - border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */ - background-color: darken($color-checkbox-radio-white, 27%); - } + /* We do not use the variables as we keep the colours as white for this variant */ + &.radio--white, + &.checkbox--white { + + label:before, + &:focus + label:before { + border-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl); } - &.checkbox--white { - &:checked + label:before, - &:indeterminate + label:before { - background-color: transparent !important; /* Override default checked */ - border-color: $color-checkbox-radio-white !important; /* Override default checked */ - background-image: url('../img/actions/checkbox-mark-white.svg'); - } - &:indeterminate + label:before { - background-image: url('../img/actions/checkbox-mixed-white.svg'); - } - &:disabled + label:before { - opacity: 0.7; /* No other choice for white background image */ - } + &:not(:disabled):not(:checked) + label:hover:before { + border-color: $color-checkbox-radio-white; + } + &:checked + label:before { + box-shadow: inset 0px 0px 0px 2px var(--color-main-background); + background-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl); + border-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl); + } + &:disabled + label:before { + background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl) !important; /* override other status */ + border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */ + } + &:checked:disabled + label:before { + box-shadow: inset 0px 0px 0px 2px var(--color-main-background); + border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */ + background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl); + } + } + &.checkbox--white { + &:checked + label:before, + &:indeterminate + label:before { + background-color: transparent !important; /* Override default checked */ + border-color: $color-checkbox-radio-white !important; /* Override default checked */ + background-image: url('../img/actions/checkbox-mark-white.svg'); + } + &:indeterminate + label:before { + background-image: url('../img/actions/checkbox-mixed-white.svg'); + } + &:disabled + label:before { + opacity: 0.7; /* No other choice for white background image */ } } } @@ -464,7 +556,7 @@ div.select2-drop { } .avatar { display: inline-block; - margin-right: 8px; + margin-inline-end: 8px; vertical-align: middle; img { cursor: pointer; @@ -472,7 +564,7 @@ div.select2-drop { } .select2-search input { min-height: auto; - background: var(--icon-search-000) no-repeat right center !important; + background: var(--icon-search-dark) no-repeat !important; background-origin: content-box !important; } .select2-results { @@ -499,7 +591,7 @@ div.select2-drop { padding: 12px; background-color: transparent; cursor: pointer; - color: var(--color-text-lighter); + color: var(--color-text-maxcontrast); } .select2-result { &.select2-selected { @@ -512,6 +604,15 @@ div.select2-drop { } } } + +body[dir='ltr'] div.select2-drop .select2-search input { + background-position: right center !important; +} + +body[dir='rtl'] div.select2-drop .select2-search input { + background-position: left center !important; +} + .select2-chosen, #select2-drop { .avatar, @@ -519,6 +620,7 @@ div.select2-drop { cursor: pointer; } } + div.select2-container-multi { .select2-choices, &.select2-container-active .select2-choices { @@ -526,23 +628,26 @@ div.select2-container-multi { white-space: nowrap; text-overflow: ellipsis; background: var(--color-main-background); - color: var(--color-text-lighter) !important; + color: var(--color-text-maxcontrast) !important; box-sizing: content-box; - border-radius: var(--border-radius); - border: 1px solid var(--color-border-dark); + border-radius: var(--border-radius-large); + border: 2px solid var(--color-border-dark); margin: 0; - padding: 2px 0; - min-height: auto; + padding: 6px; + min-height: 44px; + &:focus-within { + border-color: var(--color-primary-element) + } .select2-search-choice { line-height: 20px; - padding-left: 5px; + padding-inline-start: 5px; &.select2-search-choice-focus, &:hover, &:active, & { background-image: none; background-color: var(--color-main-background); - color: var(--color-text-lighter); + color: var(--color-text-maxcontrast); border: 1px solid var(--color-border-dark); } .select2-search-choice-close { @@ -551,14 +656,19 @@ div.select2-container-multi { } .select2-search-field input { line-height: 20px; + min-height: 28px; + max-height: 28px; + color: var(--color-main-text); &.select2-active { background: none !important; } } } } + div.select2-container { - margin: 3px 3px 3px 0; + margin: 3px; + margin-inline-start: 0; &.select2-container-multi .select2-choices { display: flex; flex-wrap: wrap; @@ -571,17 +681,19 @@ div.select2-container { white-space: nowrap; text-overflow: ellipsis; background: var(--color-main-background); - color: var(--color-text-lighter) !important; + color: var(--color-text-maxcontrast) !important; box-sizing: content-box; - border-radius: var(--border-radius); - border: 1px solid var(--color-border-dark); + border-radius: var(--border-radius-large); + border: 2px solid var(--color-border-dark); margin: 0; - padding: 2px 0; - padding-left: 6px; - min-height: auto; + padding: 6px 12px; + min-height: 44px; + &:focus-within { + border-color: var(--color-primary-element) + } .select2-search-choice { line-height: 20px; - padding-left: 5px; + padding-inline-start: 5px; background-image: none; background-color: var(--color-background-dark); border-color: var(--color-background-dark); @@ -599,7 +711,7 @@ div.select2-container { border-radius: 0; border: none; b { - background: var(--icon-triangle-s-000) no-repeat center !important; + background: var(--icon-triangle-s-dark) no-repeat center !important; opacity: .5; } } @@ -616,22 +728,23 @@ div.select2-container { /* Vue v-select */ .v-select { - margin: 3px 3px 3px 0; + margin: 3px; + margin-inline-start: 0; display: inline-block; .dropdown-toggle { display: flex !important; flex-wrap: wrap; .selected-tag { line-height: 20px; - padding-left: 5px; + padding-inline-start: 5px; background-image: none; background-color: var(--color-main-background); - color: var(--color-text-lighter); + color: var(--color-text-maxcontrast); border: 1px solid var(--color-border-dark); display: inline-flex; align-items: center; .close { - margin-left: 3px; + margin-inline-start: 3px; } } } @@ -643,13 +756,14 @@ div.select2-container { display: list-item; background-color: transparent; cursor: pointer; - color: var(--color-text-lighter); + color: var(--color-text-maxcontrast); a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 25px; - padding: 3px 7px 4px 2px; + padding-block: 3px 4px; + padding-inline: 2px 7px; margin: 0; cursor: pointer; min-height: 1em; @@ -664,14 +778,14 @@ div.select2-container { color: inherit !important; &::before { content: ' '; - background-image: var(--icon-checkmark-000); + background-image: var(--icon-checkmark-dark); background-repeat: no-repeat; background-position: center; min-width: 16px; min-height: 16px; display: block; opacity: 0.5; - margin-right: 5px; + margin-inline-end: 5px; visibility: hidden; } } @@ -689,211 +803,6 @@ div.select2-container { } } - -/* Vue multiselect */ -.multiselect.multiselect-vue { - margin: 1px 2px; - padding: 0 !important; - display: inline-block; - width: 160px; - position: relative; - background-color: var(--color-main-background); - &.multiselect--active { - /* Opened: force display the input */ - input.multiselect__input { - opacity: 1 !important; - cursor: text !important; - } - } - &.multiselect--disabled, - &.multiselect--disabled .multiselect__single { - background-color: var(--color-background-dark) !important; - } - .multiselect__tags { - /* space between tags and limit tag */ - $space-between: 5px; - - display: flex; - flex-wrap: nowrap; - overflow: hidden; - border: 1px solid var(--color-border-dark); - cursor: pointer; - position: relative; - border-radius: var(--border-radius); - height: $default-height; - /* tag wrapper */ - .multiselect__tags-wrap { - align-items: center; - display: inline-flex; - overflow: hidden; - max-width: 100%; - position: relative; - padding: 3px $space-between; - flex-grow: 1; - /* no tags or simple select? Show input directly - input is used to display single value */ - &:empty ~ input.multiselect__input { - opacity: 1 !important; - /* hide default empty text, show input instead */ - + span:not(.multiselect__single) { - display: none; - } - } - /* selected tag */ - .multiselect__tag { - flex: 1 0 0; - line-height: 20px; - padding: 1px 5px; - background-image: none; - color: var(--color-text-lighter); - border: 1px solid var(--color-border-dark); - display: inline-flex; - align-items: center; - border-radius: var(--border-radius); - /* require to override the default width - and force the tag to shring properly */ - min-width: 0; - max-width: 50%; - max-width: fit-content; - max-width: -moz-fit-content; - /* css hack, detect if more than two tags - if so, flex-basis is set to half */ - &:only-child { - flex: 0 1 auto; - } - &:not(:last-child) { - margin-right: $space-between; - } - /* ellipsis the groups to be sure - we display at least two of them */ - > span { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } - } - /* Single select default value */ - .multiselect__single { - padding: 8px 10px; - flex: 0 0 100%; - z-index: 1; /* above input */ - background-color: var(--color-main-background); - cursor: pointer; - line-height: 17px; - } - /* displayed text if tag limit reached */ - .multiselect__strong, - .multiselect__limit { - flex: 0 0 auto; - line-height: 20px; - color: var(--color-text-lighter); - display: inline-flex; - align-items: center; - opacity: .7; - margin-right: $space-between; - /* above the input */ - z-index: 5; - } - /* default multiselect input for search and placeholder */ - input.multiselect__input { - width: 100% !important; - position: absolute !important; - margin: 0; - opacity: 0; - /* let's leave it on top of tags but hide it */ - height: 100%; - border: none; - /* override hide to force show the placeholder */ - display: block !important; - /* only when not active */ - cursor: pointer; - } - } - /* results wrapper */ - .multiselect__content-wrapper { - position: absolute; - width: 100%; - margin-top: -1px; - border: 1px solid var(--color-border-dark); - background: var(--color-main-background); - z-index: 50; - max-height: 175px !important; // 5 items and a half - overflow-y: auto; - .multiselect__content { - width: 100%; - padding: 5px 0; - } - li { - padding: 5px; - position: relative; - display: flex; - align-items: center; - background-color: transparent; - &, - span { - cursor: pointer; - } - > span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - height: 20px; - margin: 0; - min-height: 1em; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - display: inline-flex; - align-items: center; - background-color: transparent !important; - color: var(--color-text-lighter); - width: 100%; - /* selected checkmark icon */ - &::before { - content: ' '; - background-image: var(--icon-checkmark-000); - background-repeat: no-repeat; - background-position: center; - min-width: 16px; - min-height: 16px; - display: block; - opacity: .5; - margin-right: 5px; - visibility: hidden; - } - &.multiselect__option--disabled { - background-color: var(--color-background-dark); - opacity: .5; - } - /* add the prop tag-placeholder="create" to add the + - * icon on top of an unknown-and-ready-to-be-created entry - */ - &[data-select='create'] { - &::before { - background-image: var(--icon-add-000); - visibility: visible; - } - } - &.multiselect__option--highlight { - color: var(--color-main-text); - } - &:not(.multiselect__option--disabled):hover::before { - opacity: .3; - } - &.multiselect__option--selected, - &:not(.multiselect__option--disabled):hover { - &::before { - visibility: visible; - } - } - } - } - } -} - /* Progressbar */ progress:not(.vue) { display: block; @@ -918,12 +827,12 @@ progress:not(.vue) { } &::-moz-progress-bar { border-radius: var(--border-radius); - background: var(--color-primary); + background: var(--color-primary-element); transition: 250ms all ease-in-out; } &::-webkit-progress-value { border-radius: var(--border-radius); - background: var(--color-primary); + background: var(--color-primary-element); transition: 250ms all ease-in-out; } } @@ -948,6 +857,7 @@ progress:not(.vue) { transform: translate(4px); } } + .shake { animation-name: shake; animation-duration: .7s; @@ -958,15 +868,29 @@ progress:not(.vue) { // Same as .hidden-visually label.infield { position: absolute; - left: -10000px; + inset-inline-start: -10000px; top: -10000px; width: 1px; height: 1px; overflow: hidden; } -::placeholder, -::-ms-input-placeholder, -::-webkit-input-placeholder { +// when rules are grouped using the comma operator and one selector is invalid / unknown then the whole group is invalidated. +// https://www.w3.org/TR/selectors-3/#grouping +// In this case `::-ms-input-placeholder` is unknown to Firefox and Chrome +@mixin placeholder-style { color: var(--color-text-maxcontrast); + font-size: var(--default-font-size); +} + +::placeholder { + @include placeholder-style; +} + +::-ms-input-placeholder { + @include placeholder-style; +} + +::-webkit-input-placeholder { + @include placeholder-style; } |