@digigov/css 1.0.0-8ae63a77 → 1.0.0-ab30975f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "1.0.0-8ae63a77",
+  "version": "1.0.0-ab30975f",
   "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-8ae63a77",
-    "@digigov/cli-build-tailwind": "1.0.0-8ae63a77",
+    "@digigov/postcss-banner": "1.0.0-ab30975f",
+    "@digigov/cli-build-tailwind": "1.0.0-ab30975f",
     "rimraf": "3.0.2",
     "postcss-js": "4.0.0",
     "postcss-load-config": "3.1.4",
     "publint": "0.1.8",
-    "@digigov/cli": "1.0.0-8ae63a77"
+    "@digigov/cli": "1.0.0-ab30975f"
   },
   "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/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,8 +18,22 @@
   &:focus-within {
     @apply outline-none;
   }
+  &.govgr-btn--dense,
+  .govgr-dense & {
+    --btn-padding: 0.375rem 0.75rem;
+    @apply min-h-8;
+    &:focus {
+      -webkit-box-shadow: 0 0 0 2px var(--color-white),
+        0 0 0 5px var(--color-base-content), 0 0 0 8px var(--color-focus);
+      box-shadow: 0 0 0 2px var(--color-white),
+        0 0 0 5px var(--color-base-content), 0 0 0 8px var(--color-focus);
+    }
+  }
 }
-.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);
@@ -35,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
@@ -50,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

package/src/components/checkboxes.css

@@ -1,13 +1,43 @@
-.govgr-checkboxes {}
+.govgr-checkboxes {
+  &.govgr-checkboxes--dense,
+  .govgr-dense & {
+    .govgr-checkboxes__item {
+      @apply mb-2 pl-10 min-h-8;
+      &:last-child {
+        @apply mb-0;
+      }
+    }
+    .govgr-checkboxes__input {
+      @apply w-8 h-8 left-0.5 md:top-0.5;
+      &:before {
+        @apply w-8 h-8;
+      }
+      &:after {
+        top: 10px;
+        left: 7px;
+        width: 19px;
+        height: 10px;
+        @apply border-b-4 border-l-4;
+      }
+      &:focus {
+        &:before {
+          @apply border-3;
+        }
+      }
+    }
+    .govgr-field {
+      @apply mb-4 md:mb-6;
+    }
+  }
+}
 .govgr-checkboxes--horizontal {
-    @apply inline-flex flex-wrap items-baseline gap-4 md:gap-6;
+  @apply inline-flex flex-wrap items-baseline gap-4 md:gap-6;
 }
 .govgr-checkboxes__item {
-    @apply block relative mb-4 pl-12; 
-    min-height: 40px;
-    &:last-child {
-      @apply mb-0;
-    }
+  @apply block relative mb-4 pl-12 min-h-10;
+  &:last-child {
+    @apply mb-0;
+  }
 }
 .govgr-checkboxes__label {
   @apply inline-block py-1 px-2 cursor-pointer;
@@ -47,15 +77,23 @@
       @apply border-4;
     }
   }
