@progress/kendo-theme-material 6.2.1-dev.1 → 6.2.1-dev.8

package/lib/swatches/material-sky-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Sky Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "6.2.1-dev.1+11ca05ae1",
+    "version": "6.2.1-dev.8+79dd700c6",
     "api": "legacy",
     "previewColors": [
         "#121212",

package/lib/swatches/material-sky.json

@@ -3,7 +3,7 @@
     "name": "Material Sky",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "6.2.1-dev.1+11ca05ae1",
+    "version": "6.2.1-dev.8+79dd700c6",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-smoke.json

@@ -3,7 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "6.2.1-dev.1+11ca05ae1",
+    "version": "6.2.1-dev.8+79dd700c6",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "6.2.1-dev.1+11ca05ae1",
+  "version": "6.2.1-dev.8+79dd700c6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,9 +50,9 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.4.0",
-    "@progress/kendo-theme-core": "6.2.1-dev.1+11ca05ae1",
-    "@progress/kendo-theme-default": "6.2.1-dev.1+11ca05ae1",
-    "@progress/kendo-theme-utils": "6.2.1-dev.1+11ca05ae1"
+    "@progress/kendo-theme-core": "6.2.1-dev.8+79dd700c6",
+    "@progress/kendo-theme-default": "6.2.1-dev.8+79dd700c6",
+    "@progress/kendo-theme-utils": "6.2.1-dev.8+79dd700c6"
   },
-  "gitHead": "11ca05ae129666f4ab9b4ecd25194b577ddfa8c3"
+  "gitHead": "79dd700c627f9d132a97c8fa78f2478d9b204c60"
 }

package/scss/button/_variables.scss

@@ -1,58 +1,85 @@
 // Button
 
-/// Width of the border around the button.
+/// The width of the border around the Button.
 /// @group button
 $kendo-button-border-width: 1px !default;
 
-/// Border radius of the button.
+/// The border radius of the Button.
 /// @group button
 $kendo-button-border-radius: null !default;
 
-/// Horizontal padding of the button.
+/// The horizontal padding of the Button.
 /// @group button
 $kendo-button-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-/// Vertical padding of the button.
+/// The horizontal padding of the small Button.
+/// @group button
+$kendo-button-sm-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The horizontal padding of the medium Button.
+/// @group button
+$kendo-button-md-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The horizontal padding of the large Button.
+/// @group button
+$kendo-button-lg-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+
+/// The vertical padding of the Button.
 /// @group button
 $kendo-button-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-/// Font family of the button.
+/// The vertical padding of the small Button.
+/// @group button
+$kendo-button-sm-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+/// The vertical padding of the medium Button.
+/// @group button
+$kendo-button-md-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the large Button.
+/// @group button
+$kendo-button-lg-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
+
+/// The font family of the Button.
 /// @group button
 $kendo-button-font-family: $kendo-font-family !default;
-/// Font sizes of the button.
+
+/// The font size of the Button.
 /// @group button
 $kendo-button-font-size: $kendo-font-size-md !default;
+/// The font size of the small Button.
+/// @group button
+$kendo-button-sm-font-size: $kendo-font-size-md !default;
+/// The font size of the medium Button.
+/// @group button
+$kendo-button-md-font-size: $kendo-font-size-md !default;
+/// The font size of the large Button.
+/// @group button
+$kendo-button-lg-font-size: $kendo-font-size-md !default;
+
 /// Line heights used along with $kendo-font-size.
 /// @group button
 $kendo-button-line-height: k-math-div( 20, 14 ) !default;
-
-$kendo-button-sm-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-button-sm-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-$kendo-button-sm-font-size: $kendo-font-size-md !default;
+/// The line height used along with the $kendo-font-size of the small Button.
+/// @group button
 $kendo-button-sm-line-height: k-math-div( 20, 14 ) !default;
-
-$kendo-button-md-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-button-md-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-button-md-font-size: $kendo-font-size-md !default;
+/// The line height used along with the $kendo-font-size of the medium Button.
+/// @group button
 $kendo-button-md-line-height: k-math-div( 20, 14 ) !default;
-
-$kendo-button-lg-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-button-lg-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
-$kendo-button-lg-font-size: $kendo-font-size-md !default;
+/// The line height used along with the $kendo-font-size of the large Button.
+/// @group button
 $kendo-button-lg-line-height: k-math-div( 20, 14 ) !default;
 
