@digigov/css 1.0.0-3bfc7d37 → 1.0.0-47312a12

package/src/components/layout.css

@@ -1,3 +1,4 @@
+
 .govgr-layout {
   display: flex;
   flex-direction: column;
@@ -17,7 +18,27 @@
   @apply mb-4;
 }
 .govgr-aside {
-  @apply flex flex-wrap flex-col md:sticky md:top-8 h-fit print:order-1;
+  @apply flex flex-wrap flex-col md:top-8 h-fit print:order-1;
+  .govgr-back-to-top {
+    @apply flex flex-1 content-end flex-wrap;
+    .govgr-back-to-top-link {
+      @apply md:mx-6 md:my-4;
+    }
+    &.govgr-back-to-top--persistent {
+      .govgr-back-to-top-content {
+        @apply sticky bottom-0 mb-4;
+      }
+    }
+  }
+}
+.govgr-aside--sticky {
+  @apply md:sticky;
+  &.govgr-aside--full-height {
+    max-height: calc(100vh - 2rem);
+  }
+}
+.govgr-aside--full-height {
+  @apply h-full;
 }
 .govgr-bottom {
   @apply w-full flex flex-wrap  box-border;
@@ -38,24 +59,36 @@
   @apply border-t border-base-300 border-solid;
 }
 .govgr-section-break--md {
- @apply mb-5;
+  @apply mb-5;
 }
 .govgr-section-break--lg {
- @apply mb-7;
+  @apply mb-7;
 }
 .govgr-section-break--xl {
- @apply mb-9;
+  @apply mb-9;
 }
 
 /* overrides */
 
+.govgr-main {
+  >.govgr-back-to-top--persistent {
+    @apply fixed bottom-0 right-0 bg-base-200 w-full z-5;
+    .govgr-back-to-top-link {
+      @apply mx-6 my-4;
+    }
+    .govgr-back-to-top-content {
+      @apply max-w-5xl mx-auto my-0;
+    }
+  }
+}
 .govgr-container {
   &.govgr-grid {
     @apply py-4 print:gap-4 print:grid-cols-1;
   }
 }
 .govgr-btn-group {
-  .govgr-btn, .govgr-link {
+  .govgr-btn,
+  .govgr-link {
     @apply mb-0;
   }
 }

package/src/components/modal.css

@@ -3,6 +3,7 @@
   mb-7 text-base-content bg-opacity-50 bg-base-700
   fixed z-50 left-0 top-0 w-full h-full overflow-auto;
 }
+
 .govgr-modal--open {
   @apply flex;
 }
@@ -23,11 +24,15 @@
   @apply flex flex-wrap items-center gap-4;
 }
 
-/* overrides */
-
 .govgr-modal__action {
   .govgr-link,
   .govgr-btn {
     @apply mb-0;
   }
 }
+
+.govgr-modal--dense, .govgr-dense & {
+  .govgr-modal__container {
+    @apply px-4 py-0 gap-4;
+  }
+}

package/src/components/nav.css

