@digigov/css 2.0.0-rc.2 → 2.0.0-rc.21

package/src/components/stack.css

@@ -1,66 +1,66 @@
 .ds-stack {
   @apply flex flex-col flex-wrap;
-}
-.ds-stack--row {
-  @apply flex-row;
-}
-.ds-stack--reverse-row {
-  @apply flex-row-reverse;
-}
-.ds-stack--col-reverse {
-  @apply flex-col-reverse;
-}
-.ds-stack--nowrap {
-  @apply flex-nowrap;
-}
-.ds-stack--justify-flex-start {
-  @apply justify-start;
-}
-.ds-stack--justify-flex-end {
-  @apply justify-end;
-}
-.ds-stack--justify-center {
-  @apply justify-center;
-}
-.ds-stack--justify-space-between {
-  @apply justify-between;
-}
-.ds-stack--justify-space-around {
-  @apply justify-around;
-}
-.ds-stack--justify-space-evenly  {
-  @apply justify-evenly;
-}
-.ds-stack--align-stretch {
-  @apply items-stretch;
-}
-.ds-stack--align-flex-start {
-  @apply items-start;
-}
-.ds-stack--align-flex-end {
-  @apply items-end;
-}
-.ds-stack--align-center {
-  @apply items-center;
-}
-.ds-stack--align-baseline {
-  @apply items-baseline;
-}
-.ds-stack--content-flex-start {
-  @apply content-start;
-}
-.ds-stack--content-flex-end {
-  @apply content-end;
-}
-.ds-stack--content-center {
-  @apply content-center;
-}
-.ds-stack--content-space-between {
-  @apply content-between;
-}
-.ds-stack--content-space-around {
-  @apply content-around;
-}
-.ds-stack--content-space-evenly  {
-  @apply content-evenly;
+  &.ds-stack--row {
+    @apply flex-row;
+  }
+  &.ds-stack--reverse-row {
+    @apply flex-row-reverse;
+  }
+  &.ds-stack--col-reverse {
+    @apply flex-col-reverse;
+  }
+  &.ds-stack--nowrap {
+    @apply flex-nowrap;
+  }
+  &.ds-stack--justify-flex-start {
+    @apply justify-start;
+  }
+  &.ds-stack--justify-flex-end {
+    @apply justify-end;
+  }
+  &.ds-stack--justify-center {
+    @apply justify-center;
+  }
+  &.ds-stack--justify-space-between {
+    @apply justify-between;
+  }
+  &.ds-stack--justify-space-around {
+    @apply justify-around;
+  }
+  &.ds-stack--justify-space-evenly {
+    @apply justify-evenly;
+  }
+  &.ds-stack--align-stretch {
+    @apply items-stretch;
+  }
+  &.ds-stack--align-flex-start {
+    @apply items-start;
+  }
+  &.ds-stack--align-flex-end {
+    @apply items-end;
+  }
+  &.ds-stack--align-center {
+    @apply items-center;
+  }
+  &.ds-stack--align-baseline {
+    @apply items-baseline;
+  }
+  &.ds-stack--content-flex-start {
+    @apply content-start;
+  }
+  &.ds-stack--content-flex-end {
+    @apply content-end;
+  }
+  &.ds-stack--content-center {
+    @apply content-center;
+  }
+  &.ds-stack--content-space-between {
+    @apply content-between;
+  }
+  &.ds-stack--content-space-around {
+    @apply content-around;
+  }
+  &.ds-stack--content-space-evenly {
+    @apply content-evenly;
+  }
 }

package/src/components/stepnav.css

@@ -1,10 +1,10 @@
 .ds-step-nav {
-  @apply mb-8 md:mb-12;
-&.ds-step-nav--dense, .ds-dense & {
-    @apply mb-4 md:mb-8;
+  @apply mb-4 md:mb-8;
+  &.ds-step-nav--dense,
+  .ds-dense & {
     .ds-step-nav__circle {
-      margin-left: 0.1rem;
       @apply md:w-8 md:h-8;
+      margin-left: 0.1rem;
     }
     .ds-step-nav__accordion__summary {
       @apply py-3;
@@ -20,18 +20,18 @@
 }
 .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) {
@@ -56,7 +56,6 @@
   }
 }
 .ds-step-nav__accordion[open] {
-
   .ds-step-nav__accordion__opened {
     visibility: visible;
     display: block;
@@ -83,7 +82,9 @@
   &:focus {
     .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);
     }
     .ds-step-nav__accordion__opened,
     .ds-step-nav__accordion__closed {
@@ -108,6 +109,16 @@
   @apply text-link no-underline;
 }
 .ds-step-nav__accordion__heading {
+  &.ds-step-nav__accordion__heading--md {
+    .ds-step-nav__accordion__heading__text {
+      @apply md:text-xl text-lg;
+    }
+  }
+  &.ds-step-nav__accordion__heading--sm {
+    .ds-step-nav__accordion__heading__text {
+      @apply md:text-lg text-base;
+    }
+  }
   .ds-step-nav__accordion__heading__text {
     @apply md:text-2xl text-xl;
   }
@@ -116,37 +127,30 @@
     @apply md:text-sm text-xs;
   }
 }
-.ds-step-nav__accordion__heading--md {
-  .ds-step-nav__accordion__heading__text {
-    @apply md:text-xl text-lg;
-  }
-}
-.ds-step-nav__accordion__heading--sm {
-  .ds-step-nav__accordion__heading__text {
-    @apply md:text-lg text-base;
-  }
-}
 .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;
+  &.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;
+  }
 }
 .ds-step-nav__circle-inner {
   @apply float-right min-w-full;
 }
 .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);
