@digigov/css 2.0.0-a32ad9b2 → 2.0.0-a594a958

package/src/components/tabs.css

@@ -1,4 +1,5 @@
 .ds-tabs {
+  @apply mb-4 md:mb-8;
   scroll-behavior: smooth;
   &.ds-tabs--dense,
   .ds-dense & {
@@ -31,20 +32,22 @@
   @apply relative px-4 py-1 md:py-2 m-0 shadow-none cursor-pointer text-link
   md:float-left md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2 md:text-base-content
   print:hidden;
+  transition: 0.2s ease-in-out padding-right, padding-left;
   word-break: break-word;
   &.ds-tabs__list-item-selected {
-    @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:py-4 md:-mt-1;
-    margin-bottom: -1px;
+    @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:pt-3 md:pb-5 md:-mt-1 md:mb-[-1px];
+    transition: 0.2s ease-in-out padding-right, padding-left;
     &:hover {
       text-decoration-thickness: 2px;
     }
   }
 }
 .ds-tabs__tab {
-  @apply text-lg no-underline hover:underline;
+  @apply no-underline hover:underline;
+  font-size: var(--tabs__tab-font-size);
+  line-height: var(--tabs__tab-line-height);
   &::before {
-    @apply absolute top-0 left-0 text-base-content;
-    @apply md:content-[''] !important;
+    @apply absolute top-0 left-0 text-base-content md:!content-[''];
     content: '_';
   }
   &:focus {

package/src/components/task-list.css

@@ -1,20 +1,26 @@
 .ds-task-list {
-  @apply mb-4 pl-6 pb-2;
+  @apply mb-4 md:mb-8 pl-6 pb-2;
+  &.ds-task-list--dense,
+  .ds-dense & {
+    .ds-task-list__item {
+      @apply mb-3 md:mb-6;
+    }
+  }
 }
 .ds-task-list__item {
-  @apply mb-8 md:mb-10;
+  @apply mb-10 md:mb-12;
 }
 .ds-task-list__heading {
-  @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2;
+  @apply text-2xl md:text-3xl font-bold mx-0 mb-3 md:mb-6;
   &.ds-task-list__heading--md {
-    @apply md:text-2xl text-xl md:mb-4 mb-2;
+    @apply text-xl md:text-2xl mb-2 md:mb-4;
   }
   &.ds-task-list__heading--sm {
-    @apply md:text-lg text-base md:mb-3 mb-1;
+    @apply text-base md:text-lg mb-1 md:mb-3;
   }
 }
 .ds-task-list__content {
-  @apply mb-4;
+  @apply mb-2 md:mb-4;
 }
 .ds-task-list__content__tag {
   @apply px-2 py-1 mr-2 inline-block font-sans text-sm uppercase tracking-widest print:border-2 print:bg-white print:mr-4;
@@ -33,7 +39,6 @@
 
 .ds-task-list--dense {
   .ds-task-list__item {
-    @apply mb-4 md:mb-6;
     .ds-summary-list {
       @apply mb-4 md:mb-6;
     }

package/src/components/timeline.css

@@ -1,10 +1,10 @@
 .ds-timeline {
-  @apply mb-4 pl-6 pb-2 border-l-4 border-secondary;
+  @apply mb-4 md:mb-8 pl-6 pb-2 border-l-4 border-secondary;
   &.ds-timeline--dense,
   .ds-dense & {
     @apply pb-0 border-l-3;
     .ds-timeline__item {
-      @apply mb-4 md:mb-6;
+      @apply mb-3 md:mb-6;
     }
     .ds-timeline__heading {
       @apply mb-2;
@@ -20,7 +20,7 @@
   @apply mb-10 md:mb-12;
 }
 .ds-timeline__heading {
-  @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2 relative;
+  @apply text-2xl md:text-3xl font-bold mx-0 mb-3 md:mb-6 relative;
   &::before {
     @apply block absolute top-4 -left-6 w-4 
     border-b-4 border-secondary;
@@ -28,22 +28,22 @@
   }
 }
 .ds-timeline__heading-md {
-  @apply md:text-2xl text-xl md:mb-4 mb-2;
+  @apply text-xl md:text-2xl mb-2 md:mb-4;
   &::before {
     @apply top-3 w-3;
   }
 }
 .ds-timeline__heading-sm {
-  @apply md:text-lg text-base md:mb-3 mb-1;
+  @apply text-base md:text-lg mb-1 md:mb-3;
   &::before {
     @apply top-2.5 w-3;
   }
 }
 .ds-timeline__content {
-  @apply mb-4;
+  @apply mb-2 md:mb-4;
 }
 .ds-timeline__actions {
-  @apply flex flex-wrap items-center gap-4 mb-6;
+  @apply flex flex-wrap items-center gap-4 mb-0;
 }
 
 /* overrides */
@@ -54,6 +54,7 @@
   }
 }
 .ds-timeline__actions {
+  .ds-btn-group,
   .ds-btn,
   .ds-link {
     @apply mb-0;

package/src/components/typography.common.css

@@ -112,7 +112,7 @@
 
   /* List */
   .util-list {
-    @apply md:mb-8 mb-4 mt-4 text-base-content;
+    @apply mb-4 md:mb-8 mt-4 text-base-content;
   }
   .util-list-bullet {
     @apply pl-4;

package/src/components/typography.css

@@ -179,8 +179,19 @@
   &.ds-link--no-underline {
     @apply no-underline hover:underline;
   }
+  &.ds-link--disabled {
+    @apply cursor-not-allowed !important;
+    color: var(--color-base-content);
+    &:hover {
+      color: var(--color-base-content);
+    }
+  }
   &.ds-link-warning {
+    @apply focus:text-link-active;
     color: var(--color-error-text);
+    &:hover {
+      color: var(--color-error-hover);
+    }
   }
   .ds-heading-xl &,
   .ds-heading-lg &,

package/src/components/warning-text.common.css

@@ -4,7 +4,7 @@
 
 @layer utilities {
   .util-warning-text {
-    @apply flex;
+    @apply flex mb-4 md:mb-8;
   }
   .util-warning-text-text {
     font-size: var(--warning-text-font-size);

package/src/components/warning-text.css

@@ -5,6 +5,7 @@
   font-size: var(--warning-text-font-size);
   &.ds-warning-text--dense,
   .ds-dense & {
+    @apply mb-3 md:mb-6;
     .ds-warning-text__icon {
       @apply mr-4 md:mr-5;
     }