Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

helpers.sass 5.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  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-semibold
  93. font-weight: $weight-semibold !important
  94. .has-text-weight-bold
  95. font-weight: $weight-bold !important
  96. .is-family-primary
  97. font-family: $family-primary !important
  98. .is-family-secondary
  99. font-family: $family-secondary !important
  100. .is-family-sans-serif
  101. font-family: $family-sans-serif !important
  102. .is-family-monospace
  103. font-family: $family-monospace !important
  104. .is-family-code
  105. font-family: $family-code !important
  106. // Visibility
  107. $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
  108. @each $display in $displays
  109. .is-#{$display}
  110. display: #{$display} !important
  111. +mobile
  112. .is-#{$display}-mobile
  113. display: #{$display} !important
  114. +tablet
  115. .is-#{$display}-tablet
  116. display: #{$display} !important
  117. +tablet-only
  118. .is-#{$display}-tablet-only
  119. display: #{$display} !important
  120. +touch
  121. .is-#{$display}-touch
  122. display: #{$display} !important
  123. +desktop
  124. .is-#{$display}-desktop
  125. display: #{$display} !important
  126. +desktop-only
  127. .is-#{$display}-desktop-only
  128. display: #{$display} !important
  129. +widescreen
  130. .is-#{$display}-widescreen
  131. display: #{$display} !important
  132. +widescreen-only
  133. .is-#{$display}-widescreen-only
  134. display: #{$display} !important
  135. +fullhd
  136. .is-#{$display}-fullhd
  137. display: #{$display} !important
  138. .is-hidden
  139. display: none !important
  140. .is-sr-only
  141. border: none !important
  142. clip: rect(0, 0, 0, 0) !important
  143. height: 0.01em !important
  144. overflow: hidden !important
  145. padding: 0 !important
  146. position: absolute !important
  147. white-space: nowrap !important
  148. width: 0.01em !important
  149. +mobile
  150. .is-hidden-mobile
  151. display: none !important
  152. +tablet
  153. .is-hidden-tablet
  154. display: none !important
  155. +tablet-only
  156. .is-hidden-tablet-only
  157. display: none !important
  158. +touch
  159. .is-hidden-touch
  160. display: none !important
  161. +desktop
  162. .is-hidden-desktop
  163. display: none !important
  164. +desktop-only
  165. .is-hidden-desktop-only
  166. display: none !important
  167. +widescreen
  168. .is-hidden-widescreen
  169. display: none !important
  170. +widescreen-only
  171. .is-hidden-widescreen-only
  172. display: none !important
  173. +fullhd
  174. .is-hidden-fullhd
  175. display: none !important
  176. .is-invisible
  177. visibility: hidden !important
  178. +mobile
  179. .is-invisible-mobile
  180. visibility: hidden !important
  181. +tablet
  182. .is-invisible-tablet
  183. visibility: hidden !important
  184. +tablet-only
  185. .is-invisible-tablet-only
  186. visibility: hidden !important
  187. +touch
  188. .is-invisible-touch
  189. visibility: hidden !important
  190. +desktop
  191. .is-invisible-desktop
  192. visibility: hidden !important
  193. +desktop-only
  194. .is-invisible-desktop-only
  195. visibility: hidden !important
  196. +widescreen
  197. .is-invisible-widescreen
  198. visibility: hidden !important
  199. +widescreen-only
  200. .is-invisible-widescreen-only
  201. visibility: hidden !important
  202. +fullhd
  203. .is-invisible-fullhd
  204. visibility: hidden !important
  205. // Other
  206. .is-marginless
  207. margin: 0 !important
  208. .is-paddingless
  209. padding: 0 !important
  210. .is-radiusless
  211. border-radius: 0 !important
  212. .is-shadowless
  213. box-shadow: none !important
  214. .is-unselectable
  215. @extend %unselectable