@digigov/css 2.0.0-113e6661 → 2.0.0-36b707c1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "2.0.0-113e6661",
+  "version": "2.0.0-36b707c1",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -39,7 +39,7 @@
     ]
   },
   "devDependencies": {
-    "@digigov/cli": "1.1.2-113e6661",
+    "@digigov/cli": "1.1.2-36b707c1",
     "autoprefixer": "10.4.16",
     "cssnano": "4.1.10",
     "postcss": "8.4.4",
@@ -50,12 +50,12 @@
     "tailwindcss": "3.3.5",
     "nodemon": "2.0.7",
     "next": "13.1.1",
-    "@digigov/postcss-banner": "1.0.5-113e6661",
-    "@digigov/cli-build-tailwind": "1.0.2-113e6661",
+    "@digigov/postcss-banner": "1.0.5-36b707c1",
+    "@digigov/cli-build-tailwind": "1.0.2-36b707c1",
     "rimraf": "3.0.2",
     "publint": "0.1.8",
     "stylelint": "15.11.0",
-    "stylelint-plugin-digigov": "1.1.0-113e6661",
+    "stylelint-plugin-digigov": "1.1.0-36b707c1",
     "prettier": "3.2.5"
   },
   "dependencies": {

package/src/components/modal.common.css

@@ -0,0 +1,17 @@
+@tailwind utilities;
+
+@layer utilities {
+  .util-modal__body {
+    @apply bg-base-100 p-6 border border-solid border-base-500;
+  }
+  .util-modal__container {
+    @apply gap-6 -my-4;
+  }
+  .util-modal__content-text {
+    @apply text-base lg:text-xl text-lg;
+  }
+  .util-modal__action {
+    @apply flex flex-wrap items-center gap-4;
+  }
+  
+}

package/src/components/modal.css

@@ -1,3 +1,5 @@
+@import './modal.common.css';
+
 .ds-modal {
   @apply hidden justify-center items-center content-center text-left
   mb-7 text-base-content bg-opacity-50 bg-base-700
@@ -18,14 +20,12 @@
   }
 }
 .ds-modal__body {
-  @apply w-full max-w-md md:max-w-lg lg:max-w-4xl 
-  h-fit md:h-auto overflow-y-auto
-  bg-base-100
-  border border-solid border-base-500 p-6;
+  @apply util-modal__body w-full max-w-md md:max-w-lg lg:max-w-4xl 
+  h-fit md:h-auto overflow-y-auto;
   max-height: 95vh;
 }
 .ds-modal__container {
-  @apply grid gap-6 -my-4;
+  @apply grid util-modal__container;
   .ds-modal__action {
     @apply mb-0;
   }
@@ -34,10 +34,10 @@
   }
 }
 .ds-modal__content {
-  @apply text-base lg:text-xl text-lg;
+  @apply util-modal__content-text;
 }
 .ds-modal__action {
-  @apply flex flex-wrap items-center gap-4;
+  @apply util-modal__action;
   .ds-link,
   .ds-btn {
     @apply mb-0;

package/src/components/modal.native.css

@@ -0,0 +1,18 @@
+@import './modal.common.css';
+
+.ds-modal {
+  @apply absolute justify-center items-center top-0 left-0 right-0 bottom-0;
+  background-color: rgba(var(--color-black-rgb), 0.5);
+}
+.ds-modal__body {
+  @apply util-modal__body;
+}
+.ds-modal__container {
+  @apply util-modal__container;
+}
+.ds-modal__content__text {
+  @apply util-modal__content-text;
+}
+.ds-modal__action {
+  @apply util-modal__action flex-row;
+}

package/src/index.native.css

@@ -17,4 +17,5 @@
 @import './components/warning-text.native';
 @import './components/form.native';
 @import './components/checkboxes.native';
-@import './components/radios.native';
+@import './components/radios.native';
+@import './components/modal.native';

package/src/utilities/gap.css

@@ -0,0 +1,141 @@
+.ds-gap-1 {
+  @apply gap-1;
+}
+.ds-gap-2 {
+  @apply gap-2;
+}
+.ds-gap-4 {
+  @apply gap-4;
+}
+.ds-gap-6 {
+  @apply gap-6;
+}
+.ds-gap-8 {
+  @apply gap-8;
+}
+.ds-gap-10 {
+  @apply gap-10;
+}
+.ds-gap-12 {
+  @apply gap-12;
+}
+.ds-gap-xs-1 {
+  @apply gap-1;
+}
+.ds-gap-xs-2 {
+  @apply gap-2;
+}
+.ds-gap-xs-4 {
+  @apply gap-4;
+}
+.ds-gap-xs-5 {
+  @apply gap-5;
+}
+.ds-gap-xs-6 {
+  @apply gap-6;
+}
+.ds-gap-xs-8 {
+  @apply gap-8;
+}
+.ds-gap-xs-10 {
+  @apply gap-10;
+}
+.ds-gap-xs-12 {
+  @apply gap-12;
+}
+.ds-gap-sm-1 {
+  @apply sm:gap-1;
+}
+.ds-gap-sm-2 {
+  @apply sm:gap-2;
+}
+.ds-gap-sm-4 {
+  @apply sm:gap-4;
+}
+.ds-gap-sm-5 {
+  @apply sm:gap-5;
+}
+.ds-gap-sm-6 {
+  @apply sm:gap-6;
+}
+.ds-gap-sm-8 {
+  @apply sm:gap-8;
+}
+.ds-gap-sm-10 {
+  @apply sm:gap-10;
+}
+.ds-gap-sm-12 {
+  @apply sm:gap-12;
+}
+.ds-gap-md-1 {
+  @apply md:gap-1;
+}
+.ds-gap-md-2 {
+  @apply md:gap-2;
+}
+.ds-gap-md-4 {
+  @apply md:gap-4;
+}
+.ds-gap-md-5 {
+  @apply md:gap-5;
+}
+.ds-gap-md-6 {
+  @apply md:gap-6;
+}
+.ds-gap-md-8 {
+  @apply md:gap-8;
+}
+.ds-gap-md-10 {
+  @apply md:gap-10;
+}
+.ds-gap-md-12 {
+  @apply md:gap-12;
+}
+.ds-gap-lg-1 {
+  @apply lg:gap-1;
+}
+.ds-gap-lg-2 {
+  @apply lg:gap-2;
+}
+.ds-gap-lg-4 {
+  @apply lg:gap-4;
+}
+.ds-gap-lg-5 {
+  @apply lg:gap-5;
+}
+.ds-gap-lg-6 {
+  @apply lg:gap-6;
+}
+.ds-gap-lg-8 {
+  @apply lg:gap-8;
+}
+.ds-gap-lg-10 {
+  @apply lg:gap-10;
+}
+.ds-gap-lg-12 {
+  @apply lg:gap-12;
+}
+.ds-gap-xl-1 {
+  @apply xl:gap-1;
+}
+.ds-gap-xl-2 {
+  @apply xl:gap-2;
+}
+.ds-gap-xl-4 {
+  @apply xl:gap-4;
+}
+.ds-gap-xl-5 {
+  @apply xl:gap-5;
+}
+.ds-gap-xl-6 {
+  @apply xl:gap-6;
+}
+.ds-gap-xl-8 {
+  @apply xl:gap-8;
+}
+.ds-gap-xl-10 {
+  @apply xl:gap-10;
+}
+.ds-gap-xl-12 {
+  @apply xl:gap-12;
+}

package/src/utilities/index.css

@@ -1,3 +1,6 @@
 @import "./layout.css";
-@import "./spacing.css";
+@import "./gap.css";
+@import "./margin.css";
+@import "./padding.css";
+@import "./margin.css";
 @import "./print.css";

package/src/utilities/index.native.css

@@ -1,2 +1,6 @@
 @import "./layout.native.css";
-@import "./spacing.css";
+@import "./gap.css";
+@import "./margin.css";
+@import "./padding.css";
+@import "./margin.css";
+@import "./print.css";