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.

mixins.sass 5.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. @import "initial-variables"
  2. =clearfix
  3. &::after
  4. clear: both
  5. content: " "
  6. display: table
  7. =center($width, $height: 0)
  8. position: absolute
  9. @if $height != 0
  10. left: calc(50% - (#{$width} / 2))
  11. top: calc(50% - (#{$height} / 2))
  12. @else
  13. left: calc(50% - (#{$width} / 2))
  14. top: calc(50% - (#{$width} / 2))
  15. =fa($size, $dimensions)
  16. display: inline-block
  17. font-size: $size
  18. height: $dimensions
  19. line-height: $dimensions
  20. text-align: center
  21. vertical-align: top
  22. width: $dimensions
  23. =hamburger($dimensions)
  24. cursor: pointer
  25. display: block
  26. height: $dimensions
  27. position: relative
  28. width: $dimensions
  29. span
  30. background-color: currentColor
  31. display: block
  32. height: 1px
  33. left: calc(50% - 8px)
  34. position: absolute
  35. transform-origin: center
  36. transition-duration: $speed
  37. transition-property: background-color, opacity, transform
  38. transition-timing-function: $easing
  39. width: 16px
  40. &:nth-child(1)
  41. top: calc(50% - 6px)
  42. &:nth-child(2)
  43. top: calc(50% - 1px)
  44. &:nth-child(3)
  45. top: calc(50% + 4px)
  46. &:hover
  47. background-color: rgba(black, 0.05)
  48. // Modifers
  49. &.is-active
  50. span
  51. &:nth-child(1)
  52. transform: translateY(5px) rotate(45deg)
  53. &:nth-child(2)
  54. opacity: 0
  55. &:nth-child(3)
  56. transform: translateY(-5px) rotate(-45deg)
  57. =overflow-touch
  58. -webkit-overflow-scrolling: touch
  59. =placeholder
  60. $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
  61. @each $placeholder in $placeholders
  62. &:#{$placeholder}-placeholder
  63. @content
  64. // Responsiveness
  65. =from($device)
  66. @media screen and (min-width: $device)
  67. @content
  68. =until($device)
  69. @media screen and (max-width: $device - 1px)
  70. @content
  71. =mobile
  72. @media screen and (max-width: $tablet - 1px)
  73. @content
  74. =tablet
  75. @media screen and (min-width: $tablet), print
  76. @content
  77. =tablet-only
  78. @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
  79. @content
  80. =touch
  81. @media screen and (max-width: $desktop - 1px)
  82. @content
  83. =desktop
  84. @media screen and (min-width: $desktop)
  85. @content
  86. =desktop-only
  87. @if $widescreen-enabled
  88. @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
  89. @content
  90. =until-widescreen
  91. @if $widescreen-enabled
  92. @media screen and (max-width: $widescreen - 1px)
  93. @content
  94. =widescreen
  95. @if $widescreen-enabled
  96. @media screen and (min-width: $widescreen)
  97. @content
  98. =widescreen-only
  99. @if $widescreen-enabled and $fullhd-enabled
  100. @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
  101. @content
  102. =until-fullhd
  103. @if $fullhd-enabled
  104. @media screen and (max-width: $fullhd - 1px)
  105. @content
  106. =fullhd
  107. @if $fullhd-enabled
  108. @media screen and (min-width: $fullhd)
  109. @content
  110. // Placeholders
  111. =unselectable
  112. -webkit-touch-callout: none
  113. -webkit-user-select: none
  114. -moz-user-select: none
  115. -ms-user-select: none
  116. user-select: none
  117. %unselectable
  118. +unselectable
  119. =arrow($color: transparent)
  120. border: 3px solid $color
  121. border-radius: 2px
  122. border-right: 0
  123. border-top: 0
  124. content: " "
  125. display: block
  126. height: 0.625em
  127. margin-top: -0.4375em
  128. pointer-events: none
  129. position: absolute
  130. top: 50%
  131. transform: rotate(-45deg)
  132. transform-origin: center
  133. width: 0.625em
  134. %arrow
  135. +arrow
  136. =block($spacing: $block-spacing)
  137. &:not(:last-child)
  138. margin-bottom: $spacing
  139. %block
  140. +block
  141. =delete
  142. @extend %unselectable
  143. -moz-appearance: none
  144. -webkit-appearance: none
  145. background-color: rgba($black, 0.2)
  146. border: none
  147. border-radius: $radius-rounded
  148. cursor: pointer
  149. pointer-events: auto
  150. display: inline-block
  151. flex-grow: 0
  152. flex-shrink: 0
  153. font-size: 0
  154. height: 20px
  155. max-height: 20px
  156. max-width: 20px
  157. min-height: 20px
  158. min-width: 20px
  159. outline: none
  160. position: relative
  161. vertical-align: top
  162. width: 20px
  163. &::before,
  164. &::after
  165. background-color: $white
  166. content: ""
  167. display: block
  168. left: 50%
  169. position: absolute
  170. top: 50%
  171. transform: translateX(-50%) translateY(-50%) rotate(45deg)
  172. transform-origin: center center
  173. &::before
  174. height: 2px
  175. width: 50%
  176. &::after
  177. height: 50%
  178. width: 2px
  179. &:hover,
  180. &:focus
  181. background-color: rgba($black, 0.3)
  182. &:active
  183. background-color: rgba($black, 0.4)
  184. // Sizes
  185. &.is-small
  186. height: 16px
  187. max-height: 16px
  188. max-width: 16px
  189. min-height: 16px
  190. min-width: 16px
  191. width: 16px
  192. &.is-medium
  193. height: 24px
  194. max-height: 24px
  195. max-width: 24px
  196. min-height: 24px
  197. min-width: 24px
  198. width: 24px
  199. &.is-large
  200. height: 32px
  201. max-height: 32px
  202. max-width: 32px
  203. min-height: 32px
  204. min-width: 32px
  205. width: 32px
  206. %delete
  207. +delete
  208. =loader
  209. animation: spinAround 500ms infinite linear
  210. border: 2px solid $grey-lighter
  211. border-radius: $radius-rounded
  212. border-right-color: transparent
  213. border-top-color: transparent
  214. content: ""
  215. display: block
  216. height: 1em
  217. position: relative
  218. width: 1em
  219. %loader
  220. +loader
  221. =overlay($offset: 0)
  222. bottom: $offset
  223. left: $offset
  224. position: absolute
  225. right: $offset
  226. top: $offset
  227. %overlay
  228. +overlay