diff options
Diffstat (limited to 'apps/system/style/value_selector')
-rw-r--r-- | apps/system/style/value_selector/date_picker.css | 152 | ||||
-rw-r--r-- | apps/system/style/value_selector/images/icons/next.png | bin | 0 -> 296 bytes | |||
-rw-r--r-- | apps/system/style/value_selector/images/icons/prev.png | bin | 0 -> 1425 bytes | |||
-rw-r--r-- | apps/system/style/value_selector/images/ui/pattern-current.png | bin | 0 -> 116 bytes | |||
-rw-r--r-- | apps/system/style/value_selector/images/ui/shadow-invert.png | bin | 0 -> 82 bytes | |||
-rw-r--r-- | apps/system/style/value_selector/images/ui/shadow.png | bin | 0 -> 83 bytes | |||
-rw-r--r-- | apps/system/style/value_selector/spin_date_picker.css | 249 | ||||
-rw-r--r-- | apps/system/style/value_selector/time_picker.css | 212 | ||||
-rw-r--r-- | apps/system/style/value_selector/value_selector.css | 170 |
9 files changed, 783 insertions, 0 deletions
diff --git a/apps/system/style/value_selector/date_picker.css b/apps/system/style/value_selector/date_picker.css new file mode 100644 index 0000000..b0bc654 --- /dev/null +++ b/apps/system/style/value_selector/date_picker.css @@ -0,0 +1,152 @@ +/* override section[role="dialog"] h3 */ +#date-picker h3 { + font-family: 'MozTT', Sans-serif; + font-weight: normal; + font-size: 1.6rem; + line-height: 1em; + color: #fff; + border-bottom: 0.1rem solid #686868; + margin: 0 2.5rem 1rem 2rem; + padding-bottom: 1rem; +} + +/* specific component code for date picker */ +#date-picker { + height: 87.5%; + width: calc(100% + 5px); + padding: 0; + font-size: 2.2rem; + line-height: 1em; + margin-left: -5px; + display: inline-block; + vertical-align: middle; + white-space: normal; +} + +#date-picker ol { + list-style: none; + padding: 0; + margin: 0; +} + +#date-picker-controls > button { + float: none; + width: auto; + text-overflow: clip; + font: 0/0 a; + position: absolute; + top: 0.5rem; + z-index: 100; + width: 7.5rem; + height: 4.5rem; + border: none; + background: transparent no-repeat center center; +} + +#date-picker-controls { + position: relative; + overflow: hidden; +} + +#date-picker-controls h1 { + font-weight: 200; + font-size: 2.2rem; + line-height: 1em; + text-align: center; + margin: 1.5rem 0px 2rem; +} + +#date-picker-controls button.next { + background-image: url(images/icons/next.png); + right: 0; +} + +#date-picker-controls button.previous { + background-image: url(images/icons/prev.png); + left: 0; +} + +#date-picker:after { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 13.4rem; + bottom: 0; + background: url(images/ui/shadow.png) repeat-y left top, url(images/ui/shadow-invert.png) repeat-y right top; + pointer-events: none; +} + +#date-picker ol { + width: 100%; + overflow: hidden; + clear: both; +} + +#date-picker li { + width: 14.285%; + text-align: center; + float: left; +} + +#date-picker-weekdays li { + width: 14.285%; + font-size: 1.1rem; + line-height: 1em; + font-weight: normal; + text-transform: uppercase; + background: #333; + padding: 0.5rem 0.2rem; + border-top: solid 1px #000; +} + +#date-picker-container { + border-bottom: 1px solid #000; +} + +#date-picker-container li { + border: solid 1px #000; + border-bottom: none; + line-height: 4.5rem; + height: 4.5rem; +} + +#date-picker-container .weeks-4 li { + line-height: 5.625rem; + height: 5.625rem; +} + +#date-picker-container .weeks-6 li { + line-height: 3.75rem; + height: 3.75rem; +} + +#date-picker-container li > span { + display: block; + font-weight: 200; + text-align: center; + transition: background 0.2s ease; + border: solid 1px #555; + border-left: none; + border-bottom: none; +} + +#date-picker-container li.past span { + color: #717171; +} + +#date-picker-container li.present { + background: url(images/ui/pattern-current.png) repeat left top; +} + +#date-picker-container span.selected { + background: #00A5C5; +} + +#date-picker-container ol li:last-child { + border-right: none; +} + +#date-picker * { + -moz-box-sizing: border-box; +} diff --git a/apps/system/style/value_selector/images/icons/next.png b/apps/system/style/value_selector/images/icons/next.png Binary files differnew file mode 100644 index 0000000..82e1515 --- /dev/null +++ b/apps/system/style/value_selector/images/icons/next.png diff --git a/apps/system/style/value_selector/images/icons/prev.png b/apps/system/style/value_selector/images/icons/prev.png Binary files differnew file mode 100644 index 0000000..387fce9 --- /dev/null +++ b/apps/system/style/value_selector/images/icons/prev.png diff --git a/apps/system/style/value_selector/images/ui/pattern-current.png b/apps/system/style/value_selector/images/ui/pattern-current.png Binary files differnew file mode 100644 index 0000000..426d7b2 --- /dev/null +++ b/apps/system/style/value_selector/images/ui/pattern-current.png diff --git a/apps/system/style/value_selector/images/ui/shadow-invert.png b/apps/system/style/value_selector/images/ui/shadow-invert.png Binary files differnew file mode 100644 index 0000000..68b2d5b --- /dev/null +++ b/apps/system/style/value_selector/images/ui/shadow-invert.png diff --git a/apps/system/style/value_selector/images/ui/shadow.png b/apps/system/style/value_selector/images/ui/shadow.png Binary files differnew file mode 100644 index 0000000..41f9209 --- /dev/null +++ b/apps/system/style/value_selector/images/ui/shadow.png 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 diff --git a/apps/system/style/value_selector/time_picker.css b/apps/system/style/value_selector/time_picker.css new file mode 100644 index 0000000..ea612ba --- /dev/null +++ b/apps/system/style/value_selector/time_picker.css @@ -0,0 +1,212 @@ +/* ----------- TimeSelectorView ---------- */ +#picker-bar { + position: relative; + margin-left: auto; + margin-right: auto; + overflow: hidden; +} + +#picker-bar.format12h { + width: 85%; +} + +#picker-bar.format24h { + width: 60%; +} + +#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; +} + +#picker-container { + width: 100%; + position: relative; + padding-top: 8.5rem; + height: 16rem; + overflow: hidden; +} + +#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; +} + +#value-indicator-hover-time { + pointer-events: none; + background-color: #00A5C5; + position: absolute; + height: 100%; + font: 3rem/6rem 'MozTT',sans-serif; + text-align: center; +} + +#picker-bar.format12h #value-indicator-hover-time { + width: 66%; +} + +#picker-bar.format24h #value-indicator-hover-time { + width: 100%; +} + +#value-indicator-hover { + pointer-events: none; + background-color: #00A5C5; + position: absolute; + width: 33%; + height: 100%; + right:0; +} + +#picker-bar.format12h #value-indicator-hover { + display: block; +} + +#picker-bar.format24h #value-indicator-hover { + display: none; +} + +div.animation-on { + -moz-transition-duration: 0.5s; + -moz-transition-property: top, left; +} + +#value-picker-hours { + position: relative; + -moz-user-select: none; + float: left; + text-align: center; +} + +#picker-bar.format12h #value-picker-hours { + width: 33%; +} + +#picker-bar.format24h #value-picker-hours { + width: 50%; +} + +#value-picker-minutes { + position: relative; + -moz-user-select: none; + float: left; +} + +#picker-bar.format12h #value-picker-minutes { + width: 34%; +} + +#picker-bar.format24h #value-picker-minutes { + width: 50%; +} + +#value-picker-hour24-state { + position: relative; + -moz-user-select: none; + width: 33%; + float: left; +} + +#picker-bar.format12h #value-picker-hour24-state { + display: block; +} + +#picker-bar.format24h #value-picker-hour24-state { + display: none; +} + +.picker-unit { + position: relative; + font: 3rem/8rem 'MozTT',sans-serif; + color: #FFF; + text-align: center; + vertical-align: middle; + width: 100%; + height: 6rem; + pointer-events: none; +} + +#picker-bar-background { + background: url("../themes/default/images/ui/time_pattern.png") repeat scroll left top transparent; + position: absolute; + width: 33%; + height: 100%; + right: 0; + top: 0; +} + +#picker-bar.format12h #picker-bar-background { + display: block; +} + +#picker-bar.format24h #picker-bar-background { + display: none; +} + +#left-picker-separator { + position: absolute; + width: 0.2rem; + height: 100%; + top: 0; + background: -moz-linear-gradient(center left, #555 50%, #000 50%); + pointer-events: none; +} + +#picker-bar.format12h #left-picker-separator { + left: 33%; +} + +#picker-bar.format24h #left-picker-separator { + left: 49.5%; +} + +#right-picker-separator { + position: absolute; + width: 0.2rem; + height: 100%; + top: 0; + left: 66%; + background: -moz-linear-gradient(center left, #555 50%, #000 50%); + pointer-events: none; +} + +#picker-bar.format12h #right-picker-separator { + display: block; +} + +#picker-bar.format24h #right-picker-separator { + display: none; +} diff --git a/apps/system/style/value_selector/value_selector.css b/apps/system/style/value_selector/value_selector.css new file mode 100644 index 0000000..7184046 --- /dev/null +++ b/apps/system/style/value_selector/value_selector.css @@ -0,0 +1,170 @@ +#value-selector { + width: 100%; + height: -moz-calc(100% - 20px); + top: 20px; + left: 0; + position: absolute; +} + +#screen.active-statusbar #value-selector { + height: -moz-calc(100% - 40px); + top: 40px; +} + +#screen:-moz-full-screen-ancestor #value-seletcor, +#screen.fullscreen-app #value-selector { + height: 100%; + top: 0; +} + +#select-options-buttons, +#time-picker-buttons, +#spin-date-picker-buttons { + /* from building blocks, core.css - menu:not([type="toolbar"]*/ + white-space: nowrap; + margin: 0; + padding: 0; + border-top: solid 1px rgba(255, 255, 255, 0.1); + background: #2d2d2d url(../themes/default/images/ui/pattern.png) repeat left top; + display: block; + overflow: hidden; + position: absolute; + left: 0; + right: 0; + bottom: 0; + text-align: center; + font-size: 0; /* to get rid of the spacing between 2 buttons */ +} + +#value-selector button:first-child { + margin-right: 0rem; +} + +#select-options-buttons button, +#time-picker-buttons button, +#spin-date-picker-buttons button{ + /* from building block - other/buttons/style.css*/ + width: calc((100% - 4.5rem) / 2); /*overridden for 2 buttons*/ + + height: 3.8rem; + margin: 1.5rem; + padding: 0 1.5rem; + display: inline-block; + vertical-align: middle; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + background: #fafafa url(../themes/default/images/ui/default.png) repeat-x left bottom; + border: 1px solid #9f9f9f; + border-radius: 0.3rem; + font-size: 1.6rem; + font-family: 'MozTT', Sans-serif; + font-weight: 600; + line-height: 3.8rem; + color: #333; + text-align: center; + text-shadow: 1px 1px 0 rgba(255,255,255,0.3); + text-decoration: none; + outline: none; +} + +/* Affirmative */ +#value-selector button.affirmative { + background-image: url(../themes/default/images/ui/affirmative.png); + background-color: #00caf2; + border-color: #00acce; +} + +#select-options-buttons button.full { + width: calc(100% - 4.5rem); + margin: 1.5rem; +} + +/*active class used to complement the "return false" in onmousedown effect */ +#value-selector button.active, +button.affirmative.active { + border-color: #008aaa; + background: #008aaa; + color: #333; +} + +#value-selector-container li > label { + pointer-events: none; +} + +#value-selector-container li.active label span { + background: none repeat scroll 0 0 #00ABCC; + color: #FFFFFF !important; +} + +#time-picker-popup, +#spin-date-picker-popup { + top: 0px; + padding: 0 0 7rem; /*remove the top padding*/ + + /* from building blocks, core.css - [role=dialog]*/ + background: url(../themes/default/images/ui/pattern.png) repeat left top, url(../themes/default/images/ui/gradient.png) no-repeat left top; + background-size: auto auto, 100% 100%; + overflow: hidden; + position: absolute; + z-index: 100; + left: 0; + right: 0; + bottom: 0; + white-space: nowrap; + padding: 0 0 7rem; /*remove the top padding*/ + font-family: "MozTT", Sans-serif; + color: #fff; +} + +#time-picker-popup h3, +#spin-date-picker-popup h3 { + font-family: 'MozTT', Sans-serif; + font-weight: normal; + font-size: 1.6rem; + line-height: 1em; + color: #fff; + border-bottom: 0.1rem solid #686868; + margin: 0 0 1.5rem; + padding-bottom: 1.5rem; +} + +.table-wrapper { + display: table; + width: 100%; + height: 100%; +} + +.table-cell { + display: table-cell; + vertical-align: middle; + width: 100%; + height: 100%; +} + +/* The following rules is to override the styles defined in building blocks of value selector */ +#value-selector li { + height: auto; + padding-bottom: 0px; + line-height: 3.9rem; +} + +#value-selector li span { + padding: 1rem 1.5rem; + line-height: 4rem; + word-wrap: break-word; +} + +#value-selector li input:checked + span, +#value-selector li[aria-checked="true"] span { + padding-right: 2.6rem; + margin-right: 1.2rem; + background: transparent url("../bb/value_selector/images/icons/checked.png") no-repeat 100% 50%; +} + +html[dir="rtl"] #value-selector li input:checked + span, +html[dir="rtl"] #value-selector li[aria-checked="true"] span { + padding-left: 2.6rem; + margin-left: 1.2rem; +} + |