@progress/kendo-theme-utils 11.1.0-dev.4 → 11.1.0-dev.6

package/scss/layout/_display.scss

@@ -82,6 +82,94 @@
 /// @group display
 /// @contextType css
 
+// ============================================================================
+// Responsive Display Utilities
+// ============================================================================
+
+/// This is equivalent to `display: none;`.
+/// @example display: none;
+/// @name .k-d-{xs|md|lg|xl|xxl}-none
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: contents;`.
+/// @example display: contents;
+/// @name .k-d-{xs|md|lg|xl|xxl}-contents
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: block;`.
+/// @example display: block;
+/// @name .k-d-{xs|md|lg|xl|xxl}-block
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline;`.
+/// @example display: inline;
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline-block;`.
+/// @example display: inline-block;
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline-block
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: flex;`.
+/// @example display: flex;
+/// @name .k-d-{xs|md|lg|xl|xxl}-flex
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline-flex;`.
+/// @example display: inline-flex;
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline-flex
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
+/// @example display: grid
+/// @name .k-d-{xs|md|lg|xl|xxl}-grid
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline-grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
+/// @example display: inline-grid
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline-grid
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: table;`.
+/// @example display: table;
+/// @name .k-d-{xs|md|lg|xl|xxl}-table
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline-table;`.
+/// @example display: inline-table;
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline-table
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: list-item;`.
+/// @example display: list-item;
+/// @name .k-d-{xs|md|lg|xl|xxl}-list-item
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: table-row;`.
+/// @example display: table-row;
+/// @name .k-d-{xs|md|lg|xl|xxl}-table-row
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: table-cell;`.
+/// @example display: table-cell;
+/// @name .k-d-{xs|md|lg|xl|xxl}-table-cell
+/// @group display-responsive
+/// @contextType css
+
 @use "sass:map";
 @use "../_globals.scss" as *;
 

package/scss/responsive-layout/_col-gap.scss

@@ -287,91 +287,91 @@
 /// Sets column gap to 0 pixels.
 /// @example --kendo-col-gap: 0px;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-0
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 1 pixel.
 /// @example --kendo-col-gap: 1px;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-1px
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 0.125rem (2px at 16px base).
 /// @example --kendo-col-gap: 0.125rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-0\.5
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 0.25rem (4px at 16px base).
 /// @example --kendo-col-gap: 0.25rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-1
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 0.375rem (6px at 16px base).
 /// @example --kendo-col-gap: 0.375rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-1\.5
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 0.5rem (8px at 16px base).
 /// @example --kendo-col-gap: 0.5rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-2
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 0.625rem (10px at 16px base).
 /// @example --kendo-col-gap: 0.625rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-2\.5
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 0.75rem (12px at 16px base).
 /// @example --kendo-col-gap: 0.75rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-3
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 0.875rem (14px at 16px base).
 /// @example --kendo-col-gap: 0.875rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-3\.5
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 1rem (16px at 16px base).
 /// @example --kendo-col-gap: 1rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-4
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 1.125rem (18px at 16px base).
 /// @example --kendo-col-gap: 1.125rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-4\.5
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 1.25rem (20px at 16px base).
 /// @example --kendo-col-gap: 1.25rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-5
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 1.375rem (22px at 16px base).
 /// @example --kendo-col-gap: 1.375rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-5\.5
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 1.5rem (24px at 16px base).
 /// @example --kendo-col-gap: 1.5rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-6
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 1.625rem (26px at 16px base).
 /// @example --kendo-col-gap: 1.625rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-6\.5
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 1.75rem (28px at 16px base).
@@ -383,187 +383,187 @@
 /// Sets column gap to 1.875rem (30px at 16px base).
 /// @example --kendo-col-gap: 1.875rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-7\.5
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 2rem (32px at 16px base).
 /// @example --kendo-col-gap: 2rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-8
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 2.25rem (36px at 16px base).
 /// @example --kendo-col-gap: 2.25rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-9
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 2.5rem (40px at 16px base).
 /// @example --kendo-col-gap: 2.5rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-10
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 2.75rem (44px at 16px base).
 /// @example --kendo-col-gap: 2.75rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-11
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 3rem (48px at 16px base).
 /// @example --kendo-col-gap: 3rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-12
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 3.25rem (52px at 16px base).
 /// @example --kendo-col-gap: 3.25rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-13
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 3.5rem (56px at 16px base).
 /// @example --kendo-col-gap: 3.5rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-14
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 3.75rem (60px at 16px base).
 /// @example --kendo-col-gap: 3.75rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-15
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 4rem (64px at 16px base).
 /// @example --kendo-col-gap: 4rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-16
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 4.25rem (68px at 16px base).
 /// @example --kendo-col-gap: 4.25rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-17
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 4.5rem (72px at 16px base).
 /// @example --kendo-col-gap: 4.5rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-18
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 4.75rem (76px at 16px base).
 /// @example --kendo-col-gap: 4.75rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-19
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 5rem (80px at 16px base).
 /// @example --kendo-col-gap: 5rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-20
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 5.25rem (84px at 16px base).
 /// @example --kendo-col-gap: 5.25rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-21
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 5.5rem (88px at 16px base).
 /// @example --kendo-col-gap: 5.5rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-22
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 5.75rem (92px at 16px base).
 /// @example --kendo-col-gap: 5.75rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-23
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 6rem (96px at 16px base).
 /// @example --kendo-col-gap: 6rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-24
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 7rem (112px at 16px base).
 /// @example --kendo-col-gap: 7rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-25
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 8rem (128px at 16px base).
 /// @example --kendo-col-gap: 8rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-26
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 9rem (144px at 16px base).
 /// @example --kendo-col-gap: 9rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-27
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 10rem (160px at 16px base).
 /// @example --kendo-col-gap: 10rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-28
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 11rem (176px at 16px base).
 /// @example --kendo-col-gap: 11rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-29
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to 12rem (192px at 16px base).
 /// @example --kendo-col-gap: 12rem;
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-30
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to extra small spacing.
 /// @example --kendo-col-gap: var(--kendo-spacing-1, 0.25rem);
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-xs
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to small spacing.
 /// @example --kendo-col-gap: var(--kendo-spacing-2, 0.5rem);
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-sm
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to medium spacing.
 /// @example --kendo-col-gap: var(--kendo-spacing-3, 0.75rem);
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-md
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to large spacing.
 /// @example --kendo-col-gap: var(--kendo-spacing-4, 1rem);
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-lg
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to extra large spacing.
 /// @example --kendo-col-gap: var(--kendo-spacing-6, 1.5rem);
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-xl
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to thin spacing.
 /// @example --kendo-col-gap: var(--kendo-spacing-0\.5, 0.125rem);
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-thin
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 /// Sets column gap to hair spacing.
 /// @example --kendo-col-gap: var(--kendo-spacing-1px, 1px);
 /// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-hair
-/// @group col-gap-responsive
+/// @group col-gap
 /// @contextType css
 
 @use "../_globals.scss" as *;

package/scss/spacing/_padding.scss

@@ -16,12 +16,6 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding: 0.125rem;`.
-/// @example padding: 0.125rem;
-/// @name .k-p-{xs|sm|md|lg|xl|xxl}-0\.5
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding: 0.25rem;`.
 /// @example padding: 0.25rem;
 /// @name .k-p-xs
@@ -484,7 +478,7 @@
 /// This is equivalent to `padding-inline: 0.125rem;`.
 /// @example padding-inline: 0.125rem;
 /// @name .k-px-{xs|sm|md|lg|xl|xxl}-0\.5
-/// @group padding
+/// @group padding-responsive
 /// @contextType css
 
 /// This is equivalent to `padding-inline: 0.25rem;`.
@@ -550,7 +544,7 @@
 /// This is equivalent to `padding-block: 0.125rem;`.
 /// @example padding-block: 0.125rem;
 /// @name .k-py-{xs|sm|md|lg|xl|xxl}-0\.5
-/// @group padding
+/// @group padding-responsive
 /// @contextType css
 
 /// This is equivalent to `padding-block: 0.25rem;`.