vendor/assets/javascripts/webshims/shims/styles/shim.css in webshims-rails-1.14.1 vs vendor/assets/javascripts/webshims/shims/styles/shim.css in webshims-rails-1.14.3

- old
+ new

@@ -1,26 +1,20 @@ .ws-custom-file { - zoom: 1; } - .ws-custom-file:before, .ws-custom-file:after { - display: table; - clear: both; - content: ' '; } + zoom: 1; +} +.ws-custom-file:before, .ws-custom-file:after { + display: table; + clear: both; + content: ' '; +} -.ws-popover { - -moz-box-sizing: content-box; - box-sizing: content-box; } - .ws-popover *, .ws-popover:before, .ws-popover:after, - .ws-popover :after, - .ws-popover :before { - -moz-box-sizing: content-box; - box-sizing: content-box; } - .ws-important-hide { display: none !important; visibility: hidden !important; position: absolute; - top: -999999px; } + top: -999999px; +} .ws-po-box button, .ws-custom-file > button { display: inline-block; overflow: visible; position: relative; @@ -32,60 +26,64 @@ font-family: inherit; background: transparent; cursor: pointer; font-size: inherit; line-height: inherit; - touch-action: none; } - .ws-po-box button::-moz-focus-inner, .ws-custom-file > button::-moz-focus-inner { - border: 0; - padding: 0; } - .ws-po-box button[disabled], .ws-custom-file > button[disabled] { - cursor: default; - color: #888; } + touch-action: none; +} +.ws-po-box button::-moz-focus-inner, .ws-custom-file > button::-moz-focus-inner { + border: 0; + padding: 0; +} +.ws-po-box button[disabled], .ws-custom-file > button[disabled] { + cursor: default; + color: #888; +} [hidden] { - display: none; } + display: none; +} article, aside, canvas, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { - display: block; } + display: block; +} audio { display: none; height: 0; width: 0; - overflow: hidden; } + overflow: hidden; +} video { - overflow: hidden; } + overflow: hidden; +} video, audio[controls] { display: inline-block; min-height: 45px; - min-width: 40px; } + min-width: 40px; +} audio[controls] { - width: 300px; } + width: 300px; +} -video > *, -audio > * { - visibility: hidden; } - .no-swf video > *, .no-swf - audio > * { - visibility: inherit; } - .polyfill-mediaelement > iframe { border: 0; padding: 0; margin: 0; width: 100%; - height: 100%; } + height: 100%; +} .flashblocker-assumed { min-height: 20px; min-width: 20px; - z-index: 99999; } + z-index: 99999; +} .cue-display { position: absolute !important; margin: 0; padding: 0px !important; @@ -99,118 +97,131 @@ font-size: 12px; white-space: pre-wrap; cursor: default; -webkit-user-select: none; -moz-user-select: none; - user-select: none; } - .cue-display b { - font-weight: bold; } - .cue-display i { - font-style: italic; } - .cue-display u { - 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; - pointer-events: none; } - .cue-display .cue-line { - display: block; } - .cue-display span.cue { - 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; } + user-select: none; +} +.cue-display b { + font-weight: bold; +} +.cue-display i { + font-style: italic; +} +.cue-display u { + 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; + pointer-events: none; +} +.cue-display .cue-line { + display: block; +} +.cue-display span.cue { + display: inline-block; + padding: 3px 5px; + background: #000; + background: rgba(0, 0, 0, 0.7); + color: #fff; +} +.cue-display .description-cues { + 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; } + font-weight: bold; +} /* reset */ -.ws-range, -.ws-range *, .placeholder-box, .placeholder-text, -.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; } + 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; } + overflow: hidden !important; +} -.webshims-visual-hide * { - visibility: hidden !important; } - /* placeholder */ .placeholder-box { position: relative; display: inline-block; - zoom: 1; } + zoom: 1; +} .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; } - .placeholder-visible .placeholder-text, .placeholder-text.placeholder-visible { - display: inline-block; } - .placeholder-box-input .placeholder-text { - white-space: nowrap; } + cursor: text; +} +.placeholder-visible .placeholder-text, .placeholder-text.placeholder-visible { + display: inline-block; +} +.placeholder-box-input .placeholder-text { + white-space: nowrap; +} .placeholder-visible { - color: #999; } + color: #999; +} .placeholder-focused.placeholder-visible { - color: #ccc; } + color: #ccc; +} /* * popovers */ .ws-popover { @@ -233,46 +244,63 @@ -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: visibility 400ms ease-in-out; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; direction: ltr; - -webkit-tap-highlight-color: transparent; } - .ws-popover.ws-is-rtl { - direction: rtl; - margin: 0 0 0 0.92308em; } - .ws-popover.no-transition { - display: none; } - .ws-popover.ws-po-visible { - visibility: visible; - display: block; } + -webkit-tap-highlight-color: transparent; +} +.ws-popover.ws-popover-constrained-width { + box-sizing: content-box; +} +.ws-popover.ws-is-rtl { + direction: rtl; + margin: 0 0 0 0.92308em; +} +.ws-popover.no-transition { + display: none; +} +.ws-popover.ws-po-visible { + visibility: visible; + display: block; +} +.ws-popinline { + position: relative; + visibility: visible; + display: none; +} + .ws-po-outerbox { position: relative; opacity: 0; padding: 0.84615em 0 0.69231em; -webkit-transform: translate(0, -100%); transform: translate(0, -100%); - transition: all 400ms ease-in-out; } - [data-vertical="bottom"] .ws-po-outerbox { - -webkit-transform: translate(0, 100%); - transform: translate(0, 100%); - padding: 0.30769em 0 0.84615em; } - [data-vertical="middle"] .ws-po-outerbox { - -webkit-transform: translate(0, 0) scale(0.3); - transform: translate(0, 0) scale(0.3); - padding: 0.30769em 0; } - .ws-popover.ws-po-visible .ws-po-outerbox, div.ws-popover[data-vertical][data-horizontal].ws-po-visible .ws-po-outerbox { - opacity: 1; - -webkit-transform: translate(0, 0) scale(1); - transform: translate(0, 0) scale(1); } + transition: all 400ms ease-in-out; +} +[data-vertical="bottom"] .ws-po-outerbox { + -webkit-transform: translate(0, 100%); + transform: translate(0, 100%); + padding: 0.30769em 0 0.84615em; +} +[data-vertical="middle"] .ws-po-outerbox { + -webkit-transform: translate(0, 0) scale(0.3); + transform: translate(0, 0) scale(0.3); + padding: 0.30769em 0; +} +.ws-popover.ws-po-visible .ws-po-outerbox, div.ws-popover[data-vertical][data-horizontal].ws-po-visible .ws-po-outerbox { + opacity: 1; + -webkit-transform: translate(0, 0) scale(1); + transform: translate(0, 0) scale(1); +} .ws-po-box { border: 0.07692em solid #cccccc; background: #fff; + color: #000; padding: 0.38462em 0.38462em 0.23077em; - border-radius: 0.23077em; - box-shadow: 0 0.07692em 0.38462em rgba(0, 0, 0, 0.25); } +} .ws-po-arrow { position: absolute; top: 0.30769em; left: 1.53846em; @@ -281,324 +309,376 @@ height: 0; border-left: 0.61538em solid transparent; border-right: 0.61538em solid transparent; border-bottom: 0.61538em solid #cccccc; border-top: none; - zoom: 1; } - .ws-is-rtl .ws-po-arrow { - left: auto; - right: 1.53846em; } - [data-horizontal="center"] .ws-po-arrow { - left: 50%; - margin-left: -0.30769em; } - [data-horizontal="right"] .ws-po-arrow { - left: auto; - right: 1.53846em; } - [data-vertical="bottom"] .ws-po-arrow { - top: auto; - bottom: 0.30769em; - border-bottom: none; - border-top: 0.61538em solid #cccccc; } - html .ws-po-arrow { - border-left-color: transparent; - border-right-color: transparent; } - html .ws-po-arrow .ws-po-arrowbox { - border-left-color: transparent; - border-right-color: transparent; } - [data-vertical="middle"] .ws-po-arrow { - display: none; } - .ws-po-arrow .ws-po-arrowbox { - position: relative; - top: 0.07692em; - left: -0.53846em; - display: block; - width: 0; - height: 0; - border-left: 0.53846em solid transparent; - border-right: 0.53846em solid transparent; - border-bottom: 0.53846em solid #fefefe; - border-top: none; - z-index: 999999999; } - .ws-is-rtl .ws-po-arrow .ws-po-arrowbox { - left: auto; - right: -0.53846em; } - [data-vertical="bottom"] .ws-po-arrow .ws-po-arrowbox { - top: -0.61538em; - border-bottom: none; - border-top: 0.53846em solid #fefefe; } + zoom: 1; +} +.ws-is-rtl .ws-po-arrow { + left: auto; + right: 1.53846em; +} +[data-horizontal="center"] .ws-po-arrow { + left: 50%; + margin-left: -0.30769em; +} +[data-horizontal="right"] .ws-po-arrow { + left: auto; + right: 1.53846em; +} +[data-vertical="bottom"] .ws-po-arrow { + top: auto; + bottom: 0.30769em; + border-bottom: none; + border-top: 0.61538em solid #cccccc; +} +html .ws-po-arrow { + border-left-color: transparent; + border-right-color: transparent; +} +html .ws-po-arrow .ws-po-arrowbox { + border-left-color: transparent; + border-right-color: transparent; +} +[data-vertical="middle"] .ws-po-arrow { + display: none; +} +.ws-po-arrow .ws-po-arrowbox { + position: relative; + top: 0.07692em; + left: -0.53846em; + display: block; + width: 0; + height: 0; + border-left: 0.53846em solid transparent; + border-right: 0.53846em solid transparent; + border-bottom: 0.53846em solid #fefefe; + border-top: none; + z-index: 999999999; +} +.ws-is-rtl .ws-po-arrow .ws-po-arrowbox { + left: auto; + right: -0.53846em; +} +[data-vertical="bottom"] .ws-po-arrow .ws-po-arrowbox { + top: -0.61538em; + border-bottom: none; + border-top: 0.53846em solid #fefefe; +} datalist { - display: none; } + display: none; +} input[data-wslist]::-webkit-calendar-picker-indicator { - display: none; } + display: none; +} .datalist-polyfill { - position: absolute !important; } - .datalist-polyfill .ws-po-box { - padding: 0.38462em 0; } - .datalist-polyfill .datalist-box { - position: relative; - max-height: 15.38462em; - overflow: hidden; - overflow-x: hidden !important; - overflow-y: auto; } - .datalist-polyfill .datalist-box ul, .datalist-polyfill .datalist-box li { - font-size: 100%; - list-style: none !important; } - .datalist-polyfill .datalist-box ul { - position: static !important; - overflow: hidden; - margin: 0; - padding: 0.07692em 0; - height: auto !important; - background-color: #fff; - color: #000; } - .datalist-polyfill .datalist-box li { - margin: 0.07692em 0; - padding: 0.15385em 0.76923em; - overflow: hidden; - white-space: nowrap; - cursor: default; - zoom: 1; - overflow: hidden; - text-overflow: ellipsis; - background-color: #fff; - transition: background-color 400ms; - touch-action: none; } - .datalist-polyfill .datalist-box mark { - font-weight: normal; - font-style: normal; } - .datalist-polyfill .datalist-box .option-value { - display: inline-block; - text-overflow: ellipsis; - max-width: 100%; - color: #000; - float: left; - transition: color 400ms; } - .datalist-polyfill .datalist-box .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: 0.76923em; - text-align: right; - transition: color 400ms; } - .datalist-polyfill .datalist-box .has-option-label .option-label { - display: inline-block; } - .datalist-polyfill .datalist-box .hidden-item { - display: none !important; } - .datalist-polyfill .datalist-box .active-item { - cursor: default; - background-color: #39f; } - .datalist-polyfill .datalist-box .active-item .option-value { - color: #fff; } - .datalist-polyfill .datalist-box .active-item .option-label { - color: #eee; } - .datalist-polyfill.ws-is-rtl .option-value { - float: right; } - .datalist-polyfill.ws-is-rtl .option-label { - float: left; - margin-right: 0.76923em; - margin-left: 0; - text-align: left; } + position: absolute; +} +.datalist-polyfill .ws-po-box { + padding: 0.38462em 0; +} +.datalist-polyfill .datalist-box { + position: relative; + max-height: 15.38462em; + overflow: hidden; + overflow-x: hidden !important; + overflow-y: auto; +} +.datalist-polyfill .datalist-box ul, .datalist-polyfill .datalist-box li { + font-size: 100%; + list-style: none !important; +} +.datalist-polyfill .datalist-box ul { + position: static !important; + overflow: hidden; + margin: 0; + padding: 0.07692em 0; + height: auto !important; + background-color: #fff; + color: #000; +} +.datalist-polyfill .datalist-box li { + margin: 0.07692em 0; + padding: 0.15385em 0.76923em; + overflow: hidden; + white-space: nowrap; + cursor: default; + zoom: 1; + overflow: hidden; + text-overflow: ellipsis; + background-color: #fff; + transition: background-color 400ms; + touch-action: none; +} +.datalist-polyfill .datalist-box mark { + font-weight: normal; + font-style: normal; +} +.datalist-polyfill .datalist-box .option-value { + display: inline-block; + text-overflow: ellipsis; + max-width: 100%; + color: #000; + float: left; + transition: color 400ms; +} +.datalist-polyfill .datalist-box .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: 0.76923em; + text-align: right; + transition: color 400ms; +} +.datalist-polyfill .datalist-box .has-option-label .option-label { + display: inline-block; +} +.datalist-polyfill .datalist-box .hidden-item { + display: none !important; +} +.datalist-polyfill .datalist-box .active-item { + cursor: default; + background-color: #39f; +} +.datalist-polyfill .datalist-box .active-item .option-value { + color: #fff; +} +.datalist-polyfill .datalist-box .active-item .option-label { + color: #eee; +} +.datalist-polyfill.ws-is-rtl .option-value { + float: right; +} +.datalist-polyfill.ws-is-rtl .option-label { + float: left; + margin-right: 0.76923em; + margin-left: 0; + text-align: left; +} .validity-alert { display: inline-block; - z-index: 1000000000; } - .validity-alert .ws-titlevalue { - display: block; } + z-index: 1000000000; +} +.validity-alert .ws-titlevalue { + display: block; +} .ws-errorbox { display: none; border: none; margin: 0; padding: 0; overflow: hidden; position: relative; - clear: both; } - .ws-errorbox p { - margin: 2px 0 3px; - padding: 0; - color: #a94442; } + clear: both; +} +.ws-errorbox p { + margin: 2px 0 3px; + padding: 0; + color: #a94442; +} progress { position: relative; display: inline-block; width: 164px; height: 20px; overflow: hidden; -moz-box-sizing: border-box; box-sizing: border-box; - vertical-align: -0.2em; } - progress > * { - display: none !important; } - progress[data-position], progress.ws-style { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 0; - border: 1px solid #ddd; - background: #f0f0f0; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; - border-radius: 4px; } - progress[data-position]::-webkit-progress-bar, progress.ws-style::-webkit-progress-bar { - border: 1px solid #ddd; - background: #f0f0f0; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; - border-radius: 4px; - border: 0 none; } - progress[data-position]::-moz-progress-bar, progress.ws-style::-moz-progress-bar { - border: 1px solid #ddd; - background: #f0f0f0; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; - border-radius: 4px; } - progress[data-position]::-ms-fill, progress.ws-style::-ms-fill { - animation-name: none; - border: 1px solid #ddd; - background: #f0f0f0; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; - border-radius: 4px; } - progress[data-position] > span.progress-value, progress.ws-style > span.progress-value { - left: 0; } - progress[data-position].ws-is-rtl > span.progress-value, progress.ws-style.ws-is-rtl > span.progress-value { - left: auto; - right: 0; } - progress[data-position]::-webkit-progress-value, progress.ws-style::-webkit-progress-value { - position: absolute; - top: 0; - bottom: 0; - height: 100%; - box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15) inset; - background: #0063a6 url(progress.png); - border: 0; } - progress[data-position]::-moz-progress-bar, progress.ws-style::-moz-progress-bar { - position: absolute; - top: 0; - bottom: 0; - height: 100%; - box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15) inset; - background: #0063a6 url(progress.png); - border: 0; } - progress[data-position]::-ms-fill, progress.ws-style::-ms-fill { - animation-name: none; - position: absolute; - top: 0; - bottom: 0; - height: 100%; - box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15) inset; - background: #0063a6 url(progress.png); - border: 0; } - progress[data-position] > span.progress-value, progress.ws-style > span.progress-value { - display: block !important; - position: absolute; - top: 0; - bottom: 0; - height: 100%; - box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15) inset; - background: #0063a6 url(progress.png); - border: 0; } - progress[data-position]:indeterminate::-webkit-progress-bar, progress.ws-style:indeterminate::-webkit-progress-bar { - background-image: url(progress.gif); } - progress[data-position]:indeterminate::-moz-progress-bar, progress.ws-style:indeterminate::-moz-progress-bar { - background-image: url(progress.gif); } - progress[data-position]:indeterminate, progress.ws-style:indeterminate { - animation-name: none; - background-image: url(progress.gif); } - progress[data-position].ws-indeterminate > span.progress-value, progress.ws-style.ws-indeterminate > span.progress-value { - display: block !important; - width: 100%; - right: 0; - background-image: url(progress.gif); } + vertical-align: -0.2em; +} +progress.ws-style { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border: 1px solid #ddd; + background: #f0f0f0; +} +progress.ws-style::-webkit-progress-bar { + border: 1px solid #ddd; + background: #f0f0f0; + border: 0 none; +} +progress.ws-style::-moz-progress-bar { + border: 1px solid #ddd; + background: #f0f0f0; +} +progress.ws-style::-ms-fill { + animation-name: none; + border: 1px solid #ddd; + background: #f0f0f0; +} +progress.ws-style > span.progress-value { + left: 0; +} +progress.ws-style.ws-is-rtl > span.progress-value { + left: auto; + right: 0; +} +progress.ws-style::-webkit-progress-value { + position: absolute; + top: 0; + bottom: 0; + height: 100%; + background: #0063a6 url(progress.png); + border: 0; +} +progress.ws-style::-moz-progress-bar { + position: absolute; + top: 0; + bottom: 0; + height: 100%; + background: #0063a6 url(progress.png); + border: 0; +} +progress.ws-style::-ms-fill { + animation-name: none; + position: absolute; + top: 0; + bottom: 0; + height: 100%; + background: #0063a6 url(progress.png); + border: 0; +} +progress.ws-style > span.progress-value { + display: block !important; + position: absolute; + top: 0; + bottom: 0; + height: 100%; + background: #0063a6 url(progress.png); + border: 0; +} +progress.ws-style:indeterminate::-webkit-progress-bar { + background-image: url(progress.gif); +} +progress.ws-style:indeterminate::-moz-progress-bar { + background-image: url(progress.gif); +} +progress.ws-style:indeterminate { + animation-name: none; + background-image: url(progress.gif); +} +progress.ws-style.ws-indeterminate > span.progress-value { + display: block !important; + width: 100%; + right: 0; + background-image: url(progress.gif); +} 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; margin-right: 0.4em; width: 0px; height: 0px; border-style: solid; border-width: 0.76923em 0.38462em 0 0.38462em; border-color: #000 transparent transparent transparent; - vertical-align: middle; } - .closed-details-summary .details-open-indicator { - border-width: 0.38462em 0 0.38462em 0.76923em; - border-color: transparent transparent transparent #000; } + vertical-align: middle; +} +.closed-details-summary .details-open-indicator { + border-width: 0.38462em 0 0.38462em 0.76923em; + border-color: transparent transparent transparent #000; +} summary.summary-has-focus { outline: 1px dotted #aaa; - outline-offset: -1px; } + outline-offset: -1px; +} .ws-custom-file { position: relative; - zoom: 1; } - .ws-custom-file > button, - .ws-custom-file > input { - -moz-box-sizing: border-box; - box-sizing: border-box; - cursor: pointer; } - .ws-custom-file > button, - .ws-custom-file > .ws-file-value { - position: relative; - z-index: 0; - display: inline-block; - padding: 5px; - border: 1px solid #ccc; - background: #eee; - color: #333; - transition: 400ms all; } - .ws-custom-file > button { - margin-right: 0.4em; - float: left; } - .ws-custom-file .ws-file-value { - display: block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - .ws-custom-file:hover > button, .ws-custom-file.ws-mouseenter > button, - .ws-custom-file > input[type="file"]:focus ~ button { - background: #fff; - border-color: #999; - background: #eeeeee linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } - .ws-custom-file:hover > .ws-file-value, .ws-custom-file.ws-mouseenter > .ws-file-value, - .ws-custom-file > input[type="file"]:focus ~ .ws-file-value { - border-color: #999; } - .ws-custom-file.ws-active > button, - .ws-custom-file > input[type="file"]:active ~ button { - border-color: #000; } - .ws-custom-file.ws-active > .ws-file-value, - .ws-custom-file > input[type="file"]:active ~ .ws-file-value { - border-color: #000; } - .ws-custom-file > input[type="file"][disabled] ~ .ws-file-value, - .ws-custom-file > input[type="file"][disabled] ~ button { - border-color: #bbb; - background: #eee; - color: #999; } - .ws-custom-file > input[type="file"] { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - height: 100%; - width: 100%; - filter: alpha(opacity=0); - opacity: 0.00001; - z-index: 9; } - .ws-custom-file > input[type="file"][disabled] { - cursor: default; - cursor: not-allowed; } - .ws-custom-file > .moxie-shim { - z-index: 20; } + zoom: 1; +} +.ws-custom-file > button, +.ws-custom-file > input { + box-sizing: border-box; + cursor: pointer; +} +.ws-custom-file > button, +.ws-custom-file > .ws-file-value { + position: relative; + z-index: 0; + display: inline-block; + padding: 5px; + border: 1px solid #ccc; + background: #eee; + color: #333; + transition: 400ms all; +} +.ws-custom-file > button { + margin-right: 0.4em; + float: left; +} +.ws-custom-file .ws-file-value { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.ws-custom-file:hover > button, .ws-custom-file.ws-mouseenter > button, +.ws-custom-file > input[type="file"]:focus ~ button { + background: #fff; + border-color: #999; + background: #eeeeee linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); +} +.ws-custom-file:hover > .ws-file-value, .ws-custom-file.ws-mouseenter > .ws-file-value, +.ws-custom-file > input[type="file"]:focus ~ .ws-file-value { + border-color: #999; +} +.ws-custom-file.ws-active > button, +.ws-custom-file > input[type="file"]:active ~ button { + border-color: #000; +} +.ws-custom-file.ws-active > .ws-file-value, +.ws-custom-file > input[type="file"]:active ~ .ws-file-value { + border-color: #000; +} +.ws-custom-file > input[type="file"][disabled] ~ .ws-file-value, +.ws-custom-file > input[type="file"][disabled] ~ button { + border-color: #bbb; + background: #eee; + color: #999; +} +.ws-custom-file > input[type="file"] { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + height: 100%; + width: 100%; + filter: alpha(opacity=0); + opacity: 0.00001; + z-index: 9; +} +.ws-custom-file > input[type="file"][disabled] { + cursor: default; + cursor: not-allowed; +} +.ws-custom-file > .moxie-shim { + z-index: 20; +}