suitcss-rails 1.0.0

data/app/assets/stylesheets/suitcss/utils.css

@@ -0,0 +1,9 @@
+@import "utils/align";
+@import "utils/display";
+@import "utils/layout";
+@import "utils/link";
+@import "utils/offset";
+@import "utils/position";
+@import "utils/size";
+@import "utils/text";
+@import "utils/flex";

data/app/assets/stylesheets/suitcss/utils/after.css

@@ -0,0 +1,4 @@
+@import "after/index";
+@import "after/sm";
+@import "after/md";
+@import "after/lg";

data/app/assets/stylesheets/suitcss/utils/after/index.css

@@ -0,0 +1,117 @@
+/**
+ * @define utilities
+ * Specify the proportional offset after an element.
+ * Intentional redundancy build into each set of unit classes.
+ * Supports: 2, 4, 5, 6, 8, 10, 12 section
+ */
+
+.u-after1of12 {
+    margin-right: calc(100% * 1 / 12) !important;
+}
+
+.u-after1of10 {
+    margin-right: 10% !important;
+}
+
+.u-after1of8 {
+    margin-right: 12.5% !important;
+}
+
+.u-after1of6,
+.u-after2of12 {
+    margin-right: calc(100% * 1 / 6) !important;
+}
+
+.u-after1of5,
+.u-after2of10 {
+    margin-right: 20% !important;
+}
+
+.u-after1of4,
+.u-after2of8,
+.u-after3of12 {
+    margin-right: 25% !important;
+}
+
+.u-after3of10 {
+    margin-right: 30% !important;
+}
+
+.u-after1of3,
+.u-after2of6,
+.u-after4of12 {
+    margin-right: calc(100% * 1 / 3) !important;
+}
+
+.u-after3of8 {
+    margin-right: 37.5% !important;
+}
+
+.u-after2of5,
+.u-after4of10 {
+    margin-right: 40% !important;
+}
+
+.u-after5of12 {
+    margin-right: calc(100% * 5 / 12) !important;
+}
+
+.u-after1of2,
+.u-after2of4,
+.u-after3of6,
+.u-after4of8,
+.u-after5of10,
+.u-after6of12 {
+    margin-right: 50% !important;
+}
+
+.u-after7of12 {
+    margin-right: calc(100% * 7 / 12) !important;
+}
+
+.u-after3of5,
+.u-after6of10 {
+    margin-right: 60% !important;
+}
+
+.u-after5of8 {
+    margin-right: 62.5% !important;
+}
+
+.u-after2of3,
+.u-after4of6,
+.u-after8of12 {
+    margin-right: calc(100% * 2 / 3) !important;
+}
+
+.u-after7of10 {
+    margin-right: 70% !important;
+}
+
+.u-after3of4,
+.u-after6of8,
+.u-after9of12 {
+    margin-right: 75% !important;
+}
+
+.u-after4of5,
+.u-after8of10 {
+    margin-right: 80% !important;
+}
+
+.u-after5of6,
+.u-after10of12 {
+    margin-right: calc(100% * 5 / 6) !important;
+}
+
+.u-after7of8 {
+    margin-right: 87.5% !important;
+}
+
+.u-after9of10 {
+    margin-right: 90% !important;
+}
+
+.u-after11of12 {
+    margin-right: calc(100% * 11 / 12) !important;
+}

data/app/assets/stylesheets/suitcss/utils/after/lg.css

