extjs/modern/theme-base/sass/var/Component.scss

   1 /**
   2  * @class Global_CSS
   3  * Global CSS variables and mixins.
   4  */
   5
   6 /**
   7  * @var {boolean} [$touch-theme-base=true]
   8  */
   9 $touch-theme-base: true;
  10
  11 /**
  12  * @var {string}
  13  * The font-family to use for font icons throughout the theme.
  14  * @private
  15  */
  16 $font-icon-font-family: dynamic('Font Awesome 5 Free');
  17
  18 //Required by charts
  19 $font-size: dynamic(15px);
  20 $font-weight: dynamic(normal);
  21 $font-family: dynamic('Helvetica');
  22
  23 /**
  24  * @var {color} $base-color
  25  * The primary color variable from which most elements derive their color scheme.
  26  */
  27 $base-color: dynamic(#808080);
  28
  29 /**
  30  * @var {string} $image-extension
  31  * default file extension to use for images (defaults to 'png').
  32  */
  33 $image-extension: dynamic('png');
  34
  35 /**
  36  * @var {string} $image-search-path
  37  * Default search path for images
  38  */
  39 $image-search-path: '.' !default;
  40
  41 /**
  42  * @var {boolean/string} $relative-image-path-for-uis
  43  * True to use a relative image path for all new UIs. If true, the path will be "../images/".
  44  * It can also be a string of the path value.
  45  * It defaults to false, which means it will look for the images in the ExtJS SDK folder.
  46  */
  47 $relative-image-path-for-uis: false !default;
  48
  49 /**
  50  * @var {boolean} $include-missing-images
  51  * True to include files which are not found when compiling your SASS
  52  */
  53 $include-missing-images: dynamic(true); //legacy fallback < 6.2
  54 $enable-missing-images: dynamic($include-missing-images);
  55
  56 /**
  57  * @var {string}
  58  * The base path relative to the CSS output directory to use for theme resources.  For example
  59  * if the theme's images live one directory up from the generated CSS output in a directory
  60  * named 'foo/images/', you would need to set this variable to '../foo/' in order for the image
  61  * paths in the CSS output to be generated correctly. By default this is the same as the
  62  * CSS output directory.
  63  */
  64 $theme-resource-path: dynamic('');
  65
  66 /**
  67  * @var {number} $css-shadow-border-radius
  68  * The border radius for CSS shadows in the Classic toolkit.
  69  */
  70 $css-shadow-border-radius: dynamic(5px);
  71
  72 /**
  73  * @var {boolean}
  74  * True to add font-smoothing styles to all components
  75  */
  76 $enable-font-smoothing: dynamic(true);
  77
  78 /**
  79  * @var {number}
  80  * The X pixel offset by which to shift drop shadows behind floated components in the Modern toolkit.
  81  * By default, shadows are centered below their component, and spread by {@link Global_CSS#$shadow-width} pixels.
  82  */
  83 $shadow-x-offset: dynamic(2px);
  84
  85 /**
  86  * @var {number}
  87  * The Y pixel offset by which to shift drop shadows behind floated components in the Modern toolkit.
  88  * By default, shadows are centered below their component, and spread by {@link Global_CSS#$shadow-width} pixels.
  89  */
  90 $shadow-y-offset: dynamic(2px);
  91
  92 /**
  93  * @var {number}
  94  * The width in pixels by which the specified {@link Global_CSS#$shadow-width} is blurred to create a soft
  95  * shadow effect. If set to 0 the shadow will be sharp, the higher the number, the more blurred it will be,
  96  * and the further out the shadow will extend. For instance a shadow with {@link Global_CSS#$shadow-width} of 5px
  97  * that also has a 5px blur radius will be 10px of total shadow..
  98  */
  99 $shadow-blur-radius: dynamic(8px);
 100
 101 /**
 102  * @var {number}
 103  * The width in pixels by which shadows exceed their owning component borders all round in the Modern toolkit.
 104  * A light source direction may be added to skew this in any direction by use of {@link Global_CSS#$shadow-x-offset} and
 105  * {@link Global_CSS#$shadow-y-offset}.
 106  */
 107 $shadow-width: dynamic(0);
 108
 109 /**
 110  * @var {color}
 111  * The color of the shadow in the Modern toolkit. Usually with a transparency element, eg: rgba(0, 0, 0, 0.4).
 112  */
 113 $shadow-color: dynamic(rgba(0, 0, 0, 0.4));
 114
 115 /**
 116  * @var {list}
 117  * The box-shadow to use for floated components
 118  */
 119 $shadow: $shadow-x-offset $shadow-y-offset $shadow-blur-radius $shadow-width $shadow-color;
 120
 121 /**
 122  * @var {boolean}
 123  * Determines if a padding is applied to the whole application when inside a webview on iOS
 124  * disable this if your hybrid application is not using a overlay status bar on iOS
 125  */
 126 $enable-status-bar-padding: dynamic(true);
 127
 128 /**
 129  * @var {boolean}
 130  * Determines if {@link Ext.Component#floated} items have shadows
 131  */
 132 $enable-floated-shadows: dynamic(true);