Your IP : 172.71.254.228
: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*/