diff options
Diffstat (limited to 'apps/system/style/value_selector/spin_date_picker.css')
| -rw-r--r-- | apps/system/style/value_selector/spin_date_picker.css | 249 |
1 files changed, 249 insertions, 0 deletions
diff --git a/apps/system/style/value_selector/spin_date_picker.css b/apps/system/style/value_selector/spin_date_picker.css new file mode 100644 index 0000000..722d5fc --- /dev/null +++ b/apps/system/style/value_selector/spin_date_picker.css @@ -0,0 +1,249 @@ +/* ----------- SpinDateSelectorView ---------- */ +#spin-date-picker .picker-bar { + position: relative; + margin-left: auto; + margin-right: auto; + overflow: hidden; + width: 85%; + font-size: 8px; +} + +#spin-date-picker .picker-bar-gradient { + -moz-border-top-colors: + rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3) + rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1) + rgba(0, 0, 0, 0.05); + + -moz-border-bottom-colors: + rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3) + rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1) + rgba(0, 0, 0, 0.05); + + border-top: solid 0.7rem; + border-bottom: solid 0.7rem; + border-left: 1px solid #111; + border-right: 1px solid #111; + + position: absolute; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + -moz-box-sizing: border-box; +} + +#spin-date-picker .picker-container { + width: 100%; + position: relative; + padding-top: 8.5rem; + height: 16rem; + overflow: hidden; +} + +#spin-date-picker .value-indicator-wrapper { + -moz-border-top-colors: + rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15) + rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.4) + rgba(0, 0, 0, 0.5); + + -moz-border-bottom-colors: + rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15) + rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.4) + rgba(0, 0, 0, 0.5); + + border-top: solid 0.7rem; + border-bottom: solid 0.7rem; + position: absolute; + height: 6rem; + width: 100%; + pointer-events: none; +} + +#spin-date-picker .value-indicator-hover { + pointer-events: none; + background-color: #00A5C5; + position: absolute; + width: 100%; + height: 100%; + right:0; +} + +div.animation-on { + -moz-transition-duration: 0.5s; + -moz-transition-property: top, left; +} + +.picker-unit { + position: relative; + font: 2.5rem/8rem 'MozTT',sans-serif; + color: #FFF; + text-align: center; + vertical-align: middle; + width: 100%; + height: 6rem; + pointer-events: none; +} + +#spin-date-picker .picker-bar-background { + background: url("../themes/default/images/ui/time_pattern.png") repeat scroll left top transparent; + position: absolute; + width: 73px; + height: 100%; + right: 0; + top: 0; +} + +#spin-date-picker .left-picker-separator { + position: absolute; + width: 0.2rem; + height: 100%; + top: 0; + left: 54px; + background: -moz-linear-gradient(center left, #555 50%, #000 50%); + pointer-events: none; +} + +#spin-date-picker .right-picker-separator { + position: absolute; + width: 0.2rem; + height: 100%; + top: 0; + right: 73px; + background: -moz-linear-gradient(center left, #555 50%, #000 50%); + pointer-events: none; +} + +#spin-date-picker .value-picker-date-wrapper { + position: absolute; + width: 54px; + height: 100%; + top: 10em; + left: 0; +} + +#spin-date-picker .value-picker-month-wrapper { + position: absolute; + width: -moz-calc(100% - 127px); + height: 100%; + top: 10em; + left: 54px; +} + +#spin-date-picker .value-picker-year-wrapper { + position: absolute; + width: 73px; + height: 100%; + top: 10em; + right: 0px; +} + +#spin-date-picker .value-picker-date { + position: relative; + -moz-user-select: none; + text-align: center; + width: 100%; +} + +#spin-date-picker .value-picker-month { + position: relative; + -moz-user-select: none; + width: 100%; +} + +#spin-date-picker .value-picker-year { + position: relative; + -moz-user-select: none; + width: 100%; +} + +#spin-date-picker .picker-container.YMD .value-picker-year-wrapper { + right: auto; + left: 0; +} + +#spin-date-picker .picker-container.YMD .value-picker-month-wrapper { + right: auto; + left: 73px; +} + +#spin-date-picker .picker-container.YMD .value-picker-date-wrapper { + right: 0; + left: auto; +} + +#spin-date-picker .picker-container.YMD .left-picker-separator { + right: auto; + left: 73px; +} + +#spin-date-picker .picker-container.YMD .right-picker-separator { + right: 54px; + left: auto; +} + +#spin-date-picker .picker-container.YMD .picker-bar-background { + right: auto; + left: 0px; +} + + +#spin-date-picker .picker-container.DMY .value-picker-year-wrapper { + right: 0; + left: auto; +} + +#spin-date-picker .picker-container.DMY .value-picker-month-wrapper { + right: auto; + left: 54px; +} + +#spin-date-picker .picker-container.DMY .value-picker-date-wrapper { + right: auto; + left: 0; +} + +#spin-date-picker .picker-container.DMY .left-picker-separator { + right: auto; + left: 54px; +} + +#spin-date-picker .picker-container.DMY .right-picker-separator { + right: 73px; + left: auto; +} + +#spin-date-picker .picker-container.DMY .picker-bar-background { + right: 0px; + left: auto; +} + + +#spin-date-picker .picker-container.MDY .value-picker-year-wrapper { + right: 0; + left: auto; +} + +#spin-date-picker .picker-container.MDY .value-picker-month-wrapper { + right: auto; + left: 0px; +} + +#spin-date-picker .picker-container.MDY .value-picker-date-wrapper { + right: auto; + left: -moz-calc(100% - 127px); +} + +#spin-date-picker .picker-container.MDY .left-picker-separator { + right: auto; + left: -moz-calc(100% - 127px); +} + +#spin-date-picker .picker-container.MDY .right-picker-separator { + right: 73px; + left: auto; +} + +#spin-date-picker .picker-container.MDY .picker-bar-background { + right: 0px; + left: auto; +}
\ No newline at end of file |