descriptions-item.scss 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. @use 'sass:map';
  2. @use 'mixins/mixins' as *;
  3. @use 'common/var' as *;
  4. $descriptions-item-label-margin-right: () !default;
  5. $descriptions-item-label-margin-right: map.merge(
  6. (
  7. 'large': 16px,
  8. 'default': 16px,
  9. 'small': 12px,
  10. ),
  11. $descriptions-item-label-margin-right
  12. );
  13. $descriptions-item-vertical-label-padding-bottom: () !default;
  14. $descriptions-item-vertical-label-padding-bottom: map.merge(
  15. (
  16. 'large': 8px,
  17. 'default': 6px,
  18. 'small': 4px,
  19. ),
  20. $descriptions-item-vertical-label-padding-bottom
  21. );
  22. @include b(descriptions) {
  23. @include e(label) {
  24. &.#{$namespace}-descriptions__cell.is-bordered-label {
  25. font-weight: bold;
  26. color: getCssVar('text-color', 'regular');
  27. background: getCssVar('descriptions-item-bordered-label-background');
  28. }
  29. &:not(.is-bordered-label) {
  30. color: getCssVar('text-color', 'primary');
  31. margin-right: map.get($descriptions-item-label-margin-right, 'default');
  32. }
  33. &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
  34. padding-bottom: map.get(
  35. $descriptions-item-vertical-label-padding-bottom,
  36. 'default'
  37. );
  38. }
  39. }
  40. @include e(content) {
  41. &.#{$namespace}-descriptions__cell.is-bordered-content {
  42. color: getCssVar('text-color', 'primary');
  43. }
  44. &:not(.is-bordered-label) {
  45. color: getCssVar('text-color', 'regular');
  46. }
  47. }
  48. @each $size in (large, small) {
  49. @include m($size) {
  50. @include e(label) {
  51. &:not(.is-bordered-label) {
  52. margin-right: map.get($descriptions-item-label-margin-right, $size);
  53. }
  54. &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
  55. padding-bottom: map.get(
  56. $descriptions-item-vertical-label-padding-bottom,
  57. $size
  58. );
  59. }
  60. }
  61. }
  62. }
  63. }