public/vendors/bulma/sass/base/helpers.sass

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