@progress/kendo-theme-utils 6.2.1-dev.1 → 6.2.1-dev.154

package/scss/flex-grid/_justify-self.scss

@@ -1,4 +1,80 @@
-// TODO: docs
+/// This is equivalent to `justify-self: auto;`.
+/// @example justify-self: auto;
+/// @name .k-justify-self-auto
+/// @group justify-self
+/// @contextType css
+
+/// This is equivalent to `justify-self: normal;`.
+/// @example justify-self: normal;
+/// @name .k-justify-self-normal
+/// @group justify-self
+/// @contextType css
+
+/// This is equivalent to `justify-self: stretch;`.
+/// @example justify-self: stretch;
+/// @name .k-justify-self-stretch
+/// @group justify-self
+/// @contextType css
+
+/// This is equivalent to `justify-self: center;`.
+/// @example justify-self: center;
+/// @name .k-justify-self-center
+/// @group justify-self
+/// @contextType css
+
+/// This is equivalent to `justify-self: start;`.
+/// @example justify-self: start;
+/// @name .k-justify-self-start
+/// @group justify-self
+/// @contextType css
+
+/// This is equivalent to `justify-self: end;`.
+/// @example justify-self: end;
+/// @name .k-justify-self-end
+/// @group justify-self
+/// @contextType css
+
+/// This is equivalent to `justify-self: flex-start;`.
+/// @example justify-self: flex-start;
+/// @name .k-justify-self-selft-start
+/// @group justify-self
+/// @contextType css
+
+/// This is equivalent to `justify-self: flex-end;`.
+/// @example justify-self: flex-end;
+/// @name .k-justify-self-self-end
+/// @group justify-self
+/// @contextType css
+
+/// This is equivalent to `justify-self: self-start;`.
+/// @example justify-self: self-start;
+/// @name .k-justify-self-selft-start
+/// @group justify-self
+/// @contextType css
+
+/// This is equivalent to `justify-self: self-end;`.
+/// @example justify-self: self-end;
+/// @name .k-justify-self-self-end
+/// @group justify-self
+/// @contextType css
+
+/// This is equivalent to `justify-self: baseline;`.
+/// @example justify-self: baseline;
+/// @name .k-justify-self-baseline
+/// @group justify-self
+/// @contextType css
+
+/// This is equivalent to `justify-self: first baseline;`.
+/// @example justify-self: first baseline;
+/// @name .k-justify-self-first-baseline
+/// @group justify-self
+/// @contextType css
+
+/// This is equivalent to `justify-self: last baseline;`.
+/// @example justify-self: last baseline;
+/// @name .k-justify-self-last-baseline
+/// @group justify-self
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--justify-self() {
 

package/scss/flex-grid/_order.scss

@@ -1,14 +1,23 @@
+/// This is equivalent to `order: 1;`.
+/// @example order: 1;
+/// @name .k-order-first
+/// @group order
+/// @contextType css
+
 /// This is equivalent to `order: -9999;`.
+/// @example order: -9999;
 /// @name .k-order-first
 /// @group order
 /// @contextType css
 
 /// This is equivalent to `order: 9999;`.
+/// @example order: 9999;
 /// @name .k-order-last
 /// @group order
 /// @contextType css
 
 /// This is equivalent to `order: 0;`.
+/// @example order: 0;
 /// @name .k-order-none
 /// @group order
 /// @contextType css

package/scss/flex-grid/_place-content.scss

@@ -1,4 +1,80 @@
-// TODO: docs
+/// This is equivalent to `place-content: normal;`.
+/// @example place-content: normal;
+/// @name .k-place-content-normal
+/// @group place-content
+/// @contextType css
+
+/// This is equivalent to `place-content: stretch;`.
+/// @example place-content: stretch;
+/// @name .k-place-content-stretch
+/// @group place-content
+/// @contextType css
+
+/// This is equivalent to `place-content: center;`.
+/// @example place-content: center;
+/// @name .k-place-content-center
+/// @group place-content
+/// @contextType css
+
+/// This is equivalent to `place-content: start;`.
+/// @example place-content: start;
+/// @name .k-place-content-start
+/// @group place-content
+/// @contextType css
+
+/// This is equivalent to `place-content: end;`.
+/// @example place-content: end;
+/// @name .k-place-content-end
+/// @group place-content
+/// @contextType css
+
+/// This is equivalent to `place-content: flex-start;`.
+/// @example place-content: flex-start;
+/// @name .k-place-content-selft-start
+/// @group place-content
+/// @contextType css
+
+/// This is equivalent to `place-content: flex-end;`.
+/// @example place-content: flex-end;
+/// @name .k-place-content-self-end
+/// @group place-content
+/// @contextType css
+
+/// This is equivalent to `place-content: self-start;`.
+/// @example place-content: self-start;
+/// @name .k-place-content-selft-start
+/// @group place-content
+/// @contextType css
+
+/// This is equivalent to `place-content: self-end;`.
+/// @example place-content: self-end;
+/// @name .k-place-content-self-end
+/// @group place-content
+/// @contextType css
+
+/// This is equivalent to `place-content: baseline;`.
+/// @example place-content: baseline;
+/// @name .k-place-content-baseline
+/// @group place-content
+/// @contextType css
+
+/// This is equivalent to `place-content: space-between;`.
+/// @example place-content: space-between;
+/// @name .k-place-content-between
+/// @group place-content
+/// @contextType css
+
+/// This is equivalent to `place-content: space-around;`.
+/// @example place-content: space-around;
+/// @name .k-place-content-around
+/// @group place-content
+/// @contextType css
+
+/// This is equivalent to `place-content: space-evenly;`.
+/// @example place-content: space-evenly;
+/// @name .k-place-content-evenly
+/// @group place-content
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--place-content() {
 

package/scss/flex-grid/_place-items.scss

@@ -1,4 +1,62 @@
-// TODO: docs
+/// This is equivalent to `place-items: normal;`.
+/// @example place-items: normal;
+/// @name .k-place-items-normal
+/// @group place-items
+/// @contextType css
+
+/// This is equivalent to `place-items: stretch;`.
+/// @example place-items: stretch;
+/// @name .k-place-items-stretch
+/// @group place-items
+/// @contextType css
+
+/// This is equivalent to `place-items: center;`.
+/// @example place-items: center;
+/// @name .k-place-items-center
+/// @group place-items
+/// @contextType css
+
+/// This is equivalent to `place-items: start;`.
+/// @example place-items: start;
+/// @name .k-place-items-start
+/// @group place-items
+/// @contextType css
+
+/// This is equivalent to `place-items: end;`.
+/// @example place-items: end;
+/// @name .k-place-items-end
+/// @group place-items
+/// @contextType css
+
+/// This is equivalent to `place-items: flex-start;`.
+/// @example place-items: flex-start;
+/// @name .k-place-items-flex-start
+/// @group place-items
+/// @contextType css
+
+/// This is equivalent to `place-items: flex-end;`.
+/// @example place-items: flex-end;
+/// @name .k-place-items-flex-end
+/// @group place-items
+/// @contextType css
+
+/// This is equivalent to `place-items: self-start;`.
+/// @example place-items: self-start;
+/// @name .k-place-items-self-start
+/// @group place-items
+/// @contextType css
+
+/// This is equivalent to `place-items: self-end;`.
+/// @example place-items: self-end;
+/// @name .k-place-items-self-end
+/// @group place-items
+/// @contextType css
+
+/// This is equivalent to `place-items: baseline;`.
+/// @example place-items: baseline;
+/// @name .k-place-items-baseline
+/// @group place-items
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--place-items() {
 

package/scss/flex-grid/_place-self.scss

@@ -1,4 +1,68 @@
-// TODO: docs
+/// This is equivalent to `place-self: auto;`.
+/// @example place-self: auto;
+/// @name .k-place-self-auto
+/// @group place-self
+/// @contextType css
+
+/// This is equivalent to `place-self: normal;`.
+/// @example place-self: normal;
+/// @name .k-place-self-normal
+/// @group place-self
+/// @contextType css
+
+/// This is equivalent to `place-self: stretch;`.
+/// @example place-self: stretch;
+/// @name .k-place-self-stretch
+/// @group place-self
+/// @contextType css
+
+/// This is equivalent to `place-self: center;`.
+/// @example place-self: center;
+/// @name .k-place-self-center
+/// @group place-self
+/// @contextType css
+
+/// This is equivalent to `place-self: start;`.
+/// @example place-self: start;
+/// @name .k-place-self-start
+/// @group place-self
+/// @contextType css
+
+/// This is equivalent to `place-self: end;`.
+/// @example place-self: end;
+/// @name .k-place-self-end
+/// @group place-self
+/// @contextType css
+
+/// This is equivalent to `place-self: flex-start;`.
+/// @example place-self: flex-start;
+/// @name .k-place-self-flex-start
+/// @group place-self
+/// @contextType css
+
+/// This is equivalent to `place-self: flex-end;`.
+/// @example place-self: flex-end;
+/// @name .k-place-self-flex-end
+/// @group place-self
+/// @contextType css
+
+/// This is equivalent to `place-self: self-start;`.
+/// @example place-self: self-start;
+/// @name .k-place-self-self-start
+/// @group place-self
+/// @contextType css
+
+/// This is equivalent to `place-self: self-end;`.
+/// @example place-self: self-end;
+/// @name .k-place-self-self-end
+/// @group place-self
+/// @contextType css
+
+/// This is equivalent to `place-self: baseline;`.
+/// @example place-self: baseline;
+/// @name .k-place-self-baseline
+/// @group place-self
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--place-self() {
 

package/scss/index.import.scss

@@ -10,12 +10,13 @@
 @import "./typography/index.import.scss";
 @import "./background/index.import.scss";
 @import "./border/index.import.scss";
-// effects
-// filter
+@import "./effects/index.import.scss";
+@import "./filter/index.import.scss";
 @import "./table/index.import.scss";
 // transition
 @import "./transform/index.import.scss";
 @import "./interactivity/index.import.scss";
+@import "./svg/index.import.scss";
 
 
 // Mixin for all styles
@@ -28,7 +29,10 @@
     @include kendo-utils--typography();
     @include kendo-utils--background();
     @include kendo-utils--border();
+    @include kendo-utils--effects();
+    @include kendo-utils--filter();
     @include kendo-utils--table();
     @include kendo-utils--transform();
     @include kendo-utils--interactivity();
+    @include kendo-utils--svg();
 }

package/scss/interactivity/_appearance.scss

@@ -1,9 +1,11 @@
-/// This is equivalent to `appearance: none;`. Resets any browser specific styling on an element.
+/// This is equivalent to `appearance: none;`.
+/// @example appearance: none;
 /// @name .k-appearance-none
 /// @group appearance
 /// @contextType css
 
-/// This is equivalent to `appearance: auto;`. The user agent selects the appropriate special styling based on the element. Acts as `none` on elements with no special styling.
+/// This is equivalent to `appearance: auto;`.
+/// @example appearance: auto;
 /// @name .k-appearance-auto
 /// @group appearance
 /// @contextType css

package/scss/interactivity/_cursor.scss

@@ -1,4 +1,26 @@
-// TODO: docs
+/// This is equivalent to `cursor: none;`.
+/// @example cursor: none;
+/// @name .k-cursor-none
+/// @group cursor
+/// @contextType css
+
+/// This is equivalent to `cursor: auto;`.
+/// @example cursor: auto;
+/// @name .k-cursor-auto
+/// @group cursor
+/// @contextType css
+
+/// This is equivalent to `cursor: default;`.
+/// @example cursor: default;
+/// @name .k-cursor-default
+/// @group cursor
+/// @contextType css
+
+/// This is equivalent to `cursor: pointer;`.
+/// @example cursor: pointer;
+/// @name .k-cursor-pointer
+/// @group cursor
+/// @contextType css
 
 @mixin kendo-utils--interactivity--cursor() {
 

package/scss/interactivity/_pointer-events.scss

@@ -1,11 +1,11 @@
-// Pointer-events documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.
-
-/// This is equivalent to `pointer-events: none;`. The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
+/// This is equivalent to `pointer-events: none;`.
+/// @example pointer-events: none;
 /// @name .k-pointer-events-none
 /// @group pointer-events
 /// @contextType css
 
-/// This is equivalent to `pointer-events: auto;`. The element behaves as it would if the pointer-events property were not specified. In SVG content, this value and the value visiblePainted have the same effect.
+/// This is equivalent to `pointer-events: auto;`.
+/// @example pointer-events: auto;
 /// @name .k-pointer-events-auto
 /// @group pointer-events
 /// @contextType css

package/scss/interactivity/_resize.scss

@@ -1,21 +1,23 @@
-// Resize documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/resize.
-
-/// This is equivalent to `resize: both;`. The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.
+/// This is equivalent to `resize: both;`.
+/// @example resize: both;
 /// @name .k-resize
 /// @group resize
 /// @contextType css
 
-/// This is equivalent to `resize: none;`. The element offers no user-controllable method for resizing it.
+/// This is equivalent to `resize: none;`.
+/// @example resize: none;
 /// @name .k-resize-none
 /// @group resize
 /// @contextType css
 
-/// This is equivalent to `resize: horizontal;`. The element displays a mechanism for allowing the user to resize it in the horizontal direction.
+/// This is equivalent to `resize: horizontal;`.
+/// @example resize: horizontal;
 /// @name .k-resize-x
 /// @group resize
 /// @contextType css
 
-/// This is equivalent to `resize: vertical;`. The element displays a mechanism for allowing the user to resize it in the vertical direction.
+/// This is equivalent to `resize: vertical;`.
+/// @example resize: vertical;
 /// @name .k-resize-y
 /// @group resize
 /// @contextType css