@digigov/css 1.1.1 → 1.2.0-mobile

package/src/components/filter.css

@@ -1,138 +1,133 @@
-.govgr-filter {
+.ds-filter {
   @apply bg-base-100 fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5;
   box-shadow: 0 0 30px rgba(var(--color-base-900-rgb), 0.9);
-}
-.govgr-filter {
-  &.govgr-filter--position-relative-always {
+  &.ds-filter--position-relative-always {
     @apply block relative overflow-visible w-full shadow-none z-2 !important;
-    &.govgr-filter--closed {
+    &.ds-filter--closed {
       @apply block !important;
     }
   }
-  &.govgr-filter--position-relative-sm {
+  &.ds-filter--position-relative-sm {
     @apply sm:block sm:relative sm:overflow-visible sm:w-full sm:shadow-none sm:z-2;
-    &.govgr-filter--closed {
+    &.ds-filter--closed {
       @apply sm:block;
     }
   }
-  &.govgr-filter--position-relative-md {
+  &.ds-filter--position-relative-md {
     @apply md:block md:relative md:overflow-visible md:w-full md:shadow-none md:z-2;
-    &.govgr-filter--closed {
+    &.ds-filter--closed {
       @apply md:block;
     }
   }
-  &.govgr-filter--position-relative-lg {
+  &.ds-filter--position-relative-lg {
     @apply lg:block lg:relative lg:overflow-visible lg:w-full lg:shadow-none lg:z-2;
-    &.govgr-filter--closed {
+    &.ds-filter--closed {
       @apply lg:block;
     }
   }
+  &.ds-filter--border {
+    @apply border border-base-300 p-4;
+  }
+  &.ds-filter--closed {
+    @apply hidden;
+  }
 }
-.govgr-filter--border {
-  @apply border border-base-300 p-4;
-}
-.govgr-filter--closed {
-  @apply hidden;
-}
-.govgr-filter__content {
+.ds-filter__content {
   @apply flex flex-col gap-8 p-0;
 }
-.govgr-filter__options--horizontal {
+.ds-filter__options--horizontal {
   @apply flex gap-4 flex-col;
-  align-items: stretch;
   @apply md:flex-row md:flex-wrap;
+  align-items: stretch;
 }
 @media (min-width: 768px) {
-  .govgr-filter__options--horizontal {
+  .ds-filter__options--horizontal {
     align-items: flex-end;
   }
 }
-.govgr-filter__heading,
-.govgr-filter__selected,
-.govgr-filter__options {
+.ds-filter__heading,
+.ds-filter__selected,
+.ds-filter__options {
   @apply p-0;
 }
-.govgr-filter__heading {
+.ds-filter__heading {
   @apply mb-4;
 }
-.govgr-filter__selected {
+.ds-filter__selected {
   @apply bg-base-200 p-4 m-0 rounded;
 }
-.govgr-filter__selected-heading {
-  @apply flex flex-wrap sm:flex-nowrap mb-4 md:mb-6 justify-between gap-x-2;
+.ds-filter__selected-heading {
+  @apply flex flex-wrap sm:flex-nowrap mb-4 md:mb-6 justify-between gap-x-2 gap-y-4;
 }
-.govgr-input__search-btn {
+.ds-input__search-btn {
   @apply shadow-none !important;
-  @apply border-b-2 border-base-content rounded-none
-  px-4 py-2 w-min m-0 ml-3
-  flex gap-2
-  hover:bg-success-hover active:bg-success-hover hover:no-underline;
+  @apply px-4 py-2 w-min m-0 ml-3 flex gap-2;
 }
-.govgr-search {
+.ds-search {
   @apply flex w-full max-w-3xl;
 }
-.govgr-results__action-bar {
+.ds-results__action-bar {
   @apply py-2 mb-8 flex flex-wrap justify-start gap-4 items-baseline;
   > * {
     @apply mb-0;
   }
 }
-.govgr-results__heading {
+.ds-results__heading {
   @apply flex flex-wrap justify-between items-baseline gap-x-2;
 }
-.govgr-results__actions {
+.ds-results__actions {
   @apply flex flex-wrap gap-4 justify-start min-w-min mb-4;
 }
-.govgr-link-filters {
+.ds-link-filters {
   @apply block md:hidden;
 }
 
 /* overrides */
 
-.govgr-filter {
+.ds-filter {
   @apply bg-base-100 fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5;
   box-shadow: 0 0 30px rgba(var(--color-base-900-rgb), 0.9);
-  .govgr-select {
+  .ds-select {
     @apply w-full;
   }
 }
-.govgr-filter__options--horizontal {
-  .govgr-field {
+.ds-filter__options--horizontal {
+  .ds-field {
     @apply mb-0;
   }
-  .govgr-label,
-  .govgr-btn {
+  .ds-label,
+  .ds-btn {
     @apply mb-0;
   }
 }
-.govgr-filter__heading {
-  .govgr-close-btn,
-  .govgr-heading-xs,
-  .govgr-heading-sm,
-  .govgr-heading-md,
-  .govgr-heading-lg,
-  .govgr-heading-xl {
+.ds-filter__heading {
+  .ds-close-btn,
+  .ds-heading-xs,
+  .ds-heading-sm,
+  .ds-heading-md,
+  .ds-heading-lg,
+  .ds-heading-xl {
     @apply m-0;
   }
 }
-.govgr-filter__selected-heading {
-  .govgr-link,
-  .govgr-heading-xs,
-  .govgr-heading-sm,
-  .govgr-heading-md,
-  .govgr-heading-lg,
-  .govgr-heading-xl {
+.ds-filter__selected-heading {
+  .ds-link,
+  .ds-heading-xs,
+  .ds-heading-sm,
+  .ds-heading-md,
+  .ds-heading-lg,
+  .ds-heading-xl {
     @apply m-0 h-full;
   }
 }
-.govgr-input__search-btn {
-  .govgr-svg-icon--search {
-    fill: var(--color-white);
+.ds-input__search-btn {
+  .ds-svg-icon--search {
     @apply w-7 h-7;
+    fill: var(--color-white);
   }
 }
-.govgr-results__action-bar {
-  .govgr-field {
+.ds-results__action-bar {
+  .ds-field {
     @apply flex items-baseline gap-2;
   }
 }

package/src/components/footer.css

@@ -1,96 +1,110 @@
-.govgr-footer {
-  @apply border-0 border-solid font-normal text-base py-4 md:py-8 
-  border-t-4 border-tertiary text-base-800 bg-base-200 w-full
+.ds-footer {
+  border: var(--footer-border);
+  border-width: var(--footer-border-width);
+  background-color: var(--footer-background-color);
+  color: var(--footer-color);
+  @apply font-normal text-base py-4 md:py-8 w-full
   print:py-2 print:bg-white print:border-t-2;
 }
-.govgr-footer__info {
-  @apply w-full flex flex-1 flex-wrap md:flex-nowrap items-end justify-center md:justify-between box-border ;
+.ds-footer__info {
+  @apply w-full flex flex-1 flex-wrap md:flex-nowrap items-end justify-center md:justify-between box-border;
 }
-.govgr-footer__info-section {
+.ds-footer__info-section {
   @apply mx-2 md:mx-4 mb-6 print:mb-4;
+  &.ds-footer__info-section--grow {
+    @apply flex flex-grow;
+  }
 }
-.govgr-footer__info-section--grow {
-  @apply flex flex-grow;
-}
-.govgr-footer__content {
+.ds-footer__content {
   @apply w-full;
 }
-.govgr-footer__content--logos {
+.ds-footer__content__logos {
   @apply flex flex-wrap items-center mb-6 md:mb-8;
 }
-.govgr-footer__logo {
+.ds-footer__logo {
   @apply mr-4;
   @apply print:w-32 print:min-w-32 !important;
   &:last-child {
     @apply mr-0;
   }
 }
-.govgr-footer__government-logo-inverted {
+.ds-footer__government-logo-inverted {
   @apply max-w-full h-auto w-52 min-w-52 hidden;
-
 }
-.govgr-footer__logo, .govgr-footer__government-logo {
+.ds-footer__logo,
+.ds-footer__government-logo {
   @apply max-w-full h-auto w-52 min-w-52 block;
 }
-.govgr-footer__copyright {
+.ds-footer__copyright {
   @apply mt-6 print:mt-4;
   font-size: var(--footer__copyright-font-size);
-  .govgr-link {
+  .ds-link {
     font-size: inherit;
   }
 }
-.govgr-footer__link {
-  @apply underline ;
+.ds-footer__link {
+  text-decoration: var(--footer__link-text-decoration);
+  
   &:hover {
+    text-decoration: var(--footer__link-text-decoration-hover);
     text-decoration-thickness: 2px;
-    color: var(--color-base-800);
+    color:var(--footer__link-color-hover);
   }
   &:focus {
+    color:var(--footer__link-color-focus);
     background-color: var(--color-focus) !important;
-    box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
-    outline: none; 
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-base-content);
+    outline: none;
     text-decoration: none;
   }
 }
-.govgr-footer__navigation {
-    @apply flex flex-wrap print:hidden;
+.ds-footer__navigation {
+  @apply flex flex-wrap print:hidden;
 }
-.govgr-footer__navigation-section {
-    @apply inline-block mx-4 mb-8 align-top flex-grow flex-shrink
+.ds-footer__navigation-section {
+  @apply inline-block mx-4 mb-8 align-top flex-grow flex-shrink
     print:hidden;
 }
 @media (min-width: 768px) {
-  .govgr-footer__navigation-section:first-child:nth-last-child(2) {
+  .ds-footer__navigation-section:first-child:nth-last-child(2) {
     @apply flex-grow-2;
   }
 }
-.govgr-footer__list {
+.ds-footer__list {
   @apply m-0 p-0 list-none gap-x-6 text-sm md:text-base
   print:hidden;
-}
-.govgr-footer__list--horizontal {
-  @apply mb-4;
-  .govgr-footer__list-item {
-    @apply inline-block mr-4 mb-2;
+  &.ds-footer__list--horizontal {
+    @apply mb-4;
+    .ds-footer__list-item {
+      @apply inline-block mr-4 mb-2;
+    }
   }
 }
 @media (min-width: 768px) {
-  .govgr-footer__list--columns-2 {
+  .ds-footer__list--columns-2 {
     column-count: 2;
   }
 }
-.govgr-footer__list-item {}
-.govgr-footer__heading {
+.ds-footer__list-item {
+}
+.ds-footer__heading {
   @apply mb-4 pb-4 border-b border-base-300;
 }
 
 /* overrides */
 
-.govgr-footer {
-  .govgr-section-break {
+.ds-footer {
+  .ds-section-break {
     @apply print:hidden;
   }
-  .govgr-link {
+  .ds-link {
+    --link-color:var(--color-footer);
+    @apply print:text-base-content;
+  }
+  .ds-body {
+    --body-color:var(--color-footer);
     @apply print:text-base-content;
   }
 }

package/src/components/form.common.css

@@ -0,0 +1,49 @@
+@tailwind utilities;
+
+@layer utilities {
+    .util-field {
+        @apply mb-8 md:mb-10;
+    }
+    .util-field--error {
+        @apply border-l-5 border-error-text px-0 pl-4;
+    }
+    .util-label {
+        @apply mb-0 flex gap-y-3 flex-col;
+    }
+    .util-label-text {
+        font-size: var(--label-font-size);
+        line-height: var(--label-line-height);
+        letter-spacing: var(--label-letter-spacing);
+    }
+    .util-input {
+        border-radius: var(--input-border-radius);
+    }
+    .util-input--error {
+        @apply border-error-text border-3;
+    }
+    .util-input--width-20-char {
+    }
+    .util-input--width-10-char {
+    }
+    .util-input--width-5-char {
+    }
+    .util-input--width-4-char {
+    }
+    .util-input--width-3-char {
+    }
+    .util-input--width-2-char {
+    }
+    .util-textarea {
+        @apply md:text-lg text-base w-full p-2 border-2 border-base-content bg-base-100;
+        border-radius: var(--textarea-border-radius);
+    }
+    .util-label {
+        @apply mb-0 flex gap-y-3 flex-col;
+    }
+    .util-label-text {
+        font-size: var(--label-font-size);
+        line-height: var(--label-line-height);
+        letter-spacing: var(--label-letter-spacing);
+    }
+
+}