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 | 296 -> 0 bytes | |||
-rw-r--r-- | apps/system/style/value_selector/images/icons/prev.png | bin | 1425 -> 0 bytes | |||
-rw-r--r-- | apps/system/style/value_selector/images/ui/pattern-current.png | bin | 116 -> 0 bytes | |||
-rw-r--r-- | apps/system/style/value_selector/images/ui/shadow-invert.png | bin | 82 -> 0 bytes | |||
-rw-r--r-- | apps/system/style/value_selector/images/ui/shadow.png | bin | 83 -> 0 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, 0 insertions, 783 deletions
diff --git a/apps/system/style/value_selector/date_picker.css b/apps/system/style/value_selector/date_picker.css deleted file mode 100644 index b0bc654..0000000 --- a/apps/system/style/value_selector/date_picker.css +++ /dev/null @@ -1,152 +0,0 @@ -/* 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 differdeleted file mode 100644 index 82e1515..0000000 --- a/apps/system/style/value_selector/images/icons/next.png +++ /dev/null diff --git a/apps/system/style/value_selector/images/icons/prev.png b/apps/system/style/value_selector/images/icons/prev.png Binary files differdeleted file mode 100644 index 387fce9..0000000 --- a/apps/system/style/value_selector/images/icons/prev.png +++ /dev/null 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 differdeleted file mode 100644 index 426d7b2..0000000 --- a/apps/system/style/value_selector/images/ui/pattern-current.png +++ /dev/null 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 differdeleted file mode 100644 index 68b2d5b..0000000 --- a/apps/system/style/value_selector/images/ui/shadow-invert.png +++ /dev/null diff --git a/apps/system/style/value_selector/images/ui/shadow.png b/apps/system/style/value_selector/images/ui/shadow.png Binary files differdeleted file mode 100644 index 41f9209..0000000 --- a/apps/system/style/value_selector/images/ui/shadow.png +++ /dev/null diff --git a/apps/system/style/value_selector/spin_date_picker.css b/apps/system/style/value_selector/spin_date_picker.css deleted file mode 100644 index 722d5fc..0000000 --- a/apps/system/style/value_selector/spin_date_picker.css +++ /dev/null @@ -1,249 +0,0 @@ -/* ----------- 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 deleted file mode 100644 index ea612ba..0000000 --- a/apps/system/style/value_selector/time_picker.css +++ /dev/null @@ -1,212 +0,0 @@ -/* ----------- 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 deleted file mode 100644 index 7184046..0000000 --- a/apps/system/style/value_selector/value_selector.css +++ /dev/null @@ -1,170 +0,0 @@ -#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; -} - |