Keine Beschreibung
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

_variables.scss 9.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. // Common
  2. // *******************************************************************************
  3. $ui-star-size: 1.1em !default;
  4. $ui-stars-spacer: -.1em !default;
  5. $ui-star-filled-color: $yellow !default;
  6. // Navbar (custom navbar)
  7. // *******************************************************************************
  8. $navbar-height: 4rem !default;
  9. $navbar-suggestion-width: 100% !default;
  10. $navbar-suggestion-height: 28rem !default;
  11. $navbar-suggestion-border-radius: .5rem !default;
  12. $navbar-dropdown-width: 22rem !default;
  13. $navbar-dropdown-content-height: 30rem !default;
  14. $navbar-dropdown-hover-bg: var(--#{$prefix}gray-60) !default;
  15. $navbar-dropdown-icon-bg: var(--#{$prefix}gray-80) !default;
  16. $navbar-notifications-dropdown-item-padding-y: .75rem !default;
  17. $navbar-notifications-dropdown-item-padding-x: 1rem !default;
  18. // Menu
  19. // *******************************************************************************
  20. $menu-width: 16.25rem !default;
  21. $menu-collapsed-width: 5.25rem !default;
  22. $menu-collapsed-layout-breakpoint: xl !default;
  23. $menu-font-size: $font-size-base !default;
  24. $menu-item-spacer: .125rem !default;
  25. $menu-link-spacer-x: .5rem !default;
  26. $menu-vertical-link-margin-x: 1rem !default;
  27. $menu-vertical-link-padding-y: .3125rem !default;
  28. $menu-vertical-link-padding-x: .9375rem !default;
  29. $menu-vertical-header-margin-y: 1rem !default;
  30. $menu-vertical-header-margin-x: 0 !default;
  31. $menu-vertical-menu-link-padding-y: .3125rem !default;
  32. $menu-vertical-menu-level-spacer: .65rem !default;
  33. $menu-horizontal-spacer-x: .375rem !default;
  34. $menu-horizontal-item-spacer: .5rem !default;
  35. $menu-horizontal-link-padding-y: .625rem !default;
  36. $menu-horizontal-link-padding-x: 1rem !default;
  37. $menu-horizontal-menu-link-padding-y: .625rem !default;
  38. $menu-horizontal-menu-level-spacer: 2rem !default;
  39. $menu-horizontal-menu-box-shadow: $dropdown-box-shadow !default;
  40. $menu-sub-width: $menu-width !default;
  41. $menu-control-width: 2.25rem !default;
  42. $menu-control-arrow-size: .5rem !default;
  43. $menu-icon-expanded-width: 1.5rem !default;
  44. $menu-icon-expanded-left-spacer: 1.675rem !default;
  45. $menu-icon-expanded-font-size: 1.375rem !default;
  46. $menu-icon-expanded-spacer: .5rem !default;
  47. $menu-animation-duration: .3s !default;
  48. $menu-bg: var(--#{$prefix}paper-bg) !default;
  49. $menu-bg-rgb: var(--#{$prefix}paper-bg-rgb) !default;
  50. $menu-color: $headings-color !default;
  51. $menu-color-rgb: #{to-rgb($menu-color)} !default;
  52. $menu-hover-bg: $gray-60 !default;
  53. $menu-hover-color: $headings-color !default;
  54. $menu-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
  55. $menu-active-color: var(--#{$prefix}primary) !default;
  56. $menu-active-toggle-bg: $gray-80 !default;
  57. $menu-box-shadow: $box-shadow-sm !default;
  58. $menu-divider-color: transparent !default;
  59. $menu-max-levels: 5 !default;
  60. // Footer
  61. // *******************************************************************************
  62. $footer-bg: var(--#{$prefix}paper-bg) !default;
  63. $footer-color: var(--#{$prefix}body-color) !default;
  64. $footer-border-width: 0 !default;
  65. $footer-border-color: var(--#{$prefix}border-color) !default;
  66. $footer-link-color: var(--#{$prefix}primary) !default;
  67. $footer-link-hover-color: rgba(var(--#{$prefix}primary-rgb), .8) !default;
  68. $footer-link-disabled-color: var(--#{$prefix}gray-300) !default;
  69. $footer-link-active-color: var(--#{$prefix}primary) !default;
  70. $footer-brand-color: $footer-link-active-color !default;
  71. $footer-brand-hover-color: color-mix(in sRGB, #{$footer-link-active-color} #{$bg-label-tint-amount}, var(--#{$prefix}paper-bg)) !default;
  72. $footer-box-shadow: var(--#{$prefix}box-shadow-lg) !default;
  73. // Custom Options
  74. // *******************************************************************************
  75. $custom-option-padding: 1.065em !default;
  76. $custom-option-cursor: pointer !default;
  77. $custom-option-border-color: var(--#{$prefix}border-color) !default;
  78. $custom-option-border-width: var(--#{$prefix}border-width) !default;
  79. $custom-option-image-border-width: 2px !default;
  80. $custom-option-border-hover-color: $input-hover-border-color !default;
  81. // Switches
  82. // *******************************************************************************
  83. $switch-font-size: .625rem !default;
  84. $switch-border-radius: 30rem !default;
  85. $switch-width: 2.5rem !default;
  86. $switch-width-sm: 1.875rem !default;
  87. $switch-width-lg: 3.25rem !default;
  88. $switch-height: 1.35rem !default;
  89. $switch-height-sm: 1.125rem !default;
  90. $switch-height-lg: 1.75rem !default;
  91. $switch-label-font-size: $font-size-base !default;
  92. $switch-label-font-size-sm: $font-size-xs !default;
  93. $switch-label-font-size-lg: $font-size-lg !default;
  94. $switch-label-line-height: 1.4 !default;
  95. $switch-label-line-height-sm: 1.6 !default;
  96. $switch-label-line-height-lg: 1.47 !default;
  97. $switch-spacer-x: .75rem !default;
  98. $switch-spacer-y: .75rem !default;
  99. $switch-gutter: .5rem !default;
  100. $switch-inner-spacer: .25rem !default;
  101. $switch-inner-spacer-sm: .17rem !default;
  102. $switch-square-border-radius: $border-radius !default;
  103. $switch-label-color: var(--#{$prefix}heading-color) !default;
  104. $switch-label-disabled-color: var(--#{$prefix}secondary-color) !default;
  105. $switch-disabled-opacity: .45 !default;
  106. $switch-off-color: rgba(var(--#{$prefix}base-color), .4) !default;
  107. $switch-off-bg: var(--#{$prefix}gray-100) !default;
  108. $switch-off-border: var(--#{$prefix}gray-100) !default;
  109. $switch-holder-bg: var(--#{$prefix}white) !default;
  110. $switch-holder-shadow: var(--#{$prefix}box-shadow-xs) !default;
  111. $switch-focus-box-shadow: $input-btn-focus-box-shadow !default;
  112. // Avatars
  113. // *******************************************************************************
  114. // (Height & Width, Font Size, status indicator position)
  115. $avatar-size: 2.375rem !default; /* Default */
  116. $avatar-sizes: (
  117. xs: (1.5rem, .625rem, 1px),
  118. sm: (2rem, .8125rem, 2px),
  119. md: (3rem, 1.125rem, 3px),
  120. lg: (3.5rem, 1.5rem, 4px),
  121. xl: (4rem, 1.875rem, 5px)
  122. ) !default;
  123. $avatar-group-border: var(--#{$prefix}paper-bg) !default;
  124. $avatar-initial-bg: #eeedf0 !default;
  125. // Timeline
  126. // *******************************************************************************
  127. $timeline-line-border-styles: (
  128. solid: solid,
  129. dotted: dotted,
  130. dashed: dashed,
  131. hidden: none
  132. ) !default;
  133. $timeline-border-color: var(--#{$prefix}border-color) !default;
  134. $timeline-indicator-size: 2rem !default;
  135. $timeline-point-size: .75rem !default;
  136. $timeline-point-color: var(--#{$prefix}primary) !default;
  137. $timeline-point-indicator-color: var(--#{$prefix}primary) !default;
  138. $timeline-end-indicator-font-size: 1.5rem !default;
  139. $timeline-point-indicator-bg-scale: 88% !default;
  140. $timeline-item-icon-font-size: .85rem !default;
  141. $timeline-item-min-height: 4rem !default;
  142. $timeline-item-padding-x: 0 !default;
  143. $timeline-item-padding-y: .5rem !default;
  144. $timeline-item-bg-color: var(--#{$prefix}paper-bg) !default;
  145. $timeline-item-border-radius: var(--#{$prefix}border-radius) !default;
  146. $timeline-event-time-size: .8125rem !default;
  147. $timeline-event-time-color: var(--#{$prefix}secondary-color) !default;
  148. // Text Divider
  149. // *******************************************************************************
  150. $divider-color: var(--#{$prefix}gray-200) !default;
  151. $divider-text-color: var(--#{$prefix}heading-color) !default;
  152. $divider-margin-y: 1rem !default;
  153. $divider-margin-x: 0 !default;
  154. $divider-text-padding-y: 0 !default;
  155. $divider-text-padding-x: .677rem !default;
  156. $divider-font-size: $font-size-base !default;
  157. $divider-icon-size: 1rem !default;
  158. // Pickers - for all the pickers
  159. // *******************************************************************************
  160. $picker-bg: var(--#{$prefix}paper-bg) !default;
  161. $picker-color: var(--#{$prefix}heading-color) !default;
  162. $picker-box-shadow: var(--#{$prefix}box-shadow) !default;
  163. $picker-padding: .5rem !default;
  164. $picker-spacer: .125rem !default;
  165. $picker-border-radius: $border-radius !default;
  166. $picker-border-width: $dropdown-border-width !default;
  167. $picker-border-color: var(--#{$prefix}border-color) !default;
  168. $picker-arrow-wrapper-size: 1.875rem !default;
  169. $picker-arrow-size: .45rem !default;
  170. $picker-arrow-bg: rgba(var(--#{$prefix}base-color-rgb), .08) !default;
  171. $picker-arrow-color: var(--#{$prefix}body-color) !default;
  172. $picker-header-size: 3.25rem !default;
  173. $picker-header-padding-y: .5rem !default;
  174. $picker-header-color: var(--#{$prefix}heading-color) !default;
  175. $picker-select-bg: var(--#{$prefix}gray-100) !default;
  176. $picker-select-width: 3.125rem !default;
  177. $picker-select-timer-radius: $border-radius-sm !default;
  178. $picker-disabled-color: var(--#{$prefix}secondary-color) !default;
  179. $picker-timer-border-width: 1px !default;
  180. $picker-timer-border-color: var(--#{$prefix}border-color) !default;
  181. $picker-cell-size: 2.25rem !default;
  182. $picker-cell-padding: .5rem !default;
  183. $picker-cell-border-radius: var(--#{$prefix}border-radius) !default;
  184. $picker-cell-active-bg: var(--#{$prefix}primary) !default;
  185. $picker-cell-active-color: var(--#{$prefix}primary-contrast) !default;
  186. $picker-cell-active-shadow: 0 .125rem .25rem 0 rgba(var(--#{$prefix}primary-rgb), .4) !default;
  187. $picker-cell-hover-bg: rgba(var(--#{$prefix}base-color-rgb), .1) !default;
  188. $picker-cell-today-bg: var(--#{$prefix}primary-bg-subtle) !default;
  189. $picker-cell-today-color: var(--#{$prefix}primary) !default;
  190. $picker-range-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
  191. $picker-range-active-color: var(--#{$prefix}primary) !default;
  192. $picker-width: ($picker-cell-size * 7) + ($picker-padding * 2) !default;
  193. $picker-zindex: $zindex-menu-fixed - 6 !default;