Fix #3020: Add spacing helpers for all sides

css/bulma-rtl.css

@@ -1,4 +1,5 @@
 /*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */
+/* Bulma Utilities */
 @-webkit-keyframes spinAround {
   from {
     transform: rotate(0deg);
@@ -229,6 +230,7 @@ fieldset[disabled] .pagination-ellipsis {
   cursor: not-allowed;
 }
 
+/* Bulma Base */
 /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
 html,
 body,
@@ -374,7 +376,7 @@ a:hover {
 
 code {
   background-color: whitesmoke;
-  color: #f14668;
+  color: #da1039;
   font-size: 0.875em;
   font-weight: normal;
   padding: 0.25em 0.5em 0.25em;
@@ -448,6 +450,7 @@ table th {
   color: #363636;
 }
 
+/* Bulma Elements */
 .box {
   background-color: white;
   border-radius: 6px;
@@ -2589,6 +2592,10 @@ fieldset[disabled] .button {
   background-color: transparent;
 }
 
+.progress:indeterminate::-ms-fill {
+  animation-name: none;
+}
+
 .progress.is-small {
   height: 0.75rem;
 }
@@ -3213,6 +3220,7 @@ a.tag:hover {
   vertical-align: top;
 }
 
+/* Bulma Form */
 .input, .textarea, .select select {
   background-color: white;
   border-color: #dbdbdb;
@@ -3453,7 +3461,9 @@ fieldset[disabled] .select select:-ms-input-placeholder,
 
 .checkbox[disabled], .radio[disabled],
 fieldset[disabled] .checkbox,
-fieldset[disabled] .radio {
+fieldset[disabled] .radio,
+.checkbox input[disabled],
+.radio input[disabled] {
   color: #7a7a7a;
   cursor: not-allowed;
 }
@@ -4495,6 +4505,7 @@ fieldset[disabled] .select select:hover {
   font-size: 1.5rem;
 }
 
+/* Bulma Components */
 .breadcrumb {
   font-size: 1rem;
   white-space: nowrap;
@@ -4592,6 +4603,8 @@ fieldset[disabled] .select select:hover {
   color: #4a4a4a;
   max-width: 100%;
   position: relative;
+  border-radius: 0;
+  overflow: hidden;
 }
 
 .card-header {
@@ -6921,6 +6934,7 @@ label.panel-block:hover {
   font-size: 1.5rem;
 }
 
+/* Bulma Grid */
 .column {
   display: block;
   flex-basis: 0;
@@ -8809,6 +8823,7 @@ label.panel-block:hover {
   }
 }
 
+/* Bulma Helpers */
 .has-text-white {
   color: white !important;
 }
@@ -9145,6 +9160,222 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   background-color: #fafafa !important;
 }
 
+.is-flex-direction-row {
+  flex-direction: row !important;
+}
+
+.is-flex-direction-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.is-flex-direction-column {
+  flex-direction: column !important;
+}
+
+.is-flex-direction-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.is-flex-wrap-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.is-flex-wrap-wrap {
+  flex-wrap: wrap !important;
+}
+
+.is-flex-wrap-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.is-justify-content-flex-start {
+  justify-content: flex-start !important;
+}
+
+.is-justify-content-flex-end {
+  justify-content: flex-end !important;
+}
+
+.is-justify-content-center {
+  justify-content: center !important;
+}
+
+.is-justify-content-space-between {
+  justify-content: space-between !important;
+}
+
+.is-justify-content-space-around {
+  justify-content: space-around !important;
+}
+
+.is-justify-content-space-evenly {
+  justify-content: space-evenly !important;
+}
+
+.is-justify-content-start {
+  justify-content: start !important;
+}
+
+.is-justify-content-end {
+  justify-content: end !important;
+}
+
+.is-justify-content-left {
+  justify-content: left !important;
+}
+
+.is-justify-content-right {
+  justify-content: right !important;
+}
+
+.is-align-content-flex-start {
+  align-content: flex-start !important;
+}
+
+.is-align-content-flex-end {
+  align-content: flex-end !important;
+}
+
+.is-align-content-center {
+  align-content: center !important;
+}
+
+.is-align-content-space-between {
+  align-content: space-between !important;
+}
+
+.is-align-content-space-around {
+  align-content: space-around !important;
+}
+
+.is-align-content-space-evenly {
+  align-content: space-evenly !important;
+}
+
+.is-align-content-stretch {
+  align-content: stretch !important;
+}
+
+.is-align-content-start {
+  align-content: start !important;
+}
+
+.is-align-content-end {
+  align-content: end !important;
+}
+
+.is-align-content-baseline {
+  align-content: baseline !important;
+}
+
+.is-align-items-stretch {
+  align-items: stretch !important;
+}
+
+.is-align-items-flex-start {
+  align-items: flex-start !important;
+}
+
+.is-align-items-flex-end {
+  align-items: flex-end !important;
+}
+
+.is-align-items-center {
+  align-items: center !important;
+}
+
+.is-align-items-baseline {
+  align-items: baseline !important;
+}
+
+.is-align-items-start {
+  align-items: start !important;
+}
+
+.is-align-items-end {
+  align-items: end !important;
+}
+
+.is-align-items-self-start {
+  align-items: self-start !important;
+}
+
+.is-align-items-self-end {
+  align-items: self-end !important;
+}
+
+.is-align-self-auto {
+  align-self: auto !important;
+}
+
+.is-align-self-flex-start {
+  align-self: flex-start !important;
+}
+
+.is-align-self-flex-end {
+  align-self: flex-end !important;
+}
+
+.is-align-self-center {
+  align-self: center !important;
+}
+
+.is-align-self-baseline {
+  align-self: baseline !important;
+}
+
+.is-align-self-stretch {
+  align-self: stretch !important;
+}
+
+.is-flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.is-flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.is-flex-grow-2 {
+  flex-grow: 2 !important;
+}
+
+.is-flex-grow-3 {
+  flex-grow: 3 !important;
+}
+
+.is-flex-grow-4 {
+  flex-grow: 4 !important;
+}
+
+.is-flex-grow-5 {
+  flex-grow: 5 !important;
+}
+
+.is-flex-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.is-flex-shrink-1 {
+  flex-shrink: 1 !important;
+}
+
+.is-flex-shrink-2 {
+  flex-shrink: 2 !important;
+}
+
+.is-flex-shrink-3 {
+  flex-shrink: 3 !important;
+}
+
+.is-flex-shrink-4 {
+  flex-shrink: 4 !important;
+}
+
+.is-flex-shrink-5 {
+  flex-shrink: 5 !important;
+}
+
 .is-clearfix::after {
   clear: both;
   content: " ";
@@ -9167,6 +9398,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   box-shadow: none !important;
 }
 
+.is-clickable {
+  cursor: pointer !important;
+}
+
 .is-clipped {
   overflow: hidden !important;
 }
@@ -9183,6 +9418,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding: 0 !important;
 }
 
+.m-0 {
+  margin: 0 !important;
+}
+
 .mt-0 {
   margin-top: 0 !important;
 }
@@ -9209,6 +9448,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0 !important;
 }
 
+.m-1 {
+  margin: 0.25rem !important;
+}
+
 .mt-1 {
   margin-top: 0.25rem !important;
 }
@@ -9235,6 +9478,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0.25rem !important;
 }
 
+.m-2 {
+  margin: 0.5rem !important;
+}
+
 .mt-2 {
   margin-top: 0.5rem !important;
 }
@@ -9261,6 +9508,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0.5rem !important;
 }
 
+.m-3 {
+  margin: 0.75rem !important;
+}
+
 .mt-3 {
   margin-top: 0.75rem !important;
 }
@@ -9287,6 +9538,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0.75rem !important;
 }
 
+.m-4 {
+  margin: 1rem !important;
+}
+
 .mt-4 {
   margin-top: 1rem !important;
 }
@@ -9313,6 +9568,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 1rem !important;
 }
 
+.m-5 {
+  margin: 1.5rem !important;
+}
+
 .mt-5 {
   margin-top: 1.5rem !important;
 }
@@ -9339,6 +9598,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 1.5rem !important;
 }
 
+.m-6 {
+  margin: 3rem !important;
+}
+
 .mt-6 {
   margin-top: 3rem !important;
 }
@@ -9365,6 +9628,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 3rem !important;
 }
 
