Skip to content

Commit

Permalink
Editors: height standardization in material default & compact themes (#…
Browse files Browse the repository at this point in the history
…25445)

Co-authored-by: Alexander Bulychev <[email protected]>
  • Loading branch information
EugeniyKiyashko and iBat authored Sep 3, 2023
1 parent eb807c6 commit a54cedc
Show file tree
Hide file tree
Showing 661 changed files with 1,249 additions and 3,349 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/paths.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ on:
branches: [23_2]

env:
MAX_LENGTH: 150
MAX_LENGTH: 170
NX_SKIP_NX_CACHE: ${{ (github.event_name != 'pull_request' || contains( github.event.pull_request.labels.*.name, 'skip-cache')) && 'true' || 'false' }}

jobs:
Expand Down
12 changes: 6 additions & 6 deletions packages/devextreme/js/ui/date_range_box/ui.date_range_box.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ import { addNamespace } from '../../events/utils/index';
import eventsEngine from '../../events/core/events_engine';

const DATERANGEBOX_CLASS = 'dx-daterangebox';
const DATERANGEBOX_WITH_LABEL_CLASS = 'dx-daterangebox-with-label';
const DATERANGEBOX_WITH_FLOATING_LABEL_CLASS = 'dx-daterangebox-with-floating-label';
const TEXTEDITOR_WITH_LABEL_CLASS = 'dx-texteditor-with-label';
const TEXTEDITOR_WITH_FLOATING_LABEL_CLASS = 'dx-texteditor-with-floating-label';
const START_DATEBOX_CLASS = 'dx-start-datebox';
const END_DATEBOX_CLASS = 'dx-end-datebox';
const DATERANGEBOX_SEPARATOR_CLASS = 'dx-daterangebox-separator';
Expand Down Expand Up @@ -295,14 +295,14 @@ class DateRangeBox extends Editor {
const isLabelVisible = (!!startDateLabel || !!endDateLabel) && labelMode !== 'hidden';

this.$element()
.removeClass(DATERANGEBOX_WITH_FLOATING_LABEL_CLASS)
.removeClass(DATERANGEBOX_WITH_LABEL_CLASS);
.removeClass(TEXTEDITOR_WITH_FLOATING_LABEL_CLASS)
.removeClass(TEXTEDITOR_WITH_LABEL_CLASS);

if(isLabelVisible) {
this.$element()
.addClass(labelMode === 'floating'
? DATERANGEBOX_WITH_FLOATING_LABEL_CLASS
: DATERANGEBOX_WITH_LABEL_CLASS);
? TEXTEDITOR_WITH_FLOATING_LABEL_CLASS
: TEXTEDITOR_WITH_LABEL_CLASS);
}
}

Expand Down
11 changes: 2 additions & 9 deletions packages/devextreme/scss/widgets/base/_checkBox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,18 +36,11 @@
}

.dx-checkbox-text {
text-align: left;
text-align: start;
white-space: pre-wrap;
word-wrap: break-word;
line-height: normal;
padding-left: 5px;

@at-root #{selector-append(".dx-rtl", &)},
.dx-rtl & {
margin: 0;
padding: 0 5px 0 0;
text-align: right;
}
padding-inline-start: 5px;
}

.dx-state-disabled {
Expand Down
46 changes: 5 additions & 41 deletions packages/devextreme/scss/widgets/base/_colorBox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ $colorbox-input-left-padding: 40px;
width: 15px;
height: 15px;
margin-top: -7.5px;
left: 14px;
inset-inline-start: 14px;
}
}

Expand All @@ -37,13 +37,9 @@ $colorbox-input-left-padding: 40px;
}
}

&.dx-editor-outlined,
&.dx-editor-underlined,
&.dx-editor-filled {
.dx-texteditor-label {
.dx-label-before {
min-width: $colorbox-input-left-padding;
}
.dx-texteditor-label {
.dx-label-before {
min-width: $colorbox-input-left-padding;
}
}
}
Expand All @@ -55,15 +51,10 @@ $colorbox-input-left-padding: 40px;
width: 17px;
height: 17px;
margin-top: -8.5px;
left: 13px;
inset-inline-start: 13px;
border: 1px solid;
}

.dx-colorbox-input-container .dx-colorbox-input.dx-texteditor-input {
-webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
padding-left: $colorbox-input-left-padding;
}

.dx-colorbox-overlay {
padding: 20px;

Expand All @@ -84,30 +75,3 @@ $colorbox-input-left-padding: 40px;
}
}
}

.dx-rtl {
.dx-colorbox,
&.dx-colorbox {
.dx-placeholder {
right: 32px;
}

&.dx-dropdowneditor {
.dx-colorbox-input.dx-texteditor-input {
direction: ltr;
text-align: end;
padding-right: $colorbox-input-left-padding;
}

.dx-colorbox-color-result-preview {
left: auto;
right: 13px;
}

.dx-colorbox-input-container::before {
left: auto;
right: 14px;
}
}
}
}
8 changes: 1 addition & 7 deletions packages/devextreme/scss/widgets/base/_lookup.scss
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,8 @@
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: auto;
inset-inline-end: 0;
height: 100%;

.dx-rtl & {
right: auto;
left: 0;
}
}

