_root.scss 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. :root,
  2. :host {
  3. font-size: 16px;
  4. height: 100%;
  5. @include media-breakpoint-up(lg) {
  6. margin-left: calc(100vw - 100%);
  7. margin-right: 0;
  8. }
  9. }
  10. :root,
  11. :host,
  12. [data-bs-theme="light"] {
  13. color-scheme: light;
  14. --#{$prefix}spacer: var(--#{$prefix}spacer-2);
  15. --#{$prefix}bg-surface: var(--#{$prefix}bg-surface-primary);
  16. --#{$prefix}bg-surface-primary: var(--#{$prefix}white);
  17. --#{$prefix}bg-surface-secondary: var(--#{$prefix}gray-50);
  18. --#{$prefix}bg-surface-tertiary: var(--#{$prefix}gray-50);
  19. --#{$prefix}bg-surface-dark: var(--#{$prefix}gray-900);
  20. --#{$prefix}bg-surface-inverted: var(--#{$prefix}gray-900);
  21. --#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
  22. --#{$prefix}text-inverted: var(--#{$prefix}gray-100);
  23. --#{$prefix}body-color: var(--#{$prefix}gray-700);
  24. --#{$prefix}body-bg: var(--#{$prefix}bg-surface-secondary);
  25. --#{$prefix}link-color: var(--#{$prefix}primary);
  26. --#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), #000 20%);
  27. --#{$prefix}secondary: var(--#{$prefix}gray-500);
  28. --#{$prefix}tertiary: var(--#{$prefix}gray-400);
  29. --#{$prefix}border-color: #{$border-color};
  30. --#{$prefix}border-color-translucent: #{$border-color-translucent};
  31. --#{$prefix}border-dark-color: #{$border-dark-color};
  32. --#{$prefix}border-dark-color-translucent: #{$border-dark-color-translucent};
  33. --#{$prefix}border-active-color: #{$border-active-color};
  34. --#{$prefix}icon-color: #{$icon-color};
  35. --#{$prefix}active-bg: #{$active-bg};
  36. --#{$prefix}disabled-bg: #{$disabled-bg};
  37. --#{$prefix}disabled-color: #{$disabled-color};
  38. --#{$prefix}code-color: #{$code-color};
  39. --#{$prefix}code-bg: #{$code-bg};
  40. --#{$prefix}dark-mode-border-color: #{$border-color-dark};
  41. --#{$prefix}dark-mode-border-color-translucent: #{$border-color-translucent-dark};
  42. --#{$prefix}dark-mode-border-active-color: #{$border-active-color-dark};
  43. --#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
  44. --#{$prefix}page-padding: #{$page-padding};
  45. --#{$prefix}page-padding-y: #{$page-padding-y};
  46. @include media-breakpoint-down($cards-grid-breakpoint) {
  47. --#{$prefix}page-padding: #{$page-padding-sm};
  48. }
  49. }