@digigov/css 1.0.0-002c630d → 1.0.0-6b93ebf2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "1.0.0-002c630d",
+  "version": "1.0.0-6b93ebf2",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -49,12 +49,12 @@
     "tailwindcss": "2.2.6",
     "nodemon": "2.0.7",
     "next": "10.0.9",
-    "@digigov/postcss-banner": "1.0.0-002c630d",
+    "@digigov/postcss-banner": "1.0.0-6b93ebf2",
     "rimraf": "3.0.2",
     "postcss-js": "4.0.0",
     "postcss-load-config": "3.1.4",
     "publint": "0.1.8",
-    "@digigov/cli": "1.0.0-002c630d"
+    "@digigov/cli": "1.0.0-6b93ebf2"
   },
   "scripts": {
     "preutilities": "DIGIGOV_CSS_BUILD=TRUE postcss --config src/utilities src/utilities/index.css --base src --dir dist",
@@ -74,7 +74,7 @@
   },
   "dependencies": {
     "@fontsource/roboto": "4.4.0",
-    "@digigov/cli-build-tailwind": "1.0.0-002c630d",
+    "@digigov/cli-build-tailwind": "1.0.0-6b93ebf2",
     "publint": "0.1.8",
     "@adobe/leonardo-contrast-colors": "1.0.0-alpha.13",
     "polished": "4.2.2"

package/src/components/checkboxes.css

@@ -1,6 +1,9 @@
 .govgr-checkboxes {}
-.govgr-checkboxes--inline {
-    @apply inline-flex flex-wrap;
+.govgr-checkboxes--horizontal {
+    @apply inline-flex flex-wrap items-baseline gap-4 md:gap-6;
+    .govgr-choice-divider-text {
+      @apply min-w-max mx-2;
+    }
 }
 .govgr-checkboxes__item {
     @apply block relative mb-4 pl-12; 

package/src/components/copy-to-clipboard.css

@@ -1,44 +1,51 @@
-.govgr-copy-to-clipboard-root {
-  @apply flex;
+.govgr-copy-to-clipboard {
+  @apply flex w-fit;
 }
-.govgr-copy-to-clipboard-container {
+.govgr-copy-to-clipboard__tooltip {
   @apply relative;
-  & > button {
+  & > .govgr-btn {
     @apply m-0;
   }
-}
-.govgr-copy-to-clipboard--banner {
-  @apply bg-success bg-opacity-95 p-2 w-full fixed top-0 right-0 text-center;
-  & > * {
-    @apply text-white;
+  .govgr-copy-to-clipboard__message {
+    @apply bg-success p-4 absolute mt-4 text-center z-50 w-fit md:w-max;
+    & > .govgr-body {
+      @apply text-white;
+    }
+    &::before {
+      content: "";
+      @apply w-4 h-4 border-t-8 border-l-8 border-success transform rotate-45
+      absolute -top-1;
+      transform: rotate(45deg);
+    }
   }
 }
-.govgr-copy-to-clipboard--tooltip {
-  @apply bg-success p-4 absolute mt-4 text-center z-50 w-fit md:w-max;
-  & > * {
-    @apply text-white;
-  }
-  &::before {
-    content: "";
-    @apply w-4 h-4 border-t-8 border-l-8 border-success transform rotate-45
-    absolute -top-1;
-    transform: rotate(45deg);
+.govgr-copy-to-clipboard__banner {
+  .govgr-copy-to-clipboard__message {
+    @apply bg-success bg-opacity-95 p-2 w-full fixed top-0 right-0 text-center;
+    & > .govgr-body {
+      @apply text-white;
+    }
   }
 }
-.govgr-copy-to-clipboard--tooltip-right {
-  @apply right-0;
-  &::before {
-    content: "";
-    @apply right-4;
+.govgr-copy-to-clipboard__tooltip--right {
+  .govgr-copy-to-clipboard__message {
+    @apply right-0;
+    &::before {
+      content: "";
+      @apply right-4;
+    }
   }
 }
-.govgr-copy-to-clipboard--tooltip-left {
-  @apply left-0;
-  &::before {
-    content: "";
-    @apply left-4;
+.govgr-copy-to-clipboard__tooltip--left {
+  .govgr-copy-to-clipboard__message {
+    @apply left-0;
+    &::before {
+      content: "";
+      @apply left-4;
+    }
   }
 }
+
 .govgr-copy-to-clipboard--hidden {
   @apply invisible w-0 h-0;
 }

package/src/components/footer.css

@@ -38,9 +38,9 @@
 .govgr-footer__logo, .govgr-footer__government-logo {
   @apply max-w-full h-auto w-52 min-w-52 block;
 }
-.govgr-footer__licence-description {
+.govgr-footer__copyright {
   @apply mt-6 print:mt-4;
-  font-size: var(--footer__licence-description-font-size);
+  font-size: var(--footer__license-description-font-size);
   .govgr-link {
     font-size: inherit;
   }

package/src/components/form.css

@@ -137,9 +137,6 @@
 
 /* error handling  */
 
-.govgr-error-summary {
-  @apply border-5 border-error mb-6 md:mb-8 p-4 md:p-5;
-}
 .govgr-field--error {
   @apply border-l-5 border-error px-0 pl-4;
 }
@@ -184,6 +181,6 @@
 .govgr-checkboxes__label--disabled {
   @apply opacity-40;
 }
-.govgr-choice-divider {
-  @apply text-lg text-center w-10 mb-4;
+.govgr-choice-divider-text {
+  @apply text-lg text-center min-w-10 w-max mb-4;
 }

package/src/components/layout.css

@@ -6,13 +6,12 @@
 .govgr-layout-wrapper__full-height {
   min-height: 100vh;
 }
-.govgr-width-container {
-  @apply  max-w-5xl box-border mx-auto px-3 md:px-6 w-full;
+.govgr-container {
+  @apply max-w-5xl box-border mx-auto px-3 md:px-6 w-full;
   flex: 1 1 0%;
 }
-.govgr-full-width-container {
-  @apply max-w-full box-border mx-auto px-3 md:px-6 w-full;
-  flex: 1 1 0%;
+.govgr-container--full-width {
+  @apply max-w-full;
 }
 .govgr-main-wrapper {
   @apply grid py-4 md:grid-cols-3 md:gap-12 grid-cols-1 gap-y-16

package/src/components/loader.css

@@ -1,7 +1,7 @@
-.govgr-loader__container {
+.govgr-loader {
   @apply h-fit w-fit m-auto overflow-hidden print:hidden;
 }
-.govgr-loader {
+.govgr-circular-progress {
   animation: rotate 10s linear infinite;
   @apply w-fit h-10;
 }
@@ -20,7 +20,7 @@
   stroke-dashoffset: 0;
   animation: dash 4s ease-in-out 0s forwards infinite;
 }
-.govgr-loader--inverse {
+.govgr-circular-progress--secondary {
   .govgr-loader__circle--1 {
     @apply opacity-40;
     stroke: var(--color-white);
@@ -32,7 +32,7 @@
 }
 @media print {
   .govgr-btn {
-    .govgr-loader--inverse {
+    .govgr-circular-progress--secondary {
       .govgr-loader__circle--1,
       .govgr-loader__circle--2 {
         stroke: var(--color-base-content);
@@ -41,13 +41,13 @@
   }
 }
 
-.govgr-loader--sm {
+.govgr-circular-progress--sm {
   @apply h-5 w-5;
 }
-.govgr-loader--md {
+.govgr-circular-progress--md {
   @apply h-10 w-10;
 }
-.govgr-loader--lg {
+.govgr-circular-progress--lg {
   @apply h-12 w-12;
 }
 @keyframes dash {

package/src/components/nav.css

@@ -39,6 +39,7 @@
     @apply sm:bg-tertiary !important;
   }
 }
+
 /* --- NAV ---  */
 .govgr-nav {
   @apply sm:block !important;

package/src/components/notification-banner.css

@@ -1,13 +1,22 @@
 .govgr-notification-banner {
-  @apply bg-info border-5 border-info mb-6 md:mb-8 font-normal
-  print:bg-base-100;
+  @apply border-5 mb-6 md:mb-8 font-normal print:bg-white;
+}
+.govgr-notification-banner--info {
+  @apply bg-info border-info;
 }
 .govgr-notification-banner--success {
-  @apply bg-success border-success
-  print:bg-white;
+  @apply bg-success border-success;
   .govgr-notification-banner__link {
-    &:link {
+    &:link:not(:focus) {
       @apply text-success;
+    } 
+  }
+}
+.govgr-notification-banner--error {
+  @apply bg-error border-error;
+  .govgr-notification-banner__link {
+    &:link:not(:focus) {
+      @apply text-error;
     }
   }
 }
@@ -27,11 +36,8 @@
     @apply mb-0;
   }
 }
-.govgr-notification-banner__heading {
-  @apply p-0 m-0 mb-4 text-lg md:text-2xl font-bold;
-}
 .govgr-notification-banner__link {
-  @apply underline;
+  @apply underline text-base md:text-lg;
   &:link {
     @apply text-link;
   }
@@ -45,3 +51,8 @@
     outline: none;
   }
 }
+.govgr-notification-banner__heading {
+  .govgr-notification-banner__link {
+    font-size: inherit;
+  }
+}

package/src/components/panel.css

@@ -1,10 +1,10 @@
 .govgr-panel {
   @apply box-border mb-4 p-8 border-5 border-transparent text-center
-  print:p-4;
+  print:p-4 text-white
+  print:border-4 print:text-base-content print:bg-white;
 }
-.govgr-panel--confirmation {
-  @apply bg-success text-white
-  print:border-4 print:border-success print:text-base-content print:bg-white;
+.govgr-panel--success {
+  @apply bg-success print:border-success;
 }
 .govgr-panel__title {
   @apply mx-auto mt-0;

package/src/components/radios.css

@@ -3,14 +3,10 @@
   @apply block relative mb-4 pl-12;
   min-height: 40px;
 }
-.govgr-radios--inline {
-  .govgr-radios__item {
-    @apply sm:mr-6 sm:float-left sm:clear-none;
-  }
-  &::after {
-    content: "";
-    display: block;
-    clear: both;
+.govgr-radios--horizontal {
+  @apply inline-flex flex-wrap items-baseline gap-4 md:gap-6;
+  .govgr-choice-divider-text {
+    @apply min-w-max mx-2;
   }
 }
 .govgr-radios__item {

package/src/components/table.css

@@ -70,7 +70,7 @@
 .govgr-table__row {
   @apply bg-base-100;
 }
-.govgr-table__row--warning {
+.govgr-table__row--highlight {
   @apply border-l-4 border-warning;
   .govgr-table__cell:first-child {
     @apply pl-2;
@@ -211,6 +211,14 @@
     }
   }
 }
+.govgr-table:not(.govgr-table--zebra) {
+  .govgr-table__row--secondary {
+    @apply bg-base-200 print:bg-white;
+  }
+}
+.govgr-table__cell--bold {
+  @apply font-semibold;
+}
 .govgr-table__body {
   @apply relative;
 }
@@ -227,12 +235,6 @@
 .govgr-table__row {
   @apply bg-base-100;
 }
-.govgr-table__row--warning {
-  @apply border-l-4 border-warning;
-  .govgr-table__cell:first-child {
-    @apply pl-2;
-  }
-}
 .govgr-table__header {
   .govgr-dropdown__button {
     @apply no-underline font-bold text-base-content !important;

package/src/pages/dropdown.js

@@ -228,11 +228,11 @@ export default function Dropdown() {
       <hr className="govgr-section-break govgr-section-break--lg" />
 
       <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>

package/src/pages/form.js

@@ -26,7 +26,7 @@ export default function Home() {
           <a className="govgr-nav__list-item-link" href=""> Επικοινωνία </a>
         </ul>
       </nav>
-      <div className="govgr-width-container">
+      <div className="govgr-container">
         <div className="govgr-main-wrapper">
           <div className="govgr-grid-column-two-thirds">
             <h1 className="govgr-heading-xl">Καταχώρηση φόρμας</h1>

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>