library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added auto value and breakpoints

Browse Source 
Added mixin to generate the classes - renamed to use the .has-(padding/margin) naming convention to match other elements within bulma but easy enough to change back.
Added an auto option to the values and wrapped calls to the mixin into breakpoints from utilities/mixins.scss
This commit is contained in:
Glen Kelley 2020-11-05 12:58:06 +00:00 committed by GitHub
parent 734f2e988c
commit 79819c23e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
sass/helpers/spacing.sass
View File

@ -8,24 +8,50 @@ $spacing-shortcuts: ("margin": "m", "padding": "p") !default
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
$spacing-horizontal: "x" !default
$spacing-vertical: "y" !default
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default
$spacing-values: ("auto": "auto", "0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default
@each $property, $shortcut in $spacing-shortcuts
@each $name, $value in $spacing-values
// All directions
.#{$shortcut}-#{$name}
#{$property}: $value !important
// Cardinal directions
@each $direction, $suffix in $spacing-directions
.#{$shortcut}#{$suffix}-#{$name}
#{$property}-#{$direction}: $value !important
// Horizontal axis
@if $spacing-horizontal != null
.#{$shortcut}#{$spacing-horizontal}-#{$name}
#{$property}-left: $value !important
#{$property}-right: $value !important
// Vertical axis
@if $spacing-vertical != null
.#{$shortcut}#{$spacing-vertical}-#{$name}
#{$property}-top: $value !important
#{$property}-bottom: $value !important
=get-spacing-styles($mode)
@each $property, $shortcut in $spacing-shortcuts
@each $name, $value in $spacing-values
.has-#{$property}-#{$name}#{$mode}
#{$property}: $value !important
@each $direction, $suffix in $spacing-directions
.has-#{$property}-#{$direction}-#{$name}#{$mode}
#{$property}-#{$direction}: $value !important
@if $spacing-horizontal != null
.has-#{$property}-horizontal-#{$name}#{$mode}
#{$property}-left: $value !important
#{$property}-right: $value !important
@if $spacing-vertical != null
.has-#{$property}-vertical-#{$name}#{$mode}
#{$property}-top: $value !important
#{$property}-bottom: $value !important
+get-spacing-styles("")
+mobile
+get-spacing-styles("-mobile")
+tablet
+get-spacing-styles("-tablet")
+tablet-only
+get-spacing-styles("-tablet-only")
+touch
+get-spacing-styles("-touch")
+desktop
+get-spacing-styles("-desktop")
+desktop-only
+get-spacing-styles("-desktop-only")
+widescreen
+get-spacing-styles("-widescreen")
+widescreen-only
+get-spacing-styles("-widescreen-only")
+fullhd
+get-spacing-styles("-fullhd")