@@ -1,23 +1,47 @@
 .govgr-nav {
   @apply relative block w-full h-auto bg-base-100 text-base-content;
-  .govgr-nav__list {
+  /* .govgr-nav__list {
     @apply px-3;
-  }
+  } */
   .govgr-nav__list-item-link,
   .govgr-nav__list-item-btn {
     @apply md:no-underline !important;
   }
 }
-.govgr-nav--fixed {
-  @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;
+.govgr-nav--hidden {
+  @apply hidden;
+}
+.govgr-nav--drawer {
+  @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto p-4;
+  @apply shadow-thick !important;
+  .govgr-nav__list--horizontal {
+    @apply px-0;
+  }
+}
+.govgr-nav--drawer-smDown {
+  @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto p-4
+  sm:relative sm:block sm:w-full sm:h-auto sm:z-auto sm:top-auto sm:overflow-visible sm:p-0;
   @apply shadow-thick sm:shadow-none !important;
-  .govgr-nav__list {
-    @apply p-4;
+  .govgr-nav__list--horizontal {
+    @apply px-0 sm:px-4;
   }
 }
-.govgr-nav--open {
-  @apply block;
+.govgr-nav--drawer-mdDown {
+  @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto p-4
+  md:relative md:block md:w-full md:h-auto md:z-auto md:top-auto md:overflow-visible md:p-0;
+  @apply shadow-thick md:shadow-none !important;
+  .govgr-nav__list--horizontal {
+    @apply px-0 md:px-4;
+  }
+}
+
+.govgr-nav--drawer-lgDown {
+  @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto p-4
+  lg:relative lg:block lg:w-full lg:h-auto lg:z-auto lg:top-auto lg:overflow-visible lg:p-0;
+  @apply shadow-thick lg:shadow-none !important;
+  .govgr-nav__list--horizontal {
+    @apply px-0 lg:px-4;
+  }
 }
 .govgr-nav--border {
   @apply sm:border-b sm:border-base-400;
@@ -26,7 +50,7 @@
   @apply w-full m-0 max-w-5xl static flex flex-wrap flex-col;
 }
 .govgr-nav__list--horizontal {
-  @apply sm:mx-auto sm:gap-x-6 sm:py-1 px-3 sm:px-0 sm:flex-row;
+  @apply sm:mx-auto sm:gap-x-6 sm:py-1 px-4 sm:flex-row;
   .govgr-nav__list-item {
     @apply sm:gap-x-6;
   }
@@ -39,6 +63,7 @@
 }
 .govgr-nav__list-item-link,
 .govgr-nav__list-item-btn {
+  @apply text-left;
   &:focus {
     @apply bg-focus text-base-content outline-none;
     box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
@@ -90,7 +115,7 @@
 
 .govgr-nav {
   .govgr-close-btn {
-    @apply sm:hidden mt-3;
+    @apply mb-4;
   }
   .govgr-heading-md {
     @apply mb-2 md:mb-0;
@@ -105,7 +130,7 @@
 .govgr-nav__list-item-link,
 .govgr-nav__list-item-btn {
   > .govgr-svg-icon {
-    @apply ml-0.5;
+    @apply ml-1;
   }
 }
 .govgr-nav__list-item-link--active,

package/src/components/notification-banner.css

@@ -1,5 +1,14 @@
 .govgr-notification-banner {
   @apply border-5 mb-6 md:mb-8 font-normal print:bg-white;
+  &.govgr-notification-banner--dense, .govgr-dense & {
+    @apply border-4 mb-4 md:mb-5;
+    .govgr-notification-banner__title {
+      @apply px-2 sm:px-3 pb-1;
+    }
+    .govgr-notification-banner__content {
+      @apply p-3 md:p-4;
+    }
+  }
 }
 .govgr-notification-banner--info {
   @apply bg-info border-info;
@@ -9,7 +18,7 @@
   .govgr-notification-banner__link {
     &:link:not(:focus) {
       @apply text-success;
-    } 
+    }
   }
 }
 .govgr-notification-banner--error {
@@ -46,7 +55,9 @@
   }
   &:focus {
     background-color: var(--color-focus);
-    box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-base-content);
     text-decoration: none;
     outline: none;
   }
@@ -55,4 +66,4 @@
   .govgr-notification-banner__link {
     font-size: inherit;
   }
-}
+}

package/src/components/pagination.css

@@ -68,5 +68,8 @@
   .govgr-link {
     pointer-events: none;
     @apply text-base-800;
+    .govgr-svg-icon {
+      fill: var(--color-base-800);
+    }
   }
 }

package/src/components/panel.css

@@ -15,6 +15,7 @@
   letter-spacing: var(--panel__title-letter-spacing);
 }
 .govgr-panel__body {
+  @apply break-words;
   font-size: var(--panel__body-font-size);
   line-height:var(--panel__body-line-height);
   margin:var(--panel__body-margin);

package/src/components/radios.css

@@ -1,4 +1,16 @@
-.govgr-radios {}
+.govgr-radios {
+  &.govgr-radios--dense, govgr-dense & {
+    .govgr-radios__item {
+      @apply mb-2 pl-9 min-h-8;
+    }
+    .govgr-radios__input {
+      @apply left-0.5 top-0 w-8 h-8;
+      &:focus {
+        border-width: 3px;
+      }
+    }
+  }
+}
 .govgr-radios__item {
   @apply block relative mb-4 pl-12;
   min-height: 40px;
@@ -47,3 +59,10 @@
     @apply min-w-max mx-2;
   }
 }
+.govgr-radios {
+  &.govgr-radios--dense, .govgr-dense & {
+    .govgr-field {
+      @apply mb-4 md:mb-6;
+    }
+  }
+}

package/src/components/stepnav.css

@@ -24,7 +24,7 @@
     height: calc(100% - 2rem);
   }
   &:after {
-    @apply absolute z-/1 w-0 h-full bg-base-100 left-0 top-8 border-2 border-base-400 border-r-0 border-t-0 border-b-0 md:border-l-3;
+    @apply absolute z-0 w-0 h-full bg-base-100 left-0 top-8 border-2 border-base-400 border-r-0 border-t-0 border-b-0 md:border-l-3;
     content: "";
     margin-left: calc(0.75rem + 1px);
   }

package/src/components/svg-icons.css

@@ -46,13 +46,12 @@
 }
 .govgr-svg-icon--burger {
   fill: var(--color-base-content);
-  /* @apply w-8 h-8 float-right cursor-pointer transition-all  */
-  @apply transition-all focus:bg-focus;
+  @apply transition-transform focus:bg-focus;
   @apply cursor-pointer;
   #govgr-svg-icon--burger__line-1,
   #govgr-svg-icon--burger__line-2,
   #govgr-svg-icon--burger__line-3 {
-    @apply transition-all;
+    @apply transition-transform;
   }
   #govgr-svg-icon--burger__line-1 {
     x: 2px;

