@progress/kendo-theme-default 5.0.0-next.2 → 5.0.0

package/scss/button/_variables.scss

@@ -1,132 +1,201 @@
 // Button
 
-/// Width of border around buttons
-/// @group buttons
-$button-border-width: 1px !default;
-/// Border radius of buttons
-/// @group buttons
-$button-border-radius: $border-radius !default;
-
-/// Horizontal padding of buttons
-/// @group buttons
-$button-padding-x: $padding-x !default;
-/// Vertical padding of buttons
-/// @group buttons
-$button-padding-y: $padding-y !default;
-$button-font-family: $font-family !default;
-$button-font-size: $font-size !default;
-$button-line-height: $line-height !default;
-
-$button-padding-x-sm: $button-padding-x / 2 !default;
-$button-padding-y-sm: $button-padding-y / 2 !default;
-$button-line-height-sm: $line-height-sm !default;
-
-$button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} + #{$button-border-width * 2} ) !default;
-$button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
-
-/// The background of the buttons.
-/// @group buttons
-$button-bg: #f5f5f5 !default;
-/// The text color of the buttons.
-/// @group buttons
-$button-text: #424242 !default;
-/// The border color of the buttons.
-/// @group buttons
-$button-border: rgba( black, .08 ) !default;
-/// The background gradient of the buttons.
-/// @group buttons
-$button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
-$button-shadow: null !default;
-
-/// The background of hovered buttons.
-/// @group buttons
-$button-hovered-bg: try-shade( $button-bg, .5 ) !default;
-/// The text color of hovered buttons.
-/// @group buttons
-$button-hovered-text: null !default;
-/// The border color of hovered buttons.
-/// @group buttons
-$button-hovered-border: null !default;
-/// The background gradient of hovered buttons.
-/// @group buttons
-$button-hovered-gradient: null !default;
-$button-hovered-shadow: null !default;
-
-/// The background color of active buttons.
-/// @group buttons
-$button-active-bg: try-shade( $button-bg, 1.5 ) !default;
-/// The text color of active buttons.
-/// @group buttons
-$button-active-text: null !default;
-/// The border color of active buttons.
-/// @group buttons
-$button-active-border: null !default;
-/// The background gradient of active buttons.
-/// @group buttons
-$button-active-gradient: null !default;
-$button-active-shadow: null !default;
-
-/// The background color of selected buttons.
-/// @group buttons
-$button-selected-bg: $primary !default;
+/// Width of the border around the button.
+/// @group button
+$kendo-button-border-width: 1px !default;
+
+/// Border radius of the button.
+/// @group button
+$kendo-button-border-radius: null !default;
+
+/// Horizontal padding of the button.
+/// @group button
+$kendo-button-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-lg: map-get( $spacing, 2 ) !default;
+
+/// Vertical padding of the button.
+/// @group button
+$kendo-button-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+
+/// Font family of the button.
+/// @group button
+$kendo-button-font-family: $font-family !default;
+
+/// Font sizes of the button.
+/// @group button
+$kendo-button-font-size: $font-size-md !default;
+$kendo-button-font-size-sm: $font-size-md !default;
+$kendo-button-font-size-md: $font-size-md !default;
+$kendo-button-font-size-lg: $font-size-md !default;
+
+/// Line heights used along with $font-size.
+/// @group button
+$kendo-button-line-height: $line-height-md !default;
+$kendo-button-line-height-sm: $line-height-md !default;
+$kendo-button-line-height-md: $line-height-md !default;
+$kendo-button-line-height-lg: $line-height-md !default;
+
+/// Calculated height of the button.
+/// @group button
+$kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
+
+/// Calculated inner height of the button. Without the border width.
+/// @group button
+$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
+
+$kendo-button-arrow-padding-x: $kendo-button-padding-y !default;
+$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
+
+/// Theme colors map for the button.
+/// @group button
+$kendo-button-theme-colors: map-merge(
+    $theme-colors,
+    ( "base": #f5f5f5 )
+) !default;
+
+/// The base background of the button.
+/// @group button
+$kendo-button-bg: #f5f5f5 !default;
+/// The base text color of the button.
+/// @group button
+$kendo-button-text: #424242 !default;
+/// The base border color of the button.
+/// @group button
+$kendo-button-border: rgba( black, .08 ) !default;
+/// The base background gradient of the button.
+/// @group button
+$kendo-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
+/// The base shadow of the button.
+/// @group button
+$kendo-button-shadow: null !default;
+
+/// The base background of hovered button.
+/// @group button
+$kendo-button-hover-bg: try-shade( $kendo-button-bg, .5 ) !default;
+/// The base text color of hovered button.
+/// @group button
+$kendo-button-hover-text: null !default;
+/// The base border color of hovered button.
+/// @group button
+$kendo-button-hover-border: null !default;
+/// The base background gradient of hovered button.
+/// @group button
+$kendo-button-hover-gradient: null !default;
+/// The base shadow of hovered button.
+/// @group button
+$kendo-button-hover-shadow: null !default;
+
+/// The base background color of active button.
+/// @group button
+$kendo-button-active-bg: try-shade( $kendo-button-bg, 1.5 ) !default;
+/// The base text color of active button.
+/// @group button
+$kendo-button-active-text: null !default;
+/// The base border color of active button.
+/// @group button
+$kendo-button-active-border: null !default;
+/// The base background gradient of active button.
+/// @group button
+$kendo-button-active-gradient: null !default;
+/// The base shadow of active button.
+/// @group button
+$kendo-button-active-shadow: null !default;
+
+/// The base background color of selected button.
+/// @group button
+$kendo-button-selected-bg: $primary !default;
 /// The text color of selected buttons.
-/// @group buttons
-$button-selected-text: contrast-wcag( $button-selected-bg ) !default;
+/// @group button
+$kendo-button-selected-text: contrast-wcag( $kendo-button-selected-bg ) !default;
 /// The border color of selected buttons.
-/// @group buttons
-$button-selected-border: $button-selected-bg !default;
+/// @group button
+$kendo-button-selected-border: $kendo-button-selected-bg !default;
 /// The background gradient of selected buttons.
-/// @group buttons
-$button-selected-gradient: null !default;
-$button-selected-shadow: null !default;
-
-/// The shadow of focused buttons.
-/// @group buttons
-$button-focused-shadow: 0 0 0 2px rgba( $button-border, .08 ) !default;
-
-
-// Disabled button
-$button-disabled-bg: null !default;
-$button-disabled-text: null !default;
-$button-disabled-border: null !default;
-$button-disabled-gradient: null !default;
-$button-disabled-shadow: null !default;
-
-
-// Primary button
-$primary-button-bg: $primary !default;
-$primary-button-text: contrast-wcag( $primary-button-bg ) !default;
-$primary-button-border: $primary-button-bg !default;
-$primary-button-gradient: rgba( black, 0 ), rgba( black, .04 ) !default;
-$primary-button-shadow: null !default;
-
-$primary-button-hovered-bg: try-shade( $primary-button-bg, .5 ) !default;
-$primary-button-hovered-text: null !default;
-$primary-button-hovered-border: $primary-button-hovered-bg !default;
-$primary-button-hovered-gradient: null !default;
-$primary-button-hovered-shadow: null !default;
-
-$primary-button-active-bg: try-shade( $primary-button-bg, 1.5 ) !default;
-$primary-button-active-text: null !default;
-$primary-button-active-border: $primary-button-active-bg !default;
-$primary-button-active-gradient: null !default;
-$primary-button-active-shadow: null !default;
-
-$primary-button-selected-bg: $primary-button-active-bg !default;
-$primary-button-selected-text: $primary-button-active-text !default;
-$primary-button-selected-border: $primary-button-active-border !default;
-$primary-button-selected-gradient: null !default;
-$primary-button-selected-shadow: null !default;
-
-$primary-button-focused-shadow: 0 0 0 2px rgba( $primary-button-border, .3 ) !default;
-
-$button-group-focus-shadow: inset 0 0 0 2px rgba( $button-border, opacity( $button-border ) * 2 );
-
-$flat-button-hover-opacity: .04 !default;
-$flat-button-focus-opacity: null !default;
-$flat-button-active-opacity: .16 !default;
-$flat-button-selected-opacity: .2 !default;
-
-$clear-button-text: inherit !default;
-$clear-button-hover-text: inherit !default;
-$clear-button-focused-opacity: .1 !default;
+/// @group button
+$kendo-button-selected-gradient: $kendo-button-active-gradient !default;
+/// The base shadow of selected button.
+/// @group button
+$kendo-button-selected-shadow: $kendo-button-active-shadow !default;
+
+/// The base background of focused button.
+/// @group button
+$kendo-button-focus-bg: null !default;
+/// The base text color of focused button.
+/// @group button
+$kendo-button-focus-text: null !default;
+/// The base border color of focused button.
+/// @group button
+$kendo-button-focus-border: null !default;
+/// The base background gradient of focused button.
+/// @group button
+$kendo-button-focus-gradient: null !default;
+/// The base shadow of focused button.
+/// @group button
+$kendo-button-focus-shadow: 0 0 0 2px rgba( $kendo-button-border, .08 ) !default;
+
+/// The base background of disabled button.
+/// @group button
+$kendo-button-disabled-bg: null !default;
+/// The base text color of disabled button.
+/// @group button
+$kendo-button-disabled-text: null !default;
+/// The base border color of disabled buttons.
+/// @group button
+$kendo-button-disabled-border: null !default;
+/// The base background gradient of disabled button.
+/// @group button
+$kendo-button-disabled-gradient: null !default;
+/// The base shadow of disabled button.
+/// @group button
+$kendo-button-disabled-shadow: null !default;
+
+// Solid button
+$kendo-solid-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
+$kendo-solid-button-shade-function: "try-shade";
+$kendo-solid-button-shade-text-amount: 0 !default;
+$kendo-solid-button-shade-bg-amount: 0 !default;
+$kendo-solid-button-shade-border-amount: 0 !default;
+$kendo-solid-button-hover-shade-text-amount: null !default;
+$kendo-solid-button-hover-shade-bg-amount: .5 !default;
+$kendo-solid-button-hover-shade-border-amount: .5 !default;
+$kendo-solid-button-active-shade-text-amount: null !default;
+$kendo-solid-button-active-shade-bg-amount: 1.5 !default;
+$kendo-solid-button-active-shade-border-amount: 1.5 !default;
+$kendo-solid-button-shadow: true !default;
+$kendo-solid-button-shadow-blur: 0px !default;
+$kendo-solid-button-shadow-spread: 2px !default;
+$kendo-solid-button-shadow-opacity: .3 !default;
+
+// Outline button
+$kendo-outline-button-shadow: true !default;
+$kendo-outline-button-shadow-blur: 0px !default;
+$kendo-outline-button-shadow-spread: 2px !default;
+$kendo-outline-button-shadow-opacity: .3 !default;
+
+// Link button
+$kendo-link-button-shadow: true !default;
+$kendo-link-button-shadow-blur: 0px !default;
+$kendo-link-button-shadow-spread: 2px !default;
+$kendo-link-button-shadow-opacity: .3 !default;
+
+/// The overlay opacity of hovered flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-hover-opacity: .04 !default;
+/// The overlay opacity of focused flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-focus-opacity: null !default;
+/// The overlay opacity of active flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-active-opacity: .16 !default;
+/// The overlay opacity of selected flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-selected-opacity: .2 !default;
+
+/// The color transition of the flat button.
+/// @group button
+$kendo-button-transition: color .2s ease-in-out !default;

package/scss/button/index.md

@@ -0,0 +1,3 @@
+## Default theme test content
+
+Here we can write down Default Theme specific content

package/scss/calendar/_index.scss

@@ -5,6 +5,7 @@
 @import "../common/_index.scss";
 @import "../button/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/calendar/_layout.scss

@@ -293,7 +293,7 @@
                 display: block;
                 position: absolute;
                 bottom: 0;
-                content: " ";
+                content: "\200b";
                 height: 0;
                 line-height: 0;
                 z-index: 1;
@@ -331,7 +331,7 @@
         &::after {
             display: block;
             position: absolute;
-            content: " ";
+            content: "\200b";
             height: 0;
             line-height: 0;
             z-index: 1;
@@ -430,18 +430,6 @@
 
 
 
-
-@include exports("daterangepicker/layout") {
-
-    // jQuery DateRangePicker
-    .k-widget.k-daterangepicker {
-        border: 0;
-    }
-
-}
-
-
-
 @include exports("calendar/layout/rtl") {
 
     .k-rtl .k-calendar,

package/scss/calendar/_theme.scss

@@ -113,7 +113,7 @@
             );
         }
         .k-calendar-td.k-state-focused .k-link,
-        .k-calendar-td.k-state-focus .k-link  {
+        .k-calendar-td.k-state-focus .k-link {
             box-shadow: $calendar-cell-focused-shadow;
         }
         .k-calendar-td.k-state-selected.k-state-focused .k-link,
@@ -187,15 +187,15 @@
         .k-range-end,
         .k-range-mid {
             // sass-lint:disable-block indentation
-            background-image: linear-gradient(
-                transparent $calendar-range-gap,
-                $calendar-range-bg $calendar-range-gap,
-                $calendar-range-bg calc(100% - #{$calendar-range-gap}),
-                transparent calc(100% - #{$calendar-range-gap})
-            );
-
-            .k-ie &,
-            .k-edge & {
+            background-image:
+                linear-gradient(
+                    transparent $calendar-range-gap,
+                    $calendar-range-bg $calendar-range-gap,
+                    $calendar-range-bg calc(100% - #{$calendar-range-gap}),
+                    transparent calc(100% - #{$calendar-range-gap})
+                );
+
+            .k-ie & {
                 background-image: none;
                 background-color: $calendar-range-bg;
             }
@@ -248,20 +248,3 @@
     }
 
 }
-
-
-
-
-@include exports( "daterangepicker/theme" ) {
-
-    //jQuery DateRangePicker
-    .k-daterangepicker {
-        // Invalid
-        &.k-state-invalid {
-            .k-dateinput-wrap {
-                border-color: $invalid-border;
-            }
-        }
-    }
-
-}

package/scss/captcha/_index.scss

@@ -6,7 +6,9 @@
 @import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../input/_index.scss";
+@import "../button/_index.scss";
 @import "../textbox/_index.scss";
+@import "../slider/_index.scss";
 
 
 // Component

package/scss/captcha/_layout.scss

@@ -8,9 +8,14 @@
         font-family: $captcha-font-family;
         line-height: $captcha-line-height;
         display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
+        flex-flow: column nowrap;
         gap: $captcha-gap;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Image
@@ -47,11 +52,6 @@
         height: 100%;
     }
 
-    // Input
-    .k-captcha-input > .k-textbox {
-        width: 100%;
-    }
-
     // Verification Success
     .k-captcha-validation-message {
         margin-top: $captcha-validation-message-margin-top;

package/scss/captcha/_variables.scss

@@ -8,7 +8,7 @@ $captcha-line-height: $line-height !default;
 $captcha-gap: $captcha-spacer !default;
 $captcha-bg: $component-bg !default;
 $captcha-text: $component-bg !default;
-$captcha-border: $component-bg  !default;
+$captcha-border: $component-bg !default;
 
 $captcha-image-wrap-gap: $captcha-spacer !default;
 

package/scss/card/_layout.scss

@@ -27,6 +27,12 @@
         overflow: hidden;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
     .k-card > .k-card-inner {
         @include border-radius( $card-inner-border-radius );
@@ -37,8 +43,8 @@
 
 
     // Card orientation
-    .k-card-horizontal  { flex-flow: row nowrap; }
-    .k-card-vertical    { flex-flow: column nowrap; }
+    .k-card-horizontal  { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-vertical    { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
 
 
     // Header
@@ -187,61 +193,23 @@
         flex-shrink: 0;
         flex-basis: auto;
         gap: $card-actions-gap;
-
-        > .k-button {
-            padding-left: calc( #{$card-body-padding-x} - ( #{$card-actions-padding-x} + #{$button-border-width} ) );
-            padding-right: calc( #{$card-body-padding-x} - ( #{$card-actions-padding-x} + #{$button-border-width} ) );
-            max-width: 100%;
-            white-space: normal;
-        }
     }
 
 
     // Actions align
-    .k-card-actions-start       { justify-content: flex-start; }
-    .k-card-actions-end         { justify-content: flex-end; }
-    .k-card-actions-center      { justify-content: center; }
+    .k-card-actions-start       { justify-content: flex-start; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-actions-end         { justify-content: flex-end; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-actions-center      { justify-content: center; } // stylelint-disable-line block-opening-brace-space-before
 
 
     // Actions orientation
-    .k-card-actions-horizontal  { flex-flow: row nowrap; }
-    .k-card-actions-vertical    { flex-flow: column nowrap; }
+    .k-card-actions-horizontal  { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-actions-vertical    { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
 
 
-    // Streched actions
-    .k-card-actions-stretched {
-        padding: 0;
-        gap: 0;
-
-        > .k-button,
-        > .k-card-action {
-            flex: 1 1 auto;
-        }
-
-        // TODO: refactor once we have button size
-        .k-button {
-            @include border-radius( 0 );
-            padding-top: calc( #{$card-actions-padding-y} + #{$button-padding-y} );
-            padding-bottom: calc( #{$card-actions-padding-y} + #{$button-padding-y} );
-        }
-
-        .k-card & {
-            border-top-width: $card-actions-border-width;
-        }
-        .k-card-horizontal > & {
-            border-top-width: 0;
-            border-inline-start-width: $card-actions-border-width;
-        }
-        .k-card-vertical > & {
-            border-top-width: $card-actions-border-width;
-        }
-
-        &.k-card-actions-horizontal > .k-card-action + .k-card-action {
-            border-inline-start-width: $card-actions-border-width;
-        }
-        &.k-card-actions-vertical > .k-card-action + .k-card-action {
-            border-top-width: $card-actions-border-width;
-        }
+    // Stretched actions
+    .k-card-actions-stretched > * {
+        flex: 1 1 auto;
     }
 
 
@@ -251,10 +219,6 @@
         border-style: solid;
         border-color: inherit;
         display: inline-flex;
-
-        > .k-button {
-            flex: 1 1 auto;
-        }
     }
 
 
@@ -324,8 +288,7 @@
     // Group
     .k-card-group {
         display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         align-items: stretch;
         flex: 0 0 auto;
 
@@ -368,6 +331,7 @@
         height: $card-callout-height;
         border-width: $card-border-width $card-border-width 0 0;
         border-style: solid;
+        box-sizing: border-box;
         position: absolute;
     }
 
@@ -416,33 +380,6 @@
 
 
 
-@include exports("card/layout/rtl") {
-
-    .k-rtl,
-    [dir="rtl"] {
-
-        .k-card-actions-stretched {
-            .k-card-action + .k-card-action {
-                border-right-width: $card-actions-border-width;
-                border-left-width: 0;
-            }
-        }
-
-        .k-card-horizontal {
-            > .k-card-actions-stretched,
-            .k-card-actions-vertical {
-                border-right-width: $card-actions-border-width;
-                border-left-width: 0;
-            }
-        }
-
-    }
-
-}
-
-
-
-
 @include exports("card/layout/ie11") {
 
     .k-ie11 {

package/scss/card/_theme.scss

@@ -40,7 +40,8 @@
 
 
     // Separator
-    .k-card-separator {
+    .k-card-separator,
+    .k-card .k-separator {
         border-color: $card-border;
     }