_a11y-result.scss 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. .w-a11y-result__row {
  2. border-top: 1px solid theme('colors.border-furniture');
  3. }
  4. .w-a11y-result__header {
  5. margin: 0;
  6. padding: theme('spacing.4') theme('spacing.5');
  7. width: 100%;
  8. display: flex;
  9. justify-content: space-between;
  10. gap: theme('spacing.2');
  11. font: inherit;
  12. font-weight: theme('fontWeight.bold');
  13. }
  14. .w-a11y-result__name {
  15. color: theme('colors.text-label');
  16. }
  17. .w-a11y-result__container {
  18. display: flex;
  19. flex-wrap: wrap;
  20. padding: 0 theme('spacing.5') theme('spacing.5') theme('spacing.5');
  21. }
  22. .w-a11y-result__subtotal_count {
  23. color: theme('colors.text-context');
  24. width: theme('spacing.5');
  25. text-align: center;
  26. }
  27. .w-a11y-result__selector {
  28. display: flex;
  29. align-items: center;
  30. background: theme('colors.surface-field-inactive');
  31. color: theme('colors.text-context');
  32. border-radius: theme('borderRadius.DEFAULT');
  33. margin-inline-end: theme('spacing.[2.5]');
  34. margin-bottom: theme('spacing.[2.5]');
  35. padding: theme('spacing.[1.5]');
  36. &:hover,
  37. &:focus {
  38. background: theme('colors.surface-button-default');
  39. color: theme('colors.text-button');
  40. .w-a11y-result__icon {
  41. fill: theme('colors.text-button');
  42. }
  43. }
  44. @media (forced-colors: active) {
  45. border: theme('spacing.px') solid ButtonText;
  46. }
  47. }
  48. .w-a11y-result__icon {
  49. flex-shrink: 0;
  50. fill: theme('colors.surface-button-default');
  51. height: theme('spacing.[3.5]');
  52. width: theme('spacing.[3.5]');
  53. margin-inline-end: theme('spacing.[2.5]');
  54. }
  55. .w-a11y-result__count {
  56. display: flex;
  57. flex-shrink: 0;
  58. justify-content: center;
  59. align-items: center;
  60. background-color: theme('colors.positive.100');
  61. border-radius: theme('borderRadius.full');
  62. font-size: theme('fontSize.14');
  63. line-height: theme('lineHeight.none');
  64. height: theme('spacing.5');
  65. width: theme('spacing.5');
  66. color: theme('colors.text-button');
  67. &.has-errors {
  68. background-color: theme('colors.critical.200');
  69. }
  70. @media (forced-colors: active) {
  71. border: theme('spacing.px') solid ButtonText;
  72. }
  73. }