@digigov/css 2.0.0-rc.5 → 2.0.0-rc.7

package/src/components/stepnav.css

@@ -1,10 +1,11 @@
 .ds-step-nav {
   @apply mb-8 md:mb-12;
-&.ds-step-nav--dense, .ds-dense & {
+  &.ds-step-nav--dense,
+  .ds-dense & {
     @apply mb-4 md:mb-8;
     .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 +21,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 +57,6 @@
   }
 }
 .ds-step-nav__accordion[open] {
-
   .ds-step-nav__accordion__opened {
     visibility: visible;
     display: block;
@@ -83,7 +83,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 +110,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,34 +128,27 @@
     @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;
@@ -164,4 +169,3 @@
     @apply mb-0 mt-1;
   }
 }
-

package/src/components/summary-list.css

@@ -1,25 +1,25 @@
 .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;
+  font-size: var(--summary-list-font-size);
+  &.ds-summary-list--no-border {
+    .ds-summary-list__key,
+    .ds-summary-list__value,
+    .ds-summary-list__actions {
+      @apply sm:border-0 pb-2;
+    }
   }
 }
 .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;
+  &.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 {
@@ -36,15 +36,18 @@
 .ds-summary-list__actions {
   @apply sm:w-3/12 sm:pr-0 sm:text-right;
 }
+
 /* 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;
 }
+
 /* When there is only one child */
 .ds-summary-list__key:only-child,
 .ds-summary-list__value:only-child,

package/src/components/svg-icons.css

@@ -1,88 +1,86 @@
 .ds-svg-icon {
   @apply h-4 w-4 inline transition-transform;
   fill: var(--color-base-content);
-}
-.ds-svg-icon--base-content {
-  fill: var(--color-base-content) !important;
-}
-.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) !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;
-}
-.ds-svg-icon--xl {
-  @apply h-10 w-10 !important;
-}
-.ds-svg-icon--burger {
-  fill: var(--color-base-content);
-  @apply transition-transform focus:bg-focus;
-  @apply 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--base-content {
+    fill: var(--color-base-content) !important;
   }
-}
-.ds-svg-icon--burger--active {
-  #ds-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) !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;
   }
-  #ds-svg-icon--burger__line-2 {
-    @apply w-0 origin-center;
+  &.ds-svg-icon--xl {
+    @apply h-10 w-10 !important;
   }
-  #ds-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;
+      }
+    }
   }
 }