Bulma's CSS sets padding atttribute to auto which is invalid

nandac commented 1 year ago

Is it about Bulma or about the Docs? Bulma Is it a bug/feature/question or do you need help? Bug

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version [0.9.3] My browser is: Google Chrome I am sure this issue is not a duplicate? Yes

Description

Bulma is a great CSS framework and I would like to take this opportunity to thank the developers.

When I validated the CSS for my website through the W3c validator there were several values in bulma.css and bulma-rtl.css that have padding values set to auto which is considered an error by the validator. I am interested in how this could be fixed so that I can validate the CSS in the W3C validator without errors.

Steps to Reproduce

Validate the CSS the w3c validator for CSS.

Expected behavior

I should see no errors when validating CSS.

Actual behavior

Here is a link to the actual results when validating the CSS: https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fswanlotus.netlify.app%2Ftheme%2Fcss%2Fswanlotus.css&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en#errors

miawinter98 commented 1 year ago

Noticed this myself today, it's now the only errors on my site. Not a huge problem and maybe there is some IE6 behavior or whatever that relies on it, but it would be nice if it would be fixed if possible (I like having no red labels on the validator)

Gerarddus commented 1 year ago

In Firefox this problem throws a lot of errors and that is annoying:

Error in parsing value for ‘padding’. Declaration dropped. Error in parsing value for ‘padding-top’. Declaration dropped. Error in parsing value for ‘padding-right’. Declaration dropped. Error in parsing value for ‘padding-bottom’. Declaration dropped. etc.

In spacing.sass the problem is caused by generating the css based on

$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default

While "auto" is valid for margin, it is not for padding.

Gerarddus commented 1 year ago

My ugly fix which is not worthy of a pull request :D

.is-marginless
  margin: 0 !important

.is-paddingless
  padding: 0 !important

$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-margin: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default
$spacing-values-padding: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default
$spacing-values: () !default

@each $property, $shortcut in $spacing-shortcuts
  @if $shortcut == "m" 
    $spacing-values: $spacing-values-margin
  @else
    $spacing-values: $spacing-values-padding

  @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

jgthms / bulma