react-mobiscroll
Version:
A simple wrapper of Mobiscroll for ReactJS.
87 lines • 2.91 kB
CSS
/* Android Skin */
.mbsc-android .dwc {
padding: 32px 2px 6px 2px;
}
.mbsc-android .dwhl {
padding-top: 6px;
}
/* Wheel items */
.mbsc-android .dw-li {
font-size: 26px;
text-shadow: 0 1px 1px #000;
}
/* Higlighted */
.mbsc-android .dw-hl {
background: rgba(255,255,255,.3);
}
/* Scroller mode */
.mbsc-android .dwwl {
padding: 0 2px;
margin: 0 2px;
background: #888;
background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.35, #333),color-stop(0.50, #888),color-stop(0.65, #333),to(#000));
background: -webkit-linear-gradient(#000,#333 35%, #888 50%,#333 65%,#000);
background: -moz-linear-gradient(#000,#333 35%, #888 50%,#333 65%,#000);
background: linear-gradient(#000,#333 35%, #888 50%,#333 65%,#000);
}
.mbsc-android .dww {
color: #fff;
background: #444;
background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.45, #444),color-stop(0.55, #444),to(#000));
background: -webkit-linear-gradient(#000,#444 45%, #444 55%, #000);
background: -moz-linear-gradient(#000,#444 45%, #444 55%, #000);
background: linear-gradient(#000,#444 45%, #444 55%, #000);
}
.mbsc-android .dwwo {
background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.52, rgba(44,44,44,0)),color-stop(0.48, rgba(44,44,44,0)),to(#000));
background: -webkit-linear-gradient(#000,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000);
background: -moz-linear-gradient(#000,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000);
background: linear-gradient(#000,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000);
}
.mbsc-android .dwwol {
height: 0;
margin-top: -1px;
border-top: 1px solid #333;
border-bottom: 1px solid #555;
}
/* Clickpick mode */
.mbsc-android .dwpm .dwwl {
padding: 0;
background: #fff;
}
.mbsc-android .dwpm .dww {
color: #000;
background: #fff;
border-radius: 3px;
}
.mbsc-android .dwpm .dw-li {
text-shadow: none;
}
.mbsc-android .dwwb {
background: #ccc;
color: #888;
text-shadow: 0 -1px 1px #333;
-webkit-box-shadow: 0 0 5px #333;
box-shadow: 0 0 5px #333;
}
.mbsc-android .dwwbp {
background: -webkit-gradient(linear,left bottom,left top,from(#bdbdbd),to(#f7f7f7));
background: -webkit-linear-gradient(#f7f7f7,#bdbdbd);
background: -moz-linear-gradient(#f7f7f7,#bdbdbd);
background: linear-gradient(#f7f7f7,#bdbdbd);
border-radius: 3px 3px 0 0;
font-size: 40px;
}
.mbsc-android .dwwbm {
background: -webkit-gradient(linear,left bottom,left top,from(#f7f7f7),to(#bdbdbd));
background: -webkit-linear-gradient(#bdbdbd,#f7f7f7);
background: -moz-linear-gradient(#bdbdbd,#f7f7f7);
background: linear-gradient(#bdbdbd,#f7f7f7);
border-radius: 0 0 3px 3px;
font-size: 32px;
font-weight: bold;
}
/* Group select */
.mbsc-android .dw-w-gr {
font-size: 20px;
}