uikit 3.25.17-dev.80dfe87 → 3.25.17-dev.8c70e44

package/src/scss/components/grid.scss

@@ -21,6 +21,7 @@
 // Sub-modifier:    `uk-grid-item-match`
 //
 // States:          `uk-first-column`
+//                  `uk-first-row`
 //
 // ========================================================================
 
@@ -68,32 +69,32 @@
 .uk-grid > * > :last-child { margin-bottom: 0; }
 
 
-/* Gutter
+/* Gap
  ========================================================================== */
 
 /*
  * Default
  */
 
-/* Horizontal */
 .uk-grid { margin-left: (-$grid-gutter-horizontal); }
 .uk-grid > * { padding-left: $grid-gutter-horizontal; }
 
-/* Vertical */
-.uk-grid + .uk-grid,
-.uk-grid > .uk-grid-margin,
+.uk-grid { row-gap: $grid-gutter-vertical; }
+
+/* Margin */
+.uk-grid + :where(.uk-grid),
 * + .uk-grid-margin { margin-top: $grid-gutter-vertical; }
 
 /* Desktop and bigger */
 @media (min-width: $breakpoint-large) {
 
-    /* Horizontal */
     .uk-grid { margin-left: (-$grid-gutter-horizontal-l); }
     .uk-grid > * { padding-left: $grid-gutter-horizontal-l; }
 
-    /* Vertical */
-    .uk-grid + .uk-grid,
-    .uk-grid > .uk-grid-margin,
+    .uk-grid { row-gap: $grid-gutter-vertical-l; }
+
+    /* Margin */
+    .uk-grid + :where(.uk-grid),
     * + .uk-grid-margin { margin-top: $grid-gutter-vertical-l; }
 
 }
@@ -102,67 +103,63 @@
  * Small
  */
 
-/* Horizontal */
 .uk-grid-small,
 .uk-grid-column-small { margin-left: (-$grid-small-gutter-horizontal); }
 .uk-grid-small > *,
 .uk-grid-column-small > * { padding-left: $grid-small-gutter-horizontal; }
 
-/* Vertical */
-.uk-grid + .uk-grid-small,
-.uk-grid + .uk-grid-row-small,
-.uk-grid-small > .uk-grid-margin,
-.uk-grid-row-small > .uk-grid-margin,
+.uk-grid-small,
+.uk-grid-row-small { row-gap: $grid-small-gutter-vertical; }
+
+/* Margin */
+.uk-grid + :where(.uk-grid-small, .uk-grid-row-small),
 * + .uk-grid-margin-small { margin-top: $grid-small-gutter-vertical; }
 
 /*
  * Medium
  */
 
-/* Horizontal */
 .uk-grid-medium,
 .uk-grid-column-medium { margin-left: (-$grid-medium-gutter-horizontal); }
 .uk-grid-medium > *,
 .uk-grid-column-medium > * { padding-left: $grid-medium-gutter-horizontal; }
 
-/* Vertical */
-.uk-grid + .uk-grid-medium,
-.uk-grid + .uk-grid-row-medium,
-.uk-grid-medium > .uk-grid-margin,
-.uk-grid-row-medium > .uk-grid-margin,
+.uk-grid-medium,
+.uk-grid-row-medium { row-gap: $grid-medium-gutter-vertical; }
+
+/* Margin */
+.uk-grid + :where(.uk-grid-medium, .uk-grid-row-medium),
 * + .uk-grid-margin-medium { margin-top: $grid-medium-gutter-vertical; }
 
 /*
  * Large
  */
 
-/* Horizontal */
 .uk-grid-large,
 .uk-grid-column-large { margin-left: (-$grid-large-gutter-horizontal); }
 .uk-grid-large > *,
 .uk-grid-column-large > * { padding-left: $grid-large-gutter-horizontal; }
 
