anypicker
Version:
AnyPicker is a customizable jQuery Picker Library for Mobile OS. Create custom mobile pickers (Date, Time, Rating etc) for iOS, Android & Windows. Use pre-built pickers like Date Picker, Time Picker, Date Time Picker, etc
249 lines (198 loc) • 7.48 kB
CSS
/* -----------------------------------------------------------------------------
AnyPicker - Customizable Picker for Mobile OS
Version 2.0.9
Copyright (c)2017 Lajpat Shah
Contributors : https://github.com/nehakadam/AnyPicker/contributors
Repository : https://github.com/nehakadam/AnyPicker
Homepage : https://nehakadam.github.io/AnyPicker
----------------------------------------------------------------------------- */
.ap-theme-android.ap-layout-popup,
.ap-theme-android .ap-layout-fixed
{
background: rgba(0, 0, 0, 0.6);
}
.ap-theme-android .ap-bg
{
font-size: 16px;
font-family: sans-serif;
}
.ap-theme-android.ap-layout-popup .ap-cont
{
max-width: 300px;
}
.ap-theme-android:not(.ap-layout-inline):not(.ap-layout-relative) .ap-cont
{
-webkit-box-shadow: 0 3px 5px #111, 0 0 5px #111;
-moz-box-shadow: 0 3px 5px #111, 0 0 5px #111;
box-shadow: 0 3px 5px #111, 0 0 5px #111;
}
.ap-theme-android.ap-layout-popup .ap-cont
{
width: 85%;
}
.ap-theme-android .ap-header
{
text-align: left;
height: 65px;
line-height: 65px;
border-bottom: 2px solid #33B5E5;
}
.ap-dir-rtl.ap-theme-android .ap-header
{
text-align: right;
}
.ap-theme-android .ap-header__title
{
color: #33B5E5;
font-size: 1.45em;
}
.ap-theme-android .ap-footer
{
height: 45px;
}
.ap-theme-android .ap-button
{
display: table-cell;
cursor: pointer;
letter-spacing: 0;
text-align: center;
font-size: 0.9em;
height: 45px;
line-height: 45px;
color: #000000;
background: rgba(255, 255, 255, 1);
border-top: 1px solid #DCDCDC;
}
.ap-theme-android .ap-footer-bottom .ap-button
{
border-top: 1px solid #DCDCDC;
}
.ap-theme-android .ap-footer-top
{
border-bottom: 1px solid #DCDCDC;
}
.ap-dir-ltr.ap-theme-android .ap-button:not(:last-child)
{
border-right: 1px solid #DCDCDC;
}
.ap-dir-rtl.ap-theme-android .ap-button:not(:last-child)
{
border-left: 1px solid #DCDCDC;
}
.ap-theme-android .ap-footer-top .ap-button
{
display: table-cell;
cursor: pointer;
letter-spacing: 0;
text-align: center;
font-size: 0.8em;
height: 40px;
line-height: 40px;
padding: 0 16px;
color: #000000;
background: rgba(255, 255, 255, 1);
}
.ap-dir-ltr.ap-theme-android .ap-layout-fixed .ap-button:not(:last-child)
{
border-right: none;
float: left;
}
.ap-dir-rtl.ap-theme-android .ap-layout-fixed .ap-button:not(:last-child)
{
border-left: none;
float: right;
}
.ap-theme-android .ap-component-gradient
{
/*
http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%28255\%2C255\%2C255\%2C1\%29\%200\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.85\%29\%205\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.45\%29\%2024\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2025\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2043\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2051\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2071\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2075\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.45\%29\%2076\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.85\%29\%2095\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C1\%29\%20100\%25\%29\%3B'
*/
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 5%, rgba(255,255,255,0.45) 24%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 71%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.45) 76%, rgba(255,255,255,0.85) 95%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(5%, rgba(255,255,255,0.85)), color-stop(24%, rgba(255,255,255,0.45)), color-stop(25%, rgba(255,255,255,0)), color-stop(43%, rgba(255,255,255,0)), color-stop(51%, rgba(255,255,255,0)), color-stop(71%, rgba(255,255,255,0)), color-stop(75%, rgba(255,255,255,0)), color-stop(76%, rgba(255,255,255,0.45)), color-stop(95%, rgba(255,255,255,0.85)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 5%, rgba(255,255,255,0.45) 24%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 71%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.45) 76%, rgba(255,255,255,0.85) 95%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 5%, rgba(255,255,255,0.45) 24%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 71%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.45) 76%, rgba(255,255,255,0.85) 95%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 5%, rgba(255,255,255,0.45) 24%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 71%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.45) 76%, rgba(255,255,255,0.85) 95%, rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 5%, rgba(255,255,255,0.45) 24%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 71%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.45) 76%, rgba(255,255,255,0.85) 95%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
}
.ap-theme-android .ap-content-middle
{
padding: 25px 32px;
}
.ap-theme-android .ap-content-switch-tab
{
border: 1px solid #6BC8E9;
font-size: 0.7em;
color: #6BC8E9;
text-transform: uppercase;
}
.ap-theme-android .ap-content-switch-selected
{
background: #6BC8E9;
color: #FFFFFF;
}
.ap-theme-android .ap-component-plus,
.ap-theme-android .ap-component-minus
{
color: #BDBDBD;
}
.ap-theme-android .ap-component-label
{
color: #6BC8E9;
font-size: 0.85em;
}
.ap-theme-android .ap-row
{
color: #000000;
font-size: 1.1em;
}
.ap-theme-android .ap-row-disabled
{
color: #9E9E9E;
}
.ap-theme-android .ap-component-selector
{
left: 10%;
width: 80%;
border-top: 2px solid #6BC8E9;
border-bottom: 2px solid #6BC8E9;
}
/* ------------------------- Animations Start ---------------------------------- */
/* ------------------------------------------------------------------------------ */
.ap-theme-android .ap-button-active
{
animation: ap-anim-android-button-active ease 0.5s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
-webkit-animation: ap-anim-android-button-active ease 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode:forwards;
-moz-animation: ap-anim-android-button-active ease 0.5s;
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode:forwards;
-o-animation: ap-anim-android-button-active ease 0.5s;
-o-animation-iteration-count: 1;
-o-animation-fill-mode:forwards;
-ms-animation: ap-anim-android-button-active ease 0.5s;
-ms-animation-iteration-count: 1;
-ms-animation-fill-mode:forwards;
}
@keyframes ap-anim-android-button-active
{
100% { background: #F5F5F5; }
}
@-moz-keyframes ap-anim-android-button-active
{
100% { background: #F5F5F5; }
}
@-webkit-keyframes ap-anim-android-button-active
{
100% { background: #F5F5F5; }
}
@-o-keyframes ap-anim-android-button-active
{
100% { background: #F5F5F5; }
}
/* ------------------------------------------------------------------------------ */
/* ------------------------- Animations End ---------------------------------- */