mirror of
https://github.com/nextcloud/server.git
synced 2026-02-19 02:38:40 -05:00
68ed1af3c0
Input fields require a 44x44 pixels target size, this makes all the input fields and button use that size. Bonus is that now the input fields and buttons now have the same size as the new vue button and this looks less weird than the previous state with controls of different sizes. See https://www.w3.org/WAI/WCAG21/Understanding/target-size.html Signed-off-by: Carl Schwan <carl@carlschwan.eu>
1062 lines
41 KiB
CSS
1062 lines
41 KiB
CSS
@charset "UTF-8";
|
|
/**
|
|
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
|
|
*
|
|
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
|
|
*
|
|
* @license GNU AGPL version 3 or any later version
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*
|
|
*/
|
|
/**
|
|
* @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
|
|
*
|
|
*/
|
|
/**
|
|
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
|
|
*
|
|
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
|
|
*
|
|
* @license GNU AGPL version 3 or any later version
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*
|
|
*/
|
|
/**
|
|
* @see core/src/icons.js
|
|
*/
|
|
/**
|
|
* SVG COLOR API
|
|
*
|
|
* @param string $icon the icon filename
|
|
* @param string $dir the icon folder within /core/img if $core or app name
|
|
* @param string $color the desired color in hexadecimal
|
|
* @param int $version the version of the file
|
|
* @param bool [$core] search icon in core
|
|
*
|
|
* @returns A background image with the url to the set to the requested icon.
|
|
*/
|
|
/* 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;
|
|
}
|
|
|
|
/* Simple selector to allow easy overriding */
|
|
select,
|
|
button:not(.button-vue),
|
|
input,
|
|
textarea,
|
|
div[contenteditable=true],
|
|
div[contenteditable=false] {
|
|
width: 130px;
|
|
min-height: 44px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/**
|
|
* color-text-lighter normal state
|
|
* color-text-lighter active state
|
|
* color-text-maxcontrast disabled state
|
|
*/
|
|
/* Default global values */
|
|
div.select2-drop .select2-search input,
|
|
select,
|
|
button:not(.button-vue), .button,
|
|
input:not([type=range]),
|
|
textarea,
|
|
div[contenteditable=true],
|
|
.pager li a {
|
|
margin: 3px 3px 3px 0;
|
|
padding: 7px 14px;
|
|
font-size: 13px;
|
|
background-color: var(--color-main-background);
|
|
color: var(--color-main-text);
|
|
border: 1px solid var(--color-border-dark);
|
|
outline: none;
|
|
border-radius: var(--border-radius);
|
|
cursor: text;
|
|
/* Primary action button, use sparingly */
|
|
}
|
|
div.select2-drop .select2-search input:not(:disabled):not(.primary):hover, div.select2-drop .select2-search input:not(:disabled):not(.primary):focus, div.select2-drop .select2-search input:not(:disabled):not(.primary).active,
|
|
select:not(:disabled):not(.primary):hover,
|
|
select:not(:disabled):not(.primary):focus,
|
|
select:not(:disabled):not(.primary).active,
|
|
button:not(.button-vue):not(:disabled):not(.primary):hover,
|
|
button:not(.button-vue):not(:disabled):not(.primary):focus,
|
|
button:not(.button-vue):not(:disabled):not(.primary).active, .button:not(:disabled):not(.primary):hover, .button:not(:disabled):not(.primary):focus, .button:not(:disabled):not(.primary).active,
|
|
input:not([type=range]):not(:disabled):not(.primary):hover,
|
|
input:not([type=range]):not(:disabled):not(.primary):focus,
|
|
input:not([type=range]):not(:disabled):not(.primary).active,
|
|
textarea:not(:disabled):not(.primary):hover,
|
|
textarea:not(:disabled):not(.primary):focus,
|
|
textarea:not(:disabled):not(.primary).active,
|
|
div[contenteditable=true]:not(:disabled):not(.primary):hover,
|
|
div[contenteditable=true]:not(:disabled):not(.primary):focus,
|
|
div[contenteditable=true]:not(:disabled):not(.primary).active,
|
|
.pager li a:not(:disabled):not(.primary):hover,
|
|
.pager li a:not(:disabled):not(.primary):focus,
|
|
.pager li a:not(:disabled):not(.primary).active {
|
|
/* active class used for multiselect */
|
|
border-color: var(--color-primary-element);
|
|
outline: none;
|
|
}
|
|
div.select2-drop .select2-search input:not(:disabled):not(.primary):active,
|
|
select:not(:disabled):not(.primary):active,
|
|
button:not(.button-vue):not(:disabled):not(.primary):active, .button:not(:disabled):not(.primary):active,
|
|
input:not([type=range]):not(:disabled):not(.primary):active,
|
|
textarea:not(:disabled):not(.primary):active,
|
|
div[contenteditable=true]:not(:disabled):not(.primary):active,
|
|
.pager li a:not(:disabled):not(.primary):active {
|
|
outline: none;
|
|
background-color: var(--color-main-background);
|
|
color: var(--color-text-light);
|
|
}
|
|
div.select2-drop .select2-search input:not(:disabled):not(.primary):focus-visible,
|
|
select:not(:disabled):not(.primary):focus-visible,
|
|
button:not(.button-vue):not(:disabled):not(.primary):focus-visible, .button:not(:disabled):not(.primary):focus-visible,
|
|
input:not([type=range]):not(:disabled):not(.primary):focus-visible,
|
|
textarea:not(:disabled):not(.primary):focus-visible,
|
|
div[contenteditable=true]:not(:disabled):not(.primary):focus-visible,
|
|
.pager li a:not(:disabled):not(.primary):focus-visible {
|
|
box-shadow: 0 0 0 2px var(--color-primary);
|
|
}
|
|
div.select2-drop .select2-search input:disabled,
|
|
select:disabled,
|
|
button:not(.button-vue):disabled, .button:disabled,
|
|
input:not([type=range]):disabled,
|
|
textarea:disabled,
|
|
div[contenteditable=true]:disabled,
|
|
.pager li a:disabled {
|
|
background-color: var(--color-background-dark);
|
|
color: var(--color-main-text);
|
|
cursor: default;
|
|
opacity: 0.5;
|
|
}
|
|
div.select2-drop .select2-search input:required,
|
|
select:required,
|
|
button:not(.button-vue):required, .button:required,
|
|
input:not([type=range]):required,
|
|
textarea:required,
|
|
div[contenteditable=true]:required,
|
|
.pager li a:required {
|
|
box-shadow: none;
|
|
}
|
|
div.select2-drop .select2-search input:user-invalid,
|
|
select:user-invalid,
|
|
button:not(.button-vue):user-invalid, .button:user-invalid,
|
|
input:not([type=range]):user-invalid,
|
|
textarea:user-invalid,
|
|
div[contenteditable=true]:user-invalid,
|
|
.pager li a:user-invalid {
|
|
box-shadow: 0 0 0 2px var(--color-error) !important;
|
|
}
|
|
div.select2-drop .select2-search input.primary,
|
|
select.primary,
|
|
button:not(.button-vue).primary, .button.primary,
|
|
input:not([type=range]).primary,
|
|
textarea.primary,
|
|
div[contenteditable=true].primary,
|
|
.pager li a.primary {
|
|
background-color: var(--color-primary-element);
|
|
border-color: var(--color-primary-element);
|
|
color: var(--color-primary-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) div.select2-drop .select2-search input.primary, #header div.select2-drop .select2-search input.primary,
|
|
#body-login :not(.body-login-container) select.primary,
|
|
#header select.primary,
|
|
#body-login :not(.body-login-container) button:not(.button-vue).primary,
|
|
#header button:not(.button-vue).primary, #body-login :not(.body-login-container) .button.primary, #header .button.primary,
|
|
#body-login :not(.body-login-container) input:not([type=range]).primary,
|
|
#header input:not([type=range]).primary,
|
|
#body-login :not(.body-login-container) textarea.primary,
|
|
#header textarea.primary,
|
|
#body-login :not(.body-login-container) div[contenteditable=true].primary,
|
|
#header div[contenteditable=true].primary,
|
|
#body-login :not(.body-login-container) .pager li a.primary,
|
|
#header .pager li a.primary {
|
|
border-color: var(--color-primary-text);
|
|
}
|
|
div.select2-drop .select2-search input.primary:not(:disabled):hover, div.select2-drop .select2-search input.primary:not(:disabled):focus, div.select2-drop .select2-search input.primary:not(:disabled):active,
|
|
select.primary:not(:disabled):hover,
|
|
select.primary:not(:disabled):focus,
|
|
select.primary:not(:disabled):active,
|
|
button:not(.button-vue).primary:not(:disabled):hover,
|
|
button:not(.button-vue).primary:not(:disabled):focus,
|
|
button:not(.button-vue).primary:not(:disabled):active, .button.primary:not(:disabled):hover, .button.primary:not(:disabled):focus, .button.primary:not(:disabled):active,
|
|
input:not([type=range]).primary:not(:disabled):hover,
|
|
input:not([type=range]).primary:not(:disabled):focus,
|
|
input:not([type=range]).primary:not(:disabled):active,
|
|
textarea.primary:not(:disabled):hover,
|
|
textarea.primary:not(:disabled):focus,
|
|
textarea.primary:not(:disabled):active,
|
|
div[contenteditable=true].primary:not(:disabled):hover,
|
|
div[contenteditable=true].primary:not(:disabled):focus,
|
|
div[contenteditable=true].primary:not(:disabled):active,
|
|
.pager li a.primary:not(:disabled):hover,
|
|
.pager li a.primary:not(:disabled):focus,
|
|
.pager li a.primary:not(:disabled):active {
|
|
background-color: var(--color-primary-element-hover);
|
|
border-color: var(--color-primary-element-hover);
|
|
}
|
|
div.select2-drop .select2-search input.primary:not(:disabled):focus, div.select2-drop .select2-search input.primary:not(:disabled):focus-visible,
|
|
select.primary:not(:disabled):focus,
|
|
select.primary:not(:disabled):focus-visible,
|
|
button:not(.button-vue).primary:not(:disabled):focus,
|
|
button:not(.button-vue).primary:not(:disabled):focus-visible, .button.primary:not(:disabled):focus, .button.primary:not(:disabled):focus-visible,
|
|
input:not([type=range]).primary:not(:disabled):focus,
|
|
input:not([type=range]).primary:not(:disabled):focus-visible,
|
|
textarea.primary:not(:disabled):focus,
|
|
textarea.primary:not(:disabled):focus-visible,
|
|
div[contenteditable=true].primary:not(:disabled):focus,
|
|
div[contenteditable=true].primary:not(:disabled):focus-visible,
|
|
.pager li a.primary:not(:disabled):focus,
|
|
.pager li a.primary:not(:disabled):focus-visible {
|
|
box-shadow: 0 0 0 2px var(--color-main-text);
|
|
}
|
|
div.select2-drop .select2-search input.primary:not(:disabled):active,
|
|
select.primary:not(:disabled):active,
|
|
button:not(.button-vue).primary:not(:disabled):active, .button.primary:not(:disabled):active,
|
|
input:not([type=range]).primary:not(:disabled):active,
|
|
textarea.primary:not(:disabled):active,
|
|
div[contenteditable=true].primary:not(:disabled):active,
|
|
.pager li a.primary:not(:disabled):active {
|
|
color: var(--color-primary-text-dark);
|
|
}
|
|
div.select2-drop .select2-search input.primary:disabled,
|
|
select.primary:disabled,
|
|
button:not(.button-vue).primary:disabled, .button.primary:disabled,
|
|
input:not([type=range]).primary:disabled,
|
|
textarea.primary:disabled,
|
|
div[contenteditable=true].primary:disabled,
|
|
.pager li a.primary:disabled {
|
|
background-color: var(--color-primary-element);
|
|
color: var(--color-primary-text-dark);
|
|
cursor: default;
|
|
}
|
|
|
|
div[contenteditable=false] {
|
|
margin: 3px 3px 3px 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);
|
|
cursor: default;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Specific override */
|
|
input {
|
|
/* Color input doesn't respect the initial height
|
|
so we need to set a custom one */
|
|
}
|
|
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;
|
|
height: 44px;
|
|
}
|
|
input[type=radio], input[type=checkbox], input[type=file], input[type=image] {
|
|
height: auto;
|
|
width: auto;
|
|
}
|
|
input[type=color] {
|
|
margin: 3px;
|
|
padding: 0 2px;
|
|
min-height: 30px;
|
|
width: 40px;
|
|
cursor: pointer;
|
|
}
|
|
input[type=hidden] {
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
input[type=time] {
|
|
width: initial;
|
|
}
|
|
|
|
/* 'Click' inputs */
|
|
select,
|
|
button:not(.button-vue), .button,
|
|
input[type=button],
|
|
input[type=submit],
|
|
input[type=reset] {
|
|
padding: 6px 11px;
|
|
width: auto;
|
|
min-height: 44px;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
background-color: var(--color-background-dark);
|
|
}
|
|
select:disabled,
|
|
button:not(.button-vue):disabled, .button:disabled,
|
|
input[type=button]:disabled,
|
|
input[type=submit]:disabled,
|
|
input[type=reset]:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
select *,
|
|
button:not(.button-vue) *, .button * {
|
|
cursor: pointer;
|
|
}
|
|
select:disabled *,
|
|
button:not(.button-vue):disabled *, .button:disabled * {
|
|
cursor: default;
|
|
}
|
|
|
|
/* Buttons */
|
|
button:not(.button-vue), .button,
|
|
input[type=button],
|
|
input[type=submit],
|
|
input[type=reset] {
|
|
font-weight: bold;
|
|
border-radius: var(--border-radius-pill);
|
|
/* Get rid of the inside dotted line in Firefox */
|
|
}
|
|
button:not(.button-vue)::-moz-focus-inner, .button::-moz-focus-inner,
|
|
input[type=button]::-moz-focus-inner,
|
|
input[type=submit]::-moz-focus-inner,
|
|
input[type=reset]::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
button:not(.button-vue).error, .button.error,
|
|
input[type=button].error,
|
|
input[type=submit].error,
|
|
input[type=reset].error {
|
|
background-color: var(--color-error) !important;
|
|
border-color: var(--color-error) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
button:not(.button-vue):not(.action-button) > span, .button > span {
|
|
/* icon position inside buttons */
|
|
}
|
|
button:not(.button-vue):not(.action-button) > span[class^=icon-], button:not(.button-vue):not(.action-button) > span[class*=" icon-"], .button > span[class^=icon-], .button > span[class*=" icon-"] {
|
|
display: inline-block;
|
|
vertical-align: text-bottom;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
textarea, div[contenteditable=true] {
|
|
color: var(--color-main-text);
|
|
cursor: text;
|
|
font-family: inherit;
|
|
height: auto;
|
|
}
|
|
textarea:not(:disabled):active, textarea:not(:disabled):hover, textarea:not(:disabled):focus, div[contenteditable=true]:not(:disabled):active, div[contenteditable=true]:not(:disabled):hover, div[contenteditable=true]:not(:disabled):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-dark) no-repeat right 4px center;
|
|
background-color: inherit;
|
|
outline: 0;
|
|
padding-right: 24px !important;
|
|
height: 44px;
|
|
}
|
|
|
|
/* Confirm inputs */
|
|
input[type=text], input[type=password], input[type=email] {
|
|
/* only show confirm borders if input is not focused */
|
|
}
|
|
input[type=text] + .icon-confirm, input[type=password] + .icon-confirm, input[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: 44px;
|
|
width: 44px;
|
|
padding: 7px 6px;
|
|
cursor: pointer;
|
|
margin-right: 0;
|
|
}
|
|
input[type=text] + .icon-confirm:disabled, input[type=password] + .icon-confirm:disabled, input[type=email] + .icon-confirm:disabled {
|
|
cursor: default;
|
|
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
|
|
background-image: var(--icon-confirm-fade-dark);
|
|
}
|
|
input[type=text]:not(:active):not(:hover):not(:focus):invalid + .icon-confirm, input[type=password]:not(:active):not(:hover):not(:focus):invalid + .icon-confirm, input[type=email]:not(:active):not(:hover):not(:focus):invalid + .icon-confirm {
|
|
border-color: var(--color-error);
|
|
}
|
|
input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus {
|
|
border-color: var(--color-primary-element) !important;
|
|
border-radius: var(--border-radius) !important;
|
|
}
|
|
input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:active:disabled, input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover:disabled, input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus:disabled, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:active:disabled, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover:disabled, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus:disabled, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:active:disabled, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover:disabled, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus:disabled {
|
|
border-color: var(--color-background-darker) !important;
|
|
}
|
|
input[type=text]:active + .icon-confirm, input[type=text]:hover + .icon-confirm, input[type=text]:focus + .icon-confirm, input[type=password]:active + .icon-confirm, input[type=password]:hover + .icon-confirm, input[type=password]:focus + .icon-confirm, input[type=email]:active + .icon-confirm, input[type=email]:hover + .icon-confirm, input[type=email]:focus + .icon-confirm {
|
|
border-color: var(--color-primary-element) !important;
|
|
border-left-color: transparent !important;
|
|
/* above previous input */
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Various Fixes */
|
|
button img,
|
|
.button img {
|
|
cursor: pointer;
|
|
}
|
|
|
|
select,
|
|
.button.multiselect {
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Radio & Checkboxes */
|
|
input[type=checkbox], input[type=radio] {
|
|
/* We do not use the variables as we keep the colours as white for this variant */
|
|
}
|
|
input[type=checkbox].radio, input[type=checkbox].checkbox, input[type=radio].radio, input[type=radio].checkbox {
|
|
position: absolute;
|
|
left: -10000px;
|
|
top: auto;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
input[type=checkbox].radio + label, input[type=checkbox].checkbox + label, input[type=radio].radio + label, input[type=radio].checkbox + label {
|
|
user-select: none;
|
|
}
|
|
input[type=checkbox].radio:disabled + label, input[type=checkbox].radio:disabled + label:before, input[type=checkbox].checkbox:disabled + label, input[type=checkbox].checkbox:disabled + label:before, input[type=radio].radio:disabled + label, input[type=radio].radio:disabled + label:before, input[type=radio].checkbox:disabled + label, input[type=radio].checkbox:disabled + label:before {
|
|
cursor: default;
|
|
}
|
|
input[type=checkbox].radio + label:before, input[type=checkbox].checkbox + label:before, input[type=radio].radio + label:before, input[type=radio].checkbox + label:before {
|
|
content: "";
|
|
display: inline-block;
|
|
height: 14px;
|
|
width: 14px;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
margin: 0 6px 3px 3px;
|
|
border: 1px solid var(--color-text-lighter);
|
|
}
|
|
input[type=checkbox].radio:not(:disabled):not(:checked) + label:hover:before, input[type=checkbox].radio:focus + label:before, input[type=checkbox].checkbox:not(:disabled):not(:checked) + label:hover:before, input[type=checkbox].checkbox:focus + label:before, input[type=radio].radio:not(:disabled):not(:checked) + label:hover:before, input[type=radio].radio:focus + label:before, input[type=radio].checkbox:not(:disabled):not(:checked) + label:hover:before, input[type=radio].checkbox:focus + label:before {
|
|
border-color: var(--color-primary-element);
|
|
}
|
|
input[type=checkbox].radio:focus-visible + label, input[type=checkbox].checkbox:focus-visible + label, input[type=radio].radio:focus-visible + label, input[type=radio].checkbox:focus-visible + label {
|
|
outline-style: solid;
|
|
outline-color: var(--color-main-text);
|
|
outline-width: 1px;
|
|
outline-offset: 2px;
|
|
}
|
|
input[type=checkbox].radio:checked + label:before, input[type=checkbox].radio.checkbox:indeterminate + label:before, input[type=checkbox].checkbox:checked + label:before, input[type=checkbox].checkbox.checkbox:indeterminate + label:before, input[type=radio].radio:checked + label:before, input[type=radio].radio.checkbox:indeterminate + label:before, input[type=radio].checkbox:checked + label:before, input[type=radio].checkbox.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);
|
|
}
|
|
input[type=checkbox].radio:disabled + label:before, input[type=checkbox].checkbox:disabled + label:before, input[type=radio].radio:disabled + label:before, input[type=radio].checkbox:disabled + label:before {
|
|
border: 1px solid var(--color-text-lighter);
|
|
background-color: var(--color-text-maxcontrast) !important;
|
|
/* override other status */
|
|
}
|
|
input[type=checkbox].radio:checked:disabled + label:before, input[type=checkbox].checkbox:checked:disabled + label:before, input[type=radio].radio:checked:disabled + label:before, input[type=radio].checkbox:checked:disabled + label:before {
|
|
background-color: var(--color-text-maxcontrast);
|
|
}
|
|
input[type=checkbox].radio + label ~ em, input[type=checkbox].checkbox + label ~ em, input[type=radio].radio + label ~ em, input[type=radio].checkbox + label ~ em {
|
|
display: inline-block;
|
|
margin-left: 25px;
|
|
}
|
|
input[type=checkbox].radio + label ~ em:last-of-type, input[type=checkbox].checkbox + label ~ em:last-of-type, input[type=radio].radio + label ~ em:last-of-type, input[type=radio].checkbox + label ~ em:last-of-type {
|
|
margin-bottom: 14px;
|
|
}
|
|
input[type=checkbox].checkbox + label:before, input[type=radio].checkbox + label:before {
|
|
border-radius: 1px;
|
|
height: 14px;
|
|
width: 14px;
|
|
box-shadow: none !important;
|
|
background-position: center;
|
|
}
|
|
input[type=checkbox].checkbox:checked + label:before, input[type=radio].checkbox:checked + label:before {
|
|
background-image: url("../img/actions/checkbox-mark.svg");
|
|
}
|
|
input[type=checkbox].checkbox:indeterminate + label:before, input[type=radio].checkbox:indeterminate + label:before {
|
|
background-image: url("../img/actions/checkbox-mixed.svg");
|
|
}
|
|
input[type=checkbox].radio--white + label:before, input[type=checkbox].radio--white:focus + label:before, input[type=checkbox].checkbox--white + label:before, input[type=checkbox].checkbox--white:focus + label:before, input[type=radio].radio--white + label:before, input[type=radio].radio--white:focus + label:before, input[type=radio].checkbox--white + label:before, input[type=radio].checkbox--white:focus + label:before {
|
|
border-color: #bababa;
|
|
}
|
|
input[type=checkbox].radio--white:not(:disabled):not(:checked) + label:hover:before, input[type=checkbox].checkbox--white:not(:disabled):not(:checked) + label:hover:before, input[type=radio].radio--white:not(:disabled):not(:checked) + label:hover:before, input[type=radio].checkbox--white:not(:disabled):not(:checked) + label:hover:before {
|
|
border-color: #fff;
|
|
}
|
|
input[type=checkbox].radio--white:checked + label:before, input[type=checkbox].checkbox--white:checked + label:before, input[type=radio].radio--white:checked + label:before, input[type=radio].checkbox--white:checked + label:before {
|
|
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
|
|
background-color: #dbdbdb;
|
|
border-color: #dbdbdb;
|
|
}
|
|
input[type=checkbox].radio--white:disabled + label:before, input[type=checkbox].checkbox--white:disabled + label:before, input[type=radio].radio--white:disabled + label:before, input[type=radio].checkbox--white:disabled + label:before {
|
|
background-color: #bababa !important;
|
|
/* override other status */
|
|
border-color: rgba(255, 255, 255, 0.4) !important;
|
|
/* override other status */
|
|
}
|
|
input[type=checkbox].radio--white:checked:disabled + label:before, input[type=checkbox].checkbox--white:checked:disabled + label:before, input[type=radio].radio--white:checked:disabled + label:before, input[type=radio].checkbox--white:checked:disabled + label:before {
|
|
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
|
|
border-color: rgba(255, 255, 255, 0.4) !important;
|
|
/* override other status */
|
|
background-color: #bababa;
|
|
}
|
|
input[type=checkbox].checkbox--white:checked + label:before, input[type=checkbox].checkbox--white:indeterminate + label:before, input[type=radio].checkbox--white:checked + label:before, input[type=radio].checkbox--white:indeterminate + label:before {
|
|
background-color: transparent !important;
|
|
/* Override default checked */
|
|
border-color: #fff !important;
|
|
/* Override default checked */
|
|
background-image: url("../img/actions/checkbox-mark-white.svg");
|
|
}
|
|
input[type=checkbox].checkbox--white:indeterminate + label:before, input[type=radio].checkbox--white:indeterminate + label:before {
|
|
background-image: url("../img/actions/checkbox-mixed-white.svg");
|
|
}
|
|
input[type=checkbox].checkbox--white:disabled + label:before, input[type=radio].checkbox--white:disabled + label:before {
|
|
opacity: 0.7;
|
|
/* No other choice for white background image */
|
|
}
|
|
|
|
/* Select2 overriding. Merged to core with vendor stylesheet */
|
|
div.select2-drop {
|
|
margin-top: -2px;
|
|
background-color: var(--color-main-background);
|
|
}
|
|
div.select2-drop.select2-drop-active {
|
|
border-color: var(--color-border-dark);
|
|
}
|
|
div.select2-drop .avatar {
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
div.select2-drop .avatar img {
|
|
cursor: pointer;
|
|
}
|
|
div.select2-drop .select2-search input {
|
|
min-height: auto;
|
|
background: var(--icon-search-dark) no-repeat right center !important;
|
|
background-origin: content-box !important;
|
|
}
|
|
div.select2-drop .select2-results {
|
|
max-height: 250px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
div.select2-drop .select2-results .select2-result-label {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
div.select2-drop .select2-results .select2-result-label span {
|
|
cursor: pointer;
|
|
}
|
|
div.select2-drop .select2-results .select2-result-label span em {
|
|
cursor: inherit;
|
|
background: unset;
|
|
}
|
|
div.select2-drop .select2-results .select2-result,
|
|
div.select2-drop .select2-results .select2-no-results,
|
|
div.select2-drop .select2-results .select2-searching {
|
|
position: relative;
|
|
display: list-item;
|
|
padding: 12px;
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
color: var(--color-text-lighter);
|
|
}
|
|
div.select2-drop .select2-results .select2-result.select2-selected {
|
|
background-color: var(--color-background-dark);
|
|
}
|
|
div.select2-drop .select2-results .select2-highlighted {
|
|
background-color: var(--color-background-dark);
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
.select2-chosen .avatar,
|
|
.select2-chosen .avatar img,
|
|
#select2-drop .avatar,
|
|
#select2-drop .avatar img {
|
|
cursor: pointer;
|
|
}
|
|
|
|
div.select2-container-multi .select2-choices, div.select2-container-multi.select2-container-active .select2-choices {
|
|
box-shadow: none;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
background: var(--color-main-background);
|
|
color: var(--color-text-lighter) !important;
|
|
box-sizing: content-box;
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--color-border-dark);
|
|
margin: 0;
|
|
padding: 2px 0;
|
|
min-height: auto;
|
|
}
|
|
div.select2-container-multi .select2-choices .select2-search-choice, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice {
|
|
line-height: 20px;
|
|
padding-left: 5px;
|
|
}
|
|
div.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-focus, div.select2-container-multi .select2-choices .select2-search-choice:hover, div.select2-container-multi .select2-choices .select2-search-choice:active, div.select2-container-multi .select2-choices .select2-search-choice, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice.select2-search-choice-focus, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice:hover, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice:active, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice {
|
|
background-image: none;
|
|
background-color: var(--color-main-background);
|
|
color: var(--color-text-lighter);
|
|
border: 1px solid var(--color-border-dark);
|
|
}
|
|
div.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice .select2-search-choice-close {
|
|
display: none;
|
|
}
|
|
div.select2-container-multi .select2-choices .select2-search-field input, div.select2-container-multi.select2-container-active .select2-choices .select2-search-field input {
|
|
line-height: 20px;
|
|
}
|
|
div.select2-container-multi .select2-choices .select2-search-field input.select2-active, div.select2-container-multi.select2-container-active .select2-choices .select2-search-field input.select2-active {
|
|
background: none !important;
|
|
}
|
|
|
|
div.select2-container {
|
|
margin: 3px 3px 3px 0;
|
|
}
|
|
div.select2-container.select2-container-multi .select2-choices {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
div.select2-container.select2-container-multi .select2-choices li {
|
|
float: none;
|
|
}
|
|
div.select2-container a.select2-choice {
|
|
box-shadow: none;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
background: var(--color-main-background);
|
|
color: var(--color-text-lighter) !important;
|
|
box-sizing: content-box;
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--color-border-dark);
|
|
margin: 0;
|
|
padding: 2px 0;
|
|
padding-left: 6px;
|
|
min-height: auto;
|
|
}
|
|
div.select2-container a.select2-choice .select2-search-choice {
|
|
line-height: 20px;
|
|
padding-left: 5px;
|
|
background-image: none;
|
|
background-color: var(--color-background-dark);
|
|
border-color: var(--color-background-dark);
|
|
}
|
|
div.select2-container a.select2-choice .select2-search-choice .select2-search-choice-close {
|
|
display: none;
|
|
}
|
|
div.select2-container a.select2-choice .select2-search-choice.select2-search-choice-focus, div.select2-container a.select2-choice .select2-search-choice:hover {
|
|
background-color: var(--color-border);
|
|
border-color: var(--color-border);
|
|
}
|
|
div.select2-container a.select2-choice .select2-arrow {
|
|
background: none;
|
|
border-radius: 0;
|
|
border: none;
|
|
}
|
|
div.select2-container a.select2-choice .select2-arrow b {
|
|
background: var(--icon-triangle-s-dark) no-repeat center !important;
|
|
opacity: 0.5;
|
|
}
|
|
div.select2-container a.select2-choice:hover .select2-arrow b, div.select2-container a.select2-choice:focus .select2-arrow b, div.select2-container a.select2-choice:active .select2-arrow b {
|
|
opacity: 0.7;
|
|
}
|
|
div.select2-container a.select2-choice .select2-search-field input {
|
|
line-height: 20px;
|
|
}
|
|
|
|
/* Vue v-select */
|
|
.v-select {
|
|
margin: 3px 3px 3px 0;
|
|
display: inline-block;
|
|
}
|
|
.v-select .dropdown-toggle {
|
|
display: flex !important;
|
|
flex-wrap: wrap;
|
|
}
|
|
.v-select .dropdown-toggle .selected-tag {
|
|
line-height: 20px;
|
|
padding-left: 5px;
|
|
background-image: none;
|
|
background-color: var(--color-main-background);
|
|
color: var(--color-text-lighter);
|
|
border: 1px solid var(--color-border-dark);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.v-select .dropdown-toggle .selected-tag .close {
|
|
margin-left: 3px;
|
|
}
|
|
.v-select .dropdown-menu {
|
|
padding: 0;
|
|
}
|
|
.v-select .dropdown-menu li {
|
|
padding: 5px;
|
|
position: relative;
|
|
display: list-item;
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
color: var(--color-text-lighter);
|
|
}
|
|
.v-select .dropdown-menu li a {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
height: 25px;
|
|
padding: 3px 7px 4px 2px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
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: inherit !important;
|
|
}
|
|
.v-select .dropdown-menu li a::before {
|
|
content: " ";
|
|
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;
|
|
visibility: hidden;
|
|
}
|
|
.v-select .dropdown-menu li.highlight {
|
|
color: var(--color-main-text);
|
|
}
|
|
.v-select .dropdown-menu li.active > a {
|
|
background-color: var(--color-background-dark);
|
|
color: var(--color-main-text);
|
|
}
|
|
.v-select .dropdown-menu li.active > a::before {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Vue multiselect */
|
|
.multiselect.multiselect-vue {
|
|
margin: 1px 2px;
|
|
padding: 0 !important;
|
|
display: inline-block;
|
|
width: 160px;
|
|
position: relative;
|
|
background-color: var(--color-main-background);
|
|
/* results wrapper */
|
|
}
|
|
.multiselect.multiselect-vue.multiselect--active {
|
|
/* Opened: force display the input */
|
|
}
|
|
.multiselect.multiselect-vue.multiselect--active input.multiselect__input {
|
|
opacity: 1 !important;
|
|
cursor: text !important;
|
|
}
|
|
.multiselect.multiselect-vue.multiselect--disabled, .multiselect.multiselect-vue.multiselect--disabled .multiselect__single {
|
|
background-color: var(--color-background-dark) !important;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__tags {
|
|
/* space between tags and limit tag */
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-border-dark);
|
|
cursor: pointer;
|
|
position: relative;
|
|
border-radius: var(--border-radius);
|
|
height: 44px;
|
|
/* tag wrapper */
|
|
/* Single select default value */
|
|
/* displayed text if tag limit reached */
|
|
/* default multiselect input for search and placeholder */
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
position: relative;
|
|
padding: 3px 5px;
|
|
flex-grow: 1;
|
|
/* no tags or simple select? Show input directly
|
|
input is used to display single value */
|
|
/* selected tag */
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap:empty ~ input.multiselect__input {
|
|
opacity: 1 !important;
|
|
/* hide default empty text, show input instead */
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap:empty ~ input.multiselect__input + span:not(.multiselect__single) {
|
|
display: none;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap .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 */
|
|
/* ellipsis the groups to be sure
|
|
we display at least two of them */
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap .multiselect__tag:only-child {
|
|
flex: 0 1 auto;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap .multiselect__tag:not(:last-child) {
|
|
margin-right: 5px;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap .multiselect__tag > span {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__tags .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;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__tags .multiselect__strong,
|
|
.multiselect.multiselect-vue .multiselect__tags .multiselect__limit {
|
|
flex: 0 0 auto;
|
|
line-height: 20px;
|
|
color: var(--color-text-lighter);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
opacity: 0.7;
|
|
margin-right: 5px;
|
|
/* above the input */
|
|
z-index: 5;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__tags 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;
|
|
}
|
|
.multiselect.multiselect-vue .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;
|
|
overflow-y: auto;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__content-wrapper .multiselect__content {
|
|
width: 100%;
|
|
padding: 5px 0;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__content-wrapper li {
|
|
padding: 5px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: transparent;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__content-wrapper li,
|
|
.multiselect.multiselect-vue .multiselect__content-wrapper li span {
|
|
cursor: pointer;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__content-wrapper li > 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 */
|
|
/* add the prop tag-placeholder="create" to add the +
|
|
* icon on top of an unknown-and-ready-to-be-created entry
|
|
*/
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__content-wrapper li > span::before {
|
|
content: " ";
|
|
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;
|
|
visibility: hidden;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__content-wrapper li > span.multiselect__option--disabled {
|
|
background-color: var(--color-background-dark);
|
|
opacity: 0.5;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__content-wrapper li > span[data-select=create]::before {
|
|
background-image: var(--icon-add-dark);
|
|
visibility: visible;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__content-wrapper li > span.multiselect__option--highlight {
|
|
color: var(--color-main-text);
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__content-wrapper li > span:not(.multiselect__option--disabled):hover::before {
|
|
opacity: 0.3;
|
|
}
|
|
.multiselect.multiselect-vue .multiselect__content-wrapper li > span.multiselect__option--selected::before, .multiselect.multiselect-vue .multiselect__content-wrapper li > span:not(.multiselect__option--disabled):hover::before {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Progressbar */
|
|
progress:not(.vue) {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0;
|
|
border: 0 none;
|
|
background-color: var(--color-background-dark);
|
|
border-radius: var(--border-radius);
|
|
flex-basis: 100%;
|
|
height: 5px;
|
|
overflow: hidden;
|
|
}
|
|
progress:not(.vue).warn::-moz-progress-bar {
|
|
background: var(--color-error);
|
|
}
|
|
progress:not(.vue).warn::-webkit-progress-value {
|
|
background: var(--color-error);
|
|
}
|
|
progress:not(.vue)::-webkit-progress-bar {
|
|
background: transparent;
|
|
}
|
|
progress:not(.vue)::-moz-progress-bar {
|
|
border-radius: var(--border-radius);
|
|
background: var(--color-primary);
|
|
transition: 250ms all ease-in-out;
|
|
}
|
|
progress:not(.vue)::-webkit-progress-value {
|
|
border-radius: var(--border-radius);
|
|
background: var(--color-primary);
|
|
transition: 250ms all ease-in-out;
|
|
}
|
|
|
|
/* Animation */
|
|
@keyframes shake {
|
|
10%, 90% {
|
|
transform: translate(-1px);
|
|
}
|
|
20%, 80% {
|
|
transform: translate(2px);
|
|
}
|
|
30%, 50%, 70% {
|
|
transform: translate(-4px);
|
|
}
|
|
40%, 60% {
|
|
transform: translate(4px);
|
|
}
|
|
}
|
|
.shake {
|
|
animation-name: shake;
|
|
animation-duration: 0.7s;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
label.infield {
|
|
position: absolute;
|
|
left: -10000px;
|
|
top: -10000px;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
::placeholder,
|
|
::-ms-input-placeholder,
|
|
::-webkit-input-placeholder {
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
/*# sourceMappingURL=inputs.css.map */
|