Facebook
From Flying Bee, 4 Months ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 101
  1. //reused color variables
  2. $shade000:#ffffff !default;    //surface
  3. $shade100:#f8f9fa !default;    //header background
  4. $shade200:#e9ecef !default;    //hover background
  5. $shade300:#dee2e6 !default;    //border, divider
  6. $shade400:#ced4da !default;    //input border
  7. $shade500:#adb5bd !default;    //input icon
  8. $shade600:#6c757d !default;    //text secondary color
  9. $shade700:#495057 !default;    //text color
  10. $shade800:#343a40 !default;    //unused
  11. $shade900:#212529 !default;    //unused
  12.  
  13. //global
  14. $fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
  15. $fontSize:1rem !default;
  16. $fontWeight:normal !default;
  17. $textColor:$shade700 !default;
  18. $textSecondaryColor:$shade600 !default;
  19. $borderRadius:3px !default;
  20. $transitionDuration:.2s !default;
  21. $formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
  22. $actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
  23. $listItemTransition:box-shadow $transitionDuration !default;
  24. $primeIconFontSize:1rem !default;
  25. $divider:1px solid $shade300 !default;
  26. $inlineSpacing:.5rem !default;
  27. $disabledOpacity:.6 !default;
  28. $maskBg:rgba(0, 0, 0, 0.4) !default;
  29. $loadingIconFontSize:2rem !default;
  30. $errorColor:#f44336 !default;
  31.  
  32. //scale
  33. $scaleSM:0.875 !default;
  34. $scaleLG:1.25 !default;
  35.  
  36. //focus
  37. $focusOutlineColor:$primaryLightColor !default;
  38. $focusOutline:0 none !default;
  39. $focusOutlineOffset:0 !default;
  40. $focusShadow:0 0 0 0.2rem $focusOutlineColor !default;
  41.  
  42. //action icons
  43. $actionIconWidth:2rem !default;
  44. $actionIconHeight:2rem !default;
  45. $actionIconBg:transparent !default;
  46. $actionIconBorder:0 none !default;
  47. $actionIconColor:$shade600 !default;
  48. $actionIconHoverBg:$shade200 !default;
  49. $actionIconHoverBorderColor:transparent !default;
  50. $actionIconHoverColor:$shade700 !default;
  51. $actionIconBorderRadius:50% !default;
  52.  
  53. //input field (e.g. inputtext, spinner, inputmask)
  54. $inputPadding:.5rem .5rem !default;
  55. $inputTextFontSize:1rem !default;
  56.  
  57. $inputBg:$shade000 !default;
  58. $inputTextColor:$shade700 !default;
  59. $inputIconColor:$shade600 !default;
  60. $inputBorder:1px solid $shade400 !default;
  61. $inputHoverBorderColor:$primaryColor !default;
  62. $inputFocusBorderColor:$primaryColor !default;
  63. $inputErrorBorderColor:$errorColor !default;
  64. $inputPlaceholderTextColor:$shade600 !default;
  65. $inputFilledBg:$shade100 !default;
  66. $inputFilledHoverBg:$inputFilledBg !default;
  67. $inputFilledFocusBg:$shade000 !default;
  68.  
  69. //input groups
  70. $inputGroupBg:$shade200 !default;
  71. $inputGroupTextColor:$shade600 !default;
  72. $inputGroupAddOnMinWidth:2.357rem !default;
  73.  
  74. //input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
  75. $inputListBg:$shade000 !default;
  76. $inputListTextColor:$shade700 !default;
  77. $inputListBorder:$inputBorder !default;
  78. $inputListPadding:.5rem 0 !default;
  79. $inputListItemPadding:.5rem 1rem !default;
  80. $inputListItemBg:transparent !default;
  81. $inputListItemTextColor:$shade700 !default;
  82. $inputListItemHoverBg:$shade200 !default;
  83. $inputListItemTextHoverColor:$shade700 !default;
  84. $inputListItemBorder:0 none !default;
  85. $inputListItemBorderRadius:0 !default;
  86. $inputListItemMargin:0 !default;
  87. $inputListItemFocusShadow:inset 0 0 0 0.15rem $focusOutlineColor !default;
  88. $inputListHeaderPadding:.5rem 1rem !default;
  89. $inputListHeaderMargin:0 !default;
  90. $inputListHeaderBg:$shade100 !default;
  91. $inputListHeaderTextColor:$shade700 !default;
  92. $inputListHeaderBorder:0 none !default;
  93.  
  94. //inputs with overlays (e.g. autocomplete, dropdown, multiselect)
  95. $inputOverlayBg:$inputListBg !default;
  96. $inputOverlayHeaderBg:$inputListHeaderBg !default;
  97. $inputOverlayBorder:0 none !default;                  
  98. $inputOverlayShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
  99.  
  100. //button
  101. $buttonPadding:.5rem 1rem !default;
  102. $buttonIconOnlyWidth:2.357rem !default;
  103. $buttonIconOnlyPadding:.5rem 0 !default;
  104. $buttonBg:$primaryColor !default;
  105. $buttonTextColor:$primaryTextColor !default;
  106. $buttonBorder:1px solid $primaryColor !default;
  107. $buttonHoverBg:$primaryDarkColor !default;
  108. $buttonTextHoverColor:$primaryTextColor !default;
  109. $buttonHoverBorderColor:$primaryDarkColor !default;
  110. $buttonActiveBg:$primaryDarkerColor !default;
  111. $buttonTextActiveColor:$primaryTextColor !default;
  112. $buttonActiveBorderColor:$primaryDarkerColor !default;
  113. $raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
  114. $roundedButtonBorderRadius:2rem !default;
  115.  
  116. $textButtonHoverBgOpacity:.04 !default;
  117. $textButtonActiveBgOpacity:.16 !default;
  118. $outlinedButtonBorder:1px solid !default;
  119. $plainButtonTextColor:$textSecondaryColor !default;
  120. $plainButtonHoverBgColor:$shade200 !default;
  121. $plainButtonActiveBgColor:$shade300 !default;
  122.  
  123. $secondaryButtonBg:#607D8B !default;
  124. $secondaryButtonTextColor:#ffffff !default;
  125. $secondaryButtonBorder:1px solid $secondaryButtonBg !default;
  126. $secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
  127. $secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
  128. $secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
  129. $secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
  130. $secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
  131. $secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
  132. $secondaryButtonFocusShadow:0 0 0 0.2rem scale-color($secondaryButtonBg, $lightness: 60%) !default;
  133.  
  134. $infoButtonBg:#0288D1 !default;
  135. $infoButtonTextColor:#ffffff !default;
  136. $infoButtonBorder:1px solid $infoButtonBg !default;
  137. $infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
  138. $infoButtonTextHoverColor:$infoButtonTextColor !default;
  139. $infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
  140. $infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
  141. $infoButtonTextActiveColor:$infoButtonTextColor !default;
  142. $infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
  143. $infoButtonFocusShadow:0 0 0 0.2rem scale-color($infoButtonBg, $lightness: 60%) !default;
  144.  
  145. $successButtonBg:#689F38 !default;
  146. $successButtonTextColor:#ffffff !default;
  147. $successButtonBorder:1px solid $successButtonBg !default;
  148. $successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
  149. $successButtonTextHoverColor:$successButtonTextColor !default;
  150. $successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
  151. $successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
  152. $successButtonTextActiveColor:$successButtonTextColor !default;
  153. $successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
  154. $successButtonFocusShadow:0 0 0 0.2rem scale-color($successButtonBg, $lightness: 60%) !default;
  155.  
  156. $warningButtonBg:#FBC02D !default;
  157. $warningButtonTextColor:#212529 !default;
  158. $warningButtonBorder:1px solid $warningButtonBg !default;
  159. $warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
  160. $warningButtonTextHoverColor:$warningButtonTextColor !default;
  161. $warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
  162. $warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
  163. $warningButtonTextActiveColor:$warningButtonTextColor !default;
  164. $warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
  165. $warningButtonFocusShadow:0 0 0 0.2rem scale-color($warningButtonBg, $lightness: 60%) !default;
  166.  
  167. $helpButtonBg:#9C27B0 !default;
  168. $helpButtonTextColor:#ffffff !default;
  169. $helpButtonBorder:1px solid $helpButtonBg !default;
  170. $helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
  171. $helpButtonTextHoverColor:$helpButtonTextColor !default;
  172. $helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
  173. $helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
  174. $helpButtonTextActiveColor:$helpButtonTextColor !default;
  175. $helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
  176. $helpButtonFocusShadow:0 0 0 0.2rem scale-color($helpButtonBg, $lightness: 60%) !default;
  177.  
  178. $dangerButtonBg:#D32F2F !default;
  179. $dangerButtonTextColor:#ffffff !default;
  180. $dangerButtonBorder:1px solid $dangerButtonBg !default;
  181. $dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
  182. $dangerButtonTextHoverColor:$dangerButtonTextColor !default;
  183. $dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
  184. $dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
  185. $dangerButtonTextActiveColor:$dangerButtonTextColor !default;
  186. $dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
  187. $dangerButtonFocusShadow:0 0 0 0.2rem scale-color($dangerButtonBg, $lightness: 60%) !default;
  188.  
  189. $linkButtonColor:$primaryDarkerColor !default;
  190. $linkButtonHoverColor:$primaryDarkerColor !default;
  191. $linkButtonTextHoverDecoration:underline !default;
  192. $linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor !default;
  193.  
  194. //checkbox
  195. $checkboxWidth:20px !default;
  196. $checkboxHeight:20px !default;
  197. $checkboxBorder:2px solid $shade400 !default;
  198. $checkboxIconFontSize:14px !default;
  199. $checkboxActiveBorderColor:$primaryColor !default;
  200. $checkboxActiveBg:$primaryColor !default;
  201. $checkboxIconActiveColor:$primaryTextColor !default;
  202. $checkboxActiveHoverBg:$primaryDarkerColor !default;
  203. $checkboxIconActiveHoverColor:$primaryTextColor !default;
  204. $checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
  205.  
  206. //radiobutton
  207. $radiobuttonWidth:20px !default;
  208. $radiobuttonHeight:20px !default;
  209. $radiobuttonBorder:2px solid $shade400 !default;
  210. $radiobuttonIconSize:12px !default;
  211. $radiobuttonActiveBorderColor:$primaryColor !default;
  212. $radiobuttonActiveBg:$primaryColor !default;
  213. $radiobuttonIconActiveColor:$primaryTextColor !default;
  214. $radiobuttonActiveHoverBg:$primaryDarkerColor !default;
  215. $radiobuttonIconActiveHoverColor:$primaryTextColor !default;
  216. $radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
  217.  
  218. //colorpicker
  219. $colorPickerPreviewWidth:2rem !default;
  220. $colorPickerPreviewHeight:2rem !default;
  221. $colorPickerBg:#323232 !default;
  222. $colorPickerBorderColor:#191919 !default;
  223. $colorPickerHandleColor:$shade000 !default;
  224.  
  225. //togglebutton
  226. $toggleButtonBg:$inputBg !default;
  227. $toggleButtonBorder:1px solid $shade400 !default;
  228. $toggleButtonTextColor:$shade700 !default;
  229. $toggleButtonIconColor:$shade600 !default;
  230. $toggleButtonHoverBg:$shade200 !default;
  231. $toggleButtonHoverBorderColor:$shade400 !default;
  232. $toggleButtonTextHoverColor:$shade700 !default;
  233. $toggleButtonIconHoverColor:$shade600 !default;
  234. $toggleButtonActiveBg:$primaryColor !default;
  235. $toggleButtonActiveBorderColor:$primaryColor !default;
  236. $toggleButtonTextActiveColor:$primaryTextColor !default;
  237. $toggleButtonIconActiveColor:$primaryTextColor !default;
  238. $toggleButtonActiveHoverBg:$primaryDarkColor !default;
  239. $toggleButtonActiveHoverBorderColor:$primaryDarkColor !default;
  240. $toggleButtonTextActiveHoverColor:$primaryTextColor !default;
  241. $toggleButtonIconActiveHoverColor:$primaryTextColor !default;
  242.  
  243. //inplace
  244. $inplacePadding:$inputPadding !default;
  245. $inplaceHoverBg:$shade200 !default;
  246. $inplaceTextHoverColor:$shade700 !default;
  247.  
  248. //rating
  249. $ratingIconFontSize:1.143rem !default;
  250. $ratingCancelIconColor:#e74c3c !default;
  251. $ratingCancelIconHoverColor:#c0392b !default;
  252. $ratingStarIconOffColor:$shade700 !default;
  253. $ratingStarIconOnColor:$primaryColor !default;
  254. $ratingStarIconHoverColor:$primaryColor !default;
  255.  
  256. //slider
  257. $sliderBg:$shade300 !default;
  258. $sliderBorder:0 none !default;
  259. $sliderHorizontalHeight:.286rem !default;
  260. $sliderVerticalWidth:0.286rem !default;
  261. $sliderHandleWidth:1.143rem !default;
  262. $sliderHandleHeight:1.143rem !default;
  263. $sliderHandleBg:$shade000 !default;
  264. $sliderHandleBorder:2px solid $primaryColor !default;
  265. $sliderHandleBorderRadius:50% !default;
  266. $sliderHandleHoverBorderColor:$primaryColor !default;
  267. $sliderHandleHoverBg:$primaryColor !default;
  268. $sliderRangeBg:$primaryColor !default;
  269.  
  270. //calendar
  271. $calendarTableMargin:.5rem 0 !default;
  272. $calendarPadding:.5rem !default;
  273. $calendarBg:$shade000 !default;
  274. $calendarInlineBg:$calendarBg !default;
  275. $calendarTextColor:$shade700 !default;
  276. $calendarBorder:$inputListBorder !default;
  277. $calendarOverlayBorder:$inputOverlayBorder !default;
  278.  
  279. $calendarHeaderPadding:.5rem !default;
  280. $calendarHeaderBg:$shade000 !default;
  281. $calendarInlineHeaderBg:$calendarBg !default;
  282. $calendarHeaderBorder:1px solid $shade300 !default;
  283. $calendarHeaderTextColor:$shade700 !default;
  284. $calendarHeaderFontWeight:600 !default;
  285. $calendarHeaderCellPadding:.5rem !default;
  286.  
  287. $calendarCellDatePadding:.5rem !default;
  288. $calendarCellDateWidth:2.5rem !default;
  289. $calendarCellDateHeight:2.5rem !default;
  290. $calendarCellDateBorderRadius:50% !default;
  291. $calendarCellDateBorder:1px solid transparent !default;
  292. $calendarCellDateHoverBg:$shade200 !default;
  293. $calendarCellDateTodayBg:$shade400 !default;
  294. $calendarCellDateTodayBorderColor:transparent !default;
  295. $calendarCellDateTodayTextColor:$shade700 !default;
  296.  
  297. $calendarButtonBarPadding:1rem 0 !default;
  298. $calendarTimePickerPadding:.5rem !default;
  299. $calendarTimePickerElementPadding:0 .5rem !default;
  300. $calendarTimePickerTimeFontSize:1.25rem !default;
  301.  
  302. $calendarBreakpoint:769px !default;
  303. $calendarCellDatePaddingSM:0 !default;
  304.  
  305. //input switch
  306. $inputSwitchWidth:3rem !default;
  307. $inputSwitchHeight:1.75rem !default;
  308. $inputSwitchBorderRadius:30px !default;
  309. $inputSwitchHandleWidth:1.250rem !default;
  310. $inputSwitchHandleHeight:1.250rem !default;
  311. $inputSwitchHandleBorderRadius:50% !default;
  312. $inputSwitchSliderPadding:.25rem !default;
  313. $inputSwitchSliderOffBg:$shade400 !default;
  314. $inputSwitchHandleOffBg:$shade000 !default;
  315. $inputSwitchSliderOffHoverBg:scale-color($shade400, $lightness: -10%) !default;
  316. $inputSwitchSliderOnBg:$primaryColor !default;
  317. $inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
  318. $inputSwitchHandleOnBg:$shade000 !default;
  319.  
  320. //panel
  321. $panelHeaderBorder:1px solid $shade300 !default;
  322. $panelHeaderBg:$shade100 !default;
  323. $panelHeaderTextColor:$shade700 !default;
  324. $panelHeaderFontWeight:600 !default;
  325. $panelHeaderPadding:1rem !default;
  326. $panelToggleableHeaderPadding:.5rem 1rem !default;
  327.  
  328. $panelHeaderHoverBg:$shade200 !default;
  329. $panelHeaderHoverBorderColor:$shade300 !default;
  330. $panelHeaderTextHoverColor:$shade700 !default;
  331.  
  332. $panelContentBorder:1px solid $shade300 !default;
  333. $panelContentBg:$shade000 !default;
  334. $panelContentTextColor:$shade700 !default;
  335. $panelContentPadding:1rem !default;
  336.  
  337. $panelFooterBorder:1px solid $shade300 !default;
  338. $panelFooterBg:$shade000 !default;
  339. $panelFooterTextColor:$shade700 !default;
  340. $panelFooterPadding:0.5rem 1rem !default;
  341.  
  342. //accordion
  343. $accordionSpacing:0 !default;
  344. $accordionHeaderBorder:$panelHeaderBorder !default;
  345. $accordionHeaderBg:$panelHeaderBg !default;
  346. $accordionHeaderTextColor:$panelHeaderTextColor !default;
  347. $accordionHeaderFontWeight:$panelHeaderFontWeight !default;
  348. $accordionHeaderPadding:$panelHeaderPadding !default;
  349.  
  350. $accordionHeaderHoverBg:$shade200 !default;
  351. $accordionHeaderHoverBorderColor:$shade300 !default;
  352. $accordionHeaderTextHoverColor:$shade700 !default;
  353.  
  354. $accordionHeaderActiveBg:$panelHeaderBg !default;
  355. $accordionHeaderActiveBorderColor:$shade300 !default;
  356. $accordionHeaderTextActiveColor:$shade700 !default;
  357.  
  358. $accordionHeaderActiveHoverBg:$shade200 !default;
  359. $accordionHeaderActiveHoverBorderColor:$shade300 !default;
  360. $accordionHeaderTextActiveHoverColor:$shade700 !default;
  361.  
  362. $accordionContentBorder:$panelContentBorder !default;
  363. $accordionContentBg:$panelContentBg !default;
  364. $accordionContentTextColor:$panelContentTextColor !default;
  365. $accordionContentPadding:$panelContentPadding !default;
  366.  
  367. //tabview
  368. $tabviewNavBorder:1px solid $shade300 !default;
  369. $tabviewNavBorderWidth:0 0 2px 0 !default;
  370. $tabviewNavBg:$shade000 !default;
  371.  
  372. $tabviewHeaderSpacing:0 !default;
  373. $tabviewHeaderBorder:solid $shade300 !default;
  374. $tabviewHeaderBorderWidth:0 0 2px 0 !default;
  375. $tabviewHeaderBorderColor:transparent transparent $shade300 transparent !default;
  376. $tabviewHeaderBg:$shade000 !default;
  377. $tabviewHeaderTextColor:$shade600 !default;
  378. $tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
  379. $tabviewHeaderPadding:$panelHeaderPadding !default;
  380. $tabviewHeaderMargin:0 0 -2px 0 !default;
  381.  
  382. $tabviewHeaderHoverBg:$shade000 !default;
  383. $tabviewHeaderHoverBorderColor:$shade600 !default;
  384. $tabviewHeaderTextHoverColor:$shade600 !default;
  385.  
  386. $tabviewHeaderActiveBg:$shade000 !default;
  387. $tabviewHeaderActiveBorderColor:$primaryColor !default;
  388. $tabviewHeaderTextActiveColor:$primaryColor !default;
  389.  
  390. $tabviewContentBorder:0 none !default;
  391. $tabviewContentBg:$panelContentBg !default;
  392. $tabviewContentTextColor:$panelContentTextColor !default;
  393. $tabviewContentPadding:$panelContentPadding !default;
  394.  
  395. //upload
  396. $fileUploadProgressBarHeight:.25rem !default;
  397. $fileUploadContentPadding:2rem 1rem !default;
  398.  
  399. //scrollpanel
  400. $scrollPanelTrackBorder:0 none !default;
  401. $scrollPanelTrackBg:$shade100 !default;
  402.  
  403. //card
  404. $cardBodyPadding:1rem !default;
  405. $cardTitleFontSize:1.5rem !default;
  406. $cardTitleFontWeight:700 !default;
  407. $cardSubTitleFontWeight:400 !default;
  408. $cardSubTitleColor:$shade600 !default;
  409. $cardContentPadding:1rem 0 !default;
  410. $cardFooterPadding:1rem 0 0 0 !default;
  411. $cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
  412.  
  413. //editor
  414. $editorToolbarBg:$panelHeaderBg !default;
  415. $editorToolbarBorder:$panelHeaderBorder !default;
  416. $editorToolbarPadding:$panelHeaderPadding !default;
  417. $editorToolbarIconColor:$textSecondaryColor !default;
  418. $editorToolbarIconHoverColor:$textColor !default;
  419. $editorIconActiveColor:$primaryColor !default;
  420. $editorContentBorder:$panelContentBorder !default;
  421. $editorContentBg:$panelContentBg !default;
  422.  
  423. //paginator
  424. $paginatorBg:$shade000 !default;
  425. $paginatorTextColor:$shade600 !default;
  426. $paginatorBorder:solid $shade200 !default;
  427. $paginatorBorderWidth:0 !default;
  428. $paginatorPadding:.5rem 1rem !default;
  429. $paginatorElementWidth:$buttonIconOnlyWidth !default;
  430. $paginatorElementHeight:$buttonIconOnlyWidth !default;
  431. $paginatorElementBg:transparent !default;
  432. $paginatorElementBorder:0 none !default;
  433. $paginatorElementIconColor:$shade600 !default;
  434. $paginatorElementHoverBg:$shade200 !default;
  435. $paginatorElementHoverBorderColor:transparent !default;
  436. $paginatorElementIconHoverColor:$shade700 !default;
  437. $paginatorElementBorderRadius:$borderRadius !default;
  438. $paginatorElementMargin:.143rem !default;
  439. $paginatorElementPadding:0 !default;
  440.  
  441. //table
  442. $tableHeaderBorder:1px solid $shade200 !default;
  443. $tableHeaderBorderWidth:1px 0 1px 0 !default;
  444. $tableHeaderBg:$shade100 !default;
  445. $tableHeaderTextColor:$shade700 !default;
  446. $tableHeaderFontWeight:600 !default;
  447. $tableHeaderPadding:1rem 1rem !default;
  448.  
  449. $tableHeaderCellPadding:1rem 1rem !default;
  450. $tableHeaderCellBg:$shade100 !default;
  451. $tableHeaderCellTextColor:$shade700 !default;
  452. $tableHeaderCellFontWeight:600 !default;
  453. $tableHeaderCellBorder:1px solid $shade200 !default;
  454. $tableHeaderCellBorderWidth:0 0 1px 0 !default;
  455. $tableHeaderCellHoverBg:$shade200 !default;
  456. $tableHeaderCellTextHoverColor:$shade700 !default;
  457. $tableHeaderCellIconColor:$shade600 !default;
  458. $tableHeaderCellIconHoverColor:$shade600 !default;
  459. $tableHeaderCellHighlightBg:$shade100 !default;
  460. $tableHeaderCellHighlightTextColor:$primaryColor !default;
  461. $tableHeaderCellHighlightHoverBg:$shade200 !default;
  462. $tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
  463. $tableSortableColumnBadgeSize:1.143rem !default;
  464.  
  465. $tableBodyRowBg:$shade000 !default;
  466. $tableBodyRowTextColor:$shade700 !default;
  467. $tableBodyRowEvenBg:scale-color($tableBodyRowBg, $lightness: -1%) !default;
  468. $tableBodyRowHoverBg:$shade200 !default;
  469. $tableBodyRowTextHoverColor:$shade700 !default;
  470. $tableBodyCellBorder:1px solid $shade200 !default;
  471. $tableBodyCellBorderWidth:0 0 1px 0 !default;
  472. $tableBodyCellPadding:1rem 1rem !default;
  473.  
  474. $tableFooterCellPadding:1rem 1rem !default;
  475. $tableFooterCellBg:$shade100 !default;
  476. $tableFooterCellTextColor:$shade700 !default;
  477. $tableFooterCellFontWeight:600 !default;
  478. $tableFooterCellBorder:1px solid $shade200 !default;
  479. $tableFooterCellBorderWidth:0 0 1px 0 !default;
  480. $tableResizerHelperBg:$primaryColor !default;
  481.  
  482. $tableFooterBorder:1px solid $shade200 !default;
  483. $tableFooterBorderWidth:0 0 1px 0 !default;
  484. $tableFooterBg:$shade100 !default;
  485. $tableFooterTextColor:$shade700 !default;
  486. $tableFooterFontWeight:600 !default;
  487. $tableFooterPadding:1rem 1rem !default;
  488.  
  489. $tableCellContentAlignment:left !default;
  490. $tableTopPaginatorBorderWidth:0 0 1px 0 !default;
  491. $tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
  492.  
  493. $tableScaleSM:0.5 !default;
  494. $tableScaleLG:1.25 !default;
  495.  
  496. //dataview
  497. $dataViewContentPadding:0 !default;
  498. $dataViewContentBorder:0 none !default;
  499. $dataViewListItemBorder:solid $shade200 !default;
  500. $dataViewListItemBorderWidth:0 0 1px 0 !default;
  501.  
  502. //orderlist, picklist
  503. $orderListBreakpoint:769px !default;
  504. $pickListBreakpoint:769px !default;
  505.  
  506. //schedule
  507. $fullCalendarEventBg:$primaryDarkColor !default;
  508. $fullCalendarEventBorder:1px solid $primaryDarkColor !default;
  509. $fullCalendarEventTextColor:$primaryTextColor !default;
  510.  
  511. //tree
  512. $treeContainerPadding:0.286rem !default;
  513. $treeNodePadding:0.143rem !default;
  514. $treeNodeContentPadding:.5rem !default;
  515. $treeNodeChildrenPadding:0 0 0 1rem !default;
  516. $treeNodeIconColor:$shade600 !default;
  517.  
  518. //org chart
  519. $organizationChartConnectorColor:$shade300 !default;
  520.  
  521. //message
  522. $messageMargin:1rem 0 !default;
  523. $messagePadding:1rem 1.5rem !default;
  524. $messageBorderWidth:0 0 0 6px !default;
  525. $messageIconFontSize:1.5rem !default;
  526. $messageTextFontSize:1rem !default;
  527. $messageTextFontWeight:500 !default;
  528.  
  529. //inline message
  530. $inlineMessagePadding:$inputPadding !default;
  531. $inlineMessageMargin:0 !default;
  532. $inlineMessageIconFontSize:1rem !default;
  533. $inlineMessageTextFontSize:1rem !default;
  534. $inlineMessageBorderWidth:0px !default;
  535.  
  536. //toast
  537. $toastIconFontSize:2rem !default;
  538. $toastMessageTextMargin:0 0 0 1rem !default;
  539. $toastMargin:0 0 1rem 0 !default;
  540. $toastPadding:1rem !default;
  541. $toastBorderWidth:0 0 0 6px !default;
  542. $toastShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
  543. $toastOpacity:.9 !default;
  544. $toastTitleFontWeight:700 !default;
  545. $toastDetailMargin:$inlineSpacing 0 0 0 !default;
  546.  
  547. //severities
  548. $infoMessageBg:#B3E5FC !default;
  549. $infoMessageBorder:solid scale-color($infoMessageBg, $lightness: -50%) !default;
  550. $infoMessageTextColor:scale-color($infoMessageBg, $lightness: -75%) !default;
  551. $infoMessageIconColor:scale-color($infoMessageBg, $lightness: -75%) !default;
  552. $successMessageBg:#C8E6C9 !default;
  553. $successMessageBorder:solid scale-color($successMessageBg, $lightness: -50%) !default;
  554. $successMessageTextColor:scale-color($successMessageBg, $lightness: -75%) !default;
  555. $successMessageIconColor:scale-color($successMessageBg, $lightness: -75%) !default;
  556. $warningMessageBg:#FFECB3 !default;
  557. $warningMessageBorder:solid scale-color($warningMessageBg, $lightness: -50%) !default;
  558. $warningMessageTextColor:scale-color($warningMessageBg, $lightness: -75%) !default;
  559. $warningMessageIconColor:scale-color($warningMessageBg, $lightness: -75%) !default;
  560. $errorMessageBg:#FFCDD2 !default;
  561. $errorMessageBorder:solid scale-color($errorMessageBg, $lightness: -50%) !default;
  562. $errorMessageTextColor:scale-color($errorMessageBg, $lightness: -75%) !default;
  563. $errorMessageIconColor:scale-color($errorMessageBg, $lightness: -75%) !default;
  564.  
  565. //overlays
  566. $overlayContentBorder:0 none !default;
  567. $overlayContentBg:$panelContentBg !default;
  568. $overlayContainerShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12) !default;
  569.  
  570. //dialog
  571. $dialogHeaderBg:$shade000 !default;
  572. $dialogHeaderBorder:0 none !default;
  573. $dialogHeaderTextColor:$shade700 !default;
  574. $dialogHeaderFontWeight:600 !default;
  575. $dialogHeaderFontSize:1.25rem !default;
  576. $dialogHeaderPadding:1.5rem !default;
  577. $dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
  578. $dialogFooterBorder:0 none !default;
  579. $dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
  580.  
  581. //tooltip
  582. $tooltipBg:$shade700 !default;
  583. $tooltipTextColor:$shade000 !default;
  584. $tooltipPadding:$inputPadding !default;
  585.  
  586. //steps
  587. $stepsItemBg:$shade000 !default;
  588. $stepsItemBorder:1px solid $shade200 !default;
  589. $stepsItemTextColor:$shade600 !default;
  590. $stepsItemNumberWidth:2rem !default;
  591. $stepsItemNumberHeight:2rem !default;
  592. $stepsItemNumberFontSize:1.143rem !default;
  593. $stepsItemNumberColor:$shade700 !default;
  594. $stepsItemNumberBorderRadius:50% !default;
  595. $stepsItemActiveFontWeight:600 !default;
  596.  
  597. //progressbar
  598. $progressBarHeight:1.5rem !default;
  599. $progressBarBorder:0 none !default;
  600. $progressBarBg:$shade300 !default;
  601. $progressBarValueBg:$primaryColor !default;
  602.  
  603. //menu (e.g. menu, menubar, tieredmenu)
  604. $menuWidth:12.5rem !default;
  605. $menuBg:$shade000 !default;
  606. $menuBorder:1px solid $shade300 !default;
  607. $menuTextColor:$shade700 !default;
  608. $menuitemPadding:.75rem 1rem !default;
  609. $menuitemBorderRadius:0 !default;
  610. $menuitemTextColor:$shade700 !default;
  611. $menuitemIconColor:$shade600 !default;
  612. $menuitemTextHoverColor:$shade700 !default;
  613. $menuitemIconHoverColor:$shade600 !default;
  614. $menuitemHoverBg:$shade200 !default;
  615. $menuitemTextActiveColor:$shade700 !default;
  616. $menuitemIconActiveColor:$shade600 !default;
  617. $menuitemActiveBg:$shade200 !default;
  618. $menuitemSubmenuIconFontSize:.875rem !default;
  619. $submenuHeaderMargin:0 !default;
  620. $submenuHeaderPadding:.75rem 1rem !default;
  621. $submenuHeaderBg:$shade000 !default;
  622. $submenuHeaderTextColor:$shade700 !default;
  623. $submenuHeaderBorderRadius:0 !default;
  624. $submenuHeaderFontWeight:600 !default;
  625. $overlayMenuBg:$menuBg !default;
  626. $overlayMenuBorder:0 none !default;
  627. $overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
  628. $verticalMenuPadding:.25rem 0 !default;
  629. $menuSeparatorMargin:.25rem 0 !default;
  630.  
  631. $breadcrumbPadding:1rem !default;
  632. $breadcrumbBg:$menuBg !default;
  633. $breadcrumbBorder:$menuBorder !default;
  634. $breadcrumbItemTextColor:$menuitemTextColor !default;
  635. $breadcrumbItemIconColor:$menuitemIconColor !default;
  636. $breadcrumbLastItemTextColor:$menuitemTextColor !default;
  637. $breadcrumbLastItemIconColor:$menuitemIconColor !default;
  638. $breadcrumbSeparatorColor:$menuitemTextColor !default;
  639.  
  640. $horizontalMenuPadding:.5rem !default;
  641. $horizontalMenuBg:$shade100 !default;
  642. $horizontalMenuBorder:$menuBorder !default;
  643. $horizontalMenuTextColor:$menuTextColor !default;
  644. $horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
  645. $horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
  646. $horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
  647. $horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
  648. $horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
  649. $horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
  650. $horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
  651. $horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
  652. $horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
  653. $horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
  654.  
  655. //badge and tag
  656. $badgeBg:$primaryColor !default;
  657. $badgeTextColor:$primaryTextColor !default;
  658. $badgeMinWidth:1.5rem !default;
  659. $badgeHeight:1.5rem !default;
  660. $badgeFontWeight:700 !default;
  661. $badgeFontSize:.75rem !default;
  662.  
  663. $tagPadding:.25rem .4rem !default;
  664.  
  665. //carousel
  666. $carouselIndicatorsPadding:1rem !default;
  667. $carouselIndicatorBg:$shade200 !default;
  668. $carouselIndicatorHoverBg:$shade300 !default;
  669. $carouselIndicatorBorderRadius:0 !default;
  670. $carouselIndicatorWidth:2rem !default;
  671. $carouselIndicatorHeight:.5rem !default;
  672.  
  673. //galleria
  674. $galleriaMaskBg:rgba(0,0,0,0.9) !default;
  675. $galleriaCloseIconMargin:.5rem !default;
  676. $galleriaCloseIconFontSize:2rem !default;
  677. $galleriaCloseIconBg:transparent !default;
  678. $galleriaCloseIconColor:$shade100 !default;
  679. $galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
  680. $galleriaCloseIconHoverColor:$shade100 !default;
  681. $galleriaCloseIconWidth:4rem !default;
  682. $galleriaCloseIconHeight:4rem !default;
  683. $galleriaCloseIconBorderRadius:50% !default;
  684.  
  685. $galleriaItemNavigatorBg:transparent !default;
  686. $galleriaItemNavigatorColor:$shade100 !default;
  687. $galleriaItemNavigatorMargin:0 .5rem !default;
  688. $galleriaItemNavigatorFontSize:2rem !default;
  689. $galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
  690. $galleriaItemNavigatorHoverColor:$shade100 !default;
  691. $galleriaItemNavigatorWidth:4rem !default;
  692. $galleriaItemNavigatorHeight:4rem !default;
  693. $galleriaItemNavigatorBorderRadius:$borderRadius !default;
  694.  
  695. $galleriaCaptionBg:rgba(0,0,0,.5) !default;
  696. $galleriaCaptionTextColor:$shade100 !default;
  697. $galleriaCaptionPadding:1rem !default;
  698.  
  699. $galleriaIndicatorsPadding:1rem !default;
  700. $galleriaIndicatorBg:$shade200 !default;
  701. $galleriaIndicatorHoverBg:$shade300 !default;
  702. $galleriaIndicatorBorderRadius:50% !default;
  703. $galleriaIndicatorWidth:1rem !default;
  704. $galleriaIndicatorHeight:1rem !default;
  705. $galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
  706. $galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
  707. $galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
  708.  
  709. $galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
  710. $galleriaThumbnailContainerPadding:1rem .25rem !default;
  711. $galleriaThumbnailNavigatorBg:transparent !default;
  712. $galleriaThumbnailNavigatorColor:$shade100 !default;
  713. $galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
  714. $galleriaThumbnailNavigatorHoverColor:$shade100 !default;
  715. $galleriaThumbnailNavigatorBorderRadius:50% !default;
  716. $galleriaThumbnailNavigatorWidth:2rem !default;
  717. $galleriaThumbnailNavigatorHeight:2rem !default;
  718.  
  719. :root {
  720.     --surface-a:#{$shade000};
  721.     --surface-b:#{$shade100};
  722.     --surface-c:#{$shade200};
  723.     --surface-d:#{$shade300};
  724.     --surface-e:#{$shade000};
  725.     --surface-f:#{$shade000};
  726.     --text-color:#{$shade700};
  727.     --text-color-secondary:#{$shade600};
  728.     --primary-color:#{$primaryColor};
  729.     --primary-color-text:#{$primaryTextColor};
  730.     --font-family:#{$fontFamily};
  731. }