ribcage-picker
Version:
A iOS-inspired UIPickerView for ribcage-ui
104 lines (89 loc) • 2.1 kB
CSS
.rp-wrapper {
position: fixed;
z-index: 999999;
left: 0;
bottom: -215px;
right: 0;
width: 100%;
height: 215px;
font-family: helvetica, sans-serif;
background: rgba(0,0,0,0.7);
text-align: left;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.rp-wrapper.rp-wrapper-open {
transform: translate3d(0, -215px, 0);
-o-transform: translate3d(0, -215px, 0);
-ms-transform: translate3d(0, -215px, 0);
-moz-transform: translate3d(0, -215px, 0);
-webkit-transform: translate3d(0, -215px, 0);
}
.rp-pressed { opacity:0.4; }
.rp-slots-wrapper {
position: absolute;
left: 0; right: 0; top: 0; z-index:999;
display: block;
height: 215px;
padding: 0 11px;
overflow: hidden;
}
.rp-slots {
display: table;
width: 100%;
background: #fcfcfc;
}
.rp-slots div {
display: table-cell;
height: 100%;
padding-top: 86px;
border-left: 2px solid #0d0e0f;
background-color: #fcfcfc;
background-image: url(./img/rp-slot-border.png);
background-position: 0 0, 100% 0;
background-repeat: repeat-y;
}
.rp-slots div:first-child { border:0; }
.rp-slots ul {
padding: 0 0 85px 0; margin:0;
list-style: none;
color: #000;
}
.rp-slots .rp-right { text-align: right; }
.rp-slots .rp-shrink { width: 1%; }
.rp-slots .rp-readonly { background: #ddd; }
.rp-slots li {
padding: 0 8px;
height: 4 4px;
overflow: hidden;
font: bold 24px/44px Helvetica,sans-serif;
}
.rp-frame {
position: absolute; z-index:1000;
left: 0; right: 0; top: 0;
height:183px;
border-width:16px;
-webkit-border-image:url(./img/rp-alpha.png) 16;
}
.rp-select-wrap {
position: relative;
}
.rp-select-wrap select {
z-index: 2;
}
.rp-select-blocker {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}