+  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-nav-step__accordion__content {
-  @apply md:pt-2 mb-6 pt-1 mx-0;
+  @apply md:pt-2 mb-4 md:mb-8 pt-1 mx-0;
   > *:last-child {
     @apply mb-0;
   }
@@ -164,4 +168,3 @@
     @apply mb-0 mt-1;
   }
 }
-

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

@@ -0,0 +1,92 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+@tailwind utilities;
+
+@layer utilities {
+  .util-summary-list {
+    @apply m-0 mb-4 md: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:flex-1;
+  }
+  .util-summary-list__actions {
+    @apply sm:w-3/12 sm:pr-0 sm:text-right;
+  }
+  
+  .util-summary-list__key--sm-3 {
+    @apply sm:w-3/12;
+  }
+  .util-summary-list__key--sm-4 {
+    @apply sm:w-4/12;
+  }
+  .util-summary-list__key--sm-5 {
+    @apply sm:w-5/12;
+  }
+  .util-summary-list__key--sm-6 {
+    @apply sm:w-6/12;
+  }
+  .util-summary-list__key--sm-7 {
+    @apply sm:w-7/12;
+  }
+  .util-summary-list__key--sm-8 {
+    @apply sm:w-8/12;
+  }
+  .util-summary-list__key--sm-9 {
+    @apply sm:w-9/12;
+  }
+  .util-summary-list__key--md-3 {
+    @apply md:w-3/12;
+  }
+  .util-summary-list__key--md-4 {
+    @apply md:w-4/12;
+  }
+  .util-summary-list__key--md-5 {
+    @apply md:w-5/12;
+  }
+  .util-summary-list__key--md-6 {
+    @apply md:w-6/12;
+  }
+  .util-summary-list__key--md-7 {
+    @apply md:w-7/12;
+  }
+  .util-summary-list__key--md-8 {
+    @apply md:w-8/12;
+  }
+  .util-summary-list__key--md-9 {
+    @apply md:w-9/12;
+  }
+  .util-summary-list__key--lg-3 {
+    @apply lg:w-3/12;
+  }
+  .util-summary-list__key--lg-4 {
+    @apply lg:w-4/12;
+  }
+  .util-summary-list__key--lg-5 {
+    @apply lg:w-5/12;
+  }
+  .util-summary-list__key--lg-6 {
+    @apply lg:w-6/12;
+  }
+  .util-summary-list__key--lg-7 {
+    @apply lg:w-7/12;
+  }
+  .util-summary-list__key--lg-8 {
+    @apply lg:w-8/12;
+  }
+  .util-summary-list__key--lg-9 {
+    @apply lg:w-9/12;
+  }
+}

package/src/components/summary-list.css

@@ -1,29 +1,105 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+@import './summary-list.common.css';
+
 .ds-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;
-}
-.ds-summary-list--no-border {
-  .ds-summary-list__key,
-  .ds-summary-list__value,
-  .ds-summary-list__actions {
-    @apply sm:border-0 pb-2;
+  @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;
+      }
+    }
   }
 }
+
 .ds-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;
