|
/*Meyer reset.css with some modifications*/ |
|
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;box-sizing:border-box;position:relative;outline:0;font-size:100%;vertical-align:baseline;background:transparent} |
|
|
|
/*Generic animation keyframes*/ |
|
@keyframes ease-out-scale { |
|
0% { |
|
opacity: 0; |
|
transform: scale(0); |
|
z-index: 11 |
|
} |
|
100% { |
|
opacity: 1; |
|
transform: scale(1); |
|
z-index: 11 |
|
} |
|
} |
|
@keyframes slide-in-left { |
|
0% { |
|
opacity: 0; |
|
transform: translate(40%, 0); |
|
z-index: 11 |
|
} |
|
100% { |
|
opacity: 1; |
|
transform: translate(0, 0); |
|
z-index: 11 |
|
} |
|
} |
|
@keyframes slide-in-right { |
|
0% { |
|
opacity: 0; |
|
transform: translate(-40%, 0); |
|
z-index: 11 |
|
} |
|
100% { |
|
opacity: 1; |
|
transform: translate(0, 0); |
|
z-index: 11 |
|
} |
|
} |
|
|
|
body, |
|
html, |
|
.page { |
|
background: url(http://www.bradysammons.com/codepen/darkui/noise.png); |
|
height: 100%; |
|
width: 100% |
|
} |
|
body { |
|
color: #757575; |
|
font: 14px/1 "Roboto", sans-serif; |
|
text-align: center; |
|
text-rendering: optimizeLegibility; |
|
-webkit-font-smoothing: antialiased |
|
} |
|
|
|
/*Timepicker: utility rules*/ |
|
.tp-hide { |
|
display: none |
|
} |
|
|
|
/*Timepicker: page content*/ |
|
.page .page-container { |
|
margin: 0 auto; |
|
padding: 2%; |
|
width: 96% |
|
} |
|
/*Timepicker: Root widget*/ |
|
.page .widget { |
|
background: #373738; |
|
box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 15px 18px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3); |
|
border-radius: 10px; |
|
height: 450px; |
|
margin: inherit; |
|
width: 460px |
|
} |
|
.widget--tp .tp-wrap { |
|
width: 100% |
|
} |
|
/*Timepicker: widget footer*/ |
|
.widget--tp .tp-footer{ |
|
background: #373738; |
|
border-radius: 0 0 10px 10px; |
|
box-shadow: 0 1px 0 rgba(255,255,255,.2) inset; |
|
bottom: 0; |
|
height: 50px; |
|
left: 0; |
|
position: absolute; |
|
right: 0 |
|
} |
|
/*Timepicker: widget footer buttons*/ |
|
.widget--tp .tp-base { |
|
bottom: 5px; |
|
left: 51%; |
|
position: absolute |
|
} |
|
.widget--tp .tp-base--text { |
|
background: linear-gradient(to bottom, rgba(46,46,46,1) 0%,rgba(34,34,34,1) 100%); |
|
border: 1px solid #141414; |
|
box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.2) inset; |
|
color: #bcbcbc; |
|
font: 2.2em/1.3 'Roboto', sans-serif; |
|
height: 40px; |
|
text-shadow: 0 2px 0 #555; |
|
width: 40px |
|
} |
|
.widget--tp .tp-base--handle { |
|
cursor: pointer; |
|
bottom: 2px; |
|
height: 45px; |
|
margin: 6px 0 0; |
|
opacity: 0; |
|
width: 45px; |
|
z-index: 100 |
|
} |
|
.widget--tp .tp-hour, |
|
.widget--tp .tp-hour--handle { |
|
left: 39% |
|
} |
|
.widget--tp .tp-colon { |
|
color: #fff; |
|
left: 48.35%; |
|
font: 2.2em/1.4 'Roboto', sans-serif |
|
} |
|
/*Timepicker: widget generic hour and min section*/ |
|
.widget--tp .tp-section { |
|
background: url(http://www.bradysammons.com/codepen/darkui/noise.png) repeat; |
|
height: 85%; |
|
margin: 8px 5px; |
|
opacity: 0; |
|
position: absolute; |
|
width: 98%; |
|
transition: all .3s ease-out |
|
} |
|
|
|
/* |
|
* Timepicker: widget root sections & child elements lazy anims |
|
*/ |
|
.tp-hour--handle:checked ~ .tp-section--hour { |
|
animation: slide-in-left 0.3s 0.3s 1 ease-in-out forwards |
|
} |
|
.tp-min--handle:checked ~ .tp-section--min { |
|
animation: slide-in-right 0.3s 0.3s 1 ease-in-out forwards |
|
} |
|
.tp-hour--handle:checked ~.item-text--hour-1, |
|
.tp-min--handle:checked ~ .item-text--min-1, |
|
.tp-hour--handle:checked ~ .item-text--hour-4, |
|
.tp-min--handle:checked ~ .item-text--min-4, |
|
.tp-hour--handle:checked ~ .item-text--hour-7, |
|
.tp-min--handle:checked ~ .item-text--min-7, |
|
.tp-hour--handle:checked ~ .item-text--hour-10, |
|
.tp-min--handle:checked ~ .item-text--min-10 { |
|
animation: ease-out-scale 0.5s 0.5s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards |
|
} |
|
.tp-hour--handle:checked ~ .item-text--hour-2, |
|
.tp-min--handle:checked ~ .item-text--min-2, |
|
.tp-hour--handle:checked ~ .item-text--hour-6, |
|
.tp-min--handle:checked ~ .item-text--min-6, |
|
.tp-hour--handle:checked ~ .item-text--hour-8, |
|
.tp-min--handle:checked ~ .item-text--min-8, |
|
.tp-hour--handle:checked ~ .item-text--hour-12, |
|
.tp-min--handle:checked ~ .item-text--min-12 { |
|
animation: ease-out-scale 0.5s 1s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards |
|
} |
|
.tp-hour--handle:checked ~ .item-text--hour-3, |
|
.tp-min--handle:checked ~ .item-text--min-3, |
|
.tp-hour--handle:checked ~ .item-text--hour-5, |
|
.tp-min--handle:checked ~ .item-text--min-5, |
|
.tp-hour--handle:checked ~ .item-text--hour-9, |
|
.tp-min--handle:checked ~ .item-text--min-9, |
|
.tp-hour--handle:checked ~ .item-text--hour-11, |
|
.tp-min--handle:checked ~ .item-text--min-11 { |
|
animation: ease-out-scale 0.5s 1.5s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards |
|
} |
|
.tp-hour--handle:checked ~ .item-handle--hour, |
|
.tp-min--handle:checked ~ .item-handle--min { |
|
z-index: 100 !important |
|
} |
|
|
|
/*Timepicker: generic hour & min blocks*/ |
|
.widget--tp .tp-item { |
|
cursor: pointer; |
|
height: 35px; |
|
left: 0; |
|
position: absolute; |
|
top: 0; |
|
width: 35px |
|
} |
|
.widget--tp .item-text { |
|
background: linear-gradient(to bottom, rgba(46,46,46,1) 0%,rgba(34,34,34,1) 100%); |
|
border: 1px solid #141414; |
|
box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.2) inset; |
|
color: #bcbcbc; |
|
border-radius: 50%; |
|
font: 300 1.3em/1.8 'Roboto', sans-serif; |
|
opacity: 0; |
|
text-shadow:0 1px 0 rgba(0,0,0,.6) |
|
} |
|
/*Timepicker: root sections hour & mins buttons alignment*/ |
|
.widget--tp .item-handle-1, |
|
.widget--tp .item-text-1 { left: 45%; top: 3% } |
|
.widget--tp .item-handle-7, |
|
.widget--tp .item-text-7 { left: 45%; top: 75% } |
|
.widget--tp .item-handle-2, |
|
.widget--tp .item-text-2 { left: 62%; top: 10% } |
|
.widget--tp .item-handle-6, |
|
.widget--tp .item-text-6 { left: 62%; top: 68% } |
|
.widget--tp .item-handle-12, |
|
.widget--tp .item-text-12 { left: 28%; top: 10% } |
|
.widget--tp .item-handle-8, |
|
.widget--tp .item-text-8 { left: 28%; top: 68% } |
|
.widget--tp .item-handle-3, |
|
.widget--tp .item-text-3 { left: 74%; top: 25% } |
|
.widget--tp .item-handle-11, |
|
.widget--tp .item-text-11 { left: 16%; top: 25% } |
|
.widget--tp .item-handle-5, |
|
.widget--tp .item-text-5 { left: 74%; top: 53% } |
|
.widget--tp .item-handle-9, |
|
.widget--tp .item-text-9 { left: 16%; top: 53% } |
|
.widget--tp .item-handle-4, |
|
.widget--tp .item-text-4 { left: 82%; top: 40% } |
|
.widget--tp .item-handle-10, |
|
.widget--tp .item-text-10 { left: 8%; top: 40% } |
|
.widget--tp .item-handle { |
|
margin: 0 2px 0 0; |
|
opacity: 0; |
|
z-index: -100 |
|
} |
|
|
|
/*Timepicker: section child button click logic*/ |
|
.widget--tp .tp-base.tp-base--hidden{ |
|
background: none; |
|
color: #fff; |
|
border: none; |
|
box-shadow: none; |
|
opacity: 0; |
|
text-shadow: none |
|
} |
|
.widget--tp .item-handle--hour-1:checked ~ .tp-hour-item-1, |
|
.widget--tp .item-handle--min-1:checked ~ .tp-min-item-1, |
|
.widget--tp .item-handle--hour-2:checked ~ .tp-hour-item-2, |
|
.widget--tp .item-handle--min-2:checked ~ .tp-min-item-2, |
|
.widget--tp .item-handle--hour-3:checked ~ .tp-hour-item-3, |
|
.widget--tp .item-handle--min-3:checked ~ .tp-min-item-3, |
|
.widget--tp .item-handle--hour-4:checked ~ .tp-hour-item-4, |
|
.widget--tp .item-handle--min-4:checked ~ .tp-min-item-4, |
|
.widget--tp .item-handle--hour-5:checked ~ .tp-hour-item-5, |
|
.widget--tp .item-handle--min-5:checked ~ .tp-min-item-5, |
|
.widget--tp .item-handle--hour-6:checked ~ .tp-hour-item-6, |
|
.widget--tp .item-handle--min-6:checked ~ .tp-min-item-6, |
|
.widget--tp .item-handle--hour-7:checked ~ .tp-hour-item-7, |
|
.widget--tp .item-handle--min-7:checked ~ .tp-min-item-7, |
|
.widget--tp .item-handle--hour-8:checked ~ .tp-hour-item-8, |
|
.widget--tp .item-handle--min-8:checked ~ .tp-min-item-8, |
|
.widget--tp .item-handle--hour-9:checked ~ .tp-hour-item-9, |
|
.widget--tp .item-handle--min-9:checked ~ .tp-min-item-9, |
|
.widget--tp .item-handle--hour-10:checked ~ .tp-hour-item-10, |
|
.widget--tp .item-handle--min-10:checked ~ .tp-min-item-10, |
|
.widget--tp .item-handle--hour-11:checked ~ .tp-hour-item-11, |
|
.widget--tp .item-handle--min-11:checked ~ .tp-min-item-11, |
|
.widget--tp .item-handle--hour-12:checked ~ .tp-hour-item-12, |
|
.widget--tp .item-handle--min-12:checked ~ .tp-min-item-12 { |
|
animation: ease-out-scale 0.3s 0.3s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards |
|
} |
|
|
|
/*Timepicker: hour and min arms block*/ |
|
/******Absolute Centering technique******/ |
|
.widget--tp .tp-arms { |
|
animation: ease-out-scale 0.5s 2s 1 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; |
|
background: linear-gradient(to bottom, rgba(46,46,46,1) 0%,rgba(34,34,34,1) 100%); |
|
border: 1px solid #141414; |
|
border-radius: 50%; |
|
box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.2) inset; |
|
bottom: 0; |
|
height: 15px; |
|
left: 0; |
|
margin: auto; |
|
opacity: 0; |
|
position: absolute; |
|
right: 0; |
|
text-shadow:0 1px 0 rgba(0,0,0,.6); |
|
top: 0; |
|
width: 15px |
|
} |
|
/*Timepicker: hour & mins arms */ |
|
.widget--tp .tp-arms > .tp-arms-item { |
|
background: linear-gradient(to bottom, rgba(46,46,46,1) 0%, rgba(34,34,34,1) 100%); |
|
border: 1px solid #141414; |
|
left: 42%; |
|
height: 5px; |
|
position: absolute; |
|
top: 45%; |
|
transform-origin: left top; |
|
transform: rotate(-90deg); |
|
transition: transform .6s .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
width: 550% |
|
} |
|
.widget--tp .tp-arms > .tp-arms-min { |
|
width: 800% |
|
} |
|
/*Timepicker: arms movement on hour & min blocks click logic*/ |
|
.item-handle--hour-1:checked ~ .tp-arms > .tp-arms-hour, |
|
.item-handle--min-1:checked ~ .tp-arms > .tp-arms-min { |
|
transform: rotate(-90deg) |
|
} |
|
.item-handle--hour-2:checked ~ .tp-arms > .tp-arms-hour, |
|
.item-handle--min-2:checked ~ .tp-arms > .tp-arms-min { |
|
transform: rotate(-64deg) |
|
} |
|
.item-handle--hour-3:checked ~ .tp-arms > .tp-arms-hour, |
|
.item-handle--min-3:checked ~ .tp-arms > .tp-arms-min { |
|
transform: rotate(-35deg) |
|
} |
|
.item-handle--hour-4:checked ~ .tp-arms > .tp-arms-hour, |
|
.item-handle--min-4:checked ~ .tp-arms > .tp-arms-min { |
|
transform: rotate(-10deg) |
|
} |
|
.item-handle--hour-5:checked ~ .tp-arms > .tp-arms-hour, |
|
.item-handle--min-5:checked ~ .tp-arms > .tp-arms-min { |
|
transform: rotate(13deg) |
|
} |
|
.item-handle--hour-6:checked ~ .tp-arms > .tp-arms-hour, |
|
.item-handle--min-6:checked ~ .tp-arms > .tp-arms-min { |
|
transform: rotate(50deg) |
|
} |
|
.item-handle--hour-7:checked ~ .tp-arms > .tp-arms-hour, |
|
.item-handle--min-7:checked ~ .tp-arms > .tp-arms-min { |
|
transform: rotate(90deg) |
|
} |
|
.item-handle--hour-8:checked ~ .tp-arms > .tp-arms-hour, |
|
.item-handle--min-8:checked ~ .tp-arms > .tp-arms-min { |
|
transform: rotate(130deg) |
|
} |
|
.item-handle--hour-9:checked ~ .tp-arms > .tp-arms-hour, |
|
.item-handle--min-9:checked ~ .tp-arms > .tp-arms-min { |
|
transform: rotate(165deg) |
|
} |
|
.item-handle--hour-10:checked ~ .tp-arms > .tp-arms-hour, |
|
.item-handle--min-10:checked ~ .tp-arms > .tp-arms-min { |
|
transform: rotate(185deg) |
|
} |
|
.item-handle--hour-11:checked ~ .tp-arms > .tp-arms-hour, |
|
.item-handle--min-11:checked ~ .tp-arms > .tp-arms-min { |
|
transform: rotate(210deg) |
|
} |
|
.item-handle--hour-12:checked ~ .tp-arms > .tp-arms-hour, |
|
.item-handle--min-12:checked ~ .tp-arms > .tp-arms-min { |
|
transform: rotate(240deg) |
|
} |
|
|
|
/*Timepicker: generic buttons user interaction*/ |
|
input[type=radio] + .tp-item, |
|
input[type=radio] + .tp-base { |
|
transition: all .3s ease-in-out |
|
} |
|
input[type=radio]:hover + .tp-item, |
|
input[type=radio]:hover + .tp-base, |
|
input[type=radio]:focus + .tp-item, |
|
input[type=radio]:focus + .tp-base{ |
|
background: linear-gradient(to bottom, rgba(64,64,64,1) 0%,rgba(47,47,47,1) 100%); |
|
border-color: #222; |
|
color: #d0d0d0; |
|
text-shadow:0 1px 0 rgba(0,0,0,.7) |
|
} |
|
input[type=radio]:active + .tp-item, |
|
input[type=radio]:active + .tp-base, |
|
input[type=radio]:checked + .tp-item, |
|
input[type=radio]:checked + .tp-base { |
|
background: linear-gradient(to bottom, rgba(23,23,23,1) 0%, rgba(40,40,40,1) 100%); |
|
color: #fff; |
|
box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(0,0,0,.8) inset; |
|
font-weight: bold; |
|
text-shadow: 0 1px 0 rgba(0,0,0,.3) |
|
} |