@digigov/css 1.0.0-rc → 1.0.0-rc.1

package/src/components/table.css

@@ -8,10 +8,10 @@
   @apply md:text-3xl text-xl font-bold mx-0 md:mb-8 mb-6 antialiased;
 }
 .govgr-table__caption--lg {
-  @apply md:text-4xl text-2xl font-bold mx-0 lg:mb-9 mb-7 antialiased;
+  @apply md:text-4xl text-2xl font-bold mx-0 md:mb-9 mb-7 antialiased;
 }
 .govgr-table__caption--xl {
-  @apply md:text-5xl md:leading-tight text-3xl leading-tight font-bold mx-0 lg:mb-10 mb-8 max-w-2xl antialiased;
+  @apply md:text-5xl md:leading-tight text-3xl leading-tight font-bold mx-0 md:mb-10 mb-8 max-w-2xl antialiased;
 }
 .govgr-table-container {
   @apply w-full overflow-x-auto md:mb-10 mb-6;
@@ -26,14 +26,8 @@
   @apply w-full border-collapse table;
   @apply md:mb-10 mb-6 text-base-content md:text-lg text-base font-normal antialiased;
   border-spacing: 0;
-  .govgr-dropdown__content{
-    @apply mt-0;
-  }
-  .govgr-dropdown__button {
-    @apply mb-0;
-  }
 }
-.govgr-table-sort__icons-container{
+.govgr-table-sort__icons-container {
   @apply flex flex-col;
 }
 @supports (-moz-appearance: none) {
@@ -70,20 +64,12 @@
 .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;
   }
 }
-.govgr-table__cell {
-  .govgr-btn {
-    @apply mb-0;
-  }
-  .govgr-btn-group {
-    @apply mb-0;
-  }
-}
 .govgr-table--dark,
 .govgr-table--zebra {
   .govgr-table__header,
@@ -128,12 +114,14 @@
   .govgr-table__header,
   .govgr-table__cell {
     &:last-child {
-      @apply border-b-2 border-base-content;
+      @apply border-b-2;
+      border-bottom-color: rgb(var(--color-base-content-rgb));
     }
   }
-  .govgr-table__header {
+  .govgr-table__head .govgr-table__header {
     @apply hidden;
   }
+  .govgr-table__body .govgr-table__header,
   .govgr-table__cell {
     @apply block;
   }
@@ -146,12 +134,23 @@
   .govgr-table__header,
   .govgr-table__cell {
     &:last-child {
-      @apply border-b-2 border-base-content sm:border-b sm:border-base-300;
+      @apply border-b-2 sm:border-b;
+      border-bottom-color: rgb(var(--color-base-content-rgb));
+      
     }
   }
-  .govgr-table__header {
+  @media (min-width: 640px) {
+      .govgr-table__header,
+      .govgr-table__cell {
+        &:last-child {
+          border-bottom-color: rgb(var(--color-base-300-rgb));
+        }
+      }
+  }
+  .govgr-table__head .govgr-table__header {
     @apply hidden sm:table-cell;
   }
+  .govgr-table__body .govgr-table__header,
   .govgr-table__cell {
     @apply block sm:table-cell;
   }
@@ -169,12 +168,22 @@
   .govgr-table__header,
   .govgr-table__cell {
     &:last-child {
-      @apply border-b-2 border-base-content md:border-b md:border-base-300;
+      @apply border-b-2 md:border-b;
+      border-bottom-color: rgb(var(--color-base-content-rgb));
     }
   }
-  .govgr-table__header {
+  @media (min-width: 768px) {
+      .govgr-table__header,
+      .govgr-table__cell {
+        &:last-child {
+          border-bottom-color: rgb(var(--color-base-300-rgb));
+        }
+      }
+  }
+  .govgr-table__head .govgr-table__header {
     @apply hidden md:table-cell;
   }
+  .govgr-table__body .govgr-table__header,
   .govgr-table__cell {
     @apply block md:table-cell;
   }
@@ -188,6 +197,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;
 }
@@ -204,38 +221,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;
-  }
-  .govgr-dropdown__button--underline:not(:focus) {
-    @apply underline !important;
-    text-decoration-thickness: 2px !important;
-  }
-  .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-table__cell {
-  .govgr-btn {
-    @apply mb-0;
-  }
-  .govgr-button-group {
-    @apply mb-0;
-  }
-}
 .govgr-table__header,
 .govgr-table__cell {
   @apply pr-5 py-2.5 pl-0 border-b border-solid border-base-300 text-left align-middle;
@@ -275,3 +260,37 @@
     backdrop-filter: blur(0.6px);
   }
 }
+
+/* overrides */
+
+.govgr-table {
+  .govgr-dropdown__content {
+    @apply mt-0;
+  }
+  .govgr-dropdown__button {
+    @apply mb-0;
+  }
+}
+.govgr-table__cell {
+  .govgr-btn {
+    @apply mb-0;
+  }
+  .govgr-btn-group {
+    @apply mb-0;
+  }
+}
+.govgr-table__header {
+  .govgr-dropdown__content {
+    @apply py-0;
+  }
+  .govgr-dropdown__button:not(:focus) {
+    @apply no-underline font-bold text-base-content !important;
+  }
+  .govgr-dropdown__button--underline:not(:focus) {
+    @apply underline !important;
+    text-decoration-thickness: 2px !important;
+  }
+  .govgr-nav__list-item-link, .govgr-nav__list-item-btn {
+    @apply flex no-underline;
+  }
+}

package/src/components/tabs.css

@@ -47,3 +47,22 @@
     }
   }
 }
