@digigov/css 1.0.0-002c630d → 1.0.0-21c8c3dc

package/src/pages/index.js

@@ -34,7 +34,7 @@ export default function Home() {
 
 
       <div className="govgr-masthead govgr-background-dark">
-        <div className="govgr-width-container">
+        <div className="govgr-container">
           <div className="govgr-main-wrapper">
             <div className="govgr-grid-column-two-thirds">
               <img className="govgr-masthead__logo" src="https://dilosi.services.gov.gr/minedu-logo.svg" alt="minedu logo" />
@@ -53,7 +53,7 @@ export default function Home() {
         </div>
       </div>
 
-      <div className="govgr-width-container">
+      <div className="govgr-container">
         <div className="govgr-main-wrapper">
           <div className="govgr-grid-column-two-thirds">
 
@@ -136,12 +136,14 @@ export default function Home() {
               Η διαδικασία έκδοσης του διαβατηρίου σας μπορεί να διαρκέσει εώς 10 μέρες, εφόσον η αίτηση σας δεν έχει λάθη.
             </blockquote>
 
-            <div className="govgr-error-summary">
-              <h3 className="govgr-heading-sm">Υπήρξε κάποιο πρόβλημα</h3>
-              <a className="govgr-link" href="#"> Πρέπει να συμπληρώσετε το έτος</a>
+            <div class="govgr-notification-banner govgr-notification-banner--error">
+              <div class="govgr-notification-banner__content">
+                <h3 className="govgr-heading-sm">Υπήρξε κάποιο πρόβλημα</h3>
+                <a className="govgr-link" href="#"> Πρέπει να συμπληρώσετε το έτος</a>
+              </div>
             </div>
 
-            <div className="govgr-panel govgr-panel--confirmation">
+            <div className="govgr-panel">
               <h1 className="govgr-panel__title">Η φόρμα υποβλήθηκε επιτυχώς</h1>
               <div className="govgr-panel__body">
                 Ο κωδικός εγγράφου <br />
@@ -322,11 +324,11 @@ export default function Home() {
       </div>
 
       <footer className="govgr-footer" role="contentinfo">
-        <div className="govgr-width-container">
+        <div className="govgr-container">
           <div className="govgr-footer__meta">
             <div className="govgr-footer__meta-item govgr-footer__meta-item--grow">
               <div className="govgr-footer__content">
-                <p className="govgr-footer__licence-description">
+                <p className="govgr-footer__copyright">
                   Υλοποίηση από το <a href="https://mindigital.gr/" target="_blank" rel="noreferrer noopener" className="govgr-link"> Υπουργείο Ψηφιακής Διακυβέρνησης <span className="govgr-visually-hidden">(ανοίγει σε καινούρια καρτέλα) </span></a>
                 </p>
               </div>
@@ -339,7 +341,7 @@ export default function Home() {
       </footer>
 
       <footer className="govgr-footer" role="contentinfo">
-        <div className="govgr-width-container">
+        <div className="govgr-container">
           <div className="govgr-footer__navigation">
             <div className="govgr-footer__section">
               <h2 className="govgr-footer__heading govgr-heading-sm">Λίστα δύο στηλών</h2>
@@ -399,7 +401,7 @@ export default function Home() {
                   <img className="govgr-footer__logo" src="/img/government-logo2.svg" alt="government logo" />
                   <img className="govgr-footer__logo" src="/img/government-logo2.svg" alt="government logo" />
                 </div>
-                <p className="govgr-footer__licence-description">
+                <p className="govgr-footer__copyright">
                   Υλοποίηση από το <a href="https://mindigital.gr/" target="_blank" rel="noreferrer noopener" className="govgr-footer__link"> Υπουργείο Ψηφιακής Διακυβέρνησης <span className="govgr-visually-hidden">(ανοίγει σε καινούρια καρτέλα)</span></a>
                 </p>
               </div>

package/src/utilities/index.css

@@ -394,27 +394,6 @@
 .govgr-grid-inline {
   @apply inline-grid;
 }
-.govgr-grid__gap-1 {
-  @apply gap-1;
-}
-.govgr-grid__gap-2 {
-  @apply gap-2;
-}
-.govgr-grid__gap-4 {
-  @apply gap-4;
-}
-.govgr-grid__gap-6 {
-  @apply gap-6;
-}
-.govgr-grid__gap-8 {
-  @apply gap-8;
-}
-.govgr-grid__gap-10 {
-  @apply gap-10;
-}
-.govgr-grid__gap-12 {
-  @apply gap-12;
-}
 .govgr-grid__col-auto {
   @apply col-auto;
 }
@@ -462,4 +441,145 @@
 }
 .govgr-print-visible-inline {
   @apply print:inline !important;
+}
+.govgr-gap-1 {
+  @apply gap-1;
+}
+.govgr-gap-2 {
+  @apply gap-2;
+}
+.govgr-gap-4 {
+  @apply gap-4;
+}
+.govgr-gap-6 {
+  @apply gap-6;
+}
+.govgr-gap-8 {
+  @apply gap-8;
+}
+.govgr-gap-10 {
+  @apply gap-10;
+}
+.govgr-gap-12 {
+  @apply gap-12;
+}
+.govgr-gap-xs-1 {
+  @apply gap-1;
+}
+.govgr-gap-xs-2 {
+  @apply gap-2;
+}
+.govgr-gap-xs-4 {
+  @apply gap-4;
+}
+.govgr-gap-xs-5 {
+  @apply gap-5;
+}
+.govgr-gap-xs-6 {
+  @apply gap-6;
+}
+.govgr-gap-xs-8 {
+  @apply gap-8;
+}
+.govgr-gap-xs-10 {
+  @apply gap-10;
+}
+.govgr-gap-xs-12 {
+  @apply gap-12;
+}
+.govgr-gap-sm-1 {
+  @apply sm:gap-1;
+}
+.govgr-gap-sm-2 {
+  @apply sm:gap-2;
+}
+.govgr-gap-sm-4 {
+  @apply sm:gap-4;
+}
+.govgr-gap-sm-5 {
+  @apply sm:gap-5;
+}
+.govgr-gap-sm-6 {
+  @apply sm:gap-6;
+}
+.govgr-gap-sm-8 {
+  @apply sm:gap-8;
+}
+.govgr-gap-sm-10 {
+  @apply sm:gap-10;
+}
+.govgr-gap-sm-12 {
+  @apply sm:gap-12;
+}
+.govgr-gap-md-1 {
+  @apply md:gap-1;
+}
+.govgr-gap-md-2 {
+  @apply md:gap-2;
+}
+.govgr-gap-md-4 {
+  @apply md:gap-4;
+}
+.govgr-gap-md-5 {
+  @apply md:gap-5;
+}
+.govgr-gap-md-6 {
+  @apply md:gap-6;
+}
+.govgr-gap-md-8 {
+  @apply md:gap-8;
+}
+.govgr-gap-md-10 {
+  @apply md:gap-10;
+}
+.govgr-gap-md-12 {
+  @apply md:gap-12;
+}
+.govgr-gap-lg-1 {
+  @apply lg:gap-1;
+}
+.govgr-gap-lg-2 {
+  @apply lg:gap-2;
+}
+.govgr-gap-lg-4 {
+  @apply lg:gap-4;
+}
+.govgr-gap-lg-5 {
+  @apply lg:gap-5;
+}
+.govgr-gap-lg-6 {
+  @apply lg:gap-6;
+}
+.govgr-gap-lg-8 {
+  @apply lg:gap-8;
+}
+.govgr-gap-lg-10 {
+  @apply lg:gap-10;
+}
+.govgr-gap-lg-12 {
+  @apply lg:gap-12;
+}
+.govgr-gap-xl-1 {
+  @apply xl:gap-1;
+}
+.govgr-gap-xl-2 {
+  @apply xl:gap-2;
+}
+.govgr-gap-xl-4 {
+  @apply xl:gap-4;
+}
+.govgr-gap-xl-5 {
+  @apply xl:gap-5;
+}
+.govgr-gap-xl-6 {
+  @apply xl:gap-6;
+}
+.govgr-gap-xl-8 {
+  @apply xl:gap-8;
+}
+.govgr-gap-xl-10 {
+  @apply xl:gap-10;
+}
+.govgr-gap-xl-12 {
+  @apply xl:gap-12;
 }

package/src/utilities/utilities.css

@@ -390,32 +390,11 @@
   .govgr-pr-12 {
     @apply pr-11 md:pr-20 !important;
   }
-  .govgr-grid {
-    @apply grid grid-cols-12;
-  }
   .govgr-grid-inline {
     @apply inline-grid;
   }
-  .govgr-grid__gap-1 {
-    @apply gap-1;
-  }
-  .govgr-grid__gap-2 {
-    @apply gap-2;
-  }
-  .govgr-grid__gap-4 {
-    @apply gap-4;
-  }
-  .govgr-grid__gap-6 {
-    @apply gap-6;
-  }
-  .govgr-grid__gap-8 {
-    @apply gap-8;
-  }
-  .govgr-grid__gap-10 {
-    @apply gap-10;
-  }
-  .govgr-grid__gap-12 {
-    @apply gap-12;
+  .govgr-grid {
+    @apply grid grid-cols-12;
   }
   .govgr-grid__col-auto {
     @apply col-auto;
@@ -465,4 +444,149 @@
   .govgr-print-visible-inline {
     @apply print:inline !important;
   }
-};
+  .govgr-gap-1 {
+    @apply gap-1;
+  }
+  .govgr-gap-2 {
+    @apply gap-2;
+  }
+  .govgr-gap-4 {
+    @apply gap-4;
+  }
+  .govgr-gap-5 {
+    @apply gap-5;
+  }
+  .govgr-gap-6 {
+    @apply gap-6;
+  }
+  .govgr-gap-8 {
+    @apply gap-8;
+  }
+  .govgr-gap-10 {
+    @apply gap-10;
+  }
+  .govgr-gap-12 {
+    @apply gap-12;
+  }
+  .govgr-gap-xs-1 {
+    @apply gap-1;
+  }
+  .govgr-gap-xs-2 {
+    @apply gap-2;
+  }
+  .govgr-gap-xs-4 {
+    @apply gap-4;
+  }
+  .govgr-gap-xs-5 {
+    @apply gap-5;
+  }
+  .govgr-gap-xs-6 {
+    @apply gap-6;
+  }
+  .govgr-gap-xs-8 {
+    @apply gap-8;
+  }
+  .govgr-gap-xs-10 {
+    @apply gap-10;
+  }
+  .govgr-gap-xs-12 {
+    @apply gap-12;
+  }
+  .govgr-gap-sm-1 {
+    @apply sm:gap-1;
+  }
+  .govgr-gap-sm-2 {
+    @apply sm:gap-2;
+  }
+  .govgr-gap-sm-4 {
+    @apply sm:gap-4;
+  }
+  .govgr-gap-sm-5 {
+    @apply sm:gap-5;
+  }
+  .govgr-gap-sm-6 {
+    @apply sm:gap-6;
+  }
+  .govgr-gap-sm-8 {
+    @apply sm:gap-8;
+  }
+  .govgr-gap-sm-10 {
+    @apply sm:gap-10;
+  }
+  .govgr-gap-sm-12 {
+    @apply sm:gap-12;
+  }
+  .govgr-gap-md-1 {
+    @apply md:gap-1;
+  }
+  .govgr-gap-md-2 {
+    @apply md:gap-2;
+  }
+  .govgr-gap-md-4 {
+    @apply md:gap-4;
+  }
+  .govgr-gap-md-5 {
+    @apply md:gap-5;
+  }
+  .govgr-gap-md-6 {
+    @apply md:gap-6;
+  }
+  .govgr-gap-md-8 {
+    @apply md:gap-8;
+  }
+  .govgr-gap-md-10 {
+    @apply md:gap-10;
+  }
+  .govgr-gap-md-12 {
+    @apply md:gap-12;
+  }
+  .govgr-gap-lg-1 {
+    @apply lg:gap-1;
+  }
+  .govgr-gap-lg-2 {
+    @apply lg:gap-2;
+  }
+  .govgr-gap-lg-4 {
+    @apply lg:gap-4;
+  }
+  .govgr-gap-lg-5 {
+    @apply lg:gap-5;
+  }
+  .govgr-gap-lg-6 {
+    @apply lg:gap-6;
+  }
+  .govgr-gap-lg-8 {
+    @apply lg:gap-8;
+  }
+  .govgr-gap-lg-10 {
+    @apply lg:gap-10;
+  }
+  .govgr-gap-lg-12 {
+    @apply lg:gap-12;
+  }
+  .govgr-gap-xl-1 {
+    @apply xl:gap-1;
+  }
+  .govgr-gap-xl-2 {
+    @apply xl:gap-2;
+  }
+  .govgr-gap-xl-4 {
+    @apply xl:gap-4;
+  }
+  .govgr-gap-xl-5 {
+    @apply xl:gap-5;
+  }
+  .govgr-gap-xl-6 {
+    @apply xl:gap-6;
+  }
+  .govgr-gap-xl-8 {
+    @apply xl:gap-8;
+  }
+  .govgr-gap-xl-10 {
+    @apply xl:gap-10;
+  }
+  .govgr-gap-xl-12 {
+    @apply xl:gap-12;
+  }
+};
+

package/tailwind.config.js

@@ -156,6 +156,8 @@ module.exports = {
       zIndex: {
         "/1": -1,
         1: 1,
+        2: 2,
+        3: 3,
       },
       opacity: {
         85: "0.85",

package/themes.plugin.js

@@ -6,7 +6,7 @@ const postcssJs = require("postcss-js");
 
 const prefix = "govgr";
 const mediaQueriesMapping = {
-  xs: "",
+  xs: "@media (min-width: 0px)",
   sm: "@media (min-width: 640px)",
   md: "@media (min-width: 768px)",
   lg: "@media (min-width: 1024px)",
@@ -28,21 +28,21 @@ function addThemes({ addBase, addComponents, theme, config }) {
   }
   hasRun = true;
   function extractColorVars(colorObj, colorGroup = "") {
-      return Object.keys(colorObj).reduce((vars, colorKey) => {
-        const value = colorObj[colorKey];
-        const colorName =
-          colorKey == "default"
-            ? `--color${colorGroup}`
-            : `--color${colorGroup}-${colorKey}`;
-        const newVars =
-          typeof value === "string"
-            ? {
-                [colorName]: value,
-                [`${colorName}-rgb`]: hexToRGB(value),
-              }
-            : extractColorVars(value, `-${colorKey}`);
-        return { ...vars, ...newVars };
-      }, {});
+    return Object.keys(colorObj).reduce((vars, colorKey) => {
+      const value = colorObj[colorKey];
+      const colorName =
+        colorKey == "default"
+          ? `--color${colorGroup}`
+          : `--color${colorGroup}-${colorKey}`;
+      const newVars =
+        typeof value === "string"
+          ? {
+            [colorName]: value,
+            [`${colorName}-rgb`]: hexToRGB(value),
+          }
+          : extractColorVars(value, `-${colorKey}`);
+      return { ...vars, ...newVars };
+    }, {});
   }
 
   function extractMediaQueriesFromComponentVars(componentObj, customTheme) {
@@ -129,7 +129,7 @@ function addThemes({ addBase, addComponents, theme, config }) {
         extractVars(customThemeObject);
     } else {
       base[
-        `:root.${customTheme},.${customTheme} *::before,.${customTheme} *::after`
+        `:root.${customTheme},.${customTheme},.${customTheme} *::before,.${customTheme} *::after`
       ] = extractVars(customThemeObject);
     }