node_modules/bulma/sass/utilities/mixins.sass

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