Lookup: spin alignment should be consistent with other editors (#25522)

DevExpress · Sep 5, 2023 · 7ad1a0b · 7ad1a0b
1 parent a9c9448
commit 7ad1a0b
Show file tree

Hide file tree

Showing 170 changed files with 107 additions and 225 deletions.
diff --git a/...devextreme/scss/widgets/base/_lookup.scss → ...reme/scss/widgets/base/lookup/_index.scss b/...devextreme/scss/widgets/base/_lookup.scss → ...reme/scss/widgets/base/lookup/_index.scss
@@ -1,4 +1,5 @@
 @use "./mixins" as *;
+@use "../mixins" as *;
 
 // adduse
 

diff --git a/packages/devextreme/scss/widgets/base/lookup/_mixins.scss b/packages/devextreme/scss/widgets/base/lookup/_mixins.scss
@@ -0,0 +1,24 @@
+@use "../icons" as *;
+
+@mixin dx-lookup-arrow(
+  $arrow-icon,
+  $arrow-icon-glyph-rtl,
+  $arrow-width,
+  $arrow-color,
+  $arrow-icon-size,
+) {
+  .dx-lookup-arrow {
+    @include dx-icon($arrow-icon);
+
+    .dx-rtl & {
+      &::before {
+        content: $arrow-icon-glyph-rtl;
+      }
+    }
+
+    width: $arrow-width;
+    color: $arrow-color;
+
+    @include dx-icon-font-centered-sizing($arrow-icon-size);
+  }
+}
diff --git a/packages/devextreme/scss/widgets/base/textEditor/_mixins.scss b/packages/devextreme/scss/widgets/base/textEditor/_mixins.scss
@@ -508,7 +508,10 @@
 ) {
   .dx-texteditor-buttons-container {
     > .dx-button {
-      margin: 1px $generic-texteditor-custom-button-margin;
+      margin-top: 1px;
+      margin-bottom: 1px;
+      margin-inline-start: $generic-texteditor-custom-button-margin;
+      margin-inline-end: $generic-texteditor-custom-button-margin;
 
       > .dx-button-content {
         padding-top: $generic-texteditor-button-top-padding;
@@ -529,50 +532,15 @@
       &:first-child {
         > .dx-button {
           &:last-child {
-            margin-right: 0;
+            margin-inline-end: 0;
           }
         }
       }
 
       &:last-child {
         > .dx-button {
           &:first-child {
-            margin-left: 0;
-          }
-        }
-      }
-
-      @at-root #{selector-append(".dx-rtl", &)} {
-        &:first-child {
-          > .dx-button {
-            &:first-child {
-              margin-left: $generic-texteditor-custom-button-margin;
-              margin-right: $generic-texteditor-custom-button-margin;
-            }
-
-            &:last-child {
-              margin-left: 0;
-              margin-right: $generic-texteditor-custom-button-margin;
-            }
-
-            &:first-child:last-child {
-              margin-left: 0;
-              margin-right: $generic-texteditor-custom-button-margin;
-            }
-          }
-        }
-
-        &:last-child {
-          > .dx-button {
-            &:first-child {
-              margin-left: $generic-texteditor-custom-button-margin;
-              margin-right: 0;
-            }
-
-            &:last-child {
-              margin-left: $generic-texteditor-custom-button-margin;
-              margin-right: $generic-texteditor-custom-button-margin;
-            }
+            margin-inline-start: 0;
           }
         }
       }
@@ -591,25 +559,6 @@
             margin-right: 0;
           }
         }
-
-        @at-root #{selector-append(".dx-rtl", &)} {
-          > .dx-button {
-            &:first-child {
-              margin-left: $generic-texteditor-custom-button-margin;
-              margin-right: 0;
-            }
-
-            &:last-child {
-              margin-left: 0;
-              margin-right: $generic-texteditor-custom-button-margin;
-            }
-
-            &:first-child:last-child {
-              margin-left: 0;
-              margin-right: 0;
-            }
-          }
-        }
       }
     }
   }
