@digigov/css 0.29.13 → 0.29.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "0.29.13",
+  "version": "0.29.15",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -49,7 +49,7 @@
     "tailwindcss": "2.2.6",
     "nodemon": "2.0.7",
     "next": "10.0.9",
-    "@digigov/postcss-banner": "0.3.19",
+    "@digigov/postcss-banner": "0.3.21",
     "rimraf": "3.0.2",
     "postcss-js": "4.0.0",
     "postcss-load-config": "3.1.4"

package/src/base/tailwind.config.js

@@ -3,6 +3,8 @@ const tailwindConfig = require('../../tailwind.config.js');
 const themesPlugin = require('../../themes.plugin')
 
 tailwindConfig.themes.dark = require.resolve('../../../../themes/govgr-dark');
+tailwindConfig.themes.light = require.resolve('../../../../themes/govgr-light');
+
 module.exports = {
 	...tailwindConfig,
 	plugins: [

package/src/components/index.css

@@ -39,3 +39,4 @@
 @import "./task-list.css";
 @import "./stepnav.css";
 @import "./dev-theme.css";
+@import "./kitchensink.css";

package/src/components/kitchensink.css

@@ -0,0 +1,67 @@
+.govgr-kitchensink-all-components {
+  @apply flex flex-col flex-nowrap m-16;
+}
+.govgr-kitchensink-category {
+  @apply flex flex-nowrap gap-32 mb-16;
+}
+.govgr-kitchensink-category__heading {
+  @apply uppercase text-gray300;
+}
+.govgr-kitchensink-letter-content {
+  @apply flex flex-nowrap gap-16;
+}
+.govgr-kitchensink-content {
+  @apply max-w-2xl w-2xl;
+}
+.govgr-kitchensink-content-wide {
+  @apply max-w-4xl w-4xl;
+}
+.govgr-kitchensink-content__info {
+  @apply max-w-2xl;
+}
+.govgr-firma-tags {
+  @apply flex flex-nowrap gap-2 h-16;
+}
+.govgr-kitchensink-card {
+  border-style: dashed;
+  container-type: inline-size;
+
+}
+
+/* COMPONENTS */
+.govgr-kitchensink-card .govgr-modal {
+  position: inherit;
+}
+.govgr-kitchensink-card .govgr-modal__body {
+  margin: 1rem;
+}
+
+.govgr-kitchensink-card .govgr-dropdown {
+  margin-bottom: 20rem;
+}
+.govgr-kitchensink-card .govgr-dropdown.govgr-dropdown--up {
+  margin-top: 20rem;
+  margin-bottom: 0rem;
+}
+.govgr-kitchensink-card .govgr-table__cell .govgr-dropdown {
+  margin: 0 !important;
+}
+.govgr-kitchensink-card .govgr-layout-wrapper__full-height {
+  min-height: inherit;
+}
+@container (min-width: 400px) {
+  .govgr-kitchensink-card .govgr-drawer {
+    min-height: inherit;
+    width: 80%;
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
+  }
+  .govgr-kitchensink-card .govgr-drawer--closed {
+    @apply hidden;
+  }
+  .govgr-kitchensink-card .govgr-drawer__burger-icon {
+    @apply block;
+  }
+  .govgr-kitchensink-card .govgr-drawer__close-icon {
+    @apply block;
+  }
+}

package/src/components/modal.css

@@ -1,17 +1,17 @@
 .govgr-modal {
   @apply hidden justify-center items-center content-center text-left
-  mb-7 text-base-content bg-opacity-50 bg-gray200
+  mb-7 text-base-content bg-opacity-50 bg-gray300
   fixed z-50 left-0 top-0 w-full h-full overflow-auto; 
 }
 .govgr-modal__body {
   @apply w-full max-w-md md:max-w-lg lg:max-w-4xl 
-  h-fit md:h-auto mx-4 overflow-y-auto
+  h-fit md:h-auto overflow-y-auto
   bg-white
   border border-solid border-base200;
   max-height:95vh;
 }
 .govgr-modal__content {
-  @apply grid gap-6 p-5;
+  @apply grid p-10 gap-6 px-6 py-2;
 }
 .govgr-modal__open {
   @apply flex;
@@ -21,6 +21,9 @@
 }
 .govgr-modal__text {
   @apply text-base lg:text-xl text-lg;
+  .govgr-field, .govgr-body {
+    @apply mb-0;
+  }
 }
 .govgr-modal__action {
   @apply flex flex-wrap items-center gap-4;

package/tailwind.config.js

@@ -118,6 +118,8 @@ module.exports = {
       },
       width: {
         fit: "fit-content",
+        '2xl':'42rem' ,
+        '4xl':'56rem' ,
       },
       maxWidth: {
         fit: "fit-content",

package/themes.plugin.js

@@ -36,10 +36,7 @@ function addThemes({ addBase, addComponents, theme,config }) {
       { }
     );
   }
-  const base = {
-  }
-
-
+  const base = {}
   const themes = config("themes");
   const defaultTheme = config('defaultTheme');
   for (const customTheme in themes) {
@@ -47,18 +44,18 @@ function addThemes({ addBase, addComponents, theme,config }) {
     const customThemeObject = require(themes[customTheme]);
     if (customThemeObject.overrides) {
       if(config('mode') === 'jit'){
-        console.log('Loading theme css from source!')
+        console.log('Loading theme css from source...')
         const css = fs.readFileSync(path.resolve(path.dirname(themes[customTheme]),'overrides/index.css')).toString();
         const ctx = {  };
         const {plugins, options} = postcssrc.sync(ctx)
         const result = postcss(plugins)
             .process(css, options).root;
         const cssJs = postcssJs.objectify(result);
-        addComponents({[`.${customTheme}`]: cssJs});
+        base[`.${customTheme}`]= cssJs;
       }else{
-        customThemeObject.overrides.forEach(async(override) => {
+        customThemeObject.overrides.forEach((override) => {
           const cssJs = require(path.resolve(path.dirname(themes[customTheme]),override));
-          addComponents({[`.${customTheme}`]: cssJs});
+          base[`.${customTheme}`] =  cssJs;
         });
       }
     }