Skip to content

Commit

Permalink
feat(tilelayout): add styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@TeyaVes @joneff
TeyaVes authored and joneff committed May 5, 2020
1 parent 42425b7 commit 82ccd6a
Show file tree
Hide file tree
Showing 16 changed files with 227 additions and 0 deletions.
13 changes: 13 additions & 0 deletions packages/bootstrap/scss/_variables.scss
View file
Expand Up @@ -2425,6 +2425,19 @@ $splitbar-selected-bg: $selected-bg !default;
$splitbar-selected-text: $selected-text !default;


// TileLayout
$tilelayout-border-width: 0 !default;
$tilelayout-card-border-width: $card-border-width !default;

$tilelayout-hint-border-width: 1px !default;
$tilelayout-hint-border-radius: $card-border-radius !default;

$tilelayout-bg: $gray-100 !default;

$tilelayout-hint-bg: rgba(255, 255, 255, .2) !default;
$tilelayout-hint-border: $component-border !default;


// Filter expression builder
$filter-padding-x: $padding-x !default;
$filter-padding-y: $padding-y !default;
Expand Down
1 change: 1 addition & 0 deletions packages/bootstrap/scss/all.scss
View file
Expand Up @@ -89,6 +89,7 @@
@import "layout/_index.scss";
@import "card/_index.scss";
@import "splitter/_index.scss";
@import "tilelayout/_index.scss";


// Data management
Expand Down
12 changes: 12 additions & 0 deletions packages/bootstrap/scss/tilelayout/_index.scss
View file
@@ -0,0 +1,12 @@
@import "../_variables.scss";
@import "../mixins/_index.scss";


// Dependencies
@import "../common/_index.scss";
@import "../card/_index.scss";


// Component
@import "_layout.scss";
@import "_theme.scss";
1 change: 1 addition & 0 deletions packages/bootstrap/scss/tilelayout/_layout.scss
View file
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/tilelayout/_layout.scss";
1 change: 1 addition & 0 deletions packages/bootstrap/scss/tilelayout/_theme.scss
View file
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/tilelayout/_theme.scss";
13 changes: 13 additions & 0 deletions packages/default/scss/_variables.scss
View file
Expand Up @@ -2431,6 +2431,19 @@ $splitbar-selected-bg: $selected-bg !default;
$splitbar-selected-text: contrast-wcag( $splitbar-selected-bg ) !default;


// TileLayout
$tilelayout-border-width: 0 !default;
$tilelayout-card-border-width: $card-border-width !default;

$tilelayout-hint-border-width: 1px !default;
$tilelayout-hint-border-radius: $border-radius-lg !default;

$tilelayout-bg: $base-bg !default;

$tilelayout-hint-bg: rgba(255, 255, 255, .2) !default;
$tilelayout-hint-border: $component-border !default;


// Filter expression builder
$filter-padding-x: $padding-x !default;
$filter-padding-y: $padding-y !default;
Expand Down
1 change: 1 addition & 0 deletions packages/default/scss/all.scss
View file
Expand Up @@ -89,6 +89,7 @@
@import "layout/_index.scss";
@import "card/_index.scss";
@import "splitter/_index.scss";
@import "tilelayout/_index.scss";


// Data management
Expand Down
12 changes: 12 additions & 0 deletions packages/default/scss/tilelayout/_index.scss
View file
@@ -0,0 +1,12 @@
@import "../_variables.scss";
@import "../mixins/_index.scss";


// Dependencies
@import "../common/_index.scss";
@import "../card/_index.scss";


