diff --git a/docs-aspnet/redirects.conf b/docs-aspnet/redirects.conf index aa378fec116..92b44ebd2e6 100644 --- a/docs-aspnet/redirects.conf +++ b/docs-aspnet/redirects.conf @@ -106,6 +106,6 @@ rewrite ^/{{ site.platform }}/{{ directory.path }}/?$ ## # Remove HTML extension ## -rewrite ^(/.*)\.html(\?.*)?$ +rewrite ^(/{{ site.platform }}/.*)\.html(\?.*)?$ $1$2 permanent; diff --git a/docs/redirects.conf b/docs/redirects.conf index 4089fe8acac..21c5bcafd5a 100644 --- a/docs/redirects.conf +++ b/docs/redirects.conf @@ -455,6 +455,6 @@ rewrite ^/kendo-ui/{{ directory.path }}/?$ ## # Remove HTML extension ## -rewrite ^(/.*)\.html(\?.*)?$ +rewrite ^(/kendo-ui/.*)\.html(\?.*)?$ $1$2 permanent; diff --git a/docs/styles-and-layout/cards.md b/docs/styles-and-layout/cards.md index 12da697f01a..14b03df0e83 100644 --- a/docs/styles-and-layout/cards.md +++ b/docs/styles-and-layout/cards.md @@ -28,8 +28,9 @@ The Card can accommodate the following elements: * [Header](#header) * [Body](#body) +* [Footer](#footer) * [Actions](#actions) -* [Images](#images) +* [Media](#media) * [Separators](#separators) ### Header @@ -81,6 +82,18 @@ The main content of a card is the body which can be defined through the `.k-card ``` +### Footer + +The main content of a card is the body which can be defined through the `.k-card-body` class. + +```dojo +
+
+ Card Footer +
+
+``` + ### Actions You can add a list of actions to a Card by using the `.k-card-actions` class. @@ -120,7 +133,7 @@ To achieve a consistent styling, each action can be wrapped in a `.k-card-action ``` -The actions can be stretched to take the entire container by adding the `.k-card-actions-stretched`. +The actions can be stretched to take the entire container by adding the `.k-card-actions-stretched` class. ```dojo
@@ -140,6 +153,66 @@ The actions can be stretched to take the entire container by adding the `.k-card
``` +The actions can be centered inside the container by adding the `.k-card-actions-center` class: + +```dojo +
+
+
Card Title
+
Card Subtitle
+

Some quick example text to build on the card title and make up the bulk of the card content.

+
+
+ + Action 1 + + + Action 2 + +
+
+``` + +The actions can be aligned at the start of the container with the `.k-card-actions-start` class: + +```dojo +
+
+
Card Title
+
Card Subtitle
+

Some quick example text to build on the card title and make up the bulk of the card content.

+
+
+ + Action 1 + + + Action 2 + +
+
+``` + +The actions can be aligned at the end of the container with the `.k-card-actions-end` class: + +```dojo +
+
+
Card Title
+
Card Subtitle
+

Some quick example text to build on the card title and make up the bulk of the card content.

+
+
+ + Action 1 + + + Action 2 + +
+
+``` + The actions can also be forced to display vertically through the `.k-card-actions-vertical` class. ```dojo @@ -156,9 +229,11 @@ The actions can also be forced to display vertically through the `.k-card-action ``` -### Images +### Media -Cards support images through the `.k-card-image` class. +The Cards allows you to display an image or video within its content. + +Images can be added through the `.k-card-image` class. ```
@@ -172,9 +247,29 @@ Cards support images through the `.k-card-image` class.
``` +Videos can be added through the `.k-card-media` class. + +``` +
+
+
DevReach
+
+ +
+

DevReach 2019 Day 2 Morning Keynote: Technical Leadership: Lessons Learned at NASA with Jody Davis

+
+ +
+ + + +
+
+``` + ### Separators -To include Card separators, use the `.k-hr` class. +To include Card separators, use the `.k-card-separator` class. ```dojo
@@ -184,7 +279,7 @@ To include Card separators, use the `.k-hr` class.
Card Subtitle

Some quick example text to build on the card title and make up the bulk of the card content.

-
+
Card Title
Card Subtitle
@@ -194,6 +289,8 @@ To include Card separators, use the `.k-hr` class.
``` +To specify a vertical orientation for the separator add the `.k-card-separator-vertical` class to the separator element. + ## Layout Cards expose additional classes that are used for laying out series of cards. @@ -324,6 +421,68 @@ To render Cards that are detached from one another on a single row, use the `.k- ``` +### Custom layout + +Positioning a horizontal flex container element inside the card could be achieved with the `.k-hbox` class: + +``` +
+
+
Card Title
+
Card Subtitle
+
+
+
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+ Action 1 + Action 2 +
+
+
+``` + +Positioning a vertical flex container element inside the card could be achieved with the `.k-vbox` class: + +``` +
+
+
+
Card Title
+
Card Subtitle
+
+
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+ Action 1 + Action 2 +
+
+
+``` + +### Orientation + +The Card content can be arranged vertically or horizontally through the `.k-card-vertical` and `.k-card-horizontal` classes: + +``` +
+
+
Sofia
+
Sunny
+
+
+
2ºC
+
+
+ + +
+
+``` + ## Styles Cards provide predefined state classes that you can use to change the Card appearance. diff --git a/styles/web/common/all.less b/styles/web/common/all.less index 7720687b929..6edbc87d092 100644 --- a/styles/web/common/all.less +++ b/styles/web/common/all.less @@ -1,5 +1,6 @@ @import "mixins.less"; @import "flex.less"; +@import "flex-containers.less"; @import "base.less"; @import "button.less"; @import "responsivepanel.less"; diff --git a/styles/web/common/base.less b/styles/web/common/base.less index aa4397f9de5..2b2433627b7 100644 --- a/styles/web/common/base.less +++ b/styles/web/common/base.less @@ -650,3 +650,24 @@ div.k-window-content .k-flip-h { transform: scaleX(-1); } .k-flip-v { transform: scaleY(-1); } .k-flip-h.k-flip-v { transform: scale(-1, -1); } + +// Text align +.k-text-align-left, +.k-text-left { + text-align: left; +} + +.k-text-align-center, +.k-text-center { + text-align: center; +} + +.k-text-align-right, +.k-text-right { + text-align: right; +} + +.k-text-align-justify, +.k-text-justify { + text-align: justify; +} diff --git a/styles/web/common/flex-containers.less b/styles/web/common/flex-containers.less new file mode 100644 index 00000000000..5ae4d82b913 --- /dev/null +++ b/styles/web/common/flex-containers.less @@ -0,0 +1,13 @@ +// Horizonatal and vertical boxes +.k-hbox, .k-vbox { display: flex; } +.k-ihbox, .k-ivbox { display: inline-flex; } + +.k-hbox, .k-ihbox { flex-direction: row; } +.k-vbox, .k-ivbox { flex-direction: column; } + + +// Columns +.k-column { + flex-grow: 1; + flex-basis: 0; +}