Your IP : 3.135.209.20

Current Path : /var/www/u0635749/data/www/hobbyclick.ru/hobbyclick.ru/www/bitrix/js/ui/counter/
Upload File :
Current File : /var/www/u0635749/data/www/hobbyclick.ru/hobbyclick.ru/www/bitrix/js/ui/counter/ui.counter.css

:root {
	/*size*/
	--ui-counter-current-size: 16px;
	--ui-counter-size-md: 16px;
	--ui-counter-size-lg: 19px;
	/*color*/
	--ui-counter-current-bg-color: #F54819;
	--ui-counter-bg-color-gray: #A8ADB4;
	--ui-counter-bg-color-success: #9DCF00;
	--ui-counter-bg-color-primary: #2FC6F6;
	--ui-counter-bg-color-danger: #F54819;
	--ui-counter-bg-color-light: #fff;
	--ui-counter-bg-color-dark: rgba(255,255,255,.19);
}

/*region Base style*/
.ui-counter {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border-radius: calc(var(--ui-counter-current-size) / 2);
	background-color: var(--ui-counter-current-bg-color);
	overflow: hidden;
	position: relative;
	height: var(--ui-counter-current-size);
}

.ui-counter-inner {
	text-align: center;
	position: relative;
	color: #fff;
	vertical-align: middle;
	min-width: 21px;
	box-sizing: border-box;
	padding: 0 7px;
	font: bold 11px/var(--ui-counter-current-size) "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*endregion*/

/*region Counter colors*/
.ui-counter-gray { --ui-counter-current-bg-color: var(--ui-counter-bg-color-gray); }

.ui-counter-primary { --ui-counter-current-bg-color: var(--ui-counter-bg-color-primary); }

.ui-counter-danger { --ui-counter-current-bg-color: var(--ui-counter-bg-color-danger); }

.ui-counter-success { --ui-counter-current-bg-color: var(--ui-counter-bg-color-success); }

.ui-counter-light {
	box-shadow: inset 0 0 0 1px rgba(168, 173, 180, .5);
	--ui-counter-current-bg-color: var(--ui-counter-bg-color-light);
}

.ui-counter-light .ui-counter-inner { color: #535C69 !important; }

.ui-counter-dark {
	--ui-counter-current-bg-color: var(--ui-counter-bg-color-dark);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.21) ;
}

/*endregion*/

/*region Counter size*/
.ui-counter-md { --ui-counter-current-size: var(--ui-counter-size-md) }

.ui-counter-lg { --ui-counter-current-size: var(--ui-counter-size-lg) }

/*endregion*/

/*region Chacnge value*/
.ui-counter-plus,
.ui-counter-minus {
	animation-duration: 500ms;
	animation-iteration-count: 1;
}

.ui-counter-plus { animation-name: uiCounterPlus; }

.ui-counter-minus { animation-name: uiCounterMinus; }

@keyframes uiCounterPlus {
	0%,100% {
		top: 0;
		opacity: 1;
	}
	45% { top: var(--ui-counter-current-size); opacity: 1;}
	50% { opacity: 0;}
	55% { top: calc(var(--ui-counter-current-size) * -1); opacity: 1;}
}

@keyframes uiCounterMinus {
	0%,100% {
		top: 0;
		opacity: 1;
	}
	45% { top: calc(var(--ui-counter-current-size) * -1); opacity: 1;}
	50% { opacity: 0;}
	55% { top: var(--ui-counter-current-size); opacity: 1;}
}

/*endregion*/