@digigov/css 1.0.0-rc.2 → 1.0.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -48,13 +48,13 @@
     "tailwindcss": "3.3.5",
     "nodemon": "2.0.7",
     "next": "10.0.9",
-    "@digigov/postcss-banner": "1.0.0-rc.2",
-    "@digigov/cli-build-tailwind": "1.0.0-rc.2",
+    "@digigov/postcss-banner": "1.0.0-rc.4",
+    "@digigov/cli-build-tailwind": "1.0.0-rc.4",
     "rimraf": "3.0.2",
     "postcss-js": "4.0.0",
     "postcss-load-config": "3.1.4",
     "publint": "0.1.8",
-    "@digigov/cli": "1.0.0-rc.2"
+    "@digigov/cli": "1.0.0-rc.4"
   },
   "scripts": {
     "preutilities": "DIGIGOV_CSS_BUILD=TRUE postcss --config src/utilities src/utilities/index.css --base src --dir dist",

package/src/base/index.css

@@ -5,6 +5,7 @@
 }
 html{
   -webkit-tap-highlight-color: transparent;
+  scroll-behavior: smooth;
 }
 body {
   @apply font-sans text-base-content bg-base-100;

package/src/components/accordion.css

@@ -46,7 +46,7 @@
     @apply text-base-content focus:underline flex justify-between;
     &::after {
       content: "+";
-      @apply text-2xl text-base-content float-right relative -right-8;
+      @apply text-2xl text-base-content float-right relative -right-8 ml-2;
     }
   }
   .govgr-accordion__section[open] {

package/src/components/back-to-top.css

@@ -0,0 +1,29 @@
+.govgr-back-to-top-content {
+  
+}
+  
+.govgr-back-to-top-link {
+  font-size: var(--back-to-top-link-font-size);
+  letter-spacing: var(--back-to-top-link-letter-spacing);
+  color: var(--back-to-top-link-color);
+  @apply w-fit underline flex mb-4 cursor-pointer items-baseline;
+  &:hover {
+    text-decoration-thickness: 2px;
+  }
+  &:focus {
+    background-color: var(--color-focus);
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-base-content);
+    text-decoration: none;
+    outline: none;
+  }
+}
+
+/* overrides */
+
+.govgr-back-to-top-link {
+  .govgr-svg-icon {
+    fill: var(--back-to-top-link-color);
+  }
+}

package/src/components/button.css

