Skip to content

Commit

Permalink
Merge pull request #1789 from smeup/chip-test
Browse files Browse the repository at this point in the history 
kup-tree, kup-dialog
  • Loading branch information
@Leonardo-Signorelli
Leonardo-Signorelli authored Mar 1, 2024
2 parents 184c3cb + 06f8500 commit 651f4de
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 38 deletions.
1 change: 1 addition & 0 deletions packages/ketchup/src/components/kup-dialog/kup-dialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
position: relative;
width: 100%;
min-height: 50px;
background-color: var(--kup-gray-color-20);

&__title {
padding: var(--kup-space-05);
Expand Down
123 changes: 86 additions & 37 deletions packages/ketchup/src/components/kup-tree/styles/kup-tree-main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,50 @@
*/

:host {
--kup_tree_header_background_color: var(
--kup-tree-header-background-color,
var(--kup-gray-color-20)
);

--kup_tree_border_color: var(
--kup-tree-border-color,
var(--kup-gray-color-20)
);

--kup_tree_tr_outline_color: var(
--kup-tree-tr-outline-color,
var(--kup-primary-color-60)
);

--kup_tree_tr_background_color_hover: var(
--kup-tree-tr-background-color-hover,
var(--kup-gray-color-20)
);

--kup_tree_tr_background_color_focus: var(
--kup-tree-tr-background-color-focus,
var(--kup-gray-color-30)
);

--kup_tree_border: var(--kup-tree-border, 1px solid var(--kup-border-color));
--kup_tree_color: var(--kup-tree-color, var(--kup-text-color));
--kup_tree_text_color: var(--kup-tree-text-color, var(--kup-gray-color-70));
--kup_tree_header_text_color: var(
--kup-tree-header-text-color,
var(--kup-gray-color-90)
);
--kup_tree_color_rgb: var(--kup-tree-color-rgb, var(--kup-text-color-rgb));
--kup_tree_font_family: var(--kup-tree-font-family, var(--kup-font-family));
--kup_tree_filter_background_color: var(--kup-tree-filter-background-color, var(--kup-background-color));
--kup_tree_filter_background_color: var(
--kup-tree-filter-background-color,
var(--kup-background-color)
);
--kup_tree_font_family_monospace: var(
--kup-tree-font-family-monospace,
var(--kup-font-family-monospace)
);
--kup_tree_font_size: var(--kup-tree-font-size, var(--kup-font-size));
--kup_tree_hover_color: var(--kup-tree-hover-color, var(--kup-hover-color));
--kup_tree_hover_background_color: var(
--kup-tree-hover-background-color,
var(--kup-hover-background-color)
);
--kup_tree_icon_color: var(--kup-tree-icon-color, var(--kup-icon-color));
--kup_tree_icon_color: var(--kup-tree-icon-color, var(--kup-gray-color-70));
--kup_tree_primary_color: var(
--kup-tree-primary-color,
var(--kup-primary-color)
Expand All @@ -56,14 +84,14 @@
}

#kup-component {
color: var(--kup_tree_color);
color: var(--kup_tree_text_color);
}

.density-dense .wrapper .kup-tree,
.density-dense .wrapper .kup-tree {
td:not(.grid-cell),
th {
padding: 0 0.5em;
padding: 0 1.8em;

& .kup-tree__icon ~ .cell-content,
& .kup-tree__icon + .cell-content {
Expand All @@ -76,7 +104,7 @@
.density-wide .wrapper .kup-tree {
td:not(.grid-cell),
th {
padding: 0.75em 0.5em;
padding: 0.75em 1.8em;
}
}

Expand All @@ -91,10 +119,15 @@
display: none;
&.header--is-visible {
display: table-header-group;
background-color: var(--kup_tree_header_background_color);

th {
padding: 0.8em 0.5em;
font-size: 1.1em;
span {
color: var(--kup_tree_header_text_color);
@include kup-heading-compact-01;
}
}
}

Expand All @@ -103,6 +136,22 @@
}
}

tbody {
background-color: var(--kup-gray-color-10);
tr {
}

tr.kup-tree__node.kup-tree__node--first {
td .cell-content {
@include kup-body-compact-01;
}
}
}

tfoot {
background-color: var(--kup-gray-color-10);
}

tr,
td {
font-size: 1em;
Expand All @@ -121,12 +170,13 @@
& .kup-tree__icon + .cell-content {
display: inline-block;
vertical-align: 0.3em;
@include kup-body-compact-01;
}
}

td:not(.grid-cell),
th {
padding: 0.4em 0.5em;
padding: 0.4em 1.8em;
}

td {
Expand All @@ -136,7 +186,7 @@

&__indent {
display: inline-block;
width: calc(1.5em * var(--kup_tree_node_depth, 0));
width: calc(1.8em * var(--kup_tree_node_depth, 0));
}

&__icon {
Expand Down Expand Up @@ -179,7 +229,7 @@
}

.#{$kup-icon}.kup-tree__node__expander:not(.is-image) {
background-color: var(--kup_tree_color);
background-color: var(--kup_tree_text_color);
}

.#{$kup-icon}.is-image img {
Expand All @@ -189,7 +239,7 @@
}

&:hover:not(.kup-tree__node--disabled):not(.kup-tree__node--selected) td {
background-color: var(--kup_tree_hover_background_color);
background-color: var(--kup_tree_tr_background_color_hover);
color: var(--kup_tree_hover_color);

.#{$kup-icon} {
Expand All @@ -198,23 +248,29 @@
}

&--selected:not(.kup-tree__node--disabled) td {
background-color: rgba(var(--kup_tree_primary_color_rgb), 0.175);
color: var(--kup_tree_color);
// outline-offset: -2px;
background-color: var(--kup_tree_tr_background_color_focus);
// outline: 2px solid var(--kup_tree_tr_outline_color);
// border-left: 4px solid var(--kup_tree_tr_outline_color);
}
}

