devextreme-themebuilder 26.1.2-beta → 26.1.3

package/data/scss/widgets/fluent/tabs/layout/tab/styling-mode/_secondary.scss

@@ -1,117 +1,117 @@
-@use "sass:color";
-@use "../../../../colors" as *;
-@use "../../../../sizes" as *;
-@use "../../../../button/colors" as *;
-@use "../../../../button/mixins" as *;
-@use "../../../../../base/icon_fonts" as *;
-@use "../../../../../base/tabs";
-@use "../../../variables/colors" as *;
-@use "../../../variables/sizes" as *;
-@use "../../../mixins" as *;
-
-// adduse
-@use "../../../../scrollable";
-@use "../../../../badge";
-
-
-.dx-tabs-styling-mode-secondary {
-  .dx-tab {
-    border-radius: $fluent-tab-item-border-radius-secondary;
-  }
-
-  &.dx-tab-indicator-position-top {
-    .dx-tab .dx-tab-content {
-      @include dx-tabs-indicator-secondary();
-      @include dx-tabs-horizontal-indicator-secondary(top);
-    }
-  }
-
-  &.dx-tab-indicator-position-bottom {
-    .dx-tab .dx-tab-content {
-      @include dx-tabs-indicator-secondary();
-      @include dx-tabs-horizontal-indicator-secondary(bottom);
-    }
-  }
-
-  &.dx-tab-indicator-position-top,
-  &.dx-tab-indicator-position-bottom {
-    .dx-tab {
-      &.dx-state-hover .dx-tab-content {
-        @include dx-tabs-indicator-background($tabs-tab-border-color-hover);
-      }
-
-      &.dx-state-active .dx-tab-content {
-        @include dx-tabs-indicator-background($tabs-tab-border-color-active);
-      }
-
-      &.dx-tab-selected {
-        .dx-tab-content {
-          @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic);
-        }
-
-        &.dx-state-focused .dx-tab-content {
-          @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused);
-        }
-
-        &.dx-state-hover .dx-tab-content {
-          @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover);
-        }
-
-        &.dx-state-active .dx-tab-content {
-          @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active);
-        }
-
-        &.dx-state-disabled .dx-tab-content {
-          @include dx-tabs-indicator-background($tabs-tab-border-color-disabled);
-        }
-      }
-    }
-  }
-
-  &.dx-tab-indicator-position-right {
-    .dx-tab {
-      @include dx-tabs-indicator-secondary();
-      @include dx-tabs-vertical-indicator-secondary(right);
-    }
-  }
-
-  &.dx-tab-indicator-position-left {
-    .dx-tab {
-      @include dx-tabs-indicator-secondary();
-      @include dx-tabs-vertical-indicator-secondary(left);
-    }
-  }
-
-  &.dx-tab-indicator-position-right,
-  &.dx-tab-indicator-position-left {
-    .dx-tab {
-      &.dx-state-hover {
-        @include dx-tabs-indicator-background($tabs-tab-border-color-hover);
-      }
-
-      &.dx-state-active {
-        @include dx-tabs-indicator-background($tabs-tab-border-color-active);
-      }
-    }
-
-    .dx-tab-selected {
-      @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic);
-
-      &.dx-state-focused {
-        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused);
-      }
-
-      &.dx-state-hover {
-        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover);
-      }
-
-      &.dx-state-active {
-        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active);
-      }
-
-      &.dx-state-disabled {
-        @include dx-tabs-indicator-background($tabs-tab-border-color-disabled);
-      }
-    }
-  }
-}
+@use "sass:color";
+@use "../../../../colors" as *;
+@use "../../../../sizes" as *;
+@use "../../../../button/colors" as *;
+@use "../../../../button/mixins" as *;
+@use "../../../../../base/icon_fonts" as *;
+@use "../../../../../base/tabs";
+@use "../../../variables/colors" as *;
+@use "../../../variables/sizes" as *;
+@use "../../../mixins" as *;
+
+// adduse
+@use "../../../../scrollable";
+@use "../../../../badge";
+
+
+.dx-tabs-styling-mode-secondary {
+  .dx-tab {
+    border-radius: $fluent-tab-item-border-radius-secondary;
+  }
+
+  &.dx-tab-indicator-position-top {
+    .dx-tab .dx-tab-content {
+      @include dx-tabs-indicator-secondary();
+      @include dx-tabs-horizontal-indicator-secondary(top);
+    }
+  }
+
+  &.dx-tab-indicator-position-bottom {
+    .dx-tab .dx-tab-content {
+      @include dx-tabs-indicator-secondary();
+      @include dx-tabs-horizontal-indicator-secondary(bottom);
+    }
+  }
+
+  &.dx-tab-indicator-position-top,
+  &.dx-tab-indicator-position-bottom {
+    .dx-tab {
+      &.dx-state-hover .dx-tab-content {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-hover);
+      }
+
+      &.dx-state-active .dx-tab-content {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-active);
+      }
+
+      &.dx-tab-selected {
+        .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic);
+        }
+
+        &.dx-state-focused .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused);
+        }
+
+        &.dx-state-hover .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover);
+        }
+
+        &.dx-state-active .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active);
+        }
+
+        &.dx-state-disabled .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-color-disabled);
+        }
+      }
+    }
+  }
+
+  &.dx-tab-indicator-position-right {
+    .dx-tab {
+      @include dx-tabs-indicator-secondary();
+      @include dx-tabs-vertical-indicator-secondary(right);
+    }
+  }
+
+  &.dx-tab-indicator-position-left {
+    .dx-tab {
+      @include dx-tabs-indicator-secondary();
+      @include dx-tabs-vertical-indicator-secondary(left);
+    }
+  }
+
+  &.dx-tab-indicator-position-right,
+  &.dx-tab-indicator-position-left {
+    .dx-tab {
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-hover);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-active);
+      }
+    }
+
+    .dx-tab-selected {
+      @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic);
+
+      &.dx-state-focused {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused);
+      }
+
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active);
+      }
+
+      &.dx-state-disabled {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-disabled);
+      }
+    }
+  }
+}