-/* Vertical */
-.uk-grid + .uk-grid-large,
-.uk-grid + .uk-grid-row-large,
-.uk-grid-large > .uk-grid-margin,
-.uk-grid-row-large > .uk-grid-margin,
+.uk-grid-large,
+.uk-grid-row-large { row-gap: $grid-large-gutter-vertical; }
+
+/* Margin */
+.uk-grid + :where(.uk-grid-large, .uk-grid-row-large),
 * + .uk-grid-margin-large { margin-top: $grid-large-gutter-vertical; }
 
 /* Desktop and bigger */
 @media (min-width: $breakpoint-large) {
 
-    /* Horizontal */
     .uk-grid-large,
     .uk-grid-column-large { margin-left: (-$grid-large-gutter-horizontal-l); }
     .uk-grid-large > *,
     .uk-grid-column-large > * { padding-left: $grid-large-gutter-horizontal-l; }
 
-    /* Vertical */
-    .uk-grid + .uk-grid-large,
-    .uk-grid + .uk-grid-row-large,
-    .uk-grid-large > .uk-grid-margin,
-    .uk-grid-row-large > .uk-grid-margin,
+    .uk-grid-large,
+    .uk-grid-row-large { row-gap: $grid-large-gutter-vertical-l; }
+
+    /* Margin */
+    .uk-grid + :where(.uk-grid-large, .uk-grid-row-large),
     * + .uk-grid-margin-large { margin-top: $grid-large-gutter-vertical-l; }
 
 }
@@ -171,17 +168,16 @@
  * Collapse
  */
 
-/* Horizontal */
 .uk-grid-collapse,
 .uk-grid-column-collapse { margin-left: 0; }
 .uk-grid-collapse > *,
 .uk-grid-column-collapse > * { padding-left: 0; }
 
-/* Vertical */
-.uk-grid + .uk-grid-collapse,
-.uk-grid + .uk-grid-row-collapse,
-.uk-grid-collapse > .uk-grid-margin,
-.uk-grid-row-collapse > .uk-grid-margin { margin-top: 0; }
+.uk-grid-collapse,
+.uk-grid-row-collapse { row-gap: 0; }
+
+/* Margin */
+.uk-grid + :where(.uk-grid-collapse, .uk-grid-row-collapse) { margin-top: 0; }
 
 
 /* Divider
@@ -189,6 +185,7 @@
 
 .uk-grid-divider > * { position: relative; }
 
+/* Horizontal */
 .uk-grid-divider > :not(.uk-first-column)::before {
     content: "";
     position: absolute;
@@ -199,7 +196,7 @@
 }
 
 /* Vertical */
-.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+.uk-grid-divider.uk-grid-stack > :not(.uk-first-row)::before {
     content: "";
     position: absolute;
     left: 0;
@@ -219,9 +216,9 @@
 .uk-grid-divider > :not(.uk-first-column)::before { left: $grid-gutter-horizontal; }
 
 /* Vertical */
-.uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-gutter-vertical * 2); }
+.uk-grid-divider.uk-grid-stack { row-gap: ($grid-gutter-vertical * 2); }
 
-.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+.uk-grid-divider.uk-grid-stack > :not(.uk-first-row)::before {
     top: (-$grid-gutter-vertical);
     left: ($grid-gutter-horizontal * 2);
 }
@@ -236,9 +233,9 @@
     .uk-grid-divider > :not(.uk-first-column)::before { left: $grid-gutter-horizontal-l; }
 
     /* Vertical */
-    .uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-gutter-vertical-l * 2); }
+    .uk-grid-divider.uk-grid-stack { row-gap: ($grid-gutter-vertical-l * 2); }
 
-    .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+    .uk-grid-divider.uk-grid-stack > :not(.uk-first-row)::before {
         top: (-$grid-gutter-vertical-l);
         left: ($grid-gutter-horizontal-l * 2);
     }
@@ -259,16 +256,15 @@
 .uk-grid-divider.uk-grid-column-small > :not(.uk-first-column)::before { left: $grid-small-gutter-horizontal; }
 
 /* Vertical */
