variables-misc.css

Same filename and directory in other branches
  1. 11.x core/themes/default_admin/css/_variables/variables-misc.css

Miscellaneous global custom properties.

Motion (easing/transition), radii & border widths, focus rings, icon sizes, and other global tokens that are neither color, spacing, nor typography. Split out of the former css/base/variables.pcss.css as part of https://www.drupal.org/i/3582351 (relocation only — no value changes).

File

core/themes/default_admin/css/_variables/variables-misc.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Miscellaneous global custom properties.
  10. *
  11. * Motion (easing/transition), radii & border widths, focus rings, icon sizes,
  12. * and other global tokens that are neither color, spacing, nor typography.
  13. * Split out of the former css/base/variables.pcss.css as part of
  14. * https://www.drupal.org/i/3582351 (relocation only — no value changes).
  15. */
  16. :root {
  17. /*
  18. * Common.
  19. */
  20. --transition: all var(--admin-duration-fast) var(--admin-easing); /* Default Admin 'all' composite. */
  21. --outline-size: 0.25rem;
  22. --outline-offset: 2px;
  23. --focus-outline: var(--outline-size) solid var(--admin-color-focus);
  24. /**
  25. * Shadows.
  26. */
  27. --shadow-z3: 0 0.875rem 1.875rem rgb(0, 0, 0, 0.1);
  28. /*
  29. * Pattern.
  30. */
  31. --admin-pattern-square: 0.5rem;
  32. /*
  33. * Icon sizes.
  34. */
  35. --admin-icon-size-close: 1.25rem;
  36. --admin-icon-size-toolbar-secondary: 1.0625rem;
  37. --admin-icon-size-toolbar: 1.0625rem;
  38. --admin-icon-size-sidebar-toggle: 1.3125rem;
  39. /*
  40. * Corner radii use the canonical --admin-radius-* scale. Authored in px; the
  41. * build's px-to-rem step converts them.
  42. */
  43. --admin-radius-2xs: 2px;
  44. --admin-radius-xs: 0.25rem;
  45. --admin-radius-s: 0.375rem;
  46. --admin-radius-m: 0.5rem;
  47. --admin-radius-l: 0.75rem;
  48. --admin-radius-xl: 1rem;
  49. --size-summary-border-radius: calc(var(--admin-radius-m) - 1px);
  50. /*
  51. * Motion durations are split from easing. The 0.3s duration is the slow
  52. * transition, while duplicate easing declarations use --admin-easing.
  53. */
  54. --admin-duration-fast: 0.15s;
  55. --admin-duration-slow: 0.3s;
  56. --admin-easing: cubic-bezier(0.19, 1, 0.22, 1);
  57. --admin-transition: var(--admin-duration-fast) var(--admin-easing);
  58. --admin-transition-slow: var(--admin-duration-slow) var(--admin-easing);
  59. /*
  60. * Misc.
  61. */
  62. --admin-link-decoration-style: dotted;
  63. --admin-max-line-length: 80ch;
  64. @media (min-width: 61em) {
  65. --admin-icon-size-toolbar: 1.25rem;
  66. }
  67. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.