Your IP : 216.73.216.86

Current Path : /var/www/homesaver/www/bitrix/js/landing/ui/field/color/src/control/opacity/css/
Upload File :
Current File : /var/www/homesaver/www/bitrix/js/landing/ui/field/color/src/control/opacity/css/opacity.css

.landing-ui-field-color-opacity {
	background: url('images/opacity.png') left top repeat;
	background-size: 8px;
	position: relative;
	width: 100%;
	height: 40px;
	margin-top: 4px;
	margin-bottom: 10px;
	border-radius: 2px;
}

/*opacity border not work with gradient - need hack*/
.landing-ui-field-color-opacity::before
{
	content: '';
	display: block;
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -1px;
	right: -1px;
	box-shadow: 0 0 4px rgba(128, 128, 128, .1);
	border: 1px solid rgba(0, 0, 0, .05);
}

/*to can click on picker circle*/
.landing-ui-field-color-opacity::after {
	content: '';
	height: 10px;
	display: block;
}

.landing-ui-field-color-opacity-color {
	width: 100%;
	height: 100%;
	border-radius: 2px;
}

.landing-ui-field-color-opacity-picker {
	position: absolute;
	width: 4px;
	top: -2px;
	margin-left: -2px;
	bottom: -2px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 2px;
	background-color: rgba(82, 92, 105, .22);
	cursor: pointer;
}

.landing-ui-field-color-opacity-picker-item {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	left: -8px;
	bottom: -7px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .19);
}

.landing-ui-field-color-opacity-picker-item-circle {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #2fc6f6;
}

.landing-ui-field-color-draggable {
	user-select: none;
}

.landing-ui-field-color-draggable .landing-ui-field-color-opacity {
	cursor: pointer;
}

.landing-ui-field-color-draggable .landing-ui-field-color-opacity-picker {
	pointer-events: none;
}

.landing-ui-field-color-opacity-container {
	display: flex;
}

.landing-ui-field-color-opacity-container .landing-ui-field-range-output {
	align-items: center;
}

.landing-ui-field-color-opacity-range-output {
	display: flex;
	width: 89px;
	padding-left: 10px;
}

.landing-ui-field-color-opacity-range-output-input {
	font-family: var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	font-size: 15px;
	text-align: center;
	color: #000000;
	width: 49px;
	height: 39px;
	line-height: 37px;
	margin-right: 13px;
	box-sizing: border-box;
	border-bottom: 1px rgba(198, 205, 211, .4) solid;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.landing-ui-field-color-opacity-range-output-arrows {
	display: flex;
	flex-direction: column;
	width: 27px;
	height: 39px;
	border-radius: 2px;
	border: 1px #C6CDD3 solid;
}

.landing-ui-field-color-opacity-range-output-arrows-up,
.landing-ui-field-color-opacity-range-output-arrows-down {
	position: relative;
	height: 49%;
	box-sizing: border-box;
	cursor: pointer;
	transition: all 200ms ease;
}

.landing-ui-field-color-opacity-range-output-arrows-up:hover {
	box-shadow: 0 -1px 5px 0 rgba(0,0,0,0.35);
}

.landing-ui-field-color-opacity-range-output-arrows-up:active {
	box-shadow: 0 -1px 1px 0 rgba(0,0,0,0.35);
}

.landing-ui-field-color-opacity-range-output-arrows-down:hover {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.35);
}

.landing-ui-field-color-opacity-range-output-arrows-down:active {
	box-shadow: 0 2px 1px 0 rgba(0,0,0,0.35);
}

.landing-ui-field-color-opacity-range-output-arrows-up::before,
.landing-ui-field-color-opacity-range-output-arrows-down::before {
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	left: 50%;
	top: 56%;
	transform: translate3d(-50%, -50%, 0) rotate(-45deg);
	transform-origin: center center;
	border-top: 2px #535C69 solid;
	border-right: 2px #535C69 solid;
	opacity: .8;
	transition: opacity 200ms ease;
	pointer-events: none;
}

.landing-ui-field-color-opacity-range-output-arrows-down {
	border-top: 1px #C6CDD3 solid;
	height: 50%;
}

.landing-ui-field-color-opacity-range-output-arrows-down::before {
	transform: translate3d(-50%, -50%, 0) rotate(135deg);
	top: 47%;
}

.landing-ui-field-color-opacity-range-output-arrows-up:hover::before,
.landing-ui-field-color-opacity-range-output-arrows-down:hover::before {
	opacity: 1;
}