@syncfusion/ej2-fabric-dark-theme 33.2.15 → 34.1.29

package/styles/tab/tab.scss

@@ -0,0 +1,4 @@
+@use 'fabric-dark-definition' as *;
+@use 'icons/fabric-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/textarea/_all.scss

@@ -0,0 +1 @@
+@forward 'layout';

package/styles/textarea/_fabric-dark-definition.scss

@@ -0,0 +1,15 @@
+@use '../base/common/base-variables' as *;
+
+$textarea-VH-textarea-padding: 3px 12px 3px 12px !default;
+$textarea-outline-VH-textarea-padding: 3px 12px 3px 12px !default;
+$textarea-filled-VH-textarea-padding: 3px 12px 3px 12px !default;
+$textarea-VV-template-padding: 9px 10px 9px 10px !default;
+$textarea-outline-VV-template-padding: 9px 10px 9px 10px !default;
+$textarea-filled-VV-template-padding: 9px 10px 9px 10px !default;
+$textarea-HV-textarea-padding: 11px 5px 5px 5px !default;
+$textarea-HV-textarea-top: -6px !default;
+$textarea-outline-HV-textarea-padding: 11px 5px 5px 5px !default;
+$textarea-outline-HV-label-top: -7px !default;
+$textarea-filled-HV-textarea-padding: 11px 5px 5px 5px !default;
+$textarea-filled-HV-label-top: -5px !default;
+$textbox-icon-template-separator-color: $neutral-tertiary;

package/styles/textarea/_layout.scss

