@digigov/css 1.1.1 → 1.2.0-mobile

package/src/components/autocomplete.css

@@ -1,103 +1,145 @@
-.govgr-autocomplete__wrapper {
+.ds-autocomplete__container {
   @apply relative;
 }
-.govgr-autocomplete__status {}
-.govgr-autocomplete__status__wrapper {
-  @apply border-0 h-px overflow-hidden absolute whitespace-nowrap p-0 w-px;
+.ds-autocomplete__status {
+}
+.ds-autocomplete__status__container {
+  @apply border-0 h-px overflow-hidden absolute whitespace-nowrap p-0 w-px -mb-px -mr-px;
   clip: "rect(0 0 0 0)";
-  margin-bottom: "-1px";
-  margin-right: "-1px";
 }
-.govgr-autocomplete__hint {
+.ds-autocomplete__hint {
   @apply absolute text-base-400;
 }
-.govgr-autocomplete__hint,
-.govgr-autocomplete__input {
+.ds-autocomplete__hint,
+.ds-autocomplete__input {
   @apply md:text-lg text-base p-2 w-full border-2 border-base-content;
   appearance: none;
-  -webkit-appearance: none;
   box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-}
-.govgr-autocomplete__input {
-  @apply relative bg-transparent;
-}
-.govgr-autocomplete__input--default {
-  @apply p-2;
-}
-.govgr-autocomplete__input--focused {
-  outline: 4px solid var(--color-focus);
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 2px;
-  box-shadow: inset 0 0 0 2px;
 }
-.govgr-autocomplete__input--show-all-values {
-  @apply cursor-pointer;
+.ds-autocomplete__input {
+  @apply relative bg-transparent cursor-pointer pr-8;
+  &.ds-autocomplete__input--focused {
+    outline: 4px solid var(--color-focus);
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 2px;
+    box-shadow: inset 0 0 0 2px;
+  }
 }
-.govgr-autocomplete__dropdown-arrow-down {
-  @apply inline-block absolute right-2 top-4 w-6 h-6;
-  z-index: -1;
+.ds-autocomplete__container > .ds-svg-icon {
+  @apply inline-block absolute right-2 top-3;
+  pointer-events: none;
 }
-.govgr-autocomplete__menu {
-  @apply bg-base-100 m-0 max-h-96 overflow-x-hidden w-full p-0 border-2 border-t-0 border-base-content /*  border-t-0 border-x-2 border-l-2 border-base-content */;
+.ds-autocomplete__multi-input-container > .ds-link {
+  @apply inline-block absolute right-2 top-4;
+  .ds-svg-icon {
+    @apply ml-0 fill-base-content;
+  }
 }
-.govgr-autocomplete__menu--inline {
-  @apply relative;
+.ds-autocomplete__multi-input-container {
+  @apply w-full p-2 pr-8 border-2 border-base-content bg-base-100
+  flex gap-2 flex-wrap items-center;
+  min-height: 52px;
+  text-indent: 2px;
+  &:focus,
+  &.ds-autocomplete__multi-input-container--focused {
+    outline: 4px solid var(--color-focus);
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 2px;
+    box-shadow: inset 0 0 0 2px;
+  }
+  &:not(.ds-autocomplete__multi-input-container--focused) {
+    &.ds-autocomplete__multi-input-container--1 {
+      .ds-chip + .ds-chip {
+        @apply hidden;
+      }
+    }
+    &.ds-autocomplete__multi-input-container--2 {
+      .ds-chip + .ds-chip + .ds-chip {
+        @apply hidden;
+      }
+    }
+    &.ds-autocomplete__multi-input-container--3 {
+      .ds-chip + .ds-chip + .ds-chip + .ds-chip {
+        @apply hidden;
+      }
+    }
+  }
 }
-.govgr-autocomplete__menu--overlay {
-  @apply absolute w-full left-0 top-full z-50 shadow-xl;
+.ds-autocomplete__multi-input {
+  @apply flex-1 w-full focus:border-0 focus:outline-0 bg-base-100;
 }
-.govgr-autocomplete__menu--visible {
-  @apply block;
+.ds-autocomplete__multi-btn {
+  @apply absolute bottom-0 right-0 m-2;
+  margin: 4px 2px;
+  height: 44px;
+  .ds-svg-icon {
+    @apply mx-2 !important;
+  }
 }
-.govgr-autocomplete__menu--hidden {
-  @apply hidden;
+
+.ds-autocomplete__menu {
+  @apply block max-h-64 md:max-h-96 w-full m-0 p-0 overflow-x-hidden
+  border-2 border-t-0 border-base-content bg-base-100
+  absolute left-0 top-full z-50 shadow-xl;
+  &.ds-autocomplete__menu--hidden {
+    @apply hidden;
+  }
 }
-.govgr-autocomplete__option {
-  @apply cursor-pointer block relative p-2;
-  border-bottom: solid var(--color-base-400);
+.ds-autocomplete__option {
+  @apply cursor-pointer block relative p-2 border-b-base-400;
   border-width: 1px 0;
+  &.ds-autocomplete__option--odd {
+    @apply bg-base-300;
+  }
+  &.ds-autocomplete__option--focused,
+  &.ds-autocomplete__option:hover {
+    @apply bg-info text-white outline-none border-tertiary;
+  }
+  &.ds-autocomplete__option--no-results {
+    @apply text-current cursor-not-allowed;
+  }
+  &.ds-autocomplete__option--empty {
+    @apply cursor-default;
+    @apply bg-base-100 text-base-content !important;
+    &:hover {
+      border-color: var(--color-base-400);
+    }
+  }
 }
-.govgr-autocomplete__option > * {
+.ds-autocomplete__option > * {
   @apply pointer-events-none;
+  &:first-of-type,
+  &:last-of-type {
+    @apply border-t-0;
+  }
 }
-.govgr-autocomplete__option:first-of-type {
-  @apply border-t-0;
-}
-.govgr-autocomplete__option:last-of-type {
-  @apply border-t-0;
-}
-.govgr-autocomplete__option--odd {
+.ds-autocomplete__option--odd {
   @apply bg-base-300;
 }
-.govgr-autocomplete__option--focused,
-.govgr-autocomplete__option:hover {
+.ds-autocomplete__option--focused,
+.ds-autocomplete__option:hover {
   @apply bg-info text-white outline-none border-tertiary;
 }
-.govgr-autocomplete__option--no-results {
+.ds-autocomplete__option--no-results {
   @apply text-current cursor-not-allowed;
 }
-.govgr-autocomplete__option--empty {
-  @apply cursor-default;
+.ds-autocomplete__option--empty {
+  @apply cursor-default hover:border-base-400;
   @apply bg-base-100 text-base-content !important;
-  &:hover {
-    border-color: var(--color-base-400);
-  }
 }
-.govgr-autocomplete__hint,
-.govgr-autocomplete__option {
+.ds-autocomplete__hint,
+.ds-autocomplete__option {
   @apply p-2;
 }
-.govgr-autocomplete__assistive-hint {
+.ds-autocomplete__assistive-hint {
   @apply hidden;
 }
 
 /* overrides */
 
-.govgr-autocomplete__option--focused,
-.govgr-autocomplete__option:hover {
-  .govgr-hint {
+.ds-autocomplete__option--focused,
+.ds-autocomplete__option:hover {
+  .ds-hint {
     @apply text-base-300;
   }
 }

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

@@ -1,12 +1,11 @@
-.govgr-back-to-top-content {
-  
+.ds-back-to-top-content {
 }
-  
-.govgr-back-to-top-link {
+
+.ds-back-to-top-link {
+  @apply w-fit underline flex mb-4 cursor-pointer items-baseline;
   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;
   }
@@ -22,8 +21,8 @@
 
 /* overrides */
 
-.govgr-back-to-top-link {
-  .govgr-svg-icon {
+.ds-back-to-top-link {
+  .ds-svg-icon {
     fill: var(--back-to-top-link-color);
   }
-}
+}

package/src/components/blockquote.common.css

@@ -0,0 +1,14 @@
+@tailwind utilities;
+
+@layer utilities {
+    .util-blockquote {
+      @apply mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500 text-base-content;
+    }
+    .util-blockquote-text {
+      font-size: var(--blockquote-font-size);
+      line-height: var(--blockquote-line-height);
+    }
+    .util-blockquote--dense {
+        @apply mt-3 md:mb-6 p-3 border-l-6;
+    }
+}

package/src/components/blockquote.css

@@ -0,0 +1,9 @@
+@import './blockquote.common.css';
+
+.ds-blockquote {
+    @apply util-blockquote util-blockquote-text;
+    &.ds-blockquote--dense,
+    .ds-dense & {
+      @apply util-blockquote--dense;
+    }
+  }

package/src/components/blockquote.native.css

@@ -0,0 +1,11 @@
+@import './blockquote.common.css';
+
+.ds-blockquote {
+  @apply util-blockquote;
+}
+.ds-blockquote__text {
+  @apply util-blockquote-text;
+}
+.ds-blockquote--dense {
+  @apply util-blockquote--dense;
+}

package/src/components/bottom-info.css

@@ -1,5 +1,6 @@
-.govgr-bottom-info {
+.ds-bottom-info {
   @apply w-full bg-base-200 border-t border-base-400;
   @apply md:py-6 !important;
 }
-.govgr-bottom-info__content {}
+.ds-bottom-info__content {
+}

package/src/components/breadcrumbs.css

@@ -1,20 +1,24 @@
-.govgr-breadcrumbs {
+.ds-breadcrumbs {
   @apply block font-normal text-base-content mt-4 mb-2;
 }
-.govgr-breadcrumbs__list {
+.ds-breadcrumbs__list {
   @apply block m-0 p-0 list-none;
-  &:after {
-    content: "";
+  &::after {
+    content: '';
     display: block;
     clear: both;
   }
 }
-.govgr-breadcrumbs__list-item {
-  font-size: var(--breadcrumbs__list-item-font-size);
+.ds-breadcrumbs__list-item {
   @apply inline-block relative mb-1 ml-2 pl-4 float-left;
+  font-size: var(--breadcrumbs__list-item-font-size);
+  &[aria-current='page'] {
+    @apply font-semibold;
+  }
   &::before {
-    content: "";
-    @apply block absolute top-2 bottom-0 left-0 md:w-3 md:h-3 w-2 h-2 mx-auto my-0 bg-contain bg-no-repeat bg-center;
+    @apply block absolute top-2 bottom-0 left-0 md:w-3 md:h-3 w-2 h-2 mx-auto my-0 
+    bg-contain bg-no-repeat bg-center;
+    content: '';
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'> <path d='M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z' />  </svg>");
   }
   &:first-child {
@@ -25,24 +29,29 @@
   }
 }
 @media print {
-  .govgr-breadcrumbs__list-item {
+  .ds-breadcrumbs__list-item {
     &::before {
       background-image: none;
       top: 2px;
-      left: 0px;
+      left: 0;
       content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'> <path d='M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z' />  </svg>");
     }
   }
 }
-.govgr-breadcrumbs__link {
+.ds-breadcrumbs__link {
   @apply underline;
   &:hover {
     text-decoration-thickness: 2px;
   }
   &: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;
   }
+  &.ds-breadcrumbs__link--inactive {
+    @apply no-underline;
+  }
 }

package/src/components/button.common.css

@@ -0,0 +1,64 @@
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+/* stylelint-disable digigov/nest-related-rules */
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+@tailwind utilities;
+
+@layer utilities {
+  .util-btn {
+    @apply m-0 mb-8 flex items-center;
+    border-radius: var(--btn-border-radius);
+  }
+  .util-btn-text {
+    @apply text-white font-medium no-underline;
+    font-size: var(--btn-font-size);
+    letter-spacing: var(--letter-spacing-wide);
+    color: var(--color-base-100);
+    padding-right: var(--btn-padding-x);
+    padding-left: var(--btn-padding-x);
+    padding-top: var(--btn-padding-y);
+    padding-bottom: var(--btn-padding-y);
+  }
+  .util-btn-primary {
+    /* @apply print:border-2 print:border-success print:shadow-none; */
+    box-shadow: var(--btn-primary-box-shadow);
+    background-color: var(--btn-primary-background-color);
+  }
+  .util-btn-primary-text {
+    @apply hover:no-underline;
+    color: var(--btn-primary-color);
+  }
+  .util-btn-secondary {
+    /* @apply print:border-2 print:border-base-700 print:shadow-none; */
+    box-shadow: var(--btn-secondary-box-shadow);
+    background-color: var(--btn-secondary-background-color);
+  }
+  .util-btn-secondary-text {
+    @apply hover:no-underline;
+    color: var(--btn-secondary-color) !important;
+  }
+  .util-btn-warning {
+    /* @apply print:border-2 print:border-error print:shadow-none; */
+    box-shadow: var(--btn-warning-box-shadow);
+    background-color: var(--btn-warning-background-color);
+  }
+  .util-btn-warning-text {
+    @apply hover:no-underline;
+    color: var(--btn-warning-color);
+  }
+
+  .util-btn--dense {
+    @apply min-h-6;
+  }
+  .util-btn--dense-text {
+    --btn-padding-y: 0.375rem;
+    --btn-padding-x: 0.75rem;
+    @apply min-h-6;
+  }
+
+  .util-btn--disabled {
+    opacity: 0.5;
+  }
+  .util-btn--disabled-text {
+    @apply print:text-base-400;
+  }
+}

package/src/components/button.css

@@ -1,45 +1,35 @@
-.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;
-  border-radius: var(--btn-border-radius);
-  padding: var(--btn-padding);
-  letter-spacing: var(--btn-letter-spacing);
-  font-size: var(--btn-font-size);
+@import './button.common.css';
+.ds-btn,
+.ds-btn[type='submit'],
+.ds-btn[type='button'],
+.ds-btn[type='reset'] {
+  @apply util-btn util-btn-text min-h-10 md:min-h-12 w-max cursor-pointer gap-x-3;
   &:focus {
-    -webkit-box-shadow: 0 0 0 2px var(--color-white),
-      0 0 0 6px var(--color-base-content), 0 0 0 10px var(--color-focus);
-    box-shadow: 0 0 0 2px var(--color-white),
-      0 0 0 6px var(--color-base-content), 0 0 0 10px var(--color-focus);
+    box-shadow:
+      0 0 0 2px var(--color-white),
+      0 0 0 6px var(--color-base-content),
+      0 0 0 10px var(--color-focus);
   }
   &:focus-within {
     @apply outline-none;
   }
-  &.govgr-btn--dense,
-  .govgr-dense & {
-    --btn-padding: 0.375rem 0.75rem;
-    @apply min-h-8;
+
+  &.ds-btn--dense,
+  .ds-dense & {
+    @apply util-btn--dense;
     &: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);
+      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[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);
-  color: var(--btn-primary-color);
-  @apply hover:no-underline
-  print:border-2 print:border-success print:shadow-none;
+.ds-btn-primary,
+.ds-btn-primary[type='submit'],
+.ds-btn-primary[type='button'],
+.ds-btn-primary[type='reset'] {
+  @apply util-btn-primary util-btn-primary-text;
   &:hover {
     background-color: var(--btn-primary-background-color-hover);
     color: var(--btn-primary-color-hover);
@@ -48,20 +38,19 @@
     background-color: var(--btn-primary-background-color-active);
   }
 }
-.govgr-btn-cta {
+.ds-btn-cta {
   @apply py-4 print:pr-2;
   font-size: var(--btn-cta-font-size);
+  &.ds-btn--dense,
+  .ds-dense & {
+    @apply py-3 px-4;
+  }
 }
-.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
-    print:border-2 print:border-base-700 print:shadow-none;
-  background-color: var(--btn-secondary-background-color);
-  color: var(--btn-secondary-color);
+.ds-btn-secondary,
+.ds-btn-secondary[type='submit'],
+.ds-btn-secondary[type='button'],
+.ds-btn-secondary[type='reset'] {
+  @apply util-btn-secondary util-btn-secondary-text;
   &:hover {
     background-color: var(--btn-secondary-background-color-hover);
     color: var(--btn-secondary-color-hover);
@@ -70,16 +59,11 @@
     background-color: var(--btn-secondary-background-color-active);
   }
 }
-.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
-    print:border-2 print:border-error print:shadow-none;
-  background-color: var(--btn-warning-background-color);
-  color: var(--btn-warning-color);
+.ds-btn-warning,
+.ds-btn-warning[type='submit'],
+.ds-btn-warning[type='button'],
+.ds-btn-warning[type='reset'] {
+  @apply util-btn-warning util-btn-warning-text;
   &:hover {
     background-color: var(--btn-warning-background-color-hover);
     color: var(--btn-warning-color-hover);
@@ -89,85 +73,88 @@
     background-color: var(--btn-warning-background-color-active);
   }
 }
-.govgr-btn--disabled {
-  @apply opacity-50 hover:bg-opacity-50
-  print:text-base-400 print:border-opacity-50;
+.ds-btn--disabled {
   @apply cursor-not-allowed !important;
+  @apply util-btn--disabled util-btn--disabled-text;
 }
-.govgr-svg-icon--caret {
-  fill: var(--color-base-content);
-  @apply w-4 h-4 inline-block;
-}
-.govgr-close-btn {
+.ds-close-btn {
   @apply flex flex-nowrap text-right w-max float-right items-center;
 }
 
 /* overrides */
 
-.govgr-btn {
-  .govgr-svg-icon {
+.ds-btn {
+  .ds-svg-icon {
     @apply h-4 w-4 inline transition-all;
   }
 }
-.govgr-btn-primary,
-.govgr-btn-warning {
-  .govgr-svg-icon {
-    fill: var(--color-white);
+.ds-btn-primary {
+  .ds-svg-icon {
+    fill: var(--btn-primary-color);
   }
-  .govgr-svg-icon--more-vert {
+  /* stylelint-disable-next-line digigov/nest-related-rules */
+  .ds-svg-icon--more-vert {
     @apply h-6 w-6 md:h-8 md:w-8;
   }
 }
-.govgr-btn-cta {
-  .govgr-svg-icon--chevron {
-    @apply w-5 h-5 inline-block ml-2 mr-2 transition-all;
+.ds-btn-warning {
+  .ds-svg-icon {
+    fill: var(--color-white);
+    &.ds-svg-icon--more-vert {
+      @apply h-6 w-6 md:h-8 md:w-8;
+    }
   }
+}
+.ds-btn-cta {
   &:hover {
-    .govgr-svg-icon--chevron {
+    .ds-svg-icon {
       @apply ml-4 mr-0;
     }
   }
+  .ds-svg-icon {
+    @apply w-5 h-5 inline-block ml-2 mr-2 transition-all;
+  }
 }
-.govgr-btn-secondary {
-  .govgr-svg-icon {
+.ds-btn-secondary {
+  .ds-svg-icon {
     fill: var(--color-base-content);
-  }
-  .govgr-svg-icon--more-vert {
-    @apply h-6 w-6;
+    &.ds-svg-icon--more-vert {
+      @apply h-6 w-6;
+    }
   }
 }
-.govgr-close-btn {
-  .govgr-svg-icon--close {
-    @apply w-5 h-5 float-right;
-    @apply ml-1 !important;
-    fill: var(--color-link);
-  }
+.ds-close-btn {
   &:focus {
-    .govgr-svg-icon--close {
+    .ds-svg-icon--close {
       fill: var(--color-link-active);
     }
   }
   &:hover {
-    .govgr-svg-icon--close {
+    .ds-svg-icon--close {
       fill: var(--color-link-hover);
     }
   }
+  .ds-svg-icon--close {
+    @apply w-5 h-5 float-right;
+    @apply ml-1 !important;
+    fill: var(--color-link);
+  }
 }
 @media print {
-  .govgr-btn {
-    .govgr-circular-progress--secondary {
-      .govgr-circular-progress__circle--1,
-      .govgr-circular-progress__circle--2 {
+  .ds-btn {
+    .ds-circular-progress--secondary {
+      .ds-circular-progress__circle--1,
+      .ds-circular-progress__circle--2 {
         stroke: var(--color-base-content);
       }
     }
   }
 }
 @media print {
-  .govgr-btn-primary,
-  .govgr-btn-warning,
-  .govgr-btn-secondary {
-    .govgr-svg-icon {
+  .ds-btn-primary,
+  .ds-btn-warning,
+  .ds-btn-secondary {
+    .ds-svg-icon {
       fill: var(--color-base-content);
     }
   }