UNPKG

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

1,793 lines (1,408 loc) 39.4 kB
/* ----------------------------------------------------------------------------- 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 ----------------------------------------------------------------------------- */ /* ------------------------- Basic Layout Start ---------------------------------- */ body.noscroll { overflow: hidden; } .ap-overlay { display: none; z-index: 2000; min-width: 250px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } .ap-layout-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } .ap-layout-fixed, .ap-layout-popover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } /* .ap-layout-relative, .ap-layout-inline { height: auto; } */ .ap-layout-relative, .ap-layout-inline { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .ap-overlay * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ap-bg { width: 100%; height: 100%; font-family: sans-serif; /*font-family: 'Helvetica Neue', Arial, sans-serif;*/ font-size: 22px; } .ap-cont { margin: 0 auto; background: #FFFFFF; } .ap-theme-default:not(.ap-layout-inline):not(.ap-layout-relative) .ap-cont { -webkit-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); -moz-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); } .ap-layout-popup .ap-cont { position: relative; top: 50%; max-width: 500px; width: 95%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .ap-layout-relative .ap-cont { max-width: 500px; width: 97%; border: 1px solid #ECF0F1; } .ap-layout-inline .ap-cont { border: 1px solid #ECF0F1; } .ap-layout-fixed .ap-cont { width: 100%; position: fixed; } /* ------------------------- Basic Layout End ---------------------------------- */ /* ------------------------- View Sections Start ---------------------------------- */ .ap-header { height: 50px; line-height: 50px; text-align: left; font-size: 0.9em; padding: 0 16px; } .ap-dir-rtl .ap-header { text-align: right; } .ap-theme-default .ap-header { height: 60px; line-height: 60px; } .ap-content { max-width: 320px; margin: 0 auto; } .ap-content-top { height: 50px; padding: 8px 16px; color:#555; text-align:center; } .ap-content-switch { margin-top: 8px; margin-bottom: 8px; text-align: center; } .ap-content-switch-tab { border: 1px solid #009688; padding: 5px 16px; cursor: pointer; font-size: 0.6em; color: #009688; } .ap-dir-ltr .ap-content-switch-date { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .ap-dir-rtl .ap-content-switch-date { border-top-right-radius: 2px; border-bottom-right-radius: 2px; margin-left: -1px; } .ap-dir-ltr .ap-content-switch-time { border-top-right-radius: 2px; border-bottom-right-radius: 2px; margin-left: -1px; } .ap-dir-rtl .ap-content-switch-time { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .ap-content-switch-selected { background: #009688; color: #FFFFFF; } .ap-content-middle { min-height: 120px; padding-top: 20px; padding-bottom: 20px; } .ap-content-bottom { height: 50px; padding: 8px 16px; color:#555; text-align:center; } .ap-theme-default .ap-content-top, .ap-theme-default .ap-content-bottom { font-size: 0.7em; } .ap-footer { display: table; table-layout: fixed; width: 100%; height: 50px; text-align: center; } .ap-theme-default .ap-footer { padding: 0 16px; } .ap-theme-default .ap-footer-top { line-height: 55px; } .ap-theme-default .ap-footer-bottom { line-height: 45px; } .ap-header__title { color: #000000; font-size: 1.2em; } /* ------------------------- Buttons Start ---------------------------------- */ .ap-theme-default .ap-button { cursor: pointer; letter-spacing: 0; text-align: center; font-size: 0.8em; padding: 8px 12px; margin: 8px; color: #009688; background: rgba(255, 255, 255, 1); text-transform: uppercase; } .ap-theme-default .ap-button-cont { float: right; } .ap-theme-default.ap-dir-rtl .ap-button-cont { float: left; } /* ------------------------- Buttons End ---------------------------------- */ /* ------------------------- View Sections End ---------------------------------- */ /* ------------------------- Animations Start ---------------------------------- */ /* ------------------------------------------------------------------------------ */ .ap-show { opacity: 0; animation: ap-anim-show ease 0.5s; animation-iteration-count: 1; -webkit-animation: ap-anim-show ease 0.5s; -webkit-animation-iteration-count: 1; -moz-animation: ap-anim-show ease 0.5s; -moz-animation-iteration-count: 1; -o-animation: ap-anim-show ease 0.5s; -o-animation-iteration-count: 1; -ms-animation: ap-anim-show ease 0.5s; -ms-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ animation-fill-mode: forwards; } @keyframes ap-anim-show { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes ap-anim-show { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes ap-anim-show { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes ap-anim-show { 0% { opacity:0; } 100% { opacity:1; } } /* ------------------------------------------------------------------------------ */ .ap-hide { animation: ap-anim-hide ease 0.5s; animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ animation-fill-mode: forwards; -webkit-animation: ap-anim-hide ease 0.5s; -webkit-animation-iteration-count: 1; -moz-animation: ap-anim-hide ease 0.5s; -moz-animation-iteration-count: 1; -o-animation: ap-anim-hide ease 0.5s; -o-animation-iteration-count: 1; -ms-animation: ap-anim-hide ease 0.5s; -ms-animation-iteration-count: 1; } @keyframes ap-anim-hide { 0% { opacity:1; } 100% { opacity:0; } } @-moz-keyframes ap-anim-hide { 0% { opacity:1; } 100% { opacity:0; } } @-webkit-keyframes ap-anim-hide { 0% { opacity:1; } 100% { opacity:0; } } @-o-keyframes ap-anim-hide { 0% { opacity:1; } 100% { opacity:0; } } /* ------------------------------------------------------------------------------ */ .ap-bottom-slide-up { opacity: 0; animation: ap-anim-bottom-slide-up ease 0.5s; animation-iteration-count: 1; -webkit-animation: ap-anim-bottom-slide-up ease 0.5s; -webkit-animation-iteration-count: 1; -moz-animation: ap-anim-bottom-slide-up ease 0.5s; -moz-animation-iteration-count: 1; -o-animation: ap-anim-bottom-slide-up ease 0.5s; -o-animation-iteration-count: 1; -ms-animation: ap-anim-bottom-slide-up ease 0.5s; -ms-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ animation-fill-mode: forwards; } @keyframes ap-anim-bottom-slide-up { 100% { opacity: 1; bottom: 0; } } @-moz-keyframes ap-anim-bottom-slide-up { 100% { opacity: 1; bottom: 0; } } @-webkit-keyframes ap-anim-bottom-slide-up { 100% { opacity: 1; bottom: 0; } } @-o-keyframes ap-anim-bottom-slide-up { 100% { opacity: 1; bottom: 0; } } /* ------------------------------------------------------------------------------ */ .ap-bottom-slide-down { opacity: 1; animation: ap-anim-bottom-slide-down ease 0.5s; animation-iteration-count: 1; -webkit-animation: ap-anim-bottom-slide-down ease 0.5s; -webkit-animation-iteration-count: 1; -moz-animation: ap-anim-bottom-slide-down ease 0.5s; -moz-animation-iteration-count: 1; -o-animation: ap-anim-bottom-slide-down ease 0.5s; -o-animation-iteration-count: 1; -ms-animation: ap-anim-bottom-slide-down ease 0.5s; -ms-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ animation-fill-mode: forwards; } @keyframes ap-anim-bottom-slide-down { 100% { opacity: 0; bottom: -1000px; } } @-moz-keyframes ap-anim-bottom-slide-down { 100% { opacity: 0; bottom: -1000px; } } @-webkit-keyframes ap-anim-bottom-slide-down { 100% { opacity: 0; bottom: -1000px; } } @-o-keyframes ap-anim-bottom-slide-down { 100% { opacity: 0; bottom: -1000px; } } /* ------------------------------------------------------------------------------ */ .ap-top-slide-down { opacity: 0; animation: ap-anim-top-slide-down ease 0.5s; animation-iteration-count: 1; -webkit-animation: ap-anim-top-slide-down ease 0.5s; -webkit-animation-iteration-count: 1; -moz-animation: ap-anim-top-slide-down ease 0.5s; -moz-animation-iteration-count: 1; -o-animation: ap-anim-top-slide-down ease 0.5s; -o-animation-iteration-count: 1; -ms-animation: ap-anim-top-slide-down ease 0.5s; -ms-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ animation-fill-mode: forwards; } @keyframes ap-anim-top-slide-down { 100% { opacity: 1; top: 0; } } @-moz-keyframes ap-anim-top-slide-down { 100% { opacity: 1; top: 0; } } @-webkit-keyframes ap-anim-top-slide-down { 100% { opacity: 1; top: 0; } } @-o-keyframes ap-anim-top-slide-down { 100% { opacity: 1; top: 0; } } /* ------------------------------------------------------------------------------ */ .ap-top-slide-up { opacity: 1; animation: ap-anim-top-slide-up ease 0.5s; animation-iteration-count: 1; -webkit-animation: ap-anim-top-slide-up ease 0.5s; -webkit-animation-iteration-count: 1; -moz-animation: ap-anim-top-slide-up ease 0.5s; -moz-animation-iteration-count: 1; -o-animation: ap-anim-top-slide-up ease 0.5s; -o-animation-iteration-count: 1; -ms-animation: ap-anim-top-slide-up ease 0.5s; -ms-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ animation-fill-mode: forwards; } @keyframes ap-anim-top-slide-up { 100% { opacity: 0; top: -1000px; } } @-moz-keyframes ap-anim-top-slide-up { 100% { opacity: 0; top: -1000px; } } @-webkit-keyframes ap-anim-top-slide-up { 100% { opacity: 0; top: -1000px; } } @-o-keyframes ap-anim-top-slide-up { 100% { opacity: 0; top: -1000px; } } /* ------------------------------------------------------------------------------ */ .ap-theme-default .ap-button-active { animation: ap-anim-default-button-active ease 0.5s; animation-iteration-count: 1; animation-fill-mode:forwards; -webkit-animation: ap-anim-default-button-active ease 0.5s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode:forwards; -moz-animation: ap-anim-default-button-active ease 0.5s; -moz-animation-iteration-count: 1; -moz-animation-fill-mode:forwards; -o-animation: ap-anim-default-button-active ease 0.5s; -o-animation-iteration-count: 1; -o-animation-fill-mode:forwards; -ms-animation: ap-anim-default-button-active ease 0.5s; -ms-animation-iteration-count: 1; -ms-animation-fill-mode:forwards; } @keyframes ap-anim-default-button-active { 100% { background: #E0F2F1; } } @-moz-keyframes ap-anim-default-button-active { 100% { background: #E0F2F1; } } @-webkit-keyframes ap-anim-default-button-active { 100% { background: #E0F2F1; } } @-o-keyframes ap-anim-default-button-active { 100% { background: #E0F2F1; } } /* ------------------------------------------------------------------------------ */ /* ------------------------- Animations End ---------------------------------- */ /* ------------------------- Picker Component Start ---------------------------------- */ .ap-component-section { display: table; table-layout: fixed; width: 100%; background: #FFFFFF; } .ap-loading { width: 100%; height: 100%; z-index: 2; background: #FFFFFF; } .ap-component-section, ap-component-section * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-select: none; -ms-touch-action: none; touch-action: none; } .ap-component { display: table-cell; } .ap-component-label { text-align: center; font-size: 0.7em; } .ap-theme-default { color: #009688; } .ap-component-plus, .ap-component-minus { background: #FFFFFF; color: #BDBDBD; width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: 15px; cursor: pointer; } .ap-component-cont { position: relative; /*height: 200px;*/ overflow: hidden; } .ap-component-data { position: absolute; left: 0; top: 0; width: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } .ap-row { height: 40px; line-height: 40px; text-align: center; overflow: hidden; text-overflow: clip; white-space:nowrap; cursor: pointer; color: #000000; } .ap-row-invalid { color: #FFCDD2; } .ap-row-hidden { opacity: 0; } .ap-component-selector { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; height: 40px; border-top: 1px solid #009688; border-bottom: 1px solid #009688; } .ap-theme-default .ap-component-selector { left: 10%; width: 80%; } .ap-component-gradient { position: absolute; top: -1px; left: 0; width: 100%; height: 102%; cursor: pointer; /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%200\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%2030\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2045\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2055\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%2070\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%20100\%25\%29\%3B' */ background: rgba(255,255,255,0.8); background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.8)), color-stop(30%, rgba(255,255,255,0.8)), color-stop(45%, rgba(255,255,255,0)), color-stop(55%, rgba(255,255,255,0)), color-stop(70%, rgba(255,255,255,0.8)), color-stop(100%, rgba(255,255,255,0.8))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 ); } /* ------------------------- Picker Component End ---------------------------------- */ .ap-theme-ios.ap-layout-popup .ap-cont, .ap-theme-ios.ap-layout-popover .ap-cont { max-width: 320px; width: 90%; border-radius: 10px; border: 1px solid #D7D7D7; } .ap-theme-ios.ap-layout-popup, .ap-theme-ios.ap-layout-fixed, .ap-theme-ios.ap-layout-popover { background: rgba(0, 0, 0, 0.4); } .ap-theme-ios .ap-tooltip, .ap-theme-ios .ap-tooltip:after { display: inline-block; width: 0; height: 0; position: absolute; border-width: 11px; border-style: solid; z-index: 6; } .ap-theme-ios .ap-tooltip:after { content: " "; border-width: 10px; } .ap-theme-ios .ap-tooltip-bottom { top: -22px; left: 10px; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #D7D7D7 rgba(0, 0, 0, 0); } .ap-dir-rtl.ap-theme-ios .ap-tooltip-bottom { right: 10px; } .ap-theme-ios .ap-tooltip-bottom:after { top: -8px; left: -10px; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF rgba(0, 0, 0, 0); } .ap-theme-ios .ap-tooltip-top { bottom: -21px; left: 16px; border-color: #D7D7D7 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .ap-dir-rtl.ap-theme-ios .ap-tooltip-top { right: 16px; } .ap-theme-ios .ap-tooltip-top:after { bottom: -8px; left: -10px; border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .ap-theme-ios .ap-tooltip-left { top: 50%; left: -22px; border-color: rgba(0, 0, 0, 0) #D7D7D7 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .ap-theme-ios .ap-tooltip-left:after { top: -10px; left: -9px; border-color: rgba(0, 0, 0, 0) #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .ap-theme-ios .ap-tooltip-right { top: 50%; right: -22px; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #D7D7D7; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .ap-theme-ios .ap-tooltip-right:after { top: -10px; left: -11px; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF; } .ap-theme-ios .ap-bg { font-size: 18px; font-family: sans-serif; } .ap-theme-ios .ap-header { height: 45px; line-height: 45px; text-align: center; border-bottom: 1px solid #D7D7D7; } .ap-theme-ios .ap-header__title { color: #FF3B30; font-size: 1.2em; } .ap-theme-ios .ap-button { display: inline-block; cursor: pointer; letter-spacing: 0; text-align: center; font-size: 1.0em; height: 43px; line-height: 47px; background: rgba(255, 255, 255, 1); } .ap-theme-ios .ap-content-top, .ap-theme-ios .ap-content-bottom { font-size: 0.9em; } .ap-theme-ios .ap-footer { padding: 0 16px; } .ap-theme-ios .ap-footer-top .ap-button { display: inline-block; } .ap-theme-ios .ap-button:last-child { float: right; padding: 0 0 0 16px; color: #007AFF; } .ap-dir-rtl.ap-theme-ios .ap-button:last-child { float: left; padding: 0 16px 0 0; } .ap-theme-ios .ap-button:not(:last-child) { float: left; padding: 0 16px 0 0; color: #007AFF; } .ap-dir-rtl.ap-theme-ios .ap-button:not(:last-child) { float: right; padding: 0 0 0 16px; } .ap-theme-ios .ap-component-gradient { /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%200\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%2040\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2045\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2055\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%2060\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%20100\%25\%29\%3B' */ background: rgba(255,255,255,0.7); background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.7)), color-stop(40%, rgba(255,255,255,0.7)), color-stop(45%, rgba(255,255,255,0)), color-stop(55%, rgba(255,255,255,0)), color-stop(60%, rgba(255,255,255,0.7)), color-stop(100%, rgba(255,255,255,0.7))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 ); } .ap-theme-ios .ap-content-middle { padding: 10px 25px; } .ap-theme-ios .ap-content-switch-tab { border: 1px solid #007AFF; font-size: 0.7em; color: #007AFF; } .ap-dir-ltr.ap-theme-ios .ap-content-switch-date { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .ap-dir-rtl.ap-theme-ios .ap-content-switch-date { border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-left: -1px; } .ap-dir-ltr.ap-theme-ios .ap-content-switch-time { border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-left: -1px; } .ap-dir-rtl.ap-theme-ios .ap-content-switch-time { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .ap-theme-ios .ap-content-switch-selected { background: #007AFF; color: #FFFFFF; } .ap-theme-ios .ap-component-plus, .ap-theme-ios .ap-component-minus { color: #BDBDBD; } .ap-theme-ios .ap-component-label { color: #007AFF; } .ap-theme-ios .ap-row { color: #000000; font-size: 1.2em; } .ap-theme-ios .ap-row-disabled { color: #9E9E9E; } .ap-theme-ios .ap-component-selector { left: 0; width: 100%; border-top: 1px solid #D7D7D7; border-bottom: 1px solid #D7D7D7; } .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 ---------------------------------- */ .ap-theme-windows.ap-layout-popup, .ap-theme-windows.ap-layout-popup * { background: #181C18; } .ap-theme-windows.ap-layout-popup .ap-cont { width: 100%; height: 100%; max-width: 100%; } .ap-theme-windows .ap-bg { font-size: 18px; font-family: sans-serif; } .ap-theme-windows .ap-header { position: absolute; top: 0; left: 0; width: 100%; height: 60px; line-height: 75px; text-align: left; text-transform: uppercase; z-index: 2; } .ap-theme-windows .ap-header__title { color: #FFFFFF; font-size: 1.0em; } .ap-theme-windows .ap-button { display: inline-block; cursor: pointer; letter-spacing: 0; text-align: center; font-size: 1.0em; height: 30px; max-width: 50px; margin-left: 4px; margin-right: 4px; color: #FFFFFF; } .ap-theme-windows .ap-button-icon { height: 32px; font-size: 32px; position: relative; bottom: -8px; } .ap-theme-windows .ap-button-text { display: inline-block; width: 100%; font-size: 0.5em; text-transform: lowercase; position: relative; bottom: 0; } .ap-theme-windows .ap-content { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; max-width: none; } .ap-theme-windows .ap-content-top, .ap-theme-windows .ap-content-bottom { font-size: 0.9em; } .ap-theme-windows .ap-content-top { position: absolute; top: 60px; width: 100%; z-index: 2; height: auto; padding: 4px 16px; } .ap-theme-windows .ap-content-bottom { position: absolute; bottom: 59px; width: 100%; z-index: 2; height: auto; padding: 2px 16px; } .ap-theme-windows .ap-footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; padding: 0 16px; text-align: center; z-index: 2; } .ap-theme-windows .ap-component-gradient { background: transparent; } .ap-theme-windows .ap-content-middle { padding: 0 10px; } .ap-theme-windows .ap-content-switch { display: inline-block; height: 0; float: right; margin-right: 2px; margin-top: 0; margin-bottom: 0; } .ap-theme-windows .ap-content-switch-tab { border: 1px solid #ADADAD; font-size: 0.7em; color: #ADADAD; } .ap-dir-ltr.ap-theme-windows .ap-content-switch-date { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ap-dir-rtl.ap-theme-windows .ap-content-switch-date { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-left: -1px; } .ap-dir-ltr.ap-theme-windows .ap-content-switch-time { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-left: -2px; } .ap-dir-rtl.ap-theme-windows .ap-content-switch-time { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ap-theme-windows .ap-content-switch-selected { background: #ADADAD !important; color: #181C18; } .ap-theme-windows .ap-component-plus, .ap-theme-ios .ap-component-minus { color: #BDBDBD; } .ap-theme-windows .ap-component-label { color: #007AFF; } .ap-theme-windows .ap-row { color: #FFFFFF; } .ap-theme-windows .ap-row-content { background: transparent; font-size: 1.8em; text-align: left; width: 100%; height: 80px; line-height: 80px; padding-left: 4px; position: absolute; bottom: 0; left: 0; } .ap-theme-windows .ap-row-label { background: transparent; font-size: 0.7em; text-transform: lowercase; text-align: left; padding-left: 3px; width: 100%; height: 20px; line-height: 20px; position: absolute; bottom: 0; left: 0; } .ap-theme-windows .ap-row-bg { position: relative; margin: 4px; border: 2px solid #181C18; } .ap-theme-windows .ap-row-selected .ap-row-bg { background: #4B4D4A !important; border: 2px solid #4B4D4A; } .ap-theme-windows .ap-row-selected .ap-row-content { color: #FFFFFF !important; } .ap-theme-windows .ap-row-selected .ap-row-label { color: #A7A8A7 !important; } .ap-theme-windows .ap-component:not(.ap-component-modifying) .ap-row-content { color: transparent; } .ap-theme-windows .ap-component:not(.ap-component-modifying) .ap-row-label { color: transparent; } .ap-theme-windows .ap-component.ap-component-modifying .ap-row-bg { border: 2px solid #4B4D4A; } .ap-theme-windows .ap-component.ap-component-modifying .ap-row-content { color: #ADADAD; } .ap-theme-windows .ap-component.ap-component-modifying .ap-row-label { color: #5F5F5F; } .ap-theme-windows .ap-component.ap-component-modifying .ap-row-content { color: #ADADAD; } .ap-theme-windows .ap-component.ap-component-modifying .ap-row-bg { color: #000000; } .ap-theme-windows .ap-row-disabled { color: #9E9E9E; } .ap-theme-windows .ap-component-selector { left: 0; width: 100%; border-top: none; border-bottom: none; background: transparent; } @media only screen and (orientation : landscape) { .ap-theme-windows .ap-header { height: 40px; line-height: 40px; } .ap-theme-windows .ap-content-top { top: 31px; } .ap-theme-windows .ap-content-bottom { bottom: 60px; } .ap-theme-windows .ap-row-content { font-size: 1.3em; height: 60px; line-height: 60px; } .ap-theme-windows .ap-row-label { font-size: 0.6em; } .ap-theme-windows .ap-button-icon { height: 24px; font-size: 24px; position: relative; bottom: -12px; } } @font-face { font-family: 'anypicker-font'; src: url('fonts/anypicker-font.eot'); } @font-face { font-family: 'anypicker-font'; src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'); font-weight: normal; font-style: normal; } [class^="ap-icon-"], [class*=" ap-icon-"] { font-family: 'anypicker-font'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ap-icon-now:before { content: "\e600"; } .ap-icon-set:before { content: "\e601"; } .ap-icon-cancel:before { content: "\e602"; } .ap-icon-clear:before { content: "\e603"; } .ap-icon-arrow-up-filled:before { content: "\e000"; } .ap-icon-arrow-down:before { content: "\e001"; } .ap-icon-arrow-down-filled:before { content: "\e002"; } .ap-icon-arrow-up:before { content: "\e003"; }