vendor/assets/javascripts/webshims/shims/styles/forms-ext.css in webshims-rails-1.11.6.1 vs vendor/assets/javascripts/webshims/shims/styles/forms-ext.css in webshims-rails-1.12.0

- old
+ new

@@ -124,110 +124,129 @@ text-align: center; display: inline-block; } .ws-date .mm, .ws-date .dd { - width: 23.5%; } - .no-boxsizing .ws-date .mm, .no-boxsizing - .ws-date .dd { - width: 16%; } + width: 23.5%; + min-width: 12%; } .ws-date .yy { - width: 48%; } - .no-boxsizing .ws-date .yy { - width: 40%; } + width: 48%; + min-width: 24%; } .ws-date.ws-month-select .dd { - width: 22%; } - .no-boxsizing .ws-date.ws-month-select .dd { - width: 13%; } + width: 22%; + min-width: 11%; } .ws-date.ws-month-select .mm { - width: 38%; } + width: 38%; + min-width: 19%; } .ws-date.ws-month-select .yy { - width: 36%; } - .no-boxsizing .ws-date.ws-month-select .yy { - width: 30%; } + width: 36%; + min-width: 18%; } .ws-month .mm, .ws-month .yy { - width: 47.9%; } - .no-boxsizing .ws-month .mm, .no-boxsizing - .ws-month .yy { - width: 41%; } + width: 47.9%; + min-width: 24%; } /* range */ .ws-range { position: relative; display: inline-block; vertical-align: middle; - margin: 0; + margin: 5px 0 10px; zoom: 1; border: none; - height: 19px; + height: 0.61538em; width: 155px; - border-radius: 1px; - background: url(range-track.png) 0 center no-repeat; + border-radius: 0.38462em; + background: #ddd; cursor: pointer; - font-size: 0; - line-height: 0; } + font-size: 13px; + outline: none; + transition: background-color 400ms, border-color 400ms; + background-color: #ddd; + box-shadow: 0 -0.07692em 0.11538em rgba(0, 0, 0, 0.2) inset; } .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 1px no-repeat; + margin: -0.61538em 0 0 -0.61538em; + height: 1.23077em; + width: 1.23077em; + border-radius: 50%; + background: #ccc; + border: 0.07692em solid #aaaaaa; cursor: pointer; - outline: none; - font-size: 0; - line-height: 0; } - .ws-range .ws-range-thumb:hover { - background-position: -20px 1px; } + transition: background-color 400ms, border-color 400ms; } + .ws-range .ws-range-thumb:after, .ws-range .ws-range-thumb:before { + position: absolute; + top: -2.15385em; + left: -.3em; + display: inline-block; + content: attr(data-value); + padding: 0.23077em 0.07692em; + min-width: 2em; + visibility: hidden; + text-align: center; + background: #fff; + border: 0.07692em solid #cccccc; + transition: all 400ms; } + .ws-range .ws-range-thumb:after { + content: attr(data-value); } + .ws-range .ws-range-thumb:before { + content: attr(data-valuetext); } .ws-range.ws-focus .ws-range-thumb { - background-position: -20px 1px; } + background: #eee; + border-color: #999; } .ws-range.ws-active .ws-range-thumb { - background-position: -37px 1px; } + box-shadow: 0 0 0.69231em rgba(0, 75, 100, 0.2); } .ws-range[aria-disabled="true"], .ws-range[aria-readonly="true"] { cursor: default; opacity: 0.95; } .ws-range[aria-disabled="true"] .ws-range-thumb, .ws-range[aria-readonly="true"] .ws-range-thumb { cursor: default; } .ws-range[aria-disabled="true"] .ws-range-thumb { - background-position: -54px 1px; } + background: #ddd; + border-color: #ddd; } .ws-range .ws-range-rail { position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; margin: 0; zoom: 1; } - .ws-range .ws-range-min { + .ws-range .ws-range-progress { position: absolute !important; display: block; - margin: 9px 0 0; + margin: 0; padding: 0 !important; top: 0; - height: 1px; + border-radius: 0.38462em; + height: 100%; left: 0; z-index: 1; overflow: hidden; - background: #b6e2fb; } + background: #09c; + box-shadow: 0 0.11538em 0.26923em rgba(255, 255, 255, 0.2) inset; } .ws-range .ws-range-ticks { - overflow: hidden; position: absolute; - bottom: 0px; + bottom: -0.57692em; left: 0; - height: 4px; - width: 1px; - margin: 0 0 0 -1.5px; - font-size: 0; - line-height: 0; - text-indent: -999px; + height: 0.52308em; + width: 0.11538em; + margin: 0 0 0 -0.15385em; background: #ccc; } + .ws-range .ws-range-ticks[data-label]:after { + visibility: hidden; + content: attr(data-label); + display: inline-block; + font-size: 0.69231em; + min-width: 2em; + text-align: center; + margin: 0.53846em 0 0 -1em; } .ws-range.vertical-range { background: url(vertical-range.png) center bottom no-repeat; width: 20px; } .ws-range.vertical-range .ws-range-thumb { top: 0; @@ -241,11 +260,11 @@ background-position: 0 -34px; } .ws-range.vertical-range.ws-active .ws-range-thumb { background-position: 0 -17px; } .ws-range.vertical-range[aria-disabled="true"] .ws-range-thumb { background-position: 0 0; } - .ws-range.vertical-range .ws-range-min { + .ws-range.vertical-range .ws-range-progress { top: auto; bottom: 1px; left: 0; width: 1px; height: 0; } @@ -259,225 +278,262 @@ left: auto; right: 0; height: 1px; width: 4px; } -.input-picker .ws-prev, -.input-picker .ws-next, -.input-picker .ws-super-prev, -.input-picker .ws-super-next, .input-picker .ws-button-row button { - border-radius: 4px; +.input-picker .ws-button-row button { + border-radius: 0.30769em; background: #ccc; - padding: 5px 8px; + padding: 0.38462em 0.61538em; display: inline-block; - border: 1px solid transparent; } + border: 0.07692em solid transparent; } .input-picker { + overflow: visible; + font-size: 13px; outline: none; text-align: center; font-family: sans-serif; - width: 330px; } + width: 25.38462em; + max-width: 100%; + min-width: 23.07692em; + /* Selector API: */ } + .input-picker .ws-po-outerbox { + -webkit-transform: translate(0, 30%); + transform: translate(0, 30%); } + [data-vertical="bottom"] .input-picker .ws-po-outerbox { + -webkit-transform: translate(0, -3%); + transform: translate(0, -30%); } .input-picker.time-popover, .input-picker.datetime-local-popover { - width: 415px; } + width: 31.92308em; } .input-picker.time-popover .ws-prev, .input-picker.time-popover .ws-next, .input-picker.time-popover .ws-super-prev, .input-picker.time-popover .ws-super-next { display: none; } .input-picker.ws-size-2 { - width: 645px; } + width: 49.61538em; } .input-picker.ws-size-3 { - width: 960px; } + width: 73.84615em; } .input-picker.color-popover { width: 590px; } .input-picker abbr[title] { cursor: help; } .input-picker li, .input-picker button { - font-size: 13px; - line-height: 16px; + font-size: 1em; + line-height: 1.23077em; 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; + padding: 0.76923em 1.53846em 1.15385em; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } - .input-picker .ws-prev, - .input-picker .ws-next, - .input-picker .ws-super-prev, - .input-picker .ws-super-next { + .input-picker .ws-picker-controls { 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, - .input-picker .ws-super-prev span, - .input-picker .ws-super-next span { - display: none; } + top: 0.76923em; } + .input-picker .ws-picker-controls > button { + border: 0.07692em solid #cccccc; + border-radius: 0.38462em; + padding: 0; + width: 1.84615em; + height: 1.84615em; + background: #eee; + z-index: 1; + color: #333; } + .input-picker .ws-picker-controls > button.ws-year-btn:after, .input-picker .ws-picker-controls > button:before { + display: inline-block; + content: " "; + width: 0px; + height: 0px; + border-style: solid; } + .input-picker .ws-picker-controls > button span { + display: none; } + .input-picker .ws-picker-controls > button:hover { + border-color: #666; + color: #000; } + .input-picker .ws-picker-controls > button[disabled] { + opacity: 0.4; + border-color: #eee; + color: #ddd; } + .input-picker .prev-controls { + left: 1.53846em; } + .input-picker .prev-controls .ws-super-prev:after, + .input-picker .prev-controls .ws-super-prev:before, + .input-picker .prev-controls .ws-prev:before { + border-width: 0.35em 0.6em 0.35em 0; + border-color: transparent #333333 transparent transparent; + margin-left: -0.1em; } + .input-picker .prev-controls .ws-super-prev { + margin-right: 0.23077em; } + .input-picker .prev-controls .ws-super-prev[disabled] { + display: none; } + .input-picker .next-controls { + right: 1.53846em; } + .input-picker .next-controls button:before { + margin-left: 0.11538em; } + .input-picker .next-controls .ws-super-next:before, + .input-picker .next-controls .ws-super-next:after, + .input-picker .next-controls .ws-next:before { + border-width: 0.35em 0 0.35em 0.6em; + border-color: transparent transparent transparent #333333; + margin-right: -0.1em; } + .input-picker .next-controls .ws-super-next { + margin-left: 0.23077em; } + .input-picker .next-controls .ws-super-next[disabled] { + display: none; } .input-picker.time-popover .ws-picker-body { - padding-top: 36px; } + padding-top: 2.76923em; } .input-picker .ws-picker-body { position: relative; - padding: 46px 0 0; + padding: 3.07692em 0 0; zoom: 1; - margin: 0 -10px; } - .input-picker .ws-prev, - .input-picker .ws-super-prev { - left: 20px; - background-position: -243px 5px; } - .input-picker .ws-super-prev { - background-position: -243px -12px; } - .input-picker.ws-year-buttons .ws-prev { - left: 50px; } - .input-picker .ws-next, - .input-picker .ws-super-next { - right: 20px; - background-position: -275px 5px; } - .input-picker .ws-super-next { - background-position: -275px -12px; } - .input-picker.ws-year-buttons .ws-next { - right: 50px; } - .input-picker .ws-prev:hover, - .input-picker .ws-next:hover, - .input-picker .ws-super-prev:hover, - .input-picker .ws-super-next:hover { - border-color: #666; } - .input-picker .ws-prev[disabled], - .input-picker .ws-next[disabled], - .input-picker .ws-super-prev[disabled], - .input-picker .ws-super-next[disabled] { - opacity: 0.4; - border-color: #eee; } + margin: 0 -0.76923em; } .input-picker .ws-button-row { position: relative; - margin: 10px 0 0; - border-top: 1px solid #eeeeee; - padding: 10px 0 0; + margin: 0.76923em 0 0; + border-top: 0.07692em solid #eeeeee; + padding: 0.76923em 0 0; text-align: left; z-index: 2; } .input-picker .ws-button-row button { - border: 1px solid #cccccc; + border: 0.07692em 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 { + .input-picker[data-currentview="setMonthList"] .ws-picker-header > select, .input-picker[data-currentview="setYearList"] .ws-picker-header > select { + max-width: 90%; } + .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[data-currentview="setDayList"] .ws-picker-header > .month-select { + max-width: 50%; } .input-picker.time-popover .ws-picker-header { - top: -30px; } + top: -2.30769em; } .input-picker.time-popover .ws-picker-header button { - font-size: 15px; } - .input-picker.ws-year-buttons .ws-picker-header { - margin: 0 65px; } + font-size: 1.15385em; } .input-picker .ws-picker-header { position: absolute; - top: -44px; + top: -3.07692em; right: 0; left: 0; - margin: 0 40px; } - .input-picker .ws-picker-header button { + margin: 0 4.23077em; } + .input-picker .ws-picker-header > button { display: inline-block; width: 100%; margin: 0; - padding: 4px 0; + padding: 0.30769em 0; font-weight: 700; color: #000; } - .input-picker .ws-picker-header button:hover { + .input-picker .ws-picker-header > button > .month-digit, + .input-picker .ws-picker-header > button > .monthname-short { + display: none; } + .input-picker .ws-picker-header > button:after { + content: " "; + margin: -0.1em 0.5em 0; + width: 0px; + height: 0px; + border-style: solid; + border-width: 0 0.3em 0.6em 0.3em; + border-color: transparent transparent #333333 transparent; + vertical-align: middle; } + .input-picker .ws-picker-header > button:hover { text-decoration: underline; } - .input-picker .ws-picker-header button[disabled]:hover { + .input-picker .ws-picker-header > button[disabled]:after { + display: none !important; } + .input-picker .ws-picker-header > button[disabled]:hover { text-decoration: none; } .input-picker .picker-grid { position: relative; zoom: 1; overflow: hidden; } + .input-picker .picker-grid .monthname, + .input-picker .picker-grid .month-digit { + display: none; } .input-picker.ws-size-1 .picker-list { float: none; width: auto; } .input-picker .picker-list { position: relative; zoom: 1; - width: 290px; + width: 22.30769em; float: left; margin: 0 10px; background: #fff; } .input-picker .picker-list tr { border: 0; } .input-picker .picker-list th, .input-picker .picker-list td { - padding: 3px 5px; } + padding: 0.23077em 0.38462em; + text-align: center; } .input-picker .picker-list.day-list td { - padding: 2px 1px; } - .input-picker .picker-list.day-list td button { - padding: 4px 0; } - .input-picker .picker-list td button { + padding: 0.03846em 0.15385em; } + .input-picker .picker-list.day-list td > button { + padding: 0.42308em 0; } + .input-picker .picker-list.time-list > .ws-picker-header > button > .monthname { + display: inline; } + .input-picker .picker-list.time-list td { + padding: 0.07692em 0.38462em; } + .input-picker .picker-list.time-list td > button { + padding: 0.52692em 0; } + .input-picker .picker-list td > button { display: block; - padding: 9px 0; + padding: 1.58992em 0; width: 100%; - border-radius: 5px; + border-radius: 0.38462em; color: #000; background-color: #fff; } - .input-picker .picker-list td button.othermonth { + .input-picker .picker-list td > button.othermonth { color: #888; } - .input-picker .picker-list td button:hover, .input-picker .picker-list td button.checked-value { + .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 { + .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%; + margin: 0; 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; + font-size: 1em; + line-height: 1.23077em; + padding-bottom: 0.23077em; 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; + margin: 0.76923em 0 0; + border-top: 0.07692em solid #eeeeee; + padding: 0.76923em 0 0; text-align: left; } .input-picker .ws-options h5 { - margin: 0 0 5px; + margin: 0 0 0.38462em; padding: 0; - font-size: 14px; + font-size: 1.07692em; 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: 4px; + padding: 0.30769em; width: 100%; text-align: left; - border-radius: 4px; } + border-radius: 0.30769em; } .input-picker .ws-options button.ws-focus, .input-picker .ws-options button:focus, .input-picker .ws-options button:hover { color: #fff; background: #000; } .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; @@ -486,5 +542,17 @@ .input-picker .ws-options button .ws-value { float: left; } .input-picker .ws-options button .ws-label { float: right; font-size: 96%; } + .input-picker .ws-week, + .input-picker .ws-year-btn { + display: none; } + +.ws-picker-controls > button { + display: inline-block; } + +.ws-picker-header > button:after { + display: none; } + +.ws-picker-header select { + display: none; }