Skip to content

Instantly share code, notes, and snippets.

@mralexho

mralexho/spacing.patch

Created July 7, 2021 20:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mralexho/5b6b7727272f3c7ec853af6fa58c73e1 to your computer and use it in GitHub Desktop.
Save mralexho/5b6b7727272f3c7ec853af6fa58c73e1 to your computer and use it in GitHub Desktop.
Download ZIP
adds responsive spacing to bulma
Raw
spacing.patch
--- node_modules/bulma/sass/helpers/spacing.sass 1985-10-26 04:15:00.000000000 -0400
+++ patches/spacing.sass 2021-07-07 16:32:03.000000000 -0400
@@ -1,8 +1,8 @@
.is-marginless
- margin: 0 !important
+ margin: 0 !important
.is-paddingless
- padding: 0 !important
+ padding: 0 !important
$spacing-shortcuts: ("margin": "m", "padding": "p") !default
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
@@ -11,21 +11,192 @@
$spacing-values: ("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
+ +mobile
@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
+ // All directions
+ .#{$shortcut}-#{$name}-mobile
+ #{$property}: $value !important
+ // Cardinal directions
+ @each $direction, $suffix in $spacing-directions
+ .#{$shortcut}#{$suffix}-#{$name}-mobile
+ #{$property}-#{$direction}: $value !important
+ // Horizontal axis
+ @if $spacing-horizontal != null
+ .#{$shortcut}#{$spacing-horizontal}-#{$name}-mobile
+ #{$property}-left: $value !important
+ #{$property}-right: $value !important
+ // Vertical axis
+ @if $spacing-vertical != null
+ .#{$shortcut}#{$spacing-vertical}-#{$name}-mobile
+ #{$property}-top: $value !important
+ #{$property}-bottom: $value !important
+ +tablet
+ @each $name, $value in $spacing-values
+ // All directions
+ .#{$shortcut}-#{$name}-tablet
+ #{$property}: $value !important
+ // Cardinal directions
+ @each $direction, $suffix in $spacing-directions
+ .#{$shortcut}#{$suffix}-#{$name}-tablet
+ #{$property}-#{$direction}: $value !important
+ // Horizontal axis
+ @if $spacing-horizontal != null
+ .#{$shortcut}#{$spacing-horizontal}-#{$name}-tablet
+ #{$property}-left: $value !important
+ #{$property}-right: $value !important
+ // Vertical axis
+ @if $spacing-vertical != null
+ .#{$shortcut}#{$spacing-vertical}-#{$name}-tablet
+ #{$property}-top: $value !important
+ #{$property}-bottom: $value !important
+ +tablet-only
+ @each $name, $value in $spacing-values
+ // All directions
+ .#{$shortcut}-#{$name}-tablet-only
+ #{$property}: $value !important
+ // Cardinal directions
+ @each $direction, $suffix in $spacing-directions
+ .#{$shortcut}#{$suffix}-#{$name}-tablet-only
+ #{$property}-#{$direction}: $value !important
+ // Horizontal axis
+ @if $spacing-horizontal != null
+ .#{$shortcut}#{$spacing-horizontal}-#{$name}-tablet-only
+ #{$property}-left: $value !important
+ #{$property}-right: $value !important
+ // Vertical axis
+ @if $spacing-vertical != null
+ .#{$shortcut}#{$spacing-vertical}-#{$name}-tablet-only
+ #{$property}-top: $value !important
+ #{$property}-bottom: $value !important
+ +touch
+ @each $name, $value in $spacing-values
+ // All directions
+ .#{$shortcut}-#{$name}-touch
+ #{$property}: $value !important
+ // Cardinal directions
+ @each $direction, $suffix in $spacing-directions
+ .#{$shortcut}#{$suffix}-#{$name}-touch
+ #{$property}-#{$direction}: $value !important
+ // Horizontal axis
+ @if $spacing-horizontal != null
+ .#{$shortcut}#{$spacing-horizontal}-#{$name}-touch
+ #{$property}-left: $value !important
+ #{$property}-right: $value !important
+ // Vertical axis
+ @if $spacing-vertical != null
+ .#{$shortcut}#{$spacing-vertical}-#{$name}-touch
+ #{$property}-top: $value !important
+ #{$property}-bottom: $value !important
+ +desktop
+ @each $name, $value in $spacing-values
+ // All directions
+ .#{$shortcut}-#{$name}-desktop
+ #{$property}: $value !important
+ // Cardinal directions
+ @each $direction, $suffix in $spacing-directions
+ .#{$shortcut}#{$suffix}-#{$name}-desktop
+ #{$property}-#{$direction}: $value !important
+ // Horizontal axis
+ @if $spacing-horizontal != null
+ .#{$shortcut}#{$spacing-horizontal}-#{$name}-desktop
+ #{$property}-left: $value !important
+ #{$property}-right: $value !important
+ // Vertical axis
+ @if $spacing-vertical != null
+ .#{$shortcut}#{$spacing-vertical}-#{$name}-desktop
+ #{$property}-top: $value !important
+ #{$property}-bottom: $value !important
+ +desktop-only
+ @each $name, $value in $spacing-values
+ // All directions
+ .#{$shortcut}-#{$name}-desktop-only
+ #{$property}: $value !important
+ // Cardinal directions
+ @each $direction, $suffix in $spacing-directions
+ .#{$shortcut}#{$suffix}-#{$name}-desktop-only
+ #{$property}-#{$direction}: $value !important
+ // Horizontal axis
+ @if $spacing-horizontal != null
+ .#{$shortcut}#{$spacing-horizontal}-#{$name}-desktop-only
+ #{$property}-left: $value !important
+ #{$property}-right: $value !important
+ // Vertical axis
+ @if $spacing-vertical != null
+ .#{$shortcut}#{$spacing-vertical}-#{$name}-desktop-only
+ #{$property}-top: $value !important
+ #{$property}-bottom: $value !important
+ +widescreen
+ @each $name, $value in $spacing-values
+ // All directions
+ .#{$shortcut}-#{$name}-widescreen
+ #{$property}: $value !important
+ // Cardinal directions
+ @each $direction, $suffix in $spacing-directions
+ .#{$shortcut}#{$suffix}-#{$name}-widescreen
+ #{$property}-#{$direction}: $value !important
+ // Horizontal axis
+ @if $spacing-horizontal != null
+ .#{$shortcut}#{$spacing-horizontal}-#{$name}-widescreen
+ #{$property}-left: $value !important
+ #{$property}-right: $value !important
+ // Vertical axis
+ @if $spacing-vertical != null
+ .#{$shortcut}#{$spacing-vertical}-#{$name}-widescreen
+ #{$property}-top: $value !important
+ #{$property}-bottom: $value !important
+ +widescreen-only
+ @each $name, $value in $spacing-values
+ // All directions
+ .#{$shortcut}-#{$name}-widescreen-only
+ #{$property}: $value !important
+ // Cardinal directions
+ @each $direction, $suffix in $spacing-directions
+ .#{$shortcut}#{$suffix}-#{$name}-widescreen-only
+ #{$property}-#{$direction}: $value !important
+ // Horizontal axis
+ @if $spacing-horizontal != null
+ .#{$shortcut}#{$spacing-horizontal}-#{$name}-widescreen-only
+ #{$property}-left: $value !important
+ #{$property}-right: $value !important
+ // Vertical axis
+ @if $spacing-vertical != null
+ .#{$shortcut}#{$spacing-vertical}-#{$name}-widescreen-only
+ #{$property}-top: $value !important
+ #{$property}-bottom: $value !important
+ +fullhd
+ @each $name, $value in $spacing-values
+ // All directions
+ .#{$shortcut}-#{$name}-fullhd
+ #{$property}: $value !important
+ // Cardinal directions
+ @each $direction, $suffix in $spacing-directions
+ .#{$shortcut}#{$suffix}-#{$name}-fullhd
+ #{$property}-#{$direction}: $value !important
+ // Horizontal axis
+ @if $spacing-horizontal != null
+ .#{$shortcut}#{$spacing-horizontal}-#{$name}-fullhd
+ #{$property}-left: $value !important
+ #{$property}-right: $value !important
+ // Vertical axis
+ @if $spacing-vertical != null
+ .#{$shortcut}#{$spacing-vertical}-#{$name}-fullhd
+ #{$property}-top: $value !important
+ #{$property}-bottom: $value !important
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment