variables-misc.css

Same filename and directory in other branches
  1. main 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); /* Claro 'all' composite, kept for the shortcut module's Claro backport. */
  21. --focus-border-size: calc(var(--admin-radius-2xs) - 1px);
  22. --focus-border-offset-size: 0px;
  23. --outline-size: 0.25rem;
  24. --focus-outline: var(--outline-size) solid var(--admin-color-focus);
  25. --focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--admin-color-bg-surface), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--admin-color-focus);
  26. /**
  27. * Shadows.
  28. */
  29. --shadow-z3: 0 0.875rem 1.875rem rgb(0, 0, 0, 0.1);
  30. /*
  31. * Pattern.
  32. */
  33. --admin-pattern-square: 0.5rem;
  34. /*
  35. * Icon sizes.
  36. */
  37. --admin-icon-size-close: 1.25rem;
  38. --admin-icon-size-toolbar-secondary: 1.0625rem;
  39. --admin-icon-size-toolbar: 1.0625rem;
  40. --admin-icon-size-sidebar-toggle: 1.3125rem;
  41. /*
  42. * Corner radii. Canonical --admin-radius-* scale; the former Gin
  43. * --gin-border-* scale and Claro --base-border-radius (2px) are folded in here
  44. * — the Claro base radius became --admin-radius-2xs. Authored in px; the build's
  45. * px-to-rem step converts them.
  46. */
  47. --admin-radius-2xs: 2px;
  48. --admin-radius-xs: 0.25rem;
  49. --admin-radius-s: 0.375rem;
  50. --admin-radius-m: 0.5rem;
  51. --admin-radius-l: 0.75rem;
  52. --admin-radius-xl: 1rem;
  53. --size-summary-border-radius: calc(var(--admin-radius-m) - 1px);
  54. /*
  55. * Motion. Duration split from easing. The old Gin --gin-transition-fast
  56. * (0.3s) was misnamed — 0.3s is the SLOW one, so it became --admin-transition-slow.
  57. * The duplicate Claro --easing + Gin --gin-easing (identical) folded into --admin-easing.
  58. */
  59. --admin-duration-fast: 0.15s;
  60. --admin-duration-slow: 0.3s;
  61. --admin-easing: cubic-bezier(0.19, 1, 0.22, 1);
  62. --admin-transition: var(--admin-duration-fast) var(--admin-easing);
  63. --admin-transition-slow: var(--admin-duration-slow) var(--admin-easing);
  64. /*
  65. * Misc.
  66. */
  67. --admin-link-decoration-style: dotted;
  68. --admin-max-line-length: 80ch;
  69. @media (min-width: 61em) {
  70. --admin-icon-size-toolbar: 1.25rem;
  71. }
  72. }

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