@@ -626,19 +575,19 @@
     .dx-texteditor-buttons-container {
       > .dx-button,
       > .dx-clear-button-area {
-        margin-left: $material-editor-custom-button-margin;
-        margin-right: $material-editor-custom-button-margin;
+        margin-inline-start: $material-editor-custom-button-margin;
+        margin-inline-end: $material-editor-custom-button-margin;
       }
 
       &:first-child {
         > .dx-button,
         > .dx-clear-button-area {
           &:first-child {
-            margin-left: $material-editor-custom-button-margin * 2;
+            margin-inline-start: $material-editor-custom-button-margin * 2;
           }
 
           &:last-child {
-            margin-right: 0;
+            margin-inline-end: 0;
           }
         }
       }
@@ -647,71 +596,22 @@
         > .dx-button,
         > .dx-clear-button-area {
           &:first-child {
-            margin-left: 0;
+            margin-inline-start: 0;
           }
 
           &:last-child {
-            margin-right: $material-editor-custom-button-margin * 2;
+            margin-inline-end: $material-editor-custom-button-margin * 2;
           }
         }
 
         > .dx-dropdowneditor-button:last-child,
         > .dx-numberbox-spin-container:last-child {
-          margin-right: $material-filled-texteditor-spin-button-horizontal-padding;
+          margin-inline-end: $material-filled-texteditor-spin-button-horizontal-padding;
         }
 
         > .dx-clear-button-area:last-child,
         > .dx-clear-button-area + div:empty:last-child {
-          margin-right: $material-filled-texteditor-input-button-horizontal-padding;
-        }
-      }
-
-      @at-root #{selector-append(".dx-rtl", &)} {
-        &:first-child {
-          > .dx-button,
-          > .dx-clear-button-area {
-            &:first-child {
-              margin-left: $material-editor-custom-button-margin;
-              margin-right: $material-editor-custom-button-margin * 2;
-            }
-
-            &:last-child {
-              margin-left: 0;
-              margin-right: $material-editor-custom-button-margin;
-            }
-
-            &:first-child:last-child {
-              margin-left: 0;
-              margin-right: $material-editor-custom-button-margin * 2;
-            }
-          }
-        }
-
-        &:last-child {
-          > .dx-button,
-          > .dx-clear-button-area {
-            &:first-child {
-              margin-left: $material-editor-custom-button-margin;
-              margin-right: 0;
-            }
-
-            &:last-child {
-              margin-left: $material-editor-custom-button-margin * 2;
-              margin-right: $material-editor-custom-button-margin;
-            }
-          }
-
-          > .dx-dropdowneditor-button:last-child,
-          > .dx-numberbox-spin-container:last-child {
-            margin-left: $material-filled-texteditor-spin-button-horizontal-padding;
-            margin-right: 0;
-          }
-
-          > .dx-clear-button-area:last-child,
-          > .dx-clear-button-area + div:empty:last-child {
-            margin-left: $material-filled-texteditor-input-button-horizontal-padding;
-            margin-right: 0;
-          }
+          margin-inline-end: $material-filled-texteditor-input-button-horizontal-padding;
         }
       }
     }
