update utils, use important

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index 64e3555efe95bd463fe71bda815450e5df0ca465..d630874a996b4ab4395c6e7d975a381a9010ca99 100644 (file)
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -18,65 +18,74 @@ Assign `margin` or `padding` to an element or a subset of it's sides with shorth
 ### Margin
 
 {% highlight scss %}
-.m-a-0 { margin:        0; }
-.m-t-0 { margin-top:    0; }
-.m-r-0 { margin-right:  0; }
-.m-b-0 { margin-bottom: 0; }
-.m-l-0 { margin-left:   0; }
-
-.m-a { margin:        $spacer; }
-.m-t { margin-top:    $spacer-y; }
-.m-r { margin-right:  $spacer-x; }
-.m-b { margin-bottom: $spacer-y; }
-.m-l { margin-left:   $spacer-x; }
-.m-x { margin-right:  $spacer-x; margin-left: $spacer-x; }
-.m-y { margin-top:    $spacer-y; margin-bottom: $spacer-y; }
-
-.m-t-md { margin-top:    ($spacer-y * 1.5); }
-.m-r-md { margin-right:  ($spacer-y * 1.5); }
-.m-b-md { margin-bottom: ($spacer-y * 1.5); }
-.m-l-md { margin-left:   ($spacer-y * 1.5); }
-.m-x-md { margin-right:  ($spacer-x * 1.5); margin-left:   ($spacer-x * 1.5); }
-.m-y-md { margin-top:    ($spacer-y * 1.5); margin-bottom: ($spacer-y * 1.5); }
-
-.m-t-lg { margin-top:    ($spacer-y * 3); }
-.m-r-lg { margin-right:  ($spacer-y * 3); }
-.m-b-lg { margin-bottom: ($spacer-y * 3); }
-.m-l-lg { margin-left:   ($spacer-y * 3); }
-.m-x-lg { margin-right:  ($spacer-x * 3); margin-left:   ($spacer-x * 3); }
-.m-y-lg { margin-top:    ($spacer-y * 3); margin-bottom: ($spacer-y * 3); }
+.m-a-0 { margin:        0 !important; }
+.m-t-0 { margin-top:    0 !important; }
+.m-r-0 { margin-right:  0 !important; }
+.m-b-0 { margin-bottom: 0 !important; }
+.m-l-0 { margin-left:   0 !important; }
+.m-x-0 { margin-right:  0 !important; margin-left:   0 !important; }
+.m-y-0 { margin-top:    0 !important; margin-bottom: 0 !important; }
+
+.m-a { margin:        $spacer !important; }
+.m-t { margin-top:    $spacer-y !important; }
+.m-r { margin-right:  $spacer-x !important; }
+.m-b { margin-bottom: $spacer-y !important; }
+.m-l { margin-left:   $spacer-x !important; }
+.m-x { margin-right:  $spacer-x !important; margin-left: $spacer-x !important; }
+.m-y { margin-top:    $spacer-y !important; margin-bottom: $spacer-y !important; }
+.m-x-auto { margin-right: auto !important; margin-left: auto !important; }
+
+.m-a-md { margin:        ($spacer * 1.5) !important; }
+.m-t-md { margin-top:    ($spacer-y * 1.5) !important; }
+.m-r-md { margin-right:  ($spacer-y * 1.5) !important; }
+.m-b-md { margin-bottom: ($spacer-y * 1.5) !important; }
+.m-l-md { margin-left:   ($spacer-y * 1.5) !important; }
+.m-x-md { margin-right:  ($spacer-x * 1.5) !important; margin-left:   ($spacer-x * 1.5) !important; }
+.m-y-md { margin-top:    ($spacer-y * 1.5) !important; margin-bottom: ($spacer-y * 1.5) !important; }
+
+.m-a-lg { margin:        ($spacer * 3) !important; }
+.m-t-lg { margin-top:    ($spacer-y * 3) !important; }
+.m-r-lg { margin-right:  ($spacer-y * 3) !important; }
+.m-b-lg { margin-bottom: ($spacer-y * 3) !important; }
+.m-l-lg { margin-left:   ($spacer-y * 3) !important; }
+.m-x-lg { margin-right:  ($spacer-x * 3) !important; margin-left:   ($spacer-x * 3) !important; }
+.m-y-lg { margin-top:    ($spacer-y * 3) !important; margin-bottom: ($spacer-y * 3) !important; }
 {% endhighlight %}
 
 ### Padding
 
 {% highlight scss %}
