analytics/webcontent/bi/js/dashboard-analytics/lib/@waca/dashboard-common/dist/stylesheets/toolbar.scss

/**
* IBM Confidential
* OCO Source Materials
* IBM Business Platform: Dashboard
* (C) Copyright IBM Corp. 2018, 2020
* The source code for this program is not published or otherwise divested of its trade secrets,
* irrespective of what has been deposited with the U.S. Copyright Office
**/
@import "../lib/@ba-ui-toolkit/essentials/colors/colors";
.betaPopover {
	display: inline-block;
	@include theming(background-color, ui-01);
	@include theming(color, text-01);
	border-radius: 0;
	border: 1px solid;
	@include theming(border-color, ui-03);
	padding: 10px;
	max-width: 100%;
	z-index: 2060;
	.betaLink {
		@include theming(color, link-01);
		text-decoration: underline;
		cursor: pointer;
		padding: 0;
		display: inline;
	}
}

.actionToolbarPopover.text {
	margin-left: 0px;
	&[dir="rtl"] {
		margin-left: auto;
		margin-right: 0px;
	}
}

.actionToolbarPopover {
	display: inline-block;
	@include theming(background-color, ui-01);
	border-radius: 0;
	border: 1px solid;
	@include theming(border-color, ui-03);
	padding: 0;
	max-width: 100%;
	z-index: $popoverZIndex;
	.flyout-content-container {
		padding: 0;
	}
	.toolbar {
		padding: 0;
	}
	.toolbar.odtWidget {
		z-index: 1;
	}
	.separator {
		margin: 0 5px;
		border-top: 1px solid;
		@include theming(border-top-color, ui-03);
	}
	.labels {
		.labelsTitle {
			padding-bottom: 3px;
			margin: 5px 0;

			&.borderBottom {
				border-bottom: 1px solid;
				@include theming(border-top-color, ui-03);
			}
		}
		@include theming(color, text-02);
		padding: 5px 10px;
		font-size: $body-size-s;
		min-width:250px;
		.labelEntry {
			display: flex;
			margin-top: 5px;

			&.borderBottom {
				border-bottom: 1px solid;
				@include theming(border-bottom-color, ui-03);
				padding-bottom: 5px;
			}

			* {
				flex-grow: 1;
			}
			.labelName {
				font-weight: $fw-regular;
				font-style: normal;
				padding-right:10px;
			}
			.labelValue {
				font-weight: $fw-medium;
				font-style: normal;
				text-align: right;
				&[dir="rtl"] {
					text-align: left;
				}
			}
		}
	}
}

.actionToolbarPopover.vertical.popover {
	margin: 25px 0 0 0;
	.toolbar, .reactToolbar .ba-common-toolbar {
		flex-direction: column;
	}
}

.actionToolbarPopover.horizontal.popover {
	margin: -10px 0 0 35px;
	&[dir="rtl"] {
		margin: -10px 35px 0 0px;
	}
}

.actionToolbarPopover.popover {
	min-width: 0;
}

.actionToolbarPopover .popover-content {
	padding: 0;
	overflow: visible;
}

.actionToolbarPopover.bottom .arrow {
	@include theming(border-bottom-color, ui-03);
}

.actionToolbarPopover.top .arrow {
	@include theming(border-top-color, ui-03);
	margin-top: auto;
}

.actionToolbarPopover.left .arrow {
	@include theming(border-left-color, ui-03);
}

.actionToolbarPopover.right .arrow {
	@include theming(border-right-color, ui-03);
}

.actionToolbarPopover.bottom .arrow:after {
	@include theming(border-top-color, ui-01);
}

.actionToolbarPopover.top .arrow:after {
	@include theming(border-top-color, ui-01);
}

.actionToolbarPopover.left .arrow:after {
	@include theming(border-left-color, ui-01);
}

.actionToolbarPopover.right .arrow:after {
	@include theming(border-right-color, ui-01);
	left: 11px;
}

.reactToolbar {
	flex-grow: 1;
	.ba-common-toolbar {
		display: flex;
		.ba-common-toolbar__item {
			flex-grow: 1;
			min-width: 34px;
			min-height: 34px;
		}
	}
}

