_utilities.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. $border-values: (
  2. null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
  3. var(--#{$prefix}border-color-translucent),
  4. wide: $border-width-wide var(--#{$prefix}border-style)
  5. var(--#{$prefix}border-color-translucent),
  6. 0: 0,
  7. );
  8. $utilities-border-colors: map-loop((
  9. "red": red,
  10. "green": green,
  11. ), rgba-css-var, "$key", "border") !default;
  12. //Utilities
  13. $utilities: (
  14. "object": (
  15. property: object-fit,
  16. class: object,
  17. values: (
  18. contain: contain,
  19. cover: cover,
  20. fill: fill,
  21. scale-down: scale-down,
  22. none: none,
  23. ),
  24. ),
  25. "cursor": (
  26. property: cursor,
  27. class: cursor,
  28. values: (
  29. auto: auto,
  30. pointer: pointer,
  31. move: move,
  32. not-allowed: not-allowed,
  33. zoom-in: zoom-in,
  34. zoom-out: zoom-out,
  35. default: default,
  36. none: none,
  37. help: help,
  38. progress: progress,
  39. wait: wait,
  40. text: text,
  41. v-text: vertical-text,
  42. grab: grab,
  43. grabbing: grabbing,
  44. crosshair: crosshair,
  45. ),
  46. ),
  47. "border": (
  48. property: border,
  49. values: $border-values,
  50. ),
  51. "border-top": (
  52. property: border-top,
  53. values: $border-values,
  54. ),
  55. "border-end": (
  56. class: border-end,
  57. property: border-right,
  58. values: $border-values,
  59. ),
  60. "border-bottom": (
  61. property: border-bottom,
  62. values: $border-values,
  63. ),
  64. "border-start": (
  65. class: border-start,
  66. property: border-left,
  67. values: $border-values,
  68. ),
  69. "border-x": (
  70. class: border-x,
  71. property: border-left border-right,
  72. values: $border-values,
  73. ),
  74. "border-y": (
  75. class: border-y,
  76. property: border-top border-bottom,
  77. values: $border-values,
  78. ),
  79. "width": (
  80. property: width,
  81. class: w,
  82. values: $size-values,
  83. ),
  84. "height": (
  85. property: height,
  86. class: h,
  87. values: $size-values,
  88. ),
  89. "columns": (
  90. property: columns,
  91. class: columns,
  92. responsive: true,
  93. values: 2 3 4,
  94. ),
  95. "bg-pattern": (
  96. property: background,
  97. class: bg-pattern,
  98. values: (
  99. transparent: #{url-svg(
  100. '<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>'
  101. )} repeat center/16px 16px,
  102. )
  103. ),
  104. "bg-gradient": (
  105. property: background,
  106. class: bg-gradient,
  107. values: (
  108. null: linear-gradient(var(--#{$prefix}gradient-direction, to right), var(--#{$prefix}gradient-stops, var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-to, transparent))) no-repeat,
  109. ),
  110. ),
  111. "bg-gradient-direction": (
  112. property: --#{$prefix}gradient-direction,
  113. class: bg-gradient,
  114. values: (
  115. to-t: to top,
  116. to-te: to top right,
  117. to-e: to right,
  118. to-be: to bottom right,
  119. to-b: to bottom,
  120. to-bs: to bottom left,
  121. to-s: to left,
  122. to-ts: to top left,
  123. ),
  124. ),
  125. "table-layout": (
  126. property: table-layout,
  127. class: table,
  128. values: (
  129. auto: auto,
  130. fixed: fixed,
  131. ),
  132. ),
  133. ) !default;