alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
1,934 lines (1,929 loc) • 91.1 kB
CSS
/*!
* jQuery Mobile 1.4.2
* Git HEAD hash: 9d9a42a27d0c693e8b5569c3a10d771916af5045 <> Date: Fri Feb 28 2014 17:32:01 UTC
* http://jquerymobile.com
*
* Copyright 2010, 2014 jQuery Foundation, Inc. and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
*/
/* Some unsets */
.ui-mobile,
.ui-mobile body {
height: 99.9%;
}
.ui-mobile fieldset,
.ui-page {
padding: 0;
margin: 0;
}
.ui-mobile a img,
.ui-mobile fieldset {
border-width: 0;
}
/* Fixes for fieldset issues on IE10 and FF (see #6077) */
.ui-mobile fieldset {
min-width: 0;
}
@-moz-document url-prefix() {
.ui-mobile fieldset {
display: table-column;
vertical-align: middle;
}
}
/* Viewport */
.ui-mobile-viewport {
margin: 0;
overflow-x: visible;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust:none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Issue #2066 */
body.ui-mobile-viewport,
div.ui-mobile-viewport {
overflow-x: hidden;
}
/* "page" containers - full-screen views, one should always be in view post-pageload */
.ui-mobile [data-role=page],
.ui-mobile [data-role=dialog],
.ui-page {
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
display: none;
border: 0;
}
/* On ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */
.ui-page {
outline: none;
}
.ui-mobile .ui-page-active {
display: block;
overflow: visible;
overflow-x: hidden;
}
@media screen and (orientation: portrait) {
.ui-mobile .ui-page {
min-height: 420px;
}
}
@media screen and (orientation: landscape) {
.ui-mobile .ui-page {
min-height: 300px;
}
}
/* Fouc */
.ui-mobile-rendering > * {
visibility: hidden;
}
/* Non-js content hiding */
.ui-nojs {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
/* Loading screen */
.ui-loading .ui-loader {
display: block;
}
.ui-loader {
display: none;
z-index: 9999999;
position: fixed;
top: 50%;
left: 50%;
border:0;
}
.ui-loader-default {
background: none;
filter: Alpha(Opacity=18);
opacity: .18;
width: 2.875em;
height: 2.875em;
margin-left: -1.4375em;
margin-top: -1.4375em;
}
.ui-loader-verbose {
width: 12.5em;
filter: Alpha(Opacity=88);
opacity: .88;
box-shadow: 0 1px 1px -1px #fff;
height: auto;
margin-left: -6.875em;
margin-top: -2.6875em;
padding: .625em;
}
.ui-loader-default h1 {
font-size: 0;
width: 0;
height: 0;
overflow: hidden;
}
.ui-loader-verbose h1 {
font-size: 1em;
margin: 0;
text-align: center;
}
.ui-loader .ui-icon-loading {
background-color: #000;
display: block;
margin: 0;
width: 2.75em;
height: 2.75em;
padding: .0625em;
-webkit-border-radius: 2.25em;
border-radius: 2.25em;
}
.ui-loader-verbose .ui-icon-loading {
margin: 0 auto .625em;
filter: Alpha(Opacity=75);
opacity: .75;
}
.ui-loader-textonly {
padding: .9375em;
margin-left: -7.1875em;
}
.ui-loader-textonly .ui-icon-loading {
display: none;
}
.ui-loader-fakefix {
position: absolute;
}
/* Headers, content panels */
.ui-bar,
.ui-body {
position: relative;
padding: .4em 1em;
overflow: hidden;
display: block;
clear: both;
}
.ui-bar h1,
.ui-bar h2,
.ui-bar h3,
.ui-bar h4,
.ui-bar h5,
.ui-bar h6 {
margin: 0;
padding: 0;
font-size: 1em;
display: inline-block;
}
.ui-header,
.ui-footer {
border-width: 1px 0;
border-style: solid;
position: relative;
}
.ui-header:empty,
.ui-footer:empty {
min-height: 2.6875em;
}
.ui-header .ui-title,
.ui-footer .ui-title {
font-size: 1em;
min-height: 1.1em;
text-align: center;
display: block;
margin: 0 30%;
padding: .7em 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
outline: 0 !important;
}
.ui-footer .ui-title {
margin: 0 1em;
}
.ui-content {
border-width: 0;
overflow: visible;
overflow-x: hidden;
padding: 1em;
}
/* Corner styling for dialogs and popups */
.ui-corner-all > .ui-header:first-child,
.ui-corner-all > .ui-content:first-child,
.ui-corner-all > .ui-footer:first-child {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}
.ui-corner-all > .ui-header:last-child,
.ui-corner-all > .ui-content:last-child,
.ui-corner-all > .ui-footer:last-child {
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
/* Buttons and icons */
.ui-btn {
font-size: 16px;
margin: .5em 0;
padding: .7em 1em;
display: block;
position: relative;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ui-btn-icon-notext {
padding: 0;
width: 1.75em;
height: 1.75em;
text-indent: -9999px;
white-space: nowrap !important;
}
.ui-mini {
font-size: 12.5px;
}
.ui-mini .ui-btn {
font-size: inherit;
}
/* Make buttons in toolbars default to mini and inline. */
.ui-header .ui-btn,
.ui-footer .ui-btn {
font-size: 12.5px;
display: inline-block;
vertical-align: middle;
}
/* To ensure same top and left/right position when ui-btn-left/right are added to something other than buttons. */
.ui-header .ui-btn-left,
.ui-header .ui-btn-right {
font-size: 12.5px;
}
.ui-mini.ui-btn-icon-notext,
.ui-mini .ui-btn-icon-notext,
.ui-header .ui-btn-icon-notext,
.ui-footer .ui-btn-icon-notext {
font-size: 16px;
padding: 0;
}
.ui-btn-inline {
display: inline-block;
vertical-align: middle;
margin-right: .625em;
}
.ui-btn-icon-left {
padding-left: 2.5em;
}
.ui-btn-icon-right {
padding-right: 2.5em;
}
.ui-btn-icon-top {
padding-top: 2.5em;
}
.ui-btn-icon-bottom {
padding-bottom: 2.5em;
}
.ui-header .ui-btn-icon-top,
.ui-footer .ui-btn-icon-top,
.ui-header .ui-btn-icon-bottom,
.ui-footer .ui-btn-icon-bottom {
padding-left: .3125em;
padding-right: .3125em;
}
.ui-btn-icon-left:after,
.ui-btn-icon-right:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after,
.ui-btn-icon-notext:after {
content: "";
position: absolute;
display: block;
width: 22px;
height: 22px;
}
.ui-btn-icon-notext:after,
.ui-btn-icon-left:after,
.ui-btn-icon-right:after {
top: 50%;
margin-top: -11px;
}
.ui-btn-icon-left:after {
left: .5625em;
}
.ui-btn-icon-right:after {
right: .5625em;
}
.ui-mini.ui-btn-icon-left:after,
.ui-mini .ui-btn-icon-left:after,
.ui-header .ui-btn-icon-left:after,
.ui-footer .ui-btn-icon-left:after {
left: .37em;
}
.ui-mini.ui-btn-icon-right:after,
.ui-mini .ui-btn-icon-right:after,
.ui-header .ui-btn-icon-right:after,
.ui-footer .ui-btn-icon-right:after {
right: .37em;
}
.ui-btn-icon-notext:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after {
left: 50%;
margin-left: -11px;
}
.ui-btn-icon-top:after {
top: .5625em;
}
.ui-btn-icon-bottom:after {
top: auto;
bottom: .5625em;
}
/* Buttons in header position classes */
.ui-header .ui-btn-left,
.ui-header .ui-btn-right,
.ui-btn-left > [class*="ui-"],
.ui-btn-right > [class*="ui-"] {
margin: 0;
}
.ui-btn-left,
.ui-btn-right {
position: absolute;
top: .24em;
}
.ui-btn-left {
left: .4em;
}
.ui-btn-right {
right: .4em;
}
.ui-btn-icon-notext.ui-btn-left {
top: .3125em;
left: .3125em;
}
.ui-btn-icon-notext.ui-btn-right {
top: .3125em;
right: .3125em;
}
/* Button elements */
button.ui-btn,
.ui-controlgroup-controls button.ui-btn-icon-notext {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
}
button.ui-btn-inline {
width: auto;
}
/* Firefox adds a 1px border in a button element. We negate this to make sure they have the same height as other buttons in controlgroups. */
button.ui-btn::-moz-focus-inner {
border: 0;
}
button.ui-btn-icon-notext,
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 1.75em;
}
/* Form labels */
.ui-mobile label,
.ui-controlgroup-label {
display: block;
margin: 0 0 .4em;
}
/* Accessible content hiding */
/* ui-hide-label deprecated in 1.4. TODO: Remove in 1.5 */
.ui-hide-label > label,
.ui-hide-label .ui-controlgroup-label,
.ui-hide-label .ui-rangeslider label,
.ui-hidden-accessible {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
/* Used for hiding elements by the filterable widget. You can also use this class to hide list items or buttons in controlgroups; this ensures correct corner styling. */
.ui-screen-hidden {
display: none !important;
}
/* Transitions originally inspired by those from jQtouch, nice work, folks */
.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
width: 100%;
height: 100%;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ui-page-pre-in {
opacity: 0;
}
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 350ms;
animation-timing-function: ease-out;
animation-duration: 350ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225ms;
animation-timing-function: ease-in;
animation-duration: 225ms;
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
@-moz-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
.fade.out {
opacity: 0;
-webkit-animation-duration: 125ms;
-webkit-animation-name: fadeout;
-moz-animation-duration: 125ms;
-moz-animation-name: fadeout;
animation-duration: 125ms;
animation-name: fadeout;
}
.fade.in {
opacity: 1;
-webkit-animation-duration: 225ms;
-webkit-animation-name: fadein;
-moz-animation-duration: 225ms;
-moz-animation-name: fadein;
animation-duration: 225ms;
animation-name: fadein;
}
.pop {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.pop.in {
-webkit-transform: scale(1);
-webkit-animation-name: popin;
-webkit-animation-duration: 350ms;
-moz-transform: scale(1);
-moz-animation-name: popin;
-moz-animation-duration: 350ms;
transform: scale(1);
animation-name: popin;
animation-duration: 350ms;
opacity: 1;
}
.pop.out {
-webkit-animation-name: fadeout;
-webkit-animation-duration: 100ms;
-moz-animation-name: fadeout;
-moz-animation-duration: 100ms;
animation-name: fadeout;
animation-duration: 100ms;
opacity: 0;
}
.pop.in.reverse {
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
animation-name: fadein;
}
.pop.out.reverse {
-webkit-transform: scale(.8);
-webkit-animation-name: popout;
-moz-transform: scale(.8);
-moz-animation-name: popout;
transform: scale(.8);
animation-name: popout;
}
@-webkit-keyframes popin {
from {
-webkit-transform: scale(.8);
opacity: 0;
}
to {
-webkit-transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes popin {
from {
-moz-transform: scale(.8);
opacity: 0;
}
to {
-moz-transform: scale(1);
opacity: 1;
}
}
@keyframes popin {
from {
transform: scale(.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes popout {
from {
-webkit-transform: scale(1);
opacity: 1;
}
to {
-webkit-transform: scale(.8);
opacity: 0;
}
}
@-moz-keyframes popout {
from {
-moz-transform: scale(1);
opacity: 1;
}
to {
-moz-transform: scale(.8);
opacity: 0;
}
}
@keyframes popout {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(.8);
opacity: 0;
}
}
/* keyframes for slidein from sides */
@-webkit-keyframes slideinfromright {
from { -webkit-transform: translate3d(100%,0,0); }
to { -webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideinfromright {
from { -moz-transform: translateX(100%); }
to { -moz-transform: translateX(0); }
}
@keyframes slideinfromright {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@-webkit-keyframes slideinfromleft {
from { -webkit-transform: translate3d(-100%,0,0); }
to { -webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideinfromleft {
from { -moz-transform: translateX(-100%); }
to { -moz-transform: translateX(0); }
}
@keyframes slideinfromleft {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/* keyframes for slideout to sides */
@-webkit-keyframes slideouttoleft {
from { -webkit-transform: translate3d(0,0,0); }
to { -webkit-transform: translate3d(-100%,0,0); }
}
@-moz-keyframes slideouttoleft {
from { -moz-transform: translateX(0); }
to { -moz-transform: translateX(-100%); }
}
@keyframes slideouttoleft {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
@-webkit-keyframes slideouttoright {
from { -webkit-transform: translate3d(0,0,0); }
to { -webkit-transform: translate3d(100%,0,0); }
}
@-moz-keyframes slideouttoright {
from { -moz-transform: translateX(0); }
to { -moz-transform: translateX(100%); }
}
@keyframes slideouttoright {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
.slide.out, .slide.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 350ms;
animation-timing-function: ease-out;
animation-duration: 350ms;
}
.slide.out {
-webkit-transform: translate3d(-100%,0,0);
-webkit-animation-name: slideouttoleft;
-moz-transform: translateX(-100%);
-moz-animation-name: slideouttoleft;
transform: translateX(-100%);
animation-name: slideouttoleft;
}
.slide.in {
-webkit-transform: translate3d(0,0,0);
-webkit-animation-name: slideinfromright;
-moz-transform: translateX(0);
-moz-animation-name: slideinfromright;
transform: translateX(0);
animation-name: slideinfromright;
}
.slide.out.reverse {
-webkit-transform: translate3d(100%,0,0);
-webkit-animation-name: slideouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: slideouttoright;
transform: translateX(100%);
animation-name: slideouttoright;
}
.slide.in.reverse {
-webkit-transform: translate3d(0,0,0);
-webkit-animation-name: slideinfromleft;
-moz-transform: translateX(0);
-moz-animation-name: slideinfromleft;
transform: translateX(0);
animation-name: slideinfromleft;
}
.slidefade.out {
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
-webkit-animation-duration: 225ms;
-moz-transform: translateX(-100%);
-moz-animation-name: slideouttoleft;
-moz-animation-duration: 225ms;
transform: translateX(-100%);
animation-name: slideouttoleft;
animation-duration: 225ms;
}
.slidefade.in {
-webkit-transform: translateX(0);
-webkit-animation-name: fadein;
-webkit-animation-duration: 200ms;
-moz-transform: translateX(0);
-moz-animation-name: fadein;
-moz-animation-duration: 200ms;
transform: translateX(0);
animation-name: fadein;
animation-duration: 200ms;
}
.slidefade.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
-webkit-animation-duration: 200ms;
-moz-transform: translateX(100%);
-moz-animation-name: slideouttoright;
-moz-animation-duration: 200ms;
transform: translateX(100%);
animation-name: slideouttoright;
animation-duration: 200ms;
}
.slidefade.in.reverse {
-webkit-transform: translateX(0);
-webkit-animation-name: fadein;
-webkit-animation-duration: 200ms;
-moz-transform: translateX(0);
-moz-animation-name: fadein;
-moz-animation-duration: 200ms;
transform: translateX(0);
animation-name: fadein;
animation-duration: 200ms;
}
/* slide down */
.slidedown.out {
-webkit-animation-name: fadeout;
-webkit-animation-duration: 100ms;
-moz-animation-name: fadeout;
-moz-animation-duration: 100ms;
animation-name: fadeout;
animation-duration: 100ms;
}
.slidedown.in {
-webkit-transform: translateY(0);
-webkit-animation-name: slideinfromtop;
-webkit-animation-duration: 250ms;
-moz-transform: translateY(0);
-moz-animation-name: slideinfromtop;
-moz-animation-duration: 250ms;
transform: translateY(0);
animation-name: slideinfromtop;
animation-duration: 250ms;
}
.slidedown.in.reverse {
-webkit-animation-name: fadein;
-webkit-animation-duration: 150ms;
-moz-animation-name: fadein;
-moz-animation-duration: 150ms;
animation-name: fadein;
animation-duration: 150ms;
}
.slidedown.out.reverse {
-webkit-transform: translateY(-100%);
-webkit-animation-name: slideouttotop;
-webkit-animation-duration: 200ms;
-moz-transform: translateY(-100%);
-moz-animation-name: slideouttotop;
-moz-animation-duration: 200ms;
transform: translateY(-100%);
animation-name: slideouttotop;
animation-duration: 200ms;
}
@-webkit-keyframes slideinfromtop {
from { -webkit-transform: translateY(-100%); }
to { -webkit-transform: translateY(0); }
}
@-moz-keyframes slideinfromtop {
from { -moz-transform: translateY(-100%); }
to { -moz-transform: translateY(0); }
}
@keyframes slideinfromtop {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
@-webkit-keyframes slideouttotop {
from { -webkit-transform: translateY(0); }
to { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes slideouttotop {
from { -moz-transform: translateY(0); }
to { -moz-transform: translateY(-100%); }
}
@keyframes slideouttotop {
from { transform: translateY(0); }
to { transform: translateY(-100%); }
}
/* slide up */
.slideup.out {
-webkit-animation-name: fadeout;
-webkit-animation-duration: 100ms;
-moz-animation-name: fadeout;
-moz-animation-duration: 100ms;
animation-name: fadeout;
animation-duration: 100ms;
}
.slideup.in {
-webkit-transform: translateY(0);
-webkit-animation-name: slideinfrombottom;
-webkit-animation-duration: 250ms;
-moz-transform: translateY(0);
-moz-animation-name: slideinfrombottom;
-moz-animation-duration: 250ms;
transform: translateY(0);
animation-name: slideinfrombottom;
animation-duration: 250ms;
}
.slideup.in.reverse {
-webkit-animation-name: fadein;
-webkit-animation-duration: 150ms;
-moz-animation-name: fadein;
-moz-animation-duration: 150ms;
animation-name: fadein;
animation-duration: 150ms;
}
.slideup.out.reverse {
-webkit-transform: translateY(100%);
-webkit-animation-name: slideouttobottom;
-webkit-animation-duration: 200ms;
-moz-transform: translateY(100%);
-moz-animation-name: slideouttobottom;
-moz-animation-duration: 200ms;
transform: translateY(100%);
animation-name: slideouttobottom;
animation-duration: 200ms;
}
@-webkit-keyframes slideinfrombottom {
from { -webkit-transform: translateY(100%); }
to { -webkit-transform: translateY(0); }
}
@-moz-keyframes slideinfrombottom {
from { -moz-transform: translateY(100%); }
to { -moz-transform: translateY(0); }
}
@keyframes slideinfrombottom {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@-webkit-keyframes slideouttobottom {
from { -webkit-transform: translateY(0); }
to { -webkit-transform: translateY(100%); }
}
@-moz-keyframes slideouttobottom {
from { -moz-transform: translateY(0); }
to { -moz-transform: translateY(100%); }
}
@keyframes slideouttobottom {
from { transform: translateY(0); }
to { transform: translateY(100%); }
}
/* The properties in this rule are only necessary for the 'flip' transition.
* We need specify the perspective to create a projection matrix. This will add
* some depth as the element flips. The depth number represents the distance of
* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
* value.
*/
.viewport-flip {
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
position: absolute;
}
.flip {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-moz-backface-visibility: hidden;
-moz-transform: translateX(0);
backface-visibility: hidden;
transform: translateX(0);
}
.flip.out {
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
-webkit-animation-duration: 175ms;
-moz-transform: rotateY(-90deg) scale(.9);
-moz-animation-name: flipouttoleft;
-moz-animation-duration: 175ms;
transform: rotateY(-90deg) scale(.9);
animation-name: flipouttoleft;
animation-duration: 175ms;
}
.flip.in {
-webkit-animation-name: flipintoright;
-webkit-animation-duration: 225ms;
-moz-animation-name: flipintoright;
-moz-animation-duration: 225ms;
animation-name: flipintoright;
animation-duration: 225ms;
}
.flip.out.reverse {
-webkit-transform: rotateY(90deg) scale(.9);
-webkit-animation-name: flipouttoright;
-moz-transform: rotateY(90deg) scale(.9);
-moz-animation-name: flipouttoright;
transform: rotateY(90deg) scale(.9);
animation-name: flipouttoright;
}
.flip.in.reverse {
-webkit-animation-name: flipintoleft;
-moz-animation-name: flipintoleft;
animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@-moz-keyframes flipouttoleft {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(-90deg) scale(.9); }
}
@keyframes flipouttoleft {
from { transform: rotateY(0); }
to { transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
from { -webkit-transform: rotateY(0) ; }
to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@-moz-keyframes flipouttoright {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(90deg) scale(.9); }
}
@keyframes flipouttoright {
from { transform: rotateY(0); }
to { transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
from { -webkit-transform: rotateY(-90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoleft {
from { -moz-transform: rotateY(-90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
@keyframes flipintoleft {
from { transform: rotateY(-90deg) scale(.9); }
to { transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
from { -webkit-transform: rotateY(90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoright {
from { -moz-transform: rotateY(90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
@keyframes flipintoright {
from { transform: rotateY(90deg) scale(.9); }
to { transform: rotateY(0); }
}
/* The properties in this rule are only necessary for the 'flip' transition.
* We need specify the perspective to create a projection matrix. This will add
* some depth as the element flips. The depth number represents the distance of
* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
* value.
*/
.viewport-turn {
-webkit-perspective: 200px;
-moz-perspective: 200px;
-ms-perspective: 200px;
perspective: 200px;
position: absolute;
}
.turn {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-webkit-transform-origin: 0;
-moz-backface-visibility: hidden;
-moz-transform: translateX(0);
-moz-transform-origin: 0;
backface-visibility :hidden;
transform: translateX(0);
transform-origin: 0;
}
.turn.out {
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
-webkit-animation-duration: 125ms;
-moz-transform: rotateY(-90deg) scale(.9);
-moz-animation-name: flipouttoleft;
-moz-animation-duration: 125ms;
transform: rotateY(-90deg) scale(.9);
animation-name: flipouttoleft;
animation-duration: 125ms;
}
.turn.in {
-webkit-animation-name: flipintoright;
-webkit-animation-duration: 250ms;
-moz-animation-name: flipintoright;
-moz-animation-duration: 250ms;
animation-name: flipintoright;
animation-duration: 250ms;
}
.turn.out.reverse {
-webkit-transform: rotateY(90deg) scale(.9);
-webkit-animation-name: flipouttoright;
-moz-transform: rotateY(90deg) scale(.9);
-moz-animation-name: flipouttoright;
transform: rotateY(90deg) scale(.9);
animation-name: flipouttoright;
}
.turn.in.reverse {
-webkit-animation-name: flipintoleft;
-moz-animation-name: flipintoleft;
animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@-moz-keyframes flipouttoleft {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(-90deg) scale(.9); }
}
@keyframes flipouttoleft {
from { transform: rotateY(0); }
to { transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
from { -webkit-transform: rotateY(0) ; }
to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@-moz-keyframes flipouttoright {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(90deg) scale(.9); }
}
@keyframes flipouttoright {
from { transform: rotateY(0); }
to { transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
from { -webkit-transform: rotateY(-90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoleft {
from { -moz-transform: rotateY(-90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
@keyframes flipintoleft {
from { transform: rotateY(-90deg) scale(.9); }
to { transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
from { -webkit-transform: rotateY(90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoright {
from { -moz-transform: rotateY(90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
@keyframes flipintoright {
from { transform: rotateY(90deg) scale(.9); }
to { transform: rotateY(0); }
}
/* flow transition */
.flow {
-webkit-transform-origin: 50% 30%;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
-moz-transform-origin: 50% 30%;
-moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
transform-origin: 50% 30%;
box-shadow: 0 0 20px rgba(0,0,0,.4);
}
.ui-dialog.flow {
-webkit-transform-origin: none;
-webkit-box-shadow: none;
-moz-transform-origin: none;
-moz-box-shadow: none;
transform-origin: none;
box-shadow: none;
}
.flow.out {
-webkit-transform: translateX(-100%) scale(.7);
-webkit-animation-name: flowouttoleft;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 350ms;
-moz-transform: translateX(-100%) scale(.7);
-moz-animation-name: flowouttoleft;
-moz-animation-timing-function: ease;
-moz-animation-duration: 350ms;
transform: translateX(-100%) scale(.7);
animation-name: flowouttoleft;
animation-timing-function: ease;
animation-duration: 350ms;
}
.flow.in {
-webkit-transform: translateX(0) scale(1);
-webkit-animation-name: flowinfromright;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 350ms;
-moz-transform: translateX(0) scale(1);
-moz-animation-name: flowinfromright;
-moz-animation-timing-function: ease;
-moz-animation-duration: 350ms;
transform: translateX(0) scale(1);
animation-name: flowinfromright;
animation-timing-function: ease;
animation-duration: 350ms;
}
.flow.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: flowouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: flowouttoright;
transform: translateX(100%);
animation-name: flowouttoright;
}
.flow.in.reverse {
-webkit-animation-name: flowinfromleft;
-moz-animation-name: flowinfromleft;
animation-name: flowinfromleft;
}
@-webkit-keyframes flowouttoleft {
0% { -webkit-transform: translateX(0) scale(1); }
60%, 70% { -webkit-transform: translateX(0) scale(.7); }
100% { -webkit-transform: translateX(-100%) scale(.7); }
}
@-moz-keyframes flowouttoleft {
0% { -moz-transform: translateX(0) scale(1); }
60%, 70% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(-100%) scale(.7); }
}
@keyframes flowouttoleft {
0% { transform: translateX(0) scale(1); }
60%, 70% { transform: translateX(0) scale(.7); }
100% { transform: translateX(-100%) scale(.7); }
}
@-webkit-keyframes flowouttoright {
0% { -webkit-transform: translateX(0) scale(1); }
60%, 70% { -webkit-transform: translateX(0) scale(.7); }
100% { -webkit-transform: translateX(100%) scale(.7); }
}
@-moz-keyframes flowouttoright {
0% { -moz-transform: translateX(0) scale(1); }
60%, 70% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(100%) scale(.7); }
}
@keyframes flowouttoright {
0% { transform: translateX(0) scale(1); }
60%, 70% { transform: translateX(0) scale(.7); }
100% { transform: translateX(100%) scale(.7); }
}
@-webkit-keyframes flowinfromleft {
0% { -webkit-transform: translateX(-100%) scale(.7); }
30%, 40% { -webkit-transform: translateX(0) scale(.7); }
100% { -webkit-transform: translateX(0) scale(1); }
}
@-moz-keyframes flowinfromleft {
0% { -moz-transform: translateX(-100%) scale(.7); }
30%, 40% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(0) scale(1); }
}
@keyframes flowinfromleft {
0% { transform: translateX(-100%) scale(.7); }
30%, 40% { transform: translateX(0) scale(.7); }
100% { transform: translateX(0) scale(1); }
}
@-webkit-keyframes flowinfromright {
0% { -webkit-transform: translateX(100%) scale(.7); }
30%, 40% { -webkit-transform: translateX(0) scale(.7); }
100% { -webkit-transform: translateX(0) scale(1); }
}
@-moz-keyframes flowinfromright {
0% { -moz-transform: translateX(100%) scale(.7); }
30%, 40% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(0) scale(1); }
}
@keyframes flowinfromright {
0% { transform: translateX(100%) scale(.7); }
30%, 40% { transform: translateX(0) scale(.7); }
100% { transform: translateX(0) scale(1); }
}
.ui-field-contain,
.ui-mobile fieldset.ui-field-contain {
display: block;
position: relative;
overflow: visible;
clear: both;
padding: .8em 0;
}
.ui-field-contain > label ~ [class*="ui-"],
.ui-field-contain .ui-controlgroup-controls {
margin: 0;
}
.ui-field-contain:last-child {
border-bottom-width: 0;
}
@media (min-width: 28em) {
.ui-field-contain,
.ui-mobile fieldset.ui-field-contain {
padding: 0;
margin: 1em 0;
border-bottom-width: 0;
}
.ui-field-contain:before,
.ui-field-contain:after {
content: "";
display: table;
}
.ui-field-contain:after {
clear: both;
}
.ui-field-contain > label,
.ui-field-contain .ui-controlgroup-label,
.ui-field-contain > .ui-rangeslider > label {
float: left;
width: 20%;
margin: .5em 2% 0 0;
}
.ui-popup .ui-field-contain > label,
.ui-popup .ui-field-contain .ui-controlgroup-label,
.ui-popup .ui-field-contain > .ui-rangeslider > label {
float: none;
width: auto;
margin: 0 0 .4em;
}
.ui-field-contain > label ~ [class*="ui-"],
.ui-field-contain .ui-controlgroup-controls {
float: left;
width: 78%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* ui-hide-label deprecated in 1.4. TODO: Remove in 1.5 */
.ui-hide-label > label ~ [class*="ui-"],
.ui-hide-label .ui-controlgroup-controls,
.ui-popup .ui-field-contain > label ~ [class*="ui-"],
.ui-popup .ui-field-contain .ui-controlgroup-controls {
float: none;
width: 100%;
}
.ui-field-contain > label ~ .ui-btn-inline {
width: auto;
margin-right: .625em;
}
}
/* content configurations. */
.ui-grid-a,
.ui-grid-b,
.ui-grid-c,
.ui-grid-d,
.ui-grid-solo {
overflow: hidden;
}
.ui-block-a,
.ui-block-b,
.ui-block-c,
.ui-block-d,
.ui-block-e {
margin: 0;
padding: 0;
border: 0;
float: left;
min-height: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* force new row */
.ui-block-a {
clear: left;
}
ul.ui-grid-a,
ul.ui-grid-b,
ul.ui-grid-c,
ul.ui-grid-d,
ul.ui-grid-solo,
li.ui-block-a,
li.ui-block-b,
li.ui-block-c,
li.ui-block-d,
li.ui-block-e {
margin-left: 0;
margin-right: 0;
padding: 0;
list-style: none;
}
/* No margin in grids for 100% width button elements until we can use max-width: fill-available; */
[class*="ui-block-"] > button.ui-btn {
margin-right: 0;
margin-left: 0;
}
[class*="ui-block-"] > .ui-btn,
[class*="ui-block-"] > .ui-select,
[class*="ui-block-"] > .ui-checkbox,
[class*="ui-block-"] > .ui-radio,
[class*="ui-block-"] > button.ui-btn-inline,
[class*="ui-block-"] > button.ui-btn-icon-notext {
margin-right: .3125em;
margin-left: .3125em;
}
.ui-grid-a > .ui-block-a,
.ui-grid-a > .ui-block-b {
/* width: 49.95%; IE7 */
/* margin-right: -.5px; BB5 */
width: 50%;
}
.ui-grid-b > .ui-block-a,
.ui-grid-b > .ui-block-b,
.ui-grid-b > .ui-block-c {
/* width: 33.25%; IE7 */
/* margin-right: -.5px; BB5 */
width: 33.333%;
}
.ui-grid-c > .ui-block-a,
.ui-grid-c > .ui-block-b,
.ui-grid-c > .ui-block-c,
.ui-grid-c > .ui-block-d {
/* width: 24.925%; IE7 */
/* margin-right: -.5px; BB5 */
width: 25%;
}
.ui-grid-d > .ui-block-a,
.ui-grid-d > .ui-block-b,
.ui-grid-d > .ui-block-c,
.ui-grid-d > .ui-block-d,
.ui-grid-d > .ui-block-e {
/* width: 19.925%; IE7 */
width: 20%;
}
.ui-grid-solo > .ui-block-a {
width: 100%;
float: none;
}
/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
@media (max-width: 35em) {
.ui-responsive > .ui-block-a,
.ui-responsive > .ui-block-b,
.ui-responsive > .ui-block-c,
.ui-responsive > .ui-block-d,
.ui-responsive > .ui-block-e {
width: 100%;
float: none;
}
}
/* fixed page header & footer configuration */
.ui-header-fixed,
.ui-footer-fixed {
left: 0;
right: 0;
width: 100%;
position: fixed;
z-index: 1000;
}
.ui-header-fixed {
top: -1px;
padding-top: 1px;
}
.ui-header-fixed.ui-fixed-hidden {
top: 0;
padding-top: 0;
}
.ui-header-fixed .ui-btn-left,
.ui-header-fixed .ui-btn-right {
margin-top: 1px;
}
.ui-header-fixed.ui-fixed-hidden .ui-btn-left,
.ui-header-fixed.ui-fixed-hidden .ui-btn-right {
margin-top: 0;
}
.ui-footer-fixed {
bottom: -1px;
padding-bottom: 1px;
}
.ui-footer-fixed.ui-fixed-hidden {
bottom: 0;
padding-bottom: 0;
}
.ui-header-fullscreen,
.ui-footer-fullscreen {
filter: Alpha(Opacity=90);
opacity: .9;
}
/* updatePagePadding() will update the padding to actual height of header and footer. */
.ui-page-header-fixed {
padding-top: 2.8125em;
}
.ui-page-footer-fixed {
padding-bottom: 2.8125em;
}
.ui-page-header-fullscreen > .ui-content,
.ui-page-footer-fullscreen > .ui-content {
padding: 0;
}
.ui-fixed-hidden {
position: absolute;
}
/* Tap toggle: hide external fixed footer. See issue #6604 */
.ui-footer-fixed.ui-fixed-hidden {
display: none;
}
.ui-page .ui-footer-fixed.ui-fixed-hidden {
display: block
}
.ui-page-header-fullscreen .ui-fixed-hidden,
.ui-page-footer-fullscreen .ui-fixed-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
.ui-header-fixed .ui-btn,
.ui-footer-fixed .ui-btn {
z-index: 10;
}
/* workarounds for other widgets */
.ui-android-2x-fixed .ui-li-has-thumb {
-webkit-transform: translate3d(0,0,0);
}
.ui-navbar {
max-width: 100%;
}
.ui-navbar ul:before,
.ui-navbar ul:after {
content: "";
display: table;
}
.ui-navbar ul:after {
clear: both;
}
.ui-navbar ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
display: block;
border: 0;
max-width: 100%;
overflow: visible;
}
.ui-navbar li .ui-btn {
font-size: 12.5px;
display: block;
margin: 0;
border-right-width: 0;
}
.ui-navbar .ui-btn:focus {
z-index: 1;
}
/* fixes gaps caused by subpixel problem */
.ui-navbar li:last-child .ui-btn {
margin-right: -4px;
}
.ui-navbar li:last-child .ui-btn:after {
margin-right: 4px;
}
.ui-content .ui-navbar li:last-child .ui-btn,
.ui-content .ui-navbar .ui-grid-duo .ui-block-b .ui-btn {
border-right-width: 1px;
margin-right: 0;
}
.ui-content .ui-navbar li:last-child .ui-btn:after,
.ui-content .ui-navbar .ui-grid-duo .ui-block-b .ui-btn:after {
margin-right: 0;
}
.ui-navbar .ui-grid-duo .ui-block-a:last-child .ui-btn {
border-right-width: 1px;
margin-right: -1px;
}
.ui-navbar .ui-grid-duo .ui-block-a:last-child .ui-btn:after {
margin-right: 1px;
}
.ui-navbar .ui-grid-duo .ui-btn {
border-top-width: 0;
}
.ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
.ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn {
border-top-width: 1px;
}
.ui-header .ui-navbar .ui-btn,
.ui-footer .ui-navbar .ui-btn {
border-top-width: 0;
border-bottom-width: 0;
}
.ui-header .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
.ui-footer .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
.ui-header .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn,
.ui-footer .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn {
border-top-width: 0;
}
.ui-header .ui-title ~ .ui-navbar .ui-btn,
.ui-footer .ui-title ~ .ui-navbar .ui-btn,
.ui-header .ui-navbar .ui-grid-duo .ui-btn,
.ui-footer .ui-navbar .ui-grid-duo .ui-btn,
.ui-header .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
.ui-footer .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
.ui-header .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn,
.ui-footer .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn {
border-top-width: 1px;
}
/* Hide the native input element */
.ui-input-btn input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
outline: 0;
-webkit-border-radius: inherit;
border-radius: inherit;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
background: #fff;
background: rgba(255,255,255,0);
filter: Alpha(Opacity=0);
opacity: .1;
font-size: 1px;
text-indent: -9999px;
z-index: 2;
}
/* Fixes IE/WP filter alpha opacity bugs */
.ui-input-btn.ui-state-disabled input {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
.ui-collapsible {
margin: 0 -1em;
}
.ui-collapsible-inset,
.ui-collapsible-set {
margin: .5em 0;
}
.ui-collapsible-heading {
display: block;
margin: 0;
padding: 0;
position: relative;
}
.ui-collapsible-heading .ui-btn {
text-align: left;
margin: 0;
border-left-width: 0;
border-right-width: 0;
}
.ui-collapsible-heading .ui-btn-icon-top,
.ui-collapsible-heading .ui-btn-icon-bottom {
text-align: center;
}
.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
border-right-width: 1px;
border-left-width: 1px;
}
.ui-collapsible-collapsed + .ui-collapsible:not(.ui-collapsible-inset) > .ui-collapsible-heading .ui-btn {
border-top-width: 0;
}
.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-btn {
border-top-width: 1px;
}
.ui-collapsible-heading-status {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
.ui-collapsible-content {
display: block;
margin: 0;
padding: .5em 1em;
}
.ui-collapsible-themed-content .ui-collapsible-content {
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 1px;
border-style: solid;
}
.ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content {
border-left-width: 1px;
border-right-width: 1px;
}
.ui-collapsible-inset .ui-collapsible-content {
margin: 0;
}
.ui-collapsible-content-collapsed {
display: none;
}
.ui-collapsible-set > .ui-collapsible.ui-corner-all {
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-collapsible-heading,
.ui-collapsible-heading > .ui-btn {
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-collapsible-set .ui-collapsible.ui-first-child {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
}
.ui-collapsible-content,
.ui-collapsible-set .ui-collapsible.ui-last-child {
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.ui-collapsible-themed-content:not(.ui-collapsible-collapsed) > .ui-collapsible-heading {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
}
.ui-collapsible-set .ui-collapsible {
margin: -1px -1em 0;
}
.ui-collapsible-set .ui-collapsible-inset {
margin: -1px 0 0;
}
.ui-collapsible-set .ui-collapsible.ui-first-child {
margin-top: 0;
}
.ui-controlgroup,
fieldset.ui-controlgroup {
padding: 0;
margin: .5em 0;
}
.ui-field-contain .ui-controlgroup,
.ui-field-contain fieldset.ui-controlgroup {
margin: 0;
}
.ui-mini .ui-controlgroup-label {
font-size: 16px;
}
.ui-controlgroup.ui-mini .ui-btn-icon-notext,
.ui-controlgroup .ui-mini.ui-btn-icon-notext {
font-size: inherit;
}
.ui-controlgroup-controls .ui-btn,
.ui-controlgroup-controls .ui-checkbox,
.ui-controlgroup-controls .ui-radio,
.ui-controlgroup-controls .ui-select {
margin: 0;
}
.ui-controlgroup-controls .ui-btn:focus,
.ui-controlgroup-controls .ui-btn.ui-focus {
z-index: 1;
}
.ui-controlgroup-controls li {
list-style: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls {
display: inline-block;
vertical-align: middle;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls:before,
.ui-controlgroup-horizontal .ui-controlgroup-controls:after {
content: "";
display: table;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls:after {
clear: both;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn,
.ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-checkbox,
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-radio,
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
float: left;
clear: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn,
.ui-controlgroup-controls .ui-btn-icon-notext {
width: auto;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn-icon-notext,
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn-icon-notext {
width: 1.5em;
}
.ui-controlgroup-controls .ui-btn-icon-notext {
height: auto;
padding: .7em 1em;
}
.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn {
border-bottom-width: 0;
}
.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn.ui-last-child {
border-bottom-width: 1px;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn {
border-right-width: 0;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn.ui-last-child {
border-right-width: 1px;
}
.ui-controlgroup-controls .ui-btn-corner-all,
.ui-controlgroup-controls .ui-btn.ui-corner-all {
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-controlgroup-controls,
.ui-controlgroup-controls .ui-radio,
.ui-controlgroup-controls .ui-checkbox,
.ui-controlgroup-controls .ui-select,
.ui-controlgroup-controls li {
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-controlgroup-vertical .ui-btn.ui-first-child {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}
.ui-controlgroup-vertical .ui-btn.ui-last-child {
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
.ui-controlgroup-horizontal .ui-btn.ui-first-child {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.ui-controlgroup-horizontal .ui-btn.ui-last-child {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
.ui-controlgroup-controls a.ui-shadow:not(:focus),
.ui-controlgroup-controls button.ui-shadow:not(:focus),
.ui-controlgroup-controls div.ui-shadow:not(.ui-focus) {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
/* Fixes legend not wrapping on IE10 */
.ui-controlgroup-label legend {
max-width: 100%;
}
.ui-controlgroup-controls > label {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
.ui-dialog {
background: none !important; /* this is to ensure that dialog theming does not apply (by default at least) on the page div */
}
.ui-dialog-contain {
width: 92.5%;
max-width: 500px;
margin: 10% auto 1em auto;
padding: 0;
position: relative;
top: -1em;
}
.ui-dialog-contain > .ui-header,
.ui-dialog-contain > .ui-content,
.ui-dialog-contain > .ui-footer {
display: block;
position: relative;
width: auto;
margin: 0;
}
.ui-dialog-contain > .ui-header {
overflow: hidden;
z-index: 10;
padding: 0;
border-top-width: 0;
}
.ui-dialog-contain > .ui-footer {
z-index: 10;
padding: 0 1em;
border-bottom-width: 0;
}
.ui-popup-open .ui-header-fixed,
.ui-popup-open .ui-footer-fixed {
position: absolute !important; /* See issues #4816, #4844 and #4874 and popup.js */
}
.ui-popup-screen {
background-image: url("data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); /* Necessary to set some form of background to ensure element is clickable in IE6/7. While legacy IE won't understand the data-URI'd image, it ensures no additional requests occur in all other browsers with little overhead. */
top: 0;
left: 0;
right: 0;
bottom: 1px;
position: absolute;
filter: Alpha(Opacity=0);
opacity: 0;
z-index: 1099;
}
.ui-popup-screen.in {
opacity: 0.5;
filter: Alpha(Opacity=50);
}
.ui-popup-screen.out {
opacity: 0;
filter: Alpha(Opacity=0);
}
.ui-popup-container {
z-index: 1100;
display: inline-block;
position: absolute;
padding: 0;
outline: 0;
}
.ui-popup {
position: relative;
}
.ui-popup.ui-body-inherit {
border-width: 1px;
border-style: solid;
}
.ui-popup-hidden {
left: 0;
top: 0;
position: absolute !important;
visibility: hidden;
}
.ui-popup-truncate {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
.ui-popup.ui-content,
.ui-popup .ui-content {
overflow: visible;
}
.ui-popup > .ui-header {
border-top-width: 0;
}
.ui-popup > .ui-footer {
border-bottom-width: 0;
}
.ui-popup > p,
.ui-popup > h1,
.ui-popup > h2,
.ui-popup > h3,
.ui-popup > h4,
.ui-popup > h5,
.ui-popup > h6 {
margin: .5em .4375em;
}
.ui-popup > span {
display: block;
margin: .5em .4375em;
}
.ui-popup-container .ui-content > p,
.ui-popup-container .ui-content > h1,
.ui-popup-container .ui-content > h2,
.ui-popup-container .ui-content > h3,
.ui-popup-container .ui-content > h4,
.ui-popup-container .ui-content > h5,
.ui-popup-container .ui-content > h6 {
margin: .5em 0;
}
.ui-popup-container .ui-content > span {
margin: 0;
}
.ui-popup-container .ui-content > p:first-child,
.ui-popup-container .ui-content > h1:first-child,
.ui-popup-container .ui-content > h2:first-child,
.ui-popup-container .ui-content > h3:first-child,
.ui-popup-container .ui-content > h4:first-child,
.ui-popup-container .ui-content > h5:first-child,
.ui-popup-container .ui-content > h6:first-child {
margin-top: 0;
}
.ui-popup-container .ui-content > p:last-child,
.ui-popup-container .ui-content > h1:last-child,
.ui-popup-container .ui-content > h2:last-child,
.ui-popup-container .ui-content > h3:last-child,
.ui-popup-container .ui-content > h4:last-child,
.ui-popup-container .ui-content > h5:last-child,
.ui-popup-container .ui-content > h6:last-child {
margin-bottom: 0;
}
.ui-popup > img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.ui-popup:not(.ui-content) > img:only-child,
.ui-popup:not(.ui-content) > .ui-btn-left:first-child + img:last-child,
.ui-popup:not(.ui-content) > .ui-btn-right:first-child + img:last-child {
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-popup iframe {
vertical-align: middle;
}
.ui-popup > .ui-btn-left,
.ui-popup > .ui-btn-right {
position: absolute;
top: -11px;
margin: 0;
z-index: 1101;
}
.ui-popup > .ui-btn-left {
left: -11px;
}
.ui-popup > .ui-btn-right {
right: -11px;
}
/* Dimensions related to the popup arrow
-----------------------------------------------------------------------------------------------------------*/
/* desired triangle height: 10px */
/**
* guide for the arrow - its width, height, and offset are theme-dependent and
* should be expessed as left, right, top, bottom, so that the element bearing
* such a class becomes stretched inside its parent position: relative element.
* The left/top/right/bottom specified below should reflect the corresponding
* border radii and so it leaves room for the shadow:
* ..--------------------..
* ." ^ top ".
* / v \
* | +------------------+ |
* | | | |
* | left| |right|
* |<--->| |<--->|
* | +------------------+ |
* \ ^ /
* `. v