c1-cms/styles/default/buttons.less

Contains React components distributed with C1 CMS.

/* see "toolbars.css" for styles shared with toolbarbutton */
/** NOTICE SHARED LAYOUT! */
ui|toolbarbutton,
ui|clickbutton,
ui|radiobutton,
ui|checkbutton,
ui|toolbarlabel {
	display: block;
	position: relative;
	float: left;
	margin: 2px;
}

// == ClickButton (usage: In dialogs )
ui|clickbutton {
	padding: 0;
	margin: 2px 6px; // margin at top and bottom should have some value, so buttons look ok when wraps

	ui|labelbox {
		float: none;
		overflow: hidden;
		padding: 6px 15px;
		border-radius: @btn-border-radius;
		border: solid 1px @btn-border-color;
		color: @btn-color;
		background-color: @btn-bg-color;
		text-transform: uppercase;
	}


	&.active {
		ui|labelbox {
			border-color: @btn-border-color;
			background-color: @btn-bg-color;
			background-image: @btn-bg-image;
			color: @btn-color;
		}
	}

	&.focused, &.primary {
		ui|labelbox {
			border-color: @btn-primary-border-color;
			background-color: @btn-primary-bg-color;
			background-image: @btn-primary-bg-image;
			color: @btn-primary-color;
		}
	}

	&.hover {
		ui|labelbox {
			border-color: @btn-hover-border-color;
			background-color: @btn-hover-bg-color;
			background-image: none;
			color: @btn-hover-color;
		}

		&.focused, &.primary {
			ui|labelbox {
				border-color: darken(@btn-primary-border-color, 5%);
				background-color: @btn-primary-bg-color;
				background-image: @btn-primary-bg-image;
				color: @btn-primary-color;
			}
		}
	}

	&.simple-icon, &.simple-text { // usage: in table reports, for example SEO
		ui|labelbox {
			border: none;
			padding: 5px;
			background: none;
			color: #575757;
			text-transform: none;
		}

		&.hover {
			ui|labelbox {
				color: @primary-color;
			}
		}
	}
}


//== ToolbarButton
ui|toolbarbutton {
	border-radius: 4px;
	text-transform: uppercase;
	border: 1px solid @btn-toolbar-border-color;
	border-radius: @btn-border-radius;
	background: @btn-toolbar-bg-color;
	color: @btn-toolbar-color;
	margin: 2px 10px 2px 0;
	box-shadow: 0 2px 2px -2px #ddd;

	ui|labelbody {
		height: 18px;
		line-height: 18px;
	}

	ui|labelbox {
		padding: 6px 11px;
	}

	&.btn-group-left {
		margin-right: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;

		&.hover {
			border-right: 1px solid @btn-toolbar-border-color !important;
		}
	}

	&.btn-group-right {
		margin-left: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-left: 0;
	}


	&.combobutton {
		ui|combobox {
			border-left: 1px solid transparent;
			margin: 0;
			display: block;
			float: left;
			line-height: 30px;
			font-size: 9px;
			padding: 0 10px;
			.user-select(none);
			position: relative;
			color: transparent;
			width: 28px;
			height: 30px;

			&:before, &:after {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				border-style: solid;
			}

			&:before {
				top: 12px;
				right: 10px;
				border-width: 5px 5px 0 5px;
				border-color: @btn-hover-border-color transparent transparent transparent;
			}

			&:after {
				top: 12px;
				right: 11px;
				border-width: 4px 4px 0 4px;
				border-color: @btn-hover-bg-color transparent transparent transparent;
			}
		}

		&[ischecked='true'] {
			ui|combobox {
				&:before {
					top: 11px;
					right: 10px;
					border-width: 0 5px 5px 5px;
					border-color: transparent transparent @gray-color transparent;

				}

				&:after {
					top: 12px;
					right: 11px;
					border-width: 0 4px 4px 4px;
					border-color: transparent transparent @btn-hover-bg-color transparent;
				}
			}
		}
	}

	&.hover, &.active, &[ischecked='true'] {
		border-color: @btn-toolbar-hover-border-color;
	}

	&.hover, &.active {
		background-color: @btn-toolbar-hover-bg-color;
		color: @btn-hover-color;
	}

	&.tabbutton { //== usage: "More Tabs" buttons when browser width is small
		position: absolute;
		margin-top: 1px;
		z-index: 400;
		display: none;
		background-color: transparent;
		margin: 0;
		padding: 0;

		ui|labelbox {
			padding: 8px 10px;
			font-weight: bold;

			.arrow {
				font-size: 120%;
				font-family: "Courier New", monospace;
				position: relative;
				top: -1px;
				left: 2px;
			}
		}
	}
}


ui|toolbargroup.last {
	ui|toolbarbutton:last-child {
		margin-right: 0;
	}
}