src/resources/themes/stylesheets/sencha-touch/default/var/_Class.scss

   1 /**
   2  * @class Global_CSS
   3  * Global CSS variables and mixins of Sencha Touch's Default Theme.
   4  */
   5
   6 /**
   7  * @var {boolean} $include-pictos-font
   8  * Optionally remove the default Pictos font. This will reduce the size of your compiled CSS files, however icons
   9  * will no longer be available unless you provide your own.
  10  */
  11 $include-pictos-font: true !default;
  12
  13 /**
  14  * @var {boolean} $include-default-icons
  15  * Optionally remove the default icon set which includes the following toolbar and tab bar icons: action,
  16  * add, arrow_down, arrow_left, arrow_right, arrow_up, bookmarks, compose, delete, download, favorites,
  17  * home, info, locate, maps, more, organize, refresh, reply, search, settings, star, team, time, trash,
  18  * and user. Set to false to reduce CSS weight.
  19  */
  20 $include-default-icons: true !default;
  21
  22 /**
  23  * @var {boolean} $include-form-sliders
  24  * Decides if default HTML styles are included (for components with styleHtmlContent: true). Class is applied to .x-html.
  25  */
  26 $include-form-sliders: true !default;
  27
  28 /**
  29  * @var {boolean} $include-default-uis
  30  * Decides whether or not to include the default UIs for all components.
  31  */
  32 $include-default-uis: true !default;
  33
  34 /**
  35  * @var {boolean} $include-highlights=true
  36  * Optionally disable all gradients, text-shadows, and box-shadows. Useful for CSS debugging,
  37  * non-performant browsers, or minimalist designs.
  38  */
  39 $include-highlights: true !default; // Can disable all theme-generated gradients, text-shadows, and box-shadows.
  40
  41 /**
  42  * @var {boolean} $include-border-radius
  43  * Optionally disable all border-radius. Useful for CSS debugging, non-performant browsers, or minimalist designs.
  44  */
  45 $include-border-radius: true !default; // Can disable all rounded corners
  46
  47 /**
  48  * @var {boolean} $basic-slider
  49  * Optionally remove CSS3 effects from the slider component for improved performance.
  50  */
  51 $basic-slider: false !default;
  52
  53 /**
  54  * @var {color} $base-color
  55  * The primary color variable from which most elements derive their color scheme.
  56  */
  57 $base-color: #1985D0 !default; // Triton Blue
  58
  59 /**
  60  * @var {string} $base-gradient
  61  * The primary gradient variable from which most elements derive their color scheme.
  62  *
  63  * See background-gradient mixin.
  64  */
  65 $base-gradient: if($include-highlights, matte, null) !default;
  66
  67 /**
  68  * @var {font-family} $font-family
  69  * The font-family to be used throughout the theme.
  70  *
  71  * See background-gradient mixin.
  72  */
  73 $font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif !default;
  74
  75 /**
  76  * @var {color} $alert-color
  77  * Color used for elements like badges, errors, and "decline" UIs (eg. on buttons).
  78  */
  79 $alert-color: red !default;
  80
  81 /**
  82  * @var {color} $confirm-color
  83  * Color used for elements like success messages, and "confirm" UIs (eg. on buttons).
  84  */
  85 $confirm-color: #92cf00 !default; // Green
  86
  87 /**
  88  * @var {color} $active-color
  89  * Color used for elements like selected rows, "action" UIs (eg. on buttons) and certain overlays like the picker mask.
  90  */
  91 $active-color: darken(saturate($base-color, 55%), 10%) !default;
  92
  93 /**
  94  * @var {color} $neutral-color
  95  * Color used for the neautral `ui` for Toolbars and Tabbars.
  96  */
  97 $neutral-color: #e0e0e0;
  98
  99 /**
 100  * @var {color} $page-bg-color
 101  * Background color for fullscreen components.
 102  */
 103 $page-bg-color: #eee !default;
 104
 105 /**
 106  * @var {measurement} $global-row-height
 107  * The minimum row height for items like toolbars.
 108  */
 109 $global-row-height: 2.6em !default;
 110
 111 /**
 112  * @var {measurement} $global-list-height
 113  * The minimum row height for items like toolbars.
 114  */
 115 $global-list-height: 46px !default;
 116
 117 /**
 118  * @var {measurement} $toolbar-spacing
 119  * Space between items in a toolbar (like buttons and fields)
 120  */
 121 $toolbar-spacing: .2em !default;
 122
 123 /**
 124  * @var {color} $loading-spinner-color
 125  * Background-color for the bars in the loading spinner.
 126  */
 127 $loading-spinner-color: #aaa !default;