-.p-a-0 { padding:        0; }
-.p-t-0 { padding-top:    0; }
-.p-r-0 { padding-right:  0; }
-.p-b-0 { padding-bottom: 0; }
-.p-l-0 { padding-left:   0; }
-
-.p-a { padding:        $spacer; }
-.p-t { padding-top:    $spacer-y; }
-.p-r { padding-right:  $spacer-x; }
-.p-b { padding-bottom: $spacer-y; }
-.p-l { padding-left:   $spacer-x; }
-.p-x { padding-right:  $spacer-x; padding-left:   $spacer-x; }
-.p-y { padding-top:    $spacer-y; padding-bottom: $spacer-y; }
-
-.p-t-md { padding-top:    ($spacer-y * 1.5); }
-.p-r-md { padding-right:  ($spacer-y * 1.5); }
-.p-b-md { padding-bottom: ($spacer-y * 1.5); }
-.p-l-md { padding-left:   ($spacer-y * 1.5); }
-.p-x-md { padding-right:  ($spacer-x * 1.5); padding-left:   ($spacer-x * 1.5); }
-.p-y-md { padding-top:    ($spacer-y * 1.5); padding-bottom: ($spacer-y * 1.5); }
-
-.p-t-lg { padding-top:    ($spacer-y * 3); }
-.p-r-lg { padding-right:  ($spacer-y * 3); }
-.p-b-lg { padding-bottom: ($spacer-y * 3); }
-.p-l-lg { padding-left:   ($spacer-y * 3); }
-.p-x-lg { padding-right:  ($spacer-x * 3); padding-left:   ($spacer-x * 3); }
-.p-y-lg { padding-top:    ($spacer-y * 3); padding-bottom: ($spacer-y * 3); }
+.p-a-0 { padding:        0 !important; }
+.p-t-0 { padding-top:    0 !important; }
+.p-r-0 { padding-right:  0 !important; }
+.p-b-0 { padding-bottom: 0 !important; }
+.p-l-0 { padding-left:   0 !important; }
+.p-x-0 { padding-left:   0 !important; padding-right: 0 !important; }
+.p-y-0 { padding-top:    0 !important; padding-bottom: 0 !important; }
+
+.p-a { padding:        $spacer !important; }
+.p-t { padding-top:    $spacer-y !important; }
+.p-r { padding-right:  $spacer-x !important; }
+.p-b { padding-bottom: $spacer-y !important; }
+.p-l { padding-left:   $spacer-x !important; }
+.p-x { padding-right:  $spacer-x !important; padding-left:   $spacer-x !important; }
+.p-y { padding-top:    $spacer-y !important; padding-bottom: $spacer-y !important; }
+
+.p-a-md { padding:        ($spacer * 1.5) !important; }
+.p-t-md { padding-top:    ($spacer-y * 1.5) !important; }
+.p-r-md { padding-right:  ($spacer-y * 1.5) !important; }
+.p-b-md { padding-bottom: ($spacer-y * 1.5) !important; }
+.p-l-md { padding-left:   ($spacer-y * 1.5) !important; }
+.p-x-md { padding-right:  ($spacer-x * 1.5) !important; padding-left:   ($spacer-x * 1.5) !important; }
+.p-y-md { padding-top:    ($spacer-y * 1.5) !important; padding-bottom: ($spacer-y * 1.5) !important; }
+
+.p-a-lg { padding:        ($spacer * 3) !important; }
+.p-t-lg { padding-top:    ($spacer-y * 3) !important; }
+.p-r-lg { padding-right:  ($spacer-y * 3) !important; }
+.p-b-lg { padding-bottom: ($spacer-y * 3) !important; }
+.p-l-lg { padding-left:   ($spacer-y * 3) !important; }
+.p-x-lg { padding-right:  ($spacer-x * 3) !important; padding-left:   ($spacer-x * 3) !important; }
+.p-y-lg { padding-top:    ($spacer-y * 3) !important; padding-bottom: ($spacer-y * 3) !important; }
 {% endhighlight %}
 
 