+.p-0 {
+  padding: 0 !important;
+}
+
 .pt-0 {
   padding-top: 0 !important;
 }
@@ -9391,6 +9658,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0 !important;
 }
 
+.p-1 {
+  padding: 0.25rem !important;
+}
+
 .pt-1 {
   padding-top: 0.25rem !important;
 }
@@ -9417,6 +9688,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0.25rem !important;
 }
 
+.p-2 {
+  padding: 0.5rem !important;
+}
+
 .pt-2 {
   padding-top: 0.5rem !important;
 }
@@ -9443,6 +9718,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0.5rem !important;
 }
 
+.p-3 {
+  padding: 0.75rem !important;
+}
+
 .pt-3 {
   padding-top: 0.75rem !important;
 }
@@ -9469,6 +9748,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0.75rem !important;
 }
 
+.p-4 {
+  padding: 1rem !important;
+}
+
 .pt-4 {
   padding-top: 1rem !important;
 }
@@ -9495,6 +9778,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 1rem !important;
 }
 
+.p-5 {
+  padding: 1.5rem !important;
+}
+
 .pt-5 {
   padding-top: 1.5rem !important;
 }
@@ -9521,6 +9808,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 1.5rem !important;
 }
 
+.p-6 {
+  padding: 3rem !important;
+}
+
 .pt-6 {
   padding-top: 3rem !important;
 }
