claritas-web-framework 5.0.0

package/styles/utilities/spacing.css

@@ -0,0 +1,866 @@
+.margin--1 {
+  margin: calc(var(--spacer) * 0.25) !important;
+}
+
+.margin-top--1,
+.margin-y--1 {
+  margin-top: calc(var(--spacer) * 0.25) !important;
+}
+
+.margin-right--1,
+.margin-x--1 {
+  margin-right: calc(var(--spacer) * 0.25) !important;
+}
+
+.margin-bottom--1,
+.margin-y--1 {
+  margin-bottom: calc(var(--spacer) * 0.25) !important;
+}
+
+.margin-left--1,
+.margin-x--1 {
+  margin-left: calc(var(--spacer) * 0.25) !important;
+}
+
+.margin--2 {
+  margin: calc(var(--spacer) * 0.5) !important;
+}
+
+.margin-top--2,
+.margin-y--2 {
+  margin-top: calc(var(--spacer) * 0.5) !important;
+}
+
+.margin-right--2,
+.margin-x--2 {
+  margin-right: calc(var(--spacer) * 0.5) !important;
+}
+
+.margin-bottom--2,
+.margin-y--2 {
+  margin-bottom: calc(var(--spacer) * 0.5) !important;
+}
+
+.margin-left--2,
+.margin-x--2 {
+  margin-left: calc(var(--spacer) * 0.5) !important;
+}
+
+.margin--3 {
+  margin: var(--spacer) !important;
+}
+
+.margin-top--3,
+.margin-y--3 {
+  margin-top: var(--spacer) !important;
+}
+
+.margin-right--3,
+.margin-x--3 {
+  margin-right: var(--spacer) !important;
+}
+
+.margin-bottom--3,
+.margin-y--3 {
+  margin-bottom: var(--spacer) !important;
+}
+
+.margin-left--3,
+.margin-x--3 {
+  margin-left: var(--spacer) !important;
+}
+
+.margin--4 {
+  margin: calc(var(--spacer) * 1.5) !important;
+}
+
+.margin-top--4,
+.margin-y--4 {
+  margin-top: calc(var(--spacer) * 1.5) !important;
+}
+
+.margin-right--4,
+.margin-x--4 {
+  margin-right: calc(var(--spacer) * 1.5) !important;
+}
+
+.margin-bottom--4,
+.margin-y--4 {
+  margin-bottom: calc(var(--spacer) * 1.5) !important;
+}
+
+.margin-left--4,
+.margin-x--4 {
+  margin-left: calc(var(--spacer) * 1.5) !important;
+}
+
+.margin--5 {
+  margin: calc(var(--spacer) * 3) !important;
+}
+
+.margin-top--5,
+.margin-y--5 {
+  margin-top: calc(var(--spacer) * 3) !important;
+}
+
+.margin-right--5,
+.margin-x--5 {
+  margin-right: calc(var(--spacer) * 3) !important;
+}
+
+.margin-bottom--5,
+.margin-y--5 {
+  margin-bottom: calc(var(--spacer) * 3) !important;
+}
+
+.margin-left--5,
+.margin-x--5 {
+  margin-left: calc(var(--spacer) * 3) !important;
+}
+
+.margin--0 {
+  margin: 0 !important;
+}
+
+.margin-top--0,
+.margin-y--0 {
+  margin-top: 0 !important;
+}
+
+.margin-right--0,
+.margin-x--0 {
+  margin-right: 0 !important;
+}
+
+.margin-bottom--0,
+.margin-y--0 {
+  margin-bottom: 0 !important;
+}
+
+.margin-left--0,
+.margin-x--0 {
+  margin-left: 0 !important;
+}
+
+.padding--1 {
+  padding: calc(var(--spacer) * 0.25) !important;
+}
+
+.padding-top--1,
+.padding-y--1 {
+  padding-top: calc(var(--spacer) * 0.25) !important;
+}
+
+.padding-right--1,
+.padding-x--1 {
+  padding-right: calc(var(--spacer) * 0.25) !important;
+}
+
+.padding-bottom--1,
+.padding-y--1 {
+  padding-bottom: calc(var(--spacer) * 0.25) !important;
+}
+
+.padding-left--1,
+.padding-x--1 {
+  padding-left: calc(var(--spacer) * 0.25) !important;
+}
+
+.padding--2 {
+  padding: calc(var(--spacer) * 0.5) !important;
+}
+
+.padding-top--2,
+.padding-y--2 {
+  padding-top: calc(var(--spacer) * 0.5) !important;
+}
+
+.padding-right--2,
+.padding-x--2 {
+  padding-right: calc(var(--spacer) * 0.5) !important;
+}
+
+.padding-bottom--2,
+.padding-y--2 {
+  padding-bottom: calc(var(--spacer) * 0.5) !important;
+}
+
+.padding-left--2,
+.padding-x--2 {
+  padding-left: calc(var(--spacer) * 0.5) !important;
+}
+
+.padding--3 {
+  padding: var(--spacer) !important;
+}
+
+.padding-top--3,
+.padding-y--3 {
+  padding-top: var(--spacer) !important;
+}
+
+.padding-right--3,
+.padding-x--3 {
+  padding-right: var(--spacer) !important;
+}
+
+.padding-bottom--3,
+.padding-y--3 {
+  padding-bottom: var(--spacer) !important;
+}
+
+.padding-left--3,
+.padding-x--3 {
+  padding-left: var(--spacer) !important;
+}
+
+.padding--4 {
+  padding: calc(var(--spacer) * 1.5) !important;
+}
+
+.padding-top--4,
+.padding-y--4 {
+  padding-top: calc(var(--spacer) * 1.5) !important;
+}
+
+.padding-right--4,
+.padding-x--4 {
+  padding-right: calc(var(--spacer) * 1.5) !important;
+}
+
+.padding-bottom--4,
+.padding-y--4 {
+  padding-bottom: calc(var(--spacer) * 1.5) !important;
+}
+
+.padding-left--4,
+.padding-x--4 {
+  padding-left: calc(var(--spacer) * 1.5) !important;
+}
+
+.padding--5 {
+  padding: calc(var(--spacer) * 3) !important;
+}
+
+.padding-top--5,
+.padding-y--5 {
+  padding-top: calc(var(--spacer) * 3) !important;
+}
+
+.padding-right--5,
+.padding-x--5 {
+  padding-right: calc(var(--spacer) * 3) !important;
+}
+
+.padding-bottom--5,
+.padding-y--5 {
+  padding-bottom: calc(var(--spacer) * 3) !important;
+}
+
+.padding-left--5,
+.padding-x--5 {
+  padding-left: calc(var(--spacer) * 3) !important;
+}
+
+.padding--0 {
+  padding: 0 !important;
+}
+
+.padding-top--0,
+.padding-y--0 {
+  padding-top: 0 !important;
+}
+
+.padding-right--0,
+.padding-x--0 {
+  padding-right: 0 !important;
+}
+
+.padding-bottom--0,
+.padding-y--0 {
+  padding-bottom: 0 !important;
+}
+
+.padding-left--0,
+.padding-x--0 {
+  padding-left: 0 !important;
+}
+
+.margin--neg-1 {
+  margin: calc(var(--spacer) * -0.25) !important;
+}
+
+.margin-top--neg-1,
+.margin-y--neg-1 {
+  margin-top: calc(var(--spacer) * -0.25) !important;
+}
+
+.margin-right--neg-1,
+.margin-x--neg-1 {
+  margin-right: calc(var(--spacer) * -0.25) !important;
+}
+
+.margin-bottom--neg-1,
+.margin-y--neg-1 {
+  margin-bottom: calc(var(--spacer) * -0.25) !important;
+}
+
+.margin-left--neg-1,
+.margin-x--neg-1 {
+  margin-left: calc(var(--spacer) * -0.25) !important;
+}
+
+.margin--neg-2 {
+  margin: calc(var(--spacer) * -.5) !important;
+}
+
+.margin-top--neg-2,
+.margin-y--neg-2 {
+  margin-top: calc(var(--spacer) * -.5) !important;
+}
+
+.margin-right--neg-2,
+.margin-x--neg-2 {
+  margin-right: calc(var(--spacer) * -.5) !important;
+}
+
+.margin-bottom--neg-2,
+.margin-y--neg-2 {
+  margin-bottom: calc(var(--spacer) * -.5) !important;
+}
+
+.margin-left--neg-2,
+.margin-x--neg-2 {
+  margin-left: calc(var(--spacer) * -.5) !important;
+}
+
+.margin--neg-3 {
+  margin: calc(var(--spacer) * -1) !important;
+}
+
+.margin-top--neg-3,
+.margin-y--neg-3 {
+  margin-top: calc(var(--spacer) * -1) !important;
+}
+
+.margin-right--neg-3,
+.margin-x--neg-3 {
+  margin-right: calc(var(--spacer) * -1) !important;
+}
+
+.margin-bottom--neg-3,
+.margin-y--neg-3 {
+  margin-bottom: calc(var(--spacer) * -1) !important;
+}
+
+.margin-left--neg-3,
+.margin-x--neg-3 {
+  margin-left: calc(var(--spacer) * -1) !important;
+}
+
+.margin--neg-4 {
+  margin: calc(var(--spacer) * -1.5) !important;
+}
+
+.margin-top--neg-4,
+.margin-y--neg-4 {
+  margin-top: calc(var(--spacer) * -1.5) !important;
+}
+
+.margin-right--neg-4,
+.margin-x--neg-4 {
+  margin-right: calc(var(--spacer) * -1.5) !important;
+}
+
+.margin-bottom--neg-4,
+.margin-y--neg-4 {
+  margin-bottom: calc(var(--spacer) * -1.5) !important;
+}
+
+.margin-left--neg-4,
+.margin-x--neg-4 {
+  margin-left: calc(var(--spacer) * -1.5) !important;
+}
+
+.margin--neg-5 {
+  margin: calc(var(--spacer) * -3) !important;
+}
+
+.margin-top--neg-5,
+.margin-y--neg-5 {
+  margin-top: calc(var(--spacer) * -3) !important;
+}
+
+.margin-right--neg-5,
+.margin-x--neg-5 {
+  margin-right: calc(var(--spacer) * -3) !important;
+}
+
+.margin-bottom--neg-5,
+.margin-y--neg-5 {
+  margin-bottom: calc(var(--spacer) * -3) !important;
+}
+
+.margin-left--neg-5,
+.margin-x--neg-5 {
+  margin-left: calc(var(--spacer) * -3) !important;
+}
+
+.margin--auto {
+  margin: auto !important;
+}
+
+.margin-top--auto,
+.margin-y--auto {
+  margin-top: auto !important;
+}
+
+.margin-right--auto,
+.margin-x--auto {
+  margin-right: auto !important;
+}
+
+.margin-bottom--auto,
+.margin-y--auto {
+  margin-bottom: auto !important;
+}
+
+.margin-left--auto,
+.margin-x--auto {
+  margin-left: auto !important;
+}
+@each $view in mobile, tablet, desktop, widescreen, fullhd {
+  @media (--viewport-$(view)) {
+    .margin--$(view)-1 {
+      margin: calc(var(--spacer) * 0.25) !important;
+    }
+
+    .margin-top--$(view)-1,
+    .margin-y--$(view)-1 {
+      margin-top: calc(var(--spacer) * 0.25) !important;
+    }
+
+    .margin-right--$(view)-1,
+    .margin-x--$(view)-1 {
+      margin-right: calc(var(--spacer) * 0.25) !important;
+    }
+
+    .margin-bottom--$(view)-1,
+    .margin-y--$(view)-1 {
+      margin-bottom: calc(var(--spacer) * 0.25) !important;
+    }
+
+    .margin-left--$(view)-1,
+    .margin-x--$(view)-1 {
+      margin-left: calc(var(--spacer) * 0.25) !important;
+    }
+
+    .margin--$(view)-2 {
+      margin: calc(var(--spacer) * 0.5) !important;
+    }
+
+    .margin-top--$(view)-2,
+    .margin-y--$(view)-2 {
+      margin-top: calc(var(--spacer) * 0.5) !important;
+    }
+
+    .margin-right--$(view)-2,
+    .margin-x--$(view)-2 {
+      margin-right: calc(var(--spacer) * 0.5) !important;
+    }
+
+    .margin-bottom--$(view)-2,
+    .margin-y--$(view)-2 {
+      margin-bottom: calc(var(--spacer) * 0.5) !important;
+    }
+
+    .margin-left--$(view)-2,
+    .margin-x--$(view)-2 {
+      margin-left: calc(var(--spacer) * 0.5) !important;
+    }
+
+    .margin--$(view)-3 {
+      margin: var(--spacer) !important;
+    }
+
+    .margin-top--$(view)-3,
+    .margin-y--$(view)-3 {
+      margin-top: var(--spacer) !important;
+    }
+
+    .margin-right--$(view)-3,
+    .margin-x--$(view)-3 {
+      margin-right: var(--spacer) !important;
+    }
+
+    .margin-bottom--$(view)-3,
+    .margin-y--$(view)-3 {
+      margin-bottom: var(--spacer) !important;
+    }
+
+    .margin-left--$(view)-3,
+    .margin-x--$(view)-3 {
+      margin-left: var(--spacer) !important;
+    }
+
+    .margin--$(view)-4 {
+      margin: calc(var(--spacer) * 1.5) !important;
+    }
+
+    .margin-top--$(view)-4,
+    .margin-y--$(view)-4 {
+      margin-top: calc(var(--spacer) * 1.5) !important;
+    }
+
+    .margin-right--$(view)-4,
+    .margin-x--$(view)-4 {
+      margin-right: calc(var(--spacer) * 1.5) !important;
+    }
+
+    .margin-bottom--$(view)-4,
+    .margin-y--$(view)-4 {
+      margin-bottom: calc(var(--spacer) * 1.5) !important;
+    }
+
+    .margin-left--$(view)-4,
+    .margin-x--$(view)-4 {
+      margin-left: calc(var(--spacer) * 1.5) !important;
+    }
+
+    .margin--$(view)-5 {
+      margin: calc(var(--spacer) * 3) !important;
+    }
+
+    .margin-top--$(view)-5,
+    .margin-y--$(view)-5 {
+      margin-top: calc(var(--spacer) * 3) !important;
+    }
+
+    .margin-right--$(view)-5,
+    .margin-x--$(view)-5 {
+      margin-right: calc(var(--spacer) * 3) !important;
+    }
+
+    .margin-bottom--$(view)-5,
+    .margin-y--$(view)-5 {
+      margin-bottom: calc(var(--spacer) * 3) !important;
+    }
+
+    .margin-left--$(view)-5,
+    .margin-x--$(view)-5 {
+      margin-left: calc(var(--spacer) * 3) !important;
+    }
+
+    .margin--$(view)-0 {
+      margin: 0 !important;
+    }
+
+    .margin-top--$(view)-0,
+    .margin-y--$(view)-0 {
+      margin-top: 0 !important;
+    }
+
+    .margin-right--$(view)-0,
+    .margin-x--$(view)-0 {
+      margin-right: 0 !important;
+    }
+
+    .margin-bottom--$(view)-0,
+    .margin-y--$(view)-0 {
+      margin-bottom: 0 !important;
+    }
+
+    .margin-left--$(view)-0,
+    .margin-x--$(view)-0 {
+      margin-left: 0 !important;
+    }
+
+    .padding--$(view)-1 {
+      padding: calc(var(--spacer) * 0.25) !important;
+    }
+
+    .padding-top--$(view)-1,
+    .padding-y--$(view)-1 {
+      padding-top: calc(var(--spacer) * 0.25) !important;
+    }
+
+    .padding-right--$(view)-1,
+    .padding-x--$(view)-1 {
+      padding-right: calc(var(--spacer) * 0.25) !important;
+    }
+
+    .padding-bottom---$(view)-1,
+    .padding-y--$(view)-1 {
+      padding-bottom: calc(var(--spacer) * 0.25) !important;
+    }
+
+    .padding-left--$(view)-1,
+    .padding-x--$(view)-1 {
+      padding-left: calc(var(--spacer) * 0.25) !important;
+    }
+
+    .padding--$(view)-2 {
+      padding: calc(var(--spacer) * 0.5) !important;
+    }
+
+    .padding-top--$(view)-2,
+    .padding-y--$(view)-2 {
+      padding-top: calc(var(--spacer) * 0.5) !important;
+    }
+
+    .padding-right--$(view)-2,
+    .padding-x--$(view)-2 {
+      padding-right: calc(var(--spacer) * 0.5) !important;
+    }
+
+    .padding-bottom---$(view)-2,
+    .padding-y--$(view)-2 {
+      padding-bottom: calc(var(--spacer) * 0.5) !important;
+    }
+
+    .padding-left--$(view)-2,
+    .padding-x--$(view)-2 {
+      padding-left: calc(var(--spacer) * 0.5) !important;
+    }
+
+    .padding--$(view)-3 {
+      padding: var(--spacer) !important;
+    }
+
+    .padding-top--$(view)-3,
+    .padding-y--$(view)-3 {
+      padding-top: var(--spacer) !important;
+    }
+
+    .padding-right--$(view)-3,
+    .padding-x--$(view)-3 {
+      padding-right: var(--spacer) !important;
+    }
+
+    .padding-bottom---$(view)-3,
+    .padding-y--$(view)-3 {
+      padding-bottom: var(--spacer) !important;
+    }
+
+    .padding-left--$(view)-3,
+    .padding-x--$(view)-3 {
+      padding-left: var(--spacer) !important;
+    }
+
+    .padding--$(view)-4 {
+      padding: calc(var(--spacer) * 1.5) !important;
+    }
+
+    .padding-top--$(view)-4,
+    .padding-y--$(view)-4 {
+      padding-top: calc(var(--spacer) * 1.5) !important;
+    }
+
+    .padding-right--$(view)-4,
+    .padding-x--$(view)-4 {
+      padding-right: calc(var(--spacer) * 1.5) !important;
+    }
+
+    .padding-bottom---$(view)-4,
+    .padding-y--$(view)-4 {
+      padding-bottom: calc(var(--spacer) * 1.5) !important;
+    }
+
+    .padding-left--$(view)-4,
+    .padding-x--$(view)-4 {
+      padding-left: calc(var(--spacer) * 1.5) !important;
+    }
+
+    .padding--$(view)-5 {
+      padding: calc(var(--spacer) * 3) !important;
+    }
+
+    .padding-top--$(view)-5,
+    .padding-y--$(view)-5 {
+      padding-top: calc(var(--spacer) * 3) !important;
+    }
+
+    .padding-right--$(view)-5,
+    .padding-x--$(view)-5 {
+      padding-right: calc(var(--spacer) * 3) !important;
+    }
+
+    .padding-bottom---$(view)-5,
+    .padding-y--$(view)-5 {
+      padding-bottom: calc(var(--spacer) * 3) !important;
+    }
+
+    .padding-left--$(view)-5,
+    .padding-x--$(view)-5 {
+      padding-left: calc(var(--spacer) * 3) !important;
+    }
+
+    .padding--$(view)-0 {
+      padding: 0 !important;
+    }
+
+    .padding-top--$(view)-0,
+    .padding-y--$(view)-0 {
+      padding-top: 0 !important;
+    }
+
+    .padding-right--$(view)-0,
+    .padding-x--$(view)-0 {
+      padding-right: 0 !important;
+    }
+
+    .padding-bottom---$(view)-0,
+    .padding-y--$(view)-0 {
+      padding-bottom: 0 !important;
+    }
+
+    .padding-left--$(view)-0,
+    .padding-x--$(view)-0 {
+      padding-left: 0 !important;
+    }
+
+    .margin--$(view)-neg-1 {
+      margin: calc(var(--spacer) * -0.25) !important;
+    }
+
+    .margin-top--$(view)-neg-1,
+    .margin-y--$(view)-neg-1 {
+      margin-top: calc(var(--spacer) * -0.25) !important;
+    }
+
+    .margin-right--$(view)-neg-1,
+    .margin-x--$(view)-neg-1 {
+      margin-right: calc(var(--spacer) * -0.25) !important;
+    }
+
+    .margin-bottom--$(view)-neg-1,
+    .margin-y--$(view)-neg-1 {
+      margin-bottom: calc(var(--spacer) * -0.25) !important;
+    }
+
+    .margin-left--$(view)-neg-1,
+    .margin-x--$(view)-neg-1 {
+      margin-left: calc(var(--spacer) * -0.25) !important;
+    }
+
+    .margin--$(view)-neg-2 {
+      margin: calc(var(--spacer) * -.5) !important;
+    }
+
+    .margin-top--$(view)-neg-2,
+    .margin-y--$(view)-neg-2 {
+      margin-top: calc(var(--spacer) * -.5) !important;
+    }
+
+    .margin-right--$(view)-neg-2,
+    .margin-x--$(view)-neg-2 {
+      margin-right: calc(var(--spacer) * -.5) !important;
+    }
+
+    .margin-bottom--$(view)-neg-2,
+    .margin-y--$(view)-neg-2 {
+      margin-bottom: calc(var(--spacer) * -.5) !important;
+    }
+
+    .margin-left--$(view)-neg-2,
+    .margin-x--$(view)-neg-2 {
+      margin-left: calc(var(--spacer) * -.5) !important;
+    }
+
+    .margin--$(view)-neg-3 {
+      margin: calc(var(--spacer) * -1) !important;
+    }
+
+    .margin-top--$(view)-neg-3,
+    .margin-y--$(view)-neg-3 {
+      margin-top: calc(var(--spacer) * -1) !important;
+    }
+
+    .margin-right--$(view)-neg-3,
+    .margin-x--$(view)-neg-3 {
+      margin-right: calc(var(--spacer) * -1) !important;
+    }
+
+    .margin-bottom--$(view)-neg-3,
+    .margin-y--$(view)-neg-3 {
+      margin-bottom: calc(var(--spacer) * -1) !important;
+    }
+
+    .margin-left--$(view)-neg-3,
+    .margin-x--$(view)-neg-3 {
+      margin-left: calc(var(--spacer) * -1) !important;
+    }
+
+    .margin--$(view)-neg-4 {
+      margin: calc(var(--spacer) * -1.5) !important;
+    }
+
+    .margin-top--$(view)-neg-4,
+    .margin-y--$(view)-neg-4 {
+      margin-top: calc(var(--spacer) * -1.5) !important;
+    }
+
+    .margin-right--$(view)-neg-4,
+    .margin-x--$(view)-neg-4 {
+      margin-right: calc(var(--spacer) * -1.5) !important;
+    }
+
+    .margin-bottom--$(view)-neg-4,
+    .margin-y--$(view)-neg-4 {
+      margin-bottom: calc(var(--spacer) * -1.5) !important;
+    }
+
+    .margin-left--$(view)-neg-4,
+    .margin-x--$(view)-neg-4 {
+      margin-left: calc(var(--spacer) * -1.5) !important;
+    }
+
+    .margin--$(view)-neg-5 {
+      margin: calc(var(--spacer) * -3) !important;
+    }
+
+    .margin-top--$(view)-neg-5,
+    .margin-y--$(view)-neg-5 {
+      margin-top: calc(var(--spacer) * -3) !important;
+    }
+
+    .margin-right--$(view)-neg-5,
+    .margin-x--$(view)-neg-5 {
+      margin-right: calc(var(--spacer) * -3) !important;
+    }
+
+    .margin-bottom--$(view)-neg-5,
+    .margin-y--$(view)-neg-5 {
+      margin-bottom: calc(var(--spacer) * -3) !important;
+    }
+
+    .margin-left--$(view)-neg-5,
+    .margin-x--$(view)-neg-5 {
+      margin-left: calc(var(--spacer) * -3) !important;
+    }
+
+    .margin--$(view)-auto {
+      margin: auto !important;
+    }
+
+    .margin-top--$(view)-auto,
+    .margin-y--$(view)-auto {
+      margin-top: auto !important;
+    }
+
+    .margin-right--$(view)-auto,
+    .margin-x--$(view)-auto {
+      margin-right: auto !important;
+    }
+
+    .margin-bottom--$(view)-auto,
+    .margin-y--$(view)-auto {
+      margin-bottom: auto !important;
+    }
+
+    .margin-left--$(view)-auto,
+    .margin-x--$(view)-auto {
+      margin-left: auto !important;
+    }
+  }
+}