@sumaris-net/ngx-components 4.0.0-rc8 → 18.0.0-rc1

package/src/theme/_ngx-components.forms.scss

@@ -0,0 +1,354 @@
+
+// --------------------------------------------------
+// Material Forms
+// --------------------------------------------------
+.form-container,
+form.form-container {
+  @include font-size(16px);
+
+  --mdc-icon-button-icon-color: var(--app-form-field-label-color);
+
+  --mdc-filled-text-field-container-color: var(--app-form-field-background-color);
+  --mdc-filled-text-field-disabled-container-color: var(--app-form-field-disabled-background-color);
+  --mdc-filled-text-field-input-text-color: var(--ion-text-color);
+  --mdc-filled-text-field-input-text-placeholder-color: var(--app-form-field-label-color);
+  --mdc-filled-text-field-caret-color: var(--ion-text-color);
+  --mdc-filled-text-field-label-text-color: var(--app-form-field-label-color);
+  --mdc-filled-text-field-label-text-tracking: normal;
+  --mdc-filled-text-field-disabled-label-text-color: var(--app-form-field-disabled-label-color);
+  --mdc-filled-text-field-disabled-input-text-color: var(--app-form-color-disabled);
+  --mdc-filled-text-field-active-indicator-color: var(--app-form-field-label-color);
+  --mdc-filled-text-field-hover-label-text-color: var(--app-form-field-label-color);
+  --mdc-filled-text-field-hover-active-indicator-color: var(--ion-text-color);
+  --mdc-filled-text-field-focus-label-text-color: var(--ion-color-primary);
+  --mdc-filled-text-field-focus-active-indicator-color: var(--ion-color-primary);
+
+  --mdc-outlined-text-field-input-text-color: var(--ion-text-color);
+  --mdc-outlined-text-field-input-text-placeholder-color: var(--app-form-field-label-color);
+  --mdc-outlined-text-field-caret-color: var(--ion-text-color);
+  --mdc-outlined-text-field-label-text-color: var(--app-form-field-label-color);
+  --mdc-outlined-text-field-label-text-tracking: normal;
+  --mdc-outlined-text-field-disabled-label-text-color: var(--app-form-field-disabled-label-color);
+  --mdc-outlined-text-field-disabled-input-text-color: var(--app-form-color-disabled);
+  --mdc-outlined-text-field-outline-color: var(--app-form-field-label-color);
+  --mdc-outlined-text-field-hover-label-text-color: var(--app-form-field-label-color);
+  --mdc-outlined-text-field-hover-outline-color: var(--ion-text-color);
+  --mdc-outlined-text-field-focus-label-text-color: var(--ion-color-primary);
+  --mdc-outlined-text-field-focus-outline-color: var(--ion-color-primary);
+
+  --mat-checkbox-label-text-color: var(--ion-text-color);
+  --mat-form-field-state-layer-color: var(--app-form-field-focus-background-color);
+  --mat-form-field-container-height: 45px;
+  --mat-form-field-container-text-size: inherit;
+  --mat-form-field-filled-label-display: block;
+  --mat-form-field-container-vertical-padding: 8px;
+  --mat-form-field-filled-with-label-container-padding-top: 18px;
+  --mat-form-field-filled-with-label-container-padding-bottom: 0px;
+
+  --mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
+  --mat-select-enabled-trigger-text-color: var(--ion-text-color);
+  --mat-select-disabled-trigger-text-color: var(--app-form-color-disabled);
+
+  --mdc-switch-selected-track-color: var(--app-form-field-background-color-shade);
+  --mdc-switch-selected-focus-track-color: var(--app-form-field-background-color-shade);
+  --mdc-switch-unselected-track-color: var(--app-form-field-background-color-shade);
+  --mdc-switch-selected-hover-track-color: var(--app-form-field-background-color-shade);
+  --mdc-switch-unselected-hover-track-color: var(--app-form-field-background-color-shade);
+  --mdc-switch-unselected-focus-track-color: var(--app-form-field-background-color-shade);
+
+  .mat-form-field-disabled,
+  .mat-mdc-input-element:disabled {
+    color: var(--app-form-color-disabled, #{$app-form-color-disabled}) !important;
+  }
+
+  .mat-form-field-disabled {
+    .mat-mdc-form-field-infix {
+      min-height: var(--mat-form-field-container-height);
+    }
+  }
+
+  mat-form-field,
+  mat-autocomplete-field,
+  app-form-field {
+    width: 100%;
+  }
+
+  .mat-mdc-form-field {
+    &:not(.mat-mdc-form-field-has-icon-prefix) {
+      .mdc-text-field {
+        padding-left: 4px;
+      }
+    }
+
+    ion-icon[matPrefix],
+    mat-icon[matPrefix],
+    .mat-mdc-form-field-icon-prefix {
+
+      --mdc-icon-button-icon-size: 24px;
+      --mdc-icon-button-icon-color: inherit;
+      --mdc-icon-button-state-layer-size: 48px;
+      --mdc-icon-button-margin-vertical: 12px;
+
+      ion-icon, .mat-icon {
+        font-size: var(--mdc-icon-button-icon-size) !important;
+        line-height: 1.125;
+        height: var(--mdc-icon-button-icon-size);
+        width: var(--mdc-icon-button-icon-size);
+        margin-left: var(--mdc-icon-button-margin-vertical);
+        margin-right: var(--mdc-icon-button-margin-vertical);
+        position: relative;
+        color: var(--mdc-icon-button-icon-color);
+        fill: var(--mdc-icon-button-icon-color);
+      }
+    }
+
+    ion-icon[matSuffix],
+    mat-icon[matSuffix],
+    .mat-mdc-form-field-icon-suffix {
+      white-space: nowrap;
+
+      .mat-mdc-icon-button {
+        --mdc-icon-button-state-layer-size: 24px;
+        --mdc-icon-button-icon-size: 16px;
+        --mdc-icon-button-padding: 4px;
+        padding: var(--mdc-icon-button-padding);
+
+        &.large {
+          --mdc-icon-button-state-layer-size: 48px;
+          --mdc-icon-button-icon-size: 24px;
+          --mdc-icon-button-padding: 12px;
+        }
+
+        ion-icon, .mat-icon {
+          height: var(--mdc-icon-button-icon-size);
+          width: var(--mdc-icon-button-icon-size);
+          font-size: var(--mdc-icon-button-icon-size);
+        }
+
+        .mat-mdc-button-touch-target {
+          width: var(--mdc-icon-button-state-layer-size);
+        }
+      }
+
+      ion-icon, .mat-icon {
+
+        &.large {
+          $font-size: calculateRem(14px);
+          font-size: $font-size;
+          line-height: 1.125;
+        }
+      }
+
+    }
+
+    // When field use choice button, reduce the font size, and optimize layout
+    button.mat-mdc-form-field-button,
+    ion-button.mat-mdc-form-field-button {
+      @include font-size-important(12px);
+      margin: 0;
+      white-space: normal;
+    }
+
+    // Used to customize mat-boolean-field
+    &.mat-boolean-field-checkbox {
+      --mdc-checkbox-state-layer-size: 20px;
+
+      .mat-mdc-form-field-infix {
+        padding-top: 16px;
+      }
+
+      .mdc-floating-label {
+        transform: unset !important;
+        padding-left: 30px;
+        top: 20px;
+      }
+    }
+
+    &.mat-boolean-field-radio {
+      --mdc-radio-state-layer-size: 20px;
+      --mdc-radio-radio-touch-target-size: 24px;
+      --mat-mdc-form-field-label-offset-x: 0px;
+
+      // Fix outline appearance
+      &.mat-mdc-form-field-has-icon-prefix {
+        .mat-mdc-text-field-wrapper {
+          --mat-mdc-form-field-label-offset-x: var(--mdc-icon-button-icon-size, 24px);
+        }
+      }
+
+      .mat-mdc-radio-group {
+        display: inline-flex;
+
+        .mat-mdc-radio-button:not(:first-child) {
+          padding-left: 4px !important;
+        }
+
+        .mat-mdc-radio-touch-target {
+          height: var(--mdc-radio-radio-touch-target-size, 48px);
+          width: var(--mdc-radio-radio-touch-target-size, 48px);
+        }
+      }
+
+    }
+
+    // Increase padding top, when having buttons
+    &:has(.mat-form-field-buttons),
+    &.mat-boolean-field-button {
+      .mat-mdc-form-field-infix {
+        padding-top: calc(var(--mat-form-field-filled-with-label-container-padding-top, 0px) + 4px);
+      }
+    }
+  }
+
+  .mat-mdc-form-field-subscript-wrapper {
+    mat-hint {
+      --color: rgb(115,115,115);
+      color: var(--color);
+    }
+  }
+
+  /* -- Computed field -- */
+
+  // Set color on computed field (if enable or disable)
+  .computed .mat-mdc-form-field,
+  .mat-mdc-form-field .computed,
+  .mat-mdc-form-field.computed,
+  .computed .mat-mdc-form-field .mat-mdc-input-element:disabled,
+  .mat-mdc-form-field .computed .mat-mdc-input-element:disabled,
+  .mat-mdc-form-field.computed .mat-mdc-input-element:disabled {
+    --mdc-filled-text-field-input-text-color: var(--app-form-color-computed, #{$app-form-color-computed}) !important;
+    color: var(--app-form-color-computed, #{$app-form-color-computed}) !important;
+    font-style: italic;
+  }
+
+  /* MatSwipeField */
+  mat-swipe-field {
+
+    .mdc-floating-label--float-above {
+      transform: translateY(-106%) translateX(40px) scale(0.75) !important;
+    }
+  }
+
+  // Ckeckbox
+  .mat-mdc-checkbox {
+    --mat-checkbox-label-text-color: var(--app-form-color);
+    --mdc-checkbox-unselected-icon-color: var(--app-form-color);
+    --mdc-checkbox-unselected-focus-icon-color: var(--app-form-color);
+    --mdc-checkbox-unselected-hover-icon-color: var(--app-form-color);
+    --mdc-checkbox-unselected-pressed-icon-color: var(--app-form-color);
+  }
+
+  // Radio
+  .mat-mdc-radio-button {
+    --mat-checkbox-label-text-color: var(--app-form-color);
+
+    --mdc-radio-disabled-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
+    --mdc-radio-disabled-selected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
+    --mdc-radio-unselected-hover-icon-color: var(--app-form-color);
+    --mdc-radio-unselected-focus-icon-color: var(--app-form-color);
+    --mdc-radio-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
+    --mdc-radio-unselected-pressed-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
+    --mdc-radio-selected-hover-icon-color: var(--ion-color-accent);
+    --mdc-radio-selected-icon-color: var(--ion-color-accent);
+    --mdc-radio-selected-focus-icon-color: var(--ion-color-primary);
+    --mdc-radio-selected-pressed-icon-color: var(--ion-color-accent);
+    --mat-radio-ripple-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);;
+    --mat-radio-checked-ripple-color: var(--ion-color-accent);
+    --mat-radio-disabled-label-color: var(--app-form-color-disabled, rgba(black, 0.38));
+  }
+
+  // Slide
+  .mat-mdc-slide-toggle {
+    --mdc-switch-selected-focus-handle-color: var(--ion-color-accent);
+    --mdc-switch-selected-icon-color: var(--ion-color-accent-contrast);
+    --mdc-switch-selected-hover-handle-color: var(--ion-color-accent-contrast);
+    --mdc-switch-selected-pressed-handle-color: var(--ion-color-accent-contrast);
+
+    &.mat-mdc-slide-toggle-checked:not(.cdk-focused){
+      --mdc-switch-selected-icon-color: var(--ion-color-accent);
+    }
+  }
+
+}
+// Manage first child grid inside a form
+form.form-container > ion-grid,
+ion-grid.form-container {
+  padding: 0;
+
+  & > ion-row {
+    // No between grid rows
+    padding: 0;
+
+    & > ion-col {
+      // No top/bottom padding between grid cell
+      padding-bottom: 0;
+      padding-top: 0;
+
+      & > ion-label {
+        color: var(--ion-color-primary100);
+      }
+
+      & > ion-label[text-wrap],
+      & > ion-label.ion-text-wrap {
+        word-wrap: normal;
+        white-space: normal;
+        line-height: 1rem !important;
+      }
+    }
+  }
+}
+
+
+// --------------------------------------------------
+// Forms
+// --------------------------------------------------
+// On small screen, align label on left
+@media screen and (max-width: $screen-sm-max) {
+  form.form-container > ion-grid,
+  ion-grid.form-container {
+    ion-col > ion-label.ion-float-center,
+    ion-col > ion-label.ion-float-end {
+      display: block;
+      width: 100%;
+      text-align: start !important;
+      line-height: 37px;
+      min-height: 37px;
+      margin-top: 0;
+      margin-bottom: 0;
+      margin-right: 0;
+    }
+  }
+}
+
+// On large screen, align label on right
+@media screen and (min-width: $screen-md) {
+
+  form.form-container > ion-grid,
+  ion-grid.form-container {
+   ion-col > ion-label.ion-float-center,
+   ion-col > ion-label.ion-float-end {
+      display: block;
+      text-align: end !important;
+      min-height: var(--mat-form-field-container-height, 45px);
+      margin-top: 11px;
+      margin-bottom: 11px;
+      padding-inline-end: 5px;
+    }
+  }
+}
+
+// Dark mode mode
+html.dark {
+  .mat-mdc-autocomplete-panel,
+  .mat-mdc-select-panel {
+    --mat-select-panel-background-color: var(--ion-color-step-100);
+    --mat-autocomplete-background-color: var(--ion-color-step-100);
+
+    .mat-mdc-option {
+      --mat-option-label-text-color: var(--ion-text-color);
+      --mat-option-selected-state-label-text-color: var(--ion-color-primary);
+      --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--ion-color-primary);
+      color: var(--mat-option-label-text-color) !important;
+    }
+  }
+}

package/src/theme/_ngx-components.globals.scss

@@ -2,21 +2,31 @@ $app-menu-width: 300px !default;
 
 $app-toolbar-height: 60px !default; // = $mat-toolbar-height-mobile + 4 (progress bar);
 
-$app-form-color: rgba(0, 0, 0, 0.87) !default;
-$app-form-color-disabled: rgba(0, 0, 0, 0.55) !default;
-
 $app-table-header-height: 44px !default;
-$app-table-cell-horizontal-padding: 8px !default;
 $app-table-row-height: 48px !default;
 $app-table-row-max-height: 52px !default;
+$app-table-cell-horizontal-padding: 8px !default;
+$app-table-cell-focus-background-color: transparent !default;
 
 $app-paginator-height: 34px !default;
 $app-form-buttons-bar-height: 56px !default;
 
-$app-select-option-border-color: rgba(0, 0, 0, 0.12) !default;
-$app-table-border-color: rgba(0, 0, 0, 0.08) !default;
+// Form's field text and label
+$app-form-color: #{$text-color} !default;
+$app-form-color-rgb: #{$text-color-rgb} !default;
+$app-form-color-disabled: rgba(#{$text-color-rgb}, 0.55) !default;
+$app-form-color-computed: var(--ion-color-primary-tint) !default;
+$app-form-field-label-color: rgba(#{$text-color-rgb}, 0.6) !default;
+$app-form-field-disabled-label-color: rgba(#{$text-color-rgb}, 0.38) !default;
+
+// Form's field background
+$app-form-field-background-color: #f5f5f5 !default; // Field background
+$app-form-color-background-color-shade: #b9b9b9 !default; // Darker color (e.g. for toggle slide bar - see settings field 'dark mode')
+$app-form-field-focus-background-color: transparent !default; // Focused field background
+$app-form-field-disabled-background-color: #fafafa !default;
+
+$app-select-option-border-color: rgba(#{$text-color-rgb}, 0.12) !default;
+$app-table-border-color: rgba(#{$text-color-rgb}, 0.08) !default;
+$app-table-row-item-selected-background-color: var(--ion-color-secondary100) !default;
+$app-table-row-item-selected-text-color: var(--ion-color-secondary100-contrast) !default;
 
-$app-form-field-background-color: rgba(0,0,0,0) !default;
-//$app-form-field-background-color: whitesmoke !default;
-$app-form-field-focus-background-color: rgba(0, 0, 0, 0) !default;
-//$app-form-field-focus-background-color: rgba(0, 0, 0, 0.87) !default;