@valtimo/components 12.6.1 → 12.8.0

package/assets/css/formio-carbon.scss

@@ -78,8 +78,64 @@
     padding-left: 0;
   }
 
-  .nav.nav-tabs .nav-item .nav-link.active {
+  .nav.nav-tabs .nav-item .nav-link {
     border: none !important;
+    font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+    line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+    letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
+    color: var(--cds-text-primary, #161616) !important;
+    padding: 1rem;
+
+    &.active {
+      font-weight: var(--cds-heading-compact-01-font-weight, 600);
+    }
+  }
+
+  .choices__inner {
+    border: 1px solid var(--cds-border-subtle-01) !important;
+    background-color: var(--cds-layer-01) !important;
+    border-radius: 0;
+    padding: 0.5rem;
+
+    .choices__input {
+      background: transparent;
+    }
+
+    .choices__item {
+      font-size: var(--cds-label-01-font-size, 0.75rem);
+      font-weight: var(--cds-label-01-font-weight, 400);
+      line-height: var(--cds-label-01-line-height, 1.33333);
+      letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 1rem;
+      margin: 0.25rem;
+      cursor: default;
+      max-inline-size: 13rem;
+      min-block-size: var(--cds-layout-size-height-local);
+      min-inline-size: 2rem;
+      padding-inline: 0.5rem;
+      vertical-align: middle;
+      word-break: break-word;
+      background-color: var(--cds-tag-background-cyan, #bae6ff) !important;
+      color: var(--cds-tag-color-cyan, #00539a) !important;
+      border: 1px solid var(--cds-tag-border-cyan, #33b1ff) !important;
+
+      .choices__button {
+        border-left: 1px solid var(--cds-tag-border-cyan, #33b1ff) !important;
+        filter: invert(1) sepia(1) saturate(500%) hue-rotate(200deg);
+        opacity: 0.6;
+      }
+
+      &.is-highlighted {
+        background-color: var(--cds-tag-hover-cyan, #99daff) !important;
+      }
+    }
+  }
+
+  .wizard-page {
+    margin-bottom: 1rem;
   }
 
   /* styling from https://raw.githubusercontent.com/IBM/ipm-bootstrap-carbon-theme/refs/heads/master/dist/css/bootstrap.css */
@@ -335,11 +391,11 @@
     }
     .table td,
     .table th {
-      background-color: #fff !important;
+      background-color: var(--cds-layer-01);
     }
     .table-bordered th,
     .table-bordered td {
-      border: 1px solid #ddd !important;
+      border: 1px solid var(--cds-border-subtle-01) !important;
     }
   }
   @font-face {
@@ -2513,7 +2569,7 @@
     border-top: 2px solid #ddd;
   }
   .table .table {
-    background-color: #fff;
+    background-color: var(--cds-layer-01);
   }
   .table-condensed > thead > tr > th,
   .table-condensed > tbody > tr > th,
@@ -2523,8 +2579,9 @@
   .table-condensed > tfoot > tr > td {
     padding: 5px;
   }
-  .table-bordered {
-    border: 1px solid #ddd;
+  .table-bordered,
+  .formio-component-datagrid .datagrid-table {
+    border: 1px solid var(--cds-border-subtle-01) !important;
   }
   .table-bordered > thead > tr > th,
   .table-bordered > tbody > tr > th,
@@ -2532,7 +2589,16 @@
   .table-bordered > thead > tr > td,
   .table-bordered > tbody > tr > td,
   .table-bordered > tfoot > tr > td {
-    border: 1px solid #ddd;
+    border: 1px solid var(--cds-border-subtle-01) !important;
+  }
+  .table-bordered > thead > tr > th,
+  .table-bordered > tbody > tr > th,
+  .table-bordered > tfoot > tr > th {
+    font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+    font-weight: var(--cds-heading-compact-01-font-weight, 600);
+    line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+    letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
+    color: var(--cds-text-primary, #161616);
   }
   .table-bordered > thead > tr > th,
   .table-bordered > thead > tr > td {
@@ -4263,8 +4329,8 @@
     background-color: #f4f4f7;
     border: 1px solid #f4f4f7;
     border-bottom-color: transparent;
-    -webkit-box-shadow: inset 0 2px 0 0 var(--vcds-formio-blue-19);
-    box-shadow: inset 0 2px 0 0 var(--vcds-formio-blue-19);
+    -webkit-box-shadow: inset 0 2px 0 0 var(--vcds-formio-blue-18);
+    box-shadow: inset 0 2px 0 0 var(--vcds-formio-blue-18);
   }
   .nav-tabs.nav-justified {
     width: 100%;
@@ -4939,25 +5005,46 @@
     color: #777777;
   }
   .pagination {
-    display: inline-block;
+    display: flex;
+    flex-wrap: nowrap; /* Ensures all items stay in a single row */
+    overflow-x: auto; /* Enables horizontal scrolling if needed */
     padding-left: 0;
     margin: 20px 0;
     border-radius: 0px;
   }
   .pagination > li {
-    display: inline;
+    list-style: none; /* Removes bullet points */
+    flex: 0 0 auto; /* Prevents items from stretching */
+  }
+  .pagination > li > button {
+    background-color: transparent !important;
+    color: var(--cds-text-primary, #161616) !important;
+    font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+    font-weight: var(--cds-body-compact-01-font-weight, 400);
+    line-height: 1.45;
+    transition:
+      box-shadow 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
+      color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
+    border-radius: 0 !important;
+    border-color: var(--cds-border-subtle) !important;
+    border-top-width: 3px;
+  }
+  .pagination > li.active > button {
+    border-color: var(--cds-interactive, var(--vcds-color-60)) !important;
   }
   .pagination > li > a,
   .pagination > li > span {
-    position: relative;
-    float: left;
+    display: inline-block; /* Ensures proper spacing and alignment */
     padding: 6px 12px;
-    margin-left: -1px;
     line-height: 1.42857143;
     color: var(--vcds-formio-blue-19);
     text-decoration: none;
     background-color: #fff;
     border: 1px solid #ddd;
+    white-space: nowrap; /* Prevents text wrapping inside pagination items */
   }
   .pagination > li > a:hover,
   .pagination > li > span:hover,
@@ -7667,4 +7754,35 @@
       inset 0 1px 3px rgba(0, 0, 0, 0.05),
       0 1px 0 rgba(255, 255, 255, 0.1);
   }
+
+  .card {
+    background-color: var(--cds-layer-01) !important;
+    box-shadow: none !important;
+
+    &.border {
+      border: 1px solid var(--cds-border-subtle-01) !important;
+    }
+
+    div[ref='header'] {
+      background-color: var(--cds-layer-accent);
+      color: var(--cds-text-primary, #161616);
+      padding: 1rem;
+      margin: 0;
+
+      .card-title {
+        font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+        font-weight: var(--cds-heading-compact-01-font-weight, 600);
+        line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+        letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
+      }
+
+      i {
+        color: var(--cds-text-primary, #161616) !important;
+      }
+    }
+  }
+
+  .card-body {
+    padding: 1rem;
+  }
 }