| @@ -0,0 +1,18 @@ | ||
| module SenchaTouch | ||
| module SassExtensions | ||
| module Functions | ||
| module ThemeImages | ||
| def theme_image(theme, path, mime_type = nil) | ||
| path = path.value | ||
| images_path = File.join(File.dirname(__FILE__), "..", "images", theme.value) | ||
| real_path = File.join(images_path, path) | ||
| inline_image_string(data(real_path), compute_mime_type(path, mime_type)) | ||
| end | ||
| end | ||
| end | ||
| end | ||
| end | ||
|
|
||
| module Sass::Script::Functions | ||
| include SenchaTouch::SassExtensions::Functions::ThemeImages | ||
| end |
| @@ -0,0 +1,2 @@ | ||
| @import 'core'; | ||
| @import 'widgets'; |
| @@ -0,0 +1,3 @@ | ||
| @import 'core/reset'; | ||
| @import 'core/core'; | ||
| @import 'core/layout'; |
| @@ -0,0 +1,2 @@ | ||
| @import 'variables'; | ||
| @import 'mixins'; |
| @@ -0,0 +1,196 @@ | ||
| @import 'compass/css3'; | ||
|
|
||
| /** | ||
| * @class Global_CSS | ||
| */ | ||
|
|
||
| /** | ||
| * 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 .x-button-icon.#{$name}, | ||
| .x-button .x-button-icon.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: 1px 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); | ||
| } | ||
|
|
||
| .x-button-icon.x-icon-mask { | ||
| @include mask-by-background($bg-color); | ||
| } | ||
|
|
||
| &.x-button-pressing, &.x-button-pressed, &.x-button-active { | ||
| &, &:after { | ||
| @include background-gradient(darken($bg-color, 3%), 'recessed'); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * 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) } | ||
| } | ||
|
|
||
| /** | ||
| * Makes the element text overflow to use ellipsis. | ||
| */ | ||
| @mixin ellipsis { | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } |
| @@ -0,0 +1,116 @@ | ||
| $theme-name: 'default'; | ||
|
|
||
| /** | ||
| * @class Global_CSS | ||
| * | ||
| * Global CSS variables and mixins of Sencha Touch. | ||
| */ | ||
|
|
||
| /** | ||
| * @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 the default UIs for all components. | ||
| */ | ||
| $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: #1985D0 !default; // Triton Blue | ||
|
|
||
| /** | ||
| * @var {string} $base-gradient | ||
| * The primary gradient variable from which most elements derive their color scheme. | ||
| * @see background-gradient | ||
| */ | ||
| $base-gradient: 'matte' !default; | ||
|
|
||
| /** | ||
| * @var {font-family} $font-family | ||
| * The font-family to be used throughout the theme. | ||
| * @see background-gradient | ||
| */ | ||
| $font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif !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} $neutral-color | ||
| * Color used for the neautral `ui` for Toolbars and Tabbars. | ||
| */ | ||
| $neutral-color: #e0e0e0; | ||
|
|
||
| /** | ||
| * @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; |
| @@ -0,0 +1,16 @@ | ||
| @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'; | ||
| @import 'widgets/img'; | ||
| @import 'widgets/media'; |
| @@ -0,0 +1,189 @@ | ||
| @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: $font-family; | ||
| font-weight: normal; | ||
| position: relative; | ||
| -webkit-text-size-adjust: none; | ||
| } | ||
|
|
||
| body.x-desktop { | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| *, *:after, *:before { | ||
| @include box-sizing(border-box); | ||
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | ||
| -webkit-user-select: none; | ||
| -webkit-touch-callout: none; | ||
| -webkit-user-drag: none; | ||
| } | ||
|
|
||
| .x-ios.x-tablet .x-landscape * { | ||
| -webkit-text-stroke: 1px transparent; | ||
| } | ||
|
|
||
| body { | ||
| font-size: 104%; | ||
| } | ||
|
|
||
| body.x-ios { | ||
| -webkit-backface-visibility: hidden; | ||
| } | ||
|
|
||
| body.x-android.x-phone { | ||
| font-size: 116%; | ||
| } | ||
|
|
||
| body.x-android.x-phone.x-silk { | ||
| font-size: 130%; | ||
| } | ||
|
|
||
| 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; | ||
| // removing this so floating items dont always stick to the top. i've seen no downside to this. ^robert | ||
| // top: 0px; | ||
| // left: 0px; | ||
| } | ||
|
|
||
| .x-desktop .x-body-stretcher { | ||
| margin-bottom: 0px; | ||
| } | ||
|
|
||
| .x-mask { | ||
| $min-width: 8.5em; | ||
|
|
||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| bottom: 0; | ||
| right: 0; | ||
| height: 100%; | ||
| z-index: 10; | ||
|
|
||
| @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-transparent { | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| .x-mask-inner { | ||
| background: rgba(0, 0, 0, .25); | ||
| color: #fff; | ||
| text-align: center; | ||
| padding: .4em; | ||
| font-size: .95em; | ||
| font-weight: bold; | ||
| @if $include-border-radius { @include border-radius(.5em); } | ||
| } | ||
|
|
||
| .x-loading-spinner-outer { | ||
| @include display-box; | ||
| @include box-orient(vertical); | ||
| @include box-align(center); | ||
| @include box-pack(center); | ||
| width: 100%; | ||
| min-width: $min-width; | ||
| height: $min-width; | ||
| } | ||
|
|
||
| &.x-indicator-hidden { | ||
| .x-loading-spinner-outer { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .x-mask-message { | ||
| @include bevel-text; | ||
| -webkit-box-flex: 0 !important; | ||
| max-width: 13em; | ||
| min-width: $min-width; | ||
| } | ||
| } | ||
|
|
||
| .x-draggable { | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .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-layout-card-item { | ||
| background: $page-bg-color; | ||
| } |
| @@ -0,0 +1,362 @@ | ||
| @mixin sencha-layout { | ||
| html, body { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .x-translatable { | ||
| position: absolute; | ||
| top: 100%; | ||
| left: 100%; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .x-translatable-container { | ||
| position: relative; | ||
| } | ||
|
|
||
| .x-translatable-wrapper { | ||
| width: 100%; | ||
| height: 100%; | ||
| position: absolute; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .x-translatable-stretcher { | ||
| width: 300%; | ||
| height: 300%; | ||
| position: absolute; | ||
| visibility: hidden; | ||
| z-index: -1; | ||
| } | ||
|
|
||
| .x-translatable-nested-stretcher { | ||
| width: 100%; | ||
| height: 100%; | ||
| left: 100%; | ||
| top: 100%; | ||
| position: absolute; | ||
| visibility: hidden; | ||
| z-index: -1; | ||
| } | ||
|
|
||
| .x-layout-fit, | ||
| .x-layout-card { | ||
| position: relative; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .x-layout-fit-item, .x-layout-card-item { | ||
| position: absolute !important; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .x-layout-hbox, .x-layout-vbox { | ||
| display: -webkit-box; | ||
| > * { | ||
| -webkit-box-flex: 0; | ||
| } | ||
| } | ||
|
|
||
| .x-layout-hbox { | ||
| -webkit-box-orient: horizontal; | ||
| } | ||
|
|
||
| .x-layout-vbox { | ||
| -webkit-box-orient: vertical; | ||
| } | ||
|
|
||
| .x-layout-hbox > .x-layout-box-item { | ||
| width: 0 !important; | ||
| } | ||
|
|
||
| .x-layout-vbox > .x-layout-box-item { | ||
| height: 0 !important; | ||
| } | ||
|
|
||
| .x-table-inner { | ||
| display: table !important; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .x-table-inner.x-table-fixed { | ||
| table-layout: fixed !important; | ||
| } | ||
|
|
||
| .x-table-row { | ||
| display: table-row !important; | ||
| } | ||
|
|
||
| .x-table-row > * { | ||
| display: table-cell !important; | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| .x-container, .x-body { | ||
| display: -webkit-box; | ||
| } | ||
|
|
||
| .x-body { | ||
| overflow: hidden; | ||
| -webkit-box-flex: 1; | ||
| min-width: 100%; | ||
| min-height: 100%; | ||
| } | ||
|
|
||
| .x-body > .x-inner, .x-container > .x-inner { | ||
| -webkit-box-flex: 1; | ||
| min-width: 100%; | ||
| min-height: 100%; | ||
| position: relative; | ||
| } | ||
|
|
||
| .x-docking-horizontal { | ||
| display: -webkit-box; | ||
| -webkit-box-flex: 1; | ||
| -webkit-box-orient: horizontal; | ||
| min-width: 100%; | ||
| min-height: 100%; | ||
| } | ||
|
|
||
| .x-docking-vertical { | ||
| display: -webkit-box; | ||
| -webkit-box-flex: 1; | ||
| -webkit-box-orient: vertical; | ||
| min-width: 100%; | ||
| min-height: 100%; | ||
| } | ||
|
|
||
| .x-centered { | ||
| position: absolute !important; | ||
| width: 100%; | ||
| height: 100%; | ||
| display: -webkit-box; | ||
| -webkit-box-align: center; | ||
| -webkit-box-pack: center; | ||
| } | ||
|
|
||
| .x-floating { | ||
| position: absolute !important; | ||
| } | ||
|
|
||
| .x-centered > * { | ||
| position: relative !important; | ||
| -webkit-box-flex: 0 !important; | ||
| } | ||
|
|
||
| .x-size-change-detector { | ||
| visibility: hidden; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| z-index: -1; | ||
| width: 100%; | ||
| height: 100%; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .x-size-change-detector > * { | ||
| visibility: hidden; | ||
| } | ||
|
|
||
| .x-size-change-detector-shrink > * { | ||
| width: 200%; | ||
| height: 200%; | ||
| } | ||
|
|
||
| .x-size-change-detector-expand > * { | ||
| width: 100000px; | ||
| height: 100000px; | ||
| } | ||
|
|
||
| .x-scroll-view { | ||
| position: relative; | ||
| display: block; | ||
| } | ||
|
|
||
| .x-scroll-container { | ||
| position: absolute; | ||
| overflow: hidden; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .x-scroll-scroller { | ||
| position: absolute; | ||
| min-width: 100%; | ||
| min-height: 100%; | ||
| } | ||
|
|
||
| .x-ios .x-scroll-scroller { | ||
| -webkit-transform: translate3d(0, 0, 0); | ||
| } | ||
|
|
||
| .x-scroll-stretcher { | ||
| position: absolute; | ||
| visibility: hidden; | ||
| } | ||
|
|
||
| .x-scroll-bar-grid-wrapper { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .x-scroll-bar-grid { | ||
| display: table; | ||
| width: 100%; | ||
| height: 100%; | ||
|
|
||
| > * { | ||
| display: table-row; | ||
| } | ||
|
|
||
| > * > * { | ||
| display: table-cell; | ||
| } | ||
|
|
||
| > :first-child > :first-child { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| > :first-child > :nth-child(2) { | ||
| padding: 3px 3px 0 0; | ||
| } | ||
|
|
||
| > :nth-child(2) > :first-child { | ||
| padding: 0 0 3px 3px; | ||
| } | ||
| } | ||
|
|
||
| .x-scroll-bar { | ||
| position: relative; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .x-scroll-bar-stretcher { | ||
| position: absolute; | ||
| visibility: hidden; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .x-scroll-bar-x { | ||
| width: 100%; | ||
|
|
||
| > .x-scroll-bar-stretcher { | ||
| width: 300%; | ||
| } | ||
|
|
||
| &.active { | ||
| height: 6px; | ||
| } | ||
| } | ||
|
|
||
| .x-scroll-bar-y { | ||
| height: 100%; | ||
|
|
||
| > .x-scroll-bar-stretcher { | ||
| height: 300%; | ||
| } | ||
|
|
||
| &.active { | ||
| width: 6px; | ||
| } | ||
| } | ||
|
|
||
| .x-scroll-indicator { | ||
| background: #333; | ||
| position: absolute; | ||
| z-index: 2; | ||
| opacity: 0.5; | ||
| } | ||
|
|
||
| .x-scroll-indicator.default { | ||
| @include border-top-radius(3px); | ||
| @include border-bottom-radius(3px); | ||
| } | ||
|
|
||
| .x-list-light, | ||
| .x-dataview-light { | ||
| .x-scroll-indicator { | ||
| background: #fff; | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| .x-scroll-indicator-x { | ||
| height: 100%; | ||
| } | ||
|
|
||
| .x-scroll-indicator-y { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .x-scroll-indicator.csstransform { | ||
| background: none; | ||
| /*-webkit-transition: opacity 0.2s ease-out;*/ | ||
|
|
||
| > * { | ||
| position: absolute; | ||
| background-color: #333; | ||
| } | ||
|
|
||
| > :nth-child(2) { | ||
| -webkit-transform-origin: 0% 0%; | ||
| background: none; | ||
| content: url(data:image/bmp;base64,Qk08AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABAAAAAAAAYAAAASCwAAEgsAAAAAAAAAAAAAxhgAAAAA); | ||
| } | ||
|
|
||
| &.x-scroll-indicator-light { | ||
| > * { | ||
| background-color: #eee; | ||
| } | ||
|
|
||
| > :nth-child(2) { | ||
| content: url(data:image/bmp;base64,Qk08AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABAAAAAAAAYAAAASCwAAEgsAAAAAAAAAAAAAvXcAAAAA); | ||
| } | ||
| } | ||
|
|
||
| &.x-scroll-indicator-y { | ||
| > * { | ||
| width: 100%; | ||
| } | ||
|
|
||
| > :first-child { | ||
| height: 3px; | ||
| @include border-top-radius(3px); | ||
| } | ||
|
|
||
| > :nth-child(2) { | ||
| height: 1px; | ||
| } | ||
|
|
||
| > :last-child { | ||
| height: 3px; | ||
| @include border-bottom-radius(3px); | ||
| } | ||
| } | ||
|
|
||
| &.x-scroll-indicator-x { | ||
| > * { | ||
| height: 100%; | ||
| } | ||
|
|
||
| > :first-child { | ||
| width: 3px; | ||
| @include border-left-radius(3px); | ||
| } | ||
|
|
||
| > :nth-child(2) { | ||
| width: 1px; | ||
| } | ||
| > :last-child { | ||
| width: 3px; | ||
| @include border-right-radius(3px); | ||
| } | ||
| } | ||
| } | ||
| } |
| @@ -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; | ||
| } |
| @@ -0,0 +1,354 @@ | ||
| // Toolbar icons used with permission from Drew Wilson | ||
| // http://pictos.drewwilson.com/ | ||
| // Pictos icons are (c) 2010 Drew Wilson | ||
|
|
||
| @import '../global'; | ||
|
|
||
| /** | ||
| * @class Ext.Button | ||
| */ | ||
|
|
||
| /** | ||
| * @var {measurement} $button-height Default height for buttons. | ||
| */ | ||
| $button-height: 1.8em; | ||
|
|
||
| /** | ||
| * @var {measurement} $button-radius Default border-radius for buttons. | ||
| */ | ||
| $button-radius: .4em !default; | ||
|
|
||
| /** | ||
| * @var {measurement} $button-stroke-weight Default border width for buttons. | ||
| */ | ||
| $button-stroke-weight: .1em !default; | ||
|
|
||
| /** | ||
| * @var {string} $button-gradient Default gradient for buttons. | ||
| * | ||
| * See {@link Global_CSS#background-gradient background-gradient}. | ||
| */ | ||
| $button-gradient: $base-gradient !default; | ||
|
|
||
| /** | ||
| * @var {string} $toolbar-icon-size Default size (width and height) for toolbar icons. | ||
| */ | ||
| $toolbar-icon-size: 1.4em !default; | ||
|
|
||
| /** | ||
| * @var {boolean} $include-button-uis Optionally disable separate button UIs, including action, confirm, and decline. | ||
| */ | ||
| $include-button-uis: $include-default-uis !default; | ||
|
|
||
| /** | ||
| * @var {boolean} $include-button-highlights Optionally disable special CSS3 effects on buttons including gradients, text-shadows, and box-shadows. | ||
| */ | ||
| $include-button-highlights: $include-highlights !default; | ||
|
|
||
|
|
||
| /** | ||
| * Includes default button styles. | ||
| * | ||
| * See {@link Global_CSS#background-gradient 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; // Why was this !important? Breaks small uis - DK | ||
| padding: .3em .6em; | ||
| position: relative; | ||
| overflow: hidden; | ||
| -webkit-user-select: none; | ||
|
|
||
| // Default icon style | ||
| .x-button-icon { | ||
| 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 .x-button-icon { | ||
| opacity: .5; | ||
| } | ||
| } | ||
|
|
||
| .x-button-round { | ||
| @if $include-border-radius { @include border-radius($button-height/2); } | ||
| padding: .1em $button-height/2; | ||
| } | ||
|
|
||
| // Button icon alignment | ||
| .x-iconalign-left, .x-icon-align-right { | ||
| @include box-orient(horizontal); | ||
| } | ||
| .x-iconalign-top, .x-iconalign-bottom { | ||
| @include box-orient(vertical); | ||
| } | ||
| .x-iconalign-bottom, .x-iconalign-right { | ||
| @include box-direction(reverse); | ||
| } | ||
| .x-iconalign-center { | ||
| @include box-pack(center); | ||
| } | ||
| .x-iconalign-left .x-button-label { | ||
| margin-left: $toolbar-spacing * 1.5; | ||
| } | ||
| .x-iconalign-right .x-button-label { | ||
| margin-right: $toolbar-spacing * 1.5; | ||
| } | ||
| .x-iconalign-top .x-button-label { | ||
| margin-top: $toolbar-spacing * 1.5; | ||
| } | ||
| .x-iconalign-bottom .x-button-label { | ||
| margin-bottom: $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; | ||
| } | ||
| } | ||
|
|
||
| .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; | ||
| } | ||
|
|
||
| .x-button-icon { | ||
| width: .75em; | ||
| height: .75em; | ||
| } | ||
| } | ||
|
|
||
| // 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; | ||
| @if $include-border-radius { @include border-radius(none); } | ||
| min-height: 0; | ||
| text-shadow: none; | ||
| line-height: auto; | ||
| height: auto; | ||
| padding: 0.5em; | ||
|
|
||
| & > * { | ||
| overflow: visible; | ||
| } | ||
|
|
||
| .x-button-icon { | ||
| -webkit-mask-size: $toolbar-icon-size; | ||
| width: $toolbar-icon-size; | ||
| height: $toolbar-icon-size; | ||
| } | ||
|
|
||
| &.x-button-pressing, &.x-button-pressed { | ||
| background: 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)); | ||
| .x-button-icon.x-button-mask { | ||
| @include background-gradient(#fff, 'recessed'); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // SegmentedButtons | ||
| .x-segmentedbutton .x-button { | ||
| margin: 0; | ||
|
|
||
| @if $include-border-radius { | ||
| @include border-radius(0); | ||
|
|
||
| &.x-first { | ||
| @include border-left-radius($button-radius); | ||
| } | ||
| &.x-last { | ||
| @include border-right-radius($button-radius); | ||
| } | ||
| } | ||
|
|
||
| &:not(:first-child) { | ||
| border-left: 0; | ||
| } | ||
| } | ||
|
|
||
| // Badges | ||
| $badge-size: 2em !default; | ||
| $badge-radius: .2em !default; | ||
| $badge-bg-color: darken($alert-color, 10%) !default; | ||
| $badge-bg-gradient: $base-gradient !default; | ||
|
|
||
| .x-hasbadge { | ||
| overflow: visible; | ||
| .x-badge { | ||
| @extend .x-button-label; | ||
| @include background-clip(padding-box); | ||
| @if $include-border-radius { @include border-radius($badge-radius); } | ||
| padding: .1em .3em; | ||
| z-index: 2; | ||
| @if $include-button-highlights { | ||
| @include bevel-by-background($badge-bg-color); | ||
| @include box-shadow(rgba(#000, .5) 0 .1em .1em); | ||
| } | ||
| overflow: hidden; | ||
| @include color-by-background($badge-bg-color, $contrast: 50%); | ||
| border: 1px solid darken($badge-bg-color, 10%); | ||
| position: absolute; | ||
| width: auto; | ||
| min-width: $badge-size; | ||
| line-height: 1.2em; | ||
| font-size: .6em; | ||
| right: 0px; | ||
| top: -.2em; | ||
| max-width: 95%; | ||
| @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. | ||
| */ | ||
| @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; | ||
| } | ||
| } |
| @@ -0,0 +1,113 @@ | ||
| @import '../global'; | ||
|
|
||
| /** | ||
| * @class Ext.carousel.Indicator | ||
| */ | ||
|
|
||
| /** | ||
| * @var {measurement} $carousel-indicator-size Size (width/height) of carousel indicator dots. | ||
| */ | ||
| $carousel-indicator-size: .5em !default; | ||
|
|
||
| /** | ||
| * @var {measurement} $carousel-indicator-spacing | ||
| * Amount of space between carousel indicator dots. | ||
| */ | ||
| $carousel-indicator-spacing: .2em !default; | ||
|
|
||
| /** | ||
| * @var {measurement} $carousel-track-size Size of the track the carousel indicator dots are in. | ||
| */ | ||
| $carousel-track-size: 1.5em !default; | ||
|
|
||
| /** | ||
| * 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. | ||
| */ | ||
| @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) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * @class Ext.carousel.Carousel | ||
| */ | ||
|
|
||
| /** | ||
| * Includes basic carousel formatting. | ||
| */ | ||
| @mixin sencha-carousel { | ||
| .x-carousel { | ||
| position: relative; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .x-carousel-item { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
|
|
||
| > * { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } | ||
|
|
||
| .x-carousel-indicator { | ||
| // @TODO: we should not have to cancel out the x-floating styling | ||
| padding: 0; | ||
| -webkit-border-radius: 0; | ||
| border-radius: 0; | ||
| -webkit-box-shadow: none; | ||
| background-color: transparent; | ||
| background-image: none; | ||
| } | ||
|
|
||
| .x-carousel-indicator { | ||
| -webkit-box-flex: 1; | ||
|
|
||
| @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; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .x-carousel-indicator-vertical { | ||
| @include box-orient(vertical); | ||
| width: $carousel-track-size; | ||
| height: 100%; | ||
| } | ||
|
|
||
| $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'); | ||
| } | ||
|
|
| @@ -0,0 +1,102 @@ | ||
| @import '../global'; | ||
|
|
||
| /* | ||
| * Includes basic form slider styles. | ||
| */ | ||
| @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); | ||
| } | ||
| } |
| @@ -0,0 +1,149 @@ | ||
| @import '../global'; | ||
|
|
||
| /** | ||
| * Includes default form slider styles. | ||
| * | ||
| * @member Ext.field.Slider | ||
| */ | ||
| @mixin sencha-form-sliders { | ||
|
|
||
| .x-slider-field, .x-toggle-field { | ||
| .x-component-outer { | ||
| padding: $form-spacing; | ||
| } | ||
| } | ||
|
|
||
| .x-slider, | ||
| .x-toggle { | ||
| position: relative; | ||
| height: $form-thumb-size; | ||
| min-height: 0; | ||
| min-width: 0; | ||
|
|
||
| > * { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } | ||
|
|
||
| .x-slider.x-item-disabled { | ||
| opacity: .6; | ||
| } | ||
|
|
||
| @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-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: 1px solid darken($form-light, 30%); | ||
| @if $include-border-radius { @include border-radius($form-toggle-size/2); } | ||
| // overflow: visible; | ||
| @include background-gradient($form-light); | ||
| @include background-clip(padding-box); | ||
| } | ||
|
|
||
| &.x-dragging { | ||
| &:before { | ||
| @include background-gradient(darken($form-light, 5%)); | ||
| } | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| // Create the slider track | ||
| .x-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-toggle { | ||
| width: $form-thumb-size * 2; | ||
| @if $include-border-radius { @include border-radius($form-thumb-size/2); } | ||
| overflow: hidden; | ||
| border: 1px solid darken($form-light, 15%); | ||
| @include background-gradient($form-light, 'recessed'); | ||
| -webkit-box-flex: 0; | ||
|
|
||
| // 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-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'); | ||
| } | ||
| } |
| @@ -0,0 +1,5 @@ | ||
| @import '../global'; | ||
|
|
||
| .x-img { | ||
| background-repeat: no-repeat; | ||
| } |
| @@ -0,0 +1,76 @@ | ||
| @import '../global'; | ||
|
|
||
| /** | ||
| * @class Ext.dataview.IndexBar | ||
| */ | ||
|
|
||
| /** | ||
| * @var {measurement} $index-bar-width | ||
| * Width of the index bar. | ||
| */ | ||
| $index-bar-width: 1.1em !default; | ||
|
|
||
| /** | ||
| * @var {color} $index-bar-bg-color | ||
| * Background-color of the index bar. | ||
| */ | ||
| $index-bar-bg-color: hsla(hue($base-color), 10%, 60%, .8) !default; | ||
|
|
||
| /** | ||
| * @var {color} $index-bar-color | ||
| * Text color of the index bar. | ||
| */ | ||
| $index-bar-color: darken(desaturate($base-color, 5%), 15%) !default; | ||
|
|
||
| /** | ||
| * Includes default index bar styles. | ||
| */ | ||
| @mixin sencha-indexbar { | ||
| .x-indexbar-wrapper { | ||
| -webkit-box-pack: end !important; | ||
| box-pack: end !important; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .x-indexbar-vertical { | ||
| width: $index-bar-width; | ||
| @include box-orient(vertical); | ||
| margin-right: 8px; | ||
| } | ||
|
|
||
| .x-indexbar-horizontal { | ||
| height: $index-bar-width; | ||
| @include box-orient(horizontal); | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| .x-indexbar { | ||
| pointer-events: auto; | ||
| z-index: 2; | ||
| padding: .3em 0; | ||
| min-height: 0 !important; | ||
| height: auto !important; | ||
| -webkit-box-flex: 0 !important; | ||
|
|
||
| > div { | ||
| color: $index-bar-color; | ||
| font-size: 0.6em; | ||
| text-align: center; | ||
| line-height: 1.1em; | ||
| font-weight: bold; | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| .x-phone.x-landscape .x-indexbar { | ||
| > div { | ||
| font-size: 0.38em; | ||
| line-height: 1em; | ||
| } | ||
| } | ||
|
|
||
| .x-indexbar-pressed { | ||
| @include border-radius(($index-bar-width)/2); | ||
| background-color: $index-bar-bg-color; | ||
| } | ||
| } |
| @@ -0,0 +1,121 @@ | ||
| /** | ||
| * @class Ext.LoadMask | ||
| */ | ||
|
|
||
| /** | ||
| * @var {color} $loading-spinner-color | ||
| * Background-color for the bars in the loading spinner. | ||
| */ | ||
| $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). | ||
| */ | ||
| @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); } | ||
| } | ||
| } |
| @@ -0,0 +1,11 @@ | ||
| .x-map { | ||
| background-color: #edeae2; //GMap tan background | ||
| * { | ||
| -webkit-box-sizing: content-box; | ||
| box-sizing: content-box; | ||
| } | ||
| } | ||
|
|
||
| .x-mask-map { | ||
| background: transparent !important; | ||
| } |
| @@ -0,0 +1,21 @@ | ||
| @import '../global'; | ||
|
|
||
| .x-video { | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .x-video > * { | ||
| height: 100%; | ||
| width: 100%; | ||
| position: absolute; | ||
| } | ||
|
|
||
| .x-video-ghost { | ||
| -webkit-background-size: 100% auto; | ||
| background: #000 url() center center no-repeat; | ||
| } | ||
|
|
||
| audio { | ||
| width: 100%; | ||
| } |
| @@ -0,0 +1,94 @@ | ||
| /** | ||
| * Includes default message box styles. | ||
| * | ||
| * @member Ext.MessageBox | ||
| */ | ||
| @mixin sencha-msgbox { | ||
| .x-msgbox { | ||
| min-width: 15em; | ||
| max-width: 20em; | ||
| padding: 0.8em; | ||
| margin: .5em; | ||
| -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-icon { | ||
| margin-left: 1.3em; | ||
| } | ||
|
|
||
| .x-title { | ||
| font-size: .9em; | ||
| line-height: 1.4em; | ||
| } | ||
|
|
||
| .x-body { | ||
| background:transparent !important; | ||
| } | ||
|
|
||
| .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-field { | ||
| min-height:2em; | ||
| background: #fff; | ||
| @if $include-border-radius { @include border-radius(.2em); } | ||
| } | ||
|
|
||
| .x-form-field { | ||
| min-height:1.5em; | ||
| padding-right: 0 !important; | ||
| -webkit-appearance: none; | ||
| } | ||
|
|
||
| .x-field-input { | ||
| padding-right: 2.2em; | ||
| } | ||
| } | ||
|
|
||
| .x-msgbox-text { | ||
| text-align: center; | ||
| padding: 6px 0; | ||
| line-height: 1.4em; | ||
| } | ||
|
|
||
| .x-msgbox-buttons { | ||
| padding: 0.4em 0; | ||
| height: auto; | ||
|
|
||
| .x-button { | ||
| min-width: 4.5em; | ||
| } | ||
|
|
||
| .x-button-normal span { | ||
| opacity: .7; | ||
| } | ||
| } | ||
|
|
||
| // 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%); | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,79 @@ | ||
| @import '../global'; | ||
|
|
||
| $panel-border-radius: .3em; | ||
|
|
||
| @mixin sencha-panel($include-floating: $include-floating-panels) { | ||
| .x-panel, | ||
| .x-msgbox, | ||
| .x-panel-body { | ||
| position: relative; | ||
| } | ||
|
|
||
| @if $include-floating { | ||
| .x-panel.x-floating, | ||
| .x-msgbox.x-floating, | ||
| .x-form.x-floating { | ||
| 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-floating-light { | ||
| @include background-gradient($base-color, 'flat'); | ||
| } | ||
|
|
||
| > .x-panel-inner, | ||
| .x-scroll-view, | ||
| .x-body { | ||
| background-color: #fff; | ||
| @if $include-border-radius { @include border_radius($panel-border-radius); } | ||
| } | ||
| } | ||
|
|
||
| $anchor-height: .7em; | ||
| $anchor-width: $anchor-height*2.33; | ||
| $anchor-offset: 0.1em; | ||
|
|
||
| .x-anchor { | ||
| width: $anchor-width; | ||
| height: $anchor-height; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| 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%); | ||
| -webkit-transform-origin: 0% 0%; | ||
|
|
||
| &.x-anchor-top { | ||
| margin-left: -($anchor-width / 2); | ||
| margin-top: -$anchor-height; | ||
| } | ||
|
|
||
| &.x-anchor-bottom { | ||
| -webkit-transform: rotate(180deg); | ||
| margin-left: $anchor-width / 2; | ||
| margin-top: $anchor-height - $anchor-offset; | ||
| } | ||
|
|
||
| &.x-anchor-left { | ||
| -webkit-transform: rotate(270deg); | ||
| margin-left: -$anchor-height; | ||
| margin-top: -$anchor-offset; | ||
| } | ||
|
|
||
| &.x-anchor-right { | ||
| -webkit-transform: rotate(90deg); | ||
| margin-left: $anchor-height; | ||
| margin-top: 0; | ||
| } | ||
| } | ||
| .x-floating.x-panel-light { | ||
| &:after { | ||
| background-color: $base-color; | ||
| } | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,154 @@ | ||
| @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-inner { | ||
| 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 { | ||
| .x-body { | ||
| border-left: 1px solid #999999; | ||
| border-right: 1px solid #ACACAC; | ||
| } | ||
|
|
||
| &.x-first { | ||
| .x-body { | ||
| border-left: 0; | ||
| } | ||
| } | ||
|
|
||
| &.x-last { | ||
| .x-body { | ||
| border-left: 0; | ||
| border-right: 0; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .x-picker-slot .x-scroll-view { | ||
| 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-use-titles { | ||
| .x-picker-bar { | ||
| margin-top: 1.5em; | ||
| } | ||
| } | ||
|
|
||
| .x-picker-slot-title { | ||
| height: 1.5em; | ||
| position:relative; | ||
| z-index: 2; | ||
| @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%); | ||
| -webkit-box-shadow: 0px .1em .3em rgba(0, 0, 0, 0.3); | ||
| padding: 0.2em 1.02em; | ||
|
|
||
| > div { | ||
| font-weight: bold; | ||
| font-size: 0.8em; | ||
| color: $picker-title-color; | ||
| @if $include-picker-highlights { | ||
| @include bevel-text('light'); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .x-picker-slot { | ||
| .x-dataview-inner { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .x-dataview-item { | ||
| vertical-align: middle; | ||
| height: $picker-row-height; | ||
| line-height: $picker-row-height; | ||
| font-weight: bold; | ||
| padding: 0 10px; | ||
| } | ||
|
|
||
| .x-picker-item { | ||
| @include ellipsis; | ||
| } | ||
| } | ||
|
|
||
| .x-picker-right { | ||
| text-align: right; | ||
| } | ||
| .x-picker-center { | ||
| text-align: center; | ||
| } | ||
| .x-picker-left { | ||
| text-align: left; | ||
| } | ||
| } |
| @@ -0,0 +1,52 @@ | ||
| @import '../global'; | ||
|
|
||
| /** | ||
| * @class Ext.Sheet | ||
| */ | ||
|
|
||
| /** | ||
| * @var {color} $sheet-bg-color | ||
| * Background-color for action sheets and message boxes. | ||
| */ | ||
| $sheet-bg-color: transparentize(darken($base-color, 40%), .1) !default; | ||
|
|
||
| /** | ||
| * @var {color} $sheet-bg-gradient | ||
| * Background gradient style for action sheets and message boxes. | ||
| */ | ||
| $sheet-bg-gradient: $base-gradient !default; | ||
|
|
||
| /** | ||
| * @var {measurement} $sheet-button-spacing | ||
| * Vertical spacing between sheet buttons. | ||
| */ | ||
| $sheet-button-spacing: .5em !default; | ||
|
|
||
| /** | ||
| * @var {measurement} $sheet-padding | ||
| * Overall padding in a sheet. | ||
| */ | ||
| $sheet-padding: .7em !default; | ||
|
|
||
| /** | ||
| * Includes default sheet styles (also required for message box). | ||
| */ | ||
| @mixin sencha-sheet { | ||
| .x-sheet, .x-sheet-action { | ||
| padding: $sheet-padding; | ||
| border-top: 1px solid darken($base-color, 30%); | ||
| height: auto; | ||
| @include background-gradient($sheet-bg-color, $sheet-bg-gradient); | ||
| @include border-radius(0); | ||
| } | ||
|
|
||
| .x-sheet-inner, .x-sheet-action-inner { | ||
| > .x-button { | ||
| margin-bottom: $sheet-button-spacing; | ||
|
|
||
| &:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,269 @@ | ||
| // Tab icons used with permission from Drew Wilson | ||
| // http://pictos.drewwilson.com/ | ||
| // Pictos icons are (c) 2010 Drew Wilson | ||
|
|
||
| @import '../global'; | ||
|
|
||
| /** | ||
| * @class Ext.tab.Bar | ||
| */ | ||
|
|
||
| /** | ||
| * @var {boolean} $include-tabbar-uis Optionally disable separate tabbar UIs (light and dark). | ||
| */ | ||
| $include-tabbar-uis: $include-default-uis !default; | ||
|
|
||
| /** | ||
| * @var {boolean} $include-top-tabs | ||
| * Optionally exclude top tab styles by setting to false. | ||
| */ | ||
| $include-top-tabs: true !default; | ||
|
|
||
| /** | ||
| * @var {boolean} $include-bottom-tabs | ||
| * Optionally exclude bottom tab styles by setting to false. | ||
| */ | ||
| $include-bottom-tabs: true !default; | ||
|
|
||
| /** | ||
| * @var {color} $tabs-light | ||
| * Base color for "light" UI tabs. | ||
| */ | ||
| $tabs-light: desaturate($base-color, 10%) !default; | ||
|
|
||
| /** | ||
| * @var {color} $tabs-light-active | ||
| * Active color for "light" UI tabs. | ||
| */ | ||
| $tabs-light-active: lighten(saturate($active-color, 20%), 20%) !default; | ||
|
|
||
| /** | ||
| * @var {color} $tabs-dark | ||
| * Base color for "dark" UI tabs. | ||
| */ | ||
| $tabs-dark: darken($base-color, 20%) !default; | ||
|
|
||
| /** | ||
| * @var {color} $tabs-dark-active | ||
| * Active color for "dark" UI tabs. | ||
| */ | ||
| $tabs-dark-active-color: saturate(lighten($active-color, 30%), 70%) !default; | ||
|
|
||
| /** | ||
| * @var {string} $tabs-bar-gradient | ||
| * Background gradient style for tab bars. | ||
| */ | ||
| $tabs-bar-gradient: $base-gradient !default; | ||
|
|
||
| /** | ||
| * @class Ext.tab.Tab | ||
| */ | ||
|
|
||
| /** | ||
| * @var {string} $tabs-bottom-radius | ||
| * Border-radius for bottom tabs. | ||
| */ | ||
| $tabs-bottom-radius: .25em !default; | ||
|
|
||
| /** | ||
| * @var {string} $tabs-bottom-icon-size | ||
| * Icon size for bottom tabs | ||
| */ | ||
| $tabs-bottom-icon-size: 1.65em !default; | ||
|
|
||
| /** | ||
| * @var {string} $tabs-bottom-active-gradient | ||
| * Background gradient style for active bottom tabs. | ||
| */ | ||
| $tabs-bottom-active-gradient: $base-gradient !default; | ||
|
|
||
| /** | ||
| * @var {boolean} $include-tab-highlights | ||
| * Optionally disable all gradients, text-shadows, and box-shadows. Useful for CSS debugging, | ||
| * non-performant browsers, or minimalist designs. | ||
| */ | ||
| $include-tab-highlights: $include-highlights !default; | ||
|
|
||
| // Private | ||
|
|
||
| $tabs-top-height: $global-row-height - .8em; | ||
|
|
||
| /** | ||
| * Includes default tab styles. | ||
| * | ||
| * @member Ext.tab.Bar | ||
| */ | ||
| @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); | ||
| @include sencha-tabbar-ui('neutral', $neutral-color, $tabs-bar-gradient, darken($neutral-color, 40)); | ||
| } | ||
|
|
||
| // Rules for all tabs | ||
| .x-tab.x-item-disabled span.x-button-label, .x-tab.x-item-disabled .x-button-icon { | ||
| @include opacity(.5); | ||
| } | ||
| .x-tab.x-draggable { | ||
| @include opacity(.7); | ||
| } | ||
|
|
||
| .x-tab { | ||
| -webkit-user-select: none; | ||
| overflow: visible !important; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| @mixin sencha-top-tabs { | ||
| .x-tabbar.x-docked-top { | ||
| border-bottom-width: .1em; | ||
| border-bottom-style: solid; | ||
| height: $global-row-height; | ||
| padding: 0 .8em; | ||
|
|
||
| .x-tab { | ||
| padding: (($tabs-top-height - 1em) / 2) .8em; | ||
| height: $tabs-top-height; | ||
| @if $include-border-radius { @include border-radius($tabs-top-height / 2); } | ||
| } | ||
|
|
||
| .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-width: .1em; | ||
| border-top-style: solid; | ||
| height: 3em; | ||
| padding: 0; | ||
|
|
||
| .x-tab { | ||
| @if $include-border-radius { @include border-radius($tabs-bottom-radius); } | ||
| min-width: 3.3em; | ||
| position: relative; | ||
| padding-top: .2em; | ||
|
|
||
| .x-button-icon { | ||
| -webkit-mask-size: $tabs-bottom-icon-size; | ||
| width: $tabs-bottom-icon-size; | ||
| height: $tabs-bottom-icon-size; | ||
| display: block; | ||
| margin: 0 auto; | ||
| position: relative; | ||
| } | ||
|
|
||
| .x-button-label { | ||
| margin: 0; | ||
| padding: .1em 0 .2em 0; | ||
| font-size: 9px; | ||
| line-height: 12px; | ||
| text-rendering: optimizeLegibility; | ||
| -webkit-font-smoothing: antialiased; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @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. | ||
| * | ||
| * // SCSS | ||
| * @include sencha-button-ui('pink', #333, 'matte', #AE537A); | ||
| * | ||
| * // JS | ||
| * var tabs = new Ext.tab.Panel({ | ||
| * tabBar: { | ||
| * ui: 'pink', | ||
| * dock: 'bottom', | ||
| * layout: { pack: 'center' } | ||
| * }, | ||
| * ... | ||
| * }); | ||
| * | ||
| * @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. | ||
| * | ||
| * @member Ext.tab.Bar | ||
| */ | ||
| @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-top-color: darken($bar-color, 5%); | ||
| border-bottom-color: darken($bar-color, 15%); | ||
|
|
||
| .x-tab { | ||
| @include color-by-background($bar-color, 40%); | ||
| } | ||
|
|
||
| .x-tab-active { | ||
| @include color-by-background($bar-color, 90%); | ||
| border-bottom: 1px solid lighten($bar-color, 3%); | ||
| } | ||
|
|
||
| .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); | ||
| .x-button-icon { | ||
| @include mask-by-background($bar-color, 20%, $tabs-bar-gradient); | ||
| } | ||
| } | ||
|
|
||
| .x-tab-active { | ||
| @include background-gradient(darken($bar-color, 5%), recessed); | ||
| @include bevel-by-background(lighten($bar-color, 10%)); | ||
|
|
||
| @if ($include-tab-highlights) { | ||
| @include box-shadow(darken($bar-color, 10%) 0 0 .25em inset); | ||
| } | ||
|
|
||
| .x-button-icon { | ||
| @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%)); | ||
| } | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,182 @@ | ||
| @import '../global'; | ||
|
|
||
| /** | ||
| * @class Ext.field.Field | ||
| */ | ||
|
|
||
| /** | ||
| * @var {color} $toolbar-input-bg | ||
| * Background-color for toolbar form fields. | ||
| */ | ||
| $toolbar-input-bg: #fff !default; | ||
|
|
||
| /** | ||
| * @var {color} $toolbar-input-color | ||
| * Text color for toolbar form fields. | ||
| */ | ||
| $toolbar-input-color: #000 !default; | ||
|
|
||
| /** | ||
| * @var {measurement} $toolbar-input-height | ||
| * Text color for toolbar form fields. | ||
| */ | ||
| $toolbar-input-height: 1.6em !default; | ||
|
|
||
| /** | ||
| * @var {color} $toolbar-input-border-color | ||
| * Border color for toolbar form fields. | ||
| */ | ||
| $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.tab.Bar | ||
| */ | ||
| @mixin sencha-toolbar-forms { | ||
| //so disabled fields are still dark | ||
| .x-spinner .x-input-el, | ||
| .x-field-select .x-input-el { | ||
| -webkit-text-fill-color: #000; | ||
| -webkit-opacity: 1; | ||
| } | ||
|
|
||
| .x-spinner.x-item-disabled .x-input-el, | ||
| .x-field-select.x-item-disabled .x-input-el { | ||
| -webkit-text-fill-color: currentcolor; | ||
| } | ||
|
|
||
| //and inside toolbars | ||
| .x-toolbar .x-field-select .x-input-el { | ||
| -webkit-text-fill-color: #fff; | ||
| } | ||
|
|
||
| .x-toolbar .x-field-select.x-item-disabled .x-input-el { | ||
| -webkit-text-fill-color: rgba(255,255,255,.6); | ||
| } | ||
|
|
||
| .x-toolbar { | ||
| .x-form-field-container { | ||
| @if $include-border-radius { padding: 0 .3em; } | ||
| } | ||
|
|
||
| .x-field { | ||
| width: 13em; | ||
| margin: .5em; | ||
| min-height: 0; | ||
| border-bottom: 0; | ||
| background: transparent; | ||
|
|
||
| .x-clear-icon { | ||
| background-size: 50% 50%; | ||
| right: -0.8em; | ||
| margin-top: -1.06em; | ||
| } | ||
| } | ||
|
|
||
| .x-field-input { | ||
| padding-right: 1.6em !important; | ||
| } | ||
|
|
||
| .x-field-textarea, | ||
| .x-field-text, | ||
| .x-field-number, | ||
| .x-field-search { | ||
| .x-component-outer { | ||
| @if $include-border-radius { @include border-radius(.3em); } | ||
| background-color: $toolbar-input-bg; | ||
|
|
||
| @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; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .x-form-label { | ||
| background: transparent; | ||
| border: 0; | ||
| padding: 0; | ||
| line-height: 1.4em; | ||
| } | ||
|
|
||
| .x-form-field { | ||
| height: $toolbar-input-height; | ||
| color: lighten($toolbar-input-color, 43%); | ||
| background: transparent; | ||
| min-height: 0; | ||
| -webkit-appearance: none; | ||
| padding: 0em .3em; | ||
| margin: 0; | ||
|
|
||
| &:focus { | ||
| color: $toolbar-input-color; | ||
| } | ||
| } | ||
|
|
||
| .x-field-select, | ||
| .x-field-search { | ||
| .x-component-outer { | ||
| @if $include-border-radius { @include border-radius($toolbar-input-height/2); } | ||
| } | ||
| } | ||
|
|
||
| .x-field-search { | ||
| .x-field-input { | ||
| background-position: .5em 50%; | ||
| } | ||
| } | ||
|
|
||
| .x-field-select { | ||
| -webkit-box-shadow: none; | ||
|
|
||
| .x-form-field { | ||
| height: 1.4em; | ||
| } | ||
| } | ||
|
|
||
| .x-field-select { | ||
| background: transparent; | ||
|
|
||
| .x-component-outer { | ||
| &:after { | ||
| right: .4em; | ||
| } | ||
| } | ||
|
|
||
| &.x-item-disabled { | ||
| .x-component-outer:after { | ||
| opacity: .6; | ||
| } | ||
| } | ||
|
|
||
| // Background is set in _toolbar file | ||
| .x-component-outer: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 { | ||
| color: #fff; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .x-android .x-field-search .x-field-input { | ||
| padding-left: .2em !important; | ||
| padding-right: 2.2em !important; | ||
| } | ||
| } |
| @@ -0,0 +1,156 @@ | ||
| @import '../global'; | ||
|
|
||
| /** | ||
| * @class Ext.Toolbar | ||
| */ | ||
|
|
||
| /** | ||
| * @var {color} $toolbar-base-color | ||
| * The primary color variable from which toolbars derive their light and dark UIs. | ||
| */ | ||
| $toolbar-base-color: $base-color !default; | ||
|
|
||
| /** | ||
| * @var {measurement} $toolbar-spacing | ||
| * Space between items in a toolbar (like buttons and fields) | ||
| */ | ||
| $toolbar-spacing: .2em !default; | ||
|
|
||
| /** | ||
| * @var {string} $toolbar-gradient | ||
| * Background gradient style for toolbars. | ||
| */ | ||
| $toolbar-gradient: $base-gradient !default; | ||
|
|
||
| /** | ||
| * @var {boolean} $include-toolbar-uis | ||
| * Optionally disable separate toolbar UIs (light and dark). | ||
| */ | ||
| $include-toolbar-uis: $include-default-uis !default; | ||
|
|
||
| /** | ||
| * Includes default toolbar styles. | ||
| */ | ||
| @mixin sencha-toolbar { | ||
|
|
||
| .x-toolbar { | ||
| padding: 0 $toolbar-spacing; | ||
| overflow: hidden; | ||
| position: relative; | ||
| height: $global-row-height; | ||
|
|
||
| & > * { | ||
| z-index: 1; | ||
| } | ||
|
|
||
| &.x-docked-top { | ||
| border-bottom: .1em solid; | ||
| } | ||
|
|
||
| &.x-docked-bottom { | ||
| border-top: .1em solid; | ||
| } | ||
|
|
||
| &.x-docked-left { | ||
| width: 7em; | ||
| height: auto; | ||
| padding: $toolbar-spacing; | ||
| border-right: .1em solid; | ||
| } | ||
|
|
||
| &.x-docked-right { | ||
| width: 7em; | ||
| height: auto; | ||
| padding: $toolbar-spacing; | ||
| border-left: .1em solid; | ||
| } | ||
| } | ||
|
|
||
| .x-title { | ||
| line-height: $global-row-height - .5em; | ||
| font-size: 1.2em; | ||
| text-align: center; | ||
| font-weight: bold; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| margin: 0 0.3em; | ||
| max-width: 100%; | ||
|
|
||
| .x-innerhtml { | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| padding: 0 .3em; | ||
| } | ||
| } | ||
|
|
||
| @if $include-toolbar-uis { | ||
| @include sencha-toolbar-ui('dark', darken($toolbar-base-color, 10%)); | ||
| @include sencha-toolbar-ui('light', $toolbar-base-color); | ||
| @include sencha-toolbar-ui('neutral', $neutral-color); | ||
| } | ||
|
|
||
| .x-navigation-bar { | ||
| .x-container { | ||
| overflow: visible; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Creates a theme UI for toolbars. | ||
| * | ||
| * // SCSS | ||
| * @include sencha-toolbar-ui('sub', #58710D, 'glossy'); | ||
| * | ||
| * // JS | ||
| * var myTb = new Ext.Toolbar({title: 'My Green Glossy Toolbar', ui: 'sub'}) | ||
| * | ||
| * @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. | ||
| */ | ||
| @mixin sencha-toolbar-ui($ui-label, $color, $gradient: $toolbar-gradient) { | ||
|
|
||
| $toolbar-border-color: darken($color, 50%); | ||
| $toolbar-button-color: darken($color, 5%); | ||
|
|
||
| .x-toolbar-#{$ui-label} { | ||
| @include background-gradient($color, $gradient); | ||
| border-color: $toolbar-border-color; | ||
|
|
||
| .x-title { | ||
| @include color-by-background($color); | ||
| @include bevel-by-background($color); | ||
| } | ||
|
|
||
| &.x-docked-top { | ||
| border-bottom-color: $toolbar-border-color; | ||
| } | ||
|
|
||
| &.x-docked-bottom { | ||
| border-top-color: $toolbar-border-color; | ||
| } | ||
|
|
||
| &.x-docked-left { | ||
| border-right-color: $toolbar-border-color; | ||
| } | ||
|
|
||
| &.x-docked-right { | ||
| border-left-color: $toolbar-border-color; | ||
| } | ||
|
|
||
| .x-button, | ||
| .x-field-select .x-component-outer, | ||
| .x-field-select .x-component-outer:before { | ||
| @include toolbar-button($toolbar-button-color, $gradient); | ||
| } | ||
|
|
||
| .x-form-label { | ||
| @include color-by-background($color); | ||
| @include bevel-by-background($color); | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1 @@ | ||
| stylesheet '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; |