package/data/scss/widgets/fluent/tabs/layout/tabs/_index.scss

@@ -1,24 +1,24 @@
-@use "sass:color";
-@use "../../../colors" as *;
-@use "../../../sizes" as *;
-@use "../../../button/colors" as *;
-@use "../../../button/mixins" as *;
-@use "../../../../base/icon_fonts" as *;
-@use "../../../../base/tabs";
-@use "../../variables/colors" as *;
-@use "../../variables/sizes" as *;
-@use "../../mixins" as *;
-
-// adduse
-@use "../../../scrollable";
-@use "../../../badge";
-
-
-.dx-tabs {
-  padding: 0;
-  background-color: $tabs-tab-background;
-
-  .dx-scrollable {
-    flex-basis: 100%;
-  }
-}
+@use "sass:color";
+@use "../../../colors" as *;
+@use "../../../sizes" as *;
+@use "../../../button/colors" as *;
+@use "../../../button/mixins" as *;
+@use "../../../../base/icon_fonts" as *;
+@use "../../../../base/tabs";
+@use "../../variables/colors" as *;
+@use "../../variables/sizes" as *;
+@use "../../mixins" as *;
+
+// adduse
+@use "../../../scrollable";
+@use "../../../badge";
+
+
+.dx-tabs {
+  padding: 0;
+  background-color: $tabs-tab-background;
+
+  .dx-scrollable {
+    flex-basis: 100%;
+  }
+}

package/data/scss/widgets/fluent/tabs/mixins/_index.scss

