diff --git a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx index ce212a5a94..73b4b56825 100644 --- a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx +++ b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx @@ -588,7 +588,7 @@ export class KupDataTable { /** * When set to true it activates the global filter. */ - @Prop() globalFilter: boolean = true; + @Prop() globalFilter: boolean = false; /** * The value of the global filter. */ diff --git a/packages/ketchup/src/components/kup-data-table/readme.md b/packages/ketchup/src/components/kup-data-table/readme.md index 140a9444cd..e58f062058 100644 --- a/packages/ketchup/src/components/kup-data-table/readme.md +++ b/packages/ketchup/src/components/kup-data-table/readme.md @@ -52,7 +52,7 @@ If the `sticky` element would be hidden by the scroll, after having specified a | `fixedColumns` | `fixed-columns` | Fixes the given number of columns so that they stay visible when horizontally scrolling the data-table. If grouping is active or the value of the prop is <= 0, this prop will have no effect. Can be combined with fixedRows. | `number` | `0` | | `fixedRows` | `fixed-rows` | Fixes the given number of rows so that they stay visible when vertically scrolling the data-table. If grouping is active or the value of the prop is <= 0, this prop will have no effect. Can be combined with fixedColumns. | `number` | `0` | | `forceOneLine` | `force-one-line` | Forces cells with long text and a fixed column size to have an ellipsis set on their text. The reflect attribute is mandatory to allow styling. | `boolean` | `false` | -| `globalFilter` | `global-filter` | When set to true it activates the global filter. | `boolean` | `true` | +| `globalFilter` | `global-filter` | When set to true it activates the global filter. | `boolean` | `false` | | `globalFilterValue` | `global-filter-value` | The value of the global filter. | `string` | `''` | | `groupLabelDisplay` | `group-label-display` | How the label of a group must be displayed. For available values [see here]{@link GroupLabelDisplayMode} | `GroupLabelDisplayMode.BOTH \| GroupLabelDisplayMode.LABEL \| GroupLabelDisplayMode.VALUE` | `GroupLabelDisplayMode.BOTH` | | `groups` | -- | The list of groups. | `GroupObject[]` | `[]` | diff --git a/packages/ketchup/src/components/kup-dialog/kup-dialog.scss b/packages/ketchup/src/components/kup-dialog/kup-dialog.scss index a0b12b7367..da379fcd3e 100644 --- a/packages/ketchup/src/components/kup-dialog/kup-dialog.scss +++ b/packages/ketchup/src/components/kup-dialog/kup-dialog.scss @@ -3,6 +3,14 @@ */ :host { + --kup_dialogheader_text_color: var( + --kup-dialogheader-text-color, + var(--kup-gray-color-70) + ); + --kup_dialog_background_color: var( + --kup-header-text-color, + var(--kup-gray-color-0) + ); --kup_dialog_header_height: var(--kup-dialog-header-height, 2em); box-sizing: border-box; @@ -31,33 +39,29 @@ } .header { - background-color: var(--kup-title-background-color); - color: var(--kup-title-color); + color: var(--kup_dialogheader_text_color); display: flex; flex-direction: row; height: var(--kup_dialog_header_height); position: relative; width: 100%; + min-height: 50px; &__title { - font-weight: bold; - line-height: 2em; - padding-left: 0.5em; - padding-right: 2em; + padding: var(--kup-space-05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + @include kup-heading-compact-01; } &__close.f-image { - --kup-icon-color: var(--kup-title-color); - + --kup-icon-color: var(--kup_dialogheader_text_color); cursor: pointer; margin-right: 0; transition: opacity 0.25s; position: absolute; - right: 0; - background: var(--kup-title-background-color); + right: var(--kup-space-05); &:hover { opacity: 0.5; @@ -67,6 +71,8 @@ .content { height: calc(100% - var(--kup_dialog_header_height)); + padding: var(--kup-space-05); overflow: auto; user-select: text; + background-color: var(--kup_dialog_background_color); } diff --git a/packages/ketchup/src/dialog.html b/packages/ketchup/src/dialog.html index a81305e18e..ed266213ff 100644 --- a/packages/ketchup/src/dialog.html +++ b/packages/ketchup/src/dialog.html @@ -25,8 +25,8 @@ >
This is a slot
+ > + diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss index 801d3eb029..f54ab1671c 100644 --- a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss +++ b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss @@ -2371,22 +2371,19 @@ Please note that using !important should generally be avoided if possible, as it /* D i a l o g */ /*-------------------------------------------------*/ [kup-dialog] { - animation: fade-in 0.25s ease-out; - background-color: var(--kup-background-color); + border: 4px solid var(--kup-gray-color-70); + animation: fade-in-down 0.25s ease-out; + background-color: var(--kup-gray-color-0); margin: 0; position: absolute; -ms-touch-action: none; touch-action: none; transition: none; will-change: transform; - - &.kup-resizable { - border: 3px outset var(--kup-title-background-color); - } } [kup-modal-backdrop] { - animation: fade-in 0.25s ease-out; + animation: fade-in-down 0.25s ease-out; background: rgba(0, 0, 0, 0.32); display: none; height: 100vh; @@ -2416,6 +2413,22 @@ Please note that using !important should generally be avoided if possible, as it opacity: 1; } } + +@keyframes fade-in-down { + 0% { + opacity: 0; + transform: translateY(-10%); + } + 1% { + opacity: 0; + transform: translateY(-9%); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} /*-------------------------------------------------*/ /* S c r o l l o n h o v e r */ /*-------------------------------------------------*/ diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-component.scss b/packages/ketchup/src/managers/kup-theme/kup-theme-component.scss index 3f09700175..f9a6e4d786 100644 --- a/packages/ketchup/src/managers/kup-theme/kup-theme-component.scss +++ b/packages/ketchup/src/managers/kup-theme/kup-theme-component.scss @@ -2,18 +2,15 @@ /* D i a l o g */ /*-------------------------------------------------*/ [kup-dialog] { - animation: fade-in 0.25s ease-out; - background-color: var(--kup-background-color); + border-top: 4px solid var(--kup-gray-color-70); + animation: fade-in-down cubic-bezier(0.455, 0.03, 0.515, 0.955) s ease-in-out; + background-color: var(--kup-gray-color-0); margin: 0; position: absolute; -ms-touch-action: none; touch-action: none; transition: none; will-change: transform; - - &.kup-resizable { - border: 3px outset var(--kup-title-background-color); - } } @keyframes fade-in { @@ -32,3 +29,19 @@ opacity: 1; } } + +@keyframes fade-in-down { + 0% { + opacity: 0; + transform: translateY(-10%); + } + 1% { + opacity: 0; + transform: translateY(-9%); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +}