vendor/assets/javascripts/webshims/shims/styles/shim.css in webshims-rails-0.4.7 vs vendor/assets/javascripts/webshims/shims/styles/shim.css in webshims-rails-1.10.3

- old
+ new

@@ -1,697 +1,1017 @@ -article,aside,canvas,details,figcaption,figure, -footer,header,hgroup,menu,nav,section,summary { - display:block; +.input-picker .ws-picker-body, .input-picker .ws-button-row, .input-picker .picker-grid, .input-picker .picker-list { + zoom: 1; } +.input-picker .ws-picker-body:before, .input-picker .ws-button-row:before, .input-picker .picker-grid:before, .input-picker .picker-list:before, .input-picker .ws-picker-body:after, .input-picker .ws-button-row:after, .input-picker .picker-grid:after, .input-picker .picker-list:after { + display: table; + clear: both; + content: ' '; +} + +article, aside, canvas, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { + display: block; +} + audio { - display: none; - height: 0; - width: 0; + display: none; + height: 0; + width: 0; + overflow: hidden; } -audio, + video { - overflow: hidden; + overflow: hidden; } -audio.webshims-controls, -video { - display: inline-block; - min-height: 45px; - min-width: 40px; + +video, +audio[controls], +audio.webshims-controls { + display: inline-block; + min-height: 45px; + min-width: 40px; } -audio[controls] { - display: inline-block; - min-height: 45px; - min-width: 40px; -} + video > *, audio > * { - visibility: hidden; + visibility: hidden; } -.no-swf video > *, -.no-swf audio > * { - visibility: inherit; +.no-swf video > *, .no-swf +audio > * { + visibility: inherit; } + .flashblocker-assumed { - min-height: 20px; - min-width: 20px; + min-height: 20px; + min-width: 20px; + z-index: 2147483647; } + .cue-display { - position: absolute !important; - margin: 0; - padding: 0px !important; - max-width: 100% !important; - max-height: 100% !important; - border: none !important; - background: none !important; - text-align: center; - visibility: hidden; - font-family: sans-serif; - font-size: 12px; - white-space: pre-wrap; - overflow: hidden; + position: absolute !important; + margin: 0; + padding: 0px !important; + max-width: 100% !important; + max-height: 100% !important; + border: none !important; + background: none !important; + text-align: center; + visibility: hidden; + font-family: sans-serif; + font-size: 12px; + white-space: pre-wrap; + overflow: hidden; } .cue-display b { - font-weight: bold; + font-weight: bold; } .cue-display i { - font-style: italic; + font-style: italic; } .cue-display u { - text-decoration: underline; + text-decoration: underline; } .cue-display span.cue-wrapper { - position: absolute; - left: 0; - bottom: 0; - right: 0; - display: block; - padding: 0; - margin: 0; - width: 100%; - font-size: 160%; - color: #fff; - visibility: visible !important; + position: absolute; + left: 0; + bottom: 0; + right: 0; + display: block; + padding: 0; + margin: 0; + width: 100%; + font-size: 160%; + color: #fff; + visibility: visible !important; } .cue-display .cue-line { - display: block; + display: block; } .cue-display span.cue { - display: inline-block; - padding: 3px 5px; - background: #000; - background: rgba(0,0,0,0.8); - color: #fff; + display: inline-block; + padding: 3px 5px; + background: #000; + background: rgba(0, 0, 0, 0.8); + color: #fff; } .cue-display .description-cues { - position: absolute; - top: -99px; - left: -99px; - display: block; - width: 5px; - height: 5px; - overflow: hidden; + position: absolute; + top: -99px; + left: -99px; + display: block; + width: 5px; + height: 5px; + overflow: hidden; } + mark { - background-color: #ff9; - color: #000; - font-style: italic; - font-weight: bold; + background-color: #ff9; + color: #000; + font-style: italic; + font-weight: bold; } /* reset */ -.input-range .ui-slider-range, +.ws-range, +.ws-range *, .placeholder-box, .placeholder-text, .input-datetime-local, -.step-controls, -.step-controls span, -.input-range, -.input-range .ui-slider-handle, -.input-range .ui-slider-range, -.details-open-indicator { - margin: 0; - padding: 0; - border: none; - width: auto; - background: transparent none; +.input-buttons, +.input-buttons *, +.details-open-indicator, +.ws-input-seperator, +progress span.progress-value { + margin: 0; + padding: 0; + border: none; + width: auto; + background: transparent none; } + output { - position: relative; + position: relative; } .webshims-visual-hide { - position: absolute !important; - top: 0 !important; - left: 0 !important; - visibility: hidden !important; - width: 0 !important; - height: 0 !important; - overflow: hidden !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; + visibility: hidden !important; + width: 0 !important; + height: 0 !important; + overflow: hidden !important; } .webshims-visual-hide * { - visibility: hidden !important; + visibility: hidden !important; } /* placeholder */ .placeholder-box { - position: relative; - display: inline-block; - zoom: 1; + position: relative; + display: inline-block; + zoom: 1; } .polyfill-important .placeholder-box { - position: relative !important; - display: inline-block !important; - margin: 0 !important; - padding: 0 !important; - width: auto !important; - height: auto !important; + position: relative !important; + display: inline-block !important; + margin: 0 !important; + padding: 0 !important; + width: auto !important; + height: auto !important; } + .placeholder-box-input { - vertical-align: bottom; + vertical-align: bottom; } .placeholder-box-left { - float: left; + float: left; } + .placeholder-box-right { - float: right; + float: right; } .placeholder-text { - position: absolute; - display: none; - top: 0; - left: 0; - overflow: hidden; - color: #999; - line-height: 1; - cursor: text; + position: absolute; + display: none; + top: 0; + left: 0; + overflow: hidden; + color: #999; + line-height: 1; + cursor: text; } -.polyfill-important .placeholder-text { - margin: 0 !important; - padding-right: 0 !important; - padding-bottom: 0 !important; - display: none !important; +.polyfill-important .placeholder-text { + margin: 0 !important; + padding-right: 0 !important; + padding-bottom: 0 !important; + display: none !important; } +.placeholder-visible .placeholder-text, .placeholder-text.placeholder-visible { + display: inline-block; +} .placeholder-box-input .placeholder-text { - white-space: nowrap; + white-space: nowrap; } + .placeholder-visible { - color: #999; + color: #999; } -.placeholder-visible .placeholder-text, -.placeholder-text.placeholder-visible { - display: inline-block; -} + .placeholder-focused.placeholder-visible { - color: #ccc; + color: #ccc; } -.polyfill-important .placeholder-visible .placeholder-text, -.polyfill-important .placeholder-text.placeholder-visible { - display: inline-block !important; + +.polyfill-important .placeholder-visible .placeholder-text, .polyfill-important .placeholder-text.placeholder-visible { + display: inline-block !important; } -/* datetime-local */ -.input-datetime-local { - display: inline-block; - zoom: 1; - vertical-align: middle; +/* spinner control for time, number (usable for date, datetime-local) */ +.has-input-buttons { + display: inline-block; } -.polyfill-important .input-datetime-local { - display: inline-block !important; - height: auto !important; - padding: 0 !important; - margin: 0 !important; - border: none !important; + +.polyfill-important .has-input-buttons { + display: inline-block !important; } -.polyfill-important .input-datetime-local input { - display: inline !important; + +.input-buttons, +.step-controls, +.ws-popover-opener { + zoom: 1; + overflow: hidden; + display: inline-block; + font-size: 0; + vertical-align: middle; + margin-top: -3px; + margin-left: -20px; } -.input-datetime-local-date { - margin: 0 2px 0 0; + +.step-controls, +.ws-popover-opener { + position: relative; + float: left; + margin: 0; + height: 19px; + width: 15px; } -.polyfill-important .input-datetime-local-date { - margin: 0 2px 0 0 !important; + +.ws-popover-opener { + position: relative; + zoom: 1; + overflow: visible; + margin: 0 0 0 2px; + width: 19px; + border-radius: 3px; + cursor: pointer; + background: #ccc; } -.input-datetime-local-time { - margin: 0 0 0 2px; + +.ws-popover-opener span { + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 13px; + height: 13px; + margin: -6.5px 0 0 -6.5px; + background: url(forms.png) no-repeat -322px -2px; } -.polyfill-important .input-datetime-local-time { - margin: 0 0 0 2px !important; + +.polyfill-important .input-buttons { + display: inline-block !important; + padding: 0 !important; + vertical-align: middle !important; } -img.ui-datepicker-trigger { - display: inline; - display: inline-block; - width: 16px; +.input-buttons.input-button-size-1.month-input-buttons, .input-buttons.input-button-size-1.date-input-buttons { + margin-left: -24px; } -/* spinner control for time, number (usable for date, datetime-local) */ -.has-step-controls { - display: inline; +.input-buttons.input-button-size-2 { + margin-left: -39px; } -.polyfill-important .has-step-controls { - display: inline !important; +.input-buttons.ws-disabled { + opacity: 0.95; } -.step-controls { - position: relative; - zoom: 1; - overflow: hidden; - display: inline-block; - font-size: 0; - vertical-align: middle; - vertical-align: top; - margin-left: -17px; - height: 19px; - width: 15px; +.input-buttons.ws-disabled *, .input-buttons.ws-readonly * { + cursor: default; } -.polyfill-important .step-controls { - display: inline-block !important; - padding: 0 !important; - vertical-align: top !important; -} + .step-controls span { - position: absolute; - display: inline-block; - overflow: hidden; - margin: 0 !important; - padding: 0 !important; - width: 15px; - height: 9px; - cursor: pointer; - font-size: 0; - line-height: 0; - background: url(forms.png) no-repeat 0 0; + position: absolute; + display: inline-block; + overflow: hidden; + margin: 0 !important; + padding: 0 !important; + width: 15px; + height: 9px; + cursor: pointer; + font-size: 0; + line-height: 0; + background: url(forms.png) no-repeat 0 0; } .polyfill-important .step-controls span { - display: inline-block !important; - margin: 0 !important; - padding: 0 !important; - font-size: 0 !important; + display: inline-block !important; + margin: 0 !important; + padding: 0 !important; + font-size: 0 !important; } - .step-controls span.step-up { - top: 0; - background-position: -80px 0; + top: 0; + background-position: -80px 0; } .step-controls span.step-up:hover { - background-position: -105px 0; + background-position: -105px 0; } -.step-controls > span.mousepress-ui.step-up { - background-position: -105px -20px; +.step-controls span.step-up.mousepress-ui { + background-position: -105px -20px; } +.ws-disabled .step-controls span.step-up { + background-position: -130px 0; +} .step-controls span.step-down { - bottom: 0; - background-position: -155px 0; + bottom: 0; + background-position: -155px 0; } .step-controls span.step-down:hover { - background-position: -180px 0; + background-position: -180px 0; } -.step-controls > span.mousepress-ui.step-down { - background-position: -180px -20px; +.step-controls span.step-down.mousepress-ui { + background-position: -180px -20px; } -/* disabled or readonly */ -.step-controls.disabled-step-control span { - opacity: 0.95; - cursor: default; +.ws-disabled .step-controls span.step-down { + background-position: -205px 0; } -.step-controls.disabled-step-control span.step-up { - background-position: -130px 0; + +.ws-input { + letter-spacing: -0.31em; + word-spacing: -0.43em; } -.step-controls.disabled-step-control span.step-down { - background-position: -205px 0; +.ws-input > * { + text-align: center; + letter-spacing: normal; + word-spacing: normal; } +.ws-input .ws-input-seperator { + vertical-align: middle; + width: 2%; + overflow: hidden; +} +.ws-input + .input-buttons { + margin-left: 2px; +} +.ws-input input, +.ws-input .ws-input-seperator { + -moz-box-sizing: border-box; + box-sizing: border-box; + text-align: center; + display: inline-block; +} +.polyfill-important .ws-input input, .polyfill-important +.ws-input .ws-input-seperator { + display: inline-block !important; +} -/* range */ -.input-range { - position: relative; - display: inline-block; - vertical-align: middle; - margin: 5px 0; - zoom: 1; - border: none; - height: 9px; - width: 155px; - border-radius: 1px; - background: url(forms.png) 0 -43px no-repeat; - cursor: pointer; - font-size: 0; - line-height: 0; +.ws-date .mm, +.ws-date .dd { + width: 23.5%; } -.polyfill-important .input-range { - display: inline-block !important; - padding: 0 !important; - font-size: 0 !important; +.no-boxsizing .ws-date .mm, .no-boxsizing +.ws-date .dd { + width: 16%; } -.input-range .ui-slider-handle { - top: 0; - position: absolute; - display: block; - z-index: 4; - overflow: hidden; - margin: -5px 0 0 -8px; - height: 22px; - width: 17px; - background: url(forms.png) 0 0 no-repeat; - cursor: pointer; - outline: none; - font-size: 0; - line-height: 0; +.ws-date .yy { + width: 48%; } -.input-range .ui-slider-handle:hover, -.input-range .ui-slider-handle:focus { - background-position: -17px 0; +.no-boxsizing .ws-date .yy { + width: 40%; } -.input-range .ui-slider-handle.ui-state-active { - background-position: -34px 0; + +.ws-month .mm, +.ws-month .yy { + width: 47.9%; } -.input-range.ui-slider-disabled { - cursor: default; - opacity: 0.95; +.no-boxsizing .ws-month .mm, .no-boxsizing +.ws-month .yy { + width: 41%; } -.input-range.ui-slider-disabled .ui-slider-handle { - cursor: default; - background-position: -51px 0; + +/* range */ +.ws-range { + position: relative; + display: inline-block; + vertical-align: middle; + margin: 0; + zoom: 1; + border: none; + height: 19px; + width: 155px; + border-radius: 1px; + background: url(forms.png) 0 -40px no-repeat; + cursor: pointer; + font-size: 0; + line-height: 0; } -.input-range .ui-slider-range { - position: absolute; - z-index: 1; - overflow: hidden; - display: block; - background: #b6e2fb; +.polyfill-important .ws-range { + display: inline-block !important; + padding: 0 !important; + font-size: 0 !important; } -.input-range .input-range .ui-slider-range, -.polyfill-important .input-range .ui-slider-handle { - position: absolute !important; - display: block !important; - padding: 0 !important; +.ws-range .ws-range-thumb { + top: 0; + position: absolute; + display: block; + z-index: 4; + overflow: hidden; + margin: -2px 0 0 -6px; + height: 22px; + width: 11px; + background: url(forms.png) -3px 0 no-repeat; + cursor: pointer; + outline: none; + font-size: 0; + line-height: 0; } -.input-range.ui-slider-horizontal .ui-slider-range { - top: 4px; - height: 1px; +.ws-range .ws-range-thumb:hover { + background-position: -20px 0; } -.input-range.ui-slider-horizontal .ui-slider-range-min { - left: 0; +.ws-range.ws-focus .ws-range-thumb { + background-position: -20px 0; } -.input-range.ui-slider-horizontal .ui-slider-range-max { - right: 0; +.ws-range.ws-active .ws-range-thumb { + background-position: -37px 0; } -.input-date-datepicker-control { - position: absolute; - zoom: 1; - display: none; - background-color: #fff; - z-index: 100; - overflow: visible; - padding: 5px; - font-family: "MS Shell Dlg", "Lucida Grande", "Calibri", sans-serif; - font-size: 14px; - border: 1px solid #333; +.ws-range[aria-disabled="true"], .ws-range[aria-readonly="true"] { + cursor: default; + opacity: 0.95; } -.polyfill-important .input-date-datepicker-control { - z-index: 999999999 !important; +.ws-range[aria-disabled="true"] .ws-range-thumb, .ws-range[aria-readonly="true"] .ws-range-thumb { + cursor: default; } -.input-date-datepicker-control .ui-datepicker-header { - position: relative; - margin: 0 0 3px; - padding: 2px 0; +.ws-range[aria-disabled="true"] .ws-range-thumb { + background-position: -54px 0; } -.input-date-datepicker-control .ui-datepicker-header select { - border: 1px solid #333; - padding: 1px 2px 2px; +.ws-range .ws-range-rail { + position: absolute; + display: block; + top: 0; + left: 5px; + right: 5px; + bottom: 0; + margin: 0; + zoom: 1; } -.input-date-datepicker-control .ui-datepicker-header option { - padding-right: 8px; +.ws-range .ws-range-min { + position: absolute !important; + display: block !important; + padding: 0 !important; + top: 7px; + height: 1px; + left: 0; + z-index: 1; + overflow: hidden; + background: #b6e2fb; } -.input-date-datepicker-control .ui-datepicker-header .ui-icon { - position: absolute; - display: block; - top: 0.2em; - width: 15px; - height: 18px; - text-indent: -9999em; - font-size: 10px; - line-height: 0; - background: url(forms.png) no-repeat; - cursor: pointer; +.ws-range .ws-range-ticks { + position: absolute; + bottom: 0px; + left: 0; + height: 4px; + width: 1px; + margin: 0 0 0 -1.5px; + background: #ccc; } -.input-date-datepicker-control .ui-datepicker-header .ui-state-disabled .ui-icon { - cursor: default; +.ws-range.vertical-range { + background: url(vertical-range.png) -30px bottom no-repeat; + width: 20px; } -.input-date-datepicker-control .ui-datepicker-header .ui-icon-circle-triangle-w { - left: 3px; - background-position: -235px 3px; +.ws-range.vertical-range .ws-range-thumb { + top: 0; + left: 3px; + bottom: auto; + background: url(vertical-range.png) 0 -51px no-repeat; + margin: -6px 0 0 0; + height: 11px; + width: 22px; } -.input-date-datepicker-control .ui-datepicker-header .ui-state-hover .ui-icon-circle-triangle-w { - background-position: -235px -17px; +.ws-range.vertical-range .ws-range-thumb:hover, .ws-range.vertical-range.ws-focus .ws-range-thumb { + background-position: 0 -34px; } -.input-date-datepicker-control .ui-datepicker-header .ui-icon-circle-triangle-e { - right: 3px; - background-position: -248px 3px; +.ws-range.vertical-range.ws-active .ws-range-thumb { + background-position: 0 -17px; } -.input-date-datepicker-control .ui-datepicker-header .ui-state-hover .ui-icon-circle-triangle-e { - background-position: -248px -17px; +.ws-range.vertical-range[aria-disabled="true"] .ws-range-thumb { + background-position: 0 0; } -.input-date-datepicker-control table { - font-size: 100%; - border-spacing: 1px; +.ws-range.vertical-range .ws-range-min { + top: auto; + bottom: 1px; + left: 11px; + width: 1px; + height: 0; } -.input-date-datepicker-control .ui-datepicker-title { - margin: 0 20px; +.ws-range.vertical-range .ws-range-rail { + top: 5px; + left: 0; + right: 0; + bottom: 5px; } -.input-date-datepicker-control .ui-datepicker-title, -.input-date-datepicker-control th { - color: #069; - text-align: center; - font-weight: bold; +.ws-range.vertical-range .ws-range-ticks { + bottom: auto; + left: auto; + right: 0; + height: 1px; + width: 4px; } -.input-date-datepicker-control td, -.input-date-datepicker-control th { - padding: 0 2px; - text-align: center; - font-weight: normal; +/* + * popovers + */ +.ws-popover { + display: block; + visibility: hidden; + overflow: hidden; + position: absolute; + top: 0; + left: 0; + padding: 0 6px 0; + margin: 0 0 0 -6px; + z-index: 1000; + min-width: 90px; + transition: visibility 400ms ease-in-out; } +.ws-popover button { + display: inline-block; + overflow: visible; + position: relative; + margin: 0; + border: 0; + padding: 0; + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: none; + appearance: none; + box-sizing: content-box; + font-family: arial, sans-serif; + background: transparent; + cursor: pointer; +} +.ws-popover button::-moz-focus-inner { + border: 0; + padding: 0; +} +.ws-popover button[disabled] { + cursor: default; + color: #888; +} +.ws-popover.ws-po-visible { + visibility: visible; +} -.input-date-datepicker-control td { - padding: 0 4px; - cursor: pointer; - text-align: right; - border: 1px solid #fff; - border-radius: 2px; +.ws-po-outerbox { + position: relative; + opacity: 0; + padding: 11px 0 4px; + -webkit-transform: translate(0, -100%); + transform: translate(0, -100%); + transition: all 400ms ease-in-out; } +.ws-popover.ws-po-visible .ws-po-outerbox { + opacity: 1; + -webkit-transform: translate(0, 0); + transform: translate(0, 0); +} -.input-date-datepicker-control td.ui-datepicker-current-day { - background-color: #adf; - color: #000; - border-color: #06c; +.ws-po-box { + border: 1px solid #cccccc; + background: #fefefe; + padding: 5px; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } -.input-date-datepicker-control td.ui-datepicker-today{ - border-color: #06c; + +.ws-po-arrow { + position: absolute; + top: 4px; + left: 20px; + display: block; + width: 0; + height: 0; + border-left: 9px solid transparent; + border-right: 9px solid transparent; + border-bottom: 7px solid #cccccc; + border-top: none; + zoom: 1; + font-size: 0; } -.input-date-datepicker-control td.ui-datepicker-current-day a { - color: #000; +html .ws-po-arrow { + border-left-color: transparent; + border-right-color: transparent; } -.input-date-datepicker-control td a { - color: #000; - text-decoration: none; +html .ws-po-arrow .ws-po-arrowbox { + border-left-color: transparent; + border-right-color: transparent; } - -.input-date-datepicker-control td:hover { - background-color: #bef; - border-color: #06c; +.polyfill-important .ws-po-arrow { + border-left-color: transparent !important; + border-right-color: transparent !important; } -.input-date-datepicker-control td.ui-state-disabled { - cursor: default; - border-color: #fff; - color: #bbb; - background-color: transparent; +.polyfill-important .ws-po-arrow .ws-po-arrowbox { + border-left-color: transparent !important; + border-right-color: transparent !important; } +* html .ws-po-arrow { + display: none; +} +.ws-po-arrow .ws-po-arrowbox { + position: relative; + top: 1px; + left: -9px; + display: block; + width: 0; + height: 0; + border-left: 9px solid transparent; + border-right: 9px solid transparent; + border-bottom: 7px solid #fefefe; + border-top: none; + z-index: 999999999; +} -.input-date-datepicker-control .ui-datepicker-buttonpane { - margin: 4px 0 0; +.input-picker .ws-prev, +.input-picker .ws-next, .input-picker .ws-button-row button { + border-radius: 4px; + background: #ccc; + padding: 5px 8px; + display: inline-block; + border: 1px solid transparent; } -.input-date-datepicker-control .ui-datepicker-cover { - display: none; /*sorry for IE5*/ - display/**/: block; /*sorry for IE5*/ - position: absolute; /*must have*/ - z-index: -1; /*must have*/ - filter: mask(); /*must have*/ - top: -4px; /*must have*/ - left: -4px; /*must have*/ - width: 200px; /*must have*/ - height: 200px; /*must have*/ + +.input-picker { + outline: none; + text-align: center; + font-family: sans-serif; + width: 300px; } +.input-picker.ws-size-2 { + width: 538px; +} +.input-picker.ws-size-3 { + width: 796px; +} +.input-picker abbr[title] { + cursor: help; +} +.input-picker li, +.input-picker button { + font-size: 13px; + line-height: 16px; + color: #000; + transition: all 400ms; +} +.input-picker .ws-focus, +.input-picker :focus { + outline: 1px dotted black; +} +.input-picker .ws-po-box { + position: relative; + padding: 10px 20px 15px; + border-radius: 5px; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); +} +.input-picker .ws-prev, +.input-picker .ws-next { + position: absolute; + top: 10px; + border: 1px solid #cccccc; + border-radius: 5px; + padding: 0; + width: 24px; + height: 24px; + background: #eeeeee url(forms.png) no-repeat 0 0; + z-index: 1; +} +.input-picker .ws-prev span, +.input-picker .ws-next span { + display: none; +} +.input-picker .ws-picker-body { + position: relative; + padding: 46px 0 0; + zoom: 1; + margin: 0 -10px; +} +.input-picker .ws-prev { + left: 20px; + background-position: -243px 5px; +} +.input-picker .ws-next { + right: 20px; + background-position: -275px 5px; +} +.input-picker .ws-prev:hover, +.input-picker .ws-next:hover { + border-color: #666; +} +.input-picker .ws-prev[disabled], +.input-picker .ws-next[disabled] { + opacity: 0.4; + border-color: #eee; +} +.input-picker .ws-button-row { + position: relative; + margin: 10px 0 0; + border-top: 1px solid #eeeeee; + padding: 10px 0 0; + text-align: left; + z-index: 2; +} +.input-picker .ws-button-row button { + border: 1px solid #cccccc; + border-radius: 5px; + box-shadow: 1px 1px 0 white; + background-color: #ddd; + background-image: -webkit-linear-gradient(top, #ececec 0%, #dddddd 100%); + background-image: linear-gradient(to bottom, #ececec 0%, #dddddd 100%); + transition: border-color 200ms linear; + float: left; +} +.input-picker .ws-button-row button.ws-empty { + float: right; +} +.input-picker[data-currentview="setMonthList"] .ws-picker-header select { + max-width: 95%; +} +.input-picker[data-currentview="setDayList"] .ws-picker-header select { + max-width: 40%; +} +.input-picker[data-currentview="setDayList"] .ws-picker-header select.month-select { + max-width: 55%; +} +.input-picker .ws-picker-header { + position: absolute; + top: -44px; + right: 0; + left: 0; + margin: 0 40px; +} +.input-picker .ws-picker-header button { + display: inline-block; + width: 100%; + margin: 0; + padding: 4px 0; + font-weight: 700; + color: #000; +} +.input-picker .ws-picker-header button:hover { + text-decoration: underline; +} +.input-picker .ws-picker-header button[disabled]:hover { + text-decoration: none; +} +.input-picker .picker-grid { + position: relative; + zoom: 1; + overflow: hidden; +} +.input-picker.ws-size-1 .picker-list { + float: none; + width: auto; +} +.input-picker .picker-list { + position: relative; + zoom: 1; + width: 238px; + float: left; + margin: 0 10px; +} +.input-picker .picker-list tr { + border: 0; +} +.input-picker .picker-list th, +.input-picker .picker-list td { + padding: 3px 5px; +} +.input-picker .picker-list.day-list td { + padding: 2px 1px; +} +.input-picker .picker-list td button { + display: block; + padding: 4px 0; + width: 100%; + border-radius: 5px; + color: #000; + background-color: #fff; +} +.input-picker .picker-list td button.othermonth { + color: #888; +} +.input-picker .picker-list td button:hover, .input-picker .picker-list td button.checked-value { + color: #fff; + background: #000; +} +.input-picker .picker-list td button[disabled], .input-picker .picker-list td button[disabled]:hover { + color: #888; + background-color: #fff; +} +.input-picker .picker-list table { + width: 100%; + border: 0 none; + border-collapse: collapse; +} +.input-picker .picker-list th, +.input-picker .picker-list td.week-cell { + font-size: 13px; + line-height: 1.1em; + padding-bottom: 3px; + text-transform: uppercase; + font-weight: 700; +} +.input-picker .picker-list th, .input-picker .picker-list td { + width: 14.2856%; +} +.input-picker .ws-options { + margin: 10px 0 0; + border-top: 1px solid #eeeeee; + padding: 10px 0 0; + text-align: left; +} +.input-picker .ws-options h5 { + margin: 0 0 5px; + padding: 0; + font-size: 14px; + font-weight: bold; +} +.input-picker .ws-options ul, +.input-picker .ws-options li { + padding: 0; + margin: 0; + list-style: none; +} +.input-picker .ws-options button { + display: block; + padding: 2px 0; + width: 100%; + text-align: left; +} +.input-picker .ws-options button.ws-focus, .input-picker .ws-options button:focus, .input-picker .ws-options button:hover { + text-decoration: underline; +} +.input-picker .ws-options button[disabled], .input-picker .ws-options button[disabled].ws-focus, .input-picker .ws-options button[disabled]:focus, .input-picker .ws-options button[disabled]:hover { + color: #888; + text-decoration: none; +} datalist { - display: none; + display: none; } + .datalist-polyfill { - position: absolute !important; - font-family: "Lucida Grande", "MS Shell Dlg", "Calibri", sans-serif; - font-size: 100%; - top: 0; - left: 0; - margin: 0; - padding: 0; - display: none; - z-index: 999999999; + position: absolute !important; + font-family: "Lucida Grande", "MS Shell Dlg", "Calibri", sans-serif; + font-size: 100%; } -.datalist-polyfill.datalist-visible{ - display: block; -} -.datalist-polyfill div { - margin: 0; - padding: 0; -} .datalist-polyfill .datalist-box { - border: 1px solid #333; - max-height: 200px; - overflow: hidden; - overflow-x: hidden !important; - overflow-y: auto; + position: relative; + max-height: 200px; + overflow: hidden; + overflow-x: hidden !important; + overflow-y: auto; } -.datalist-polyfill ul, -.datalist-polyfill li { - font-size: 100%; - list-style: none !important; +.datalist-polyfill ul, .datalist-polyfill li { + font-size: 100%; + list-style: none !important; } .datalist-polyfill ul { - position: static !important; - overflow: hidden; - margin: 0; - padding: 2px 0; - height: auto !important; - background-color: #fff; - color: #000; - + position: static !important; + overflow: hidden; + margin: 0; + padding: 2px 0; + height: auto !important; + background-color: #fff; + color: #000; } .datalist-polyfill li { - margin: 1px 1px 1px 0; - padding: 2px 2px 2px 5px; - overflow: hidden; - white-space: nowrap; - cursor: default; - zoom: 1; - overflow: hidden; + margin: 1px 1px 1px 0; + padding: 2px 2px 2px 5px; + overflow: hidden; + white-space: nowrap; + cursor: default; + zoom: 1; + overflow: hidden; + text-overflow: ellipsis; } -.datalist-polyfill .option-label { - display: inline-block; - float: left; - max-width: 100%; - text-overflow: ellipsis; +.datalist-polyfill mark { + font-weight: normal; + font-style: normal; } .datalist-polyfill .option-value { - display: none; - float: right; - text-overflow: ellipsis; + display: inline-block; + text-overflow: ellipsis; + max-width: 100%; + color: #000; + float: left; } +.datalist-polyfill .option-label { + display: none; + max-width: 100%; + float: right; + font-size: 90%; + color: #666; + text-overflow: ellipsis; + vertical-align: bottom; + margin-top: 0.15em; + margin-left: 10px; + text-align: right; +} +.datalist-polyfill .has-option-label .option-label { + display: inline-block; +} .datalist-polyfill .hidden-item { - display: none !important; + display: none !important; } .datalist-polyfill .active-item { - background-color: #39f; - color: #fff; - cursor: default; + background-color: #39f; + cursor: default; } - -.validity-alert-wrapper { - position: absolute !important; - overflow: hidden; - padding: 0 6px 6px 0; - font: 12px/140% sans-serif; - z-index: 1000000000; - +.datalist-polyfill .active-item .option-value { + color: #fff; } +.datalist-polyfill .active-item .option-label { + color: #eee; +} + .validity-alert { - display: inline-block; - padding: 8px 0 0; + display: inline-block; + font: 12px/140% sans-serif; + z-index: 1000000000; } -.validity-alert .va-box { - display: inline-block !important; - background: #fafafa; - color: #000; - border: 1px solid #ccc; - padding: 5px; - border-radius: 5px; - box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); - zoom: 1 !important; - min-width: 60px; -} -.validity-alert .va-arrow { - position: absolute; - top: 1px; - left: 20px; - display: block; - width: 0; - height: 0; - border-left: 9px solid transparent; - border-right: 9px solid transparent; - - border-bottom: 7px solid #ccc; - border-top: none; - zoom: 1; - font-size: 0; +progress { + position: relative; + display: inline-block; + width: 160px; + height: 16px; } -html .validity-alert span.va-arrow, -html .validity-alert .va-arrow .va-arrow-box{ - border-left-color: transparent; - border-right-color: transparent; +progress[data-position] { + vertical-align: -0.2em; + border: 1px solid #cccccc; + background: #e6e6e6; } -.polyfill-important .validity-alert span.va-arrow, -.polyfill-important .validity-alert .va-arrow .va-arrow-box { - border-left-color: transparent !important; - border-right-color: transparent !important; +progress > * { + display: none !important; } -* html .validity-alert .va-arrow {display: none;} -.validity-alert .va-arrow .va-arrow-box { - position: relative; - top: 1px; - left: -9px; - display: block; - width: 0; - height: 0; - border-left: 9px solid transparent; - border-right: 9px solid transparent; - border-bottom: 7px solid #fafafa; - border-top: none; +progress span.progress-value { + position: absolute; + display: block !important; + top: 0; + left: 0; + bottom: 0; + height: 100%; + background: #a66300; } +progress[aria-valuenow] span.progress-value { + background: #0063a6; +} /* localStorage */ #swflocalstorageshim-wrapper { - position: absolute; - top: -999px; - left: -9999px; - overflow: hidden; - width: 215px; - min-width: 215px !important; - z-index: 2147483647; + position: absolute; + top: -999px; + left: -9999px; + overflow: hidden; + width: 215px; + min-width: 215px !important; + z-index: 2147483647; } #swflocalstorageshim-wrapper .polyfill-exceeded-message { - margin: 0 0 5px; - padding: 5px; - background: #ffd; - color: #000; - font-size: 13px; + margin: 0 0 5px; + padding: 5px; + background: #ffd; + color: #000; + font-size: 13px; } #swflocalstorageshim-wrapper object { - min-height: 138px !important; - min-width: 215px !important; + min-height: 138px !important; + min-width: 215px !important; } + details { - overflow: hidden; + overflow: hidden; } + summary { - position: relative; + position: relative; } + .closed-details-child { - display: none !important; + display: none !important; } .details-open-indicator { - margin: -1px 0 0; - display: inline-block; - width: 16px; - height: 11px; - background: url(details-arrows.png) no-repeat 0 0; - vertical-align: middle; + margin: -1px 0 0; + display: inline-block; + width: 16px; + height: 11px; + background: url(details-arrows.png) no-repeat 0 0; + vertical-align: middle; } .closed-details-summary .details-open-indicator { - background-position: 0 -20px; + background-position: 0 -20px; } .polyfill-important .details-open-indicator { - margin: -1px 0 0 !important; - padding: 0 !important; - border: 0 !important; - display: inline-block !important; - width: 16px !important; - height: 11px !important; - background: url(details-arrows.png) no-repeat 0 0 !important; - vertical-align: middle !important; + margin: -1px 0 0 !important; + padding: 0 !important; + border: 0 !important; + display: inline-block !important; + width: 16px !important; + height: 11px !important; + background: url(details-arrows.png) no-repeat 0 0 !important; + vertical-align: middle !important; } .polyfill-important .closed-details-summary .details-open-indicator { - background-position: 0 -20px !important; + background-position: 0 -20px !important; } + summary.summary-has-focus { - outline: 1px dotted #aaa; - outline-offset: -1px; + outline: 1px dotted #aaaaaa; + outline-offset: -1px; }