@nomios/web-uikit
Version:
Nomios' living web UIKit
70 lines (59 loc) • 2.04 kB
CSS
/* ==========================================================================
Fonts
========================================================================== */
/* ==========================================================================
All typography variants
$unit - Either em or rem
========================================================================== */
/*
Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/
.display-wrapper {
position: relative;
margin-bottom: 1rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: rgba(75, 69, 61, 0.7);
font-variant-numeric: lining-nums;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.display-wrapper .counter-wrapper {
position: relative;
width: 9.4rem;
display: flex;
direction: row
}
.display-wrapper .counter-wrapper .digits-display {
font-family: "GtSectra", serif;
font-weight: 400;
font-size: 8rem;
line-height: calc(9.00001em / 8);
letter-spacing: calc(-0.06em / 8);
width: 4.7rem;
height: 9rem;
overflow: hidden
}
.display-wrapper .counter-wrapper .digits-display .digit-wrapper {
transform: translateY(0);
display: flex;
flex-direction: column;
transition: transform 0.4s ease-in-out
}
.display-wrapper .counter-wrapper .digits-display .digit-wrapper.ten {
align-items: flex-end;
}
.display-wrapper .counter-wrapper .digits-display .digit-wrapper.one {
align-items: flex-start;
}
.display-wrapper .counter-wrapper .minutes {
position: absolute;
right: 0;
bottom: 1rem;
margin: 0;
transform: translateX(100%);
}