.toolbar {
	display: flex;
	padding: 0 0 1px 0;
	@include theming(background-color, ui-01);
	&.dockedToolbar {
		padding: 0;
		flex-wrap: wrap;
		.toolbarItem, .ba-common-toolbar__item {
			flex-grow: 0;
		}
		.ba-common-button.is-variant_frameless {
			padding: 0 12px;
			.ba-common-colorpicker__colorbar {
				left: 13px;
			}
		}
		> div {
			min-width: 40px;
			min-height: 40px;
			.ba-common-toolbar > div:not(:last-child) {
				border-right: 1px solid;
				@include theming(border-right-color, ui-01);
				min-width: 41px;
			}
		}
		.toolbarIcon {
			&.toolbarItem:not(:last-child) {
				border-right: 1px solid;
				@include theming(border-right-color, ui-01);
			}

			button {
				min-width: 40px !important;
				min-height: 40px !important;
			}
		}
	}
	.toolbarItem .ba-common-button.is-focus {
		outline: none;
	}
	.toolbarItem {
		flex: 1;
		margin: 0 0 0 0;

		&.toolbarItemToggled {
			> button > svg.svgIcon {
				@include theming(fill, icon-01);
			}
		}
		.toolbarButtonToggle {
			> svg.ba-common-svgIcon {
				@include theming(fill, icon-01);
			}
		}
		.selected {
			@include theming(background-color, selected-ui);
			@include theming(color, icon-01);
		}
		.disabled,
		.disabled:hover {
			cursor: auto;
			@include theming(color, icon-03);
		}
		button {
			outline: none;
			border: 1px solid transparent;

			&:focus {
				@include theming(border-color, focus);
			}
		}
		.ba-common-toolbar__item:hover {
			@include theming(background-color, hover-ui);
		}
	}
	>div {
		min-width: 34px;
		min-height: 34px;
		display: inline-block;
		cursor: default;
		transition: all 0.1s linear;
	}
	.toolbarIcon {
		.buttonWithText {
			svg {
				vertical-align: middle !important;
			}
			padding-right: 8px;
			padding-left: 8px;
			button, span {
				width: auto;
			}
			@include theming(color, text-01);
			font-weight: 400;

			.ba-common-button__label{
				padding-right: 8px; // overriding toolkit 24px padding
			}
		}

		button {
			outline: none;
			border: 1px solid transparent;
			background-color: transparent;
			min-width: 32px;
			min-height: 32px;
			line-height: 32px;
			@include theming(color, icon-02);
			position: relative;
			&[class^="wfg_"]:before,
			&[class*=" wfg_"]:before,
			>span[class^="webfont"]:before {
				font-size: $body-size;
			}
			>svg{
				vertical-align: middle !important;

				&.svgIcon {
					width: 16px;
					height: 16px;
					@include theming(fill, icon-01);
					.highcontrast & {
						@include theming(fill, icon-03);

						@media screen and (-ms-high-contrast:black-on-white) {
							@include theming(fill, icon-01);
						}
					}
				}
			}
		}
		button.iconWithText {
			&[class^="wfg_"]:before,
			&[class*=" wfg_"]:before,
			>span[class^="webfont"]:before {
				font-size: 18px;
				padding-right: 3px;
				&[dir="rtl"] {
					padding-right: 0px;
					padding-left: 3px;
				}
			}
			>svg.svgIcon {
				width: 18px;
				height: 18px;
			}
		}
		button:not([disabled]):hover {
			>svg.svgIcon {
				@include theming(fill, icon-01);
			}
		}
		button,
		span {
			display: inline-block;
			height: 100%;
			width: 100%;
			padding: 0;
		}
	}
	.dropDownContainer {
		padding: 0;
		border: none;
		cursor: default;
	}
}

// hide the canvas action button labels in smaller screen
@media only screen and (max-width: 1024px) {
	.toolbar .toolbarIcon {
		.buttonWithText {
			.ba-common-button__label{
				display: none;
			}
		}
	}
}

html.chrome.ios7 .toolbar .toolbarIcon>button {
	&[class^="wfg_"]:before,
	&[class*=" wfg_"]:before,
	>span[class^="webfont"]:before {
		margin-top: 6px;
	}
	&.iconWithText {
		&[class^="wfg_"]:before,
		&[class*=" wfg_"]:before,
		>span[class^="webfont"]:before {
			margin-top: 0;
		}
	}
}

.popoverDialogContainer {
	font-weight: $fw-regular;
	font-style: normal;
	@include theming(color, interactive-02);
	min-width: 200px;
}

.toolbarPopoverContent,
.popoverDialogContainer {
	h1.caption {
		line-height: 48px;
		height: 45px;
		overflow: hidden;
		cursor: default;
		text-align: center;
		margin: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		&.child:hover {
			@include theming(background-color, hover-ui);
			cursor: pointer;
		}
		.wfg_leftarrow {
			padding: 0 3px;
			margin: 0 -15px;
		}
	}
}

