no bootstrap3, revert compatibility.scss, tweak formio-carbon file (#…

…1267)
valtimo-platform · Nov 11, 2024 · 11836a8 · 11836a8
1 parent 0811710
commit 11836a8
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 16 deletions.
diff --git a/angular.json b/angular.json
@@ -69,9 +69,9 @@
               "node_modules/flatpickr/dist/flatpickr.css",
               "dist/valtimo/components/assets/css/carbon.scss",
               "dist/valtimo/components/assets/css/color.scss",
-              "dist/valtimo/components/assets/css/formio-carbon.scss",
               "dist/valtimo/components/assets/css/compatibility.scss",
-              "dist/valtimo/components/assets/css/design-tokens.css"
+              "dist/valtimo/components/assets/css/design-tokens.css",
+              "dist/valtimo/components/assets/css/formio-carbon.scss"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",

diff --git a/projects/valtimo/components/assets/css/compatibility.scss b/projects/valtimo/components/assets/css/compatibility.scss
@@ -157,6 +157,13 @@ valtimo-modal {
     valtimo-searchable-dropdown-select h5 {
       color: var(--cds-text-secondary) !important;
     }
+
+    .formio-component-textfield input {
+      background-color: var(--cds-field-02) !important;
+      border: none !important;
+      border-bottom: 1px solid var(--cds-border-strong) !important;
+      border-radius: 0;
+    }
   }
 }
 
@@ -370,6 +377,13 @@ label.col-form-label {
   color: var(--cds-text-secondary) !important;
 }
 
+input {
+  &.form-control {
+    border: 1px solid var(--cds-border-subtle) !important;
+    background-color: var(--cds-field-02) !important;
+  }
+}
+
 .table.table-striped {
   background-color: var(--cds-layer-accent);
   font-weight: 700;
@@ -395,6 +409,9 @@ valtimo-list {
   .search-holder {
     border-bottom: 1px solid var(--cds-border-subtle) !important;
   }
+  input.form-control {
+    border: 1px solid var(--cds-border-subtle);
+  }
   .container-fluid {
     background-color: var(--cds-layer);
   }
@@ -567,6 +584,12 @@ valtimo-dossier-assign-user {
     font-size: 1rem !important;
   }
 
+  .form-control {
+    font-size: 1rem;
+    height: 2.5rem;
+    padding: 4px 12px;
+  }
+
   label {
     margin-bottom: 8px !important;
   }
@@ -697,6 +720,14 @@ valtimo-dossier-widgets-container {
   }
 }
 
+.formio-component-textField,
+.form-control {
+  color: var(--cds-text-secondary) !important;
+  input::placeholder {
+    color: var(--cds-text-secondary) !important;
+  }
+}
+
 valtimo-form-link-process-diagram,
 valtimo-analyse-process-diagram {
   .container-fluid {

diff --git a/projects/valtimo/components/assets/css/formio-carbon.scss b/projects/valtimo/components/assets/css/formio-carbon.scss
@@ -58,6 +58,17 @@
 .formio-carbon,
 .formio-dialog,
 .builder-component {
+  /* resets of compatibility.scss */
+  input.form-control {
+    border: unset !important;
+    background-color: unset !important;
+  }
+
+  .formio-component-textField,
+  .form-control {
+    color: unset !important;
+  }
+
   /* manual overrides */
   .form-check {
     padding-left: 0;
@@ -2754,7 +2765,8 @@
     line-height: 1.42857143;
     color: #555555;
   }
-  .form-control {
+  .form-control,
+  input.form-control {
     --cds-layout-size-height-local: clamp(
       max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)),
       var(--cds-layout-size-height, var(--cds-layout-size-height-md)),
@@ -2770,9 +2782,9 @@
     line-height: var(--cds-body-compact-01-line-height, 1.28572);
     letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
     color: var(--cds-text-primary, #161616);
-    background-color: var(--cds-field);
+    background-color: var(--cds-field) !important;
     border: none;
-    border-block-end: 1px solid var(--cds-border-strong);
+    border-block-end: 1px solid var(--cds-border-strong) !important;
     block-size: var(--cds-layout-size-height-local);
     inline-size: 100%;
     outline: 2px solid transparent;
@@ -2995,9 +3007,6 @@
   .has-feedback {
     position: relative;
   }
-  .has-feedback .form-control {
-    padding-right: 42.5px;
-  }
   .form-control-feedback {
     position: absolute;
     top: 0;
@@ -4021,8 +4030,11 @@
   }
   .input-group {
     position: relative;
-    display: table;
-    border-collapse: separate;
+    flex-wrap: nowrap;
+  }
+  .input-group-text {
+    background: transparent;
+    border: transparent;
   }
   .input-group[class*='col-'] {
     float: none;

diff --git a/projects/valtimo/components/src/lib/components/form-io/form-io.module.ts b/projects/valtimo/components/src/lib/components/form-io/form-io.module.ts
@@ -34,7 +34,6 @@ import {FormIoIbanComponent} from './form-io-iban/iban.component';
 import {ReactiveFormsModule} from '@angular/forms';
 import {FormioValueResolverSelectorComponent} from './formio-value-resolver-selector/formio-value-resolver-selector.component';
 import {FormioDummyComponent} from './form-io-dummy/dummy.component';
-import {Templates} from 'formiojs';
 import {LayerModule} from 'carbon-components-angular';
 
 @NgModule({
@@ -76,8 +75,4 @@ import {LayerModule} from 'carbon-components-angular';
     },
   ],
 })
-export class FormIoModule {
-  constructor() {
-    Templates.framework = 'bootstrap3';
-  }
-}
+export class FormIoModule {}