@progress/kendo-theme-utils 11.1.0-dev.3 → 11.1.0-dev.5

package/scss/responsive-layout/_col.scss

@@ -1,3 +1,175 @@
+/// Creates a flexible column that grows to fill available space.
+/// @example flex: 1 0 0%;
+/// @name .k-col
+/// @group col
+/// @contextType css
+
+/// Sets column width to 1% of container.
+/// @example flex: 0 0 auto; width: 1%;
+/// @name .k-col-size-{1-100}
+/// @group col
+/// @contextType css
+
+/// Sets column width to 8.3333% of container (1/12).
+/// @example flex: 0 0 auto; width: 8.3333%;
+/// @name .k-col-size-8-3
+/// @group col
+/// @contextType css
+
+/// Sets column width to 9.0909% of container (1/11).
+/// @example flex: 0 0 auto; width: 9.0909%;
+/// @name .k-col-size-9-1
+/// @group col
+/// @contextType css
+
+/// Sets column width to 11.1111% of container (1/9).
+/// @example flex: 0 0 auto; width: 11.1111%;
+/// @name .k-col-size-11-1
+/// @group col
+/// @contextType css
+
+/// Sets column width to 12.5% of container (1/8).
+/// @example flex: 0 0 auto; width: 12.5%;
+/// @name .k-col-size-12-5
+/// @group col
+/// @contextType css
+
+/// Sets column width to 14.2857% of container (1/7).
+/// @example flex: 0 0 auto; width: 14.2857%;
+/// @name .k-col-size-14-3
+/// @group col
+/// @contextType css
+
+/// Sets column width to 16.6666% of container (1/6).
+/// @example flex: 0 0 auto; width: 16.6666%;
+/// @name .k-col-size-16-7
+/// @group col
+/// @contextType css
+
+/// Sets column width to 33.3333% of container (1/3).
+/// @example flex: 0 0 auto; width: 33.3333%;
+/// @name .k-col-size-33-3
+/// @group col
+/// @contextType css
+
+/// Sets column width to 41.6666% of container (5/12).
+/// @example flex: 0 0 auto; width: 41.6666%;
+/// @name .k-col-size-41-6
+/// @group col
+/// @contextType css
+
+/// Sets column width to 58.3333% of container (7/12).
+/// @example flex: 0 0 auto; width: 58.3333%;
+/// @name .k-col-size-58-3
+/// @group col
+/// @contextType css
+
+/// Sets column width to 66.6666% of container (2/3).
+/// @example flex: 0 0 auto; width: 66.6666%;
+/// @name .k-col-size-66-6
+/// @group col
+/// @contextType css
+
+/// Sets column width to 83.3333% of container (5/6).
+/// @example flex: 0 0 auto; width: 83.3333%;
+/// @name .k-col-size-83-3
+/// @group col
+/// @contextType css
+
+/// Sets column width to 91.6666% of container (11/12).
+/// @example flex: 0 0 auto; width: 91.6666%;
+/// @name .k-col-size-91-6
+/// @group col
+/// @contextType css
+
+// ============================================================================
+// Responsive Gap Utilities
+// ============================================================================
+
+/// Creates a flexible column that grows to fill available space for specific breakpoint.
+/// @example flex: 1 0 0%;
+/// @name .k-col-{sm|md|lg|xl|xxl}
+/// @group col
+/// @contextType css
+
+/// Sets column width to 1% of container for specific breakpoint.
+/// @example flex: 0 0 auto; width: 1%;
+/// @name .k-col-{sm|md|lg|xl|xxl}-size-{1-100}
+/// @group col
+/// @contextType css
+
+/// Sets column width to 8.3333% of container (1/12) for specific breakpoint.
+/// @example flex: 0 0 auto; width: 8.3333%;
+/// @name .k-col-{sm|md|lg|xl|xxl}-size-8-3
+/// @group col
+/// @contextType css
+
+/// Sets column width to 9.0909% of container (1/11) for specific breakpoint.
+/// @example flex: 0 0 auto; width: 9.0909%;
+/// @name .k-col-{sm|md|lg|xl|xxl}-size-9-1
+/// @group col
+/// @contextType css
+
+/// Sets column width to 11.1111% of container (1/9) for specific breakpoint.
+/// @example flex: 0 0 auto; width: 11.1111%;
+/// @name .k-col-{sm|md|lg|xl|xxl}-size-11-1
+/// @group col
+/// @contextType css
+
+/// Sets column width to 12.5% of container (1/8) for specific breakpoint.
+/// @example flex: 0 0 auto; width: 12.5%;
+/// @name .k-col-{sm|md|lg|xl|xxl}-size-12-5
+/// @group col
+/// @contextType css
+
+/// Sets column width to 14.2857% of container (1/7) for specific breakpoint.
+/// @example flex: 0 0 auto; width: 14.2857%;
+/// @name .k-col-{sm|md|lg|xl|xxl}-size-14-3
+/// @group col
+/// @contextType css
+
+/// Sets column width to 16.6666% of container (1/6) for specific breakpoint.
+/// @example flex: 0 0 auto; width: 16.6666%;
+/// @name .k-col-{sm|md|lg|xl|xxl}-size-16-7
+/// @group col
+/// @contextType css
+
+/// Sets column width to 33.3333% of container (1/3) for specific breakpoint.
+/// @example flex: 0 0 auto; width: 33.3333%;
+/// @name .k-col-{sm|md|lg|xl|xxl}-size-33-3
+/// @group col
+/// @contextType css
+
+/// Sets column width to 41.6666% of container (5/12) for specific breakpoint.
+/// @example flex: 0 0 auto; width: 41.6666%;
+/// @name .k-col-{sm|md|lg|xl|xxl}-size-41-6
+/// @group col
+/// @contextType css
+
+/// Sets column width to 58.3333% of container (7/12) for specific breakpoint.
+/// @example flex: 0 0 auto; width: 58.3333%;
+/// @name .k-col-{sm|md|lg|xl|xxl}-size-58-3
+/// @group col
+/// @contextType css
+
+/// Sets column width to 66.6666% of container (2/3) for specific breakpoint.
+/// @example flex: 0 0 auto; width: 66.6666%;
+/// @name .k-col-{sm|md|lg|xl|xxl}-size-66-6
+/// @group col
+/// @contextType css
+
+/// Sets column width to 83.3333% of container (5/6) for specific breakpoint.
+/// @example flex: 0 0 auto; width: 83.3333%;
+/// @name .k-col-{sm|md|lg|xl|xxl}-size-83-3
+/// @group col
+/// @contextType css
+
+/// Sets column width to 91.6666% of container (11/12) for specific breakpoint.
+/// @example flex: 0 0 auto; width: 91.6666%;
+/// @name .k-col-{sm|md|lg|xl|xxl}-size-91-6
+/// @group col
+/// @contextType css
+
 @use "../_globals.scss" as *;
 
 @mixin kendo-utils--responsive-layout--col() {

package/scss/spacing/_margin.scss

@@ -1,6 +1,12 @@
+/// This is equivalent to `margin: -0.25rem;`.
+/// @example margin: -0.25rem;
+/// @name .k-m--{1-30}
+/// @group margin
+/// @contextType css
+
 /// This is equivalent to `margin: 0;`.
 /// @example margin: 0;
-/// @name .k-m-0
+/// @name .k-m-{0-30}
 /// @group margin
 /// @contextType css
 
@@ -10,21 +16,21 @@
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin: 0.25rem;`.
-/// @example margin: 0.25rem;
-/// @name .k-m-1
-/// @group margin
-/// @contextType css
-
 /// This is equivalent to `margin: -1px;`.
 /// @example margin: -1px;
 /// @name .k-m--1px
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin: -0.25rem;`.
-/// @example margin: -0.25rem;
-/// @name .k-m--1
+/// This is equivalent to `margin: 0.125rem;`.
+/// @example margin: 0.125rem;
+/// @name .k-m-0\.5
+/// @group margin
+/// @contextType css
+
+/// This is equivalent to `margin: -0.125rem;`.
+/// @example margin: -0.125rem;
+/// @name .k-m--0\.5
 /// @group margin
 /// @contextType css
 
@@ -76,9 +82,15 @@
 /// @group margin
 /// @contextType css
 
+/// This is equivalent to `margin-top: -0.25rem;`.
+/// @example margin-top: -0.25rem;
+/// @name .k-mt--{1-30}
+/// @group margin
+/// @contextType css
+
 /// This is equivalent to `margin-top: 0;`.
 /// @example margin-top: 0;
-/// @name .k-mt-0
+/// @name .k-mt-{0-30}
 /// @group margin
 /// @contextType css
 
@@ -88,21 +100,21 @@
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin-top: 0.25rem;`.
-/// @example margin-top: 0.25rem;
-/// @name .k-mt-1
-/// @group margin
-/// @contextType css
-
 /// This is equivalent to `margin-top: -1px;`.
 /// @example margin-top: -1px;
 /// @name .k-mt--1px
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin-top: -0.25rem;`.
-/// @example margin-top: -0.25rem;
-/// @name .k-mt--1
+/// This is equivalent to `margin-top: 0.125rem;`.
+/// @example margin-top: 0.125rem;
+/// @name .k-mt-0\.5
+/// @group margin
+/// @contextType css
+
+/// This is equivalent to `margin-top: -0.125rem;`.
+/// @example margin-top: -0.125rem;
+/// @name .k-mt--0\.5
 /// @group margin
 /// @contextType css
 
@@ -154,9 +166,15 @@
 /// @group margin
 /// @contextType css
 
+/// This is equivalent to `margin-right: -0.25rem;`.
+/// @example margin-right: -0.25rem;
+/// @name .k-mr--{1-30}
+/// @group margin
+/// @contextType css
+
 /// This is equivalent to `margin-right: 0;`.
 /// @example margin-right: 0;
-/// @name .k-mr-0
+/// @name .k-mr-{0-30}
 /// @group margin
 /// @contextType css
 
@@ -166,21 +184,21 @@
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin-right: 0.25rem;`.
-/// @example margin-right: 0.25rem;
-/// @name .k-mr-1
-/// @group margin
-/// @contextType css
-
 /// This is equivalent to `margin-right: -1px;`.
 /// @example margin-right: -1px;
 /// @name .k-mr--1px
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin-right: -0.25rem;`.
-/// @example margin-right: -0.25rem;
-/// @name .k-mr--1
+/// This is equivalent to `margin-right: 0.125rem;`.
+/// @example margin-right: 0.125rem;
+/// @name .k-mt-0\.5
+/// @group margin
+/// @contextType css
+
+/// This is equivalent to `margin-right: -0.125rem;`.
+/// @example margin-right: -0.125rem;
+/// @name .k-mt--0\.5
 /// @group margin
 /// @contextType css
 
@@ -232,9 +250,15 @@
 /// @group margin
 /// @contextType css
 
+/// This is equivalent to `margin-bottom: -0.25rem;`.
+/// @example margin-bottom: -0.25rem;
+/// @name .k-mb--{1-30}
+/// @group margin
+/// @contextType css
+
 /// This is equivalent to `margin-bottom: 0;`.
 /// @example margin-bottom: 0;
-/// @name .k-mb-0
+/// @name .k-mb-{0-30}
 /// @group margin
 /// @contextType css
 
@@ -244,24 +268,25 @@
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin-bottom: 0.25rem;`.
-/// @example margin-bottom: 0.25rem;
-/// @name .k-mb-1
-/// @group margin
-/// @contextType css
-
 /// This is equivalent to `margin-bottom: -1px;`.
 /// @example margin-bottom: -1px;
 /// @name .k-mb--1px
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin-bottom: -0.25rem;`.
-/// @example margin-bottom: -0.25rem;
-/// @name .k-mb--1
+/// This is equivalent to `margin-bottom: 0.125rem;`.
+/// @example margin-bottom: 0.125rem;
+/// @name .k-mb-0\.5
+/// @group margin
+/// @contextType css
+
+/// This is equivalent to `margin-bottom: -0.125rem;`.
+/// @example margin-bottom: -0.125rem;
+/// @name .k-mb--0\.5
 /// @group margin
 /// @contextType css
 
+
 /// This is equivalent to `margin-bottom: 0.25rem;`.
 /// @example margin-bottom: 0.25rem;
 /// @name .k-mb-xs
@@ -310,9 +335,15 @@
 /// @group margin
 /// @contextType css
 
+/// This is equivalent to `margin-left: -0.25rem;`.
+/// @example margin-left: -0.25rem;
+/// @name .k-ml--{1-30}
+/// @group margin
+/// @contextType css
+
 /// This is equivalent to `margin-left: 0;`.
 /// @example margin-left: 0;
-/// @name .k-ml-0
+/// @name .k-ml-{0-30}
 /// @group margin
 /// @contextType css
 
@@ -322,21 +353,21 @@
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin-left: 0.25rem;`.
-/// @example margin-left: 0.25rem;
-/// @name .k-ml-1
-/// @group margin
-/// @contextType css
-
 /// This is equivalent to `margin-left: -1px;`.
 /// @example margin-left: -1px;
 /// @name .k-ml--1px
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin-left: -0.25rem;`.
-/// @example margin-left: -0.25rem;
-/// @name .k-ml--1
+/// This is equivalent to `margin-left: 0.125rem;`.
+/// @example margin-left: 0.125rem;
+/// @name .k-ml-0\.5
+/// @group margin
+/// @contextType css
+
+/// This is equivalent to `margin-left: -0.125rem;`.
+/// @example margin-left: -0.125rem;
+/// @name .k-ml--0\.5
 /// @group margin
 /// @contextType css
 
@@ -388,9 +419,15 @@
 /// @group margin
 /// @contextType css
 
+/// This is equivalent to `margin-inline: -0.25rem;`.
+/// @example margin-inline: -0.25rem;
+/// @name .k-mx--{1-30}
+/// @group margin
+/// @contextType css
+
 /// This is equivalent to `margin-inline: 0;`.
 /// @example margin-inline: 0;
-/// @name .k-mx-0
+/// @name .k-mx-{0-30}
 /// @group margin
 /// @contextType css
 
@@ -400,21 +437,21 @@
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin-inline: 0.25rem;`.
-/// @example margin-inline: 0.25rem;
-/// @name .k-mx-1
-/// @group margin
-/// @contextType css
-
 /// This is equivalent to `margin-inline: -1px;`.
 /// @example margin-inline: -1px;
 /// @name .k-mx--1px
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin-inline: -0.25rem;`.
-/// @example margin-inline: -0.25rem;
-/// @name .k-mx--1
+/// This is equivalent to `margin-inline: 0.125rem;`.
+/// @example margin-inline: 0.125rem;
+/// @name .k-mx-0\.5
+/// @group margin
+/// @contextType css
+
+/// This is equivalent to `margin-inline: -0.125rem;`.
+/// @example margin-inline: -0.125rem;
+/// @name .k-mx--0\.5
 /// @group margin
 /// @contextType css
 
@@ -466,9 +503,15 @@
 /// @group margin
 /// @contextType css
 
+/// This is equivalent to `margin-block: -0.25rem;`.
+/// @example margin-block: -0.25rem;
+/// @name .k-my--{1-30}
+/// @group margin
+/// @contextType css
+
 /// This is equivalent to `margin-block: 0;`.
 /// @example margin-block: 0;
-/// @name .k-my-0
+/// @name .k-my-{0-30}
 /// @group margin
 /// @contextType css
 
@@ -478,21 +521,21 @@
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin-block: 0.25rem;`.
-/// @example margin-block: 0.25rem;
-/// @name .k-my-1
-/// @group margin
-/// @contextType css
-
 /// This is equivalent to `margin-block: -1px;`.
 /// @example margin-block: -1px;
 /// @name .k-my--1px
 /// @group margin
 /// @contextType css
 
-/// This is equivalent to `margin-block: -0.25rem;`.
-/// @example margin-block: -0.25rem;
-/// @name .k-my--1
+/// This is equivalent to `margin-block: 0.125rem;`.
+/// @example margin-block: 0.125rem;
+/// @name .k-my-0\.5
+/// @group margin
+/// @contextType css
+
+/// This is equivalent to `margin-block: -0.125rem;`.
+/// @example margin-block: -0.125rem;
+/// @name .k-my--0\.5
 /// @group margin
 /// @contextType css