nextcloud/core/css/inputs.scss

/**
 * @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
 *
 */

 /* 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,
input,
textarea,
div[contenteditable=true],
div[contenteditable=false] {
	width: 130px;
	min-height: 32px;
	box-sizing: border-box;
}

/**
 * color-text-lighter		normal state
 * color-text-lighter		active state
 * color-text-maxcontrast 	disabled state
 */


/* Default global values */
select,
button, .button,
input:not([type='range']),
textarea,
div[contenteditable=true],
.pager li a {
	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-border-dark);
	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;
		}
		&:active {
			outline: none;
			background-color: var(--color-main-background);
			color: var(--color-text-light);
		}
	}
	&:disabled {
		background-color: var(--color-background-dark);
		color: var(--color-text-maxcontrast);
		cursor: default;
		opacity: 0.5;
	}
	&: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);
		border: 1px solid var(--color-primary-text);
		color: var(--color-primary-text);
		cursor: pointer;
		&:not(:disabled) {
			&:hover,
			&:focus,
			&:active  {
				background-color: var(--color-primary-element-light)
			}
			&:active {
				color: var(--color-primary-text-dark);
			}
		}
		&:disabled {
			// opacity is already defined to .5 if disabled
			background-color: var(--color-primary-element);
			color: var(--color-primary-text-dark);
		}
	}
}

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);
	cursor: text;

	background-color: var(--color-background-dark);
	color: var(--color-text-lighter);
	cursor: default;
	opacity: 0.5;
}

/* Specific override */
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;
	}
	&[type='radio'],
	&[type='checkbox'],
	&[type='file'],
	&[type='image'] {
		height: auto;
		width: auto;
	}
	/* Color input doesn't respect the initial height
 so we need to set a custom one */
	&[type='color'] {
		margin: 3px;
		padding: 0 2px;
		min-height: 30px;
		width: 40px;
		cursor: pointer;
	}
	&[type='hidden'] {
		height: 0;
		width: 0;
	}
	&[type='time'] {
		width: initial;
	}
}

/* 'Click' inputs */
select,
button, .button,
input[type='button'],
input[type='submit'],
input[type='reset'] {
	padding: 6px 12px;
	width: auto;
	min-height: 34px;
	cursor: pointer;
	box-sizing: border-box;
	background-color: var(--color-background-dark);
}

/* Buttons */
button, .button,
input[type='button'],
input[type='submit'],
input[type='reset'] {
	font-weight: bold;
	/* Get rid of the ugly firefox dotted line */
	&::-moz-focus-inner {
		border: 0;
	}
}
button, .button {
	> span {
		/* icon position inside buttons */
		&[class^='icon-'],
		&[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;
	&: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);
	cursor: text;
	font-family: inherit;
	height: auto;
}

/* Override the ugly select arrow */
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url('../img/actions/triangle-s.svg') no-repeat right 4px center;
	background-color: inherit;
	outline: 0;
	padding-right: 24px !important;
}

/* 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;
			width: 34px;
			padding: 7px 6px;
			cursor: pointer;
			&:disabled {
				cursor: default;
				@include icon-color('confirm-fade', 'actions', $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);
				}
			}
			+ .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;
					}
				}
			}
		}
		&:active,
		&:hover,
		&: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: 400;
}

/* Radio & Checkboxes */
input, label {
	--color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
	--color-checkbox-radio-border: nc-darken($color-main-background, 47%);
}
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: 12px;
				width: 12px;
				vertical-align: middle;
				border-radius: 50%;
				margin: 3px;
				margin-top: 1px;
				border: 1px solid var(--color-checkbox-radio-border);
			}
			&:not(:disabled):not(:checked) + label:hover:before,
			&:focus + label:before {
				border-color: var(--color-primary-element);
			}
			&: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-checkbox-radio-border);
				background-color: var(--color-checkbox-radio-disabled) !important; /* override other status */
			}
			&:checked:disabled + label:before {
				background-color: var(--color-checkbox-radio-disabled);
			}
		}
		&.checkbox {
			+ label:before {
				border-radius: 1px;
				height: 10px;
				width: 10px;
				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 */
		$color-checkbox-radio-white: #fff;
		&.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%);
			}
		}
		&.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 */
			}
		}
	}
}