-.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin,
-.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-small-gutter-vertical * 2); }
+.uk-grid-divider.uk-grid-stack:where(.uk-grid-small, .uk-grid-row-small) { row-gap: ($grid-small-gutter-vertical * 2); }
 
-.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before {
+.uk-grid-divider.uk-grid-stack.uk-grid-small > :not(.uk-first-row)::before {
     top: (-$grid-small-gutter-vertical);
     left: ($grid-small-gutter-horizontal * 2);
 }
 
-.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin::before { top: (-$grid-small-gutter-vertical); }
-.uk-grid-divider.uk-grid-column-small.uk-grid-stack > .uk-grid-margin::before { left: ($grid-small-gutter-horizontal * 2); }
+.uk-grid-divider.uk-grid-stack.uk-grid-row-small > :not(.uk-first-row)::before { top: (-$grid-small-gutter-vertical); }
+.uk-grid-divider.uk-grid-stack.uk-grid-column-small > :not(.uk-first-row)::before { left: ($grid-small-gutter-horizontal * 2); }
 
 /*
  * Medium
@@ -284,16 +280,15 @@
 .uk-grid-divider.uk-grid-column-medium > :not(.uk-first-column)::before { left: $grid-medium-gutter-horizontal; }
 
 /* Vertical */
-.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin,
-.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-medium-gutter-vertical * 2); }
+.uk-grid-divider.uk-grid-stack:where(.uk-grid-medium, .uk-grid-row-medium) { row-gap: ($grid-medium-gutter-vertical * 2); }
 
-.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before {
+.uk-grid-divider.uk-grid-stack.uk-grid-medium > :not(.uk-first-row)::before {
     top: (-$grid-medium-gutter-vertical);
     left: ($grid-medium-gutter-horizontal * 2);
 }
 
-.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin::before { top: (-$grid-medium-gutter-vertical); }
-.uk-grid-divider.uk-grid-column-medium.uk-grid-stack > .uk-grid-margin::before { left: ($grid-medium-gutter-horizontal * 2); }
+.uk-grid-divider.uk-grid-stack.uk-grid-row-medium > :not(.uk-first-row)::before { top: (-$grid-medium-gutter-vertical); }
+.uk-grid-divider.uk-grid-stack.uk-grid-column-medium > :not(.uk-first-row)::before { left: ($grid-medium-gutter-horizontal * 2); }
 
 /*
  * Large
@@ -309,16 +304,15 @@
 .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before { left: $grid-large-gutter-horizontal; }
 
 /* Vertical */
-.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
-.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-large-gutter-vertical * 2); }
+.uk-grid-divider.uk-grid-stack:where(.uk-grid-large, .uk-grid-row-large) { row-gap: ($grid-large-gutter-vertical * 2); }
 
-.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
+.uk-grid-divider.uk-grid-stack.uk-grid-large > :not(.uk-first-row)::before {
     top: (-$grid-large-gutter-vertical);
     left: ($grid-large-gutter-horizontal * 2);
 }
 
-.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before { top: (-$grid-large-gutter-vertical); }
-.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before { left: ($grid-large-gutter-horizontal * 2); }
+.uk-grid-divider.uk-grid-stack.uk-grid-row-large > :not(.uk-first-row)::before { top: (-$grid-large-gutter-vertical); }
+.uk-grid-divider.uk-grid-stack.uk-grid-column-large > :not(.uk-first-row)::before { left: ($grid-large-gutter-horizontal * 2); }
 
 /* Desktop and bigger */
 @media (min-width: $breakpoint-large) {
@@ -333,16 +327,15 @@
     .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before { left: $grid-large-gutter-horizontal-l; }
 
     /* Vertical */
-    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
-    .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-large-gutter-vertical-l * 2); }
+    .uk-grid-divider.uk-grid-stack:where(.uk-grid-large, .uk-grid-row-large) { row-gap: ($grid-large-gutter-vertical-l * 2); }
 
