@digigov/css 1.1.1 → 1.2.0-mobile

package/src/components/stepnav.css

@@ -1,92 +1,94 @@
-.govgr-step-nav {
+.ds-step-nav {
   @apply mb-8 md:mb-12;
-&.govgr-step-nav--dense, .govgr-dense & {
+  &.ds-step-nav--dense,
+  .ds-dense & {
     @apply mb-4 md:mb-8;
-    .govgr-step-nav__circle {
-      margin-left: 0.1rem;
+    .ds-step-nav__circle {
       @apply md:w-8 md:h-8;
+      margin-left: 0.1rem;
     }
-    .govgr-step-nav__accordion__summary {
+    .ds-step-nav__accordion__summary {
       @apply py-3;
     }
   }
 }
-.govgr-step-nav__controls {
+.ds-step-nav__controls {
   @apply text-right;
   padding: 3px 3px 3px 0;
 }
-.govgr-step-nav__steps {
+.ds-step-nav__steps {
   @apply p-0 m-0;
 }
-.govgr-step-nav__step {
+.ds-step-nav__step {
   @apply relative list-none pl-11 md:pl-14;
-  &:last-child:after {
+  &:last-child::after {
     height: calc(100% - 2rem);
   }
-  &:after {
+  &::after {
     @apply absolute z-0 w-0 h-full bg-base-100 left-0 top-8 border-2 border-base-400 border-r-0 border-t-0 border-b-0 md:border-l-3;
-    content: "";
+    content: '';
     margin-left: calc(0.75rem + 1px);
   }
-  &:last-child:before {
+  &:last-child::before {
     @apply absolute z-1 left-0 h-0 bottom-0 ml-2 w-3 border border-base-400;
     @apply md:border-t-2 md:ml-2 md:w-5;
-    content: "";
+    content: '';
   }
 }
 @media (min-width: 768px) {
-  .govgr-step-nav__step {
+  .ds-step-nav__step {
     &::after {
       margin-left: calc(1rem + 1px);
     }
   }
 }
-.govgr-step-nav__accordion {
+.ds-step-nav__accordion {
   @apply border-base-400;
   &:first-child {
     @apply border-t-2;
   }
-  .govgr-step-nav__accordion__opened {
+  .ds-step-nav__accordion__opened {
     visibility: hidden;
     display: none;
   }
-  .govgr-step-nav__accordion__closed {
+  .ds-step-nav__accordion__closed {
     visibility: visible;
     display: block;
   }
 }
-.govgr-step-nav__accordion[open] {
-
-  .govgr-step-nav__accordion__opened {
+.ds-step-nav__accordion[open] {
+  .ds-step-nav__accordion__opened {
     visibility: visible;
     display: block;
   }
-  .govgr-step-nav__accordion__closed {
+  .ds-step-nav__accordion__closed {
     visibility: hidden;
     display: none;
   }
 }
 
-.govgr-step-nav__accordion__summary {
+.ds-step-nav__accordion__summary {
   @apply list-none w-fit mb-0 py-4 pr-8 cursor-pointer;
   &::-webkit-details-marker {
     @apply hidden;
   }
   &:hover {
     @apply text-link-hover;
-    .govgr-step-nav__accordion__opened,
-    .govgr-step-nav__accordion__closed {
+    .ds-step-nav__accordion__opened,
+    .ds-step-nav__accordion__closed {
       @apply underline;
       text-decoration-thickness: 2px;
     }
   }
   &:focus {
-    .govgr-step-nav__accordion__heading__title {
+    .ds-step-nav__accordion__heading__title {
       @apply bg-focus text-base-content;
-      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);
     }
-    .govgr-step-nav__accordion__opened,
-    .govgr-step-nav__accordion__closed {
+    .ds-step-nav__accordion__opened,
+    .ds-step-nav__accordion__closed {
       @apply no-underline text-base-content;
     }
   }
@@ -97,55 +99,58 @@
     @apply outline-none;
   }
 }
-.govgr-step-nav__accordion__heading__title {
+.ds-step-nav__accordion__heading__title {
   @apply flex flex-col;
 }
-.govgr-step-nav__accordion__heading__text {
+.ds-step-nav__accordion__heading__text {
   @apply no-underline text-xl font-semibold mb-0;
 }
-.govgr-step-nav__accordion__closed,
-.govgr-step-nav__accordion__opened {
+.ds-step-nav__accordion__closed,
+.ds-step-nav__accordion__opened {
   @apply text-link no-underline;
 }
-.govgr-step-nav__accordion__heading {
-  .govgr-step-nav__accordion__heading__text {
-    @apply md:text-2xl text-xl;
+.ds-step-nav__accordion__heading {
+  &.ds-step-nav__accordion__heading--md {
+    .ds-step-nav__accordion__heading__text {
+      @apply md:text-xl text-lg;
+    }
   }
-  .govgr-step-nav__accordion__closed,
-  .govgr-step-nav__accordion__opened {
-    @apply md:text-sm text-xs;
+  &.ds-step-nav__accordion__heading--sm {
+    .ds-step-nav__accordion__heading__text {
+      @apply md:text-lg text-base;
+    }
   }
-}
-.govgr-step-nav__accordion__heading--md {
-  .govgr-step-nav__accordion__heading__text {
-    @apply md:text-xl text-lg;
+  .ds-step-nav__accordion__heading__text {
+    @apply md:text-2xl text-xl;
   }
-}
-.govgr-step-nav__accordion__heading--sm {
-  .govgr-step-nav__accordion__heading__text {
-    @apply md:text-lg text-base;
+  .ds-step-nav__accordion__closed,
+  .ds-step-nav__accordion__opened {
+    @apply md:text-sm text-xs;
   }
 }
-.govgr-step-nav__circle {
+.ds-step-nav__circle {
   @apply absolute box-border z-1 bg-white rounded-full text-center
   left-0 w-7 h-7;
   @apply md:w-9 md:h-9;
+  &.ds-step-nav__circle--number {
+    @apply border-2 border-base-400 text-base font-bold;
+    @apply md:text-lg md:leading-7 md:border-3;
+  }
+  &.ds-step-nav__circle--number__no-border {
+    @apply md:border-0 border-0;
+  }
 }
-.govgr-step-nav__circle--number {
-  @apply border-2 border-base-400 text-base font-bold;
-  @apply md:text-lg md:leading-7 md:border-3;
-}
-.govgr-step-nav__circle--number__no-border {
-  @apply md:border-0 border-0;
-}
-.govgr-step-nav__circle-inner {
+.ds-step-nav__circle-inner {
   @apply float-right min-w-full;
 }
-.govgr-step-nav__circle-background {
-  text-shadow: 0 -0.1em 0 var(--color-white), 0.1em 0 0 var(--color-white),
-    0 0.1em 0 var(--color-white), -0.1em 0 0 var(--color-white);
+.ds-step-nav__circle-background {
+  text-shadow:
+    0 -0.1em 0 var(--color-white),
+    0.1em 0 0 var(--color-white),
+    0 0.1em 0 var(--color-white),
+    -0.1em 0 0 var(--color-white);
 }
-.govgr-nav-step__accordion__content {
+.ds-nav-step__accordion__content {
   @apply md:pt-2 mb-6 pt-1 mx-0;
   > *:last-child {
     @apply mb-0;
@@ -154,14 +159,13 @@
 
 /* overrides */
 
-.govgr-step-nav {
-  .govgr-link {
+.ds-step-nav {
+  .ds-link {
     @apply md:text-base text-sm;
   }
 }
-.govgr-step-nav__accordion__summary {
-  .govgr-hint {
+.ds-step-nav__accordion__summary {
+  .ds-hint {
     @apply mb-0 mt-1;
   }
 }
-

package/src/components/summary-list.common.css

@@ -0,0 +1,25 @@
+@tailwind utilities;
+
+@layer utilities {
+    .util-summary-list {
+        @apply m-0 mb-6 sm:mb-8 w-full sm:w-full;
+    }
+    .util-summary-list-text {
+        font-size: var(--summary-list-font-size);
+    }
+    .util-summary-list__row {
+        @apply sm:flex pb-4 mb-4 border-b border-solid border-base-300 sm:pb-0 sm:mb-0 sm:border-0 print:flex print:flex-row print:flex-nowrap;
+    }
+    .util-summary-list__key {
+        @apply mb-1 sm:w-3/12;
+    }
+    .util-summary-list__key-text {
+        @apply font-bold;
+    }
+    .util-summary-list__value {
+        @apply sm:w-6/12;
+    }
+    .util-summary-list__actions {
+        @apply sm:w-3/12 sm:pr-0 sm:text-right;
+    }
+}

package/src/components/summary-list.css

@@ -1,85 +1,97 @@
-.govgr-summary-list {
-  font-size: var(--summary-list-font-size);
-  @apply m-0 mb-6 sm:mb-8 w-full
-  sm:table sm:w-full sm:table-fixed;
-}
-.govgr-summary-list--no-border {
-  .govgr-summary-list__key,
-  .govgr-summary-list__value,
-  .govgr-summary-list__actions {
-    @apply sm:border-0 pb-2;
+@import './summary-list.common.css';
+
+.ds-summary-list {
+  @apply util-summary-list sm:table sm:table-fixed util-summary-list-text;
+  &.ds-summary-list--no-border {
+    >.ds-summary-list__row:last-child {
+      @apply border-b-0 pb-0 mb-0;
+    }
+    .ds-summary-list__key,
+    .ds-summary-list__value,
+    .ds-summary-list__actions {
+      @apply sm:border-0 pb-2;
+    }
+  }
+  &.ds-summary-list--no-last-border {
+    >.ds-summary-list__row:last-child {
+      @apply border-b-0 pb-0 mb-0;
+      .ds-summary-list__key,
+      .ds-summary-list__value,
+      .ds-summary-list__actions {
+        @apply border-b-0;
+      }
+    }
   }
 }
-.govgr-summary-list__row {
-  @apply block sm:flex
-  pb-4 mb-4 border-b border-solid border-base-300
-  sm:pb-0 sm:mb-0 sm:border-0 print:flex print:flex-row print:flex-nowrap;
-}
-.govgr-summary-list__row--no-border {
-  .govgr-summary-list__key,
-  .govgr-summary-list__value,
-  .govgr-summary-list__actions {
-    @apply sm:border-0 pb-2;
+
+.ds-summary-list__row {
+  @apply block util-summary-list__row;
+  &.ds-summary-list__row--no-border {
+    .ds-summary-list__key,
+    .ds-summary-list__value,
+    .ds-summary-list__actions {
+      @apply sm:border-0 pb-2;
+    }
   }
 }
-.govgr-summary-list__key {
-  @apply font-bold mb-1 sm:w-3/12;
+.ds-summary-list__key {
+  @apply util-summary-list__key-text util-summary-list__key;
 }
 @media print {
-  .govgr-summary-list__key {
+  .ds-summary-list__key {
     flex: 100%;
   }
 }
-.govgr-summary-list__value {
-  @apply sm:w-6/12;
+.ds-summary-list__value {
+  @apply util-summary-list__value;
 }
-.govgr-summary-list__actions {
-  @apply sm:w-3/12 sm:pr-0 sm:text-right;
+.ds-summary-list__actions {
+  @apply util-summary-list__actions;
 }
+
 /* When "actions" are right after "key" */
-.govgr-summary-list__key + .govgr-summary-list__actions {
+.ds-summary-list__key + .ds-summary-list__actions {
   @apply sm:w-9/12;
 }
+
 /* When "value" is 1st or 2nd among 2 children */
-.govgr-summary-list__value:nth-child(2):nth-last-child(1),
-.govgr-summary-list__value:nth-child(1):nth-last-child(2) {
+.ds-summary-list__value:nth-child(2):nth-last-child(1),
+.ds-summary-list__value:nth-child(1):nth-last-child(2) {
   @apply sm:w-9/12;
 }
+
 /* When there is only one child */
-.govgr-summary-list__key:only-child,
-.govgr-summary-list__value:only-child,
-.govgr-summary-list__actions:only-child {
+.ds-summary-list__key:only-child,
+.ds-summary-list__value:only-child,
+.ds-summary-list__actions:only-child {
   @apply sm:w-full sm:text-left;
 }
-.govgr-summary-list__key,
-.govgr-summary-list__value {
+.ds-summary-list__key,
+.ds-summary-list__value {
   @apply break-words;
 }
-.govgr-summary-list__key,
-.govgr-summary-list__value,
-.govgr-summary-list__actions {
+.ds-summary-list__key,
+.ds-summary-list__value,
+.ds-summary-list__actions {
   @apply m-0 
   sm:table-cell sm:py-2 sm:pr-4 sm:border-b sm:border-solid sm:border-base-300;
 }
 
 /* overrides */
 
-.govgr-summary-list {
-  .govgr-dropdown__content {
+.ds-summary-list {
+  .ds-dropdown__content {
     @apply mt-2;
   }
-  .govgr-btn {
+  .ds-btn {
     @apply m-0 inline-flex;
   }
-  .govgr-btn-group {
+  .ds-btn-group {
     @apply mb-0 text-right sm:justify-end gap-y-2;
   }
 }
-.govgr-summary-list__value {
-  .govgr-btn {
+.ds-summary-list__value {
+  .ds-btn {
     @apply ml-4;
   }
-  .govgr-link {
-    @apply pl-4;
-  }
 }

package/src/components/summary-list.native.css

@@ -0,0 +1,27 @@
+@import './summary-list.common.css';
+
+.ds-summary-list {
+    @apply util-summary-list;
+}
+.ds-summary-list__text {
+    @apply util-summary-list-text;
+}
+.ds-summary-list__row {
+    @apply util-summary-list__row;
+}
+.ds-summary-list__key {
+    @apply util-summary-list__key;
+}
+.ds-summary-list__key__text {
+    @apply util-summary-list-text util-summary-list__key-text;
+}
+.ds-summary-list__value {
+    @apply util-summary-list__value;
+}
+.ds-summary-list__value__text {
+    @apply util-summary-list-text;
+}
+.ds-summary-list__actions {
+    @apply util-summary-list__actions;
+    align-self: 'flex-start'
+}

package/src/components/svg-icons.common.css

@@ -0,0 +1,56 @@
+@tailwind utilities;
+
+@layer utilities {
+  .util-svg-icon {
+    @apply h-4 w-4 transition-transform;
+    fill: var(--color-base-content);
+  }
+  .util-svg-icon--base-content {
+    fill: var(--color-base-content) !important;
+  }
+  .util-svg-icon--dark {
+    fill: var(--color-black) !important;
+  }
+  .util-svg-icon--white {
+    fill: var(--color-white) !important;
+  }
+  .util-svg-icon--gray {
+    fill: var(--color-base-700) !important;
+  }
+  .util-svg-icon--primary {
+    fill: var(--color-primary) !important;
+  }
+  .util-svg-icon--success {
+    fill: var(--color-success) !important;
+  }
+  .util-svg-icon--warning {
+    fill: var(--color-warning) !important;
+  }
+  .util-svg-icon--error {
+    fill: var(--color-error-text) !important;
+  }
+  .util-svg-icon--focus {
+    fill: var(--color-focus) !important;
+  }
+  .util-svg-icon--link {
+    fill: var(--color-link) !important;
+  }
+  .util-svg-icon--info {
+    fill: var(--color-info) !important;
+  }
+  .util-svg-icon--xs {
+    @apply h-3 w-3 !important;
+  }
+  .util-svg-icon--sm {
+    @apply h-4 w-4 !important;
+  }
+  .util-svg-icon--md {
+    @apply h-6 w-6 !important;
+  }
+  .util-svg-icon--lg {
+    @apply h-8 w-8 !important;
+  }
+  .util-svg-icon--xl {
+    @apply h-10 w-10 !important;
+  }
+}

package/src/components/svg-icons.css

@@ -1,82 +1,86 @@
-.govgr-svg-icon {
+.ds-svg-icon {
   @apply h-4 w-4 inline transition-transform;
   fill: var(--color-base-content);
-}
-.govgr-svg-icon--dark {
-  fill: var(--color-base-content) !important;
-}
-.govgr-svg-icon--light {
-  fill: var(--color-white) !important;
-}
-.govgr-svg-icon--gray {
-  fill: var(--color-base-400) !important;
-}
-.govgr-svg-icon--primary {
-  fill: var(--color-primary) !important;
-}
-.govgr-svg-icon--success {
-  fill: var(--color-success) !important;
-}
-.govgr-svg-icon--warning {
-  fill: var(--color-warning) !important;
-}
-.govgr-svg-icon--error {
-  fill: var(--color-error) !important;
-}
-.govgr-svg-icon--focus {
-  fill: var(--color-focus) !important;
-}
-.govgr-svg-icon--link {
-  fill: var(--color-link) !important;
-}
-.govgr-svg-icon--xs {
-  @apply h-3 w-3 !important;
-}
-.govgr-svg-icon--sm {
-  @apply h-4 w-4 !important;
-}
-.govgr-svg-icon--md {
-  @apply h-6 w-6 !important;
-}
-.govgr-svg-icon--lg {
-  @apply h-8 w-8 !important;
-}
-.govgr-svg-icon--xl {
-  @apply h-10 w-10 !important;
-}
-.govgr-svg-icon--burger {
-  fill: var(--color-base-content);
-  @apply transition-transform focus:bg-focus;
-  @apply cursor-pointer;
-  #govgr-svg-icon--burger__line-1,
-  #govgr-svg-icon--burger__line-2,
-  #govgr-svg-icon--burger__line-3 {
-    @apply transition-transform;
-  }
-  #govgr-svg-icon--burger__line-1 {
-    x: 2px;
-    y: 3px;
-  }
-  #govgr-svg-icon--burger__line-2 {
-    x: 2px;
-    y: 10.3px;
-  }
-  #govgr-svg-icon--burger__line-3 {
-    @apply origin-top-left;
-    x: 2px;
-    y: 17.7px;
+  &.ds-svg-icon--base-content {
+    fill: var(--color-base-content) !important;
   }
-}
-.govgr-svg-icon--burger--active {
-  #govgr-svg-icon--burger__line-1 {
-    transform: rotate(45deg);
-    transform-origin: 3px 8px;
+  &.ds-svg-icon--dark {
+    fill: var(--color-black) !important;
+  }
+  &.ds-svg-icon--white {
+    fill: var(--color-white) !important;
+  }
+  &.ds-svg-icon--gray {
+    fill: var(--color-base-700) !important;
+  }
+  &.ds-svg-icon--primary {
+    fill: var(--color-primary) !important;
+  }
+  &.ds-svg-icon--success {
+    fill: var(--color-success) !important;
+  }
+  &.ds-svg-icon--warning {
+    fill: var(--color-warning) !important;
+  }
+  &.ds-svg-icon--error {
+    fill: var(--color-error-text) !important;
+  }
+  &.ds-svg-icon--focus {
+    fill: var(--color-focus) !important;
+  }
+  &.ds-svg-icon--link {
+    fill: var(--color-link) !important;
+  }
+  &.ds-svg-icon--info {
+    fill: var(--color-info) !important;
+  }
+  &.ds-svg-icon--xs {
+    @apply h-3 w-3 !important;
+  }
+  &.ds-svg-icon--sm {
+    @apply h-4 w-4 !important;
+  }
+  &.ds-svg-icon--md {
+    @apply h-6 w-6 !important;
+  }
+  &.ds-svg-icon--lg {
+    @apply h-8 w-8 !important;
   }
-  #govgr-svg-icon--burger__line-2 {
-    @apply w-0 origin-center;
+  &.ds-svg-icon--xl {
+    @apply h-10 w-10 !important;
   }
-  #govgr-svg-icon--burger__line-3 {
-    transform: rotate(-45deg);
-    transform-origin: 3px 16px;
+  &.ds-svg-icon--burger {
+    @apply transition-transform focus:bg-focus cursor-pointer;
+    #ds-svg-icon--burger__line-1,
+    #ds-svg-icon--burger__line-2,
+    #ds-svg-icon--burger__line-3 {
+      @apply transition-transform;
+    }
+    #ds-svg-icon--burger__line-1 {
+      x: 2px;
+      y: 3px;
+    }
+    #ds-svg-icon--burger__line-2 {
+      x: 2px;
+      y: 10.3px;
+    }
+    #ds-svg-icon--burger__line-3 {
+      @apply origin-top-left;
+      x: 2px;
+      y: 17.7px;
+    }
+    .ds-svg-icon--burger--active {
+      #ds-svg-icon--burger__line-1 {
+        transform: rotate(45deg);
+        transform-origin: 3px 8px;
+      }
+      #ds-svg-icon--burger__line-2 {
+        @apply w-0 origin-center;
+      }
+      #ds-svg-icon--burger__line-3 {
+        transform: rotate(-45deg);
+        transform-origin: 3px 16px;
+      }
+    }
   }
 }