@@ -0,0 +1,266 @@
+@use 'variables' as *;
+
+.e-input-group.e-multi-line-input.e-auto-width {
+  width: auto;
+}
+
+.e-input-group.e-multi-line-input {
+  textarea.e-resize-x {
+    resize: horizontal;
+  }
+
+  textarea.e-resize-y {
+    resize: vertical;
+  }
+
+  textarea.e-resize-xy {
+    resize: both;
+  }
+
+  textarea.e-textarea.e-resize-none {
+    resize: none;
+  }
+}
+
+.e-float-input .e-clear-icon:hover,
+.e-float-input.e-control-wrapper .e-clear-icon:hover,
+.e-input-group .e-clear-icon:hover,
+.e-input-group.e-control-wrapper .e-clear-icon:hover {
+  background: none;
+  border: none;
+}
+
+.e-float-input:not(.e-disabled) .e-clear-icon:hover,
+.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
+.e-input-group:not(.e-disabled) .e-clear-icon:hover,
+.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
+  background: none;
+}
+
+div.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-horizontal.e-prepend-wrapper.e-append-wrapper,
+div.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-horizontal.e-prepend-wrapper,
+div.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-horizontal.e-append-wrapper,
+span.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-horizontal.e-prepend-wrapper.e-append-wrapper,
+span.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-horizontal.e-prepend-wrapper,
+span.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-horizontal.e-append-wrapper {
+  & .e-prepend-template,
+  & .e-append-template {
+    display: flex;
+    align-items: start;
+    flex: none;
+    flex-flow: row wrap;
+
+    & .e-input-separator {
+      padding: 15px 0 0;
+    }
+  }
+
+  @if ($skin-name == 'FluentUI') {
+    &.e-outline textarea.e-textarea {
+      padding: 4px 1px 1px;
+    }
+
+    &.e-filled textarea.e-textarea {
+      padding: 4px 1px;
+    }
+  }
+}
+
+div.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-horizontal.e-prepend-wrapper.e-append-wrapper,
+div.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-horizontal.e-prepend-wrapper,
+div.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-horizontal.e-append-wrapper,
+span.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-horizontal.e-prepend-wrapper.e-append-wrapper,
+span.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-horizontal.e-prepend-wrapper,
+span.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-horizontal.e-append-wrapper {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  flex-direction: column !important; /* stylelint-disable-line declaration-no-important */
+
+  & .e-clear-icon {
+    flex-direction: row !important; /* stylelint-disable-line declaration-no-important */
+    margin: 5px;
+    justify-content: right;
+  }
+
+  &.e-rtl .e-clear-icon {
+    justify-content: left;
+  }
+
+  & .e-prepend-template .e-input-separator,
+  & .e-append-template .e-input-separator {
+    padding: 3px 0 0;
+  }
+
+  & label.e-label-top,
+  &.e-valid-input label.e-label-top {
+    margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  & textarea.e-textarea {
+    padding: $textarea-VH-textarea-padding;
+  }
+
+  &.e-outline textarea.e-textarea {
+    padding: $textarea-outline-VH-textarea-padding;
+  }
+
+  &.e-filled textarea.e-textarea {
+    padding: $textarea-filled-VH-textarea-padding;
+  }
+
+  & .e-prepend-template,
+  & .e-append-template {
+    padding: $textarea-VV-template-padding;
+  }
+}
+
+div.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-prepend-wrapper.e-append-wrapper,
+div.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-prepend-wrapper,
+div.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-append-wrapper,
+span.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-prepend-wrapper.e-append-wrapper,
+span.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-prepend-wrapper,
+span.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-append-wrapper {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  flex-direction: column !important; /* stylelint-disable-line declaration-no-important */
+
+  & .e-clear-icon {
+    flex-direction: row !important; /* stylelint-disable-line declaration-no-important */
+    margin: 5px;
+    justify-content: right;
+  }
+
+  &.e-rtl .e-clear-icon {
+    justify-content: left;
+  }
+
+  & .e-prepend-template,
+  & .e-append-template {
+    display: flex;
+    align-items: start;
+    flex-flow: column wrap;
+
+    & .e-icons {
+      margin: 3px 0;
+    }
+
+    & .e-input-separator {
+      border: 1px solid $textbox-icon-template-separator-color;
+      border-width: 1px 0 0;
+      margin: 5px;
+      width: 100%;
+      margin-inline: 0;
+    }
+  }
+
+  & label.e-label-top,
+  &.e-valid-input label.e-label-top {
+    margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  & textarea.e-textarea {
+    padding: $textarea-VH-textarea-padding;
+  }
+
+  &.e-outline textarea.e-textarea {
+    padding: $textarea-outline-VH-textarea-padding;
+  }
+
+  &.e-filled textarea.e-textarea {
+    padding: $textarea-filled-VH-textarea-padding;
+  }
+
+  & .e-prepend-template,
+  & .e-append-template {
+    padding: $textarea-VV-template-padding;
+  }
+
+  &.e-outline .e-prepend-template,
+  &.e-outline .e-append-template {
+    padding: $textarea-outline-VV-template-padding;
+  }
+
+  &.e-filled .e-prepend-template,
+  &.e-filled .e-append-template {
+    padding: $textarea-filled-VV-template-padding;
+  }
+}
+
+div.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-vertical.e-prepend-wrapper.e-append-wrapper,
+div.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-vertical.e-prepend-wrapper,
+div.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-vertical.e-append-wrapper,
+span.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-vertical.e-prepend-wrapper.e-append-wrapper,
+span.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-vertical.e-prepend-wrapper,
+span.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-vertical.e-append-wrapper {
+  & .e-prepend-template,
+  & .e-append-template {
+    display: flex;
+    align-items: center;
+    flex: none;
+    flex-flow: column wrap;
+
+    & .e-icons {
+      margin: 3px 0;
+    }
+
+    & .e-input-separator {
+      border: 1px solid $textbox-icon-template-separator-color;
+      border-width: 1px 0 0;
+      margin: 5px;
+      width: 100%;
+      margin-inline: 0;
+    }
+  }
+
+  & textarea.e-textarea,
+  & textarea.e-textarea:focus,
+  &.e-input-focus textarea.e-textarea {
+    padding: $textarea-HV-textarea-padding;
+  }
+
+  & label.e-float-text.e-label-bottom,
+  &.e-rtl label.e-float-text.e-label-bottom {
+    top: $textarea-HV-textarea-top;
+  }
+
+  &.e-outline {
+    & textarea.e-textarea,
+    & textarea.e-textarea:focus,
+    &.e-input-focus textarea.e-textarea {
+      padding: $textarea-outline-HV-textarea-padding;
+    }
+
+    & label.e-float-text.e-label-bottom,
+    &.e-rtl label.e-float-text.e-label-bottom {
+      top: $textarea-outline-HV-label-top;
+    }
+  }
+
+  &.e-filled {
+    & textarea.e-textarea,
+    & textarea.e-textarea:focus,
+    &.e-input-focus textarea.e-textarea {
+      padding: $textarea-filled-HV-textarea-padding;
+    }
+
+    & label.e-float-text.e-label-bottom,
+    &.e-rtl label.e-float-text.e-label-bottom {
+      top: $textarea-filled-HV-label-top;
+    }
+  }
+}
+
+.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-prepend-wrapper.e-rtl .e-clear-icon,
+.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-append-wrapper.e-rtl .e-clear-icon,
+.e-input-group.e-multi-line-input.e-adornment-orientation-vertical.e-prepend-wrapper.e-rtl .e-clear-icon,
+.e-input-group.e-multi-line-input.e-adornment-orientation-vertical.e-append-wrapper.e-rtl .e-clear-icon {
+  margin-left: 10px;
+  float: left;
+}
+
+.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-prepend-wrapper.e-outline .e-clear-icon,
+.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-append-wrapper.e-outline .e-clear-icon,
+.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-prepend-wrapper.e-outline .e-clear-icon,
+.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-append-wrapper.e-outline .e-clear-icon {
+  top: -30px;
+}

package/styles/textarea/_theme.scss

@@ -0,0 +1 @@
+/* stylelint-disable-line no-empty-source */

package/styles/textarea/_variables.scss

@@ -0,0 +1,2 @@
+@forward '../base/common/_base-variables.scss';
+@forward './_fabric-dark-definition';

package/styles/textarea/index.css

@@ -0,0 +1,4 @@
+@import '../base/base.css';
+@import '../input/input.css';
+@import '../textbox/textbox.css';
+@import '../textarea/textarea.css';

package/styles/textarea/index.scss

@@ -0,0 +1,4 @@
+@use '../base/base' as *;
+@use '../input/input' as *;
+@use '../textbox/textbox' as *;
+@use '../textarea/textarea' as *;