.nextView .viewCaption .wfg_leftarrow {
	float: left;
	&[dir="rtl"] {
		float: right;
	}
}

.popover-content {
	h1.caption {
		font-weight: $fw-regular;
		font-style: normal;
		font-size: $body-size-s;
		@include theming(color, text-02);
		padding: 0 20px;
		outline: 0;
		line-height: 48px;
		height: 45px;
		overflow: hidden;
		cursor: default;
		text-align: center;
		margin: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		&.child:hover {
			@include theming(background-color, hover-ui);
			cursor: pointer;
		}
		border-bottom: 1px solid;
		@include theming(border-bottom-color, ui-03);
	}
	.content {
		overflow-y: hidden;
		.selectionList {
			@include theming(color, text-02);
		}
		.selectItems {
			overflow-y: auto;
			overflow-x: hidden;
			text-align: left;
			max-height: 40vmin;
			min-width: 140px;
			&[dir="rtl"] {
				text-align: right;
			}
			.itemLoading,
			.itemNotAvailable,
			.itemRow {
				display: flex;
				flex-direction: row;
				width: 100%;
				cursor: pointer;
				line-height: 44px;
				padding-right: 14px;
				@include theming(color, text-02);
				&[dir="rtl"] {
					padding-right: 0px;
					padding-left: 14px;
				}
				border-bottom: 1px solid;
				@include theming(border-bottom-color, ui-03);
				&:first-child {
					border-top: none;
				}
				&.itemRowContent {
					border-bottom: none;
					padding-left: 14px;
					&[dir="rtl"] {
						padding-left: 0px;
						padding-right: 14px;
					}
				}
				&:hover {
					@include theming(background-color, ui-background);
				}
				.check {
					min-width: 52px;
					@include theming(color, interactive-01);
					// checkmark icon size
					font-size: 18px;
					text-align: center;
				}
				.text {
					text-align: left;
					white-space: nowrap;
					width: 100%;
					&[dir="rtl"] {
						text-align: right;
					}
				}
				.text.bold {
					font-weight: $fw-bold;
				}
				.itemLoading,
				.itemNotAvailable {
					padding: 10px 50px;
					cursor: default;
				}
			}
		}
	}
}

.toolbarPopoverContent .authoringToolbar .content {
	.multipleColumnNav {
		display: inline-flex;
		flex-direction: column;
		flex-wrap: nowrap;
		.itemRow {
			display: inline-flex;
			flex-direction: row;
			flex-wrap: nowrap;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			@include theming(border-bottom-color, ui-03);
			.text {
				line-height: 48px;
				height: 45px;
				width: 157px;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				display: inline-block;
				text-align: center;
				margin: 0;
				order: 1;
				border-bottom-width: 0px;
				cursor: pointer;
			}
			.rightArrow {
				order: 2;
				cursor: pointer;
				.wfg_rightarrow {
					@include theming(color, icon-01);
					float: right;
					-ms-transform: rotate(0deg);
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
					padding: 15px 8px 0px 8px;
				}
			}
		}
	}
}

.popover-content .staticNextViewCaption {
	text-align: left;
	padding-left: 8px;
	font-size: 14px;
	@include theming(color, text-02);
}

.toolbarPopoverContent .authoringToolbar .content>.filterGroupNav {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	min-width: 240px;
	.filterGroupColumn {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: auto;
		margin: 1px;
		order: 1;
		.text {
			line-height: 48px;
			height: 45px;
			overflow: hidden;
			text-align: center;
			margin: auto;
			white-space: nowrap;
			text-overflow: ellipsis;
			border-bottom-width: 0px;
			cursor: pointer;
		}
	}
	.filterGroupColumn:focus {
		@include theming(border-color, focus);
	}
}

.glass .toolbarIcon>button {
	&:disabled {
		cursor: auto;
		opacity: 0.5;
	}
}

.navigationBar {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	@include theming(border-bottom-color, ui-03);
	width: 100%;
	h1.caption {
		line-height: 48px;
		height: 45px;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		display: inline-block;
		cursor: default;
		text-align: center;
		margin: 0;
		text-overflow: ellipsis;
		order: 2;
		border-bottom-width: 0px;
	}
	.leftArrow {
		order: 1;
		.wfg_leftarrow {
			color: $blue50;
			float: left;
			padding: 15px 8px 0px 8px;
			padding-right: 12px !important;
			width: 7px;
			&[dir="rtl"] {
				padding-right: 0px !important;
				padding-left: 12px !important;
			}
		}
	}
	.leftArrow.disabled {
		opacity: 1;
		.wfg_leftarrow {
			@include theming(color, disabled-02);
		}
	}
	.rightArrow {
		order: 3;
		.wfg_rightarrow {
			color: $blue50;
			float: right;
			-ms-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
			padding: 15px 8px 0px 8px;
		}
	}
	.rightArrow.disabled {
		opacity: 1;
		.wfg_rightarrow {
			@include theming(color, disabled-02);
		}
	}
}

