Skip to content

Commit

Permalink
feat(drawer): add fluent styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoomFX @Juveniel
JoomFX authored and Juveniel committed Sep 2, 2022
1 parent daf49d6 commit e8787e8
Show file tree
Hide file tree
Showing 6 changed files with 526 additions and 3 deletions.
2 changes: 1 addition & 1 deletion packages/default/scss/panelbar/_layout.scss
View file
Expand Up @@ -96,7 +96,7 @@
}

// Panelbar item
.k-panelbar-item {
.k-panelbar-item {
outline-style: none;
}

Expand Down
271 changes: 271 additions & 0 deletions packages/fluent/scss/drawer/_layout.scss
View file
@@ -0,0 +1,271 @@
@use "../core/color-system" as *;
@use "_variables.scss" as *;

@mixin kendo-drawer--layout() {

.k-drawer-container {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
}
kendo-drawer.k-drawer,
kendo-drawer .k-drawer-wrapper {
transition: none;
}
.k-drawer {
height: 100%;
max-width: 100%;
border-width: 0;
border-style: solid;
box-sizing: border-box;
outline: 0;
font-family: var( --kendo-drawer-font-family, #{$kendo-drawer-font-family} );
font-size: var( --kendo-drawer-font-size, #{$kendo-drawer-font-size} );
line-height: var( --kendo-drawer-line-height, #{$kendo-drawer-line-height} );
display: flex;
flex-direction: column;
flex: 0 0 auto;
transition: all 300ms ease-in-out; // sass-lint:disable-line no-transition-all
overflow: hidden;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: $rgba-transparent;

*,
*::before,
*::after {
box-sizing: border-box;
}

// Borders
.k-drawer-mini &.k-drawer-start,
.k-drawer-expanded &.k-drawer-start,
.k-drawer-left.k-drawer-mini &,
.k-drawer-left.k-drawer-expanded & {
border-right-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
}
.k-drawer-mini &.k-drawer-end,
.k-drawer-expanded &.k-drawer-end,
.k-drawer-right.k-drawer-mini &,
.k-drawer-right.k-drawer-expanded & {
border-left-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
}

// Position
&.k-drawer-start,
.k-drawer-left & {
inset-block-start: 0;
inset-inline-start: 0;
}
&.k-drawer-end,
.k-drawer-right & {
inset-block-start: 0;
inset-inline-end: 0;
}
}
.k-drawer-content {
flex: 1 1 auto;
}


// Overlay drawer
.k-drawer-overlay {
.k-drawer {
max-width: 80vw; // limit width
position: fixed;
z-index: 10002;
border: 0;
}

> .k-overlay {
display: none;
}
&.k-drawer-expanded > .k-overlay {
display: block;
}
}


// Push drawer
.k-drawer-push {
display: flex;
flex-direction: row;

.k-drawer {
height: auto;
position: relative;
align-self: stretch;
}


// right drawer
.k-drawer.k-drawer-end,
&.k-drawer-right .k-drawer {
order: 1;
}

}


// Drawer items
.k-drawer-wrapper {
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin; // Scrollbar styles for Mozilla
transition: all 300ms ease-in-out; // sass-lint:disable-line no-transition-all

// Scrollbar styles for Chrome, Safari and Opera
&::-webkit-scrollbar {
width: var( --kendo-drawer-scrollbar-width, #{$kendo-drawer-scrollbar-width} );
}
&::-webkit-scrollbar-thumb {
border-radius: var( --kendo-drawer-scrollbar-radius, #{$kendo-drawer-scrollbar-radius} );
}
}
.k-drawer-items,
.k-drawer-items ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
align-items: stretch;
}
.k-drawer-item {
padding-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
padding-block: var( --kendo-drawer-item-padding-y, #{$kendo-drawer-item-padding-y} );
outline: 0;
color: inherit;
font-size: var( --kendo-drawer-item-font-size, #{$kendo-drawer-item-font-size} );
line-height: var( --kendo-drawer-item-line-height, #{$kendo-drawer-item-line-height} );
position: relative;
display: flex;
align-items: center;
flex-flow: row nowrap;
cursor: pointer;

&::before {
content: "";
border-width: 0;
border-inline-start-width: var( --kendo-drawer-item-ripple-border-width, #{$kendo-drawer-item-ripple-border-width} );
border-style: solid;
border-color: var( --kendo-drawer-item-ripple-border, #{$kendo-drawer-item-ripple-border} );
height: 100%;
display: block;
position: absolute;
inset-block-start: 0;
z-index: 2;
opacity: 0;
transition: opacity .3s;
pointer-events: none;

.k-drawer-start &,
.k-drawer-left & {
inset-inline-start: 0;
}

.k-drawer-end &,
.k-drawer-right & {
inset-inline-end: 0;
}
}

> .k-drawer-link {
margin-inline: calc( var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} ) * -1 );
margin-block: calc( var( --kendo-drawer-item-padding-y, #{$kendo-drawer-item-padding-y} ) * -1 );
padding-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
padding-block: var( --kendo-drawer-item-padding-y, #{$kendo-drawer-item-padding-y} );
color: inherit;
display: flex;
flex-flow: row nowrap;
flex: 1 0 auto;
}

.k-icon {
margin-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
margin-block: 0;
height: auto;
font-size: var( --kendo-drawer-icon-size, #{$kendo-drawer-icon-size} );
line-height: var( --kendo-drawer-item-line-height, #{$kendo-drawer-item-line-height} );
flex-shrink: 0;

&.k-i-none {
margin: 0;
}
}

.k-item-text {
padding-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
padding-block: 0;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

&.k-selected {
&::before {
opacity: 1;
}

.k-item-text {
font-weight: var( --kendo-drawer-item-selected-font-weight, #{$kendo-drawer-item-selected-font-weight} );
}
}

.k-drawer-toggle {
margin-inline-start: auto;
cursor: pointer;
}

// Hierarchy items
@for $i from 1 through $kendo-drawer-item-level-count {
&.k-level-#{$i} {
padding-inline-start: calc( var( --kendo-drawer-item-level-padding-x, #{$kendo-drawer-item-level-padding-x} ) * $i );
}
}
}
.k-drawer-separator {
padding: 0;
height: 1px;
}



// Mini mode
.k-drawer-mini {
.k-drawer-wrapper {
width: var( --kendo-drawer-mini-initial-width, #{$kendo-drawer-mini-initial-width} );
}
}


.k-rtl,
[dir="rtl"] {

// Borders
&.k-drawer-mini .k-drawer-start,
.k-drawer-mini .k-drawer-start,
.k-drawer-expanded .k-drawer-start,
&.k-drawer-expanded .k-drawer-start {
border-left-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
border-right-width: 0;
}
&.k-drawer-mini .k-drawer-end,
.k-drawer-mini .k-drawer-end,
&.k-drawer-expanded .k-drawer-end
.k-drawer-expanded .k-drawer-end {
border-left-width: 0;
border-right-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
}

// Order
.k-drawer-left.k-drawer-push .k-drawer {
order: 1;
}
.k-drawer-right.k-drawer-push .k-drawer {
order: 0;
}

}

}
94 changes: 94 additions & 0 deletions packages/fluent/scss/drawer/_theme.scss
View file
@@ -0,0 +1,94 @@
@use "../core/mixins" as *;
@use "_variables.scss" as *;

@mixin kendo-drawer--theme() {

.k-drawer {
@include fill(
var( --kendo-drawer-text, #{$kendo-drawer-text} ),
var( --kendo-drawer-bg, #{$kendo-drawer-bg} ),
var( --kendo-drawer-border, #{$kendo-drawer-border} )
);
}

// Drawer items
.k-drawer-wrapper {
scrollbar-color: var( --kendo-drawer-scrollbar-color, #{$kendo-drawer-scrollbar-color} ) var( --kendo-drawer-scrollbar-bg, #{$kendo-drawer-scrollbar-bg} );

&::-webkit-scrollbar-track {
background: var( --kendo-drawer-scrollbar-bg, #{$kendo-drawer-scrollbar-bg} );
}
&::-webkit-scrollbar-thumb {
background: var( --kendo-drawer-scrollbar-color, #{$kendo-drawer-scrollbar-color} );
}
&::-webkit-scrollbar-thumb:hover {
background: var( --kendo-drawer-scrollbar-hover-color, #{$kendo-drawer-scrollbar-hover-color} );
}
}
.k-drawer-item {
@include fill(
var( --kendo-drawer-item-text, #{$kendo-drawer-item-text} ),
var( --kendo-drawer-item-bg, #{$kendo-drawer-item-bg} )
);

.k-icon {
color: var( --kendo-drawer-item-icon-text, #{$kendo-drawer-item-icon-text} );
}

&:hover,
&.k-hover {
@include fill(
var( --kendo-drawer-item-hover-text, #{$kendo-drawer-item-hover-text} ),
var( --kendo-drawer-item-hover-bg, #{$kendo-drawer-item-hover-bg} )
);

.k-icon {
color: var( --kendo-drawer-item-hover-icon-text, #{$kendo-drawer-item-hover-icon-text} );
}
}

&:focus,
&.k-focus {
@include fill(
var( --kendo-drawer-item-focus-text, #{$kendo-drawer-item-focus-text} ),
var( --kendo-drawer-item-focus-bg, #{$kendo-drawer-item-focus-bg} )
);
box-shadow: var( --kendo-drawer-item-focus-shadow, #{$kendo-drawer-item-focus-shadow} );

.k-icon {
color: var( --kendo-drawer-item-focus-icon-text, #{$kendo-drawer-item-focus-icon-text} );
}

&:hover,
&.k-hover {
@include fill(
var( --kendo-drawer-item-hover-text, #{$kendo-drawer-item-hover-text} ),
var( --kendo-drawer-item-hover-bg, #{$kendo-drawer-item-hover-bg} )
);
}
}

&.k-selected {
@include fill(
var( --kendo-drawer-item-selected-text, #{$kendo-drawer-item-selected-text} ),
var( --kendo-drawer-item-selected-bg, #{$kendo-drawer-item-selected-bg} )
);

.k-icon {
color: var( --kendo-drawer-item-selected-icon-text, #{$kendo-drawer-item-selected-icon-text} );
}

&:hover,
&.k-hover {
@include fill(
var( --kendo-drawer-item-selected-hover-text, #{$kendo-drawer-item-selected-hover-text} ),
var( --kendo-drawer-item-selected-hover-bg, #{$kendo-drawer-item-selected-hover-bg} )
);
}
}
}
.k-drawer-separator {
background-color: var( --kendo-drawer-border, #{$kendo-drawer-border} );
}

}

0 comments on commit e8787e8

Please sign in to comment.