mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
50fb74d6c8
* Add secondary and tertiary font families to derived-variables.sass * Add font family helpers to helpers.sass * Add has-font-* to typography-helpers.html * Correct number of font family helpers in typography-helpers.html * Remove $family-tertiary, change has-font to is-family, and update docs.
277 lines
5.5 KiB
Sass
277 lines
5.5 KiB
Sass
// Float
|
|
|
|
.is-clearfix
|
|
+clearfix
|
|
|
|
.is-pulled-left
|
|
float: left !important
|
|
|
|
.is-pulled-right
|
|
float: right !important
|
|
|
|
// Overflow
|
|
|
|
.is-clipped
|
|
overflow: hidden !important
|
|
|
|
// Overlay
|
|
|
|
.is-overlay
|
|
@extend %overlay
|
|
|
|
// Typography
|
|
|
|
=typography-size($target:'')
|
|
@each $size in $sizes
|
|
$i: index($sizes, $size)
|
|
.is-size-#{$i}#{if($target == '', '', '-' + $target)}
|
|
font-size: $size !important
|
|
|
|
+typography-size()
|
|
|
|
+mobile
|
|
+typography-size('mobile')
|
|
|
|
+tablet
|
|
+typography-size('tablet')
|
|
|
|
+touch
|
|
+typography-size('touch')
|
|
|
|
+desktop
|
|
+typography-size('desktop')
|
|
|
|
+widescreen
|
|
+typography-size('widescreen')
|
|
|
|
+fullhd
|
|
+typography-size('fullhd')
|
|
|
|
$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
|
|
|
|
@each $alignment, $text-align in $alignments
|
|
.has-text-#{$alignment}
|
|
text-align: #{$text-align} !important
|
|
|
|
@each $alignment, $text-align in $alignments
|
|
+mobile
|
|
.has-text-#{$alignment}-mobile
|
|
text-align: #{$text-align} !important
|
|
+tablet
|
|
.has-text-#{$alignment}-tablet
|
|
text-align: #{$text-align} !important
|
|
+tablet-only
|
|
.has-text-#{$alignment}-tablet-only
|
|
text-align: #{$text-align} !important
|
|
+touch
|
|
.has-text-#{$alignment}-touch
|
|
text-align: #{$text-align} !important
|
|
+desktop
|
|
.has-text-#{$alignment}-desktop
|
|
text-align: #{$text-align} !important
|
|
+desktop-only
|
|
.has-text-#{$alignment}-desktop-only
|
|
text-align: #{$text-align} !important
|
|
+widescreen
|
|
.has-text-#{$alignment}-widescreen
|
|
text-align: #{$text-align} !important
|
|
+widescreen-only
|
|
.has-text-#{$alignment}-widescreen-only
|
|
text-align: #{$text-align} !important
|
|
+fullhd
|
|
.has-text-#{$alignment}-fullhd
|
|
text-align: #{$text-align} !important
|
|
|
|
.is-capitalized
|
|
text-transform: capitalize !important
|
|
|
|
.is-lowercase
|
|
text-transform: lowercase !important
|
|
|
|
.is-uppercase
|
|
text-transform: uppercase !important
|
|
|
|
.is-italic
|
|
font-style: italic !important
|
|
|
|
@each $name, $pair in $colors
|
|
$color: nth($pair, 1)
|
|
.has-text-#{$name}
|
|
color: $color !important
|
|
a.has-text-#{$name}
|
|
&:hover,
|
|
&:focus
|
|
color: darken($color, 10%) !important
|
|
.has-background-#{$name}
|
|
background-color: $color !important
|
|
|
|
@each $name, $shade in $shades
|
|
.has-text-#{$name}
|
|
color: $shade !important
|
|
.has-background-#{$name}
|
|
background-color: $shade !important
|
|
|
|
.has-text-weight-light
|
|
font-weight: $weight-light !important
|
|
.has-text-weight-normal
|
|
font-weight: $weight-normal !important
|
|
.has-text-weight-semibold
|
|
font-weight: $weight-semibold !important
|
|
.has-text-weight-bold
|
|
font-weight: $weight-bold !important
|
|
|
|
.is-family-primary
|
|
font-family: $family-primary !important
|
|
|
|
.is-family-secondary
|
|
font-family: $family-secondary !important
|
|
|
|
.is-family-sans-serif
|
|
font-family: $family-sans-serif !important
|
|
|
|
.is-family-monospace
|
|
font-family: $family-monospace !important
|
|
|
|
.is-family-code
|
|
font-family: $family-code !important
|
|
|
|
// Visibility
|
|
|
|
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
|
|
|
@each $display in $displays
|
|
.is-#{$display}
|
|
display: #{$display} !important
|
|
+mobile
|
|
.is-#{$display}-mobile
|
|
display: #{$display} !important
|
|
+tablet
|
|
.is-#{$display}-tablet
|
|
display: #{$display} !important
|
|
+tablet-only
|
|
.is-#{$display}-tablet-only
|
|
display: #{$display} !important
|
|
+touch
|
|
.is-#{$display}-touch
|
|
display: #{$display} !important
|
|
+desktop
|
|
.is-#{$display}-desktop
|
|
display: #{$display} !important
|
|
+desktop-only
|
|
.is-#{$display}-desktop-only
|
|
display: #{$display} !important
|
|
+widescreen
|
|
.is-#{$display}-widescreen
|
|
display: #{$display} !important
|
|
+widescreen-only
|
|
.is-#{$display}-widescreen-only
|
|
display: #{$display} !important
|
|
+fullhd
|
|
.is-#{$display}-fullhd
|
|
display: #{$display} !important
|
|
|
|
.is-hidden
|
|
display: none !important
|
|
|
|
.is-sr-only
|
|
border: none !important
|
|
clip: rect(0, 0, 0, 0) !important
|
|
height: 0.01em !important
|
|
overflow: hidden !important
|
|
padding: 0 !important
|
|
position: absolute !important
|
|
white-space: nowrap !important
|
|
width: 0.01em !important
|
|
|
|
+mobile
|
|
.is-hidden-mobile
|
|
display: none !important
|
|
|
|
+tablet
|
|
.is-hidden-tablet
|
|
display: none !important
|
|
|
|
+tablet-only
|
|
.is-hidden-tablet-only
|
|
display: none !important
|
|
|
|
+touch
|
|
.is-hidden-touch
|
|
display: none !important
|
|
|
|
+desktop
|
|
.is-hidden-desktop
|
|
display: none !important
|
|
|
|
+desktop-only
|
|
.is-hidden-desktop-only
|
|
display: none !important
|
|
|
|
+widescreen
|
|
.is-hidden-widescreen
|
|
display: none !important
|
|
|
|
+widescreen-only
|
|
.is-hidden-widescreen-only
|
|
display: none !important
|
|
|
|
+fullhd
|
|
.is-hidden-fullhd
|
|
display: none !important
|
|
|
|
.is-invisible
|
|
visibility: hidden !important
|
|
|
|
+mobile
|
|
.is-invisible-mobile
|
|
visibility: hidden !important
|
|
|
|
+tablet
|
|
.is-invisible-tablet
|
|
visibility: hidden !important
|
|
|
|
+tablet-only
|
|
.is-invisible-tablet-only
|
|
visibility: hidden !important
|
|
|
|
+touch
|
|
.is-invisible-touch
|
|
visibility: hidden !important
|
|
|
|
+desktop
|
|
.is-invisible-desktop
|
|
visibility: hidden !important
|
|
|
|
+desktop-only
|
|
.is-invisible-desktop-only
|
|
visibility: hidden !important
|
|
|
|
+widescreen
|
|
.is-invisible-widescreen
|
|
visibility: hidden !important
|
|
|
|
+widescreen-only
|
|
.is-invisible-widescreen-only
|
|
visibility: hidden !important
|
|
|
|
+fullhd
|
|
.is-invisible-fullhd
|
|
visibility: hidden !important
|
|
|
|
// Other
|
|
|
|
.is-marginless
|
|
margin: 0 !important
|
|
|
|
.is-paddingless
|
|
padding: 0 !important
|
|
|
|
.is-radiusless
|
|
border-radius: 0 !important
|
|
|
|
.is-shadowless
|
|
box-shadow: none !important
|
|
|
|
.is-unselectable
|
|
@extend %unselectable
|