@@ -10424,6 +10715,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   }
 }
 
+/* Bulma Layout */
 .hero {
   align-items: stretch;
   display: flex;

css/bulma.css

@@ -1,4 +1,5 @@
 /*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */
+/* Bulma Utilities */
 @-webkit-keyframes spinAround {
   from {
     transform: rotate(0deg);
@@ -229,6 +230,7 @@ fieldset[disabled] .pagination-ellipsis {
   cursor: not-allowed;
 }
 
+/* Bulma Base */
 /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
 html,
 body,
@@ -374,7 +376,7 @@ a:hover {
 
 code {
   background-color: whitesmoke;
-  color: #f14668;
+  color: #da1039;
   font-size: 0.875em;
   font-weight: normal;
   padding: 0.25em 0.5em 0.25em;
@@ -448,6 +450,7 @@ table th {
   color: #363636;
 }
 
+/* Bulma Elements */
 .box {
   background-color: white;
   border-radius: 6px;
@@ -2589,6 +2592,10 @@ fieldset[disabled] .button {
   background-color: transparent;
 }
 
+.progress:indeterminate::-ms-fill {
+  animation-name: none;
+}
+
 .progress.is-small {
   height: 0.75rem;
 }
@@ -3213,6 +3220,7 @@ a.tag:hover {
   vertical-align: top;
 }
 
+/* Bulma Form */
 .input, .textarea, .select select {
   background-color: white;
   border-color: #dbdbdb;
@@ -3453,7 +3461,9 @@ fieldset[disabled] .select select:-ms-input-placeholder,
 
 .checkbox[disabled], .radio[disabled],
 fieldset[disabled] .checkbox,
-fieldset[disabled] .radio {
+fieldset[disabled] .radio,
+.checkbox input[disabled],
+.radio input[disabled] {
   color: #7a7a7a;
   cursor: not-allowed;
 }
@@ -4495,6 +4505,7 @@ fieldset[disabled] .select select:hover {
   font-size: 1.5rem;
 }
 
+/* Bulma Components */
 .breadcrumb {
   font-size: 1rem;
   white-space: nowrap;
@@ -4592,6 +4603,8 @@ fieldset[disabled] .select select:hover {
   color: #4a4a4a;
   max-width: 100%;
   position: relative;
+  border-radius: 0;
+  overflow: hidden;
 }
 
 .card-header {
@@ -6921,6 +6934,7 @@ label.panel-block:hover {
   font-size: 1.5rem;
 }
 
+/* Bulma Grid */
 .column {
   display: block;
   flex-basis: 0;
@@ -8809,6 +8823,7 @@ label.panel-block:hover {
   }
 }
 
+/* Bulma Helpers */
 .has-text-white {
   color: white !important;
 }
@@ -9145,6 +9160,222 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   background-color: #fafafa !important;
 }
 
+.is-flex-direction-row {
+  flex-direction: row !important;
+}
+
+.is-flex-direction-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.is-flex-direction-column {
+  flex-direction: column !important;
+}
+
+.is-flex-direction-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.is-flex-wrap-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.is-flex-wrap-wrap {
+  flex-wrap: wrap !important;
+}
+
+.is-flex-wrap-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.is-justify-content-flex-start {
+  justify-content: flex-start !important;
+}
+
+.is-justify-content-flex-end {
+  justify-content: flex-end !important;
+}
+
+.is-justify-content-center {
+  justify-content: center !important;
+}
+
+.is-justify-content-space-between {
+  justify-content: space-between !important;
+}
+
+.is-justify-content-space-around {
+  justify-content: space-around !important;
+}
+
+.is-justify-content-space-evenly {
+  justify-content: space-evenly !important;
+}
+
+.is-justify-content-start {
+  justify-content: start !important;
+}
+
+.is-justify-content-end {
+  justify-content: end !important;
+}
+
+.is-justify-content-left {
+  justify-content: left !important;
+}
+
+.is-justify-content-right {
+  justify-content: right !important;
+}
+
+.is-align-content-flex-start {
+  align-content: flex-start !important;
+}
+
+.is-align-content-flex-end {
+  align-content: flex-end !important;
+}
+
+.is-align-content-center {
+  align-content: center !important;
+}
+
+.is-align-content-space-between {
+  align-content: space-between !important;
+}
+
+.is-align-content-space-around {
+  align-content: space-around !important;
+}
+
+.is-align-content-space-evenly {
+  align-content: space-evenly !important;
+}
+
+.is-align-content-stretch {
+  align-content: stretch !important;
+}
+
+.is-align-content-start {
+  align-content: start !important;
+}
+
+.is-align-content-end {
+  align-content: end !important;
+}
+
+.is-align-content-baseline {
+  align-content: baseline !important;
+}
+
+.is-align-items-stretch {
+  align-items: stretch !important;
+}
+
+.is-align-items-flex-start {
+  align-items: flex-start !important;
+}
+
+.is-align-items-flex-end {
+  align-items: flex-end !important;
+}
+
+.is-align-items-center {
+  align-items: center !important;
+}
+
+.is-align-items-baseline {
+  align-items: baseline !important;
+}
+
+.is-align-items-start {
+  align-items: start !important;
+}
+
+.is-align-items-end {
+  align-items: end !important;
+}
+
+.is-align-items-self-start {
+  align-items: self-start !important;
+}
+
+.is-align-items-self-end {
+  align-items: self-end !important;
+}
+
+.is-align-self-auto {
+  align-self: auto !important;
+}
+
+.is-align-self-flex-start {
+  align-self: flex-start !important;
+}
+
+.is-align-self-flex-end {
+  align-self: flex-end !important;
+}
+
+.is-align-self-center {
+  align-self: center !important;
+}
+
+.is-align-self-baseline {
+  align-self: baseline !important;
+}
+
+.is-align-self-stretch {
+  align-self: stretch !important;
+}
+
+.is-flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.is-flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.is-flex-grow-2 {
+  flex-grow: 2 !important;
+}
+
+.is-flex-grow-3 {
+  flex-grow: 3 !important;
+}
+
+.is-flex-grow-4 {
+  flex-grow: 4 !important;
+}
+
+.is-flex-grow-5 {
+  flex-grow: 5 !important;
+}
+
+.is-flex-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.is-flex-shrink-1 {
+  flex-shrink: 1 !important;
+}
+
+.is-flex-shrink-2 {
+  flex-shrink: 2 !important;
+}
+
+.is-flex-shrink-3 {
+  flex-shrink: 3 !important;
+}
+
+.is-flex-shrink-4 {
+  flex-shrink: 4 !important;
+}
+
+.is-flex-shrink-5 {
+  flex-shrink: 5 !important;
+}
+
 .is-clearfix::after {
   clear: both;
   content: " ";
@@ -9167,6 +9398,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   box-shadow: none !important;
 }
 
+.is-clickable {
+  cursor: pointer !important;
+}
+
 .is-clipped {
   overflow: hidden !important;
 }
@@ -9183,6 +9418,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding: 0 !important;
 }
 
+.m-0 {
+  margin: 0 !important;
+}
+
 .mt-0 {
   margin-top: 0 !important;
 }
@@ -9209,6 +9448,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0 !important;
 }
 
+.m-1 {
+  margin: 0.25rem !important;
+}
+
 .mt-1 {
   margin-top: 0.25rem !important;
 }
@@ -9235,6 +9478,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0.25rem !important;
 }
 
+.m-2 {
+  margin: 0.5rem !important;
+}
+
 .mt-2 {
   margin-top: 0.5rem !important;
 }
@@ -9261,6 +9508,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0.5rem !important;
 }
 
+.m-3 {
+  margin: 0.75rem !important;
+}
+
 .mt-3 {
   margin-top: 0.75rem !important;
 }
@@ -9287,6 +9538,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0.75rem !important;
 }
 
+.m-4 {
+  margin: 1rem !important;
+}
+
 .mt-4 {
   margin-top: 1rem !important;
 }
@@ -9313,6 +9568,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 1rem !important;
 }
 
+.m-5 {
+  margin: 1.5rem !important;
+}
+
 .mt-5 {
   margin-top: 1.5rem !important;
 }
@@ -9339,6 +9598,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 1.5rem !important;
 }
 
+.m-6 {
+  margin: 3rem !important;
+}
+
 .mt-6 {
   margin-top: 3rem !important;
 }
@@ -9365,6 +9628,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 3rem !important;
 }
 
+.p-0 {
+  padding: 0 !important;
+}
+
 .pt-0 {
   padding-top: 0 !important;
 }
@@ -9391,6 +9658,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0 !important;
 }
 