package/src/components/tabs.css

@@ -15,7 +15,7 @@
       @apply md:float-left md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2;
       @apply print:hidden;
       &.govgr-tabs__list-item-selected {
-        @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:pb-4 md:-mt-1 md:pt-4;
+        @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:py-4 md:-mt-1;
         margin-bottom: -1px;
         &:hover {
           text-decoration-thickness: 2px;
@@ -46,4 +46,36 @@
       @apply block;
     }
   }
+  &.govgr-tabs--dense, .govgr-dense & {
+    .govgr-tabs__list {
+        .govgr-tabs__list-item {
+        @apply px-3 py-1;
+        &.govgr-tabs__list-item-selected {
+            @apply md:px-4 md:pb-3 md:pt-2;
+        }
+        }
+    }
+    .govgr-tabs__panel {
+        @apply pb-2 pt-3;
+    }
+  }
+}
+
+.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/typography.css

@@ -38,6 +38,9 @@
   font-weight: var(--heading-xs-font-weight);
   letter-spacing: var(--heading-xs-letter-spacing);
 }
+.govgr-heading--break-words {
+  @apply break-words;
+}
 .govgr-caption-xl {
   @apply block mx-0 font-normal;
   color: var(--caption-xl-color);
@@ -180,6 +183,9 @@
   color: var(--hint-color);
   letter-spacing: var(--hint-letter-spacing);
 }
+.govgr-hint--break-words {
+  @apply break-words;
+}
 
 .govgr-\!-font-weight-regular {
   @apply font-normal !important;
@@ -290,6 +296,11 @@
     }
   }
 }