+
+.govgr-tabs--vertical {
+  .govgr-tabs__panel {
+    @apply min-h-full pt-4 pl-6;
+  }
+  .govgr-tabs__list {
+    .govgr-tabs__list-item {
+      @apply w-full rounded-none mb-1 md:bg-base-200 border-base-200;
+      width: calc(100% - 0.25rem);
+      &.govgr-tabs__list-item-selected {
+        @apply md:border-b md:border-r-0 mb-1 mt-0 px-4 py-2;
+        /* margin-right: -1px; */
+        width: calc(100% + 1px);
+        /* margin-top: 0px; */
+      }
+    }
+  }
+
+}

package/src/components/tailwind.config.js

@@ -1,10 +1,16 @@
-const plugin = require('tailwindcss/plugin')
-const tailwindConfig = require('../../tailwind.config.js');
+const plugin = require("tailwindcss/plugin");
+const tailwindConfig = require("../../tailwind.config");
+
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   ...tailwindConfig,
+  content: {
+    files: ["./*.css"],
+    relative: true,
+  },
   plugins: [
-    plugin(function ({ addBase, addUtilities }) {
-      addUtilities(require('../../dist/utilities'), { variants: ['responsive'] })
-    })
+    plugin(function ({ addUtilities }) {
+      addUtilities(require("../../dist/utilities"));
+    }),
   ],
-}
+};

package/src/components/task-list.css

