Sync with Kendo UI Professional

telerik · Feb 19, 2020 · c263401 · c263401
1 parent 99e6681
commit c263401
Show file tree

Hide file tree

Showing 6 changed files with 202 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
 </div>
 ```
 
+### Footer
+
+The main content of a card is the body which can be defined through the `.k-card-body` class.
+
+```dojo
+<div class="k-card" style="width: 300px;">
+    <div class="k-card-footer">
+        <span>Card Footer</span>
+    </div>
+</div>
+```
+
 ### 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
 </div>
 ```
 
-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
 <div class="k-card" style="width: 300px;">
@@ -140,6 +153,66 @@ The actions can be stretched to take the entire container by adding the `.k-card
 </div>
 ```
 
+The actions can be centered inside the container by adding the `.k-card-actions-center` class:
+
+```dojo
+<div class="k-card" style="width: 300px;">
+    <div class="k-card-body">
+        <h5 class="k-card-title">Card Title</h5>
+        <h6 class="k-card-subtitle">Card Subtitle</h6>
+        <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
+    </div>
+    <div class="k-card-actions k-card-actions-center">
+        <span class="k-card-action">
+            <span class="k-button k-flat k-primary">Action 1</span>
+        </span>
+        <span class="k-card-action">
+            <span class="k-button k-flat k-primary">Action 2</span>
+        </span>
+    </div>
+</div>
+```
+
+The actions can be aligned at the start of the container with the `.k-card-actions-start` class:
+
+```dojo
+<div class="k-card" style="width: 300px;">
+    <div class="k-card-body">
+        <h5 class="k-card-title">Card Title</h5>
+        <h6 class="k-card-subtitle">Card Subtitle</h6>
+        <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
+    </div>
+    <div class="k-card-actions k-card-actions-start">
+        <span class="k-card-action">
+            <span class="k-button k-flat k-primary">Action 1</span>
+        </span>
+        <span class="k-card-action">
+            <span class="k-button k-flat k-primary">Action 2</span>
+        </span>
+    </div>
+</div>
+```
+
+The actions can be aligned at the end of the container with the `.k-card-actions-end` class:
+
+```dojo
+<div class="k-card" style="width: 300px;">
+    <div class="k-card-body">
+        <h5 class="k-card-title">Card Title</h5>
+        <h6 class="k-card-subtitle">Card Subtitle</h6>
+        <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
+    </div>
+    <div class="k-card-actions k-card-actions-end">
+        <span class="k-card-action">
+            <span class="k-button k-flat k-primary">Action 1</span>
+        </span>
+        <span class="k-card-action">
+            <span class="k-button k-flat k-primary">Action 2</span>
+        </span>
+    </div>
+</div>
+```
+
 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
 </div>
 ```
 
-### 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.
 
 ```
 <div class="k-card" style="width: 300px;">
@@ -172,9 +247,29 @@ Cards support images through the `.k-card-image` class.
 </div>
 ```
 
+Videos can be added through the `.k-card-media` class.
+
+```
+<div class="k-card k-card-vertical">
+    <div class="k-card-header k-display-flex k-align-items-center ">
+        <h5 class="k-card-title">DevReach</h5>
+    </div>
+    <iframe height="267" src="https://www.youtube.com/embed/00EMMRFocNs" class="k-card-media"></iframe>
+    <div class="k-card-body">
+        <p><strong>DevReach 2019 Day 2 Morning Keynote:</strong> Technical Leadership: Lessons Learned at NASA with Jody Davis</p>
+    </div>
+    <span class="k-card-separator"></span>
+    <div class="k-card-actions">
+        <span class="k-button k-flat k-button-icon"><span class="k-icon k-i-heart-outline"></span></span>
+        <span class="k-button k-flat k-button-icon"><span class="k-icon k-i-comment"></span></span>
+        <span class="k-button k-flat k-button-icon"><span class="k-icon k-i-share"></span></span>
+    </div>
+</div>
+```
+
 ### Separators
 
-To include Card separators, use the `.k-hr` class.
+To include Card separators, use the `.k-card-separator` class.
 
 ```dojo
 <div class="k-card" style="width: 300px;">
@@ -184,7 +279,7 @@ To include Card separators, use the `.k-hr` class.
             <h6 class="k-card-subtitle">Card Subtitle</h6>
             <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
         </div>
-        <hr class="k-hr" />
+        <hr class="k-card-separator" />
         <div class="k-card-body">
             <h5 class="k-card-title">Card Title</h5>
             <h6 class="k-card-subtitle">Card Subtitle</h6>
@@ -194,6 +289,8 @@ To include Card separators, use the `.k-hr` class.
 </div>
 ```
 
+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-
     </div>
 ```
 
+### Custom layout
+
+Positioning a horizontal flex container element inside the card could be achieved with the `.k-hbox` class:
+
+```
+<div class="k-card k-card-horizontal">
+    <div class="k-card-header">
+        <h5 class="k-card-title">Card Title</h5>
+        <h6 class="k-card-subtitle">Card Subtitle</h6>
+    </div>
+    <div class="k-hbox">
+        <div class="k-card-body">
+            <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        </div>
+        <div class="k-card-actions k-card-actions-stretched k-card-actions-horizontal">
+            <span class="k-button k-flat">Action 1</span>
+            <span class="k-button k-flat k-primary">Action 2</span>
+        </div>
+    </div>
+</div>
+```
+
+Positioning a vertical flex container element inside the card could be achieved with the `.k-vbox` class:
+
+```
+<div class="k-card k-card-horizontal">
+    <div class="k-vbox">
+        <div class="k-card-header">
+            <h5 class="k-card-title">Card Title</h5>
+            <h6 class="k-card-subtitle">Card Subtitle</h6>
+        </div>
+        <div class="k-card-body">
+            <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        </div>
+        <div class="k-card-actions k-card-actions-stretched k-card-actions-horizontal">
+            <span class="k-button k-flat">Action 1</span>
+            <span class="k-button k-flat k-primary">Action 2</span>
+        </div>
+    </div>
+</div>
+```
+
+### Orientation
+
+The Card content can be arranged vertically or horizontally through the `.k-card-vertical` and `.k-card-horizontal` classes:
+
+```
+<div class="k-card k-card-vertical k-text-center">
+    <div class="k-card-header">
+        <h5 class="k-card-title">Sofia</h5>
+        <h6 class="k-card-subtitle">Sunny</h6>
+    </div>
+    <div class="k-card-body">
+        <div>2&ordm;C</div>
+    </div>
+    <div class="k-card-actions k-card-actions-stretched k-card-actions-horizontal">
+        <button class="k-button k-flat">Action 1</button>
+        <button class="k-button k-primary k-flat">Action 2</button>
+    </div>
+</div>
+```
+
 ## 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
@@ -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
@@ -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
@@ -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;
+}