diff --git a/scss/_utilities-spacing.scss b/scss/_utilities-spacing.scss
index 8d23e526a19848c85dd1ec843fa0b9282b9df782..547bea70183a312e4a671fabb9c3988adbafd03b 100644 (file)
--- a/scss/_utilities-spacing.scss
+++ b/scss/_utilities-spacing.scss
@@ -1,65 +1,74 @@
-//
-// Spacing
-//
+// Margin
 
-.m-a-0 { margin:        0; }
-.m-t-0 { margin-top:    0; }
-.m-r-0 { margin-right:  0; }
-.m-b-0 { margin-bottom: 0; }
-.m-l-0 { margin-left:   0; }
+.m-a-0 { margin:        0 !important; }
+.m-t-0 { margin-top:    0 !important; }
+.m-r-0 { margin-right:  0 !important; }
+.m-b-0 { margin-bottom: 0 !important; }
+.m-l-0 { margin-left:   0 !important; }
+.m-x-0 { margin-right:  0 !important; margin-left:   0 !important; }
+.m-y-0 { margin-top:    0 !important; margin-bottom: 0 !important; }
 
-.m-a { margin:        $spacer; }
-.m-t { margin-top:    $spacer-y; }
-.m-r { margin-right:  $spacer-x; }
-.m-b { margin-bottom: $spacer-y; }
-.m-l { margin-left:   $spacer-x; }
-.m-x { margin-right:  $spacer-x; margin-left: $spacer-x; }
-.m-y { margin-top:    $spacer-y; margin-bottom: $spacer-y; }
+.m-a { margin:        $spacer !important; }
+.m-t { margin-top:    $spacer-y !important; }
+.m-r { margin-right:  $spacer-x !important; }
+.m-b { margin-bottom: $spacer-y !important; }
+.m-l { margin-left:   $spacer-x !important; }
+.m-x { margin-right:  $spacer-x !important; margin-left: $spacer-x !important; }
+.m-y { margin-top:    $spacer-y !important; margin-bottom: $spacer-y !important; }
+.m-x-auto { margin-right: auto !important; margin-left: auto !important; }
 
-.m-t-md { margin-top:    ($spacer-y * 1.5); }
-.m-r-md { margin-right:  ($spacer-y * 1.5); }
-.m-b-md { margin-bottom: ($spacer-y * 1.5); }
-.m-l-md { margin-left:   ($spacer-y * 1.5); }
-.m-x-md { margin-right:  ($spacer-x * 1.5); margin-left:   ($spacer-x * 1.5); }
-.m-y-md { margin-top:    ($spacer-y * 1.5); margin-bottom: ($spacer-y * 1.5); }
+.m-a-md { margin:        ($spacer * 1.5) !important; }
+.m-t-md { margin-top:    ($spacer-y * 1.5) !important; }
+.m-r-md { margin-right:  ($spacer-y * 1.5) !important; }
+.m-b-md { margin-bottom: ($spacer-y * 1.5) !important; }
+.m-l-md { margin-left:   ($spacer-y * 1.5) !important; }
+.m-x-md { margin-right:  ($spacer-x * 1.5) !important; margin-left:   ($spacer-x * 1.5) !important; }
+.m-y-md { margin-top:    ($spacer-y * 1.5) !important; margin-bottom: ($spacer-y * 1.5) !important; }
 
-.m-t-lg { margin-top:    ($spacer-y * 3); }
-.m-r-lg { margin-right:  ($spacer-y * 3); }
-.m-b-lg { margin-bottom: ($spacer-y * 3); }
-.m-l-lg { margin-left:   ($spacer-y * 3); }
-.m-x-lg { margin-right:  ($spacer-x * 3); margin-left:   ($spacer-x * 3); }
-.m-y-lg { margin-top:    ($spacer-y * 3); margin-bottom: ($spacer-y * 3); }
+.m-a-lg { margin:        ($spacer * 3) !important; }
+.m-t-lg { margin-top:    ($spacer-y * 3) !important; }
+.m-r-lg { margin-right:  ($spacer-y * 3) !important; }
+.m-b-lg { margin-bottom: ($spacer-y * 3) !important; }
+.m-l-lg { margin-left:   ($spacer-y * 3) !important; }
+.m-x-lg { margin-right:  ($spacer-x * 3) !important; margin-left:   ($spacer-x * 3) !important; }
+.m-y-lg { margin-top:    ($spacer-y * 3) !important; margin-bottom: ($spacer-y * 3) !important; }
 
