ribcage-picker/picker.css

A iOS-inspired UIPickerView for ribcage-ui

.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;
}