+.p-1 {
+  padding: 0.25rem !important;
+}
+
 .pt-1 {
   padding-top: 0.25rem !important;
 }
@@ -9417,6 +9688,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0.25rem !important;
 }
 
+.p-2 {
+  padding: 0.5rem !important;
+}
+
 .pt-2 {
   padding-top: 0.5rem !important;
 }
@@ -9443,6 +9718,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0.5rem !important;
 }
 
+.p-3 {
+  padding: 0.75rem !important;
+}
+
 .pt-3 {
   padding-top: 0.75rem !important;
 }
@@ -9469,6 +9748,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0.75rem !important;
 }
 
+.p-4 {
+  padding: 1rem !important;
+}
+
 .pt-4 {
   padding-top: 1rem !important;
 }
@@ -9495,6 +9778,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 1rem !important;
 }
 
+.p-5 {
+  padding: 1.5rem !important;
+}
+
 .pt-5 {
   padding-top: 1.5rem !important;
 }
@@ -9521,6 +9808,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 1.5rem !important;
 }
 
+.p-6 {
+  padding: 3rem !important;
+}
+
 .pt-6 {
   padding-top: 3rem !important;
 }
@@ -10424,6 +10715,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   }
 }
 
+/* Bulma Layout */
 .hero {
   align-items: stretch;
   display: flex;

docs/_includes/components/spacing-table.html

@@ -17,13 +17,23 @@
   <tbody>
     {% for shortcut in include.shortcuts %}
       {% for direction in include.directions %}
-        <tr>
+        {% if direction[0] == 'all' %}
-          <td><code>{{ shortcut[0] }}-{{ direction[0] }}</code></td>
+          <tr>
-          <td><code>{{ shortcut[1] }}{{ direction[1] }}</code></td>
+            <td><code>{{ shortcut[0] }}</code></td>
-          {% for value in include.values %}
+            <td><code>{{ shortcut[1] }}</code></td>
-            <td><code>{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}</code></td>
+            {% for value in include.values %}
-          {% endfor %}
+              <td><code>{{ shortcut[1] }}-{{ value[0] }}</code></td>
-        </tr>
+            {% endfor %}
+          </tr>
+        {% else %}
+          <tr>
+            <td><code>{{ shortcut[0] }}-{{ direction[0] }}</code></td>
+            <td><code>{{ shortcut[1] }}{{ direction[1] }}</code></td>
+            {% for value in include.values %}
+              <td><code>{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}</code></td>
+            {% endfor %}
+          </tr>
+        {% endif %}
       {% endfor %}
 
       <tr>

docs/documentation/helpers/spacing-helpers.html

@@ -12,6 +12,7 @@ shortcuts:
   margin: m
   padding: p
 directions:
+  all: a
   top: t
   right: r
   bottom: b

sass/helpers/spacing.sass

@@ -12,6 +12,9 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
 
 @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}

sass/utilities/_all.sass

@@ -3,7 +3,7 @@
 
 @import "initial-variables.sass"
 @import "functions.sass"
-@import "derived-variables.scss"
+@import "derived-variables.sass"
 @import "animations.sass"
 @import "mixins.sass"
 @import "controls.sass"

test/sass/override.scss

@@ -32,5 +32,10 @@ $custom-colors: (
   "lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark)
 );
 
+$spacing-shortcuts: ("margin": "mg");
+$spacing-horizontal: "h";
+$spacing-vertical: null;
+$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);
+
 // Import the rest of Bulma
 @import "../../bulma";