ngx-virtual-select-field-filterable 1.4.0

package/theme/index.scss

@@ -0,0 +1,151 @@
+@use 'sass:math';
+@use '@angular/material/core/style/variables';
+
+$name-prefix: 'ngx-virtual-select-field';
+$option-prefix: 'ngx-virtual-select-field-option';
+
+@mixin inherit-material-theme() {
+  :root {
+    --#{$name-prefix}-trigger-text-color: var(
+      --mat-select-enabled-trigger-text-color
+    );
+    --#{$name-prefix}-trigger-text-color--disabled: var(
+      --mat-select-disabled-trigger-text-color
+    );
+    --#{$name-prefix}-trigger-font-family: var(--mat-select-trigger-text-font);
+    --#{$name-prefix}-trigger-line-height: var(
+      --mat-select-trigger-text-line-height
+    );
+    --#{$name-prefix}-trigger-font-size: var(--mat-select-trigger-text-size);
+    --#{$name-prefix}-trigger-font-weight: var(
+      --mat-select-trigger-text-weight
+    );
+    --#{$name-prefix}-trigger-letter-spacing: var(
+      --mat-select-trigger-text-tracking
+    );
+
+    --#{$name-prefix}-placeholder-text-color: var(
+      --mat-select-placeholder-text-color
+    );
+    --#{$name-prefix}-placeholder-transition: color
+      variables.$swift-ease-out-duration
+      math.div(variables.$swift-ease-out-duration, 3)
+      variables.$swift-ease-out-timing-function;
+
+    --#{$name-prefix}-arrow-size: 5px;
+    --#{$name-prefix}-arrow-color--enabled: var(
+      --mat-select-enabled-arrow-color
+    );
+    --#{$name-prefix}-arrow-color--focused: var(
+      --mat-select-focused-arrow-color
+    );
+    --#{$name-prefix}-arrow-color--invalid: var(
+      --mat-select-invalid-arrow-color
+    );
+    --#{$name-prefix}-arrow-color--disabled: var(
+      --mat-select-disabled-arrow-color
+    );
+
+    --#{$name-prefix}-panel-background: var(
+      --mat-select-panel-background-color
+    );
+    --#{$name-prefix}-panel-box-shadow: var(
+      --mat-select-container-elevation-shadow
+    );
+    --#{$name-prefix}-panel-border-radius: 4px;
+    --#{$name-prefix}-panel-list-wrapper-padding: 8px;
+  }
+
+  :root {
+    --#{$option-prefix}-color: var(--mat-option-label-text-color);
+    --#{$option-prefix}-font-family: var(--mat-option-label-text-font);
+    --#{$option-prefix}-line-height: var(--mat-option-label-text-line-height);
+    --#{$option-prefix}-font-size: var(--mat-option-label-text-size);
+    --#{$option-prefix}-letter-spacing: var(--mat-option-label-text-tracking);
+    --#{$option-prefix}-font-weight: var(--mat-option-label-text-weight);
+
+    --#{$option-prefix}-selected-state-label-text-color: var(
+      --mat-option-selected-state-label-text-color
+    );
+    --#{$option-prefix}-background-color--active: var(
+      --mat-option-focus-state-layer-color
+    );
+    --#{$option-prefix}-background-color--hover: var(
+      --mat-option-hover-state-layer-color
+    );
+    --#{$option-prefix}-background-color--selected: var(
+      --mat-option-selected-state-layer-color
+    );
+
+    --#{$option-prefix}-disabled-state-opacity: 0.38;
+    --#{$option-prefix}-gap: 8px;
+    --#{$option-prefix}-padding: 0 16px;
+  }
+
+  @include overlay-position-styles();
+}
+
+@mixin create-default-theme() {
+  :root {
+    --#{$name-prefix}-trigger-text-color: inherit;
+    --#{$name-prefix}-trigger-text-color--disabled: grey;
+    --#{$name-prefix}-trigger-font-family: inherit;
+    --#{$name-prefix}-trigger-line-height: inherit;
+    --#{$name-prefix}-trigger-font-size: inherit;
+    --#{$name-prefix}-trigger-font-weight: inherit;
+    --#{$name-prefix}-trigger-letter-spacing: inherit;
+
+    --#{$name-prefix}-placeholder-text-color: inherit;
+    --#{$name-prefix}-placeholder-transition: color 400ms math.div(400ms, 3)
+      cubic-bezier(0.25, 0.8, 0.25, 1);
+
+    --#{$name-prefix}-arrow-size: 5px;
+    --#{$name-prefix}-arrow-color--enabled: inherit;
+    --#{$name-prefix}-arrow-color--focused: blue;
+    --#{$name-prefix}-arrow-color--invalid: red;
+    --#{$name-prefix}-arrow-color--disabled: grey;
+
+    --#{$name-prefix}-panel-background: black;
+    --#{$name-prefix}-panel-box-shadow: none;
+    --#{$name-prefix}-panel-border-radius: 4px;
+    --#{$name-prefix}-panel-list-wrapper-padding: 8px;
+  }
+
+  :root {
+    --#{$option-prefix}-color: inherit;
+    --#{$option-prefix}-font-family: inherit;
+    --#{$option-prefix}-line-height: inherit;
+    --#{$option-prefix}-font-size: inherit;
+    --#{$option-prefix}-letter-spacing: inherit;
+    --#{$option-prefix}-font-weight: inherit;
+
+    --#{$option-prefix}-selected-state-label-text-color: blue;
+    --#{$option-prefix}-background-color--active: darkgrey;
+    --#{$option-prefix}-background-color--hover: grey;
+    --#{$option-prefix}-background-color--selected: grey;
+
+    --#{$option-prefix}-disabled-state-opacity: 0.5;
+    --#{$option-prefix}-gap: 8px;
+    --#{$option-prefix}-padding: 0 16px;
+  }
+
+  @include overlay-position-styles();
+}
+
+@mixin overlay-position-styles() {
+  .#{$name-prefix} {
+    &-panel {
+      border-bottom-left-radius: var(--#{$name-prefix}-panel-border-radius);
+      border-bottom-right-radius: var(--#{$name-prefix}-panel-border-radius);
+    }
+
+    &-overlay--above {
+      .#{$name-prefix}-panel {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: var(--#{$name-prefix}-panel-border-radius);
+        border-top-right-radius: var(--#{$name-prefix}-panel-border-radius);
+      }
+    }
+  }
+}