.dx-state-disabled {
Expand Down
36 changes: 2 additions & 34 deletions packages/devextreme/scss/widgets/base/_tagBox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,12 @@

.dx-tag {
max-width: calc(100% - 1px);
display: inline-block;
display: inline-flex;
align-self: flex-start;
}

.dx-tag-container {
&.dx-texteditor-input-container {
padding: 0;
padding-right: 4px;
outline: none;

.dx-tagbox-single-line & {
Expand All @@ -66,41 +64,11 @@

.dx-tag-content {
position: relative;
display: inline-block;
margin: 4px 0 0 4px;
min-width: 30px;
text-align: center;
cursor: pointer;
}

.dx-tag-remove-button {
position: absolute;
top: 0;
right: 0;

&::before,
&::after {
position: absolute;
top: 50%;
content: "";
transform: rotate(45deg);
}
}

.dx-rtl .dx-tagbox,
.dx-tagbox.dx-rtl {
.dx-tag-content {
margin-left: 0;
margin-right: 4px;
}

.dx-tag-remove-button {
right: auto;
left: 0;
}

.dx-tag-container {
padding-left: 4px;
padding-right: 0;
}
inset-inline-end: 0;
}
29 changes: 12 additions & 17 deletions packages/devextreme/scss/widgets/base/dateRangeBox/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,19 @@

&.dx-editor-outlined {
.dx-datebox {
&.dx-start-datebox,
&.dx-end-datebox {
&.dx-editor-outlined {
border: 0;
box-shadow: none;
&.dx-editor-outlined {
border: 0;
box-shadow: none;

&.dx-texteditor-with-label,
&.dx-texteditor-with-floating-label {
.dx-texteditor-label {
.dx-label,
.dx-label-before,
.dx-label-after {
margin: 0;
border: 0;
clip-path: none;
box-shadow: none;
}
}
&.dx-texteditor-with-label,
&.dx-texteditor-with-floating-label {
.dx-label,
.dx-label-before,
.dx-label-after {
margin: 0;
border: 0;
clip-path: none;
box-shadow: none;
}
}
}
Expand Down
132 changes: 0 additions & 132 deletions packages/devextreme/scss/widgets/base/dateRangeBox/_mixins.scss
Original file line number Diff line number Diff line change
@@ -1,133 +1 @@
@use "sass:math";

@mixin dx-outlined-mixin(
$base-bg,
$horizontal-padding,
$texteditor-label-font-size,
$label-offset-y,
$label-height,
$label-line-height,
$label-background-height,
$label-background-top,
) {
.dx-daterangebox-with-label,
.dx-daterangebox-with-floating-label {
&.dx-editor-outlined {
margin-top: $label-offset-y;

.dx-texteditor-label {
.dx-label {
position: relative;

&::before {
content: '';
background-color: $base-bg;
width: 100%;
position: absolute;
height: $label-background-height;
top: $label-background-top;
margin-left: -$horizontal-padding;
margin-right: -$horizontal-padding;
}
}
}
}
}

.dx-daterangebox {
&.dx-daterangebox-with-floating-label {
&.dx-editor-outlined {
&.dx-dropdowneditor-active,
&.dx-state-focused,
&.dx-invalid {
.dx-datebox.dx-editor-outlined {
.dx-texteditor-label {
.dx-label {
padding: 0 $horizontal-padding;

&::before {
background-color: $base-bg;
}

span {
transform: translate(0, -$label-offset-y);
font-size: $texteditor-label-font-size;
margin-top: 0;
top: 0;
height: $label-height;
line-height: $label-line-height;
}
}
}
}
}

.dx-datebox {
&.dx-texteditor-empty {
.dx-texteditor-label {
.dx-label {
&::before {
background-color: transparent;
}
}
}
}
}
}
}
}
}

@mixin dx-underlined-mixin($texteditor-label-font-size, $label-height, $line-height) {
$label-offset-y: math.div($texteditor-label-font-size, 2);
$label-transform: translate(0, 0);

.dx-daterangebox-with-floating-label {
&.dx-editor-underlined {
.dx-texteditor-label {
height: $label-height;
line-height: $line-height;
}

&.dx-dropdowneditor-active,
&.dx-state-focused,
&.dx-invalid {
.dx-datebox {
.dx-texteditor-label {
transform: $label-transform;
font-size: $texteditor-label-font-size;
height: $label-height;
line-height: $line-height;
top: 0;
margin-top: 0;
}
}
}
}
}
}

@mixin dx-filled-mixin($label-position-top, $texteditor-label-font-size, $label-height, $line-height) {
.dx-daterangebox-with-floating-label {
&.dx-editor-filled {
.dx-texteditor-label {
height: $label-height;
line-height: $line-height;
}

&.dx-dropdowneditor-active,
&.dx-state-focused,
&.dx-invalid {
.dx-datebox {
.dx-texteditor-label {
font-size: $texteditor-label-font-size;
height: $label-height;
line-height: $line-height;
top: $label-position-top;
margin-top: 0;
}
}
}
}
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
// adduse

.dx-textarea {
height: auto;

.dx-texteditor-input-container {
align-items: stretch;
}
Expand Down
Loading

0 comments on commit a54cedc

Please sign in to comment.