/* Select2 overriding. Merged to core with vendor stylesheet */
.select2-drop {
	margin-top: -2px;
	background-color: var(--color-main-background);
	&.select2-drop-active {
		border-color: var(--color-border-dark);
	}
	.avatar {
		display: inline-block;
		margin-right: 8px;
		vertical-align: middle;
		img {
			cursor: pointer;
		}
	}
	.select2-search input {
		min-height: auto;
		background: url('../img/actions/search.svg') no-repeat right center !important;
		background-origin: content-box !important;
	}
	.select2-results {
		max-height: 250px;
		margin: 0;
		padding: 0;
		.select2-result-label {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			span {
				cursor: pointer;
			}
		}
		.select2-result,
		.select2-no-results,
		.select2-searching {
			position: relative;
			display: list-item;
			padding: 12px;
			background-color: transparent;
			cursor: pointer;
			color: var(--color-text-lighter);
		}
		.select2-result {
			&.select2-selected {
				background-color: var(--color-background-dark);
			}
		}
		.select2-highlighted {
				background-color: var(--color-background-dark);
				color: var(--color-main-text);
		}
	}
}
.select2-chosen,
#select2-drop {
	.avatar,
	.avatar img {
		cursor: pointer;
	}
}
.select2-container-multi {
	.select2-choices,
	&.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;
		.select2-search-choice {
			line-height: 20px;
			padding-left: 5px;
			&.select2-search-choice-focus,
			&:hover,
			&:active,
			& {
				background-image: none;
				background-color: var(--color-main-background);
				color: var(--color-text-lighter);
				border: 1px solid var(--color-border-dark);
			}
			.select2-search-choice-close {
				display: none;
			}
		}
		.select2-search-field input {
			line-height: 20px;
			&.select2-active {
				background: none !important;
			}
		}
	}
}
.select2-container {
	margin: 3px 3px 3px 0;
	&.select2-container-multi .select2-choices {
		display: flex;
		flex-wrap: wrap;
		li {
			float: none;
		}
	}
	.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;
		.select2-search-choice {
			line-height: 20px;
			padding-left: 5px;
			background-image: none;
			background-color: var(--color-background-dark);
			border-color: var(--color-background-dark);
			.select2-search-choice-close {
				display: none;
			}
			&.select2-search-choice-focus,
			&:hover {
				background-color: var(--color-border);
				border-color: var(--color-border);
			}
		}
		.select2-arrow {
			background: none;
			border-radius: 0;
			border: none;
			b {
				background: url('../img/actions/triangle-s.svg') no-repeat center !important;
				opacity: .5;
			}
		}
		&:hover .select2-arrow b,
		&:focus .select2-arrow b,
		&:active .select2-arrow b {
			opacity: .7;
		}
		.select2-search-field input {
			line-height: 20px;
		}
	}
}

/* Vue v-select */
.v-select {
	margin: 3px 3px 3px 0;
	display: inline-block;
	.dropdown-toggle {
		display: flex !important;
		flex-wrap: wrap;
		.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;
			.close {
				margin-left: 3px;
			}
		}
	}
	.dropdown-menu {
		padding: 0;
		li {
			padding: 5px;
			position: relative;
			display: list-item;
			background-color: transparent;
			cursor: pointer;
			color: var(--color-text-lighter);
			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;
				&::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: 0.5;
					margin-right: 5px;
					visibility: hidden;
				}
			}
			&.highlight {
				color: var(--color-main-text);
			}
			&.active > a {
				background-color: var(--color-background-dark);
				color: var(--color-main-text);
				&::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);
	&.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: 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
			   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: 3px;
				/* 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;
		}
		/* 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: 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 +
				 * 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);
				}
				&:not(.multiselect__option--disabled):hover::before {
					opacity: .3;
				}
				&.multiselect__option--selected,
				&:not(.multiselect__option--disabled):hover {
					&::before {
						visibility: visible;
					}
				}
			}
		}
	}
}

/* Progressbar */
progress {
	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;
	&.warn {
		&::-moz-progress-bar {
			background: var(--color-error);
		}
		&::-webkit-progress-value {
			background: var(--color-error);
		}
	}
	&::-webkit-progress-bar {
		background: transparent;
	}
	&::-moz-progress-bar {
		border-radius: var(--border-radius);
		background: var(--color-primary);
		transition: 250ms all ease-in-out;
	}
	&::-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: .7s;
	animation-timing-function: ease-out;
}