@@ -1,86 +1,86 @@
-@use "../variables/sizes" as *;
-
-// adduse
-
-
-@mixin dx-tabs-indicator {
-  &::after {
-    content: "";
-    position: absolute;
-  }
-}
-
-@mixin dx-tabs-indicator-background($background-color) {
-  &::after {
-    background-color: $background-color;
-  }
-}
-
-@mixin dx-tabs-indicator-primary($position) {
-  @include dx-tabs-indicator();
-
-  &::after {
-    @if $position == top {
-      top: 0;
-      right: 0;
-      left: 0;
-      width: $fluent-indicator-length-primary;
-      height: $fluent-indicator-thickness-primary;
-    } @else if $position == right {
-      top: 0;
-      right: 0;
-      bottom: 0;
-      height: $fluent-indicator-length-primary;
-      width: $fluent-indicator-thickness-primary;
-    } @else if $position == bottom {
-      right: 0;
-      bottom: 0;
-      left: 0;
-      width: $fluent-indicator-length-primary;
-      height: $fluent-indicator-thickness-primary;
-    } @else if $position == left {
-      top: 0;
-      bottom: 0;
-      left: 0;
-      height: $fluent-indicator-length-primary;
-      width: $fluent-indicator-thickness-primary;
-    }
-  }
-}
-
-@mixin dx-tabs-indicator-secondary {
-  @include dx-tabs-indicator();
-
-  &::after {
-    border-radius: $fluent-indicator-border-radius-secondary;
-  }
-}
-
-@mixin dx-tabs-horizontal-indicator-secondary($position) {
-  &::after {
-    right: 0;
-    left: 0;
-    width: $fluent-indicator-length-secondary;
-    height: $fluent-indicator-thickness-secondary;
-
-    @if $position == top {
-      top: -$fluent-tabs-item-padding-top-bottom;
-    } @else if $position == bottom {
-      bottom: -$fluent-tabs-item-padding-top-bottom;
-    }
-  }
-}
-
-@mixin dx-tabs-vertical-indicator-secondary($position) {
-  &::after {
-    top: $fluent-tabs-item-padding-top-bottom;
-    width: $fluent-indicator-thickness-secondary;
-    height: calc($fluent-indicator-length-secondary - 2 * $fluent-tabs-item-padding-top-bottom);
-
-    @if $position == right {
-      right: 0;
-    } @else if $position == left {
-      left: 0;
-    }
-  }
-}
+@use "../variables/sizes" as *;
+
+// adduse
+
+
+@mixin dx-tabs-indicator {
+  &::after {
+    content: "";
+    position: absolute;
+  }
+}
+
+@mixin dx-tabs-indicator-background($background-color) {
+  &::after {
+    background-color: $background-color;
+  }
+}
+
+@mixin dx-tabs-indicator-primary($position) {
+  @include dx-tabs-indicator();
+
+  &::after {
+    @if $position == top {
+      top: 0;
+      right: 0;
+      left: 0;
+      width: $fluent-indicator-length-primary;
+      height: $fluent-indicator-thickness-primary;
+    } @else if $position == right {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      height: $fluent-indicator-length-primary;
+      width: $fluent-indicator-thickness-primary;
+    } @else if $position == bottom {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: $fluent-indicator-length-primary;
+      height: $fluent-indicator-thickness-primary;
+    } @else if $position == left {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      height: $fluent-indicator-length-primary;
+      width: $fluent-indicator-thickness-primary;
+    }
+  }
+}
+
+@mixin dx-tabs-indicator-secondary {
+  @include dx-tabs-indicator();
+
+  &::after {
+    border-radius: $fluent-indicator-border-radius-secondary;
+  }
+}
+
+@mixin dx-tabs-horizontal-indicator-secondary($position) {
+  &::after {
+    right: 0;
+    left: 0;
+    width: $fluent-indicator-length-secondary;
+    height: $fluent-indicator-thickness-secondary;
+
+    @if $position == top {
+      top: -$fluent-tabs-item-padding-top-bottom;
+    } @else if $position == bottom {
+      bottom: -$fluent-tabs-item-padding-top-bottom;
+    }
+  }
+}
+
+@mixin dx-tabs-vertical-indicator-secondary($position) {
+  &::after {
+    top: $fluent-tabs-item-padding-top-bottom;
+    width: $fluent-indicator-thickness-secondary;
+    height: calc($fluent-indicator-length-secondary - 2 * $fluent-tabs-item-padding-top-bottom);
+
+    @if $position == right {
+      right: 0;
+    } @else if $position == left {
+      left: 0;
+    }
+  }
+}

package/data/scss/widgets/fluent/tabs/variables/_colors.scss

@@ -11,33 +11,33 @@ $tabs-hovered-tab-bg-color: getCustomVar(("$tabs-hovered-tab-bg-color")) !defaul
 $tabs-focused-tab-bg-color: getCustomVar(("$tabs-focused-tab-bg-color")) !default;
 $tabs-active-tab-bg-color: getCustomVar(("$tabs-active-tab-bg-color")) !default;
 
