Permalink
Browse files

Sass

  • Loading branch information...
1 parent 77b25ea commit 36b1951fe802d3f425c67b6dc957d2e7b954c5bb @AlexVangelov committed Feb 16, 2012
Showing with 3,779 additions and 4 deletions.
  1. +7 −2 CHANGELOG.md
  2. +1 −1 README.md
  3. +1 −1 lib/sencha-touch/rails/version.rb
  4. +18 −0 vendor/assets/stylesheets/sencha-touch.scss
  5. +2 −0 vendor/assets/stylesheets/sencha-touch/default/_all.scss
  6. +3 −0 vendor/assets/stylesheets/sencha-touch/default/_core.scss
  7. +2 −0 vendor/assets/stylesheets/sencha-touch/default/_global.scss
  8. +196 −0 vendor/assets/stylesheets/sencha-touch/default/_mixins.scss
  9. +110 −0 vendor/assets/stylesheets/sencha-touch/default/_variables.scss
  10. +16 −0 vendor/assets/stylesheets/sencha-touch/default/_widgets.scss
  11. +189 −0 vendor/assets/stylesheets/sencha-touch/default/core/_core.scss
  12. +362 −0 vendor/assets/stylesheets/sencha-touch/default/core/_layout.scss
  13. +62 −0 vendor/assets/stylesheets/sencha-touch/default/core/_reset.scss
  14. +355 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_buttons.scss
  15. +113 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_carousel.scss
  16. +102 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_form-sliders-basic.scss
  17. +149 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_form-sliders.scss
  18. +583 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_form.scss
  19. +5 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_img.scss
  20. +76 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_indexbar.scss
  21. +278 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_list.scss
  22. +121 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_loading-spinner.scss
  23. +11 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_map.scss
  24. +21 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_media.scss
  25. +101 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_msgbox.scss
  26. +79 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_panel.scss
  27. +154 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_picker.scss
  28. +52 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_sheets.scss
  29. +275 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_tabs.scss
  30. +186 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_toolbar-forms.scss
  31. +149 −0 vendor/assets/stylesheets/sencha-touch/default/widgets/_toolbar.scss
View
@@ -1,3 +1,8 @@
+## 1.0.1 (17 Feb 2012)
+
+ - Sass
+
## 1.0.0 (16 Feb 2012)
- Starting..
- Minimal requirements is to include sencha touch js
+
+ - Starting..
+ - Minimal requirements to include sencha touch js
View
@@ -6,7 +6,7 @@ This gem provides:
## Rails 3.1
-For Rails 3.1 and greater, the files will be added to the asset pipeline and available for you to use. These two lines will be added to the file `app/assets/javascripts/application.js` by default:
+For Rails 3.1 and greater, the files will be added to the asset pipeline and available to use. Add one of this lines to the file `app/assets/javascripts/application.js`:
//= require sencha-touch-all
or
@@ -1,6 +1,6 @@
module SenchaTouch
module Rails
- VERSION = "1.0.0"
+ VERSION = "1.0.1"
SENCHA_TOUCH_VERSION = "2.0.0.beta3"
end
end
@@ -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;
@@ -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-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,110 @@
+$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: #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 {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} $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';
Oops, something went wrong.

0 comments on commit 36b1951

Please sign in to comment.