&[data-show-columns] .kup-tree__node {
border-bottom: solid 1px var(--kup-border-color);
border-bottom: solid 1px var(--kup_tree_border_color);
border-left: 2px solid transparent;
box-sizing: content-box;
}
}
}

#global-filter {
background: var(--kup_tree_filter_background_color);
margin-bottom: 1em;
position: sticky;
top: 0;
z-index: 1;
kup-text-field .f-text-field .mdc-text-field-container .mdc-text-field {
border-bottom: none;
}
}

.first-node .cell-content {
Expand All @@ -235,7 +291,7 @@
}

.#{$kup-icon}.#{$kup-icon-filter-remove}:not(.f-image) {
background-color: var(--kup_tree_color);
background-color: var(--kup_tree_text_color);
margin: 0 0.25em;
height: 1em;
width: 1em;
Expand All @@ -246,7 +302,10 @@
}

.grid-cell {
height: 0; // Trick to let the cell' size to adapt to its content
height: 0;
.f-cell .f-cell__content {
@include kup-body-compact-01;
} // Trick to let the cell' size to adapt to its content
}

tfoot {
Expand Down Expand Up @@ -275,7 +334,7 @@ tfoot {
text-overflow: ellipsis;
transition: color 200ms;
&:hover {
color: var(--kup_tree_color);
color: var(--kup_tree_text_color);
}
}
}
Expand All @@ -291,6 +350,9 @@ tfoot {
tr {
border-left: var(--kup_tree_border);
border-right: var(--kup_tree_border);
th span {
@include kup-heading-compact-01;
}
}
}

Expand Down Expand Up @@ -319,7 +381,7 @@ tfoot {

&:hover,
&[data-is-expanded] {
background-color: var(--kup_tree_hover_background_color);
background-color: var(--kup_tree_tr_background_color_hover);

.cell-content {
color: var(--kup_tree_hover_color);
Expand All @@ -332,8 +394,6 @@ tfoot {

&[data-is-expanded] {
.first-node {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

.#{$kup-icon-dropdown} {
Expand All @@ -343,30 +403,21 @@ tfoot {

&:first-of-type {
.first-node {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top: var(--kup_tree_border);
}
}

&:last-of-type {
.first-node {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}

.first-node {
align-items: center;
border-bottom: var(--kup_tree_border);
border-left: var(--kup_tree_border);
border-right: var(--kup_tree_border);
box-sizing: border-box;
color: var(--kup_tree_color);
color: var(--kup_tree_text_color);
cursor: pointer;
display: flex;
line-height: 1.75em;
outline: none;
text-align: left;
transition: background-color 80ms, color 80ms;
width: 100%;
Expand Down Expand Up @@ -398,9 +449,7 @@ tfoot {

// First accordion item right below a tree item
.kup-tree__node:not(.kup-tree__node--first) + .kup-tree__node--first {
border-top: var(--kup_tree_border);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top: 1px solid var(--kup_tree_border_color);
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2371,7 +2371,7 @@ Please note that using !important should generally be avoided if possible, as it
/* D i a l o g */
/*-------------------------------------------------*/
[kup-dialog] {
border: 4px solid var(--kup-gray-color-70);
border-top: 4px solid var(--kup-gray-color-70);
animation: fade-in-down 0.25s ease-out;
background-color: var(--kup-gray-color-0);
margin: 0;
Expand Down

0 comments on commit 651f4de

Please sign in to comment.