feat: provide styling for action buttons

telerik · Jul 30, 2020 · d852003 · d852003
1 parent fe4f8ad
commit d852003
Show file tree

Hide file tree

Showing 9 changed files with 345 additions and 0 deletions.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -1697,6 +1697,7 @@ $actions-text: null !default;
 $actions-border: null !default;
 $actions-gradient: null !default;
 
+$actions-stretched-border: $base-border !default;
 
 // Toolbar
 

diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -1704,6 +1704,8 @@ $actions-text: null !default;
 $actions-border: null !default;
 $actions-gradient: null !default;
 
+$actions-stretched-border: $base-border !default;
+
 
 // Toolbar
 

diff --git a/packages/default/scss/action-buttons/_layout.scss b/packages/default/scss/action-buttons/_layout.scss
@@ -32,4 +32,58 @@
         margin-top: $actions-margin-top;
     }
 
+    .k-actions {
+        justify-content: flex-start;
+
+        .k-button {
+            flex: 0 1 auto;
+        }
+
+        &.k-actions-start {
+            justify-content: flex-start;
+        }
+
+        &.k-actions-center {
+            justify-content: center;
+        }
+
+        &.k-actions-end {
+            justify-content: flex-end;
+        }
+
+        &.k-actions-stretched {
+            padding: 0;
+            align-items: stretch;
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: 0;
+            border-width: 1px 0 0;
+            border-style: solid;
+            display: flex;
+            flex-direction: row;
+            flex-shrink: 0;
+            flex-basis: auto;
+            overflow: hidden;
+
+            .k-button {
+                background-clip: border-box;
+                border-radius: 0;
+                padding: 12px 16px;
+                border-width: 0;
+                text-overflow: ellipsis;
+                flex: 1 0 0%;
+                flex-grow: 1;
+                display: inline-block;
+                overflow: hidden;
+
+                width: auto !important; // sass-lint:disable-line no-important
+                max-width: 100%;
+
+                ~ .k-button {
+                    margin: 0;
+                    border-left-width: 1px;
+                }
+            }
+        }
+    }
+
 }
diff --git a/packages/default/scss/action-buttons/_theme.scss b/packages/default/scss/action-buttons/_theme.scss
@@ -11,4 +11,7 @@
         );
     }
 
+    .k-actions-stretched {
+        border-color: $actions-stretched-border;
+    }
 }
diff --git a/packages/default/scss/datetime/_layout.scss b/packages/default/scss/datetime/_layout.scss
@@ -237,6 +237,16 @@
             }
         }
 
+        .k-actions {
+            &.k-actions-start,
+            &.k-actions-center,
+            &.k-actions-end {
+                .k-button {
+                    flex: 0 1 auto;
+                }
+            }
+        }
+
         .k-rtl &,
         &.k-rtl,
         [dir="rtl"] &,
@@ -316,6 +326,16 @@
                 flex: 1 1 50%;
             }
         }
+
+        .k-actions {
+            &.k-actions-start,
+            &.k-actions-center,
+            &.k-actions-end {
+                .k-button {
+                    flex: 0 1 auto;
+                }
+            }
+        }
     }
 
 

diff --git a/packages/default/scss/grid/_layout.scss b/packages/default/scss/grid/_layout.scss
@@ -1191,6 +1191,16 @@
                 flex: 1 1 50%;
             }
         }
+
+        .k-actions {
+            &.k-actions-start,
+            &.k-actions-center,
+            &.k-actions-end {
+                .k-button {
+                    flex: 0 1 auto;
+                }
+            }
+        }
     }
 
     .k-multicheck-wrap {
@@ -1288,6 +1298,16 @@
                 flex: 1 1 50%;
             }
         }
+
+        .k-actions {
+            &.k-actions-start,
+            &.k-actions-center,
+            &.k-actions-end {
+                .k-button {
+                    flex: 0 1 auto;
+                }
+            }
+        }
     }
 
     .k-column-menu {

diff --git a/packages/default/scss/spreadsheet/_layout.scss b/packages/default/scss/spreadsheet/_layout.scss
@@ -679,6 +679,15 @@
             }
         }
 
+        .k-actions {
+            &.k-actions-start,
+            &.k-actions-center,
+            &.k-actions-end {
+                .k-button {
+                    flex: 0 1 auto;
+                }
+            }
+        }
     }
 
 }

diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
@@ -1747,6 +1747,8 @@ $actions-text: null !default;
 $actions-border: null !default;
 $actions-gradient: null !default;
 
+$actions-stretched-border: $base-border !default;
+
 
 // Toolbar