-    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
+    .uk-grid-divider.uk-grid-stack.uk-grid-large > :not(.uk-first-row)::before {
         top: (-$grid-large-gutter-vertical-l);
         left: ($grid-large-gutter-horizontal-l * 2);
     }
 
-    .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before { top: (-$grid-large-gutter-vertical-l); }
-    .uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before { left: ($grid-large-gutter-horizontal-l * 2); }
+    .uk-grid-divider.uk-grid-stack.uk-grid-row-large > :not(.uk-first-row)::before { top: (-$grid-large-gutter-vertical-l); }
+    .uk-grid-divider.uk-grid-stack.uk-grid-column-large > :not(.uk-first-row)::before { left: ($grid-large-gutter-horizontal-l * 2); }
 
 }
 

package/src/scss/components/logo.scss

@@ -0,0 +1,75 @@
+@use "sass:meta";
+
+// Name:            Logo
+// Description:     Style for the logo
+//
+// Component:       `uk-logo`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Logo
+ ========================================================================== */
+
+/*
+ * 1. Style
+ * 2. Required for `a`
+ * 3. Behave like image but can be overridden through flex utility classes
+ */
+
+.uk-logo {
+    /* 1 */
+    font-size: $logo-font-size;
+    font-family: $logo-font-family;
+    color: $logo-color;
+    /* 2 */
+    text-decoration: none;
+    @if(meta.mixin-exists(hook-logo)) {@include hook-logo();}
+}
+
+/* 3 */
+:where(.uk-logo) {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+/* Hover */
+.uk-logo:hover {
+    color: $logo-hover-color;
+    /* 2 */
+    text-decoration: none;
+    @if(meta.mixin-exists(hook-logo-hover)) {@include hook-logo-hover();}
+}
+
+.uk-logo :where(img:not([uk-svg]), svg, video) { display: block; }
+
+.uk-logo-inverse:where(:not([uk-svg])) { display: none; }
+
+
+// Misc
+// ========================================================================
+
+@if(meta.mixin-exists(hook-logo-misc)) {@include hook-logo-misc();}
+
+
+// Hooks
+// ========================================================================
+
+// @mixin hook-logo(){}
+// @mixin hook-logo-hover(){}
+// @mixin hook-logo-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+
+// @mixin hook-inverse-logo(){}
+// @mixin hook-inverse-logo-hover(){}

package/src/scss/components/margin.scss

@@ -33,71 +33,71 @@
  */
 
 .uk-margin { margin-bottom: $margin-margin; }
-* + .uk-margin { margin-top: $margin-margin !important; }
+* + .uk-margin { margin-top: $margin-margin; }
 
-.uk-margin-top { margin-top: $margin-margin !important; }
-.uk-margin-bottom { margin-bottom: $margin-margin !important; }
-.uk-margin-left { margin-left: $margin-margin !important; }
-.uk-margin-right { margin-right: $margin-margin !important; }
+.uk-margin-top { margin-top: $margin-margin; }
+.uk-margin-bottom { margin-bottom: $margin-margin; }
+.uk-margin-left { margin-left: $margin-margin; }
+.uk-margin-right { margin-right: $margin-margin; }
 
 
 /* XSmall
  ========================================================================== */
 
 .uk-margin-xsmall { margin-bottom: $margin-xsmall-margin; }
-* + .uk-margin-xsmall { margin-top: $margin-xsmall-margin !important; }
+* + .uk-margin-xsmall { margin-top: $margin-xsmall-margin; }
 
-.uk-margin-xsmall-top { margin-top: $margin-xsmall-margin !important; }
-.uk-margin-xsmall-bottom { margin-bottom: $margin-xsmall-margin !important; }
-.uk-margin-xsmall-left { margin-left: $margin-xsmall-margin !important; }
-.uk-margin-xsmall-right { margin-right: $margin-xsmall-margin !important; }
+.uk-margin-xsmall-top { margin-top: $margin-xsmall-margin; }
+.uk-margin-xsmall-bottom { margin-bottom: $margin-xsmall-margin; }
+.uk-margin-xsmall-left { margin-left: $margin-xsmall-margin; }
+.uk-margin-xsmall-right { margin-right: $margin-xsmall-margin; }
 
 
 /* Small
  ========================================================================== */
 
 .uk-margin-small { margin-bottom: $margin-small-margin; }
-* + .uk-margin-small { margin-top: $margin-small-margin !important; }
+* + .uk-margin-small { margin-top: $margin-small-margin; }
 
-.uk-margin-small-top { margin-top: $margin-small-margin !important; }
-.uk-margin-small-bottom { margin-bottom: $margin-small-margin !important; }
-.uk-margin-small-left { margin-left: $margin-small-margin !important; }
-.uk-margin-small-right { margin-right: $margin-small-margin !important; }
+.uk-margin-small-top { margin-top: $margin-small-margin; }
+.uk-margin-small-bottom { margin-bottom: $margin-small-margin; }
+.uk-margin-small-left { margin-left: $margin-small-margin; }
+.uk-margin-small-right { margin-right: $margin-small-margin; }
 
 
 /* Medium
  ========================================================================== */
 
 .uk-margin-medium { margin-bottom: $margin-medium-margin; }
-* + .uk-margin-medium { margin-top: $margin-medium-margin !important; }
+* + .uk-margin-medium { margin-top: $margin-medium-margin; }
 
-.uk-margin-medium-top { margin-top: $margin-medium-margin !important; }
-.uk-margin-medium-bottom { margin-bottom: $margin-medium-margin !important; }
-.uk-margin-medium-left { margin-left: $margin-medium-margin !important; }
-.uk-margin-medium-right { margin-right: $margin-medium-margin !important; }
+.uk-margin-medium-top { margin-top: $margin-medium-margin; }
+.uk-margin-medium-bottom { margin-bottom: $margin-medium-margin; }
+.uk-margin-medium-left { margin-left: $margin-medium-margin; }
+.uk-margin-medium-right { margin-right: $margin-medium-margin; }
 
 
 /* Large
  ========================================================================== */
 
 .uk-margin-large { margin-bottom: $margin-large-margin; }
-* + .uk-margin-large { margin-top: $margin-large-margin !important; }
+* + .uk-margin-large { margin-top: $margin-large-margin; }
 
-.uk-margin-large-top { margin-top: $margin-large-margin !important; }
-.uk-margin-large-bottom { margin-bottom: $margin-large-margin !important; }
-.uk-margin-large-left { margin-left: $margin-large-margin !important; }
-.uk-margin-large-right { margin-right: $margin-large-margin !important; }
+.uk-margin-large-top { margin-top: $margin-large-margin; }
+.uk-margin-large-bottom { margin-bottom: $margin-large-margin; }
+.uk-margin-large-left { margin-left: $margin-large-margin; }
+.uk-margin-large-right { margin-right: $margin-large-margin; }
 
 /* Desktop and bigger */
 @media (min-width: $breakpoint-large) {
 
     .uk-margin-large { margin-bottom: $margin-large-margin-l; }
-    * + .uk-margin-large { margin-top: $margin-large-margin-l !important; }
+    * + .uk-margin-large { margin-top: $margin-large-margin-l; }
 
-    .uk-margin-large-top { margin-top: $margin-large-margin-l !important; }
-    .uk-margin-large-bottom { margin-bottom: $margin-large-margin-l !important; }
-    .uk-margin-large-left { margin-left: $margin-large-margin-l !important; }
-    .uk-margin-large-right { margin-right: $margin-large-margin-l !important; }
+    .uk-margin-large-top { margin-top: $margin-large-margin-l; }
+    .uk-margin-large-bottom { margin-bottom: $margin-large-margin-l; }
+    .uk-margin-large-left { margin-left: $margin-large-margin-l; }
+    .uk-margin-large-right { margin-right: $margin-large-margin-l; }
 
 }
 
@@ -106,23 +106,23 @@
  ========================================================================== */
 
 .uk-margin-xlarge { margin-bottom: $margin-xlarge-margin; }
-* + .uk-margin-xlarge { margin-top: $margin-xlarge-margin !important; }
+* + .uk-margin-xlarge { margin-top: $margin-xlarge-margin; }
 
-.uk-margin-xlarge-top { margin-top: $margin-xlarge-margin !important; }
-.uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin !important; }
-.uk-margin-xlarge-left { margin-left: $margin-xlarge-margin !important; }
-.uk-margin-xlarge-right { margin-right: $margin-xlarge-margin !important; }
+.uk-margin-xlarge-top { margin-top: $margin-xlarge-margin; }
+.uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin; }
+.uk-margin-xlarge-left { margin-left: $margin-xlarge-margin; }
+.uk-margin-xlarge-right { margin-right: $margin-xlarge-margin; }
 
 /* Desktop and bigger */
 @media (min-width: $breakpoint-large) {
 
     .uk-margin-xlarge { margin-bottom: $margin-xlarge-margin-l; }
-    * + .uk-margin-xlarge { margin-top: $margin-xlarge-margin-l !important; }
+    * + .uk-margin-xlarge { margin-top: $margin-xlarge-margin-l; }
 
-    .uk-margin-xlarge-top { margin-top: $margin-xlarge-margin-l !important; }
-    .uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin-l !important; }
-    .uk-margin-xlarge-left { margin-left: $margin-xlarge-margin-l !important; }
-    .uk-margin-xlarge-right { margin-right: $margin-xlarge-margin-l !important; }
+    .uk-margin-xlarge-top { margin-top: $margin-xlarge-margin-l; }
+    .uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin-l; }
+    .uk-margin-xlarge-left { margin-left: $margin-xlarge-margin-l; }
+    .uk-margin-xlarge-right { margin-right: $margin-xlarge-margin-l; }
 
 }
 
