Skip to content

Commit

Permalink
fix(treeview): streamline treeview styles to match design better
Browse files Browse the repository at this point in the history
  • Loading branch information
@joneff
joneff committed Jan 4, 2022
1 parent 82afaf5 commit 23a80f3
Show file tree
Hide file tree
Showing 8 changed files with 187 additions and 207 deletions.
21 changes: 6 additions & 15 deletions packages/bootstrap/scss/treeview/_layout.scss
View file
@@ -1,24 +1,15 @@
@import "~@progress/kendo-theme-default/scss/treeview/_layout.scss";


@include exports( "treeview/layout/bootstrap" ) {

// Base
.k-treeview {

.k-top,
.k-mid,
.k-bot {
padding-top: 2px;
padding-bottom: 2px;
}

// Treeview
.k-treeview {}

// Item
.k-in {
transition: $transition;
}

// Treeview item
.k-treeview-item,
.k-treeview .k-item {
transition: $transition;
}

}
13 changes: 3 additions & 10 deletions packages/bootstrap/scss/treeview/_variables.scss
View file
@@ -1,6 +1,4 @@
// Treeview
$treeview-padding-x: 2px !default;
$treeview-padding-y: $treeview-padding-x !default;
$treeview-font-family: $font-family !default;
$treeview-font-size: $font-size !default;
$treeview-line-height: $line-height !default;
Expand All @@ -26,12 +24,7 @@ $treeview-item-selected-text: $selected-text !default;
$treeview-item-selected-border: $treeview-item-selected-bg !default;
$treeview-item-selected-gradient: null !default;

$treeview-item-focused-shadow: 0 0 0 2px $component-border !default;
$treeview-item-selected-focused-shadow: 0 0 0 2px rgba( $treeview-item-selected-border, .5 ) !default;

$treeview-loadmore-checkboxes-padding-x: calc( #{$icon-spacing} + #{$checkbox-size} + #{$treeview-indent} ) !default;
$treeview-loadmore-checkboxes-icon-indent: calc( -1 * (#{$icon-spacing} + #{$treeview-indent}) ) !default;
$treeview-loadmore-checkboxes-icon-margin-x: $icon-spacing !default;
$treeview-item-focused-shadow: inset 0 0 0 2px rgba( $treeview-text, .15 ) !default;

$treeview-loadmore-bg: transparent !default;
$treeview-loadmore-text: $link-text !default;
Expand All @@ -42,6 +35,6 @@ $treeview-loadmore-hover-text: $link-hover-text !default;
$treeview-loadmore-hover-border: null !default;

$treeview-loadmore-focus-bg: transparent !default;
$treeview-loadmore-focus-text: $link-text !default;
$treeview-loadmore-focus-text: $link-hover-text !default;
$treeview-loadmore-focus-border: null !default;
$treeview-loadmore-focus-shadow: none !default;
$treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
15 changes: 4 additions & 11 deletions packages/classic/scss/treeview/_variables.scss
View file
@@ -1,6 +1,4 @@
// Treeview
$treeview-padding-x: 0px !default;
$treeview-padding-y: 0px !default;
$treeview-font-family: $font-family !default;
$treeview-font-size: $font-size !default;
$treeview-line-height: $line-height !default;
Expand All @@ -27,21 +25,16 @@ $treeview-item-selected-border: $selected-border !default;
$treeview-item-selected-gradient: $selected-gradient !default;

$treeview-item-focused-shadow: $focused-shadow !default;
$treeview-item-selected-focused-shadow: null !default;

$treeview-loadmore-checkboxes-padding-x: calc( #{$icon-spacing} + #{$checkbox-size} + #{$treeview-indent} ) !default;
$treeview-loadmore-checkboxes-icon-indent: calc( -1 * (#{$icon-spacing} + #{$treeview-indent}) ) !default;
$treeview-loadmore-checkboxes-icon-margin-x: $icon-spacing !default;

$treeview-loadmore-bg: transparent !default;
$treeview-loadmore-text: $primary !default;
$treeview-loadmore-text: $link-text !default;
$treeview-loadmore-border: null !default;

$treeview-loadmore-hover-bg: transparent !default;
$treeview-loadmore-hover-text: $primary-darker !default;
$treeview-loadmore-hover-text: $link-hover-text !default;
$treeview-loadmore-hover-border: null !default;

$treeview-loadmore-focus-bg: transparent !default;
$treeview-loadmore-focus-text: $primary !default;
$treeview-loadmore-focus-text: $link-hover-text !default;
$treeview-loadmore-focus-border: null !default;
$treeview-loadmore-focus-shadow: none !default;
$treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
203 changes: 101 additions & 102 deletions packages/default/scss/treeview/_layout.scss
View file
@@ -1,8 +1,8 @@
@include exports("treeview/layout") {

// Base
// Treeview
.k-treeview {
padding: $treeview-padding-y $treeview-padding-x;
padding: 0;
border-width: 0;
background: none;
box-sizing: border-box;
Expand All @@ -16,135 +16,128 @@
white-space: nowrap;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: $rgba-transparent;
}

> .k-group {
outline: 0;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: $rgba-transparent;
}

.k-content,
> .k-group,
.k-item > .k-group {
margin: 0;
padding: 0;
background: none;
list-style: none;
position: relative;

&.ng-animating {
overflow: hidden;
}
}
// Treeview group
.k-treeview-group,
.k-treeview .k-group {
margin: 0;
padding: 0;
background: none;
list-style: none;
position: relative;
outline: 0;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: $rgba-transparent;

// Wrappers
.k-top,
.k-mid,
.k-bot {
display: flex;
flex-direction: row;
align-items: center;
align-content: center;
&.ng-animating {
overflow: hidden;
}
}

// Items
.k-item {
outline-style: none;
margin: 0;
padding: 0 0 0 $treeview-indent;
border-width: 0;
display: block;
}

// Link
.k-in {
@include border-radius( $treeview-item-border-radius );
margin: 0;
padding: $treeview-item-padding-y $treeview-item-padding-x;
border: $treeview-item-border-width solid transparent;
text-decoration: none;
display: inline-flex;
align-items: center;
align-content: center;
vertical-align: middle;
position: relative;
}
.k-in.k-state-focused {
z-index: 1;
}
// Treeview wrappers
.k-treeview-top,
.k-treeview .k-top,
.k-treeview-mid,
.k-treeview .k-mid,
.k-treeview-bot,
.k-treeview .k-bot {
display: flex;
flex-direction: row;
align-items: center;
align-content: center;
}

// LoadMore button
.k-treeview-load-more-button {
cursor: pointer;

&:hover,
&.k-state-hover,
&:focus,
&.k-state-focused {
text-decoration: underline;
}
}
.k-treeview-load-more-checkboxes-container {
padding-left: $treeview-loadmore-checkboxes-padding-x;
// Treeview item
.k-treeview-item,
.k-treeview .k-item {
outline-style: none;
margin: 0;
padding: 0 0 0 $treeview-indent;
border-width: 0;
display: block;
}

.k-i-loading {
margin-left: $treeview-loadmore-checkboxes-icon-indent;
margin-right: $treeview-loadmore-checkboxes-icon-margin-x;
}
}

// Expand / collapse
.k-i-expand,
.k-i-collapse {
margin-left: -$treeview-indent;
cursor: pointer;
// Expand / collapse
.k-treeview .k-i-expand,
.k-treeview .k-i-collapse {
margin-left: -$treeview-indent;
cursor: pointer;

+ .k-checkbox-wrapper {
margin-left: $icon-spacing;
}
+ .k-checkbox-wrapper {
margin-left: $icon-spacing;
}
}

// Checkboxes
.k-checkbox-wrapper {

// Loading icon
.k-treeview-loading {
margin-right: $icon-spacing;
}


// Checkboxes
.k-treeview .k-checkbox-wrapper {
margin-right: $icon-spacing;
}


// Treeview leaf
.k-treeview-leaf,
.k-treeview .k-in {
@include border-radius( $treeview-item-border-radius );
margin: 0;
padding: $treeview-item-padding-y $treeview-item-padding-x;
border: $treeview-item-border-width solid transparent;
text-decoration: none;
display: inline-flex;
align-items: center;
align-content: center;
vertical-align: middle;
position: relative;

.k-icon,
.k-image,
.k-sprite {
margin-right: $icon-spacing;
}

// TODO: Delete the following block when https://github.com/telerik/kendo-angular-treeview/issues/138 is done
// Drag and Drop icon
.k-i-drag-and-drop {
position: absolute;
transform: translate(-50%, -50%);
z-index: 1000;
&.k-state-focus,
&.k-state-focused {
z-index: 1;
}
}

// Other content
.k-in .k-icon,
.k-in .k-image,
.k-in .k-sprite {
margin-right: $icon-spacing;

// Treeview load more button
.k-treeview .k-treeview-load-more-button {
cursor: pointer;

&:hover,
&.k-state-hover,
&:focus,
&.k-state-focus,
&.k-state-focused {
text-decoration: underline;
}
}


// RTL
.k-rtl .k-treeview,
.k-treeview[dir="rtl"] {

// Items
.k-item {
// Treeview item
.k-item,
.k-treeview-item {
padding-left: 0;
padding-right: $treeview-indent;
}

.k-treeview-load-more-checkboxes-container {
padding-left: 0;
padding-right: $treeview-loadmore-checkboxes-padding-x;

.k-i-loading {
margin-left: $treeview-loadmore-checkboxes-icon-margin-x;
margin-right: $treeview-loadmore-checkboxes-icon-indent;
}
}

// Expand / collapse
.k-i-expand,
.k-i-collapse {
Expand All @@ -156,6 +149,12 @@
}
}

// Loading
.k-treeview-loading {
margin-right: 0;
margin-left: $icon-spacing;
}

// Checkboxes
.k-checkbox-wrapper {
margin-right: 0;
Expand Down

0 comments on commit 23a80f3

Please sign in to comment.