@digigov/css 1.1.1 → 1.2.0-mobile

package/src/utilities/grid.css

@@ -0,0 +1,221 @@
+.ds-grid {
+  @apply grid grid-cols-12;
+}
+
+.ds-grid-inline {
+  @apply inline-grid;
+}
+
+.ds-grid__col-auto {
+  @apply col-auto;
+}
+
+.xs\:ds-grid__col-span-1,
+.ds-grid__col-span-1 {
+  @apply col-span-1;
+}
+
+.xs\:ds-grid__col-span-2,
+.ds-grid__col-span-2 {
+  @apply col-span-2;
+}
+
+.xs\:ds-grid__col-span-3,
+.ds-grid__col-span-3 {
+  @apply col-span-3;
+}
+
+.xs\:ds-grid__col-span-4,
+.ds-grid__col-span-4 {
+  @apply col-span-4;
+}
+
+.xs\:ds-grid__col-span-5,
+.ds-grid__col-span-5 {
+  @apply col-span-5;
+}
+
+.xs\:ds-grid__col-span-6,
+.ds-grid__col-span-6 {
+  @apply col-span-6;
+}
+
+.xs\:ds-grid__col-span-7,
+.ds-grid__col-span-7 {
+  @apply col-span-7;
+}
+
+.xs\:ds-grid__col-span-8,
+.ds-grid__col-span-8 {
+  @apply col-span-8;
+}
+
+.xs\:ds-grid__col-span-9,
+.ds-grid__col-span-9 {
+  @apply col-span-9;
+}
+
+.xs\:ds-grid__col-span-10,
+.ds-grid__col-span-10 {
+  @apply col-span-10;
+}
+
+.xs\:ds-grid__col-span-11,
+.ds-grid__col-span-11 {
+  @apply col-span-11;
+}
+
+.xs\:ds-grid__col-span-12,
+.ds-grid__col-span-12 {
+  @apply col-span-12;
+}
+
+@media (min-width: 640px) {
+  .sm\:ds-grid__col-span-1 {
+    @apply col-span-1;
+  }
+
+  .sm\:ds-grid__col-span-2 {
+    @apply col-span-2;
+  }
+
+  .sm\:ds-grid__col-span-3 {
+    @apply col-span-3;
+  }
+
+  .sm\:ds-grid__col-span-4 {
+    @apply col-span-4;
+  }
+
+  .sm\:ds-grid__col-span-5 {
+    @apply col-span-5;
+  }
+
+  .sm\:ds-grid__col-span-6 {
+    @apply col-span-6;
+  }
+
+  .sm\:ds-grid__col-span-7 {
+    @apply col-span-7;
+  }
+
+  .sm\:ds-grid__col-span-8 {
+    @apply col-span-8;
+  }
+
+  .sm\:ds-grid__col-span-9 {
+    @apply col-span-9;
+  }
+
+  .sm\:ds-grid__col-span-10 {
+    @apply col-span-10;
+  }
+
+  .sm\:ds-grid__col-span-11 {
+    @apply col-span-11;
+  }
+
+  .sm\:ds-grid__col-span-12 {
+    @apply col-span-12;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:ds-grid__col-span-1 {
+    @apply col-span-1;
+  }
+
+  .md\:ds-grid__col-span-2 {
+    @apply col-span-2;
+  }
+
+  .md\:ds-grid__col-span-3 {
+    @apply col-span-3;
+  }
+
+  .md\:ds-grid__col-span-4 {
+    @apply col-span-4;
+  }
+
+  .md\:ds-grid__col-span-5 {
+    @apply col-span-5;
+  }
+
+  .md\:ds-grid__col-span-6 {
+    @apply col-span-6;
+  }
+
+  .md\:ds-grid__col-span-7 {
+    @apply col-span-7;
+  }
+
+  .md\:ds-grid__col-span-8 {
+    @apply col-span-8;
+  }
+
+  .md\:ds-grid__col-span-9 {
+    @apply col-span-9;
+  }
+
+  .md\:ds-grid__col-span-10 {
+    @apply col-span-10;
+  }
+
+  .md\:ds-grid__col-span-11 {
+    @apply col-span-11;
+  }
+
+  .md\:ds-grid__col-span-12 {
+    @apply col-span-12;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:ds-grid__col-span-1 {
+    @apply col-span-1;
+  }
+
+  .lg\:ds-grid__col-span-2 {
+    @apply col-span-2;
+  }
+
+  .lg\:ds-grid__col-span-3 {
+    @apply col-span-3;
+  }
+
+  .lg\:ds-grid__col-span-4 {
+    @apply col-span-4;
+  }
+
+  .lg\:ds-grid__col-span-5 {
+    @apply col-span-5;
+  }
+
+  .lg\:ds-grid__col-span-6 {
+    @apply col-span-6;
+  }
+
+  .lg\:ds-grid__col-span-7 {
+    @apply col-span-7;
+  }
+
+  .lg\:ds-grid__col-span-8 {
+    @apply col-span-8;
+  }
+
+  .lg\:ds-grid__col-span-9 {
+    @apply col-span-9;
+  }
+
+  .lg\:ds-grid__col-span-10 {
+    @apply col-span-10;
+  }
+
+  .lg\:ds-grid__col-span-11 {
+    @apply col-span-11;
+  }
+
+  .lg\:ds-grid__col-span-12 {
+    @apply col-span-12;
+  }
+}

package/src/utilities/grid.native.css

@@ -0,0 +1,274 @@
+.ds-grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex: 1;
+}
+
+.ds-grid-inline {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.ds-grid__col-auto {
+  flex: 1 1 0%;
+}
+
+.xs\:ds-grid__col-span-1,
+.ds-grid__col-span-1 {
+  flex-basis: 8.333333%;
+  max-width: 8.333333%;
+}
+
+.xs\:ds-grid__col-span-2,
+.ds-grid__col-span-2 {
+  flex-basis: 16.666667%;
+  max-width: 16.666667%;
+}
+
+.xs\:ds-grid__col-span-3,
+.ds-grid__col-span-3 {
+  flex-basis: 25%;
+  max-width: 25%;
+}
+
+.xs\:ds-grid__col-span-4,
+.ds-grid__col-span-4 {
+  flex-basis: 33.333333%;
+  max-width: 33.333333%;
+}
+
+.xs\:ds-grid__col-span-5,
+.ds-grid__col-span-5 {
+  flex-basis: 41.666667%;
+  max-width: 41.666667%;
+}
+
+.xs\:ds-grid__col-span-6,
+.ds-grid__col-span-6 {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.xs\:ds-grid__col-span-7,
+.ds-grid__col-span-7 {
+  flex-basis: 58.333333%;
+  max-width: 58.333333%;
+}
+
+.xs\:ds-grid__col-span-8,
+.ds-grid__col-span-8 {
+  flex-basis: 66.666667%;
+  max-width: 66.666667%;
+}
+
+.xs\:ds-grid__col-span-9,
+.ds-grid__col-span-9 {
+  flex-basis: 75%;
+  max-width: 75%;
+}
+
+.xs\:ds-grid__col-span-10,
+.ds-grid__col-span-10 {
+  flex-basis: 83.333333%;
+  max-width: 83.333333%;
+}
+
+.xs\:ds-grid__col-span-11,
+.ds-grid__col-span-11 {
+  flex-basis: 91.666667%;
+  max-width: 91.666667%;
+}
+
+.xs\:ds-grid__col-span-12,
+.ds-grid__col-span-12 {
+  flex-basis: 100%;
+  max-width: 100%;
+}
+
+@media (min-width: 640px) {
+  .sm\:ds-grid__col-span-1 {
+    flex-basis: 8.333333%;
+    max-width: 8.333333%;
+  }
+
+  .sm\:ds-grid__col-span-2 {
+    flex-basis: 16.666667%;
+    max-width: 16.666667%;
+  }
+
+  .sm\:ds-grid__col-span-3 {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+
+  .sm\:ds-grid__col-span-4 {
+    flex-basis: 33.333333%;
+    max-width: 33.333333%;
+  }
+
+  .sm\:ds-grid__col-span-5 {
+    flex-basis: 41.666667%;
+    max-width: 41.666667%;
+  }
+
+  .sm\:ds-grid__col-span-6 {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .sm\:ds-grid__col-span-7 {
+    flex-basis: 58.333333%;
+    max-width: 58.333333%;
+  }
+
+  .sm\:ds-grid__col-span-8 {
+    flex-basis: 66.666667%;
+    max-width: 66.666667%;
+  }
+
+  .sm\:ds-grid__col-span-9 {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+
+  .sm\:ds-grid__col-span-10 {
+    flex-basis: 83.333333%;
+    max-width: 83.333333%;
+  }
+
+  .sm\:ds-grid__col-span-11 {
+    flex-basis: 91.666667%;
+    max-width: 91.666667%;
+  }
+
+  .sm\:ds-grid__col-span-12 {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:ds-grid__col-span-1 {
+    flex-basis: 8.333333%;
+    max-width: 8.333333%;
+  }
+
+  .md\:ds-grid__col-span-2 {
+    flex-basis: 16.666667%;
+    max-width: 16.666667%;
+  }
+
+  .md\:ds-grid__col-span-3 {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+
+  .md\:ds-grid__col-span-4 {
+    flex-basis: 33.333333%;
+    max-width: 33.333333%;
+  }
+
+  .md\:ds-grid__col-span-5 {
+    flex-basis: 41.666667%;
+    max-width: 41.666667%;
+  }
+
+  .md\:ds-grid__col-span-6 {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .md\:ds-grid__col-span-7 {
+    flex-basis: 58.333333%;
+    max-width: 58.333333%;
+  }
+
+  .md\:ds-grid__col-span-8 {
+    flex-basis: 66.666667%;
+    max-width: 66.666667%;
+  }
+
+  .md\:ds-grid__col-span-9 {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+
+  .md\:ds-grid__col-span-10 {
+    flex-basis: 83.333333%;
+    max-width: 83.333333%;
+  }
+
+  .md\:ds-grid__col-span-11 {
+    flex-basis: 91.666667%;
+    max-width: 91.666667%;
+  }
+
+  .md\:ds-grid__col-span-12 {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:ds-grid__col-span-1 {
+    flex-basis: 8.333333%;
+    max-width: 8.333333%;
+  }
+
+  .lg\:ds-grid__col-span-2 {
+    flex-basis: 16.666667%;
+    max-width: 16.666667%;
+  }
+
+  .lg\:ds-grid__col-span-3 {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+
+  .lg\:ds-grid__col-span-4 {
+    flex-basis: 33.333333%;
+    max-width: 33.333333%;
+  }
+
+  .lg\:ds-grid__col-span-5 {
+    flex-basis: 41.666667%;
+    max-width: 41.666667%;
+  }
+
+  .lg\:ds-grid__col-span-6 {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .lg\:ds-grid__col-span-7 {
+    flex-basis: 58.333333%;
+    max-width: 58.333333%;
+  }
+
+  .lg\:ds-grid__col-span-8 {
+    flex-basis: 66.666667%;
+    max-width: 66.666667%;
+  }
+
+  .lg\:ds-grid__col-span-9 {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+
+  .lg\:ds-grid__col-span-10 {
+    flex-basis: 83.333333%;
+    max-width: 83.333333%;
+  }
+
+  .lg\:ds-grid__col-span-11 {
+    flex-basis: 91.666667%;
+    max-width: 91.666667%;
+  }
+
+  .lg\:ds-grid__col-span-12 {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}