@digigov/css 1.0.0-7c9716da → 1.0.0-88820b1e

package/src/components/header.css

@@ -7,11 +7,11 @@
     @apply float-right cursor-pointer;
   }
 }
-.govgr-header__container {
+.govgr-header__content {
   @apply px-4 py-2 mx-auto max-w-5xl w-full flex justify-between items-center
   print:px-0 gap-3;
 }
-.govgr-header__content {
+.govgr-header__section {
   @apply flex justify-start flex-wrap items-center gap-x-4 gap-y-2
   print:gap-1;
 }
@@ -53,7 +53,7 @@
   .govgr-grid-column-two-thirds > *:last-child {
     @apply mb-0;
   }
-  .govgr-header__container {
+  .govgr-header__content {
     @apply flex-wrap;
   }
 }

package/src/components/index.css

@@ -25,6 +25,7 @@
 @import "./panel.css";
 @import "./phase-banner.css";
 @import "./summary-list.css";
+@import "./stack.css";
 @import "./tabs.css";
 @import "./misc.css";
 @import "./modal.css";

package/src/components/kitchensink.css

@@ -46,7 +46,7 @@
 .govgr-kitchensink-card .govgr-table__cell .govgr-dropdown {
   margin: 0 !important;
 }
-.govgr-kitchensink-card .govgr-layout-wrapper__full-height {
+.govgr-kitchensink-card .govgr-layout--full-height {
   min-height: inherit;
 }
 @container (min-width: 400px) {
@@ -58,7 +58,7 @@
   .govgr-kitchensink-card .govgr-drawer--closed {
     @apply hidden;
   }
-  .govgr-kitchensink-card .govgr-drawer__close-icon {
+  .govgr-kitchensink-card .govgr-close-btn {
     @apply block;
   }
 }

package/src/components/layout.css

@@ -1,18 +1,17 @@
-.govgr-layout-wrapper {
+.govgr-layout {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
 }
-.govgr-layout-wrapper__full-height {
+.govgr-layout--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
@@ -49,7 +48,7 @@
   @apply m-auto px-4 py-2 border-0 w-full bg-transparent;
 }
 .govgr-section-break--visible {
-  @apply border-t border-base-300 border-solid	;
+  @apply border-t border-base-300 border-solid;
 }
 .govgr-section-break--md {
  @apply mb-5;

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/modal.css

@@ -16,9 +16,6 @@
 .govgr-modal__container {
   @apply grid p-10 gap-6 px-6 py-2;
 }
-.govgr-modal__heading {
-  @apply md:text-2xl text-xl font-bold;
-}
 .govgr-modal__content {
   @apply text-base lg:text-xl text-lg;
 }

package/src/components/nav.css

@@ -4,7 +4,7 @@
     fill: var(--color-white);
     @apply float-right focus:bg-focus;
   }
-  .govgr-drawer__close-icon {
+  .govgr-close-btn {
     @apply sm:hidden;
     .govgr-svg-icon--close {
       fill: var(--color-link) !important;
@@ -83,7 +83,7 @@
   .govgr-nav__list-item {
     @apply sm:gap-x-6;
   }
-  .govgr-drawer__close-icon {
+  .govgr-close-btn {
     @apply sm:hidden mt-3;
   }
   .govgr-heading-md {
@@ -99,7 +99,7 @@
     @apply w-full m-0 max-w-5xl static xs:px-3
     flex flex-wrap flex-col;
   }
-  .govgr-drawer__close-icon {
+  .govgr-close-btn {
     @apply sm:hidden mt-3;
   }
   .govgr-heading-md {
@@ -172,7 +172,7 @@
   @apply flex flex-wrap;
 }
 .govgr-vertical-nav__item {
-  @apply w-full p-2 !important;
+  @apply w-full py-2 !important;
 }
 .govgr-vertical-nav__item--active {
   @apply font-semibold !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/pagination.css

@@ -18,7 +18,7 @@
       }
   }
 }
-.govgr-pagination--size-sm {
+.govgr-pagination--sm {
   .govgr-pagination__label, .govgr-label, .govgr-select, .govgr-pagination__item--current {
    @apply md:text-base text-sm;
   }

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/phase-banner.css

@@ -1,4 +1,4 @@
-.govgr-phase-banner_header {
+.govgr-phase-banner__header {
   @apply bg-focus top-0 z-30
   print:bg-white print:border-focus print:border-2 print:px-4;
   .govgr-phase-banner {

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/stack.css

@@ -0,0 +1,66 @@
+.govgr-stack {
+  @apply flex flex-col flex-wrap;
+}
+.govgr-stack--row {
+  @apply flex-row;
+}
+.govgr-stack--reverse-row {
+  @apply flex-row-reverse;
+}
+.govgr-stack--col-reverse {
+  @apply flex-col-reverse;
+}
+.govgr-stack--nowrap {
+  @apply flex-nowrap
+}
+.govgr-stack--justify-flex-start {
+  @apply justify-start
+}
+.govgr-stack--justify-flex-end {
+  @apply justify-end
+}
+.govgr-stack--justify-center {
+  @apply justify-center
+}
+.govgr-stack--justify-space-between {
+  @apply justify-between
+}
+.govgr-stack--justify-space-around {
+  @apply justify-around
+}
+.govgr-stack--justify-space-evenly  {
+  @apply justify-evenly
+}
+.govgr-stack--align-stretch {
+  @apply items-stretch
+}
+.govgr-stack--align-flex-start {
+  @apply items-start
+}
+.govgr-stack--align-flex-end {
+  @apply items-end
+}
+.govgr-stack--align-center {
+  @apply items-center
+}
+.govgr-stack--align-baseline {
+  @apply items-baseline
+}
+.govgr-stack--content-flex-start {
+  @apply content-start
+}
+.govgr-stack--content-flex-end {
+  @apply content-end
+}
+.govgr-stack--content-center {
+  @apply content-center
+}
+.govgr-stack--content-space-between {
+  @apply content-between
+}
+.govgr-stack--content-space-around {
+  @apply content-around
+}
+.govgr-stack--content-space-evenly  {
+  @apply content-evenly
+}

package/src/components/stepnav.css

@@ -39,6 +39,14 @@
   &:first-child {
     @apply border-t-2;
   }
+  .govgr-step-nav__accordion__opened {
+    visibility: hidden;
+    display: none;
+  }
+  .govgr-step-nav__accordion__closed {
+    visibility: visible;
+    display: block;
+  }
 }
 .govgr-step-nav__accordion[open] {
 
@@ -50,10 +58,8 @@
     visibility: hidden;
     display: none;
   }
-  .govgr-nav-step__accordion__content {
-    @apply block;
-  }
 }
+
 .govgr-step-nav__accordion__summary {
   @apply list-none w-fit mb-0 py-4 pr-8 cursor-pointer;
   .govgr-hint {
@@ -136,7 +142,7 @@
     0 0.1em 0 var(--color-white), -0.1em 0 0 var(--color-white);
 }
 .govgr-nav-step__accordion__content {
-  @apply hidden md:pt-2 mb-6 pt-1 mx-0;
+  @apply md:pt-2 mb-6 pt-1 mx-0;
   > *:last-child {
     @apply mb-0;
   }

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,14 +235,8 @@
 .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 {
+  .govgr-dropdown__button:not(:focus) {
     @apply no-underline font-bold text-base-content !important;
   }
   .govgr-dropdown__button--underline:not(:focus) {

package/src/components/task-list.css

@@ -33,13 +33,12 @@
 .govgr-task-list__content__tag {
   @apply px-2 py-1 mr-2 inline-block font-sans text-sm uppercase tracking-widest;
 }
-.govgr-task-list__content__tag--primary {
+.govgr-task-list__content__tag--info {
   @apply bg-info text-white print:border-2 print:bg-white print:border-info-hover print:text-info-hover print:mr-4;
 }
-.govgr-task-list__content__tag--secondary {
+.govgr-task-list__content__tag--primary {
   @apply bg-secondary text-base-content print:border-2 print:bg-white print:border-info print:text-info print:mr-4;
 }
-.govgr-task-list__content__tag--gray {
+.govgr-task-list__content__tag--secondary {
   @apply bg-base-300 print:border-2 print:bg-white print:border-base-800 print:text-base-800 print:mr-4;
 }
-.govgr-tag {}

package/src/components/typography.css

@@ -30,6 +30,14 @@
   font-weight: var(--heading-sm-font-weight);
   letter-spacing: var(--heading-sm-letter-spacing);
 } 
+.govgr-heading-xs {
+  @apply mx-0 ;
+  font-size: var(--heading-xs-font-size);
+  line-height:var(--heading-xs-line-height);
+  margin-bottom:var(--heading-xs-margin-bottom);
+  font-weight: var(--heading-xs-font-weight);
+  letter-spacing: var(--heading-xs-letter-spacing);
+} 
 .govgr-caption-xl {
   @apply block mx-0 font-normal;
   color: var(--caption-xl-color);
@@ -130,6 +138,14 @@
     @apply gap-x-10 gap-y-5;
   }
 }
+@media (min-width: 768px) {
+  .govgr-list--col-2 {
+    column-count: 2;
+  }
+  .govgr-list--col-3 {
+    column-count: 2;
+  }
+}
 .govgr-list, .govgr-blockquote {
   @apply md:mb-8 mb-4 text-base-content;
 }
@@ -191,10 +207,10 @@
   }
 }
 .govgr-header {
-  .govgr-header__container > .govgr-link {
+  .govgr-header__content > .govgr-link {
     @apply text-white focus:text-link-active print:text-base-content;
   }
-  .govgr-header__content > .govgr-link {
+  .govgr-header__section > .govgr-link {
     @apply text-white focus:text-link-active print:text-base-content;
   }
 }

package/src/pages/admin-filtering-data.js

@@ -29,7 +29,7 @@ export default function Home() {
             <aside className="govgr-admin-side-content">
               <div className="govgr-filter">
                 <div className="govgr-filter__heading">
-                  <a className="govgr-link govgr-filter__close-btn" href="#">
+                  <a className="govgr-link govgr-close-btn" href="#">
                     Κλείσιμο
                     <svg class="govgr-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
                   </a>

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>

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,25 @@
 }
 .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;
 }