-} 
+}
 .govgr-checkboxes__conditional {
-    @apply border-l-4 border-base-500 ml-4 pl-6;
+  @apply border-l-4 border-base-500 ml-4 pl-6;
 }
 
 /* overrides */
 
 .govgr-checkboxes--horizontal {
-    .govgr-choice-divider-text {
-      @apply min-w-max mx-2;
+  .govgr-choice-divider-text {
+    @apply min-w-max mx-2;
+  }
+}
+.govgr-checkboxes {
+  &.govgr-checkboxes--dense,
+  .govgr-dense & {
+    .govgr-field {
+      @apply mb-4 md:mb-6;
     }
+  }
 }

package/src/components/copy-to-clipboard.css

@@ -4,7 +4,7 @@
 .govgr-copy-to-clipboard__tooltip {
   @apply relative;
   .govgr-copy-to-clipboard__message {
-    @apply bg-success p-4 absolute mt-4 text-center z-50 w-fit md:w-max;
+    @apply bg-success py-4 px-6 absolute mt-4 text-center z-50 w-fit md:w-max;
     &::before {
       content: "";
       @apply w-4 h-4 border-t-8 border-l-8 border-success transform rotate-45
@@ -12,10 +12,13 @@
       transform: rotate(45deg);
     }
   }
-}
-.govgr-copy-to-clipboard__banner {
-  .govgr-copy-to-clipboard__message {
-    @apply bg-success bg-opacity-95 p-2 w-full fixed top-0 right-0 text-center;
+  &.govgr-copy-to-clipboard__tooltip--dense, .govgr-dense & {
+    .govgr-copy-to-clipboard__message {
+      @apply py-2 px-4;
+    }
+    &::before {
+      @apply w-2 h-2;
+    }
   }
 }
 .govgr-copy-to-clipboard__tooltip--right {
@@ -36,6 +39,11 @@
     }
   }
 }
+.govgr-copy-to-clipboard__banner {
+  .govgr-copy-to-clipboard__message {
+    @apply bg-success bg-opacity-95 p-2 w-full fixed top-0 right-0 text-center;
+  }
+}
 
 .govgr-copy-to-clipboard--hidden {
   @apply invisible w-0 h-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,49 +1,63 @@
 .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 */
@@ -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);
@@ -75,32 +89,43 @@
       @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/form.css

@@ -37,6 +37,17 @@
     box-shadow: inset 0 0 0 2px;
   }
 }
+.govgr-input--dense,.govgr-dense .govgr-input ,
+.govgr-textarea--dense, .govgr-dense .govgr-textarea ,
+.govgr-select--dense, .govgr-dense .govgr-select,
+.govgr-date-input--dense .govgr-input, .govgr-dense .govgr-date-input .govgr-input
+{
+  @apply p-1;
+  &:focus {
+    -webkit-box-shadow: inset 0 0 0 1px;
+    box-shadow: inset 0 0 0 1px;
+  }
+}
 .govgr-label-file {
   @apply mb-0;
 }
@@ -46,7 +57,14 @@
 .govgr-uploaded-file {
   @apply flex flex-wrap gap-x-4 mb-0;
 }
-.govgr-date-input,
+.govgr-date-input {
+  @apply flex flex-wrap gap-y-2;
+  &.govgr-date-input--dense, .govgr-dense & {
+    .govgr-date-input__item {
+      @apply mr-2;
+    }
+  }
+}
 .govgr-single-character-input {
   @apply flex flex-wrap gap-y-2;
 }

package/src/components/header.css

@@ -13,7 +13,7 @@
 .govgr-header__logo {
   print-color-adjust: exact !important;
   -webkit-print-color-adjust: exact !important;
-  @apply h-12 print:hidden;
+  @apply max-h-12 print:hidden;
 }
 .govgr-header__logo-inverted {
   @apply h-12 hidden print:block;
@@ -50,7 +50,8 @@
 .govgr-header {
   .govgr-header__content,
   .govgr-header__section {
-    > .govgr-link {
+    > .govgr-link,
+    > .govgr-dropdown .govgr-dropdown__button.govgr-link  {
       @apply text-white focus:text-link-active print:text-base-content;
     }
   }
@@ -60,9 +61,6 @@
   .govgr-dropdown__button {
     @apply sm:w-max;
   }
-  .govgr-dropdown__button.govgr-link {
-    @apply text-lg text-white focus:text-base-content print:text-base-800;
-  }
   .govgr-link {
     .govgr-svg-icon {
       fill: var(--color-white);

package/src/components/index.css

@@ -1,4 +1,3 @@
-@import "./accessibility-menu.css";
 @import "./accordion.css";
 @import "./autocomplete.css";
 @import "./button.css";

package/src/components/layout.css

@@ -38,13 +38,13 @@
   @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 */
@@ -55,7 +55,8 @@
   }
 }
 .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,