@@ -15,14 +15,40 @@
 }
 .govgr-task-list__content {
   @apply mb-4;
+}
+.govgr-task-list__content__tag {
+  @apply px-2 py-1 mr-2 inline-block font-sans text-sm uppercase tracking-widest print:border-2 print:bg-white print:mr-4;
+}
+.govgr-task-list__content__tag--info {
+  @apply bg-info text-white print:border-info-hover print:text-info-hover;
+}
+.govgr-task-list__content__tag--primary {
+  @apply bg-secondary text-base-content print:border-info print:text-info;
+}
+.govgr-task-list__content__tag--secondary {
+  @apply bg-base-300 print:border-base-800 print:text-base-800;
+}
+
+/* overrides */
+
+.govgr-task-list--dense{
+  .govgr-task-list__item {
+    @apply mb-4 md:mb-6;
+    .govgr-summary-list{
+      @apply mb-4 md:mb-6; 
+    }
+  }
+}
+.govgr-task-list__content {
   .govgr-body {
     @apply mb-2 md:mb-3;
   }
   .govgr-summary-list__row:first-child {
-    & > dt {
+    & > .govgr-summary-list__key {
       @apply border-t-2 border-base-400;
     }
-    & > dd {
+    & > .govgr-summary-list__value,
+    & > .govgr-summary-list__actions {
       @apply sm:border-t-2 sm:border-base-400;
     }
   }
@@ -30,16 +56,3 @@
     @apply font-normal sm:mb-0 mb-2 pt-2;
   }
 }
-.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 {
-  @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 {
-  @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 {
-  @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/timeline.css

@@ -1,13 +1,22 @@
 .govgr-timeline {
   @apply mb-4 pl-6 pb-2 border-l-4 border-secondary;
-}
-.govgr-timeline--spaced {
-  .govgr-timeline__item {
-    @apply mb-10 md:mb-12;
+  &.govgr-timeline--dense, .govgr-dense & {
+    @apply pb-0 border-l-3;
+    .govgr-timeline__item {
+      @apply mb-4 md:mb-6;
+    }
+    .govgr-timeline__heading {
+      @apply mb-2;
+      &::before {
+        content: "";
+        @apply border-b-3;
+      }
+    }
   }
 }
+
 .govgr-timeline__item {
-  @apply mb-8 md:mb-10;
+  @apply mb-10 md:mb-12;
 }
 .govgr-timeline__heading {
   @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2 relative;
@@ -31,13 +40,19 @@
 }
 .govgr-timeline__content {
   @apply mb-4;
+}
+.govgr-timeline__actions {
+  @apply flex flex-wrap items-center gap-4 mb-6;
+}
+
+/* overrides */
+.govgr-timeline__content {
   .govgr-hint,
   .govgr-body {
     @apply mb-2 md:mb-3;
   }
 }
 .govgr-timeline__actions {
-  @apply flex flex-wrap items-center gap-4 mb-6;
   .govgr-btn,
   .govgr-link {
     @apply mb-0;

package/src/components/typography.css

@@ -1,35 +1,43 @@
 .govgr-heading-xl {
   @apply mx-0 max-w-2xl;
   font-size: var(--heading-xl-font-size);
-  line-height:var(--heading-xl-line-height);
-  margin-bottom:var(--heading-xl-margin-bottom);
+  line-height: var(--heading-xl-line-height);
+  margin-bottom: var(--heading-xl-margin-bottom);
   font-weight: var(--heading-xl-font-weight);
   letter-spacing: var(--heading-xl-letter-spacing);
 }
 .govgr-heading-lg {
   @apply mx-0;
   font-size: var(--heading-lg-font-size);
-  line-height:var(--heading-lg-line-height);
-  margin-bottom:var(--heading-lg-margin-bottom);
+  line-height: var(--heading-lg-line-height);
+  margin-bottom: var(--heading-lg-margin-bottom);
   font-weight: var(--heading-lg-font-weight);
   letter-spacing: var(--heading-lg-letter-spacing);
 }
 .govgr-heading-md {
   @apply mx-0;
   font-size: var(--heading-md-font-size);
-  line-height:var(--heading-md-line-height);
-  margin-bottom:var(--heading-md-margin-bottom);
+  line-height: var(--heading-md-line-height);
+  margin-bottom: var(--heading-md-margin-bottom);
   font-weight: var(--heading-md-font-weight);
   letter-spacing: var(--heading-md-letter-spacing);
 }
 .govgr-heading-sm {
-  @apply mx-0 ;
+  @apply mx-0;
   font-size: var(--heading-sm-font-size);
-  line-height:var(--heading-sm-line-height);
-  margin-bottom:var(--heading-sm-margin-bottom);
+  line-height: var(--heading-sm-line-height);
+  margin-bottom: var(--heading-sm-margin-bottom);
   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);
@@ -38,7 +46,6 @@
   margin-bottom: var(--caption-xl-margin-bottom);
   font-weight: var(--caption-xl-font-weight);
   letter-spacing: var(--heading-xl-letter-spacing);
-
 }
 .govgr-caption-lg {
   @apply block mx-0 font-normal;
@@ -48,7 +55,6 @@
   margin-bottom: var(--caption-lg-margin-bottom);
   font-weight: var(--caption-lg-font-weight);
   letter-spacing: var(--caption-lg-letter-spacing);
-
 }
 .govgr-caption-md {
   @apply block mx-0 font-normal;
@@ -58,7 +64,6 @@
   margin-bottom: var(--caption-md-margin-bottom);
   font-weight: var(--caption-md-font-weight);
   letter-spacing: var(--caption-md-letter-spacing);
-
 }
 .govgr-\!-font-size-14 {
   @apply text-xs md:text-sm !important;
@@ -91,21 +96,26 @@
   letter-spacing: var(--list-letter-spacing);
   .govgr-list__item {
     @apply mb-2;
-    &:last-child{
+    &:last-child {
       @apply mb-0;
     }
   }
 }
-.govgr-list__item>.govgr-list--bullet:nth-child(1){
+.govgr-list__item > .govgr-list--bullet:nth-child(1) {
   list-style: circle inside none;
 }
-.govgr-list__item>.govgr-list>.govgr-list__item>.govgr-list--bullet:nth-child(1){
+.govgr-list__item
+  > .govgr-list
+  > .govgr-list__item
+  > .govgr-list--bullet:nth-child(1) {
   @apply list-disc;
 }
-.govgr-list__item>.govgr-list:not(.govgr-list--bullet):not(.govgr-list--number):nth-child(1)>.govgr-list__item{
+.govgr-list__item
+  > .govgr-list:not(.govgr-list--bullet):not(.govgr-list--number):nth-child(1)
+  > .govgr-list__item {
   @apply pl-10;
 }
-.govgr-list__item>.govgr-list{
+.govgr-list__item > .govgr-list {
   @apply mb-0 mt-2;
 }
 .govgr-list--bullet {
@@ -114,15 +124,39 @@
 .govgr-list--number {
   @apply list-decimal list-outside pl-6;
 }
-.govgr-list--spaced>.govgr-list__item {
+.govgr-list--spaced:not(.govgr-list--horizontal) > .govgr-list__item {
   @apply mb-4;
+  &:last-child {
+    @apply mb-0;
+  }
+}
+.govgr-list--horizontal {
+  @apply flex flex-wrap gap-x-6 gap-y-3;
+  .govgr-list__item {
+    @apply w-full sm:w-auto;
+  }
+  &.govgr-list--spaced {
+    @apply gap-x-10 gap-y-5;
+  }
 }
-.govgr-list, .govgr-blockquote {
+@media (min-width: 768px) {
+  .govgr-list--col-2 {
+    column-count: 2;
+  }
+  .govgr-list--col-3 {
+    column-count: 2;
+  }
+}
+.govgr-list {
   @apply md:mb-8 mb-4 text-base-content;
 }
 .govgr-blockquote {
+  @apply mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500 text-base-content;
   font-size: var(--blockquote-font-size);
   line-height: var(--blockquote-line-height);
+  &.govgr-blockquote--dense, .govgr-dense & {
+    @apply mt-3 md:mb-6 p-3 border-l-6;
+  } 
 }
 .govgr-body {
   font-size: var(--body-font-size);
@@ -146,11 +180,6 @@
   color: var(--hint-color);
   letter-spacing: var(--hint-letter-spacing);
 }
-.govgr-background-dark, .govgr-masthead--primary {
-  .govgr-hint {
-    @apply opacity-70 text-white print:text-base-content;
-  }
-}
 
 .govgr-\!-font-weight-regular {
   @apply font-normal !important;
@@ -172,36 +201,25 @@
   &:focus {
     color: var(--link-color-active);
     background-color: var(--color-focus);
-    box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
-    text-decoration:none !important;
-    outline: none; 
-  }
-}
-.govgr-header {
-  .govgr-header__container > .govgr-link {
-    @apply text-white focus:text-link-active print:text-base-content;
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-base-content);
+    text-decoration: none !important;
+    outline: none;
   }
-  .govgr-header__content > .govgr-link {
-    @apply text-white focus:text-link-active print:text-base-content;
+  .govgr-heading-xl & ,
+  .govgr-heading-lg & ,
+  .govgr-heading-md & ,
+  .govgr-heading-sm & ,
+  .govgr-body &,
+  .govgr-hint &
+  {
+    font-size: inherit;
   }
 }
 .govgr-link--no-underline {
   @apply no-underline hover:underline;
 }
-.govgr-masthead--primary {
-  .govgr-link {
-    @apply text-white hover:text-white focus:text-base-content print:text-base-content;
-    &:hover {
-      text-decoration-thickness: 2px;
-    }
-  }
-  .govgr-link--no-underline {
-    @apply no-underline hover:underline;
-    &:hover {
-      text-decoration-thickness: 2px;
-    }
-  }
-}
 
 .govgr-back-link {
   font-size: var(--back-link-font-size);
@@ -212,18 +230,11 @@
   }
   &:focus {
     background-color: var(--color-focus);
-    box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
-    text-decoration:none;
-    outline: none; 
-  }
-  .govgr-svg-icon--caret {
-    fill:var(--color-base-content);
-    @apply md:w-4 md:h-4 w-3 h-3 inline-block mr-2;
-  }
-}
-.govgr-masthead--primary {
-  .govgr-back-link {
-    @apply text-white print:text-base-content;
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-base-content);
+    text-decoration: none;
+    outline: none;
   }
 }
 
@@ -249,7 +260,8 @@
   .govgr-body .govgr-link[href^="#"]:after {
     display: none;
   }
-  .govgr-link[href^="http://"]:after, .govgr-link[href^="https://"]:after {
+  .govgr-link[href^="http://"]:after, .govgr-link[href^="https://"]:after
+  {
     content: " (" attr(href) ")";
     font-size: 80%;
   }
@@ -259,4 +271,33 @@
   .govgr-link {
     @apply text-base-content;
   }
-}
+}
+
+/* overrides */
+
+.govgr-link {
+  .govgr-svg-icon {
+    fill: var(--color-link);
+  }
+  &:hover {
+    .govgr-svg-icon {
+      fill: var(--color-link-hover);
+    }
+  }
+  &:focus {
+    .govgr-svg-icon {
+      fill: var(--color-link-active);
+    }
+  }
+}
+button.govgr-link {
+  .govgr-svg-icon {
+    @apply ml-1;
+  }
+}
+.govgr-back-link {
+  .govgr-svg-icon--caret {
+    fill: var(--color-base-content);
+    @apply md:w-4 md:h-4 w-3 h-3 inline-block mr-2;
+  }
+}

package/src/components/warning-text.css

@@ -0,0 +1,23 @@
+.govgr-warning-text {
+  font-size: var(--warning-text-font-size);
+  @apply flex py-4 px-0;
+  .govgr-warning-text__icon {
+    @apply text-base-content-invert font-bold bg-base-content text-3xl leading-10 text-center 
+    rounded-3xl md:min-h-10 min-w-10 h-fit mr-6 mt-1
+    print:bg-white print:border-2 print:border-base-content print:text-base-content;
+  }
+  .govgr-warning-text__text {
+    @apply flex items-center;
+  }
+  .govgr-warning-text__assistive {
+    @apply absolute w-px h-px m-0 p-0 border-0 overflow-hidden whitespace-nowrap !important;
+    clip: rect(0 0 0 0) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+  }
+  &.govgr-warning-text--dense, .govgr-dense & {
+    .govgr-warning-text__icon  {
+      @apply mr-4 md:mr-5;
+    }
+  }
+}

package/src/fonts.css

@@ -1 +1 @@
-@import "@fontsource/roboto/index.css"; 
+@import "@fontsource/roboto/index.css";

package/src/index.css

@@ -1,5 +1,3 @@
 @import "./utilities/utilities.css";
 @import "./components/components.css";
 @import "./base/base.css";
-
-

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>