diff --git a/app/views/SelectUserType.js b/app/views/SelectUserType.js index 1758ac4..ccb35b3 100644 --- a/app/views/SelectUserType.js +++ b/app/views/SelectUserType.js @@ -12,6 +12,7 @@ UPSApp.views.SelectUserType = Ext.extend(Ext.Panel, { }, { xtype:'button', + cls:'btn_imastudent', text:"I'm a Student" }, { diff --git a/index.html b/index.html index 65c4d3f..16d4d49 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,10 @@ - PhoneGap Demo with Sencha Touch - - + University of Puget Sound Mobile + + + diff --git a/sencha/resources/sass/android.scss b/sencha/resources/sass/android.scss new file mode 100644 index 0000000..68facee --- /dev/null +++ b/sencha/resources/sass/android.scss @@ -0,0 +1,37 @@ +// Let's start with the basics +$base-color: #333; +$active-color: #ff8100; +$base-gradient: 'flat'; + +// Buttons +$button-gradient: 'bevel'; + +// Lists +$list-bg-color: #eee; +$list-color: #333; +$list-pressed-color: #ddd; +$list-active-gradient: 'recessed'; +$list-header-bg-color: #999; +$list-header-gradient: 'bevel'; + +// Tabs +$tabs_dark_color: #000; + +@import 'sencha-touch/default/all'; + +@include sencha-panel; +@include sencha-buttons; +@include sencha-sheet; +@include sencha-picker; +@include sencha-tabs; +@include sencha-toolbar; +@include sencha-toolbar-forms; +@include sencha-carousel; +@include sencha-indexbar; +@include sencha-list; +@include sencha-list-paging; +@include sencha-list-pullrefresh; +@include sencha-layout; +@include sencha-form; +@include sencha-msgbox; +@include sencha-loading-spinner; \ No newline at end of file diff --git a/sencha/resources/sass/apple.scss b/sencha/resources/sass/apple.scss new file mode 100644 index 0000000..3521484 --- /dev/null +++ b/sencha/resources/sass/apple.scss @@ -0,0 +1,30 @@ +// Let's start with the basics +$base-color: #7c92ae; +$base-gradient: 'glossy'; + +// Lists +$list-active-gradient: 'bevel'; +$list-header-bg-color: transparentize(saturate($base-color, 10%), .25); +$list-header-gradient: 'matte'; + +// Tabs +$tabs-dark: #111; + +@import 'sencha-touch/default/all'; + +@include sencha-panel; +@include sencha-buttons; +@include sencha-sheet; +@include sencha-picker; +@include sencha-tabs; +@include sencha-toolbar; +@include sencha-toolbar-forms; +@include sencha-carousel; +@include sencha-indexbar; +@include sencha-list; +@include sencha-list-paging; +@include sencha-list-pullrefresh; +@include sencha-layout; +@include sencha-form; +@include sencha-msgbox; +@include sencha-loading-spinner; \ No newline at end of file diff --git a/sencha/resources/sass/bb6.scss b/sencha/resources/sass/bb6.scss new file mode 100644 index 0000000..6689e1f --- /dev/null +++ b/sencha/resources/sass/bb6.scss @@ -0,0 +1,66 @@ +$include-highlights: false; +$include-border-radius: false; + +// Let's start with the basics +$base-color: #393F45; +$active-color: #06f; +$base-gradient: 'none'; + +// Lists +$list_pressed_color: #09f; +$list_bg_color: #111; +$list_color: #eee; +$list_header_bg_color: #aaa; +$basic-slider: true; + +@import 'sencha-touch/default/all'; + +@include sencha-panel; +@include sencha-buttons; +@include sencha-sheet; +@include sencha-picker; +@include sencha-tabs; +@include sencha-toolbar; +@include sencha-toolbar-forms; +@include sencha-carousel; +@include sencha-indexbar; +@include sencha-list; +@include sencha-list-paging; +@include sencha-list-pullrefresh; +@include sencha-layout; +@include sencha-form; +@include sencha-msgbox; +@include sencha-loading-spinner; + +.x-indexbar-item { + color: #FFF; +} + +.x-scrollbar-dark { + background-color: rgba(255, 255, 255, .6); + border: 1px solid rgba(0, 0, 0, 0.2); +} + +//fixing back/forward buttons in BB. +$shadow-width: .065em; // Space between tip and its shadow +$overlap-width: .2em; // how far the mask is clipped + +$mask-height: $button-height; +$mask-width: $mask-height/2.5; +$mask-offset: $button-radius - $overlap-width - $button-stroke-weight + $shadow-width - .22em; + +.x-button-forward, .x-button-back { + &:before, &:after { + @include insertion($mask-width, $mask-height, -$button-stroke-weight, auto); + z-index: 2; + -webkit-mask: $mask-offset 0 theme_image($theme-name, "tip.png") no-repeat; + -webkit-mask-size: $mask-width $mask-height; + overflow: hidden; + } +} + +.x-button-forward, .x-toolbar .x-button-forward { + &:before, &:after { + -webkit-mask: -$mask-offset 0 theme_image($theme-name, "tip_right.png") no-repeat; + } + } diff --git a/sencha/resources/sass/sencha-touch.scss b/sencha/resources/sass/sencha-touch.scss new file mode 100644 index 0000000..7e2ee58 --- /dev/null +++ b/sencha/resources/sass/sencha-touch.scss @@ -0,0 +1,18 @@ +@import 'sencha-touch/default/all'; + +@include sencha-panel; +@include sencha-buttons; +@include sencha-sheet; +@include sencha-picker; +@include sencha-tabs; +@include sencha-toolbar; +@include sencha-toolbar-forms; +@include sencha-indexbar; +@include sencha-list; +@include sencha-list-paging; +@include sencha-list-pullrefresh; +@include sencha-layout; +@include sencha-carousel; +@include sencha-form; +@include sencha-msgbox; +@include sencha-loading-spinner; \ No newline at end of file diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/_all.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/_all.scss new file mode 100644 index 0000000..fee2127 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/_all.scss @@ -0,0 +1,2 @@ +@import 'core'; +@import 'widgets'; \ No newline at end of file diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/_core.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/_core.scss new file mode 100644 index 0000000..8357bc8 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/_core.scss @@ -0,0 +1,3 @@ +@import 'core/reset'; +@import 'core/core'; +@import 'core/layout'; \ No newline at end of file diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/_global.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/_global.scss new file mode 100644 index 0000000..f9b1163 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/_global.scss @@ -0,0 +1,2 @@ +@import 'variables'; +@import 'mixins'; \ No newline at end of file diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/_mixins.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/_mixins.scss new file mode 100644 index 0000000..f72af24 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/_mixins.scss @@ -0,0 +1,190 @@ +@import 'compass/css3'; + +/** + * Add a background gradient to a selector. + * + * .my-element { + * @include background-gradient(green, 'recessed') + * } + * + * @param {color} $bg-color The base color of the gradient. + * @param {string} $type The style of the gradient, one of five pre-defined options: matte, bevel, glossy, recessed, or flat. + */ +@mixin background-gradient($bg-color, $type: $base-gradient) { + background-color: $bg-color; + @if $include-highlights { + @if $type == bevel { + @include background-image(linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 15%) 2%, lighten($bg-color, 8%) 30%, $bg-color 65%, darken($bg-color, 10%)))); + } @else if $type == glossy { + @include background-image(linear-gradient(color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%)))); + } @else if $type == recessed { + @include background-image(linear-gradient(color_stops(darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%)))); + } @else if $type == matte { + @include background-image(linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 7%) 2%, darken($bg-color, 7%)))); + } @else { + background-image: none; + } + } +} + +/** + * Includes a base64-encoded icon for use within tab bars and buttons (With the component parameter iconMask: true). + * + * @include pictos-iconmask('attachment'); + * + * @param {string} $name The name of the icon to be included. This is to match the name of the icon file (located at resources/themes/images/default/pictos) without its extention (.png). + */ +@mixin pictos-iconmask($name) { + .x-tab img.#{$name}, .x-button img.x-icon-mask.#{$name} { + -webkit-mask-image: theme_image($theme-name, "pictos/" + $name + ".png"); + } +} + +/** + * Includes the default styles for toolbar buttons, mostly used as a helper function. + * + * @param {color} $bg-color Base color to be used for the button. + * @param {color} $type Gradient style for the button, will automatically use "recessed" when pressed. + */ +@mixin toolbar-button($bg-color, $type: $button-gradient){ + &, .x-toolbar & { + border: .1em solid darken($bg-color, 20%); + border-top-color: darken($bg-color, 15%); + @include color-by-background($bg-color); + + &.x-button-back:before, &.x-button-forward:before { + background: darken($bg-color, 20%); + } + + &, &.x-button-back:after, &.x-button-forward:after { + @include background-gradient($bg-color, $type); + } + + img.x-icon-mask { + @include mask-by-background($bg-color); + } + + @if $include-highlights { + @include bevel-by-background($bg-color); + -webkit-box-shadow: rgba(#fff, .1) 0 .1em 0; + } + + &.x-button-pressed, &.x-button-active { + &, &:after { + @include background-gradient(darken($bg-color, 7%), 'recessed'); + } + @if $include-highlights { + -webkit-box-shadow: inset saturate(darken($bg-color, 15%), 5%) 0 0 .1em, rgba(#fff, .1) 0 .1em 0; + } + } + } +} + +/** + * Adds a small text shadow (or highlight) to give the impression of beveled text. + * + * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark. + */ +@mixin bevel-text($type: 'shadow') { + @if $include-highlights { + @if $type == shadow { + text-shadow: rgba(0,0,0,.5) 0 -.08em 0; + } @else { + text-shadow: rgba(255,255,255,.25) 0 .08em 0; + } + } +} + +/** + * Adds a small box shadow (or highlight) to give the impression of being beveled. + * + * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark. + */ +@mixin bevel-box($type: 'light') { + @if $include-highlights { + @if $type == shadow { + -webkit-box-shadow: rgba(#000, .5) 0 -.06em 0; + } @else { + -webkit-box-shadow: rgba(#fff, .35) 0 .06em 0; + } + } +} + +/** + * Adds basic styles to :before or :after pseudo-elements. + * + * .my-element:after { + * @include insertion(50px, 50px); + * } + * + * @param {measurement} $width Height of pseudo-element. + * @param {measurement} $height Height of pseudo-element. + * @param {measurement} $top Top positioning of pseudo-element. + * @param {measurement} $left Left positioning of pseudo-element. + * + */ +@mixin insertion($width: 30px, $height: 30px, $top: 0, $left: 0) { + content: ""; + position: absolute; + width: $width; + height: $height; + top: $top; + left: $left; +} + +/** + * Makes an element stretch to its parent's bounds. + */ +@mixin stretch { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +/** + * Colors the text of an element based on lightness of its background. + * + * .my-element { + * @include color-by-background(#fff); // Colors text black. + * } + * + * .my-element { + * @include color-by-background(#fff, 40%); // Colors text gray. + * } + * + * @param {color} $bg-color Background color of element. + * @param {percent} $contrast Contrast of text color to its background. + * + */ +@mixin color-by-background($bg-color, $contrast: 100%) { + @if (lightness($bg-color) > 50) { color: darken($bg-color, $contrast) } + @else { color: lighten($bg-color, $contrast) } +} + +/** + * Bevels the text based on its background. + * + * @param {color} $bg-color Background color of element. + * @see bevel-text + * + */ +@mixin bevel-by-background($bg-color) { + @if (lightness($bg-color) > 50) { @include bevel-text(light) } + @else { @include bevel-text; } +} + +/** + * Creates a background gradient for masked elements, based on the lightness of their background. + * + * @param {color} $bg-color Background color of element. + * @param {percent} $percent Contrast of the new gradient to its background. + * @param {percent} $style Gradient style of the gradient. + * @see background-gradient + * + */ +@mixin mask-by-background($bg-color, $contrast: 100%, $style: $base-gradient) { + @if (lightness($bg-color) > 50) { @include background-gradient(darken($bg-color, $contrast), $style) } + @else { @include background-gradient(lighten($bg-color, $contrast), $style) } +} \ No newline at end of file diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/_variables.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/_variables.scss new file mode 100644 index 0000000..261dcb9 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/_variables.scss @@ -0,0 +1,98 @@ +$theme-name: 'default'; + +/** + * @var {boolean} $include-html-style + * Optionally remove included HTML styles/typography (for components with styleHtmlContent: true). + * Styles are scoped to .x-html. Set to false to reduce CSS weight. + */ +$include-html-style: true !default; + +/** + * @var {boolean} $include-default-icons + * Optionally remove the default icon set which includes the following toolbar and tab bar icons: action, + * add, arrow_down, arrow_left, arrow_right, arrow_up, bookmarks, compose, delete, download, favorites, + * home, info, locate, maps, more, organize, refresh, reply, search, settings, star, team, time, trash, + * and user. Set to false to reduce CSS weight. + */ +$include-default-icons: true !default; + +/** + * @var {boolean} $include-form-sliders + * Decides if default HTML styles are included (for components with styleHtmlContent: true). Class is applied to .x-html. + */ +$include-form-sliders: true !default; + +/** + * @var {boolean} $include-floating-panels + * Decides whether or not to include floating panels (useful to disable for iPhone applications which do not typically have floating menus). + */ +$include-floating-panels: true !default; + +/** + * @var {boolean} $include-default-uis + * Decides whether or not to include floating panels (useful to disable for iPhone applications + * which do not typically have floating menus). + */ +$include-default-uis: true !default; + +/** + * @var {boolean} $include-highlights=true + * Optionally disable all gradients, text-shadows, and box-shadows. Useful for CSS debugging, + * non-performant browsers, or minimalist designs. + */ +$include-highlights: true !default; // Can disable all theme-generated gradients, text-shadows, and box-shadows. + +/** + * @var {boolean} $include-border-radius + * Optionally disable all border-radius. Useful for CSS debugging, non-performant browsers, or minimalist designs. + */ +$include-border-radius: true !default; // Can disable all rounded corners + +/** + * @var {boolean} $basic-slider + * Optionally remove CSS3 effects from the slider component for improved performance. + */ +$basic-slider: false !default; + +/** + * @var {color} $base-color + * The primary color variable from which most elements derive their color scheme. + */ +$base-color: #354F6E !default; // Graphite + +/** + * @var {string} $base-gradient + * The primary gradient variable from which most elements derive their color scheme. + * @see background-gradient + */ +$base-gradient: 'matte' !default; + +/** + * @var {color} $alert-color + * Color used for elements like badges, errors, and "decline" UIs (eg. on buttons). + */ +$alert-color: red !default; + +/** + * @var {color} $confirm-color + * Color used for elements like success messages, and "confirm" UIs (eg. on buttons). + */ +$confirm-color: #92cf00 !default; // Green + +/** + * @var {color} $active-color + * Color used for elements like selected rows, "action" UIs (eg. on buttons) and certain overlays like the picker mask. + */ +$active-color: darken(saturate($base-color, 55%), 10%) !default; + +/** + * @var {color} $page-bg-color + * Background color for fullscreen components. + */ +$page-bg-color: #eee !default; + +/** + * @var {measurement} $global-row-height + * The minimum row height for items like toolbars and list items. + */ +$global-row-height: 2.6em !default; \ No newline at end of file diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/_widgets.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/_widgets.scss new file mode 100644 index 0000000..1333a39 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/_widgets.scss @@ -0,0 +1,14 @@ +@import 'widgets/map'; +@import 'widgets/picker'; +@import 'widgets/panel'; +@import 'widgets/toolbar'; +@import 'widgets/buttons'; +@import 'widgets/tabs'; +@import 'widgets/carousel'; +@import 'widgets/indexbar'; +@import 'widgets/list'; +@import 'widgets/form'; +@import 'widgets/sheets'; +@import 'widgets/msgbox'; +@import 'widgets/toolbar-forms'; +@import 'widgets/loading-spinner'; \ No newline at end of file diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/core/_core.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/core/_core.scss new file mode 100644 index 0000000..bcdb1f4 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/core/_core.scss @@ -0,0 +1,241 @@ +@import '../global'; +@import 'compass/css3/box-sizing'; +@import 'blueprint/typography'; + +$experimental-support-for-mozilla: false; +$experimental-support-for-opera: false; +$experimental-support-for-microsoft: false; +$experimental-support-for-khtml: false; + +html, body { + font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif; + font-weight: normal; + position: relative; +} + +*, *:after, *:before { + @include box-sizing(border-box); + -webkit-user-select: none; + -webkit-text-size-adjust: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +/*.x-android {*/ + /*input[type=checkbox], input[type=radio] {*/ + /*-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;*/ + /*}*/ + + /*input, textarea {*/ + /*-webkit-tap-highlight-color: rgba(0, 0, 0, 1) !important;*/ + /*}*/ +/*}*/ + +html, body, .x-body-stretcher { + width: 100%; + height: 100%; +} + +.x-ios.x-tablet .x-landscape * { + -webkit-text-stroke: 1px transparent; +} + +/* +.x-ipad { + .x-container, .x-panel, .x-toolbar, .x-mask { + -webkit-transform: translate3d(0, 0, 0); + } +} +*/ + +body { + font-size: 104%; +} + +body.x-ios { + -webkit-backface-visibility: hidden; +} + +body.x-android.x-phone { + font-size: 116%; +} + +body.x-ios.x-phone { + font-size: 114%; +} + +body.x-desktop { + font-size: 114%; +} + +input, textarea { + -webkit-user-select: text; +} + +.x-hidden-visibility { + visibility: hidden !important; +} + +.x-hidden-display { + display: none !important; +} + +.x-hidden-offsets { + position: absolute !important; + left: -10000em; + top: -10000em; + visibility: hidden; +} + +.x-fullscreen { + position: absolute !important; + top: 0px; + left: 0px; +} + +.x-desktop .x-body-stretcher { + margin-bottom: 0px; +} + +.x-scroller-parent { + overflow: hidden !important; +} + +.x-scroller-parent, .x-scroller { + position: relative; +} + +.x-ios .x-scroller, .x-ios .x-scroller > * { + -webkit-transform: translate3d(0, 0, 0); +} + +.x-draggable { + z-index: 1; +} + +.x-scrollbar { + position: absolute; + z-index: 10; + @if $include-border-radius { + -webkit-transition-property: opacity; + -webkit-transition-duration: 250ms; + -webkit-border-radius: 4px; + } + opacity: 0; +} + +.x-android .x-scrollbar { + -webkit-transition-property: none; + -webkit-transition-duration: 0ms; + -webkit-border-radius: 0px; +} + +.x-scrollbar-dark { + background-color: rgba(0, 0, 0, .6); + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.x-scrollbar-light { + background-color: rgba(255, 255, 255, .6); + border: 1px solid rgba(0, 0, 0, 0.2); +} + +.x-scrollbar-vertical { + top: 0; + right: 4px; + width: 4px; +} + +.x-scrollbar-horizontal { + left: 0; + bottom: 4px; + height: 4px; +} + +.x-mask { + position: absolute; + top: 0; + left: 0; + z-index: 8000; + @include display-box; + @include box-align(center); + @include box-pack(center); + background: rgba(0,0,0,.3) center center no-repeat; + + &.x-mask-gray { + background-color: rgba(0, 0, 0, 0.5); + } + + .x-mask-loading { + @include display-box; + @include box-orient(vertical); + @include box-align(center); + @include box-pack(center); + @if $include-border-radius { @include border-radius(.5em); } + color: #fff; + text-align: center; + padding: .4em; + font-weight: bold; + display: block; + width: 8.5em; + height: 8.5em; + background: rgba(0, 0, 0, .25); + } + + .x-loading-spinner { + margin: 1em auto .2em; + } + + .x-loading-msg { + font-size: .95em; + @include bevel-text; + } +} + +.x-floating { + position: absolute !important; + z-index: 10000 !important; + top: 0; + left: 0; +} + +.x-dragging { + opacity: 0.7; +} + +.x-panel-list { + background-color: saturate(lighten($base-color, 50%), 15%); +} + +@if $include-html-style { + .x-html { + -webkit-user-select: auto; + -webkit-touch-callout: inherit; + + @include blueprint-typography; + line-height: 1.5; + color: #333; + font-size: .8em; + padding: 1.2em; + + ul li { + list-style-type: circle; + } + ol li { + list-style-type: decimal; + } + } +} + +.x-video { + background-color: #000; +} + +.x-sortable .x-dragging { + opacity: 1; + z-index: 5; +} + +.x-fullscreen { + background: $page-bg-color; +} diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/core/_layout.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/core/_layout.scss new file mode 100644 index 0000000..ed74de4 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/core/_layout.scss @@ -0,0 +1,28 @@ +@mixin sencha-layout { + + .x-container { + position: relative; + } + + .x-layout-box-inner { + display: -webkit-box; + position: relative; + } + + .x-fit-item { + position: absolute; + left: 0; + top: 0; + overflow: hidden; + width: 100%; + } + + .x-panel > .x-docked, .x-docked { + position: absolute; + z-index: 5; + } + + .x-layout-fit { + overflow: hidden; + } +} \ No newline at end of file diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/core/_reset.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/core/_reset.scss new file mode 100644 index 0000000..542eca0 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/core/_reset.scss @@ -0,0 +1,62 @@ +body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, +h4, h5, h6, pre, code, form, fieldset, legend, +input, textarea, p, blockquote, th, td { + margin: 0; + padding: 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +fieldset, img { + border: 0; +} + +address, caption, cite, code, +dfn, em, strong, th, var { + font-style: normal; + font-weight: normal; +} + +li { + list-style: none; +} + +caption, th { + text-align: left; +} + +h1, h2, h3, h4, h5, h6 { + font-size: 100%; + font-weight: normal; +} + +q:before, +q:after { + content: ""; +} + +abbr, acronym { + border: 0; + font-variant: normal; +} + +sup { + vertical-align: text-top; +} + +sub { + vertical-align: text-bottom; +} + +input, textarea, select { + font-family: inherit; + font-size: inherit; + font-weight: inherit; +} + +*:focus { + outline: none; +} \ No newline at end of file diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_buttons.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_buttons.scss new file mode 100644 index 0000000..dd20bf5 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_buttons.scss @@ -0,0 +1,368 @@ +// Toolbar icons used with permission from Drew Wilson +// http://pictos.drewwilson.com/ +// Pictos icons are (c) 2010 Drew Wilson + +@import '../global'; + +/** + * @var {measurement} $button-height Default height for buttons. + * + * @member Ext.Button + * @xtype button + */ +$button-height: 1.8em; + +/** + * @var {measurement} $button-radius Default border-radius for buttons. + * + * @member Ext.Button + * @xtype button + */ +$button-radius: .4em !default; + +/** + * @var {measurement} $button-stroke-weight Default border width for buttons. + * + * @member Ext.Button + * @xtype button + */ +$button-stroke-weight: .1em !default; + +/** + * @var {string} $button-gradient Default gradient for buttons. + * + * @member Ext.Button + * @xtype button + * @see background-gradient + */ +$button-gradient: $base-gradient !default; + +/** + * @var {string} $toolbar-icon-size Default size (width and height) for toolbar icons. + * + * @member Ext.Button + * @xtype button + */ +$toolbar-icon-size: 1.4em !default; + +/** + * @var {boolean} $include-button-uis Optionally disable separate button UIs, including action, confirm, and decline. + * + * @member Ext.Button + * @xtype button + */ +$include-button-uis: $include-default-uis !default; + +/** + * @var {boolean} $include-button-uis Optionally disable special CSS3 effects on buttons including gradients, text-shadows, and box-shadows. + * + * @member Ext.Button + * @xtype button + */ +$include-button-highlights: $include-highlights !default; + + +/** + * Includes default button styles. + * + * @member Ext.Button + * @xtype button + * @see background-gradient + */ +@mixin sencha-buttons { + // Basic button style + .x-button { + @include background-clip(padding-box); + @if $include-border-radius { @include border-radius($button-radius); } + @include display-box; + @include box-align(center); + @include toolbar-button(#ccc, $button-gradient); + min-height: $button-height; + padding: .3em .6em; + position: relative; + overflow: hidden; + + // Default icon style + img { + width: 2.1em; + height: 2.1em; + background-repeat: no-repeat; + background-position: center; + display: block; + + &.x-icon-mask { + width: 1.3em; + height: 1.3em; + -webkit-mask-size: 1.3em; + } + } + + &.x-item-disabled .x-button-label, &.x-item-disabled img { + opacity: .5; + } + } + + .x-button-round { + @if $include-border-radius { @include border-radius($button-height/2); } + padding: .1em $button-height/2; + } + + .x-button-small, .x-toolbar .x-button-small { + @if $include-border-radius { @include border-radius(.3em); } + padding: .2em .4em; + min-height: 0; + + .x-button-label { + font-size: .6em; + } + + img { + width: .75em; + height: .75em; + } + } + + // Button icon alignment + .x-iconalign-left, .x-icon-align-right { + @include box-orient(horizontal); + @include box-direction(reverse); + } + .x-iconalign-top, .x-iconalign-bottom { + @include box-orient(vertical); + } + .x-iconalign-bottom, .x-iconalign-right { + @include box-direction(normal); + } + .x-iconalign-left, .x-iconalign-top { + @include box-direction(reverse); + } + .x-iconalign-left .x-button-label { + margin-left: $toolbar-spacing * 1.5; + } + .x-iconalign-right .x-button-label { + margin-right: $toolbar-spacing * 1.5; + } + + // Button labels + .x-button-label { + @include box-flex(1); + @include box-align(center); + white-space: nowrap; + text-overflow: ellipsis; + text-align: center; + font-weight: bold; + line-height: 1.2em; + display: block; + overflow: hidden; + } + + // Toolbar button styling + .x-toolbar .x-button { + margin: 0 .2em; + padding: .3em .6em; + + .x-button-label { + font-size: .7em; + } + } + + // Back/Forward buttons + $shadow-width: .065em; // Space between tip and its shadow + $overlap-width: .2em; // how far the mask is clipped + + // $mask-height: $button-height + $button-stroke-weight * 2; // Ugh, this is non-specific... borders? + $mask-height: $button-height; + $mask-width: $mask-height/2.33; + + $mask-offset: $button-radius - $overlap-width - $button-stroke-weight + $shadow-width - .02em; + + $tip-width: $mask-width - $mask-offset + $shadow-width; + + .x-button-forward, .x-button-back { + position: relative; + overflow: visible; + height: $button-height; + z-index: 1; + &:before, &:after { + @include insertion($mask-width, $mask-height, -$button-stroke-weight, auto); + z-index: 2; + -webkit-mask: $mask-offset 0 theme_image($theme-name, "tip.png") no-repeat; + -webkit-mask-size: $mask-width $mask-height; + overflow: hidden; + } + } + + .x-button-back, .x-toolbar .x-button-back { + margin-left: $tip-width - $shadow-width + $toolbar-spacing; + padding-left: .4em; + &:before { + left: - $tip-width; + } + &:after { + left: - $tip-width + $shadow-width; + } + } + + .x-button-forward, .x-toolbar .x-button-forward { + margin-right: $tip-width - $shadow-width + $toolbar-spacing; + padding-right: .4em; + &:before, &:after { + -webkit-mask: -$mask-offset 0 theme_image($theme-name, "tip_right.png") no-repeat; + } + &:before { + right: - $tip-width; + } + &:after { + right: - $tip-width + $shadow-width; + } + } + + // Plain buttons automatically use a margin trick to have a + // wide gradial glow for pressed state. + .x-button.x-button-plain, .x-toolbar .x-button.x-button-plain { + background: none; + border: 0 none; + @include box-shadow(none); + @if $include-border-radius { @include border-radius(none); } + min-height: 0; + text-shadow: none; + height: auto; + line-height: auto; + + margin: -1.5em -.5em; + padding: 1.3em 1em; + height: 1.8em; + + & > * { + overflow: visible; + margin-top: -.75em; + } + + img { + -webkit-mask-size: $toolbar-icon-size; + width: $toolbar-icon-size; + height: $toolbar-icon-size; + } + + &.x-button-pressed { + background: none; + -webkit-box-shadow: none; + + $mask-radial-glow: lighten($active-color, 50%); + @include background-image(radial-gradient(fade-out($mask-radial-glow, .3), fade-out($mask-radial-glow, 1) 24px)); + img { + @include background-gradient(#fff, 'recessed'); + } + } + } + + // SegmentedButtons + .x-segmentedbutton .x-button { + @if $include-border-radius { @include border-radius(0); } + margin: 0; + &:first-child { + @if $include-border-radius { @include border-left-radius($button-radius); } + } + &:last-child { + @if $include-border-radius { @include border-right-radius($button-radius); } + } + &:not(:first-child) { + border-left: 0; + } + } + + // Badges + $badge-size: 2em !default; + $badge-bg-color: darken($alert-color, 20%) !default; + $badge-bg-gradient: 'glossy'; + + .x-hasbadge { + overflow: visible; + .x-badge { + @extend .x-button-label; + @if $include-border-radius { @include border-radius($badge-size/2); } + @include background-clip(padding-box); + padding: .15em .25em; + z-index: 30; + @if $include-button-highlights { + @include bevel-by-background($badge-bg-color); + -webkit-box-shadow: #000 0 .1em .2em; + } + overflow: hidden; + color: #fff; + border: 2px solid #fff; + position: absolute; + width: auto; + min-width: $badge-size; + height: $badge-size; + line-height: 1.2em; + font-size: .6em; + top: -.15em; + right: 0px; + max-width: 100%; + + @include background-gradient($badge-bg-color, $badge-bg-gradient); + display: inline-block; + } + } + + @if $include-default-icons { + @include pictos-iconmask('action'); + @include pictos-iconmask('add'); + @include pictos-iconmask('arrow_down'); + @include pictos-iconmask('arrow_left'); + @include pictos-iconmask('arrow_right'); + @include pictos-iconmask('arrow_up'); + @include pictos-iconmask('compose'); + @include pictos-iconmask('delete'); + @include pictos-iconmask('organize'); + @include pictos-iconmask('refresh'); + @include pictos-iconmask('reply'); + @include pictos-iconmask('search'); + @include pictos-iconmask('settings'); + @include pictos-iconmask('star'); + @include pictos-iconmask('trash'); + @include pictos-iconmask('maps'); + @include pictos-iconmask('locate'); + @include pictos-iconmask('home'); + } + + @if $include-button-uis { + @include sencha-button-ui('action', $active-color); + @include sencha-button-ui('confirm', desaturate(darken($confirm-color, 10%), 5%)); + @include sencha-button-ui('decline', desaturate(darken($alert-color, 10%), 5%)); + } +} + + +/** + * Creates a theme UI for buttons. + * Also automatically generates UIs for {ui-label}-round and {ui-label}-small. + * + * // SCSS + * @include sencha-button-ui('secondary', #99A4AE, 'glossy'); + * + * // JS + * var cancelBtn = new Ext.Button({text: 'Cancel', ui: 'secondary'}); + * + * @param {string} $ui-label The name of the UI being created. + * Can not included spaces or special punctuation (used in class names) + * @param {color} $color Base color for the UI. + * @param {string} $gradient Default gradient for the UI. + * + * @member Ext.Button + * @xtype button + */ +@mixin sencha-button-ui($ui-label, $color, $gradient: $button-gradient) { + .x-button.x-button-#{$ui-label}, .x-button.x-button-#{$ui-label}-round, .x-button.x-button-#{$ui-label}-small { + @include toolbar-button($color, $gradient); + } + + .x-button.x-button-#{$ui-label}-round { + @extend .x-button-round; + } + + .x-button.x-button-#{$ui-label}-small { + @extend .x-button-small; + } +} diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_carousel.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_carousel.scss new file mode 100644 index 0000000..1b6ad4a --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_carousel.scss @@ -0,0 +1,120 @@ +@import '../global'; + +/** + * @var {measurement} $carousel-indicator-size Size (width/height) of carousel indicator dots. + * + * @member Ext.Carousel.Indicator + * @xtype carouselindicator + */ +$carousel-indicator-size: .5em !default; + +/** + * @var {measurement} $carousel-indicator-spacing + * Amount of space between carousel indicator dots. + * + * @member Ext.Carousel.Indicator + * @xtype carouselindicator + */ +$carousel-indicator-spacing: .2em !default; + +/** + * @var {measurement} $carousel-track-size Size of the track the carousel indicator dots are in. + * + * @member Ext.Carousel.Indicator + * @xtype carouselindicator + */ +$carousel-track-size: 1.5em !default; + +/** + * Includes basic carousel formatting. + * + * @member Ext.Carousel + * @xtype carousel + */ +@mixin sencha-carousel { + + .x-carousel-body { + overflow: hidden; + position: relative; + } + + .x-carousel-item { + position: absolute; + width: 100%; + height: 100%; + //-webkit-transform: translate3d(0px, 0px, 0px); + + // This declares the default state (non-moving) for carousel items + @include transition(matrix3d, 0, ease-out); + } + + .x-android .x-carousel-item { + //-webkit-transform: translate(0px, 0px); + @include transition(translate, 0, ease-out); + } + + .x-carousel-indicator { + position: absolute; + z-index: 1; + vertical-align: middle; + text-align: center; + @include display-box; + @include box-pack(center); + @include box-align(center); + + span { + display: block; + width: $carousel-indicator-size; + height: $carousel-indicator-size; + @if $include-border-radius { @include border-radius($carousel-indicator-size / 2); } + margin: $carousel-indicator-spacing; + } + } + + .x-carousel-indicator-horizontal { + height: $carousel-track-size; + bottom: 0; + left: 0; + width: 100%; + @include box-orient(horizontal); + } + + .x-carousel-indicator-vertical { + width: $carousel-track-size; + height: 100%; + right: 0; + top: 0; + @include box-orient(vertical); + } + + $indicator-light: rgba(#fff, .1); + $indicator-light-active: rgba(#fff, .3); + $indicator-dark: rgba(#000, .1); + $indicator-dark-active: rgba(#000, .3); + + @include sencha-carousel-indicator-ui('light', $indicator-light, 'flat', $indicator-light-active, 'flat'); + @include sencha-carousel-indicator-ui('dark', $indicator-dark, 'flat', $indicator-dark-active, 'flat'); +} + +/** + * Creates a theme UI for carousel indicator components. + * + * @param {string} $ui-label The name of the UI being created. + * Can not included spaces or special punctuation (used in class names) + * @param {color} $color Base color for the UI. + * @param {string} $gradient Default gradient for the UI. + * @param {color} $active-color Active color for the UI. + * @param {string} $active-gradient Active gradient for the UI. + * + * @member Ext.Carousel.Indicator + * @xtype carouselindicator + */ +@mixin sencha-carousel-indicator-ui($ui-label, $color, $gradient, $active-color, $active-gradient) { + .x-carousel-indicator-#{$ui-label} span { + @include background-gradient($color, $gradient); + + &.x-carousel-indicator-active { + @include background-gradient($active-color, $active-gradient) + } + } +} diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_form-sliders-basic.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_form-sliders-basic.scss new file mode 100644 index 0000000..43ae2b6 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_form-sliders-basic.scss @@ -0,0 +1,105 @@ +@import '../global'; + +/** + * Includes basic form slider styles. + * + * @member Ext.form.Slider + * @xtype sliderfield + */ +@mixin sencha-form-sliders { + + .x-slider { + position: relative; + height: $form-thumb-size; + margin: $form-spacing; + min-height: 0; + } + + .x-thumb { + position: absolute; + height: $form-thumb-size; + width: $form-thumb-size; + border: 1px solid red; + + &.x-dragging { + background-color: red; + } + } + + .x-input-slider { + width: auto; + background-color: #000; + } + + .x-field-toggle, .x-field-slider { + background-color: #fff; + @extend .x-input-el; + } + + .x-field-toggle .x-slider { + width: $form-thumb-size * 2; + @if $include-border-radius { @include border-radius($form-thumb-size/2); } + overflow: hidden; + border: .1em solid darken($form-light, 15%); + // -webkit-transform: translate3d(0px, 0px, 0px); + @include background-gradient($form-light, 'recessed'); + z-index: 2; + + // Masking the slider doesn't work in iOS 3, so we're fake-masking the outer area + // UPDATED: Doesnt fly on Android... + // &:after { + // @include insertion($form-thumb-size*2, $form-thumb-size, 0, 0); + // -webkit-mask: theme_image($theme-name, "trackmask_outer.png"); + // background-color: white; + // -webkit-mask-size: $form-thumb-size*2 $form-thumb-size; + // pointer-events: none; + // z-index: 4; + // } + + .x-thumb { + + .x-toggle-thumb-off, .x-toggle-thumb-on { + display: none; + } + + &.x-dragging { + opacity: 1; + } + + &:before { + top: ($form-thumb-size - $form-toggle-size) / 2; + } + + // Actual thumb + // &:after { + // @include insertion($form-thumb-size, $form-thumb-size, 0, 0); + // -webkit-box-shadow: rgba(0,0,0,.5) 0 0 .15em; + // @if $include-border-radius { @include border-radius($form-thumb-size/2); } + // -webkit-transform: scale(.65); + // @include background-gradient($complement_light, 'glossy'); + // border: 1px solid $complement; + // overflow: visible; + // z-index: 2; + // } + + // &.x-dragging { + // &:after { + // -webkit-transform: scale(.75); + // } + // } + // + // Used to animate the thumb. class added/removed by javascript when needed. + // &.x-animate { + // -webkit-transition: left .2s ease-in-out; + // } + } + + &.x-toggle-on { + @include background-gradient($confirm-color, 'recessed'); + } + } + + .x-android .x-field-toggle .x-slider { + //-webkit-transform: translate(0px, 0px); + } +} diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_form-sliders.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_form-sliders.scss new file mode 100644 index 0000000..bc4a9a9 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_form-sliders.scss @@ -0,0 +1,153 @@ +@import '../global'; + +/** + * Includes default form slider styles. + * + * @member Ext.form.Slider + * @xtype sliderfield + */ +@mixin sencha-form-sliders { + + .x-slider { + position: relative; + height: $form-thumb-size; + margin: $form-spacing; + min-height: 0; + } + + @if $basic-slider { + .x-thumb { + position: absolute; + height: $form-thumb-size; + width: $form-thumb-size; + border: #000; + background-color: #777; + + &.x-dragging { + background-color: #AAA; + } + } + + // Create the slider track + .x-input-slider:after { + @include insertion(auto, $form-slider-size, $form-toggle-size / 2 - $form-slider-size/2 + $form-spacing/2 - $form-thumb-space / 2, 0); + right: 0; + margin: 0 $form-toggle-size/2; + border: .1em solid rgba(#000, .1); + border-bottom: 0; + background-color: $form-light; + } + } @else { + .x-thumb { + position: absolute; + height: $form-thumb-size; + width: $form-thumb-size; + + // The actual thumb + &:before { + @include insertion($form-toggle-size, $form-toggle-size, $form-thumb-space, $form-thumb-space); + border: .1em solid darken($form-light, 30%); + @if $include-border-radius { @include border-radius($form-toggle-size/2); } + // overflow: visible; + @include background-gradient($form-light); + -webkit-box-shadow: inset rgba(#fff, .5) 0 0 .1em, inset rgba(#fff, .3) 0 -.1em 0; + @include background-clip(padding-box); + } + + &.x-dragging { + &:before { + @include background-gradient(darken($form-light, 5%)); + } + opacity: 1; + } + } + + .x-input-slider { + width: auto; + } + + // Create the slider track + .x-input-slider:after { + @include insertion(auto, $form-slider-size, $form-toggle-size / 2 - $form-slider-size/2 + $form-spacing/2 - $form-thumb-space / 2, 0); + right: 0; + margin: 0 $form-toggle-size/2; + @include background-gradient($form-light, 'recessed'); + border: .1em solid rgba(#000, .1); + border-bottom: 0; + -webkit-box-shadow: rgba(#fff,.7) 0 .1em 0; + @if $include-border-radius { @include border-radius($form-slider-size/2); } + } + } + + .x-field-toggle, .x-field-slider { + background-color: #fff; + @extend .x-input-el; + } + + .x-field-toggle .x-slider { + width: $form-thumb-size * 2; + @if $include-border-radius { @include border-radius($form-thumb-size/2); } + overflow: hidden; + border: .1em solid darken($form-light, 15%); + // -webkit-transform: translate3d(0px, 0px, 0px); + @include background-gradient($form-light, 'recessed'); + z-index: 2; + + // Masking the slider doesn't work in iOS 3, so we're fake-masking the outer area + // UPDATED: Doesnt fly on Android... + // &:after { + // @include insertion($form-thumb-size*2, $form-thumb-size, 0, 0); + // -webkit-mask: theme_image($theme-name, "trackmask_outer.png"); + // background-color: white; + // -webkit-mask-size: $form-thumb-size*2 $form-thumb-size; + // pointer-events: none; + // z-index: 4; + // } + + .x-thumb { + + .x-toggle-thumb-off, .x-toggle-thumb-on { + display: none; + } + + &.x-dragging { + opacity: 1; + } + + &:before { + top: ($form-thumb-size - $form-toggle-size) / 2; + } + + // Actual thumb + // &:after { + // @include insertion($form-thumb-size, $form-thumb-size, 0, 0); + // -webkit-box-shadow: rgba(0,0,0,.5) 0 0 .15em; + // @if $include-border-radius { @include border-radius($form-thumb-size/2); } + // -webkit-transform: scale(.65); + // @include background-gradient($complement_light, 'glossy'); + // border: 1px solid $complement; + // overflow: visible; + // z-index: 2; + // } + + // &.x-dragging { + // &:after { + // -webkit-transform: scale(.75); + // } + // } + // + // Used to animate the thumb. class added/removed by javascript when needed. + // &.x-animate { + // -webkit-transition: left .2s ease-in-out; + // } + } + + &.x-toggle-on { + @include background-gradient($confirm-color, 'recessed'); + } + } + + .x-android .x-field-toggle .x-slider { + //-webkit-transform: translate(0px, 0px); + } +} diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_form.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_form.scss new file mode 100644 index 0000000..55356b9 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_form.scss @@ -0,0 +1,520 @@ +@import '../global'; +@import 'form-sliders'; + +/** + * @var {color} $form-bg-color + * Default background-color for forms. + * + * @member Ext.form.FormPanel + * @xtype form + */ +$form-bg-color: #eee !default; + +/** + * @var {color} $form-field-bg-color + * Default background-color for form fields. + * + * @member Ext.form.Field + * @xtype field + */ +$form-field-bg-color: #fff !default; + +/** + * @var {color} $form-light + * Light color for form fields, mostly used on field borders. + * + * @member Ext.form.Field + * @xtype field + */ +$form-light: #ddd !default; + +/** + * @var {color} $form-dark + * Dark color for form fields, mostly used on labels/text. + * + * @member Ext.form.Field + * @xtype field + */ +$form-dark: #333 !default; + +/** + * @var {measurement} $form-label-width + * Default width for form labels. + * + * @member Ext.form.Field + * @xtype field + */ +$form-label-width: 6em !default; + +/** + * @var {measurement} $form-field-height + * Default height for form fields. + * + * @member Ext.form.Field + * @xtype field + */ +$form-field-height: 2.5em !default; + +/** + * @var {measurement} $form-spacing + * Default spacing for form fields, used for padding, etc. + * + * @member Ext.form.Field + * @xtype field + */ +$form-spacing: .6em !default; + +/** + * @var {measurement} $form-textarea-height + * Default height for form textareas. + * + * @member Ext.form.TextArea + * @xtype textareafield + */ +$form-textarea-height: 6em !default; + +/** + * @var {measurement} $form-thumb-size + * Default size of "thumbs" for form sliders/toggles. + * + * @member Ext.form.Slider + * @xtype sliderfield + */ +$form-thumb-size: 2.2em !default; + +/** + * @var {measurement} $form-toggle-size + * Thumb size minus padding for inset thumbs like in a Toggle element. + * + * @member Ext.form.Toggle + * @xtype togglefield + */ +$form-toggle-size: $form-thumb-size - .35em; + +/** + * @var {measurement} $form-fieldset-radius + * Default border-radius for form fieldsets. + * + * @member Ext.form.FieldSet + * @xtype fieldset + */ +$form-fieldset-radius: .4em !default; + +/** + * @var {measurement} $form-slider-size + * Height of the slider "track." + * + * @member Ext.form.Slider + * @xtype sliderfield + */ +$form-slider-size: .8em !default; + +// Private utility vars & mixins + +$form-thumb-space: ( $form-thumb-size - $form-toggle-size ) / 2; +$form-input-fields: '.x-input-text, .x-input, .x-input-number, .x-spinner-body, .x-input-radio, .x-input-checkbox, .x-input-email, .x-input-url, .x-input-password, .x-input-slider'; +$form-scrollable-fields: '.x-field-slider, .x-field-toggle, .x-field-checkbox, .x-field-radio'; + +@mixin label { + text-shadow: #fff 0 1px 1px; + color: $form-dark; +} + +@mixin checkmark($color: #000){ + @extend .x-checkmark-base; + border-color: $color; +} + +/** + * Includes default form styles. + * + * @member Ext.form.FormPanel + * @xtype button + * @see background-gradient + */ +@mixin sencha-form($include-sliders: $include-form-sliders) { + + .x-checkmark-base { + @include insertion(.75em, 1.25em, 50%, auto); + -webkit-transform: rotate(45deg) skew(5deg); + -webkit-transform-origin: 50% 50%; + right: ($form-spacing + .5em); + border: .35em solid; + border-top: none; + border-left: none; + margin-top: -.75em; + } + + .x-form .x-panel-body { + padding: 1em; + background-color: $form-bg-color; + } + + .x-input-el { + min-height: $form-field-height; + width: 100%; + display: block; + background: $form-field-bg-color none; + -webkit-appearance: none; + } + + .x-item-selected { + + .x-list-label{ + padding-right: ($form-spacing + 1.25em); + display: block; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + width: 100%; + } + + .x-list-selected{ + + &:before { + @include checkmark(lighten(#000, 15%)); + margin-top: -.85em; + } + + &:after { + @include checkmark($form-light); + } + } + } + + .x-field { + overflow: hidden; + position: relative; + min-height: $form-field-height; + border-bottom: 1px solid $form-light; + + // .x-input-text { + // white-space: nowrap; + // text-overflow: ellipsis; + // overflow: hidden; + // } + + input, textarea, select, .x-field-slider { + @extend .x-input-el; + @if $include-border-radius { @include border-radius(0); } + padding: .4em; + border: 0; + } + } + + .x-field:last-child { + border-bottom: 0; + } + + .x-field-mask { + @include stretch; + } + + #{$form-scrollable-fields} { + .x-field-mask { + @extend .x-hidden-display; + } + } + + // Hidden fields + + .x-field-hidden { + @extend .x-hidden-display; + } + + .x-form-fieldset { + + margin: 1em 0 1.5em; + .x-panel-body { + border: 1px solid $form-light; + padding: 0; + @if $include-highlights { + -webkit-box-shadow: rgba(255,255,255,.7) 0 1px 0; + } + @if $include-border-radius { @include border-radius($form-fieldset-radius); } + overflow: hidden; + } + } + + .x-form-fieldset-title { + @include label; + margin: 1em ( $form-spacing + .1em ) .3em; + color: $form-dark; + font-weight: bold; + } + + .x-form-fieldset-instructions { + @include label; + color: lighten($form-dark, 30%); + margin: 1em ( $form-spacing + .1em ) .3em; + font-size: .8em; + text-align: center; + } + + .x-form-label { + @include label; + @include bevel-text('light'); + background-color: lighten($form-light, 10%); + padding: $form-spacing; + border-top: 1px solid lighten($form-light, 20%); + display: block; + + span { + font-size: .8em; + font-weight: bold; + } + } + + .x-form-field-container { + @include box-flex(1); + width: 100%; + position: relative; + } + + .x-field { + @include display-box; + } + + #{$form-input-fields} { + @include box-flex(1); + } + + .x-label-align-left, .x-label-align-right { + @include box-orient(horizontal); + @include box-align(stretch); + +// .x-form-label { +// width: $form-label-width; +// } + } + + // Round the corners on fieldsets. + // Warning: It ain't pretty + + .x-form-fieldset .x-field { + &:first-child, &:first-child > :first-child:not(.x-input-toggle), &:first-child > :first-child input, &:first-child > :first-child textarea { + @if $include-border-radius { @include border-top-left-radius($form-fieldset-radius); } + } + + &:first-child, &:first-child > :last-child:not(.x-input-toggle), &:first-child > :last-child input, &:first-child > :last-child textarea { + @if $include-border-radius { @include border-top-right-radius($form-fieldset-radius); } + } + + &:last-child, &:last-child > :first-child:not(.x-input-toggle), &:last-child > :first-child input, &:last-child > :first-child textarea { + @if $include-border-radius { @include border-bottom-left-radius($form-fieldset-radius); } + } + + &:last-child, &:last-child > :last-child:not(.x-input-toggle), &:last-child > :last-child input, &:last-child > :last-child textarea { + @if $include-border-radius { @include border-bottom-right-radius($form-fieldset-radius); } + } + } + + .x-label-align-right { + @include box-direction(reverse); + @include box-pack(end); + } + + .x-form-fieldset .x-label-align-right { + &:first-child { + .x-form-label { + @if $include-border-radius { @include border-top-right-radius($form-fieldset-radius); } + } + #{$form-input-fields} { + @if $include-border-radius { @include border-top-right-radius(0); } + } + } + &:last-child { + .x-form-label { + @if $include-border-radius { @include border-bottom-right-radius($form-fieldset-radius); } + } + #{$form-input-fields} { + @if $include-border-radius { @include border-bottom-right-radius(0); } + } + } + } + + .x-label-align-top, .x-label-align-bottom { + @include box-orient(vertical); + } + .x-label-align-bottom { + @include box-direction(reverse); + } + + // Required fields + + .x-field-required { + label:after, .x-form-label:after { + content: "*"; + display: inline; + } + .x-form-label { + // color: $base-color; + } + } + + // Create the dropdown arrow + // for select fields + .x-field-select { + + &:before, &:after { + pointer-events: none; + position: absolute; + display: block; + right: 0; + } + + // Tip + &:after { + @include insertion(0,0,0,auto); + margin: 1em; + border: .4em solid transparent; + border-top-color: $form-light; + z-index: 2; + } + +// &.x-label-align-right:after { +// right: $form-label-width; +// } + + &.x-label-align-top:after { + top: auto; + bottom: 0; + } + + &:before { + @include insertion(4em,auto,0,auto); + bottom: 0; + z-index: 1; + @if $include-border-radius { @include border-right-radius(inherit); } + @if $include-highlights { background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba($form-field-bg-color, 0)), color-stop(.5, rgba($form-field-bg-color, 1))); } + } + + } + + .x-item-disabled { + .x-form-label span, input, .x-spinner-body, select, textarea, .x-field-clear-container { + color: lighten($form-dark, 50%); + } + } + + .x-field-textarea { + textarea { + min-height: $form-textarea-height; + padding-top: .5em; + } + } + + .x-field .x-input-radio, .x-field .x-input-checkbox { + &:after { + @include checkmark($form-light); + } + &:checked:after { + @include checkmark($active-color); + } + } + + .x-label-align-right .x-input-radio:after, .x-label-align-right .x-input-checkbox:after { + right: auto; + left: $form-spacing; + } + + // Spinner + .x-spinner { + border-bottom: 1px solid $form-light; + } + + .x-spinner .x-spinner-body { + @include display-box; + @include box-direction(normal); + } + + .x-spinner-body { + @include box-orient(horizontal); + @include box-align(stretch); + width: 100%; + text-align: center; + + span { + font-size: 1.3em; + font-weight: bold; + @include bevel-text('light'); + } + + .x-form-field-container { + width: 3em; + } + + input { + padding: 0; + border-right: 0; + border-left: 0; + @if $include-border-radius { @include border-radius(0); } + border-color: $form-light; + text-align: center; + } + + .x-spinner-down, .x-spinner-up { + @include box-flex(1); + font-weight: bold; + padding: .3em 0; + @include toolbar-button($form-light); + } + .x-spinner-down { + border-left: 0; + } + .x-spinner-up { + border-right: 0; + } + } + + $form-clear-size: 1.1em; + + .x-field-clear-container { + min-height: $form-field-height; + background-color: $form-field-bg-color; + @include display-box; + @include box-orient(horizontal); + @include box-align(center); + @include box-pack(center); + padding: 0 .3em; + } + + .x-android .x-field-clear { + line-height: 1.2em; + padding: 0 .3em; + } + + .x-field-clear { + width: $form-clear-size; + height: $form-clear-size; + @if $include-border-radius { @include border-radius($form-clear-size/2); } + background-color: rgba(#000, .15); + color: #fff; + font-weight: bold; + line-height: .9em; + text-align: center; + padding: 0 .27em; + } + + .x-field-clearable input.x-field-clearable { + padding-right: $form-clear-size + $form-spacing; + } + + .x-label-align-top .x-field-clear { + top: auto; + bottom: .7em; + } + + .x-label-align-right .x-field-clear { + top: $form-spacing; + right: $form-spacing; + } + + @if $include-sliders { + @include sencha-form-sliders; + } + + .x-select-overlay { + min-width: 200px; + } +} diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_indexbar.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_indexbar.scss new file mode 100644 index 0000000..9f55ef0 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_indexbar.scss @@ -0,0 +1,68 @@ +@import '../global'; + +/** + * @var {measurement} $index-bar-width + * Width of the index bar. + * + * @member Ext.IndexBar + * @xtype indexbar + */ +$index-bar-width: 2.1em !default; + +/** + * @var {color} $index-bar-bg-color + * Background-color of the index bar. + * + * @member Ext.IndexBar + * @xtype indexbar + */ +$index-bar-bg-color: hsla(hue($base-color), 10%, 60%, .8) !default; + +/** + * @var {color} $index-bar-color + * Text color of the index bar. + * + * @member Ext.IndexBar + * @xtype indexbar + */ +$index-bar-color: darken(desaturate($base-color, 5%), 15%) !default; + +/** + * Includes default index bar styles. + * + * @member Ext.FormPanel + * @xtype indexbar + */ +@mixin sencha-indexbar { + .x-indexbar { + padding: 0 .3em; + width: $index-bar-width; + @include display-box; + @include box-orient(vertical); + @include box-align(stretch); + @include box-pack(center); + position: absolute; + top: 1.5em; + right: 0; + bottom: 1em; + z-index: 3; + } + + .x-indexbar-body { + padding: .3em 0; + } + + .x-indexbar-pressed .x-indexbar-body { + @include border-radius(($index-bar-width - .6em)/2); + background-color: $index-bar-bg-color; + } + + .x-indexbar-item { + color: $index-bar-color; + font-size: 0.6em; + text-align: center; + line-height: 1.1em; + font-weight: bold; + display: block; + } +} \ No newline at end of file diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_list.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_list.scss new file mode 100644 index 0000000..7d77281 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_list.scss @@ -0,0 +1,297 @@ +@import '../global'; + + +/** + * @var {color} $list-color + * Text color for list rows. + * + * @member Ext.List + * @xtype list + */ +$list-color: #000 !default; + +/** + * @var {color} $list-bg-color + * Background-color for list rows. + * + * @member Ext.List + * @xtype list + */ +$list-bg-color: #f7f7f7 !default; + +/** + * @var {color} $list-pressed-color + * Background-color for pressed list rows. + * + * @member Ext.List + * @xtype list + */ +$include-list-highlights: $include-highlights !default; + +/** + * @var {color} $list-pressed-color + * Background-color for pressed list rows. + * + * @member Ext.List + * @xtype list + */ +$list-pressed-color: lighten($active-color, 50%) !default; + +/** + * @var {color} $list-active-color + * Background-color for selected list rows. + * + * @member Ext.List + * @xtype list + */ +$list-active-color: $active-color !default; + +/** + * @var {string} $list-active-gradient + * Gradient style for selected list rows. + * + * @member Ext.List + * @xtype list + */ +$list-active-gradient: $base-gradient !default; + +/** + * @var {color} $list-header-bg-color + * Background-color for list header rows (in grouped lists). + * + * @member Ext.List + * @xtype list + */ +$list-header-bg-color: lighten(saturate($base-color, 10%), 20%) !default; + +/** + * @var {string} $list-header-gradient + * Gradient style for list header rows (in grouped lists). + * + * @member Ext.List + * @xtype list + * @see background-gradient + */ +$list-header-gradient: $base-gradient !default; + +/** + * @var {measurement} $list-disclosure-size + * Default size (width/height) for disclosure icons. + * + * @member Ext.List + * @xtype list + */ +$list-disclosure-size: 1.7em; + +/** + * Includes default list styles. + * + * @member Ext.List + * @xtype list + */ +@mixin sencha-list { + .x-list { + background-color: $list-bg-color; + position: relative; + + .x-list-disclosure { + overflow: visible; + -webkit-mask: 0 0 theme_image($theme-name, "disclosure.png") no-repeat; + -webkit-mask-size: $list-disclosure-size; + @include background-gradient(saturate($active-color, 10%)); + width: $list-disclosure-size; + height: $list-disclosure-size; + } + + &.x-list-indexed .x-list-disclosure { + margin-right: 1.3em; + } + + .x-item-selected .x-list-disclosure { + background: #fff none; + } + + .x-list-item { + position: relative; + color: $list-color; + padding: 0.5em 0.8em; + + min-height: $global-row-height; + @include display-box; + + border-top: 1px solid darken($list-bg-color, 15%); + + &:first-child { + border-top: none; + } + + &:last-child { + border-bottom: 1px solid darken($list-bg-color, 15%); + } + + .x-list-item-body { + @include box-flex(1); + /*@include display-box;*/ + @include box-align(center); + @include box-orient(horizontal); + + span { + font-size: .95em; + } + } + + &.x-item-pressed { + @if $include-list-highlights { + border-top-color: $list-pressed-color; + } + + background: $list-pressed-color none; + } + + &.x-item-selected { + @include background-gradient($list-active-color, $list-active-gradient); + @include color-by-background($list-active-color); + @include bevel-by-background($list-active-color); + + @if $include-list-highlights { + border-top-color: lighten($list-active-color, 10%); + border-bottom-color: darken($list-active-color, 15%); + } + } + } + } + + .x-list-header { + @include background-gradient($list-header-bg-color, $list-header-gradient); + @include color-by-background($list-header-bg-color, 30%); + @include bevel-by-background($list-header-bg-color); + border-top: 1px solid $list-header-bg-color; + border-bottom: 1px solid darken($list-header-bg-color, 20%); + font-weight: bold; + font-size: 0.8em; + padding: 0.2em 1.02em; + @include bevel-by-background($list-header-bg-color); + @if $include-list-highlights { + -webkit-box-shadow: 0px .1em .3em rgba(0, 0, 0, 0.3); + } + } + + .x-list-header-swap { + z-index: 1; + position: absolute; + top: 0; + left: 0; + width: 100%; + } + + .x-list-round { + background-color: darken($list-bg-color, 5%); + .x-list-group-items > *, + &.x-list-flat .x-list-parent > * { + border-right: 1px solid darken($list-bg-color, 15%); + border-left: 1px solid darken($list-bg-color, 15%); + background-color: $list-bg-color; + margin: 0 1.2em; + &:first-child { + margin: 1.2em 1.2em 0; + border-top: 1px solid darken($list-bg-color, 15%); + @if $include-border-radius { @include border-top-radius(.4em); } + } + &:last-child { + margin: 0 1.2em 1.2em; + border-bottom: 1px solid darken($list-bg-color, 15%); + @include border-bottom-radius(.4em) + } + } + } +} + +@mixin sencha-list-paging { + .x-list-paging { + height: 50px; + .x-loading-spinner { + display: none; + margin: auto; + } + + .x-list-paging-msg { + text-align: center; + color: $active-color; + padding-top: 10px; + @if $include-border-radius { @include border-radius(6px); } + } + + &.x-loading { + .x-loading-spinner { + display: block; + } + + .x-list-paging-msg { + display: none; + } + } + } +} + +@mixin sencha-list-pullrefresh { + .x-list-pullrefresh { + @include display-box; + @include box-orient(horizontal); + @include box-align(center); + @include box-pack(center); + position: absolute; + top: -5em; + left: 0; + width: 100%; + height: 4.5em; + + .x-loading-spinner { + display: none; + } + } + + .x-list-pullrefresh-arrow { + width: 2.5em; + height: 4.5em; + + -webkit-mask: center center theme_image($theme-name, "pullarrow.png") no-repeat; + -webkit-mask-size: 2em 3em; + /*-webkit-transition-property: -webkit-transform;*/ + /*-webkit-transition-duration: 200ms;*/ + -webkit-transform: rotate(0deg); + background-color: #111; + } + + .x-list-pullrefresh-release .x-list-pullrefresh-arrow { + -webkit-transform: rotate(-180deg); + } + + .x-list-pullrefresh-wrap { + width: 20em; + font-size: 0.7em; + } + + .x-list-pullrefresh-message { + font-weight: bold; + font-size: 1.3em; + margin-bottom: 0.1em; + text-align: center; + } + + .x-list-pullrefresh-updated { + text-align: center; + } + + .x-list-pullrefresh-loading { + /*position: relative;*/ + /*top: 0;*/ + + .x-loading-spinner { + display: block; + } + + .x-list-pullrefresh-arrow { + display: none; + } + } +} diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_loading-spinner.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_loading-spinner.scss new file mode 100644 index 0000000..8ab78fc --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_loading-spinner.scss @@ -0,0 +1,121 @@ +/** + * @var {color} $loading-spinner-color + * Background-color for the bars in the loading spinner. + * + * @member Ext.LoadMask + */ +$loading-spinner-color: #aaa !default; + +// Private +$loading-spinner-size: 1em; +$loading-spinner-bar-width: .1em; +$loading-spinner-bar-height: .25em; + +/** + * Includes default loading spinner styles (for dataviews). + * + * @member Ext.LoadMask + */ +@mixin sencha-loading-spinner { + .x-loading-spinner { + font-size: 250%; + height: $loading-spinner-size; + width: $loading-spinner-size; + position: relative; + + -webkit-transform-origin: $loading-spinner-size/2 $loading-spinner-size/2; + + /* Shared Properties for all the bars */ + & > span, & > span:before, & > span:after { + display: block; + position: absolute; + width: $loading-spinner-bar-width; + height: $loading-spinner-bar-height; + top: 0; + -webkit-transform-origin: $loading-spinner-bar-width/2 $loading-spinner-size/2; + @if $include-border-radius { @include border-radius($loading-spinner-bar-width/2); } + content: " "; + } + + & > span { + &.x-loading-top { background-color: rgba($loading-spinner-color,0.99); } + &.x-loading-top::after { background-color: rgba($loading-spinner-color,0.90); } + &.x-loading-left::before { background-color: rgba($loading-spinner-color,0.80); } + &.x-loading-left { background-color: rgba($loading-spinner-color,0.70); } + &.x-loading-left::after { background-color: rgba($loading-spinner-color,0.60); } + &.x-loading-bottom::before{ background-color: rgba($loading-spinner-color,0.50); } + &.x-loading-bottom { background-color: rgba($loading-spinner-color,0.40); } + &.x-loading-bottom::after { background-color: rgba($loading-spinner-color,0.35); } + &.x-loading-right::before { background-color: rgba($loading-spinner-color,0.30); } + &.x-loading-right { background-color: rgba($loading-spinner-color,0.25); } + &.x-loading-right::after { background-color: rgba($loading-spinner-color,0.20); } + &.x-loading-top::before { background-color: rgba($loading-spinner-color,0.15); } + } + } + + .x-loading-spinner > span { + left: 50%; + margin-left: -0.05em; + } + + // .x-loading-spinner > span::before, .x-loading-spinner > span::after{ content: " "; } + + /* Rotate each of the 4 Spans */ + + .x-loading-spinner > span.x-loading-top{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); } + .x-loading-spinner > span.x-loading-right{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); } + .x-loading-spinner > span.x-loading-bottom{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); } + .x-loading-spinner > span.x-loading-left{ -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); } + + /* These are the two lines that surround each of the 4 Span lines */ + + .x-loading-spinner > span::before{-webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); } + .x-loading-spinner > span::after{ -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); } + + /* Set Animation */ + + .x-loading-spinner { + -webkit-animation-name: x-loading-spinner-rotate; + -webkit-animation-duration: .5s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + } + + @-webkit-keyframes x-loading-spinner-rotate{ + 0%{ -webkit-transform: rotate(0deg); } + 8.32%{ -webkit-transform: rotate(0deg); } + + 8.33%{ -webkit-transform: rotate(30deg); } + 16.65%{ -webkit-transform: rotate(30deg); } + + 16.66%{ -webkit-transform: rotate(60deg); } + 24.99%{ -webkit-transform: rotate(60deg); } + + 25%{ -webkit-transform: rotate(90deg); } + 33.32%{ -webkit-transform: rotate(90deg); } + + 33.33%{ -webkit-transform: rotate(120deg); } + 41.65%{ -webkit-transform: rotate(120deg); } + + 41.66%{ -webkit-transform: rotate(150deg); } + 49.99%{ -webkit-transform: rotate(150deg); } + + 50%{ -webkit-transform: rotate(180deg); } + 58.32%{ -webkit-transform: rotate(180deg); } + + 58.33%{ -webkit-transform: rotate(210deg); } + 66.65%{ -webkit-transform: rotate(210deg); } + + 66.66%{ -webkit-transform: rotate(240deg); } + 74.99%{ -webkit-transform: rotate(240deg); } + + 75%{ -webkit-transform: rotate(270deg); } + 83.32%{ -webkit-transform: rotate(270deg); } + + 83.33%{ -webkit-transform: rotate(300deg); } + 91.65%{ -webkit-transform: rotate(300deg); } + + 91.66%{ -webkit-transform: rotate(330deg); } + 100%{ -webkit-transform: rotate(330deg); } + } +} \ No newline at end of file diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_map.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_map.scss new file mode 100644 index 0000000..9c65a77 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_map.scss @@ -0,0 +1,9 @@ +.x-map { + background-color: #edeae2; //GMap tan background + width: 100%; + height: 100%; +} + +.x-mask-map { + background: transparent !important; +} \ No newline at end of file diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_msgbox.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_msgbox.scss new file mode 100644 index 0000000..954e346 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_msgbox.scss @@ -0,0 +1,70 @@ +/** + * Includes default message box styles. + * + * @member Ext.MessageBox + * @xtype messagebox + */ +@mixin sencha-msgbox { + div.x-sheet.x-msgbox { + width: 15em; + -webkit-box-shadow: rgba(#000, .4) 0 .1em .5em; + @if $include-border-radius { @include border-radius($panel-border-radius); } + border: .15em solid $base-color; + .x-toolbar-title { + font-size: .9em; + line-height: 1.4em; + } + .x-toolbar { + background: transparent none; + -webkit-box-shadow: none; + + &.x-docked-top { + border-bottom: 0; + height: 1.3em; + } + + &.x-docked-bottom { + border-top: 0; + } + } + } + .x-msgbox-body { + padding: 6px 0; + position: relative; + text-align: center; + } + .x-msgbox-text { + font-size: .9em; + } + .x-msgbox-buttons { + // @include box-direction(reverse); + .x-button { + min-width: 4.5em; + } + + .x-button-normal span { + opacity: .7; + } + } + .x-msgbox-input { + margin-top: .4em; + -webkit-appearance: none; + @if $include-border-radius { @include border-radius(.2em); } + } + + // TODO: Refactor along with Sheet + @include msgbox-ui('dark'); +} + +@mixin msgbox-ui($ui-label) { + .x-msgbox-#{$ui-label} { + .x-msgbox-text { + @include color-by-background($sheet-bg-color, 80%); + @include bevel-by-background($sheet-bg-color); + } + .x-msgbox-input { + @include background-gradient(lighten($sheet-bg-color, 80%), 'recessed'); + border: .1em solid lighten($sheet-bg-color, 40%); + } + } +} diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_panel.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_panel.scss new file mode 100644 index 0000000..2d31d03 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_panel.scss @@ -0,0 +1,60 @@ +@import '../global'; + +$panel-border-radius: .3em; + +@mixin sencha-panel($include-floating: $include-floating-panels) { + .x-panel, + .x-panel-body { + position: relative; + } + + @if $include-floating { + .x-floating.x-panel, .x-floating.x-carousel { + padding: 6px; + @if $include-border-radius { @include border-radius($panel-border-radius); } + -webkit-box-shadow: rgba(0,0,0,.8) 0 .2em .6em; + @include background-gradient(darken($base-color, 40%), 'flat'); + + &.x-panel-light { + @include background-gradient($base-color, 'flat'); + } + } + + .x-floating .x-panel-body, .x-floating .x-carousel-body { + background-color: #fff; + @if $include-border-radius { @include border_radius($panel-border-radius); } + } + + $anchor-height: .7em; + $anchor-width: $anchor-height*2.33; + + .x-anchor { + width: $anchor-width; + height: $anchor-height; + position: absolute; + z-index: 1; + -webkit-mask: 0 0 theme_image($theme-name, "tip_horizontal.png") no-repeat; + -webkit-mask-size: $anchor-width $anchor-height; + overflow: hidden; + background-color: darken($base-color, 40%); + + &.x-anchor-bottom { + -webkit-transform: rotate(180deg); + background-color: darken($base-color, 40%); + } + + &.x-anchor-left { + -webkit-transform: rotate(270deg); + } + + &.x-anchor-right { + -webkit-transform: rotate(90deg); + } + } + .x-floating.x-panel-light { + &:after { + background-color: $base-color; + } + } + } +} diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_picker.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_picker.scss new file mode 100644 index 0000000..2485f81 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_picker.scss @@ -0,0 +1,114 @@ +@import '../global'; + +$picker-row-height: 2.5em !default; +$picker-active-border: .12em solid $active-color !default; +$picker-sheet-radius: .4em !default; +$picker-title-color: darken(desaturate($base-color, 10%), 25%) !default; +$picker-title-bg-color: lighten(saturate($base-color, 10%), 5%) !default; +$picker-title-bg-gradient: $base-gradient !default; +$include-picker-highlights: $include-highlights !default; +$picker-bar-gradient: $base-gradient !default; + +@mixin sencha-picker { + + .x-sheet.x-picker { + padding: 0; + } + + .x-sheet.x-picker > .x-sheet-body { + position: relative; + background-color: #fff; + @if $include-border-radius { @include border-radius($picker-sheet-radius); } + @include background-clip(padding-box); + overflow: hidden; + margin: $sheet-padding; + + @if $include-picker-highlights { + &:before, &:after { + z-index: 1; + @include insertion(100%, 30%, 0, 0); + } + + &:before { + top: auto; + @if $include-border-radius { @include border-bottom-radius($picker-sheet-radius); } + bottom: 0; + @include background-image(linear-gradient(color-stops(#fff, #bbb))); + } + &:after { + @if $include-border-radius { @include border-top-radius($picker-sheet-radius); } + @include background-image(linear-gradient(color-stops(#bbb, #fff))); + } + } + } + + .x-picker-slot { + z-index: 2; + position: relative; + @if $include-highlights { + -webkit-box-shadow: rgba(#000,.4) -1px 0 1px; + } + &:first-child { + -webkit-box-shadow: none; + } + } + + .x-picker-mask { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 3; + @include display-box; + @include box-align(stretch); + @include box-orient(vertical); + @include box-pack(center); + pointer-events: none; + } + + .x-picker-bar { + border-top: $picker-active-border; + border-bottom: $picker-active-border; + height: $picker-row-height; + @include background-gradient(hsla(hue($active-color), 90, 50, .3), $picker-bar-gradient); + @if $include-highlights { + -webkit-box-shadow: rgba(#000,0.2) 0 .2em .2em; + } + } + + .x-picker-slot-title { + @include background-gradient($picker-title-bg-color, $picker-title-bg-gradient); + border-top: 1px solid $picker-title-bg-color; + border-bottom: 1px solid darken($picker-title-bg-color, 20%); + font-weight: bold; + font-size: 0.8em; + color: $picker-title-color; + padding: 0.2em 1.02em; + @if $include-picker-highlights { + -webkit-box-shadow: 0px .1em .3em rgba(0, 0, 0, 0.3); + @include bevel-text('light'); + } + } + + .x-picker-item { + vertical-align: middle; + height: $picker-row-height; + line-height: $picker-row-height; + font-weight: bold; + padding: 0 10px 0 10px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + .x-picker-right { + text-align: right; + } + .x-picker-center { + text-align: center; + } + .x-picker-left { + text-align: left; + } +} diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_sheets.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_sheets.scss new file mode 100644 index 0000000..d4fa028 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_sheets.scss @@ -0,0 +1,59 @@ +@import '../global'; + +/** + * @var {color} $sheet-bg-color + * Background-color for action sheets and message boxes. + * + * @member Ext.Sheet + * @xtype actionsheet + */ +$sheet-bg-color: transparentize(darken($base-color, 40%), .1) !default; + +/** + * @var {color} $sheet-bg-gradient + * Background gradient style for action sheets and message boxes. + * + * @member Ext.Sheet + * @xtype actionsheet + */ +$sheet-bg-gradient: $base-gradient !default; + +/** + * @var {measurement} $sheet-button-spacing + * Vertical spacing between sheet buttons. + * + * @member Ext.Sheet + * @xtype actionsheet + */ +$sheet-button-spacing: .5em !default; + +/** + * @var {measurement} $sheet-padding + * Overall padding in a sheet. + * + * @member Ext.Sheet + * @xtype actionsheet + */ +$sheet-padding: .7em !default; + +/** + * Includes default sheet styles (also required for message box). + * + * @member Ext.Sheet + * @xtype actionsheet + */ +@mixin sencha-sheet { + .x-sheet { + padding: $sheet-padding; + border-top: 1px solid darken($base-color, 30%); + @include background-gradient($sheet-bg-color, $sheet-bg-gradient); + + .x-sheet-body .x-button { + margin-bottom: $sheet-button-spacing; + } + } + + .x-sheet-body { + position: relative; + } +} \ No newline at end of file diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_tabs.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_tabs.scss new file mode 100644 index 0000000..16c2ca8 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_tabs.scss @@ -0,0 +1,302 @@ +// Tab icons used with permission from Drew Wilson +// http://pictos.drewwilson.com/ +// Pictos icons are (c) 2010 Drew Wilson + +@import '../global'; + +/** + * @var {boolean} $include-tabbar-uis Optionally disable separate tabbar UIs (light and dark). + * + * @member Ext.TabBar + * @xtype tabbar + */ +$include-tabbar-uis: $include-default-uis !default; + +/** + * @var {boolean} $include-top-tabs + * Optionally exclude top tab styles by setting to false. + * + * @member Ext.TabBar + * @xtype tabbar + */ +$include-top-tabs: true !default; + +/** + * @var {boolean} $include-bottom-tabs + * Optionally exclude bottom tab styles by setting to false. + * + * @member Ext.TabBar + * @xtype tabbar + */ +$include-bottom-tabs: true !default; + +/** + * @var {color} $tabs-light + * Base color for "light" UI tabs. + * + * @member Ext.TabBar + * @xtype tabbar + */ +$tabs-light: lighten(desaturate($base-color, 10%), 5%) !default; + +/** + * @var {color} $tabs-light-active + * Active color for "light" UI tabs. + * + * @member Ext.TabBar + * @xtype tabbar + */ +$tabs-light-active: saturate($active-color, 20%) !default; + +/** + * @var {color} $tabs-dark + * Base color for "dark" UI tabs. + * + * @member Ext.TabBar + * @xtype tabbar + */ +$tabs-dark: darken($base-color, 20%) !default; + +/** + * @var {color} $tabs-dark-active + * Active color for "dark" UI tabs. + * + * @member Ext.TabBar + * @xtype tabbar + */ +$tabs-dark-active-color: saturate(lighten($active-color, 30%), 70%) !default; + +/** + * @var {string} $tabs-bar-gradient + * Background gradient style for tab bars. + * + * @member Ext.TabBar + * @xtype tabbar + */ +$tabs-bar-gradient: $base-gradient !default; + +/** + * @var {string} $tabs-bottom-radius + * Border-radius for bottom tabs. + * + * @member Ext.Tab + * @xtype tab + */ +$tabs-bottom-radius: .25em !default; + +/** + * @var {string} $tabs-bottom-icon-size + * Icon size for bottom tabs + * + * @member Ext.Tab + * @xtype tab + */ +$tabs-bottom-icon-size: 1.65em !default; + +/** + * @var {string} $tabs-bottom-active-gradient + * Background gradient style for active bottom tabs. + * + * @member Ext.Tab + * @xtype tab + */ +$tabs-bottom-active-gradient: 'glossy' !default; + +// Private + +$tabs-top-height: $global-row-height - .8em; + +/** + * Includes default tab styles. + * + * @member Ext.TabBar + * @xtype tabbar + */ +@mixin sencha-tabs { + @if $include-top-tabs { + @include sencha-top-tabs; + } + @if $include-bottom-tabs { + @include sencha-bottom-tabs; + } + + @if $include-tabbar-uis { + @include sencha-tabbar-ui('light', $tabs-light, $tabs-bar-gradient, $tabs-light-active); + @include sencha-tabbar-ui('dark', $tabs-dark, $tabs-bar-gradient, $tabs-dark-active-color); + } + + // Rules for all tabs + .x-tab.x-item-disabled span.x-button-label, .x-tab.x-item-disabled img { + opacity: .5; + } + .x-tab.x-draggable { + opacity: .7; + } +} + + +@mixin sencha-top-tabs { + + .x-tabbar.x-docked-top { + border-bottom: .1em solid; + height: $global-row-height; + padding: 0 .8em; + + .x-tab { + margin: .4em .2em; + padding: (($tabs-top-height - 1em) / 2) .8em; + height: $tabs-top-height; + @if $include-border-radius { @include border-radius($tabs-top-height / 2); } + } + + @if ($include-highlights) { + .x-tab-active { + -webkit-box-shadow: rgba(#fff, .2) 0 .1em .1em, inset rgba(#000, .3) 0 .1em .2em; + } + } + + .x-button-label { + font-size: .8em; + line-height: 1.2em; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + } + } +} + + +@mixin sencha-bottom-tabs { + .x-tabbar.x-docked-bottom { + border-top: .1em solid; + height: 3em; + + .x-tab { + @include display-box; + @include box-direction(reverse); + @include box-orient(vertical); + @if $include-border-radius { @include border-radius($tabs-bottom-radius); } + margin: .15em; + min-width: 3.3em; + position: relative; + + img { + -webkit-mask-size: $tabs-bottom-icon-size; + width: $tabs-bottom-icon-size; + height: $tabs-bottom-icon-size; + display: block; + margin: .4em auto .1em; + position: relative; + } + + // Start of automatic tab icon shadows... + // &:before { + // @include insertion; + // background: red; + // width: $tabs-bottom-icon-size; + // height: $tabs-bottom-icon-size; + // position: absolute; + // top: -.1em; + // } + + .x-button-label { + margin: 0; + font-size: 9px; + line-height: 12px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + } + } + + @if ($include-highlights) { + .x-tab-active { + -webkit-box-shadow: inset rgba(#fff, .3) 0 0 .1em; + } + } + } + + @if $include-default-icons { + @include pictos-iconmask('bookmarks'); + @include pictos-iconmask('download'); + @include pictos-iconmask('favorites'); + @include pictos-iconmask('info'); + @include pictos-iconmask('more'); + @include pictos-iconmask('time'); + @include pictos-iconmask('user'); + @include pictos-iconmask('team'); + } +} + +/** + * Creates a theme UI for tabbar/tab components. + * + * @param {string} $ui-label The name of the UI being created. + * Can not included spaces or special punctuation (used in class names) + * @param {color} $bar-color Base color for the tab bar. + * @param {string} $bar-gradient Background gradient style for the tab bar. + * @param {color} $tab-active-color Background-color for active tab icons. + * + * @example + * // SCSS + * @include sencha-button-ui('pink', #333, 'matte', #AE537A); + * + * // JS + * var tabs = new Ext.TabPanel({ + * tabBar: { + * ui: 'pink', + * dock: 'bottom', + * layout: { pack: 'center' } + * }, + * ... + * }); + * + * @member Ext.TabBar + * @xtype tabbar + */ +@mixin sencha-tabbar-ui($ui-label, $bar-color, $bar-gradient, $tab-active-color) { + .x-tabbar-#{$ui-label} { + @include background-gradient($bar-color, $bar-gradient); + border-color: darken($bar-color, 5%); + + .x-tab { + @include color-by-background($bar-color, 40%); + } + + .x-tab-active { + @include color-by-background($bar-color, 90%); + } + + .x-tab-pressed { + @include color-by-background($bar-color, 100%); + } + } + + @if $include-bottom-tabs { + .x-tabbar-#{$ui-label}.x-docked-bottom { + .x-tab { + @include bevel-by-background($bar-color); + img { + @include mask-by-background($bar-color, 20%, $tabs-bar-gradient); + } + } + + .x-tab-active { + @include background-gradient(lighten($bar-color, 5%), $tabs-bar-gradient); + @include bevel-by-background(lighten($bar-color, 10%)); + + img { + @include background-gradient($tab-active-color, $tabs-bottom-active-gradient); + } + } + } + } + + @if $include-top-tabs { + .x-tabbar-#{$ui-label}.x-docked-top { + + .x-tab-active { + @include background-gradient(darken($bar-color, 5%), 'recessed'); + @include color-by-background(darken($bar-color, 5%)); + } + } + } +} diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_toolbar-forms.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_toolbar-forms.scss new file mode 100644 index 0000000..408f886 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_toolbar-forms.scss @@ -0,0 +1,139 @@ +@import '../global'; + +/** + * @var {color} $toolbar-input-bg + * Background-color for toolbar form fields. + * + * @member Ext.form.Field + * @xtype field + */ +$toolbar-input-bg: #fff !default; + +/** + * @var {color} $toolbar-input-color + * Text color for toolbar form fields. + * + * @member Ext.form.Field + * @xtype field + */ +$toolbar-input-color: #000 !default; + +/** + * @var {measurement} $toolbar-input-height + * Text color for toolbar form fields. + * + * @member Ext.form.Field + * @xtype field + */ +$toolbar-input-height: 1.5em !default; + +/** + * @var {color} $toolbar-input-border-color + * Border color for toolbar form fields. + * + * @member Ext.form.Field + * @xtype field + */ +$toolbar-input-border-color: rgba(#000, .5) !default; + +// Private +$toolbar-select-overflow-mask-width: 3em; +$toolbar-search-left-padding: 1.67em; + +/** + * Includes default toolbar form field styles. + * + * @member Ext.TabBar + * @xtype tabbar + */ +@mixin sencha-toolbar-forms { + + @if $include-highlights { + .x-android .x-toolbar { + .x-input-text, .x-input-search, .x-input-number { + -webkit-box-shadow: inset $toolbar-input-border-color 0 .1em .1em, inset $toolbar-input-border-color 0 -.1em .1em, inset $toolbar-input-border-color .1em 0 .1em, inset $toolbar-input-border-color -.1em 0 .1em, inset rgba(#000, .5) 0 .15em .4em; + } + } + } + + .x-desktop .x-toolbar { + .x-input-search { + padding-left: ($toolbar-search-left-padding - .61em); + } + } + + .x-toolbar { + .x-field { + margin: .3em .5em; + min-height: 0; + border-bottom: 0; + width: auto; + } + + .x-input-text, .x-input-search, .x-input-number { + @if $include-border-radius { @include border-radius(.3em); } + @include background-clip(padding-box); + height: $toolbar-input-height; + color: lighten($toolbar-input-color, 43%); + background-color: $toolbar-input-bg; + min-height: 0; + line-height: 1.3em; + -webkit-appearance: none; + padding: 0em .3em; + margin: 0; + + @if $include-highlights { + -webkit-box-shadow: inset $toolbar-input-border-color 0 .1em 0, inset $toolbar-input-border-color 0 -.1em 0, inset $toolbar-input-border-color .1em 0 0, inset $toolbar-input-border-color -.1em 0 0, inset rgba(#000, .5) 0 .15em .4em; + } + + &:focus { + color: $toolbar-input-color; + } + } + + .x-input-search, .x-field-select .x-input-text { + padding: 0em .5em; + @if $include-border-radius { @include border-radius($toolbar-input-height/2); } + } + + .x-input-search { + background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(rgba($toolbar-input-bg,.6))), theme_image($theme-name, "pictos/search.png"); + -webkit-background-size: .83em .83em, .83em .83em; + background-repeat: no-repeat; + background-position: .5em 50%; + padding-left: $toolbar-search-left-padding; + } + + .x-field-select { + &:after { + top: -.5em; + right: -.5em; + } + + // Background is set in _toolbar file + &:before { + width: $toolbar-select-overflow-mask-width; + border-left: none; + @if $include-border-radius { @include border-right-radius($toolbar-input-height/2); } + @if $include-highlights { + -webkit-mask: theme_image($theme-name, "select_mask.png"); + -webkit-mask-position: right top; + -webkit-mask-repeat: repeat-y; + -webkit-mask-size: $toolbar-select-overflow-mask-width .05em; + } + @else { + width: 0.5em !important; + } + } + + .x-input-text, &:before { + -webkit-box-shadow: none; + } + + .x-input-text { + padding-right: 1.5em; + display: block; + } + } + } +} diff --git a/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_toolbar.scss b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_toolbar.scss new file mode 100644 index 0000000..8e90046 --- /dev/null +++ b/sencha/resources/themes/stylesheets/sencha-touch/default/widgets/_toolbar.scss @@ -0,0 +1,108 @@ +@import '../global'; + +/** + * @var {measurement} $toolbar-spacing + * Space between items in a toolbar (like buttons and fields) + * + * @member Ext.Toolbar + * @xtype toolbar + */ +$toolbar-spacing: .2em !default; + +/** + * @var {string} $toolbar-gradient + * Background gradient style for toolbars. + * + * @member Ext.Toolbar + * @xtype toolbar + */ +$toolbar-gradient: $base-gradient !default; + +/** + * @var {boolean} $include-toolbar-uis + * Optionally disable separate toolbar UIs (light and dark). + * + * @member Ext.Toolbar + * @xtype toolbar + */ +$include-toolbar-uis: $include-default-uis !default; + +/** + * Includes default toolbar styles. + * + * @member Ext.Toolbar + * @xtype toolbar + */ +@mixin sencha-toolbar { + + .x-toolbar { + height: $global-row-height; + padding: 0 $toolbar-spacing; + overflow: hidden; + position: relative; + + & > * { + z-index: 1; + } + + &.x-docked-top { + border-bottom: .1em solid; + } + + &.x-docked-bottom { + border-top: .1em solid; + } + } + + .x-toolbar-title { + @include stretch; + z-index: 0; + line-height: $global-row-height - .5em; + font-size: 1.2em; + text-align: center; + font-weight: bold; + } + + @if $include-toolbar-uis { + @include sencha-toolbar-ui('dark', darken($base-color, 10%)); + @include sencha-toolbar-ui('light', $base-color); + } +} + +/** + * Creates a theme UI for toolbars. + * + * @param {string} $ui-label The name of the UI being created. + * Can not included spaces or special punctuation (used in class names) + * @param {color} $color Base color for the UI. + * @param {string} $gradient: $toolbar-gradien Background gradient style for the UI. + * + * @example + * // SCSS + * @include sencha-toolbar-ui('sub', #58710D, 'glossy'); + * + * // JS + * var myTb = new Ext.Toolbar({title: 'My Green Glossy Toolbar', ui: 'sub'}) + * + * @member Ext.Toolbar + * @xtype toolbar + */ +@mixin sencha-toolbar-ui($ui-label, $color, $gradient: $toolbar-gradient) { + + $toolbar-border-color: darken($color, 50%); + $toolbar-button-color: darken($color, 10%); + + .x-toolbar-#{$ui-label} { + @include background-gradient($color, $gradient); + border-color: $toolbar-border-color; + + .x-toolbar-title { + @include color-by-background($color); + @include bevel-by-background($color); + } + + .x-button, .x-field-select .x-input-text, .x-field-select:before { + @include toolbar-button($toolbar-button-color, $gradient); + } + } +} \ No newline at end of file diff --git a/sencha/resources/themes/templates/project/sencha-touch.scss b/sencha/resources/themes/templates/project/sencha-touch.scss new file mode 100644 index 0000000..f8b7c95 --- /dev/null +++ b/sencha/resources/themes/templates/project/sencha-touch.scss @@ -0,0 +1,17 @@ +@import 'sencha-touch/default/all'; + +// You may remove any of the following modules that you +// do not use in order to create a smaller css file. +@include sencha-panel; +@include sencha-buttons; +@include sencha-sheet; +@include sencha-picker; +@include sencha-tabs; +@include sencha-toolbar; +@include sencha-toolbar-forms; +@include sencha-indexbar; +@include sencha-list; +@include sencha-layout; +@include sencha-carousel; +@include sencha-form; +@include sencha-msgbox; \ No newline at end of file