5etools-mirror-2.github.io/scss/includes/ui.scss

/*
Shared UI components
 */

@import "vars";

/* region Misc/Shared */
.ui__ {
	&btn-xxl-square {
		width: 110px;
		height: 110px;
	}

	&ipt-color {
		width: $w-ipt-number-2-digit;
		padding: 0;

		&::-webkit-color-swatch-wrapper {
			padding: 3px;
		}

		&::-webkit-color-swatch {
			border: 1px solid $rgb-border-grey;
		}
	}
}
/* endregion */

/* region List */
.ui-list__ {
	// TODO refactor all "list" class to use this:
	//  - add "relative" class to each as required
	//  - add "overflow-x-hidden" and "overflow-y-auto" classes
	//  - convert from ul to div
	&wrp {
		transform: translateZ(0);
		font-size: 11.2px;
	}

	&wrp-preview {
		background: $rgb-bg-orange;
		font-size: 90%;
		border-top-left-radius: 5px;
		margin-top: 1px;
		margin-bottom: 4px;
	}

	&btn-inline {
		cursor: pointer;
		color: $rgb-font--muted;

		&:hover {
			background: darken($rgb-shadow-grey, 20%);
			color: darken($rgb-font--muted, 25%);
		}
	}
}
/* endregion */

/* region Source overlay */
.ui-source__ {
	&row {
		margin-left: calc(-96px - 0.5rem);
	}

	&name {
		min-width: 96px;
		white-space: nowrap;
		text-align: right;
	}

	&divider {
		height: 1px;
		width: 30px;
		background: $rgb-border-grey;
		display: inline-block;
		margin: 0 3px;
	}
}
/* endregion */