@@ -724,7 +624,10 @@
         .dx-texteditor-buttons-container {
           > .dx-button.dx-button-mode-text {
             height: $material-underlined-editor-button-height;
-            margin: 1px $material-editor-custom-button-margin 3px;
+            margin-top: 1px;
+            margin-bottom: 3px;
+            margin-inline-end: $material-editor-custom-button-margin;
+            margin-inline-start: $material-editor-custom-button-margin;
 
             .dx-button-content {
               display: flex;
@@ -755,40 +658,15 @@
           &:first-child {
             > .dx-button {
               &:first-child {
-                margin-left: 0;
+                margin-inline-start: 0;
               }
             }
           }
 
           &:last-child {
             > .dx-button {
               &:last-child {
-                margin-right: 0;
-              }
-            }
-          }
-
-          @at-root #{selector-append(".dx-rtl", &)} {
-            &:first-child {
-              > .dx-button {
-                &:first-child {
-                  margin-left: $material-editor-custom-button-margin;
-                  margin-right: 0;
-                }
-              }
-            }
-
-            &:last-child {
-              > .dx-button {
-                &:first-child {
-                  margin-left: $material-editor-custom-button-margin;
-                  margin-right: $material-editor-custom-button-margin;
-                }
-
-                &:last-child {
-                  margin-left: 0;
-                  margin-right: $material-editor-custom-button-margin;
-                }
+                margin-inline-end: 0;
               }
             }
           }
@@ -800,7 +678,10 @@
       .dx-texteditor-buttons-container {
         > .dx-button.dx-button-mode-text {
           height: $material-underlined-editor-button-height;
-          margin: 1px $material-editor-custom-button-margin 3px;
+          margin-top: 1px;
+          margin-bottom: 3px;
+          margin-inline-end: $material-editor-custom-button-margin;
+          margin-inline-start: $material-editor-custom-button-margin;
 
           .dx-button-content {
             display: flex;
@@ -831,40 +712,15 @@
         &:first-child {
           > .dx-button {
             &:first-child {
-              margin-left: 0;
+              margin-inline-start: 0;
             }
           }
         }
 
         &:last-child {
           > .dx-button {
             &:last-child {
-              margin-right: 0;
-            }
-          }
-        }
-
-        @at-root #{selector-append(".dx-rtl", &)} {
-          &:first-child {
-            > .dx-button {
-              &:first-child {
-                margin-left: $material-editor-custom-button-margin;
-                margin-right: 0;
-              }
-            }
-          }
-
-          &:last-child {
-            > .dx-button {
-              &:first-child {
-                margin-left: $material-editor-custom-button-margin;
-                margin-right: $material-editor-custom-button-margin;
-              }
-
-              &:last-child {
-                margin-left: 0;
-                margin-right: $material-editor-custom-button-margin;
-              }
+              margin-inline-end: 0;
             }
           }
         }

diff --git a/packages/devextreme/scss/widgets/fluent/_colors.scss b/packages/devextreme/scss/widgets/fluent/_colors.scss
@@ -17,7 +17,7 @@ $fluent-color-theme-modificator: null !default;
 * $name 10. Font family
 * $type text
 */
-$base-font-family: "Roboto", "RobotoFallback", "Noto Kufi Arabic", "Helvetica",  "Arial", sans-serif !default;
+$base-font-family: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif !default; // stylelint-disable-line value-keyword-case
 
 /**
 * $name 20. Text color

diff --git a/packages/devextreme/scss/widgets/fluent/_sizes.scss b/packages/devextreme/scss/widgets/fluent/_sizes.scss
@@ -45,7 +45,7 @@ $fluent-button-icon-margin: null !default;
 
   // Base sizes
   $fluent-base-inline-widget-height: 32px !default; // 48px !default;
-  $fluent-base-inline-block-height: 19px !default; // 19px !default;
+  $fluent-base-inline-block-height: 20px !default; // 19px !default;
   $fluent-base-icon-size: 20px !default; // 24px !default
   $fluent-base-inline-horizontal-padding: 10px !default;
   $fluent-base-border-radius: 4px !default;
@@ -65,7 +65,7 @@ $fluent-button-icon-margin: null !default;
   // Base sizes
   $fluent-base-inline-widget-height: 32px !default;
   $fluent-base-inline-block-height: 15px !default;
-  $fluent-base-icon-size: 18px !default;
+  $fluent-base-icon-size: 16px !default; // 18px !default;
   $fluent-base-inline-horizontal-padding: 8px !default;
   $fluent-base-border-radius: 2px !default;
   $fluent-base-dropdown-widgets-shadow: 0 2px 4px $base-dropdown-shadow-color !default;

diff --git a/packages/devextreme/scss/widgets/fluent/button/_sizes.scss b/packages/devextreme/scss/widgets/fluent/button/_sizes.scss
@@ -11,25 +11,25 @@ $fluent-button-min-width: null !default;
 $fluent-button-content-line-height: 0 !default;
 
 $fluent-button-text-line-height: normal !default;
-$fluent-button-text-transform: uppercase !default;
-$fluent-button-text-font-weight: 500 !default;
-$fluent-button-text-letter-spacing: 0.04em !default;
+$fluent-button-text-transform: none !default; // uppercase !default;
+$fluent-button-text-font-weight: 600 !default;
+$fluent-button-text-letter-spacing: normal !default; // 0.04em !default;
 
 $fluent-button-box-shadow-size: 0 1px 3px !default;
 $fluent-button-active-box-shadow-size: 0 4px 6px !default;
 
 @if $size == "default" {
-  $fluent-button-horizontal-padding: 16px !default;
+  $fluent-button-horizontal-padding: 12px !default; // 16px !default;
   $fluent-button-vertical-padding: 6px !default;
-  $fluent-button-icon-padding: 8px !default;
-  $fluent-button-icon-text-padding: 12px;
+  $fluent-button-icon-padding: 6px; // 8px !default;
+  $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; // 12px !default
   $fluent-button-min-width: 64px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-button-horizontal-padding: 12px !default;
-  $fluent-button-vertical-padding: 5px !default;
-  $fluent-button-icon-padding: 5px !default;
-  $fluent-button-icon-text-padding: 8px;
+  $fluent-button-horizontal-padding: 8px !default;
+  $fluent-button-vertical-padding: 4px !default; // 5px !default;
+  $fluent-button-icon-padding: 4px !default; // 5px !default;
+  $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default;
   $fluent-button-min-width: 48px !default;
 }