-.p-a-0 { padding:        0; }
-.p-t-0 { padding-top:    0; }
-.p-r-0 { padding-right:  0; }
-.p-b-0 { padding-bottom: 0; }
-.p-l-0 { padding-left:   0; }
+// Padding
 
-.p-a { padding:        $spacer; }
-.p-t { padding-top:    $spacer-y; }
-.p-r { padding-right:  $spacer-x; }
-.p-b { padding-bottom: $spacer-y; }
-.p-l { padding-left:   $spacer-x; }
-.p-x { padding-right:  $spacer-x; padding-left:   $spacer-x; }
-.p-y { padding-top:    $spacer-y; padding-bottom: $spacer-y; }
+.p-a-0 { padding:        0 !important; }
+.p-t-0 { padding-top:    0 !important; }
+.p-r-0 { padding-right:  0 !important; }
+.p-b-0 { padding-bottom: 0 !important; }
+.p-l-0 { padding-left:   0 !important; }
+.p-x-0 { padding-left:   0 !important; padding-right: 0 !important; }
+.p-y-0 { padding-top:    0 !important; padding-bottom: 0 !important; }
 
-.p-t-md { padding-top:    ($spacer-y * 1.5); }
-.p-r-md { padding-right:  ($spacer-y * 1.5); }
-.p-b-md { padding-bottom: ($spacer-y * 1.5); }
-.p-l-md { padding-left:   ($spacer-y * 1.5); }
-.p-x-md { padding-right:  ($spacer-x * 1.5); padding-left:   ($spacer-x * 1.5); }
-.p-y-md { padding-top:    ($spacer-y * 1.5); padding-bottom: ($spacer-y * 1.5); }
+.p-a { padding:        $spacer !important; }
+.p-t { padding-top:    $spacer-y !important; }
+.p-r { padding-right:  $spacer-x !important; }
+.p-b { padding-bottom: $spacer-y !important; }
+.p-l { padding-left:   $spacer-x !important; }
+.p-x { padding-right:  $spacer-x !important; padding-left:   $spacer-x !important; }
+.p-y { padding-top:    $spacer-y !important; padding-bottom: $spacer-y !important; }
 
-.p-t-lg { padding-top:    ($spacer-y * 3); }
-.p-r-lg { padding-right:  ($spacer-y * 3); }
-.p-b-lg { padding-bottom: ($spacer-y * 3); }
-.p-l-lg { padding-left:   ($spacer-y * 3); }
-.p-x-lg { padding-right:  ($spacer-x * 3); padding-left:   ($spacer-x * 3); }
-.p-y-lg { padding-top:    ($spacer-y * 3); padding-bottom: ($spacer-y * 3); }
+.p-a-md { padding:        ($spacer * 1.5) !important; }
+.p-t-md { padding-top:    ($spacer-y * 1.5) !important; }
+.p-r-md { padding-right:  ($spacer-y * 1.5) !important; }
+.p-b-md { padding-bottom: ($spacer-y * 1.5) !important; }
+.p-l-md { padding-left:   ($spacer-y * 1.5) !important; }
+.p-x-md { padding-right:  ($spacer-x * 1.5) !important; padding-left:   ($spacer-x * 1.5) !important; }
+.p-y-md { padding-top:    ($spacer-y * 1.5) !important; padding-bottom: ($spacer-y * 1.5) !important; }
 
+.p-a-lg { padding:        ($spacer * 3) !important; }
+.p-t-lg { padding-top:    ($spacer-y * 3) !important; }
+.p-r-lg { padding-right:  ($spacer-y * 3) !important; }
+.p-b-lg { padding-bottom: ($spacer-y * 3) !important; }
+.p-l-lg { padding-left:   ($spacer-y * 3) !important; }
+.p-x-lg { padding-right:  ($spacer-x * 3) !important; padding-left:   ($spacer-x * 3) !important; }
+.p-y-lg { padding-top:    ($spacer-y * 3) !important; padding-bottom: ($spacer-y * 3) !important; }
 
 // Positioning
+
 .pos-f-t {
   position: fixed;
   top: 0;