Component.scss 4.1 KB

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