@digigov/css 1.0.0-6b93ebf2 → 1.0.0-871b6be5

package/src/components/header.css

@@ -2,16 +2,12 @@
   @apply bg-primary border-b-8 print:border-b-2 border-tertiary;
   @apply print:bg-white;
   border-bottom-style: solid;
-  .govgr-svg-icon--burger {
-    fill: var(--color-base-content);
-    @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 +49,7 @@
   .govgr-grid-column-two-thirds > *:last-child {
     @apply mb-0;
   }
-  .govgr-header__container {
+  .govgr-header__content {
     @apply flex-wrap;
   }
 }
@@ -79,3 +75,43 @@
 .govgr-masthead__logo {
   @apply md:mb-6 mb-4 h-10;
 }
+
+/* overrides */
+
+.govgr-header {
+  @apply relative;
+  .govgr-dropdown__button {
+    @apply sm:w-max;
+  }
+}
+.govgr-header-nav-menu__content, .govgr-header__content, .govgr-header__section {
+  >.govgr-svg-icon--burger {
+    fill: var(--color-white);
+    @apply float-right focus:bg-focus;
+  }
+  >.govgr-close-btn {
+    @apply sm:hidden;
+    .govgr-svg-icon--close {
+      fill: var(--color-link) !important;
+    }
+  }
+  > .govgr-nav__list {
+    > .govgr-nav__list-item {
+      > .govgr-nav__list-item-link,
+      > .govgr-nav__list-item-btn {
+        &:not(:focus) {
+          @apply text-white;
+        }
+      }
+      > .govgr-nav__list-item-link--active,
+      > .govgr-nav__list-item-btn--active {
+        &:not(:focus) {
+          @apply text-white !important;
+        }
+        .govgr-svg-icon {
+          fill: var(--color-white);
+        }
+      }
+    }
+  }
+}

package/src/components/hidden.css

@@ -1,3 +1,6 @@
+.govgr-hidden {
+  @apply hidden;
+}
 .govgr-hidden-xs--up {
   @apply xs:hidden;
 }

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,9 +1,9 @@
-.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-container {
@@ -48,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/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

@@ -1,124 +1,44 @@
-.govgr-header {
-  @apply relative;
-  .govgr-svg-icon--burger {
-    fill: var(--color-white);
-    @apply float-right focus:bg-focus;
-  }
-  .govgr-drawer__close-icon {
-    @apply sm:hidden;
-    .govgr-svg-icon--close {
-      fill: var(--color-link) !important;
-    }
-  }
-  .govgr-nav {
-    @apply fixed;
-  }
+.govgr-nav {
+  @apply relative block w-full h-auto bg-base-100 text-base-content;
   .govgr-nav__list {
-    @apply sm:flex !important;
-    @apply sm:w-min xs:hidden m-0 max-w-5xl sm:mx-auto sm:gap-x-6 static sm:py-1 xs:px-3 sm:px-0
-  flex flex-wrap flex-col sm:flex-row;
-  }
-  .govgr-nav__list-item {
-    @apply text-base-content sm:mr-auto sm:ml-auto sm:text-center sm:underline mr-0 xs:px-2 xs:py-1 sm:gap-x-6;
-    .govgr-svg-icon {
-      fill: var(--color-white) !important;
-    }
+    @apply px-3;
   }
   .govgr-nav__list-item-link,
   .govgr-nav__list-item-btn {
-    @apply underline xs:text-white text-lg sm:flex !important;
-    @apply xs:hidden items-center xs:gap-1;
-    &:focus {
-      @apply sm:bg-focus sm:text-link-active !important;
-      .govgr-svg-icon {
-        fill: var(--color-link-active) !important;
-      }
-    }
-  }
-  .govgr-nav__list--active {
-    @apply sm:bg-tertiary !important;
+    @apply md:no-underline !important;
   }
 }
-
-/* --- NAV ---  */
-.govgr-nav {
-  @apply sm:block !important;
-  @apply xs:hidden w-3/4 sm:w-full h-full bg-base-100
-   sm:h-auto sm:bg-base-100 xs:text-base-content
-  z-30 sm:z-auto 
-  opacity-100 right-0 top-0 sm:top-auto overflow-x-scroll sm:overflow-visible;
-}
 .govgr-nav--fixed {
-  @apply fixed sm:relative;
+  @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto
+  sm:relative sm:block sm:w-full sm:h-auto sm:z-auto sm:top-auto sm:overflow-visible;
+  @apply shadow-thick sm:shadow-none !important;
+  .govgr-nav__list {
+    @apply p-4;
+  }
+}
+.govgr-nav--open {
+  @apply block;
 }
 .govgr-nav--border {
   @apply sm:border-b sm:border-base-400;
 }
-.govgr-nav--open {
-  @apply xs:block;
-}
-.govgr-nav--hidden {
-  @apply hidden !important;
+.govgr-nav__list {
+  @apply w-full m-0 max-w-5xl static flex flex-wrap flex-col;
 }
-.govgr-nav__list-item {
-  @apply text-base-content
-  xs:py-1;
-}
-.govgr-nav--horizontal {
-  .govgr-nav--horizontal {
-    @apply sm:mt-2 sm:border-b-0 static w-full z-1 sm:order-1;
-    @apply block overflow-x-visible;
-    .govgr-nav__list {
-      @apply sm:px-0 sm:pb-0 sm:ml-6 !important;
-    }
-  }
-  .govgr-nav__list {
-    @apply w-full m-0 max-w-5xl sm:mx-auto sm:gap-x-6 static sm:py-1 xs:px-3 sm:px-0
-    flex flex-wrap flex-col sm:flex-row;
-    .govgr-section-break {
-      margin-top: 41px !important;
-      @apply sm:flex !important;
-      @apply xs:hidden sm:p-0 absolute left-0 right-0;
-    }
-  }
+.govgr-nav__list--horizontal {
+  @apply sm:mx-auto sm:gap-x-6 sm:py-1 px-3 sm:px-0 sm:flex-row;
   .govgr-nav__list-item {
     @apply sm:gap-x-6;
   }
-  .govgr-drawer__close-icon {
-    @apply sm:hidden mt-3;
-  }
-  .govgr-heading-md {
-    @apply mb-0;
-  }
 }
-.govgr-nav--vertical {
-  .govgr-nav--vertical {
-    @apply sm:mt-2 sm:border-b-0 static w-full z-1;
-    @apply block overflow-x-visible;
-  }
-  .govgr-nav__list {
-    @apply w-full m-0 max-w-5xl static xs:px-3
-    flex flex-wrap flex-col;
-  }
-  .govgr-drawer__close-icon {
-    @apply sm:hidden mt-3;
-  }
-  .govgr-heading-md {
-    @apply mb-0;
-  }
+.govgr-nav__list--full-width {
+  @apply max-w-none;
 }
-.govgr-nav__list,
-.govgr-main-wrapper {
-  .govgr-drawer__heading {
-    @apply flex-row-reverse;
-  }
+.govgr-nav__list-item {
+  @apply text-base-content py-1;
 }
 .govgr-nav__list-item-link,
 .govgr-nav__list-item-btn {
-  @apply md:no-underline !important;
-  .govgr-svg-icon {
-    @apply ml-0.5;
-  }
   &:focus {
     @apply bg-focus text-base-content outline-none;
     box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
@@ -131,14 +51,10 @@
 .govgr-nav__list-item-btn--active {
   @apply text-base-content !important;
   @apply font-semibold;
-  > .govgr-svg-icon {
-    fill: var(--color-base-content) !important;
-  }
 }
 
-/* --- NAV-MENU --- */
 .govgr-nav-menu {
-  @apply flex z-1 w-full;
+  @apply flex w-full;
 }
 .govgr-nav-menu--hidden {
   @apply hidden;
@@ -146,35 +62,58 @@
 .govgr-nav-menu--horizontal {
   @apply sm:order-2 sm:left-0 sm:right-0 sm:relative sm:mt-3 sm:bg-base-100;
   .govgr-main-wrapper {
-    @apply xs:gap-y-2;
+    @apply gap-y-2;
   }
   .govgr-nav-menu__content-list {
-    @apply sm:grid-cols-2 sm:grid-rows-1 !important;
-    @apply p-0 sm:grid grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
+    @apply sm:grid-rows-1 sm:grid-cols-3;
+  }
+  .govgr-nav-menu__title {
+    @apply hidden sm:block;
+    + .govgr-nav-menu__content > .govgr-nav-menu__content-list {
+      @apply sm:grid-cols-2;
+    }
   }
 }
 .govgr-nav-menu--vertical {
-  .govgr-nav-menu__content-list {
-    @apply p-0 grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
-  }
-  .govgr-nav-menu__container-title {
-    @apply mt-3;
-  }
-  .govgr-nav-menu__container-title-heading {
+  .govgr-nav-menu__title {
     @apply hidden;
   }
+  .govgr-nav-menu__content-list {
+    @apply py-2 sm:py-4;
+  }
+}
+.govgr-nav-menu__content-list {
+  @apply p-0 grid grid-flow-row grid-cols-1;
 }
 .govgr-nav-menu__content-list-item {
-  @apply relative pt-0 pb-5 pr-3 pl-0  box-border;
+  @apply relative pt-0 pb-5 pr-3 pl-0 box-border;
 }
 
-/* --- VERTICAL LIST --- */
-.govgr-vertical-nav {
-  @apply flex flex-wrap;
+/* overrides */
+
+.govgr-nav {
+  .govgr-close-btn {
+    @apply sm:hidden mt-3;
+  }
+  .govgr-heading-md {
+    @apply mb-2 md:mb-0;
+  }
 }
-.govgr-vertical-nav__item {
-  @apply w-full p-2 !important;
+.govgr-nav__list,
+.govgr-main-wrapper {
+  .govgr-drawer__heading {
+    @apply flex-row-reverse;
+  }
 }
-.govgr-vertical-nav__item--active {
-  @apply font-semibold !important;
+.govgr-nav__list-item-link,
+.govgr-nav__list-item-btn {
+  > .govgr-svg-icon {
+    @apply ml-0.5;
+  }
+}
+.govgr-nav__list-item-link--active,
+.govgr-nav__list-item-btn--active {
+  > .govgr-svg-icon {
+    fill: var(--color-base-content) !important;
+  }
 }

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/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 {
@@ -8,6 +8,11 @@
 .govgr-phase-banner {
   @apply py-2 mb-4;
 }
+.govgr-header__section {
+  .govgr-phase-banner {
+    @apply mb-0;
+  }
+}
 .govgr-phase-banner--underline {
   @apply border-base-500 border-b;
 }

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

@@ -236,7 +236,7 @@
   @apply bg-base-100;
 }
 .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) {
@@ -246,18 +246,15 @@
   .govgr-dropdown__content {
     @apply py-0;
   }
-  .govgr-vertical-nav__item {
-    @apply flex font-normal no-underline;
-  }
-  .govgr-vertical-nav__item--active:not(:focus) {
-    @apply bg-base-200 font-normal !important;
+  .govgr-nav__list-item-link, .govgr-nav__list-item-btn {
+    @apply flex no-underline;
   }
 }
 .govgr-table__cell {
   .govgr-btn {
     @apply mb-0;
   }
-  .govgr-button-group {
+  .govgr-btn-group {
     @apply mb-0;
   }
 }

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/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;
 }