@digigov/css 2.0.0-rc.7 → 2.0.2

package/src/utilities/index.native.css

@@ -0,0 +1,6 @@
+@import './layout.native.css';
+@import './gap.css';
+@import './margin.css';
+@import './padding.css';
+@import './margin.css';
+@import './print.css';

package/src/utilities/layout.css

@@ -0,0 +1,231 @@
+.ds-display-flex {
+  @apply flex !important;
+}
+.ds-display-block {
+  @apply block !important;
+}
+.ds-display-none {
+  @apply hidden !important;
+}
+
+.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/layout.native.css

@@ -0,0 +1,278 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+.ds-display-flex {
+  @apply flex !important;
+}
+.ds-display-block {
+  @apply flex !important;
+}
+.ds-display-none {
+  @apply hidden !important;
+}
+
+.ds-grid {
+  @apply flex flex-row flex-wrap flex-1;
+}
+.ds-grid-inline {
+  @apply flex flex-row flex-wrap;
+}
+.ds-grid__col-auto {
+  flex: 1 1 0%;
+}
+
+.xs\:ds-grid__col-span-1,
+.ds-grid__col-span-1 {
+  flex-basis: 8.3333%;
+  max-width: 8.3333%;
+}
+
+.xs\:ds-grid__col-span-2,
+.ds-grid__col-span-2 {
+  flex-basis: 16.6667%;
+  max-width: 16.6667%;
+}
+
+.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.3333%;
+  max-width: 33.3333%;
+}
+
+.xs\:ds-grid__col-span-5,
+.ds-grid__col-span-5 {
+  flex-basis: 41.6667%;
+  max-width: 41.6667%;
+}
+
+.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.3333%;
+  max-width: 58.3333%;
+}
+
+.xs\:ds-grid__col-span-8,
+.ds-grid__col-span-8 {
+  flex-basis: 66.6667%;
+  max-width: 66.6667%;
+}
+
+.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.3333%;
+  max-width: 83.3333%;
+}
+
+.xs\:ds-grid__col-span-11,
+.ds-grid__col-span-11 {
+  flex-basis: 91.6667%;
+  max-width: 91.6667%;
+}
+
+.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.3333%;
+    max-width: 8.3333%;
+  }
+
+  .sm\:ds-grid__col-span-2 {
+    flex-basis: 16.6667%;
+    max-width: 16.6667%;
+  }
+
+  .sm\:ds-grid__col-span-3 {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+
+  .sm\:ds-grid__col-span-4 {
+    flex-basis: 33.3333%;
+    max-width: 33.3333%;
+  }
+
+  .sm\:ds-grid__col-span-5 {
+    flex-basis: 41.6667%;
+    max-width: 41.6667%;
+  }
+
+  .sm\:ds-grid__col-span-6 {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .sm\:ds-grid__col-span-7 {
+    flex-basis: 58.3333%;
+    max-width: 58.3333%;
+  }
+
+  .sm\:ds-grid__col-span-8 {
+    flex-basis: 66.6667%;
+    max-width: 66.6667%;
+  }
+
+  .sm\:ds-grid__col-span-9 {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+
+  .sm\:ds-grid__col-span-10 {
+    flex-basis: 83.3333%;
+    max-width: 83.3333%;
+  }
+
+  .sm\:ds-grid__col-span-11 {
+    flex-basis: 91.6667%;
+    max-width: 91.6667%;
+  }
+
+  .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.3333%;
+    max-width: 8.3333%;
+  }
+
+  .md\:ds-grid__col-span-2 {
+    flex-basis: 16.6667%;
+    max-width: 16.6667%;
+  }
+
+  .md\:ds-grid__col-span-3 {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+
+  .md\:ds-grid__col-span-4 {
+    flex-basis: 33.3333%;
+    max-width: 33.3333%;
+  }
+
+  .md\:ds-grid__col-span-5 {
+    flex-basis: 41.6667%;
+    max-width: 41.6667%;
+  }
+
+  .md\:ds-grid__col-span-6 {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .md\:ds-grid__col-span-7 {
+    flex-basis: 58.3333%;
+    max-width: 58.3333%;
+  }
+
+  .md\:ds-grid__col-span-8 {
+    flex-basis: 66.6667%;
+    max-width: 66.6667%;
+  }
+
+  .md\:ds-grid__col-span-9 {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+
+  .md\:ds-grid__col-span-10 {
+    flex-basis: 83.3333%;
+    max-width: 83.3333%;
+  }
+
+  .md\:ds-grid__col-span-11 {
+    flex-basis: 91.6667%;
+    max-width: 91.6667%;
+  }
+
+  .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.3333%;
+    max-width: 8.3333%;
+  }
+
+  .lg\:ds-grid__col-span-2 {
+    flex-basis: 16.6667%;
+    max-width: 16.6667%;
+  }
+
+  .lg\:ds-grid__col-span-3 {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+
+  .lg\:ds-grid__col-span-4 {
+    flex-basis: 33.3333%;
+    max-width: 33.3333%;
+  }
+
+  .lg\:ds-grid__col-span-5 {
+    flex-basis: 41.6667%;
+    max-width: 41.6667%;
+  }
+
+  .lg\:ds-grid__col-span-6 {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .lg\:ds-grid__col-span-7 {
+    flex-basis: 58.3333%;
+    max-width: 58.3333%;
+  }
+
+  .lg\:ds-grid__col-span-8 {
+    flex-basis: 66.6667%;
+    max-width: 66.6667%;
+  }
+
+  .lg\:ds-grid__col-span-9 {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+
+  .lg\:ds-grid__col-span-10 {
+    flex-basis: 83.3333%;
+    max-width: 83.3333%;
+  }
+
+  .lg\:ds-grid__col-span-11 {
+    flex-basis: 91.6667%;
+    max-width: 91.6667%;
+  }
+
+  .lg\:ds-grid__col-span-12 {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}