helpers.sass 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. // Float
  2. .is-clearfix
  3. +clearfix
  4. .is-pulled-left
  5. float: left !important
  6. .is-pulled-right
  7. float: right !important
  8. // Overflow
  9. .is-clipped
  10. overflow: hidden !important
  11. // Overlay
  12. .is-overlay
  13. @extend %overlay
  14. // Typography
  15. =typography-size($target:'')
  16. @each $size in $sizes
  17. $i: index($sizes, $size)
  18. .is-size-#{$i}#{if($target == '', '', '-' + $target)}
  19. font-size: $size !important
  20. +typography-size()
  21. +mobile
  22. +typography-size('mobile')
  23. +tablet
  24. +typography-size('tablet')
  25. +touch
  26. +typography-size('touch')
  27. +desktop
  28. +typography-size('desktop')
  29. +widescreen
  30. +typography-size('widescreen')
  31. +fullhd
  32. +typography-size('fullhd')
  33. $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
  34. @each $alignment, $text-align in $alignments
  35. .has-text-#{$alignment}
  36. text-align: #{$text-align} !important
  37. @each $alignment, $text-align in $alignments
  38. +mobile
  39. .has-text-#{$alignment}-mobile
  40. text-align: #{$text-align} !important
  41. +tablet
  42. .has-text-#{$alignment}-tablet
  43. text-align: #{$text-align} !important
  44. +tablet-only
  45. .has-text-#{$alignment}-tablet-only
  46. text-align: #{$text-align} !important
  47. +touch
  48. .has-text-#{$alignment}-touch
  49. text-align: #{$text-align} !important
  50. +desktop
  51. .has-text-#{$alignment}-desktop
  52. text-align: #{$text-align} !important
  53. +desktop-only
  54. .has-text-#{$alignment}-desktop-only
  55. text-align: #{$text-align} !important
  56. +widescreen
  57. .has-text-#{$alignment}-widescreen
  58. text-align: #{$text-align} !important
  59. +widescreen-only
  60. .has-text-#{$alignment}-widescreen-only
  61. text-align: #{$text-align} !important
  62. +fullhd
  63. .has-text-#{$alignment}-fullhd
  64. text-align: #{$text-align} !important
  65. .is-capitalized
  66. text-transform: capitalize !important
  67. .is-lowercase
  68. text-transform: lowercase !important
  69. .is-uppercase
  70. text-transform: uppercase !important
  71. .is-italic
  72. font-style: italic !important
  73. @each $name, $pair in $colors
  74. $color: nth($pair, 1)
  75. .has-text-#{$name}
  76. color: $color !important
  77. a.has-text-#{$name}
  78. &:hover,
  79. &:focus
  80. color: darken($color, 10%) !important
  81. .has-background-#{$name}
  82. background-color: $color !important
  83. @each $name, $shade in $shades
  84. .has-text-#{$name}
  85. color: $shade !important
  86. .has-background-#{$name}
  87. background-color: $shade !important
  88. .has-text-weight-light
  89. font-weight: $weight-light !important
  90. .has-text-weight-normal
  91. font-weight: $weight-normal !important
  92. .has-text-weight-medium
  93. font-weight: $weight-medium !important
  94. .has-text-weight-semibold
  95. font-weight: $weight-semibold !important
  96. .has-text-weight-bold
  97. font-weight: $weight-bold !important
  98. .is-family-primary
  99. font-family: $family-primary !important
  100. .is-family-secondary
  101. font-family: $family-secondary !important
  102. .is-family-sans-serif
  103. font-family: $family-sans-serif !important
  104. .is-family-monospace
  105. font-family: $family-monospace !important
  106. .is-family-code
  107. font-family: $family-code !important
  108. // Visibility
  109. $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
  110. @each $display in $displays
  111. .is-#{$display}
  112. display: #{$display} !important
  113. +mobile
  114. .is-#{$display}-mobile
  115. display: #{$display} !important
  116. +tablet
  117. .is-#{$display}-tablet
  118. display: #{$display} !important
  119. +tablet-only
  120. .is-#{$display}-tablet-only
  121. display: #{$display} !important
  122. +touch
  123. .is-#{$display}-touch
  124. display: #{$display} !important
  125. +desktop
  126. .is-#{$display}-desktop
  127. display: #{$display} !important
  128. +desktop-only
  129. .is-#{$display}-desktop-only
  130. display: #{$display} !important
  131. +widescreen
  132. .is-#{$display}-widescreen
  133. display: #{$display} !important
  134. +widescreen-only
  135. .is-#{$display}-widescreen-only
  136. display: #{$display} !important
  137. +fullhd
  138. .is-#{$display}-fullhd
  139. display: #{$display} !important
  140. .is-hidden
  141. display: none !important
  142. .is-sr-only
  143. border: none !important
  144. clip: rect(0, 0, 0, 0) !important
  145. height: 0.01em !important
  146. overflow: hidden !important
  147. padding: 0 !important
  148. position: absolute !important
  149. white-space: nowrap !important
  150. width: 0.01em !important
  151. +mobile
  152. .is-hidden-mobile
  153. display: none !important
  154. +tablet
  155. .is-hidden-tablet
  156. display: none !important
  157. +tablet-only
  158. .is-hidden-tablet-only
  159. display: none !important
  160. +touch
  161. .is-hidden-touch
  162. display: none !important
  163. +desktop
  164. .is-hidden-desktop
  165. display: none !important
  166. +desktop-only
  167. .is-hidden-desktop-only
  168. display: none !important
  169. +widescreen
  170. .is-hidden-widescreen
  171. display: none !important
  172. +widescreen-only
  173. .is-hidden-widescreen-only
  174. display: none !important
  175. +fullhd
  176. .is-hidden-fullhd
  177. display: none !important
  178. .is-invisible
  179. visibility: hidden !important
  180. +mobile
  181. .is-invisible-mobile
  182. visibility: hidden !important
  183. +tablet
  184. .is-invisible-tablet
  185. visibility: hidden !important
  186. +tablet-only
  187. .is-invisible-tablet-only
  188. visibility: hidden !important
  189. +touch
  190. .is-invisible-touch
  191. visibility: hidden !important
  192. +desktop
  193. .is-invisible-desktop
  194. visibility: hidden !important
  195. +desktop-only
  196. .is-invisible-desktop-only
  197. visibility: hidden !important
  198. +widescreen
  199. .is-invisible-widescreen
  200. visibility: hidden !important
  201. +widescreen-only
  202. .is-invisible-widescreen-only
  203. visibility: hidden !important
  204. +fullhd
  205. .is-invisible-fullhd
  206. visibility: hidden !important
  207. // Other
  208. .is-marginless
  209. margin: 0 !important
  210. .is-paddingless
  211. padding: 0 !important
  212. .is-radiusless
  213. border-radius: 0 !important
  214. .is-shadowless
  215. box-shadow: none !important
  216. .is-unselectable
  217. @extend %unselectable
  218. .is-relative
  219. position: relative !important