@@ -1,4 +1,7 @@
-.govgr-btn {
+.govgr-btn,
+.govgr-btn[type=submit],
+.govgr-btn[type=button],
+.govgr-btn[type=reset] {
   @apply no-underline font-medium cursor-pointer 
   m-0 mb-8 w-max min-h-10 md:min-h-12 
   flex gap-x-3 items-center;
@@ -15,7 +18,8 @@
   &:focus-within {
     @apply outline-none;
   }
-  &.govgr-btn--dense, .govgr-dense & {
+  &.govgr-btn--dense,
+  .govgr-dense & {
     --btn-padding: 0.375rem 0.75rem;
     @apply min-h-8;
     &:focus {
@@ -26,7 +30,10 @@
     }
   }
 }
-.govgr-btn-primary {
+.govgr-btn-primary,
+.govgr-btn-primary[type="submit"],
+.govgr-btn-primary[type="button"],
+.govgr-btn-primary[type="reset"] {
   -webkit-box-shadow: 0 2px 0 var(--color-base-content);
   box-shadow: 0 2px 0 var(--color-base-content);
   background-color: var(--btn-primary-background-color);
@@ -45,7 +52,10 @@
   @apply py-4 print:pr-2;
   font-size: var(--btn-cta-font-size);
 }
-.govgr-btn-secondary {
+.govgr-btn-secondary,
+.govgr-btn-secondary[type="submit"],
+.govgr-btn-secondary[type="button"],
+.govgr-btn-secondary[type="reset"] {
   -webkit-box-shadow: 0 2px 0 var(--color-base-500);
   box-shadow: 0 2px 0 var(--color-base-500);
   @apply hover:no-underline
@@ -60,7 +70,10 @@
     background-color: var(--btn-secondary-background-color-active);
   }
 }
-.govgr-btn-warning {
+.govgr-btn-warning,
+.govgr-btn-warning[type="submit"],
+.govgr-btn-warning[type="button"],
+.govgr-btn-warning[type="reset"] {
   -webkit-box-shadow: 0 2px 0 var(--color-base-content);
   box-shadow: 0 2px 0 var(--color-base-content);
   @apply hover:no-underline
@@ -106,11 +119,11 @@
   }
 }
 .govgr-btn-cta {
-  .govgr-svg-icon--arrow {
+  .govgr-svg-icon--chevron {
     @apply w-5 h-5 inline-block ml-2 mr-2 transition-all;
   }
   &:hover {
-    .govgr-svg-icon--arrow {
+    .govgr-svg-icon--chevron {
       @apply ml-4 mr-0;
     }
   }

package/src/components/drawer.css

@@ -1,17 +1,17 @@
 .govgr-drawer {
   @apply border border-base-300 bg-base-100 p-4
-  h-full max-h-screen min-h-screen overflow-y-scroll w-4/5 max-w-md
+  h-full max-h-screen min-h-screen overflow-y-scroll w-4/5 max-w-md flex flex-col
   fixed top-0 bottom-0 z-40;
   @apply shadow-thick !important;
 }
 .govgr-drawer--relative-sm {
-  @apply sm:block sm:relative sm:w-full max-h-full shadow-thick sm:shadow-none !important;
+  @apply sm:relative sm:w-full max-h-full shadow-thick sm:shadow-none !important;
 }
 .govgr-drawer--relative-md {
-  @apply md:block md:relative md:w-full max-h-full shadow-thick md:shadow-none !important;
+  @apply md:relative md:w-full max-h-full shadow-thick md:shadow-none !important;
 }
 .govgr-drawer--relative-lg {
-  @apply lg:block lg:relative lg:w-full max-h-full shadow-thick lg:shadow-none !important;
+  @apply lg:relative lg:w-full max-h-full shadow-thick lg:shadow-none !important;
 }
 .govgr-drawer--right {
   @apply right-0;
@@ -19,8 +19,21 @@
 .govgr-drawer--left {
   @apply left-0;
 }
+.govgr-drawer--bg-secondary {
+  @apply bg-base-200 border-0;
+  @apply shadow-xl !important;
+}
 .govgr-drawer--closed {
   @apply hidden;
+  &.govgr-drawer--relative-sm {
+    @apply hidden sm:flex;
+  }
+  &.govgr-drawer--relative-md {
+    @apply hidden md:flex;
+  }
+  &.govgr-drawer--relative-lg {
+    @apply hidden lg:flex;
+  }
 }
 .govgr-drawer__heading {
   @apply p-0 mb-4 flex justify-between align-baseline;
@@ -31,6 +44,11 @@
 
 /* overrides */
 
+.govgr-drawer {
+  > .govgr-container {
+    @apply p-0;
+  }
+}
 .govgr-drawer__heading {
   .govgr-heading-xs,
   .govgr-heading-sm,
@@ -40,3 +58,25 @@
     @apply m-0;
   }
 }
+.govgr-drawer--relative-sm {
+  .govgr-drawer__heading {
+    >.govgr-close-btn {
+      @apply sm:hidden;
+    }
+  }
+}
+.govgr-drawer--relative-md {
+  .govgr-drawer__heading {
+    >.govgr-close-btn {
+      @apply md:hidden;
+    }
+  }
+}
+.govgr-drawer--relative-lg {
+  .govgr-drawer__heading {
+    >.govgr-close-btn {
+      @apply lg:hidden;
+    }
+  }
+}
+

package/src/components/dropdown.css

@@ -1,57 +1,71 @@
 .govgr-dropdown {
   @apply w-fit relative;
-}
-.govgr-dropdown--up {
-  .govgr-dropdown__content {
-    @apply mb-4 border border-b-0 bottom-full;
-    -webkit-box-box-shadow: 0 2px 8px rgba(var(--color-base-900-rgb), 0.3), 0 2px 0 var(--color-base-500);
-    box-shadow: 0 2px 8px rgba(var(--color-base-900-rgb), 0.3), 0 2px 0 var(--color-base-500);
+  &.govgr-dropdown--up {
+    .govgr-dropdown__content {
+      @apply mb-4 border border-b-0 bottom-full;
+      -webkit-box-box-shadow:
+        0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+        0 2px 0 var(--color-base-500);
+      box-shadow:
+        0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+        0 2px 0 var(--color-base-500);
+    }
   }
-}
-.govgr-dropdown--right {
-  .govgr-dropdown__content {
-    @apply right-0 mr-0 ml-4;
+  &.govgr-dropdown--right {
+    .govgr-dropdown__content {
+      @apply right-0 mr-0 ml-4;
+    }
+  }
+  &.govgr-dropdown--disabled {
+    @apply cursor-not-allowed;
+    .govgr-dropdown__button {
+      pointer-events: none;
+      user-select: none;
+      opacity: 0.5;
+    }
+  }
+  &.govgr-dropdown--dense,
+  .govgr-dense & {
+    .govgr-dropdown__content {
+      @apply p-2;
+    }
   }
-}
-.govgr-dropdown--disabled {
-  @apply cursor-not-allowed;
   .govgr-dropdown__button {
-    pointer-events: none; 
-    user-select: none; 
-    opacity: 0.5;
+    @apply w-fit print:text-base-content;
+    &::marker {
+      font-size: 0px;
+    }
   }
-} 
-.govgr-dropdown__button {
-  @apply w-fit print:text-base-content;
-  &::marker {
-    font-size: 0px;
+  .govgr-dropdown__button.govgr-link + .govgr-dropdown__content {
+    @apply mt-4 print:text-base-content;
   }
-}
-.govgr-dropdown__button.govgr-link + .govgr-dropdown__content {
-  @apply mt-4 print:text-base-content;
-}
-.govgr-btn-group .govgr-btn + .govgr-dropdown__content {
-  @apply mt-4;
-}
-.govgr-dropdown__content {
-  @apply border border-base-400 p-4 bg-base-100 border-t-0
-  max-w-xs w-max min-w-full absolute transition z-3 mr-4 -mt-4;
-  -webkit-box-box-shadow: 0 2px 8px rgba(var(--color-base-900-rgb), 0.3), 0 -2px 0 var(--color-base-500);
-  box-shadow: 0 2px 8px rgba(var(--color-base-900-rgb), 0.3), 0 -2px 0 var(--color-base-500);
-  *:last-child {
-    @apply mb-0;
+  .govgr-btn-group .govgr-btn + .govgr-dropdown__content {
+    @apply mt-4;
+  }
+  .govgr-dropdown__content {
+    @apply border border-base-400 p-4 bg-base-100 border-t-0
+    max-w-xs w-max min-w-full absolute transition z-3 mr-4 -mt-4;
+    -webkit-box-box-shadow:
+      0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+      0 -2px 0 var(--color-base-500);
+    box-shadow:
+      0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+      0 -2px 0 var(--color-base-500);
+    *:last-child {
+      @apply mb-0;
+    }
+  }
+  .govgr-dropdown__content--full-width {
+    @apply min-w-full;
   }
-}
-.govgr-dropdown__content--full-width {
-  @apply min-w-full;
 }
 
 /* overrides */
 
 .govgr-dropdown {
   &[open] {
-    .govgr-dropdown__button--arrow {
-      .govgr-svg-icon--arrow {
+    .govgr-dropdown__button--chevron {
+      .govgr-svg-icon--chevron {
         @apply transform -rotate-180;
       }
     }
@@ -59,7 +73,7 @@
       &.govgr-btn-primary {
         background-color: var(--btn-primary-background-color-hover);
         color: var(--btn-primary-color-hover);
-        }
+      }
       &.govgr-btn-secondary {
         background-color: var(--btn-secondary-background-color-hover);
         color: var(--btn-secondary-color-hover);
@@ -70,37 +84,48 @@
       }
     }
   }
-  .govgr-dropdown__button--arrow {
-    .govgr-svg-icon--arrow {
+  .govgr-dropdown__button--chevron {
+    .govgr-svg-icon--chevron {
       @apply transition duration-300;
     }
   }
-}
-.govgr-dropdown__button {
-  .govgr-svg-icon {
-    @apply w-5 h-6 md:h-8;
-    @apply print:hidden;
-  }
-  &.govgr-link {
-    @apply inline-flex gap-1 items-center;
-  }
-}
-.govgr-dropdown__content {
-  .govgr-field {
-    @apply mb-4;
+  .govgr-dropdown__button {
+    .govgr-svg-icon {
+      @apply w-5 h-6 md:h-8;
+      @apply print:hidden;
+    }
+    &.govgr-link {
+      @apply inline-flex gap-1 items-center;
+    }
   }
-  .govgr-section-break {
-    @apply -mx-4 w-auto;
+  .govgr-dropdown__content {
+    .govgr-field {
+      @apply mb-4;
+    }
+    .govgr-section-break {
+      @apply -mx-4 w-auto;
+    }
+    > .govgr-nav__list {
+      @apply w-auto -mx-4 flex-col;
+      .govgr-nav__list-item {
+        @apply border-b border-base-300 py-2 px-4;
+        &:last-child {
+          @apply border-0;
+        }
+        &:focus {
+          @apply border-focus;
+        }
+      }
+    }
   }
-  >.govgr-nav__list {
-    @apply w-auto -mx-4 flex-col;
-    .govgr-nav__list-item {
-      @apply border-b border-base-300 py-2 px-4;
-      &:last-child {
-        @apply border-0;
+  &.govgr-dropdown--dense,
+  .govgr-dense & {
+    .govgr-dropdown__content {
+      .govgr-section-break {
+        @apply -mx-2 w-auto;
       }
-      &:focus {
-        @apply border-focus;
+      > .govgr-nav__list {
+        @apply w-auto -mx-2 flex-col;
       }
     }
   }

package/src/components/index.css

@@ -1,4 +1,3 @@
-@import "./accessibility-menu.css";
 @import "./accordion.css";
 @import "./autocomplete.css";
 @import "./button.css";
@@ -14,6 +13,7 @@
 @import "./layout.css";
 @import "./nav.css";
 @import "./typography.css";
+@import "./back-to-top.css";
 @import "./table.css";
 @import "./filter.css";
 @import "./admin-layout.css";

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/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/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,6 +46,19 @@
       @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 {

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;

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