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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "1.0.0-3bfc7d37",
+  "version": "1.0.0-47312a12",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -48,12 +48,11 @@
     "tailwindcss": "3.3.5",
     "nodemon": "2.0.7",
     "next": "10.0.9",
-    "@digigov/postcss-banner": "1.0.0-3bfc7d37",
+    "@digigov/postcss-banner": "1.0.0-47312a12",
+    "@digigov/cli-build-tailwind": "1.0.0-47312a12",
     "rimraf": "3.0.2",
-    "postcss-js": "4.0.0",
-    "postcss-load-config": "3.1.4",
     "publint": "0.1.8",
-    "@digigov/cli": "1.0.0-3bfc7d37"
+    "@digigov/cli": "1.0.0-47312a12"
   },
   "scripts": {
     "preutilities": "DIGIGOV_CSS_BUILD=TRUE postcss --config src/utilities src/utilities/index.css --base src --dir dist",
@@ -73,10 +72,10 @@
   },
   "dependencies": {
     "@fontsource/roboto": "4.4.0",
-    "@digigov/cli-build-tailwind": "1.0.0-3bfc7d37",
     "publint": "0.1.8",
     "@adobe/leonardo-contrast-colors": "1.0.0-alpha.13",
-    "polished": "4.2.2"
+    "polished": "4.2.2",
+    "postcss-js": "4.0.0",
+    "postcss-load-config": "3.1.4"
   }
 }
-

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,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
@@ -96,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/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,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/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";
@@ -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";