+button.govgr-link {
+  .govgr-svg-icon {
+    @apply ml-1;
+  }
+}
 .govgr-back-link {
   .govgr-svg-icon--caret {
     fill: var(--color-base-content);

package/src/components/warning-text.css

@@ -1,7 +1,6 @@
 .govgr-warning-text {
   font-size: var(--warning-text-font-size);
-  @apply p-4;
-  @apply flex pt-4 pb-4 pl-0 pr-0;
+  @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
@@ -16,4 +15,9 @@
     -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/pages/dropdown.js

@@ -75,7 +75,7 @@ export default function Dropdown() {
       </p>
 
       <details className="govgr-dropdown">
-        <summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary govgr-dropdown__button--arrow">
+        <summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary govgr-dropdown__button--chevron">
           Ενέργειες
           <svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--arrow--down" focusable="false" viewBox="0 0 24 24">
             <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
@@ -143,7 +143,7 @@ export default function Dropdown() {
         </details>
 
         <details className="govgr-dropdown govgr-dropdown--left govgr-dropdown--up">
-          <summary className="govgr-dropdown__button govgr-link  govgr-dropdown__button--arrow">
+          <summary className="govgr-dropdown__button govgr-link  govgr-dropdown__button--chevron">
             Ενέργειες
             <svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--arrow--down" focusable="false" viewBox="0 0 24 24">
               <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />

package/tailwind.config.js

@@ -156,6 +156,7 @@ module.exports = {
         1: 1,
         2: 2,
         3: 3,
+        5: 5,
       },
       opacity: {
         85: "0.85",
@@ -166,11 +167,6 @@ module.exports = {
       boxShadow: {
         thick: "0 0 30px rgba(0, 0, 0, 0.6)",
       },
-      borderColor: {
-        // TODO: fix this invalid value in the future
-        // Read more: https://gitlab.grnet.gr/devs/digigov/digigov-sdk/-/merge_requests/818
-        DEFAULT: "reset",
-      },
     },
   },
   plugins: [plugin(themesPlugin)],

package/src/components/accessibility-menu.css

@@ -1,76 +0,0 @@
-.govgr-accessibility-menu {}
-.govgr-accessibility-menu--left {
-  .govgr-accessibility-menu__btn {
-    @apply left-4;
-  }
-  .govgr-accessibility-menu__content {
-    @apply left-0;
-  }
-}
-.govgr-accessibility-menu--right {
-  .govgr-accessibility-menu__btn {
-    @apply right-4;
-  }
-  .govgr-accessibility-menu__content {
-    @apply right-0;
-  }
-}
-.govgr-accessibility-menu__btn {
-  @apply absolute bottom-4 bg-base-300;
-  @apply p-4 rounded-full !important;
-  box-shadow: 0px 2px 5px rgba(var(--color-base-900-rgb), 0.3);
-  &:hover {
-    @apply bg-base-400;
-  }
-}
-.govgr-accessibility-menu__content {
-  @apply bg-base-200 absolute top-0 bottom-0 p-4 flex flex-col max-w-md;
-}
-
-.govgr-accessibility-menu__header {
-  @apply inline-flex justify-between items-center mb-6 gap-2;
-}
-.govgr-accessibility-menu__header-btn {
- @apply flex flex-nowrap; 
-}
-.govgr-accessibility-menu__body {
-  @apply overflow-y-scroll p-3 flex-grow;
-}
-.govgr-accessibility-menu__list {
-  @apply grid grid-cols-1 sm:grid-cols-2 gap-5;
-}
-.govgr-accessibility-menu__list-item {
-  @apply col-span-1;
-}
-.govgr-accessibility-menu__option-btn {
-  @apply flex flex-col gap-2;
-  @apply bg-base-100 border-base-100 border-2;
-  @apply w-full sm:w-fit leading-tight m-0 !important;
-  padding: calc(1rem + 2px) !important;
-  &:hover {
-    @apply border-base-content;
-  }
-}
-.govgr-accessibility-menu__option-btn--selected {
-  @apply border-success border-4 text-success p-4 !important;
-  .govgr-accessibility-menu__steps {
-    @apply opacity-100;
-  }
-}
-.govgr-accessibility-menu__steps {
-  @apply flex flex-nowrap w-full gap-2 h-1 mt-2 opacity-0;
-}
-.govgr-accessibility-menu__step {
-  @apply bg-base-300 w-full;
-}
-.govgr-accessibility-menu__step--active {
-  @apply bg-success;
-}
-
-/* overrides */
-
-.govgr-accessibility-menu__option-btn--selected {
-  .govgr-svg-icon {
-    fill: var(--color-success) !important;
-  }
-}