diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 1b9eae628b..99083ff1a5 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -75,13 +75,13 @@ div[contenteditable=true], cursor: default; opacity: 0.5; } - &:required { - box-shadow: none; - } - &:invalid { - box-shadow: none !important; - border-color: var(--color-error); - } + &:required { + box-shadow: none; + } + &:invalid { + box-shadow: none !important; + border-color: var(--color-error); + } /* Primary action button, use sparingly */ &.primary { background-color: var(--color-primary-element); @@ -248,6 +248,11 @@ input { /* only show confirm borders if input is not focused */ &:not(:active):not(:hover):not(:focus){ + &:invalid { + + .icon-confirm { + border-color: var(--color-error); + } + } + .icon-confirm { &:active, &:hover, @@ -263,15 +268,10 @@ input { &:active, &:hover, &:focus { - &:invalid { - + .icon-confirm { - border-color: var(--color-error); - } - } + .icon-confirm { border-color: var(--color-primary-element) !important; border-left-color: transparent !important; - /* above previous input */ + /* above previous input */ z-index: 2; } } @@ -635,63 +635,63 @@ input { /* 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 { + 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 { + } + } + &.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: 3px; - height: 34px; - /* tag wrapper */ - .multiselect__tags-wrap { - align-items: center; - display: inline-flex; - overflow: hidden; - max-width: 100%; - position: relative; + display: flex; + flex-wrap: nowrap; + overflow: hidden; + border: 1px solid var(--color-border-dark); + cursor: pointer; + position: relative; + border-radius: 3px; + height: 34px; + /* 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 + /* 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; + &: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: 3px; /* require to override the default width and force the tag to shring properly */ @@ -714,114 +714,114 @@ input { 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; - } - /* displayed text if tag limit reached */ + } + } + /* 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; + } + /* 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; + 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 */ + } + /* 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: 250px; - 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: url('../img/actions/checkmark.svg?v=1'); - 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 { + } + } + /* 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: 250px; + 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: url('../img/actions/checkmark.svg?v=1'); + 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 + + } + /* 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: url('../img/actions/add.svg?v=1'); - visibility: visible; - } - } - &.multiselect__option--highlight { - color: var(--color-main-text); - } + &[data-select='create'] { + &::before { + background-image: url('../img/actions/add.svg?v=1'); + visibility: visible; + } + } + &.multiselect__option--highlight { + color: var(--color-main-text); + } &:not(.multiselect__option--disabled):hover::before { opacity: .3; } @@ -831,9 +831,9 @@ input { visibility: visible; } } - } - } - } + } + } + } } /* Progressbar */