.toolbarTextPopoverContent {
	.toolbar {
		display: flex;
		flex-direction: column;
		padding: 0 0 1px 0;
		@include theming(background-color, ui-01);
		align-items: flex-start;
		.toolbarItem {
			flex: 1;
			width: 200px;
			height: 40px;
			text-overflow: ellipsis;
			margin: 0 0 0 0;
			>button {
				padding-left: 16px !important;
				padding-right: 16px !important;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				display: inline-block !important;
				text-align: left;
				&[dir="rtl"] {
					text-align: right;
				}
			}
			&:hover {
				@include theming(background-color, hover-ui);
				color: initial;
			}
			&:active {
				border-left: 4px solid;
				@include theming(border-left-color, interactive-01);
				&[dir="rtl"] {
					border-left: none;
					border-right: 4px solid;
					@include theming(border-right-color, interactive-01);
				}
			}
			&.deleteAction,
			&.deleteFilterAction {
				border-top: 1px solid;
				@include theming(border-top-color, ui-03);
			}
			&.selected {
				@include theming(background-color, ui-01);
				@include theming(background-color, interactive-01);
			}
			&.disabled,
			&.disabled:hover {
				cursor: auto;
				@include theming(color, disabled-02);
			}
		}
		>div {
			min-width: 34px;
			min-height: 34px;
			display: inline-block;
			cursor: default;
			transition: all 0.1s linear;
		}
		.toolbarIcon {
			>button {
				background-color: transparent;
				min-width: 32px;
				min-height: 32px;
				line-height: 32px;
				color: $grey60;
				&[class^="wfg_"]:before,
				&[class*=" wfg_"]:before,
				>span[class^="webfont"]:before {
					font-size: $body-size;
				}
				>svg.svgIcon {
					width: 16px;
					height: 16px;
					@include theming(fill, icon-01);
				}
			}
			>button.iconWithText {
				&[class^="wfg_"]:before,
				&[class*=" wfg_"]:before,
				>span[class^="webfont"]:before {
					font-size: 18px;
					padding-right: 3px;
					&[dir="rtl"] {
						padding-right: 0px;
						padding-left: 3px;
					}
				}
				>svg.svgIcon {
					width: 18px;
					height: 18px;
				}
			}
			&:not(.disabled):not(.selected)>button:not([disabled]):hover>svg.svgIcon {
				@include theming(fill, icon-01);
			}
			&:focus {
				@include theming(border-color, focus);
			}
			>button,
			>span {
				display: flex;
				height: 100%;
				width: 100%;
				padding: 0;
			}
		}
		.dropDownContainer {
			padding: 0;
			border: none;
			cursor: default;
		}
	}
}

html.chrome.ios7 .toolbar .toolbarIcon>button {
	&[class^="wfg_"]:before,
	&[class*=" wfg_"]:before,
	>span[class^="webfont"]:before {
		margin-top: 6px;
	}
	&.iconWithText {
		&[class^="wfg_"]:before,
		&[class*=" wfg_"]:before,
		>span[class^="webfont"]:before {
			margin-top: 0;
		}
	}
}

.actionToolbarPopover .labelsAsActionToolBar{
	padding-bottom: 5px;
}

.actionToolbarPopover .ba-common-link{
	padding: 5px 10px;
	margin: 5px 0;
}

.textToolbarContainer .ba-common-toolbar {
	margin: 0px;

	.ba-common-toolbar__item {
		margin-bottom: 0px;
	}
	.ba-common-button {
		&.is-focus:not(.is-disabled), &:focus:not(.is-disabled) {
			outline: 1px solid;
			@include theming(outline-color, ui-03);
		}
		&.is-variant_frame:not(.is-disabled).is-intent_selection {
			&:focus, &:focus.is-hover, &:focus:hover:not(.is-tap), &:active:not(.is-tap) {
				@include theming(outline-color, ui-03);
			}
		}
	}
}

.textOnlyToolBar, .reactToolbar .ba-common-toolbar.textOnlyToolBar {
	display: inline-block;
	vertical-align: middle;
}


.labels.textOnlyToolBar {
	border-right: 1px solid;
	@include theming(border-right-color, ui-03);
}