@syncfusion/ej2-angular-splitbuttons 23.1.43-ngcc → 23.1.43

package/styles/button-group/_layout.scss

@@ -0,0 +1,294 @@
+@include export-module('button-group-layout') {
+/* stylelint-disable */
+  #{if(&, '&', '*')}.e-btn-group,
+  #{if(&, '&', '*')}.e-css.e-btn-group {
+    display: -webkit-inline-flex;
+    display: inline-flex;
+    border-radius: $btn-grp-wrapper-border;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    position: relative;
+    @if $skin-name == 'Material3' {
+      border-radius: $btn-border-radius;
+      box-shadow: $btn-active-box-shadow;
+    }
+
+    input:focus+label.e-btn,
+    .e-btn:focus,
+    .e-btn:hover {
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+        z-index: 2;
+      }
+    }
+
+    input + label.e-btn {
+      margin-bottom: 0;
+    }
+
+    input {
+      -moz-appearance: none;
+      height: 1px;
+      margin: 0 0 0 $btn-grp-margin;
+      opacity: 0;
+      position: absolute;
+      width: 1px;
+    }
+
+    // Disabled
+    input:disabled+label.e-btn,
+    :disabled {
+      cursor: default;
+      pointer-events: none;
+    }
+
+    .e-btn-icon {
+      font-size: $btn-grp-icon-font-size;
+    }
+
+    // Sharp corner for sides individual Button and SplitButton
+    &:not(.e-rtl):not(.e-vertical) {
+      .e-btn {
+        @if $skin-name != 'Material3' {
+          margin-left: $btn-grp-margin-left;
+        }
+
+        &:not(:first-of-type):not(:last-of-type) {
+          border-radius: 0;
+        }
+
+        &:first-of-type {
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+        }
+
+        &:last-of-type {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
+
+        &:last-of-type:not(:last-child) {
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+        }
+      }
+
+      .e-split-btn-wrapper {
+        +.e-btn {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
+
+        &:not(:first-child):not(:last-child) {
+          .e-btn:last-child {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+          }
+
+          .e-btn:first-child {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+          }
+        }
+
+        &:first-child {
+          .e-btn:last-child {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+          }
+        }
+
+        &:last-child {
+          .e-btn:first-child {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+          }
+        }
+      }
+    }
+
+    // RTL with Sharp corner combinations
+    &.e-rtl {
+      .e-btn {
+        margin-left: $btn-grp-margin-left;
+
+        &:not(:first-of-type):not(:last-of-type) {
+          border-radius: 0;
+        }
+
+        &:first-of-type {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
+
+        &:last-of-type {
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+        }
+
+        &:last-of-type:not(:last-child) {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
+      }
+
+      .e-split-btn-wrapper {
+        +.e-btn {
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+        }
+
+        &:not(:first-child):not(:last-child) {
+          .e-btn:last-child {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+          }
+
+          .e-btn:first-child {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+          }
+        }
+
+        &:first-child {
+          .e-btn:last-child {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+          }
+        }
+
+        &:last-child {
+          .e-btn:first-child {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+          }
+        }
+      }
+    }
+
+    // Vertical Orientation
+    &.e-vertical {
+      -webkit-flex-direction: column;
+      flex-direction: column;
+
+      input {
+        margin: $btn-grp-margin 0 0;
+      }
+
+      // Round corner
+      .e-btn {
+        &:not(.e-outline) {
+          margin-top: $btn-grp-margin;
+        }
+
+        &:not(:first-of-type):not(:last-of-type) {
+          border-radius: 0;
+        }
+
+        &:first-of-type {
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+          border-top-left-radius: 2px;
+          border-top-right-radius: 2px;
+        }
+
+        &:last-of-type {
+          border-bottom-left-radius: 2px;
+          border-bottom-right-radius: 2px;
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+        }
+      }
+    }
+
+    // Rounded Corner
+    &.e-round-corner:not(.e-vertical) {
+      &:not(.e-rtl) {
+        border-radius: $btn-grp-round-radius;
+
+        .e-btn {
+          &:first-of-type {
+            border-bottom-left-radius: $btn-grp-round-radius;
+            border-top-left-radius: $btn-grp-round-radius;
+          }
+
+          &:last-of-type {
+            border-bottom-right-radius: $btn-grp-round-radius;
+            border-top-right-radius: $btn-grp-round-radius;
+          }
+
+          &:last-of-type:not(:last-child) {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+          }
+        }
+
+        .e-split-btn-wrapper {
+          +.e-btn {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+          }
+
+          &:first-child {
+            .e-btn:first-child {
+              border-bottom-left-radius: $btn-grp-round-radius;
+              border-top-left-radius: $btn-grp-round-radius;
+            }
+
+            .e-btn:last-child {
+              border-bottom-right-radius: 0;
+              border-top-right-radius: 0;
+            }
+          }
+
+          &:last-child {
+             .e-btn:first-child {
+              border-bottom-left-radius: 0;
+              border-top-left-radius: 0;
+            }
+
+            .e-btn:last-child {
+              border-bottom-right-radius: $btn-grp-round-radius;
+              border-top-right-radius: $btn-grp-round-radius;
+            }
+          }
+        }
+      }
+
+      // Rounded corner with RTL
+      &.e-rtl {
+        border-radius: $btn-grp-round-radius;
+
+        .e-btn {
+          &:first-of-type {
+            border-bottom-right-radius: $btn-grp-round-radius;
+            border-top-right-radius: $btn-grp-round-radius;
+          }
+
+          &:last-of-type {
+            border-bottom-left-radius: $btn-grp-round-radius;
+            border-top-left-radius: $btn-grp-round-radius;
+          }
+
+          &:last-of-type:not(:last-child) {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+          }
+
+          &:first-of-type:not(:first-child) {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-btn-group,
+  .e-bigger.e-btn-group,
+  .e-bigger .e-css.e-btn-group,
+  .e-bigger.e-css.e-btn-group  {
+    .e-btn-icon {
+      font-size: $btn-grp-icon-font-size-bigger;
+    }
+  }
+}

package/styles/button-group/_material-dark-definition.scss

@@ -0,0 +1,33 @@
+//default
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: 0 !default;
+$btn-grp-wrapper-border: 2px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 14px !default;
+$btn-grp-icon-font-size-bigger: 16px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: inherit !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: inherit !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: inherit !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: inherit !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: inherit !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color: inherit !default;
+$btn-grp-outline-focus-danger-color: inherit !default;
+
+//enddefault

package/styles/button-group/_material-definition.scss

@@ -0,0 +1,30 @@
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: 0 !default;
+$btn-grp-wrapper-border: 2px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 14px !default;
+$btn-grp-icon-font-size-bigger: 16px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: inherit !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: inherit !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: inherit !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: inherit !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: inherit !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color: inherit !default;
+$btn-grp-outline-focus-danger-color: inherit !default;

package/styles/button-group/_material3-dark-definition.scss

@@ -0,0 +1 @@
+@import './material3-definition.scss';

package/styles/button-group/_material3-definition.scss

@@ -0,0 +1,31 @@
+//layout variables
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: -1px !default;
+$btn-grp-wrapper-border: 4px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 16px !default;
+$btn-grp-icon-font-size-bigger: 20px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $secondary-border-color !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: rgba($primary) !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
+$btn-grp-outline-focus-danger-color: inherit !default;

package/styles/button-group/_tailwind-dark-definition.scss

@@ -0,0 +1 @@
+@import './tailwind-definition.scss';

package/styles/button-group/_tailwind-definition.scss

@@ -0,0 +1,31 @@
+//layout variables
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: -1px !default;
+$btn-grp-wrapper-border: 4px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: $text-lg !default;
+$btn-grp-icon-font-size-bigger: 22px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $secondary-border-color !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: $primary !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
+$btn-grp-outline-focus-danger-color: inherit !default;