patra-timer
v7.0.0
Published
#app { display: flex; position: relative; width: 100%; min-height: 100vh; justify-content: center; align-items: center; background-color: #FBAB7E; background-image: linear-gradient(62deg,
Downloads
14
Readme
Include CSS in index.css file
#app { display: flex; position: relative; width: 100%; min-height: 100vh; justify-content: center; align-items: center; background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); }
header
{
display: flex;
position: relative;
}
h1
{
font-family: 'Droid Sans Mono', monospace;
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 0.1em;
color: white;
}
.flipClock
{
display: flex;
justify-content: space-between;
width: 142px;
}
.flipUnitContainer
{
display: block;
position: relative;
width: 42px;
height: 35px;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
-webkit-perspective: 300px;
perspective: 300px;
background-color: white;
border-radius: 3px;
box-shadow: 0px 10px 10px -10px grey;
}
.upperCard, .lowerCard{
display: flex;
position: relative;
justify-content: center;
width: 100%;
height: 50%;
overflow: hidden;
border: 1px solid whitesmoke;
}
.upperCard span {
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
.lowerCard span {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.lowerCard span, .upperCard span{
font-size: 1em;
font-family: 'Droid Sans Mono', monospace;
font-weight: bold;
color: #333333;
}
.upperCard{
align-items: flex-end;
border-bottom: 0.5px solid whitesmoke;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.lowerCard
{
align-items: flex-start;
border-top: 0.5px solid whitesmoke;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.flipCard{
display: flex;
justify-content: center;
position: absolute;
left: 0;
width: 100%;
height: 50%;
overflow: hidden;
backface-visibility: hidden;
}
.flipCard.unfold {
top: 50%;
align-items: flex-start;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
background-color: white;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border: 0.5px solid whitesmoke;
border-top: 0.5px solid whitesmoke;
}
.unfold {
-webkit-animation: unfold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
animation: unfold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flipCard.unfold span {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.flipCard span {
font-family: "Droid Sans Mono", monospace;
font-size: 1em;
font-weight: bold;
color: #333333;
}
.flipCard.fold {
top: 0%;
align-items: flex-end;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
background-color: white;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 0.5px solid whitesmoke;
border-bottom: 0.5px solid whitesmoke;
}
.fold {
-webkit-animation: fold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
animation: fold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flipCard.fold span {
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
@keyframes fold
{0%{
transform: rotateX(0deg)
}
100%{
transform: rotateX(-180deg)
}
}
@keyframes unfold
{0%{
transform: rotateX(180deg)
}
100%{
transform: rotateX(0deg)
}
}
Required Dependencies
$ npm install antd
Also include the following statement in index.tsx file.
import 'antd/dist/antd.css';