// Component
@import "_layout.scss";
@import "_theme.scss";
30 changes: 30 additions & 0 deletions packages/default/scss/tilelayout/_layout.scss
View file
@@ -0,0 +1,30 @@
@include exports("tilelayout/layout") {

.k-tilelayout {
@include use-background-clip();
border-width: $tilelayout-border-width;
border-style: solid;
box-sizing: border-box;
outline: 0;
display: grid;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: $rgba-transparent;

.k-card {
@include box-shadow( none );
border-width: $tilelayout-card-border-width;
}
}

.k-layout-item-hint {
@include border-radius( $tilelayout-hint-border-radius );
border-width: $tilelayout-hint-border-width;
border-style: solid;
position: relative;

&.k-layout-item-hint-resize {
z-index: 3;
}
}

}
16 changes: 16 additions & 0 deletions packages/default/scss/tilelayout/_theme.scss
View file
@@ -0,0 +1,16 @@
@include exports("tilelayout/theme") {

.k-tilelayout {
@include fill(
$bg: $tilelayout-bg
);
}

.k-layout-item-hint {
@include fill(
$bg: $tilelayout-hint-bg,
$border: $tilelayout-hint-border
);
}

}
13 changes: 13 additions & 0 deletions packages/material/scss/_variables.scss
View file
Expand Up @@ -2478,6 +2478,19 @@ $splitbar-selected-bg: $primary !default;
$splitbar-selected-text: contrast-wcag( $splitbar-selected-bg ) !default;


// TileLayout
$tilelayout-border-width: 0 !default;
$tilelayout-card-border-width: 1px !default;

$tilelayout-hint-border-width: 1px !default;
$tilelayout-hint-border-radius: $border-radius !default;

$tilelayout-bg: if( $is-dark-theme, $dark, $light) !default;

$tilelayout-hint-bg: rgba(255, 255, 255, .2) !default;
$tilelayout-hint-border: $component-border !default;


// Filter expression builder
$filter-padding-x: $padding-x-sm !default;
$filter-padding-y: $filter-padding-x !default;
Expand Down
1 change: 1 addition & 0 deletions packages/material/scss/all.scss
View file
Expand Up @@ -89,6 +89,7 @@
@import "layout/_index.scss";
@import "card/_index.scss";
@import "splitter/_index.scss";
@import "tilelayout/_index.scss";


// Data management
Expand Down
12 changes: 12 additions & 0 deletions packages/material/scss/tilelayout/_index.scss
View file
@@ -0,0 +1,12 @@
@import "../_variables.scss";
@import "../mixins/_index.scss";


// Dependencies
@import "../common/_index.scss";
@import "../card/_index.scss";


// Component
@import "_layout.scss";
@import "_theme.scss";
1 change: 1 addition & 0 deletions packages/material/scss/tilelayout/_layout.scss
View file
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/tilelayout/_layout.scss";
1 change: 1 addition & 0 deletions packages/material/scss/tilelayout/_theme.scss
View file
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/tilelayout/_theme.scss";
99 changes: 99 additions & 0 deletions tests/visual/tilelayout.html
View file
@@ -0,0 +1,99 @@
<!doctype html>
<html lang="en" class="k-typography k-no-animations">
<head>
<title>Tile Layout</title>
<meta charset="utf-8" />
<link rel="stylesheet" data-role="kendo-theme" href="../../packages/default/dist/all.css" />
<link rel="stylesheet" href="assets/styles.css" />
<script src="assets/scripts.js"></script>
</head>
<body>

<div id="test-area">
<div id="tilelayout" class="k-widget k-tilelayout" style="grid-template-columns: repeat(5, minmax(0px, 1fr)); grid-template-rows: repeat(5, minmax(0px, 1fr)); gap: 16px; width: 1000px; padding: 16px;">
<div class="k-tilelayout-item k-card" style="order: 0; grid-column-end: span 1; grid-row-end: span 1;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 1; grid-column-end: span 1; grid-row-end: span 1;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 2;grid-column-end: span 1;grid-row-end: span 2; width: 250px; position: absolute; height: 198px;left: 430px;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-resize-handle k-cursor-ew-resize" style="top: 36px; left: 674px; height: 196px; width: 9px;"></div>
<div class="k-layout-item-hint k-layout-item-hint-resize" style="order: 2;grid-column-end: span 2;grid-row-end: span 2;"></div>
<div class="k-tilelayout-item k-card" style="order: 3; grid-column-end: span 1; grid-row-end: span 1;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 4; grid-column-end: span 1; grid-row-end: span 2;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 5; grid-column-end: span 1; grid-row-end: span 1;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 6; grid-column-end: span 1; grid-row-end: span 1;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 7; grid-column-end: span 1; grid-row-end: span 2;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 8; grid-column-end: span 1; grid-row-end: span 1;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 9; grid-column-end: span 1; grid-row-end: span 2;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
</div>
</div>
</body>
</html>

0 comments on commit 82ccd6a

Please sign in to comment.