/* region Modals */
.ui-modal__ {
	&body-active {
		overflow-y: hidden !important;
	}

	&row {
		margin-bottom: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: initial;
		min-height: 30px;

		&:first-of-type {
			margin-top: -1px;
		}

		&--cb {
			padding: 0 3px;
			border-radius: 3px;

			&:hover {
				background: $rgb-bg--alt;
			}
		}

		&--sel {
			padding: 0 3px;
		}

		> * {
			margin-right: 5px;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	&header {
		&--border {
			border-bottom: 1px solid $rgb-border-grey--trans;
		}

		&--fullscreen {
			@include shadow-2();
		}
	}

	&footer {
		border-top: 1px solid $rgb-border-grey--trans;

		&--fullscreen {
			@include shadow-2();
		}
	}

	&overlay {
		position: fixed;
		z-index: $z-modal-wrapper;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: $rgb-modal-overlay-grey;
	}

	&overlay-blind {
		background-color: white;
	}

	&inner {
		position: relative;
		z-index: $z-modal-inner;
		top: initial;
		left: initial;
		margin: 60px auto;
		padding: 5px 10px;
		height: 400px;
		float: none;
		min-width: 600px;
		max-height: 400px;
		min-height: 400px;
		font-size: 14px;
		background: $rgb-bg;
		border: 1px solid $rgb-border-grey;
		border-radius: 4px;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

		@media (max-width: 767px) {
			min-width: 0;
		}

		@media (min-width: 768px) {
			max-width: 750px;
		}

		@media (min-width: 992px) {
			max-width: 970px;
		}

		@media (min-width: 1200px) {
			max-width: 1170px;
		}

		&--no-min-height {
			min-height: 0;
			height: initial;
		}

		&--no-min-height {
			min-width: 0;
			width: initial;
		}

		&--uncap-height {
			max-height: calc(100% - 120px);
			height: initial;
		}

		&--uncap-width {
			max-width: calc(100% - 180px);
			width: initial;
		}

		&--max-width-640p {
			max-width: 640px;
		}

		&--mode-fullscreen {
			max-height: 0;
			height: 100vh;
			flex-shrink: 0;
			min-height: 100vh;
			border-radius: 0;
			box-shadow: none;
			border: 0;
		}
	}

	&scroller {
		height: 100%;
		width: 100%;
		min-height: 0;
		overflow-y: auto;
	}
}
/* endregion */

/* region Search */
.ui-search__ {
	&wrp-output {
		position: relative;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	&wrp-controls {
		width: 100%;
		display: flex;
		z-index: $z-search;

		&--in-tabs {
			margin-top: -1px;
		}
	}

	&wrp-results {
		position: relative;
		padding: 3px;
		transform: translateZ(0);
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		font-size: 11.2px;
	}

	&row {
		cursor: pointer;
		font-weight: bold;
		padding: 1px 2px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid $rgb-border-grey;

		&:hover {
			background: lightgrey;
		}

		&:focus {
			@include row-glow-active();
		}
	}

	&sel-category {
		border-radius: 0;
		max-width: 180px;
		flex-shrink: 0;
		border-right: 0;
	}

	&ipt-search {
		border-radius: 0;
		width: 100%;
	}

	&ipt-search-sub-ipt[type=radio] {
		display: inline-block;
		margin: 0 3px 0 0;
	}

	&ipt-search-sub-ipt-custom {
		max-width: 30px;
		border-radius: 0;
		border-left: 0;
		margin-right: -1px;
		border-right-color: #e0e0e0;
		border-left-color: #e0e0e0;
		padding-left: 0;

		/* TODO switch this field to a validated text-type input, instead of a number */
		&[type=number]::-webkit-inner-spin-button {
			margin: 0;
			/* stylelint-disable-next-line property-no-vendor-prefix */
			-webkit-appearance: none;
		}
	}

	&ipt-search-sub-wrp {
		flex-shrink: 0;
		margin-bottom: 0;
		padding: 5px;
		font-weight: normal;
		border: 1px solid $rgb-border-grey;
		height: 34px;
		border-left: 0;
	}

	&ipt-search-sub-lbl {
		display: flex;
		align-items: center;
		height: 100%;

		&:not(:last-child) {
			margin-right: 7px;
		}
	}

	&message {
		font-size: 1.4rem;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "Times New Roman", serif;
		font-variant: small-caps;
		font-weight: 500;
	}
}
/* endregion */

/* region Tabs */
.ui-tab__ {
	&btn-tab-head {
		display: inline-block;
		padding: 2px 4px 0;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
		cursor: pointer;
		user-select: none;
		border-bottom: 0;

		&.active {
			background-color: #e6e6e6;
			border-color: #adadad;
		}
	}

	&wrp-tab-body {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;

		&--border {
			padding: 3px 0;
		}

		&--background {
			background: $rgb-bg;
			border: 1px solid $rgb-border-grey--trans;
			border-top: 0;
			border-bottom-color: $rgb-border-grey--trans-muted;
		}
	}

	&wrp-tab-heads--border {
		border-bottom: 1px solid $rgb-border-grey;
	}
}

.ui-tab-side__ {
	$w-tab: 120px;
	$w-tab-mobile-ish: 33px;

	&disp-active-tab-name {
		margin-left: $w-tab + 6px;
		font-size: 28px;

		@media only screen and (max-width: $width-screen-lg) {
			margin-left: $w-tab-mobile-ish + 6px;
		}
	}

	&btn-tab {
		width: $w-tab;

		@media only screen and (max-width: $width-screen-lg) {
			width: 33px;
			height: 30px;
		}
	}

	&icon-tab {
		min-width: 15px;
		min-height: 12px;
	}

	&wrp-tab {
		background: $rgb-bg;
		border: 1px solid $rgb-border-grey--trans;
		border-bottom: 0;

		&--single {
			border: 0;
		}
	}
}
/* endregion */

/* region Proficiency */
.ui-prof__ {
	&btn-cycle {
		@include cb-custom();

		&[data-state="0"] {
			background: white;
		}

		&[data-state="1"] {
			background: $rgb-cb-grey;
			border-color: lighten($rgb-cb-grey, 15%);
		}

		&[data-state="2"] {
			background: $rgb-cb-grey;
			border-color: lighten($rgb-cb-grey, 15%);
			display: flex;
			line-height: 14px;
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			font-family: "Font Awesome 5 Pro";
			font-weight: 900;
			color: white;
			font-size: 12px;

			&::before {
				content: "\f005"; /* star */
			}
		}

		&[data-state="3"] {
			background: repeating-linear-gradient(135deg, white, white 10px, $rgb-cb-grey 10px, $rgb-cb-grey 20px);
			border-color: lighten($rgb-cb-grey, 15%);
		}
	}
}
/* endregion */

/* region Direction picker */
.ui-dir__ {
	&face {
		position: relative;
		width: 92px;
		height: 92px;
		border-radius: 46px;
		background: #f0f0f0;
		border: 1px solid $rgb-border-grey;
		user-select: none;
		cursor: grab;
	}

	&arm {
		width: 1px;
		height: 40px;
		background: #333;
		position: absolute;
		top: 46px;
		left: 46px;
		transform: rotate(180deg);
		transform-origin: top;
		pointer-events: none;
		user-select: none;
		box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.75);
	}
}
/* endregion */

/* region Icon picker */
.ui-icn__ {
	&wrp-icon {
		font-size: 24px;
	}
}
/* endregion */

/* region Drag to re-order */
.ui-drag__ {
	&wrp-drag-block {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	&wrp-drag-dummy--highlight {
		background: #cfe5ff78;
	}

	&wrp-drag-dummy--lowlight {
		background: transparent;
	}

	&patch {
		cursor: move;
		user-select: none;
		display: flex;
		flex-shrink: 0;
		padding: 5px 3px;
		width: 14px;
		font-size: 14px;
	}

	&dummy-patch {
		width: 14px;
	}

	&patch-col {
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
	}

	&patch-col > div {
		line-height: 4px;
		text-align: center;
	}
}
/* endregion */

/* region Hover tips */
.ui-tip__ {
	&parent {
		cursor: help;
		position: relative;
	}

	&child {
		@include shadow-1();

		display: none;
		position: absolute;
		border: 1px solid $rgb-border-grey;
		background: white;
		border-radius: 3px;
		z-index: 1;
		top: calc(100% + 5px);
		padding: 5px;
		opacity: 0;
		transition: opacity $time-5-frames ease-in-out;
		pointer-events: none;
	}

	&parent:hover .ui-tip__child {
		display: flex;
		opacity: 1;
	}
}
/* endregion */

/* region Context menu */
.ui-ctx {
	&__wrp {
		@include shadow-1--dark();

		z-index: $z-context-menu;
		font-size: 14px;
		background: $rgb-bg;
		border: 1px solid $rgb-border-grey--trans;
		border-top-color: $rgb-border-grey;
	}

	&__divider {
		height: 1px;
		width: 100%;
		background: $rgb-border-grey;
	}

	&__row {
		min-width: 160px;
	}

	&__btn {
		cursor: pointer;

		&:hover {
			background: $rgb-bg--alt;
		}

		&.disabled,
		&.disabled:hover {
			cursor: default;
			background: $rgb-bg;
		}
	}
}
/* endregion */

/* region Picker */
.ui-pick {
	&__ {
		&btn-add {
			font-weight: bold;
			padding: 1px 2px;
			// Even line heights look good on Chrome; precisely 8px looks good on Firefox.
			line-height: 8px;
			font-size: 18px;
			display: flex;
			height: 16px;

			&--sub {
				line-height: 11px;
				height: 14px;
				font-size: 16px;
				border-radius: 0;
				padding: 0 1px;
				font-weight: bold;
			}
		}

		&btn-remove {
			width: 10px;
			line-height: 20px;
			padding: 0;
			border-radius: 0;
			font-size: 12px;
			flex-shrink: 0;
			flex-grow: 0;
			cursor: pointer;
			font-style: initial;

			&--sub {
				height: 18px;
				line-height: 16px;
			}
		}

		&pill {
			align-items: stretch;
		}

		&disp-text {
			border: 1px solid $rgb-border-grey;
			border-right: 0;
		}
	}
}
/* endregion */

/* region Fontawesome Icons */
.fa {
	&--btn-sm {
		position: relative;
		top: 1px;
		font-size: 15px;
	}

	&--btn-xs {
		position: relative;
		font-size: 12px;

		&::before {
			width: 12px;
			height: 14px;
			display: inline-block;
			text-align: center;
		}

		/* Specific adjustments for certain icons */
		&.fa-dice {
			left: -2px;
		}
	}
}
/* endregion */

/* region "Copied" tooltip */
.clp__ {
	&wrp-temp {
		position: fixed;
		top: -10000px;
		left: -10000px;
		width: 1px;
		height: 1px;
	}

	&disp-copied {
		position: fixed;
		white-space: nowrap;
		width: auto;
		transform: translateX(-50%);
		pointer-events: none;
		user-select: none;
		height: 24px;
		font-size: 12px;
		z-index: $z-temp-effect;
		background: radial-gradient(ellipse at center, $rgb-bg 0%, $rgb-bg 35%, transparent 75%, transparent 100%);
	}
}
/* endregion */

/* region Decorated inputs */
.ui-ideco__ {
	&ipt {
		&--left {
			padding-left: 22px !important;
		}

		&--right {
			padding-right: 22px !important;
		}
	}

	&wrp {
		position: absolute;
		top: 0;
		bottom: 0;
		opacity: 0.5;
		justify-content: center;

		> .glyphicon {
			top: 0;
		}

		&--left {
			left: 5px;
		}

		&--right {
			right: 5px;
		}
	}

	&btn-ticker {
		transition: opacity $time-2-frames;
		opacity: 0;

		padding: 0;
		width: 14px;
		height: 10px;
		border: 0;
		font-size: 14px;
		line-height: 10px;
		border-radius: 0;

		background: #0003;
		color: $rgb-off-black;

		&:hover,
		&:active,
		&:focus,
		&:active:focus {
			box-shadow: none;
			outline: none;
		}

		&:hover {
			background: #0005;
			color: $rgb-off-black;
		}

		&:active,
		&:focus,
		&:active:focus {
			background: #0007;
			color: $rgb-off-black;
		}
	}

	&ipt:hover + .ui-ideco__wrp .ui-ideco__btn-ticker,
	&wrp:hover .ui-ideco__btn-ticker {
		transition: opacity $time-2-frames;
		opacity: 1;
	}
}
/* endregion */

/* region Select2 */
.ui-sel2__ {
	&ipt-search {
		top: 0;
		right: 0;
		left: 0;
		opacity: 0;
		background: transparent;
	}

	&ipt-display {
		padding-right: 20px;
	}

	&wrp {
		&:focus,
		&:focus-within {
			> .ui-sel2__ipt-search {
				opacity: 1;
			}

			> .ui-sel2__ipt-display {
				text-align: right;
				color: $rgb-font--muted;
				font-weight: bold;
			}

			> .ui-sel2__wrp-options {
				display: flex;
			}
		}
	}

	&wrp-options {
		z-index: 1;
		top: 22px;
		right: 0;
		left: 0;
		display: none;
		flex-direction: column;
		background: $rgb-bg;
		border: 1px solid $rgb-border-grey;
		border-top: 0;
		max-height: 200px;

		&:hover,
		&:active,
		&:focus,
		&:focus-within {
			display: flex;
		}
	}

	&disp-option {
		&.active,
		&:focus,
		&:hover {
			background: $rgb-bg--alt;
		}

		&:focus.active,
		&:hover.active {
			background: darken($rgb-bg--alt, $pct-darken-active);
		}
	}

	&disp-arrow {
		top: 4px;
		right: 4px;
		bottom: 0;
		font-size: 12px;
	}
}
/* endregion */

/* region Range Slider */
.ui-slidr {
	&__ {
		$sz-top-row-pad: 6px;

		&wrp {
			font-size: 14px;
		}

		&wrp-top {
			// (Nothing yet)
		}

		&thumb {
			width: 14px;
			height: 18px;
			top: -5px;
			background: $rgb-bg--alt;
			border: 1px solid $rgb-border-grey;
			border-radius: 2px;

			&--hover,
			&:hover {
				background: darken($rgb-bg--alt, 10%);
				border-color: darken($rgb-border-grey, 10%);
			}
		}

		&wrp-track {
			padding-top: $sz-top-row-pad;
			padding-bottom: 7px;
		}

		&track-outer {
			border: 1px solid $rgb-border-grey;
			height: 10px;
			border-radius: 3px;
		}

		&track-inner {
			background: $rgb-border-grey--muted;
		}

		&disp-value {
			width: 80px;
			height: 26px;
			border-radius: 4px;

			&--visible {
				border: 1px solid $rgb-border-grey;
				background: $rgb-bg;
			}

			&--left {
				margin-right: 15px;
			}

			&--right {
				margin-left: 15px;
			}
		}

		&wrp-bottom {
			height: 3em; // Padded so our `absolute` elements have space
		}

		&wrp-pips {
			padding-top: 6px;
		}

		&pip {
			width: 1px;
			height: 4px;
			background: $rgb-border-grey;

			&--major {
				height: 6px;
				background: darken($rgb-border-grey, 15%);
			}
		}

		&pip-label {
			top: 0;
			width: 24px;
			height: 20px;
			padding-top: 20px;
		}
	}
}
/* endregion */