@@ -0,0 +1,127 @@
+/**
+ * @define utilities
+ * Offset: breakpoint 3 (large)
+ *
+ * Specify the proportional offset after an element.
+ * Intentional redundancy build into each set of unit classes.
+ * Supports: 2, 4, 5, 6, 8, 10, 12 section
+ */
+
+@media (--lg-viewport) {
+
+    .u-lg-afterNone {
+        margin-right: 0 !important;
+    }
+
+    .u-lg-after1of12 {
+        margin-right: calc(100% * 1 / 12) !important;
+    }
+
+    .u-lg-after1of10 {
+        margin-right: 10% !important;
+    }
+
+    .u-lg-after1of8 {
+        margin-right: 12.5% !important;
+    }
+
+    .u-lg-after1of6,
+    .u-lg-after2of12 {
+        margin-right: calc(100% * 1 / 6) !important;
+    }
+
+    .u-lg-after1of5,
+    .u-lg-after2of10 {
+        margin-right: 20% !important;
+    }
+
+    .u-lg-after1of4,
+    .u-lg-after2of8,
+    .u-lg-after3of12 {
+        margin-right: 25% !important;
+    }
+
+    .u-lg-after3of10 {
+        margin-right: 30% !important;
+    }
+
+    .u-lg-after1of3,
+    .u-lg-after2of6,
+    .u-lg-after4of12 {
+        margin-right: calc(100% * 1 / 3) !important;
+    }
+
+    .u-lg-after3of8 {
+        margin-right: 37.5% !important;
+    }
+
+    .u-lg-after2of5,
+    .u-lg-after4of10 {
+        margin-right: 40% !important;
+    }
+
+    .u-lg-after5of12 {
+        margin-right: calc(100% * 5 / 12) !important;
+    }
+
+    .u-lg-after1of2,
+    .u-lg-after2of4,
+    .u-lg-after3of6,
+    .u-lg-after4of8,
+    .u-lg-after5of10,
+    .u-lg-after6of12 {
+        margin-right: 50% !important;
+    }
+
+    .u-lg-after7of12 {
+        margin-right: calc(100% * 7 / 12) !important;
+    }
+
+    .u-lg-after3of5,
+    .u-lg-after6of10 {
+        margin-right: 60% !important;
+    }
+
+    .u-lg-after5of8 {
+        margin-right: 62.5% !important;
+    }
+
+    .u-lg-after2of3,
+    .u-lg-after4of6,
+    .u-lg-after8of12 {
+        margin-right: calc(100% * 2 / 3) !important;
+    }
+
+    .u-lg-after7of10 {
+        margin-right: 70% !important;
+    }
+
+    .u-lg-after3of4,
+    .u-lg-after6of8,
+    .u-lg-after9of12 {
+        margin-right: 75% !important;
+    }
+
+    .u-lg-after4of5,
+    .u-lg-after8of10 {
+        margin-right: 80% !important;
+    }
+
+    .u-lg-after5of6,
+    .u-lg-after10of12 {
+        margin-right: calc(100% * 5 / 6) !important;
+    }
+
+    .u-lg-after7of8 {
+        margin-right: 87.5% !important;
+    }
+
+    .u-lg-after9of10 {
+        margin-right: 90% !important;
+    }
+
+    .u-lg-after11of12 {
+        margin-right: calc(100% * 11 / 12) !important;
+    }
+
+}

data/app/assets/stylesheets/suitcss/utils/after/md.css

@@ -0,0 +1,127 @@
+/**
+ * @define utilities
+ * Offset: breakpoint 2 (medium)
+ *
+ * Specify the proportional offset after an element.
+ * Intentional redundancy build into each set of unit classes.
+ * Supports: 2, 4, 5, 6, 8, 10, 12 section
+ */
+
+@media (--md-viewport) {
+
+    .u-md-afterNone {
+        margin-right: 0 !important;
+    }
+
+    .u-md-after1of12 {
+        margin-right: calc(100% * 1 / 12) !important;
+    }
+
+    .u-md-after1of10 {
+        margin-right: 10% !important;
+    }
+
+    .u-md-after1of8 {
+        margin-right: 12.5% !important;
+    }
+
+    .u-md-after1of6,
+    .u-md-after2of12 {
+        margin-right: calc(100% * 1 / 6) !important;
+    }
+
+    .u-md-after1of5,
+    .u-md-after2of10 {
+        margin-right: 20% !important;
+    }
+
+    .u-md-after1of4,
+    .u-md-after2of8,
+    .u-md-after3of12 {
+        margin-right: 25% !important;
+    }
+
+    .u-md-after3of10 {
+        margin-right: 30% !important;
+    }
+
+    .u-md-after1of3,
+    .u-md-after2of6,
+    .u-md-after4of12 {
+        margin-right: calc(100% * 1 / 3) !important;
+    }
+
+    .u-md-after3of8 {
+        margin-right: 37.5% !important;
+    }
+
+    .u-md-after2of5,
+    .u-md-after4of10 {
+        margin-right: 40% !important;
+    }
+
+    .u-md-after5of12 {
+        margin-right: calc(100% * 5 / 12) !important;
+    }
+
+    .u-md-after1of2,
+    .u-md-after2of4,
+    .u-md-after3of6,
+    .u-md-after4of8,
+    .u-md-after5of10,
+    .u-md-after6of12 {
+        margin-right: 50% !important;
+    }
+
+    .u-md-after7of12 {
+        margin-right: calc(100% * 7 / 12) !important;
+    }
+
+    .u-md-after3of5,
+    .u-md-after6of10 {
+        margin-right: 60% !important;
+    }
+
+    .u-md-after5of8 {
+        margin-right: 62.5% !important;
+    }
+
+    .u-md-after2of3,
+    .u-md-after4of6,
+    .u-md-after8of12 {
+        margin-right: calc(100% * 2 / 3) !important;
+    }
+
+    .u-md-after7of10 {
+        margin-right: 70% !important;
+    }
+
+    .u-md-after3of4,
+    .u-md-after6of8,
+    .u-md-after9of12 {
+        margin-right: 75% !important;
+    }
+
+    .u-md-after4of5,
+    .u-md-after8of10 {
+        margin-right: 80% !important;
+    }
+
+    .u-md-after5of6,
+    .u-md-after10of12 {
+        margin-right: calc(100% * 5 / 6) !important;
+    }
+
+    .u-md-after7of8 {
+        margin-right: 87.5% !important;
+    }
+
+    .u-md-after9of10 {
+        margin-right: 90% !important;
+    }
+
+    .u-md-after11of12 {
+        margin-right: calc(100% * 11 / 12) !important;
+    }
+
+}

