_drilldown.scss 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. .w-drilldown__contents {
  2. max-height: min(480px, 70vh);
  3. overflow-y: auto;
  4. }
  5. .w-drilldown .w-drilldown__toggle {
  6. @apply w-label-1;
  7. display: flex;
  8. justify-content: space-between;
  9. padding-inline-start: theme('spacing.5');
  10. padding-inline-end: theme('spacing.5');
  11. border: 1px solid transparent;
  12. &:hover {
  13. background-color: transparent;
  14. border-color: theme('colors.border-button-outline-hover');
  15. color: theme('colors.text-link-hover');
  16. cursor: pointer;
  17. @media (forced-colors: active) {
  18. border-color: Highlight;
  19. }
  20. }
  21. .icon {
  22. pointer-events: none;
  23. width: theme('spacing.5');
  24. height: theme('spacing.5');
  25. margin-inline-end: 0;
  26. }
  27. }
  28. .w-drilldown__submenu {
  29. display: grid;
  30. grid-template-columns: min-content 1fr;
  31. padding-inline-end: theme('spacing.4');
  32. }
  33. .w-drilldown .w-drilldown__back {
  34. @apply w-label-1;
  35. position: relative;
  36. padding: theme('spacing.[2.5]');
  37. align-self: flex-start;
  38. .icon {
  39. pointer-events: none;
  40. margin-inline-end: 0;
  41. }
  42. &:hover {
  43. background-color: transparent;
  44. border-color: theme('colors.border-button-outline-hover');
  45. color: theme('colors.text-link-hover');
  46. cursor: pointer;
  47. @media (forced-colors: active) {
  48. border-color: Highlight;
  49. }
  50. }
  51. }
  52. .w-drilldown__submenu .w-field__wrapper {
  53. // Align the margin-top with the submenu’s back button
  54. // and reduce the default margin-bottom.
  55. margin-top: theme('spacing.2');
  56. margin-bottom: theme('spacing.2');
  57. // Force fields to stay within the width of the drilldown.
  58. max-width: calc(260px - theme('spacing.4'));
  59. }
  60. .w-drilldown__submenu .w-field__label {
  61. @apply w-label-1;
  62. margin-bottom: theme('spacing.3');
  63. }
  64. .w-drilldown__count {
  65. $badge-size: theme('spacing.4');
  66. width: $badge-size;
  67. height: $badge-size;
  68. line-height: 1.5;
  69. text-align: center;
  70. font-size: 0.5625rem;
  71. font-weight: theme('fontWeight.bold');
  72. border-radius: theme('borderRadius.full');
  73. background-color: theme('colors.info.100');
  74. border: 1px solid theme('colors.info.100');
  75. color: theme('colors.white.DEFAULT');
  76. // Reuse the same count component as a button badge.
  77. .w-filter-button & {
  78. position: absolute;
  79. top: calc(-0.5 * #{$badge-size});
  80. inset-inline-end: calc(-0.5 * #{$badge-size});
  81. }
  82. }