-/// Calculated height of the button.
+/// The 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;
 $kendo-button-sm-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + #{$kendo-button-sm-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
 $kendo-button-md-calc-size: calc( #{$kendo-button-md-line-height * 1em} + #{$kendo-button-md-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
 $kendo-button-lg-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + #{$kendo-button-lg-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
 
-/// Calculated inner height of the button. Without the border width.
+/// The calculated inner height of the Button excluding the border width.
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 $kendo-button-sm-inner-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + #{$kendo-button-sm-padding-y * 2} ) !default;
 $kendo-button-md-inner-calc-size: calc( #{$kendo-button-md-line-height * 1em} + #{$kendo-button-md-padding-y * 2} ) !default;
 $kendo-button-lg-inner-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + #{$kendo-button-lg-padding-y * 2} ) !default;
 
+/// The sizes map for the Button.
+/// @group button
 $kendo-button-sizes: (
     sm: (
         padding-x: $kendo-button-sm-padding-x,
@@ -74,110 +101,110 @@ $kendo-button-sizes: (
     )
 ) !default;
 
-/// Theme colors map for the button.
+/// The theme colors map for the Button.
 /// @group button
 $kendo-button-theme-colors: k-map-merge(
     $kendo-theme-colors,
     ( "base": $kendo-base-bg )
 ) !default;
 
-/// The base background of the button.
+/// The base background of the Button.
 /// @group button
 $kendo-button-bg: $kendo-base-bg !default;
-/// The base text color of the button.
+/// The base text color of the Button.
 /// @group button
 $kendo-button-text: $kendo-base-text !default;
-/// The base border color of the button.
+/// The base border color of the Button.
 /// @group button
 $kendo-button-border: $kendo-button-bg !default;
-/// The base background gradient of the button.
+/// The base background gradient of the Button.
 /// @group button
 $kendo-button-gradient: null !default;
-/// The base shadow of the button.
+/// The base shadow of the Button.
 /// @group button
 $kendo-button-shadow: $box-shadow-depth-2 !default;
 
-/// The base background of hovered button.
+/// The base background of the hovered Button.
 /// @group button
 $kendo-button-hover-bg: null !default;
-/// The base text color of hovered button.
+/// The base text color of the hovered Button.
 /// @group button
 $kendo-button-hover-text: null !default;
-/// The base border color of hovered button.
+/// The base border color of the hovered Button.
 /// @group button
 $kendo-button-hover-border: null !default;
-/// The base background gradient of hovered button.
+/// The base background gradient of the hovered Button.
 /// @group button
 $kendo-button-hover-gradient: null !default;
-/// The base shadow of hovered button.
+/// The base shadow of the hovered Button.
 /// @group button
 $kendo-button-hover-shadow: null !default;
 
-/// The base background color of active button.
+/// The base background color of the active Button.
 /// @group button
 $kendo-button-active-bg: null !default;
-/// The base text color of active button.
+/// The base text color of the active Button.
 /// @group button
 $kendo-button-active-text: null !default;
-/// The base border color of active button.
+/// The base border color of the active Button.
 /// @group button
 $kendo-button-active-border: null !default;
-/// The base background gradient of active button.
+/// The base background gradient of the active Button.
 /// @group button
 $kendo-button-active-gradient: null !default;
-/// The base shadow of active button.
+/// The base shadow of the active Button.
 /// @group button
 $kendo-button-active-shadow: $box-shadow-depth-3 !default;
 
-/// The base background color of selected button.
+/// The base background color of the selected Button.
 /// @group button
 $kendo-button-selected-bg: $kendo-button-active-bg !default;
-/// The base text color of selected button.
+/// The base text color of the selected Button.
 /// @group button
 $kendo-button-selected-text: $kendo-button-active-text !default;
-/// The base border color of selected button.
+/// The base border color of the selected Button.
 /// @group button
 $kendo-button-selected-border: $kendo-button-active-bg !default;
-/// The base background gradient of selected button.
+/// The base background gradient of the selected Button.
 /// @group button
 $kendo-button-selected-gradient: null !default;
-/// The base shadow of selected button.
+/// The base shadow of the selected Button.
 /// @group button
 $kendo-button-selected-shadow: null !default;
 
-/// The base background of focused button.
+/// The base background of the focused Button.
 /// @group button
 $kendo-button-focus-bg: null !default;
-/// The base text color of focused button.
+/// The base text color of the focused Button.
 /// @group button
 $kendo-button-focus-text: null !default;
-/// The base border color of focused button.
+/// The base border color of the focused Button.
 /// @group button
 $kendo-button-focus-border: null !default;
-/// The base background gradient of focused button.
+/// The base background gradient of focused Button.
 /// @group button
 $kendo-button-focus-gradient: null !default;
-/// The base shadow of focused buttons.
+/// The base shadow of the focused Button.
 /// @group button
 $kendo-button-focus-shadow: null !default;
 
-/// The base background color of disabled button.
+/// The base background color of the disabled Button.
 /// @group button
 $kendo-button-disabled-bg: k-try-shade( $kendo-body-bg, 12% ) !default;
-/// The base text color of disabled button.
+/// The base text color of the disabled Button.
 /// @group button
 $kendo-button-disabled-text: $kendo-disabled-text !default;
-/// The base border color of disabled button.
+/// The base border color of the disabled Button.
 /// @group button
 $kendo-button-disabled-border: $kendo-button-disabled-bg !default;
-/// The base background gradient of disabled button.
+/// The base background gradient of the disabled Button.
 /// @group button
 $kendo-button-disabled-gradient: null !default;
-/// The base shadow of disabled button.
+/// The base shadow of the disabled Button.
 /// @group button
 $kendo-button-disabled-shadow: none !default;
 
-// Solid button
+// Solid Button
 $kendo-solid-button-gradient: null !default;
 $kendo-solid-button-shade-function: "k-try-shade" !default;
 $kendo-solid-button-shade-text-amount: null !default;
@@ -194,37 +221,37 @@ $kendo-solid-button-shadow-blur: null !default;
 $kendo-solid-button-shadow-spread: null !default;
 $kendo-solid-button-shadow-opacity: null !default;
 
-// Outline button
+// Outline Button
 $kendo-outline-button-shadow: null !default;
 $kendo-outline-button-shadow-blur: null !default;
 $kendo-outline-button-shadow-spread: null !default;
 $kendo-outline-button-shadow-opacity: null !default;
 
-// link button
+// Link Button
 $kendo-link-button-shadow: null !default;
 $kendo-link-button-shadow-blur: null !default;
 $kendo-link-button-shadow-spread: null !default;
 $kendo-link-button-shadow-opacity: null !default;
 
-// Clear button
+// Clear Button
 $kendo-clear-button-focus-opacity: .155 !default; // equal to 10% of black
 
-/// The overlay opacity of hovered flat button. Used to create background for the flat button.
+/// The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
 /// @group button
 $kendo-flat-button-hover-opacity: .08 !default;
-/// The overlay opacity of focused flat button. Used to create background for the flat button.
+/// The overlay opacity of the focused flat Button. Used to create a background for the flat Button.
 /// @group button
 $kendo-flat-button-focus-opacity: .12 !default;
-/// The overlay opacity of active flat button. Used to create background for the flat button.
+/// The overlay opacity of the active flat Button. Used to create a 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.
+/// The overlay opacity of the selected flat Button. Used to create a background for the flat Button.
 /// @group button
 $kendo-flat-button-selected-opacity: .22 !default;
-/// The opacity of the flat button focus ring. Used to create border for the flat button.
+/// The opacity of the flat Button focus ring. Used to create a border for the flat Button.
 /// @group button
 $kendo-flat-button-focus-ring-opacity: null !default;
 
-/// The transition of the button.
+/// The box-shadow transition of the Button.
 /// @group button
 $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default;

package/scss/checkbox/_variables.scss

@@ -1,166 +1,196 @@
 @import "../list/_variables.scss";
 
 
-// Checkbox
+// CheckBox
 
-/// Border width of checkbox.
+/// The border width of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-border-width: 2px !default;
 
-// Checkbox sizes
+/// The size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-size: k-map-get( $kendo-spacing, 3 ) !default;
+/// The size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-size: k-map-get( $kendo-spacing, 4 ) !default;
+/// The size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-size: k-map-get( $kendo-spacing, 5 ) !default;
+
+/// The glyph size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-glyph-size: k-map-get( $kendo-spacing, 2.5 ) !default;
+/// The glyph size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-glyph-size: k-map-get( $kendo-spacing, 3.5 ) !default;
+/// The glyph size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-glyph-size: k-map-get( $kendo-spacing, 4.5 ) !default;
+
+/// The ripple size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-ripple-size: 300% !default;
+/// The ripple size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-ripple-size: 300% !default;
+/// The ripple size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-ripple-size: 300% !default;
+
+// A map with the different CheckBox sizes.
 $kendo-checkbox-sizes: (
     sm: (
-        size: k-map-get( $kendo-spacing, 3 ),
-        glyph-size: k-map-get( $kendo-spacing, 2.5 ),
-        ripple-size: 300%
+        size: $kendo-checkbox-sm-size,
+        glyph-size: $kendo-checkbox-sm-glyph-size,
+        ripple-size: $kendo-checkbox-sm-ripple-size
     ),
     md: (
-        size: k-map-get( $kendo-spacing, 4 ),
-        glyph-size: k-map-get( $kendo-spacing, 3.5 ),
-        ripple-size: 300%
+        size: $kendo-checkbox-md-size,
+        glyph-size: $kendo-checkbox-md-glyph-size,
+        ripple-size: $kendo-checkbox-md-ripple-size
     ),
     lg: (
-        size: k-map-get( $kendo-spacing, 5 ),
-        glyph-size: k-map-get( $kendo-spacing, 4.5 ),
-        ripple-size: 300%
+        size: $kendo-checkbox-lg-size,
+        glyph-size: $kendo-checkbox-lg-glyph-size,
+        ripple-size: $kendo-checkbox-lg-ripple-size
     )
 ) !default;
 
-/// Background color of checkbox.
+/// The background color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-bg: null !default;
-/// Color of checkbox.
+/// The text color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-text: null !default;
-/// Border color of checkbox.
+/// The border color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 ) !default;
 
-/// Background color of hovered checkbox.
+/// The background color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-bg: null !default;
-/// Color of hovered checkbox.
+/// The text color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-text: null !default;
-/// Border color of hovered checkbox.
+/// The border color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-border: null !default;
 
-/// Background color of checked checkbox.
+/// The background color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-bg: $kendo-color-primary !default;
-/// Color of checked checkbox.
+/// The text color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-text: k-contrast-color( $kendo-checkbox-checked-bg ) !default;
-/// Border color of checked checkbox.
+/// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
-/// Background color of indeterminate checkbox.
+/// The background color of the indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-bg: $kendo-checkbox-checked-bg !default;
-/// Color of indeterminate checkbox.
+/// The text color of the indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-text !default;
-/// Border color of indeterminate checkbox.
+/// The border color of the indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
 
-/// Border color of focused checkbox.
+/// The border color of the focused CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-border: null !default;
-/// Box shadow of focused checkbox.
+/// The box shadow of the focused CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-shadow: null !default;
-/// Border color of focused and checked checkbox.
+/// The border color of the focused and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-border: null !default;
-/// Box shadow of focused and checked checkbox.
+/// The box shadow of the focused and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-shadow: null !default;
 
-/// Background color of disabled checkbox.
+/// The background color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-bg: null !default;
-/// Color of disabled checkbox.
+/// The text color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-text: null !default;
-/// Border color of disabled checkbox.
+/// The border color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-border: k-try-shade( $kendo-component-bg, 4 ) !default;
 
 
-/// Background color of disabled and checked checkbox.
+/// The background color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-border !default;
-/// Color of disabled and checked checkbox.
+/// The text color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-text: k-contrast-color( $kendo-checkbox-disabled-checked-bg ) !default;
-/// Border color of disabled and checked checkbox.
+/// The border color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !default;
 
-/// Background color of invalid checkbox.
+/// The background color of an invalid CheckBox.
 /// @group checkbox
 $kendo-checkbox-invalid-bg: null !default;
-/// Color of invalid checkbox.
+/// The text color of an invalid CheckBox.
 /// @group checkbox
 $kendo-checkbox-invalid-text: $kendo-invalid-text !default;
-/// Border color of invalid checkbox.
+/// The border color of an invalid CheckBox.
 /// @group checkbox
 $kendo-checkbox-invalid-border: $kendo-invalid-border !default;
 
 
-// Checkbox indicator
+// CheckBox indicator
 
-/// Type of checkbox indicator.
+/// The type of the CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-indicator-type: image !default;
 
-/// Glyph font family of checkbox indicator.
+/// The font family of the CheckBox indicator glyph.
 /// @group checkbox
 $kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
 $kendo-checkbox-glyph-size: 10px !default;
-/// Glyph of checkbox indicator.
+/// The glyph of the CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-checked-glyph: "\e118" !default;
-/// Glyph of indeterminate checkbox indicator.
+/// The glyph of the indeterminate CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
-/// Image of checked checkbox indicator.
+/// The image for a checked CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") ) !default;
-/// Image of checked checkbox indicator.
+/// The image for a indeterminate CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></svg>") ) !default;
 
 
-// Checkbox label
+// CheckBox label
 
-/// The horizontal margin of the checkbox inside a label.
+/// The horizontal margin of the CheckBox inside a label.
 /// @group checkbox
 $kendo-checkbox-label-margin-x: k-map-get( $kendo-spacing, 1 ) !default;
 
 
-// Checkbox list
+// CheckBox list
 
-/// Spacing between items of horizontal checkbox list.
+/// The spacing between the items in a horizontal CheckBox list.
 /// @group checkbox
 $kendo-checkbox-list-spacing: k-map-get( $kendo-spacing, 4 ) !default;
-/// Horizontal padding of checkbox list items.
+/// The horizontal padding of the CheckBox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-x: 0px !default;
-/// Vertical padding of checkbox list items.
+/// The vertical padding of the CheckBox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 
-// Checkbox ripple
+// CheckBox ripple
 
-/// Background color of checkbox ripple.
+/// The background color of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-bg: $kendo-color-primary !default;
-/// Opacity of checkbox ripple.
+/// The opacity of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-opacity: .2 !default;