@@ -131,30 +131,30 @@
  ========================================================================== */
 
 .uk-margin-auto {
-    margin-left: auto !important;
-    margin-right: auto !important;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-.uk-margin-auto-top { margin-top: auto !important; }
-.uk-margin-auto-bottom { margin-bottom: auto !important; }
-.uk-margin-auto-left { margin-left: auto !important; }
-.uk-margin-auto-right { margin-right: auto !important; }
+.uk-margin-auto-top { margin-top: auto; }
+.uk-margin-auto-bottom { margin-bottom: auto; }
+.uk-margin-auto-left { margin-left: auto; }
+.uk-margin-auto-right { margin-right: auto; }
 
 .uk-margin-auto-vertical {
-    margin-top: auto !important;
-    margin-bottom: auto !important;
+    margin-top: auto;
+    margin-bottom: auto;
 }
 
 /* Phone landscape and bigger */
 @media (min-width: $breakpoint-small) {
 
     .uk-margin-auto\@s {
-        margin-left: auto !important;
-        margin-right: auto !important;
+        margin-left: auto;
+        margin-right: auto;
     }
 
-    .uk-margin-auto-left\@s { margin-left: auto !important; }
-    .uk-margin-auto-right\@s { margin-right: auto !important; }
+    .uk-margin-auto-left\@s { margin-left: auto; }
+    .uk-margin-auto-right\@s { margin-right: auto; }
 
 }
 
@@ -162,12 +162,12 @@
 @media (min-width: $breakpoint-medium) {
 
     .uk-margin-auto\@m {
-        margin-left: auto !important;
-        margin-right: auto !important;
+        margin-left: auto;
+        margin-right: auto;
     }
 
-    .uk-margin-auto-left\@m { margin-left: auto !important; }
-    .uk-margin-auto-right\@m { margin-right: auto !important; }
+    .uk-margin-auto-left\@m { margin-left: auto; }
+    .uk-margin-auto-right\@m { margin-right: auto; }
 
 }
 
@@ -175,12 +175,12 @@
 @media (min-width: $breakpoint-large) {
 
     .uk-margin-auto\@l {
-        margin-left: auto !important;
-        margin-right: auto !important;
+        margin-left: auto;
+        margin-right: auto;
     }
 
-    .uk-margin-auto-left\@l { margin-left: auto !important; }
-    .uk-margin-auto-right\@l { margin-right: auto !important; }
+    .uk-margin-auto-left\@l { margin-left: auto; }
+    .uk-margin-auto-right\@l { margin-right: auto; }
 
 }
 
@@ -188,12 +188,12 @@
 @media (min-width: $breakpoint-xlarge) {
 
     .uk-margin-auto\@xl {
-        margin-left: auto !important;
-        margin-right: auto !important;
+        margin-left: auto;
+        margin-right: auto;
     }
 
-    .uk-margin-auto-left\@xl { margin-left: auto !important; }
-    .uk-margin-auto-right\@xl { margin-right: auto !important; }
+    .uk-margin-auto-left\@xl { margin-left: auto; }
+    .uk-margin-auto-right\@xl { margin-right: auto; }
 
 }
 
@@ -201,50 +201,50 @@
 /* Remove
  ========================================================================== */
 
-.uk-margin-remove { margin: 0 !important; }
-.uk-margin-remove-top { margin-top: 0 !important; }
-.uk-margin-remove-bottom { margin-bottom: 0 !important; }
-.uk-margin-remove-left { margin-left: 0 !important; }
-.uk-margin-remove-right { margin-right: 0 !important; }
+.uk-margin-remove { margin: 0; }
+.uk-margin-remove-top { margin-top: 0; }
+.uk-margin-remove-bottom { margin-bottom: 0; }
+.uk-margin-remove-left { margin-left: 0; }
+.uk-margin-remove-right { margin-right: 0; }
 
 .uk-margin-remove-vertical {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
 .uk-margin-remove-adjacent + *,
-.uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
-.uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
+.uk-margin-remove-first-child > :first-child { margin-top: 0; }
+.uk-margin-remove-last-child > :last-child { margin-bottom: 0; }
 
 /* Phone landscape and bigger */
 @media (min-width: $breakpoint-small) {
 
-    .uk-margin-remove-left\@s { margin-left: 0 !important; }
-    .uk-margin-remove-right\@s { margin-right: 0 !important; }
+    .uk-margin-remove-left\@s { margin-left: 0; }
+    .uk-margin-remove-right\@s { margin-right: 0; }
 
 }
 
 /* Tablet landscape and bigger */
 @media (min-width: $breakpoint-medium) {
 
-    .uk-margin-remove-left\@m { margin-left: 0 !important; }
-    .uk-margin-remove-right\@m { margin-right: 0 !important; }
+    .uk-margin-remove-left\@m { margin-left: 0; }
+    .uk-margin-remove-right\@m { margin-right: 0; }
 
 }
 
 /* Desktop and bigger */
 @media (min-width: $breakpoint-large) {
 
-    .uk-margin-remove-left\@l { margin-left: 0 !important; }
-    .uk-margin-remove-right\@l { margin-right: 0 !important; }
+    .uk-margin-remove-left\@l { margin-left: 0; }
+    .uk-margin-remove-right\@l { margin-right: 0; }
 
 }
 
 /* Large screen and bigger */
 @media (min-width: $breakpoint-xlarge) {
 
-    .uk-margin-remove-left\@xl { margin-left: 0 !important; }
-    .uk-margin-remove-right\@xl { margin-right: 0 !important; }
+    .uk-margin-remove-left\@xl { margin-left: 0; }
+    .uk-margin-remove-right\@xl { margin-right: 0; }
 
 }