data/app/assets/stylesheets/suitcss/utils/after/sm.css

@@ -0,0 +1,127 @@
+/**
+ * @define utilities
+ * Offset: breakpoint 1 (small)
+ *
+ * Specify the proportional offset after an element.
+ * Intentional redundancy build into each set of unit classes.
+ * Supports: 2, 4, 5, 6, 8, 10, 12 section
+ */
+
+@media (--sm-viewport) {
+
+    .u-sm-afterNone {
+        margin-right: 0 !important;
+    }
+
+    .u-sm-after1of12 {
+        margin-right: calc(100% * 1 / 12) !important;
+    }
+
+    .u-sm-after1of10 {
+        margin-right: 10% !important;
+    }
+
+    .u-sm-after1of8 {
+        margin-right: 12.5% !important;
+    }
+
+    .u-sm-after1of6,
+    .u-sm-after2of12 {
+        margin-right: calc(100% * 1 / 6) !important;
+    }
+
+    .u-sm-after1of5,
+    .u-sm-after2of10 {
+        margin-right: 20% !important;
+    }
+
+    .u-sm-after1of4,
+    .u-sm-after2of8,
+    .u-sm-after3of12 {
+        margin-right: 25% !important;
+    }
+
+    .u-sm-after3of10 {
+        margin-right: 30% !important;
+    }
+
+    .u-sm-after1of3,
+    .u-sm-after2of6,
+    .u-sm-after4of12 {
+        margin-right: calc(100% * 1 / 3) !important;
+    }
+
+    .u-sm-after3of8 {
+        margin-right: 37.5% !important;
+    }
+
+    .u-sm-after2of5,
+    .u-sm-after4of10 {
+        margin-right: 40% !important;
+    }
+
+    .u-sm-after5of12 {
+        margin-right: calc(100% * 5 / 12) !important;
+    }
+
+    .u-sm-after1of2,
+    .u-sm-after2of4,
+    .u-sm-after3of6,
+    .u-sm-after4of8,
+    .u-sm-after5of10,
+    .u-sm-after6of12 {
+        margin-right: 50% !important;
+    }
+
+    .u-sm-after7of12 {
+        margin-right: calc(100% * 7 / 12) !important;
+    }
+
+    .u-sm-after3of5,
+    .u-sm-after6of10 {
+        margin-right: 60% !important;
+    }
+
+    .u-sm-after5of8 {
+        margin-right: 62.5% !important;
+    }
+
+    .u-sm-after2of3,
+    .u-sm-after4of6,
+    .u-sm-after8of12 {
+        margin-right: calc(100% * 2 / 3) !important;
+    }
+
+    .u-sm-after7of10 {
+        margin-right: 70% !important;
+    }
+
+    .u-sm-after3of4,
+    .u-sm-after6of8,
+    .u-sm-after9of12 {
+        margin-right: 75% !important;
+    }
+
+    .u-sm-after4of5,
+    .u-sm-after8of10 {
+        margin-right: 80% !important;
+    }
+
+    .u-sm-after5of6,
+    .u-sm-after10of12 {
+        margin-right: calc(100% * 5 / 6) !important;
+    }
+
+    .u-sm-after7of8 {
+        margin-right: 87.5% !important;
+    }
+
+    .u-sm-after9of10 {
+        margin-right: 90% !important;
+    }
+
+    .u-sm-after11of12 {
+        margin-right: calc(100% * 11 / 12) !important;
+    }
+
+}