-@use "sass:color";
-@use "../../colors" as *;
-@use "../../button/colors" as *;
-
-// adduse
-$tabs-tab-color: $base-text-color !default;
-$tabs-tab-selected-color: $base-text-color !default;
-$tabs-tab-disabled-color: $base-foreground-disabled !default;
-$tabs-tab-border-color-selected-basic: $base-accent !default;
-$tabs-tab-border-color-selected-active: $base-accent-active !default;
-$tabs-tab-border-color-selected-hover: $base-accent-hover !default;
-$tabs-tab-border-color-selected-focused: $base-accent !default;
-$tabs-tab-border-color-active: $base-border-color-focused !default;
-$tabs-tab-border-color-hover: $base-border-color-hover !default;
-$tabs-tab-border-color-disabled: $base-foreground-disabled !default;
-$tabs-tab-background: transparent !default;
-$tabs-tab-icon-color: $tabs-tab-color !default;
-$tabs-tab-icon-selected-color: $base-accent !default;
-$tabs-tab-icon-disabled-color: $base-foreground-disabled !default;
-$tabs-tab-button-disabled-opacity: 0 !default;
-$tabs-hovered-tab-bg-color: transparent !default;
-$tabs-focused-tab-bg-color: $base-hover-bg !default;
-$tabs-tab-bg-color-hover-primary: $base-hover-bg !default;
-$tabs-tab-bg-color-focus-primary: $base-hover-bg !default;
-$tabs-tab-bg-color-active-primary: $base-selected-bg !default;
-$tabs-active-tab-bg-color: $base-element-bg !default;
-$tabs-nav-button-bg-color: transparent !default;
+@use "sass:color";
+@use "../../colors" as *;
+@use "../../button/colors" as *;
+
+// adduse
+$tabs-tab-color: $base-text-color !default;
+$tabs-tab-selected-color: $base-text-color !default;
+$tabs-tab-disabled-color: $base-foreground-disabled !default;
+$tabs-tab-border-color-selected-basic: $base-accent !default;
+$tabs-tab-border-color-selected-active: $base-accent-active !default;
+$tabs-tab-border-color-selected-hover: $base-accent-hover !default;
+$tabs-tab-border-color-selected-focused: $base-accent !default;
+$tabs-tab-border-color-active: $base-border-color-focused !default;
+$tabs-tab-border-color-hover: $base-border-color-hover !default;
+$tabs-tab-border-color-disabled: $base-foreground-disabled !default;
+$tabs-tab-background: transparent !default;
+$tabs-tab-icon-color: $tabs-tab-color !default;
+$tabs-tab-icon-selected-color: $base-accent !default;
+$tabs-tab-icon-disabled-color: $base-foreground-disabled !default;
+$tabs-tab-button-disabled-opacity: 0 !default;
+$tabs-hovered-tab-bg-color: transparent !default;
+$tabs-focused-tab-bg-color: $base-hover-bg !default;
+$tabs-tab-bg-color-hover-primary: $base-hover-bg !default;
+$tabs-tab-bg-color-focus-primary: $base-hover-bg !default;
+$tabs-tab-bg-color-active-primary: $base-selected-bg !default;
+$tabs-active-tab-bg-color: $base-element-bg !default;
+$tabs-nav-button-bg-color: transparent !default;
 $never-used: collector((
 "$tabs-tab-color": $tabs-tab-color,
 "$tabs-tab-selected-color": $tabs-tab-selected-color,

package/data/scss/widgets/fluent/tabs/variables/_sizes.scss

@@ -1,61 +1,61 @@
-@use "../../sizes" as *;
-
-// adduse
-
-
-$fluent-tabs-item-gap: 4px !default;
-$fluent-tabs-item-padding: null !default;
-$fluent-tabs-item-padding-top-bottom: null !default;
-$fluent-tabs-item-padding-right-left: null !default;
-$fluent-tab-height: null !default;
-
-$fluent-tab-font-weight-basic: 400 !default;
-$fluent-tab-font-weight-accent: 500 !default;
-$fluent-base-icon-margin: null !default;
-$fluent-tabs-icon-size: $fluent-base-icon-size !default;
-
-$fluent-tab-nav-button-icon-width: null !default;
-$fluent-tab-nav-button-icon-height: null !default;
-$fluent-tab-nav-button-icon-font-size: null !default;
-$fluent-tab-nav-button-content-padding: null !default;
-
-$fluent-tab-vertical-nav-button-content-padding: null !default;
-
-$fluent-indicator-thickness-primary: 2px !default;
-$fluent-indicator-thickness-secondary: 3px !default;
-
-$fluent-indicator-length-primary: 100% !default;
-$fluent-indicator-length-secondary: 100% !default;
-
-$fluent-tab-item-border-radius-secondary: 4px !default;
-$fluent-indicator-border-radius-secondary: 4px !default;
-
-$fluent-badge-min-size: null !default;
-
-@if $size == "default" {
-  $fluent-tabs-item-padding-top-bottom: 12px !default;
-  $fluent-tabs-item-padding-right-left: 10px !default;
-  $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default;
-  $fluent-tab-height: auto !default;
-  $fluent-base-icon-margin: 8px !default;
-  $fluent-tab-nav-button-icon-width: 20px !default;
-  $fluent-tab-nav-button-icon-height: 20px !default;
-  $fluent-tab-nav-button-icon-font-size: 20px !default;
-  $fluent-tab-nav-button-content-padding: 0 4px !default;
-  $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default;
-  $fluent-badge-min-size: 20px !default;
-}
-
-@else if $size == "compact" {
-  $fluent-tabs-item-padding-top-bottom: 8px !default;
-  $fluent-tabs-item-padding-right-left: 8px !default;
-  $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default;
-  $fluent-tab-height: auto !default;
-  $fluent-base-icon-margin: 8px !default;
-  $fluent-tab-nav-button-icon-width: 16px !default;
-  $fluent-tab-nav-button-icon-height: 16px !default;
-  $fluent-tab-nav-button-icon-font-size: 16px !default;
-  $fluent-tab-nav-button-content-padding: 0 4px !default;
-  $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default;
-  $fluent-badge-min-size: 16px !default;
-}
+@use "../../sizes" as *;
+
+// adduse
+
+
+$fluent-tabs-item-gap: 4px !default;
+$fluent-tabs-item-padding: null !default;
+$fluent-tabs-item-padding-top-bottom: null !default;
+$fluent-tabs-item-padding-right-left: null !default;
+$fluent-tab-height: null !default;
+
+$fluent-tab-font-weight-basic: 400 !default;
+$fluent-tab-font-weight-accent: 500 !default;
+$fluent-base-icon-margin: null !default;
+$fluent-tabs-icon-size: $fluent-base-icon-size !default;
+
+$fluent-tab-nav-button-icon-width: null !default;
+$fluent-tab-nav-button-icon-height: null !default;
+$fluent-tab-nav-button-icon-font-size: null !default;
+$fluent-tab-nav-button-content-padding: null !default;
+
+$fluent-tab-vertical-nav-button-content-padding: null !default;
+
+$fluent-indicator-thickness-primary: 2px !default;
+$fluent-indicator-thickness-secondary: 3px !default;
+
+$fluent-indicator-length-primary: 100% !default;
+$fluent-indicator-length-secondary: 100% !default;
+
+$fluent-tab-item-border-radius-secondary: 4px !default;
+$fluent-indicator-border-radius-secondary: 4px !default;
+
+$fluent-badge-min-size: null !default;
+
+@if $size == "default" {
+  $fluent-tabs-item-padding-top-bottom: 12px !default;
+  $fluent-tabs-item-padding-right-left: 10px !default;
+  $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default;
+  $fluent-tab-height: auto !default;
+  $fluent-base-icon-margin: 8px !default;
+  $fluent-tab-nav-button-icon-width: 20px !default;
+  $fluent-tab-nav-button-icon-height: 20px !default;
+  $fluent-tab-nav-button-icon-font-size: 20px !default;
+  $fluent-tab-nav-button-content-padding: 0 4px !default;
+  $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default;
+  $fluent-badge-min-size: 20px !default;
+}
+
+@else if $size == "compact" {
+  $fluent-tabs-item-padding-top-bottom: 8px !default;
+  $fluent-tabs-item-padding-right-left: 8px !default;
+  $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default;
+  $fluent-tab-height: auto !default;
+  $fluent-base-icon-margin: 8px !default;
+  $fluent-tab-nav-button-icon-width: 16px !default;
+  $fluent-tab-nav-button-icon-height: 16px !default;
+  $fluent-tab-nav-button-icon-font-size: 16px !default;
+  $fluent-tab-nav-button-content-padding: 0 4px !default;
+  $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default;
+  $fluent-badge-min-size: 16px !default;
+}