@progress/kendo-theme-bootstrap 10.1.0-dev.5 → 10.1.0

package/scss/input/_variables.scss

@@ -12,7 +12,7 @@ $kendo-input-default-width: 100% !default;
 
 /// The border width of the Input components.
 /// @group input
-$kendo-input-border-width: k-spacing(1px) !default;
+$kendo-input-border-width: 1px !default;
 $kendo-input-border-height: calc( #{ $kendo-input-border-width } * 2 ) !default;
 /// The border radius of the Input components.
 /// @group input
@@ -74,6 +74,13 @@ $kendo-input-md-line-height: var( --kendo-line-height, normal) !default;
 /// @group input
 $kendo-input-lg-line-height: var( --kendo-line-height, normal) !default;
 
+/// The calculated height of the Input.
+/// @group input
+$kendo-input-calc-size: calc( ( #{$kendo-input-line-height} * 1em ) + ( #{$kendo-input-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-sm-calc-size: calc( ( #{$kendo-input-sm-line-height} * 1em ) + ( #{$kendo-input-sm-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-md-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-lg-calc-size: calc( ( #{$kendo-input-lg-line-height} * 1em ) + ( #{$kendo-input-lg-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+
 /// The sizes map for the Input components.
 /// @group input
 $kendo-input-sizes: (
@@ -464,6 +471,10 @@ $kendo-picker-flat-hover-focus-border: null !default;
     $kendo-input-sm-line-height: $kendo-input-sm-line-height,
     $kendo-input-md-line-height: $kendo-input-md-line-height,
     $kendo-input-lg-line-height: $kendo-input-lg-line-height,
+    $kendo-input-calc-size: $kendo-input-calc-size,
+    $kendo-input-sm-calc-size: $kendo-input-sm-calc-size,
+    $kendo-input-md-calc-size: $kendo-input-md-calc-size,
+    $kendo-input-lg-calc-size: $kendo-input-lg-calc-size,
     $kendo-input-sizes: $kendo-input-sizes,
     $kendo-input-bg: $kendo-input-bg,
     $kendo-input-text: $kendo-input-text,

package/scss/otp/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-otp--styles() {
+    @include import-once( "otp" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-otp--layout();
+        @include kendo-otp--theme();
+    }
+}

package/scss/otp/_layout.scss

@@ -0,0 +1,5 @@
+@use "@progress/kendo-theme-default/scss/otp/_layout.scss" as *;
+
+@mixin kendo-otp--layout() {
+    @include kendo-otp--layout-base();
+}

package/scss/otp/_theme.scss

@@ -0,0 +1,5 @@
+@use "@progress/kendo-theme-default/scss/otp/_theme.scss" as *;
+
+@mixin kendo-otp--theme() {
+    @include kendo-otp--theme-base();
+}

package/scss/otp/_variables.scss

@@ -0,0 +1,77 @@
+@use "../core/_index.scss" as *;
+@use "../input/_variables.scss" as *;
+
+// OTP
+
+/// The gap between the items in the OTP.
+/// @group one-time-password
+$kendo-otp-gap: k-spacing(1.5) !default;
+/// The gap between the items in the small OTP.
+/// @group one-time-password
+$kendo-otp-sm-gap: k-spacing(1) !default;
+/// The gap between the items in the medium OTP.
+/// @group one-time-password
+$kendo-otp-md-gap: $kendo-otp-gap !default;
+/// The gap between the items in the large OTP.
+/// @group one-time-password
+$kendo-otp-lg-gap: k-spacing(2) !default;
+
+/// The horizontal padding of the OTP separator.
+/// @group one-time-password
+$kendo-otp-separator-padding-x: $kendo-otp-gap !default;
+/// The horizontal padding of the small OTP separator.
+/// @group one-time-password
+$kendo-otp-sm-separator-padding-x: $kendo-otp-sm-gap !default;
+/// The horizontal padding of the medium OTP separator.
+/// @group one-time-password
+$kendo-otp-md-separator-padding-x: $kendo-otp-separator-padding-x !default;
+/// The horizontal padding of the large OTP separator.
+/// @group one-time-password
+$kendo-otp-lg-separator-padding-x: $kendo-otp-lg-gap !default;
+
+/// The horizontal padding of the OTP separator.
+/// @group one-time-password
+$kendo-otp-input-width: $kendo-input-calc-size !default;
+/// The horizontal padding of the small OTP separator.
+/// @group one-time-password
+$kendo-otp-sm-input-width: $kendo-input-sm-calc-size !default;
+/// The horizontal padding of the medium OTP separator.
+/// @group one-time-password
+$kendo-otp-md-input-width: $kendo-otp-input-width !default;
+/// The horizontal padding of the large OTP separator.
+/// @group one-time-password
+$kendo-otp-lg-input-width: $kendo-input-lg-calc-size !default;
+
+$kendo-otp-sizes: (
+    sm: (
+        gap: $kendo-otp-sm-gap,
+        separator-padding-x: $kendo-otp-sm-separator-padding-x,
+        input-width: $kendo-otp-sm-input-width
+    ),
+    md: (
+        gap: $kendo-otp-md-gap,
+        separator-padding-x: $kendo-otp-md-separator-padding-x,
+        input-width: $kendo-otp-md-input-width
+    ),
+    lg: (
+        gap: $kendo-otp-lg-gap,
+        separator-padding-x: $kendo-otp-lg-separator-padding-x,
+        input-width: $kendo-otp-lg-input-width
+    )
+) !default;
+
+@forward "@progress/kendo-theme-default/scss/otp/_variables.scss" with (
+    $kendo-otp-gap: $kendo-otp-gap,
+    $kendo-otp-sm-gap: $kendo-otp-sm-gap,
+    $kendo-otp-md-gap: $kendo-otp-md-gap,
+    $kendo-otp-lg-gap: $kendo-otp-lg-gap,
+    $kendo-otp-separator-padding-x: $kendo-otp-separator-padding-x,
+    $kendo-otp-sm-separator-padding-x: $kendo-otp-sm-separator-padding-x,
+    $kendo-otp-md-separator-padding-x: $kendo-otp-md-separator-padding-x,
+    $kendo-otp-lg-separator-padding-x: $kendo-otp-lg-separator-padding-x,
+    $kendo-otp-input-width: $kendo-otp-input-width,
+    $kendo-otp-sm-input-width: $kendo-otp-sm-input-width,
+    $kendo-otp-md-input-width: $kendo-otp-md-input-width,
+    $kendo-otp-lg-input-width: $kendo-otp-lg-input-width,
+    $kendo-otp-sizes: $kendo-otp-sizes
+);

package/scss/radio/_variables.scss

@@ -151,7 +151,7 @@ $kendo-radio-checked-glyph: "\e308" !default;
 
 /// The image of the checked RadioButton indicator.
 /// @group radio
-$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
+$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#ffffff'/></svg>") ) !default;
 /// The image of the disabled and checked RadioButton indicator.
 /// @group radio
 $kendo-radio-disabled-checked-image: null !default;

package/scss/tabstrip/_variables.scss

@@ -27,6 +27,25 @@ $kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
 /// @group tabstrip
 $kendo-tabstrip-border-width: 1px !default;
 
+/// The font size of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The line height of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-line-height: $kendo-tabstrip-line-height !default;
+/// The font size of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-font-size: $kendo-tabstrip-font-size !default;
+/// The line height of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-line-height: $kendo-tabstrip-line-height !default;
+/// The font size of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-font-size: $kendo-tabstrip-md-font-size !default;
+/// The line height of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-line-height: $kendo-tabstrip-md-line-height !default;
+
 /// The background color of the TabStrip wrapper.
 /// @group tabstrip
 $kendo-tabstrip-wrapper-bg: null !default;
@@ -62,6 +81,24 @@ $kendo-tabstrip-item-border-radius: k-spacing(1) !default;
 /// The gap between the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-gap: k-spacing(0) !default;
+/// The horizontal padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-x: k-spacing(3) !default;
+/// The vertical padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-y: k-spacing(1.5) !default;
+/// The horizontal padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-item-padding-x !default;
+/// The vertical padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-item-padding-y !default;
+/// The horizontal padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-x: k-spacing(5) !default;
+/// The vertical padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-y: k-spacing(2.5) !default;
 
 ///  The background color of the TabStrip items.
 /// @group tabstrip
@@ -162,6 +199,32 @@ $kendo-tabstrip-content-border: $kendo-component-border !default;
 /// @group tabstrip
 $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
 
+/// The left and right scroll overlay of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+
+/// The size map of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sizes: (
+    sm: (
+        font-size: $kendo-tabstrip-sm-font-size,
+        line-height: $kendo-tabstrip-sm-line-height,
+        item-padding-x: $kendo-tabstrip-sm-item-padding-x,
+        item-padding-y: $kendo-tabstrip-sm-item-padding-y
+    ),
+    md: (
+        font-size: $kendo-tabstrip-md-font-size,
+        line-height: $kendo-tabstrip-md-line-height,
+        item-padding-x: $kendo-tabstrip-md-item-padding-x,
+        item-padding-y: $kendo-tabstrip-md-item-padding-y
+    ),
+    lg: (
+        font-size: $kendo-tabstrip-lg-font-size,
+        line-height: $kendo-tabstrip-lg-line-height,
+        item-padding-x: $kendo-tabstrip-lg-item-padding-x,
+        item-padding-y: $kendo-tabstrip-lg-item-padding-y
+    )
+) !default;
 
 @forward "@progress/kendo-theme-default/scss/tabstrip/_variables.scss" with (
     $kendo-tabstrip-wrapper-padding-x: $kendo-tabstrip-wrapper-padding-x,
@@ -171,6 +234,12 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
     $kendo-tabstrip-font-size: $kendo-tabstrip-font-size,
     $kendo-tabstrip-line-height: $kendo-tabstrip-line-height,
     $kendo-tabstrip-border-width: $kendo-tabstrip-border-width,
+    $kendo-tabstrip-sm-font-size: $kendo-tabstrip-sm-font-size,
+    $kendo-tabstrip-sm-line-height: $kendo-tabstrip-sm-line-height,
+    $kendo-tabstrip-md-font-size: $kendo-tabstrip-md-font-size,
+    $kendo-tabstrip-md-line-height: $kendo-tabstrip-md-line-height,
+    $kendo-tabstrip-lg-font-size: $kendo-tabstrip-lg-font-size,
+    $kendo-tabstrip-lg-line-height: $kendo-tabstrip-lg-line-height,
     $kendo-tabstrip-wrapper-bg: $kendo-tabstrip-wrapper-bg,
     $kendo-tabstrip-wrapper-text: $kendo-tabstrip-wrapper-text,
     $kendo-tabstrip-wrapper-border: $kendo-tabstrip-wrapper-border,
@@ -182,6 +251,12 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
     $kendo-tabstrip-item-border-width: $kendo-tabstrip-item-border-width,
     $kendo-tabstrip-item-border-radius: $kendo-tabstrip-item-border-radius,
     $kendo-tabstrip-item-gap: $kendo-tabstrip-item-gap,
+    $kendo-tabstrip-sm-item-padding-x: $kendo-tabstrip-sm-item-padding-x,
+    $kendo-tabstrip-sm-item-padding-y: $kendo-tabstrip-sm-item-padding-y,
+    $kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-md-item-padding-x,
+    $kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-md-item-padding-y,
+    $kendo-tabstrip-lg-item-padding-x: $kendo-tabstrip-lg-item-padding-x,
+    $kendo-tabstrip-lg-item-padding-y: $kendo-tabstrip-lg-item-padding-y,
     $kendo-tabstrip-item-bg: $kendo-tabstrip-item-bg,
     $kendo-tabstrip-item-text: $kendo-tabstrip-item-text,
     $kendo-tabstrip-item-border: $kendo-tabstrip-item-border,
@@ -211,5 +286,6 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
     $kendo-tabstrip-content-bg: $kendo-tabstrip-content-bg,
     $kendo-tabstrip-content-text: $kendo-tabstrip-content-text,
     $kendo-tabstrip-content-border: $kendo-tabstrip-content-border,
-    $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border
+    $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border,
+    $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay
 );

package/scss/toolbar/_variables.scss

@@ -6,43 +6,56 @@
 
 /// The horizontal padding of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-padding-x: null !default;
+$kendo-toolbar-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the small Toolbar.
 /// @group toolbar
 $kendo-toolbar-sm-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-padding-x: k-spacing(2) !default;
+$kendo-toolbar-md-padding-x: $kendo-toolbar-padding-x !default;
 /// The horizontal padding of the large Toolbar.
 /// @group toolbar
 $kendo-toolbar-lg-padding-x: k-spacing(2.5) !default;
 
 /// The vertical padding of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-padding-y: null !default;
+$kendo-toolbar-padding-y: k-spacing(2) !default;
 /// The vertical padding of the small Toolbar.
 /// @group toolbar
 $kendo-toolbar-sm-padding-y: k-spacing(1) !default;
 /// The vertical padding of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-padding-y: k-spacing(2) !default;
+$kendo-toolbar-md-padding-y: $kendo-toolbar-padding-y !default;
 /// The vertical padding of the large Toolbar.
 /// @group toolbar
 $kendo-toolbar-lg-padding-y: k-spacing(2.5) !default;
 
 /// The spacing between the Toolbar tools.
 /// @group toolbar
-$kendo-toolbar-spacing: null !default;
+$kendo-toolbar-spacing: k-spacing(2) !default;
 /// The spacing between the tools of the small Toolbar.
 /// @group toolbar
 $kendo-toolbar-sm-spacing: k-spacing(1.5) !default;
 /// The spacing between the tools of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-spacing: k-spacing(2) !default;
+$kendo-toolbar-md-spacing: $kendo-toolbar-spacing !default;
 /// The spacing between the tools of the large Toolbar.
 /// @group toolbar
 $kendo-toolbar-lg-spacing: k-spacing(2.5) !default;
 
+/// The height of the Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-separator-height: $kendo-button-md-calc-size !default;
+/// The height of the small Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-sm-separator-height: $kendo-button-sm-calc-size !default;
+/// The height of the medium Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-md-separator-height: $kendo-toolbar-separator-height !default;
+/// The height of the large Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-lg-separator-height: $kendo-button-lg-calc-size !default;
+
 /// The width of the border around the Toolbar.
 /// @group toolbar
 $kendo-toolbar-border-width: 1px !default;
@@ -75,6 +88,10 @@ $kendo-toolbar-gradient: null !default;
 /// The box shadow of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-shadow: null !default;
+/// The left and right scroll overlay of the Toolbar.
+/// @group toolbar
+$kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+
 
 /// The text color of the outline Toolbar.
 /// @group toolbar
@@ -91,6 +108,10 @@ $kendo-toolbar-outline-shadow: null !default;
 /// The width of the border around the outline Toolbar.
 /// @group toolbar
 $kendo-toolbar-outline-border-width: $kendo-toolbar-border-width !default;
+/// The left and right scroll overlay of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+
 
 /// The text color of the flat Toolbar.
 /// @group toolbar
@@ -107,6 +128,10 @@ $kendo-toolbar-flat-shadow: null !default;
 /// Border width of the flat Toolbar.
 /// @group toolbar
 $kendo-toolbar-flat-border-width: 1px !default;
+/// The left and right scroll overlay of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+
 
 /// The color of the separator border of the Toolbar.
 /// @group toolbar
@@ -126,17 +151,20 @@ $kendo-toolbar-sizes: (
     sm: (
         padding-x: $kendo-toolbar-sm-padding-x,
         padding-y: $kendo-toolbar-sm-padding-y,
-        spacing: $kendo-toolbar-sm-spacing
+        spacing: $kendo-toolbar-sm-spacing,
+        separator-height: $kendo-toolbar-sm-separator-height
     ),
     md: (
         padding-x: $kendo-toolbar-md-padding-x,
         padding-y: $kendo-toolbar-md-padding-y,
-        spacing: $kendo-toolbar-md-spacing
+        spacing: $kendo-toolbar-md-spacing,
+        separator-height: $kendo-toolbar-md-separator-height
     ),
     lg: (
         padding-x: $kendo-toolbar-lg-padding-x,
         padding-y: $kendo-toolbar-lg-padding-y,
-        spacing: $kendo-toolbar-lg-spacing
+        spacing: $kendo-toolbar-lg-spacing,
+        separator-height: $kendo-toolbar-lg-separator-height
     )
 ) !default;