-}
-.ds-summary-list__row--no-border {
-  .ds-summary-list__key,
-  .ds-summary-list__value,
-  .ds-summary-list__actions {
-    @apply sm:border-0 pb-2;
+  @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;
+    }
   }
 }
 .ds-summary-list__key {
-  @apply font-bold mb-1 sm:w-3/12;
+  @apply util-summary-list__key-text util-summary-list__key;
+  &.ds-summary-list__key--sm-3 {
+    @apply util-summary-list__key--sm-3;
+  }
+  &.ds-summary-list__key--sm-4 {
+    @apply util-summary-list__key--sm-4;
+  }
+  &.ds-summary-list__key--sm-5 {
+    @apply util-summary-list__key--sm-5;
+  }
+  &.ds-summary-list__key--sm-6 {
+    @apply util-summary-list__key--sm-6;
+  }
+  &.ds-summary-list__key--sm-7 {
+    @apply util-summary-list__key--sm-7;
+  }
+  &.ds-summary-list__key--sm-8 {
+    @apply util-summary-list__key--sm-8;
+  }
+  &.ds-summary-list__key--sm-9 {
+    @apply util-summary-list__key--sm-9;
+  }
+  &.ds-summary-list__key--md-3 {
+    @apply util-summary-list__key--md-3;
+  }
+  &.ds-summary-list__key--md-4 {
+    @apply util-summary-list__key--md-4;
+  }
+  &.ds-summary-list__key--md-5 {
+    @apply util-summary-list__key--md-5;
+  }
+  &.ds-summary-list__key--md-6 {
+    @apply util-summary-list__key--md-6;
+  }
+  &.ds-summary-list__key--md-7 {
+    @apply util-summary-list__key--md-7;
+  }
+  &.ds-summary-list__key--md-8 {
+    @apply util-summary-list__key--md-8;
+  }
+  &.ds-summary-list__key--md-9 {
+    @apply util-summary-list__key--md-9;
+  }
+  &.ds-summary-list__key--lg-3 {
+    @apply util-summary-list__key--lg-3;
+  }
+  &.ds-summary-list__key--lg-4 {
+    @apply util-summary-list__key--lg-4;
+  }
+  &.ds-summary-list__key--lg-5 {
+    @apply util-summary-list__key--lg-5;
+  }
+  &.ds-summary-list__key--lg-6 {
+    @apply util-summary-list__key--lg-6;
+  }
+  &.ds-summary-list__key--lg-7 {
+    @apply util-summary-list__key--lg-7;
+  }
+  &.ds-summary-list__key--lg-8 {
+    @apply util-summary-list__key--lg-8;
+  }
+  &.ds-summary-list__key--lg-9 {
+    @apply util-summary-list__key--lg-9;
+  }
 }
 @media print {
   .ds-summary-list__key {
@@ -31,20 +107,18 @@
   }
 }
 .ds-summary-list__value {
-  @apply sm:w-6/12;
+  @apply util-summary-list__value;
 }
 .ds-summary-list__actions {
-  @apply sm:w-3/12 sm:pr-0 sm:text-right;
+  @apply util-summary-list__actions;
 }
+
 /* When "actions" are right after "key" */
 .ds-summary-list__key + .ds-summary-list__actions {
-  @apply sm:w-9/12;
-}
-/* When "value" is 1st or 2nd among 2 children */
-.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;
+  @apply sm:flex-1;
 }
+
+
 /* When there is only one child */
 .ds-summary-list__key:only-child,
 .ds-summary-list__value:only-child,

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

@@ -0,0 +1,93 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+@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 gap-y-2;
+}
+.ds-summary-list__key {
+  @apply util-summary-list__key;
+}
+
+.ds-summary-list__key--sm-3 {
+  @apply util-summary-list__key--sm-3;
+}
+.ds-summary-list__key--sm-4 {
+  @apply util-summary-list__key--sm-4;
+}
+.ds-summary-list__key--sm-5 {
+  @apply util-summary-list__key--sm-5;
+}
+.ds-summary-list__key--sm-6 {
+  @apply util-summary-list__key--sm-6;
+}
+.ds-summary-list__key--sm-7 {
+  @apply util-summary-list__key--sm-7;
+}
+.ds-summary-list__key--sm-8 {
+  @apply util-summary-list__key--sm-8;
+}
+.ds-summary-list__key--sm-9 {
+  @apply util-summary-list__key--sm-9;
+}
+.ds-summary-list__key--md-3 {
+  @apply util-summary-list__key--md-3;
+}
+.ds-summary-list__key--md-4 {
+  @apply util-summary-list__key--md-4;
+}
+.ds-summary-list__key--md-5 {
+  @apply util-summary-list__key--md-5;
+}
+.ds-summary-list__key--md-6 {
+  @apply util-summary-list__key--md-6;
+}
+.ds-summary-list__key--md-7 {
+  @apply util-summary-list__key--md-7;
+}
+.ds-summary-list__key--md-8 {
+  @apply util-summary-list__key--md-8;
+}
+.ds-summary-list__key--md-9 {
+  @apply util-summary-list__key--md-9;
+}
+.ds-summary-list__key--lg-3 {
+  @apply util-summary-list__key--lg-3;
+}
+.ds-summary-list__key--lg-4 {
+  @apply util-summary-list__key--lg-4;
+}
+.ds-summary-list__key--lg-5 {
+  @apply util-summary-list__key--lg-5;
+}
+.ds-summary-list__key--lg-6 {
+  @apply util-summary-list__key--lg-6;
+}
+.ds-summary-list__key--lg-7 {
+  @apply util-summary-list__key--lg-7;
+}
+.ds-summary-list__key--lg-8 {
+  @apply util-summary-list__key--lg-8;
+}
+.ds-summary-list__key--lg-9 {
+  @apply util-summary-list__key--lg-9;
+}
+
+.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;
+    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;
+  }
+}