@progress/kendo-theme-utils 5.4.2-dev.5

package/scss/layout/_display.scss

@@ -0,0 +1,47 @@
+/// @name .k-d-none
+/// @description This is equivalent to `display: none;`. Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
+/// @group display
+
+/// @name .k-d-block
+/// @description This is equivalent to `display: block;`. The element generates a block element box, generating line breaks both before and after the element when in the normal flow.
+/// @group display
+
+/// @name .k-d-inline
+/// @description This is equivalent to `display: inline;`. The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.
+/// @group display
+
+/// @name .k-d-inline-block
+/// @description This is equivalent to `display: inline-block;`. The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
+/// @group display
+
+/// @name .k-d-flex
+/// @description This is equivalent to `display: flex;`. The element behaves like a block element and lays out its content according to the flexbox model.
+/// @group display
+
+/// @name .k-d-inline-flex
+/// @description This is equivalent to `display: inline-flex;`. The element behaves like an inline element and lays out its content according to the flexbox model.
+/// @group display
+
+/// @name .k-d-grid
+/// @description This is equivalent to `display: grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
+/// @group display
+
+/// @name .k-d-inline-grid
+/// @description 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.
+/// @group display
+
+/// @name .k-d-table
+/// @description This is equivalent to `display: table;`. These elements behave like HTML `<table>` elements. It defines a block-level box.
+/// @group display
+
+/// @name .k-d-inline-table
+/// @description This is equivalent to `display: inline-table;`. The inline-table value does not have a direct mapping in HTML. It behaves like an HTML `<table>` element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.
+/// @group display
+
+/// @name .k-d-list-item
+/// @description This is equivalent to `display: list-item;`. These elements behave like HTML `<LI>` elements. It defines a block-level box.
+/// @group display
+
+$kendo-utils-display: map-get( $kendo-utils, "display" ) !default;
+
+@include generate-utils( d, display, $kendo-utils-display );

package/scss/layout/_float.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-float: map-get( $kendo-utils, "float" ) !default;
+
+@include generate-utils( float, float, $kendo-utils-float );

package/scss/layout/_overflow.scss

@@ -0,0 +1,63 @@
+/// @name .k-overflow-auto
+/// @description This is equivalent to `overflow: auto;`. Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block formatting context. Desktop browsers provide scrollbar if content overflows.
+/// @group overflow
+
+/// @name .k-overflow-hidden
+/// @description This is equivalent to `overflow: hidden;`. Content is clipped if necessary to fit the padding box. No scrollbar is provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container.
+/// @group overflow
+
+/// @name .k-overflow-visible
+/// @description This is equivalent to `overflow: visible;`. Content is not clipped and may be rendered outside the padding box.
+/// @group overflow
+
+/// @name .k-overflow-scroll
+/// @description This is equivalent to `overflow: scroll;`. Content is clipped if necessary to fit the padding box. Browsers always display scrollbar whether or not any content is actually clipped, preventing scrollbar from appearing or disappearing as content changes. Printers may still print overflowing content.
+/// @group overflow
+
+/// @name .k-overflow-clip
+/// @description This is equivalent to `overflow: clip;`. Like for hidden, the content is clipped to the element's padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
+/// @group overflow
+
+/// @name .k-overflow-x-auto
+/// @description This is equivalent to `overflow-x: auto;`.
+/// @group overflow
+
+/// @name .k-overflow-x-hidden
+/// @description This is equivalent to `overflow-x: hidden;`.
+/// @group overflow
+
+/// @name .k-overflow-x-visible
+/// @description This is equivalent to `overflow-x: visible;`.
+/// @group overflow
+
+/// @name .k-overflow-x-scroll
+/// @description This is equivalent to `overflow-x: scroll;`.
+/// @group overflow
+
+/// @name .k-overflow-x-clip
+/// @description This is equivalent to `overflow-x: clip;`.
+/// @group overflow
+
+/// @name .k-overflow-y-auto
+/// @description This is equivalent to `overflow-y: auto;`.
+/// @group overflow
+
+/// @name .k-overflow-y-hidden
+/// @description This is equivalent to `overflow-y: hidden;`.
+/// @group overflow
+
+/// @name .k-overflow-y-visible
+/// @description This is equivalent to `overflow-y: visible;`.
+/// @group overflow
+
+/// @name .k-overflow-y-scroll
+/// @description This is equivalent to `overflow-y: scroll;`.
+/// @group overflow
+
+/// @name .k-overflow-y-clip
+/// @description This is equivalent to `overflow-y: clip;`.
+/// @group overflow
+
+$kendo-utils-overflow: map-get( $kendo-utils, "overflow" ) !default;
+
+@include generate-utils( overflow, overflow, $kendo-utils-overflow );

package/scss/layout/_position.scss

@@ -0,0 +1,60 @@
+// TODO DOCS
+
+$kendo-utils-position: map-get( $kendo-utils, "position" ) !default;
+
+@include generate-utils( pos, position, $kendo-utils-position );
+
+// Aliases
+.#{$kendo-prefix}static { @extend .#{$kendo-prefix}pos-static !optional; }
+.\!#{$kendo-prefix}static { @extend .\!#{$kendo-prefix}pos-static !optional; }
+.#{$kendo-prefix}relative { @extend .#{$kendo-prefix}pos-relative !optional; }
+.\!#{$kendo-prefix}relative { @extend .\!#{$kendo-prefix}pos-relative !optional; }
+.#{$kendo-prefix}absolute { @extend .#{$kendo-prefix}pos-absolute !optional; }
+.\!#{$kendo-prefix}absolute { @extend .\!#{$kendo-prefix}pos-absolute !optional; }
+.#{$kendo-prefix}fixed { @extend .#{$kendo-prefix}pos-fixed !optional; }
+.\!#{$kendo-prefix}fixed { @extend .\!#{$kendo-prefix}pos-fixed !optional; }
+.#{$kendo-prefix}sticky { @extend .#{$kendo-prefix}pos-sticky !optional; }
+.\!#{$kendo-prefix}sticky { @extend .\!#{$kendo-prefix}pos-sticky !optional; }
+
+
+// TODO DOCS
+
+$kendo-utils-inset: map-get( $kendo-utils, "inset" ) !default;
+
+@include generate-utils( inset, inset, $kendo-utils-inset );
+@include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
+@include generate-utils( inset-y, inset-block, $kendo-utils-inset );
+@include generate-utils( top, top, $kendo-utils-inset );
+@include generate-utils( right, right, $kendo-utils-inset );
+@include generate-utils( bottom, bottom, $kendo-utils-inset );
+@include generate-utils( left, left, $kendo-utils-inset );
+@include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
+@include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
+@include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
+@include generate-utils( bottom-right, ( bottom, right), $kendo-utils-inset );
+
+.#{$kendo-prefix}top-center {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.#{$kendo-prefix}middle-left {
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+}
+.#{$kendo-prefix}middle-center {
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%);
+}
+.#{$kendo-prefix}middle-right {
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+}
+.#{$kendo-prefix}bottom-center {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}

package/scss/layout/_visibility.scss

@@ -0,0 +1,11 @@
+// TODO DOCS
+
+$kendo-utils-visibility: map-get( $kendo-utils, "visibility" ) !default;
+
+@include generate-utils( visibility, visibility, $kendo-utils-visibility );
+
+// Aliases
+.#{$kendo-prefix}visible { @extend .#{$kendo-prefix}visibility-visible !optional; }
+.\!#{$kendo-prefix}visible { @extend .\!#{$kendo-prefix}visibility-visible !optional; }
+.#{$kendo-prefix}invisible { @extend .#{$kendo-prefix}visibility-hidden !optional; }
+.\!#{$kendo-prefix}invisible { @extend .\!#{$kendo-prefix}visibility-hidden !optional; }

package/scss/layout/_zindex.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-zindex: map-get( $kendo-utils, "zindex" ) !default;
+
+@include generate-utils( z, z-index, $kendo-utils-zindex );

package/scss/layout/index.import.scss

@@ -0,0 +1,8 @@
+@import "./_aspect-ratio.scss";
+@import "./_display.scss";
+@import "./_float.scss";
+@import "./_clear.scss";
+@import "./_overflow.scss";
+@import "./_position.scss";
+@import "./_visibility.scss";
+@import "./_zindex.scss";

package/scss/sizing/_height.scss

@@ -0,0 +1,15 @@
+// TODO DOCS
+
+$kendo-utils-height: map-get( $kendo-utils, "height" ) !default;
+
+@include generate-utils( h, height, $kendo-utils-height );
+
+
+$kendo-utils-min-height: map-get( $kendo-utils, "min-height" ) !default;
+
+@include generate-utils( min-h, min-height, $kendo-utils-min-height );
+
+
+$kendo-utils-max-height: map-get( $kendo-utils, "max-height" ) !default;
+
+@include generate-utils( max-h, max-height, $kendo-utils-max-height );

package/scss/sizing/_width.scss

@@ -0,0 +1,15 @@
+// TODO DOCS
+
+$kendo-utils-width: map-get( $kendo-utils, "width" ) !default;
+
+@include generate-utils( w, width, $kendo-utils-width );
+
+
+$kendo-utils-min-width: map-get( $kendo-utils, "min-width" ) !default;
+
+@include generate-utils( min-w, min-width, $kendo-utils-min-width );
+
+
+$kendo-utils-max-width: map-get( $kendo-utils, "max-width" ) !default;
+
+@include generate-utils( max-w, max-width, $kendo-utils-max-width );

package/scss/sizing/index.import.scss

@@ -0,0 +1,2 @@
+@import "./_width.scss";
+@import "./_height.scss";

package/scss/spacing/_margin.scss

@@ -0,0 +1,11 @@
+// TODO DOCS
+
+$kendo-utils-margin: map-get( $kendo-utils, "margin" ) !default;
+
+@include generate-utils( m, margin, $kendo-utils-margin );
+@include generate-utils( mt, margin-top, $kendo-utils-margin );
+@include generate-utils( mr, margin-right, $kendo-utils-margin );
+@include generate-utils( mb, margin-bottom, $kendo-utils-margin );
+@include generate-utils( ml, margin-left, $kendo-utils-margin );
+@include generate-utils( mx, margin-inline, $kendo-utils-margin );
+@include generate-utils( my, margin-block, $kendo-utils-margin );

package/scss/spacing/_padding.scss

@@ -0,0 +1,11 @@
+// TODO DOCS
+
+$kendo-utils-padding: map-get( $kendo-utils, "padding" ) !default;
+
+@include generate-utils( p, padding, $kendo-utils-padding );
+@include generate-utils( pt, padding-top, $kendo-utils-padding );
+@include generate-utils( pr, padding-right, $kendo-utils-padding );
+@include generate-utils( pb, padding-bottom, $kendo-utils-padding );
+@include generate-utils( pl, padding-left, $kendo-utils-padding );
+@include generate-utils( px, padding-inline, $kendo-utils-padding );
+@include generate-utils( py, padding-block, $kendo-utils-padding );

package/scss/spacing/index.import.scss

@@ -0,0 +1,3 @@
+@import "./_margin.scss";
+@import "./_padding.scss";
+@import "./_space-between.scss";

package/scss/table/_border-collapse.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-border-collapse: map-get( $kendo-utils, "border-collapse" ) !default;
+
+@include generate-utils( border, border-collapse, $kendo-utils-border-collapse );

package/scss/table/_table-layout.scss

@@ -0,0 +1,11 @@
+/// @name .k-table-layout-auto
+/// @description This is equivalent to `table-layout: auto;`. By default, most browsers use an automatic table layout algorithm. The widths of the table and its cells are adjusted to fit the content.
+/// @group table-layout
+
+/// @name .k-table-layout-fixed
+/// @description This is equivalent to `table-layout: fixed;`. Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
+/// @group table-layout
+
+$kendo-utils-table-layout: map-get( $kendo-utils, "table-layout" ) !default;
+
+@include generate-utils( table, table-layout, $kendo-utils-table-layout );

package/scss/table/index.import.scss

@@ -0,0 +1,2 @@
+@import "./_border-collapse.scss";
+@import "./_table-layout.scss";

package/scss/transform/_flip.scss

@@ -0,0 +1,24 @@
+/// @name .k-flip-h
+/// @description This is equivalent to `transform: scaleX( -1 );`. Flips the element horizontally.
+/// @group transform
+
+/// @name .k-flip-v
+/// @description This is equivalent to `transform: scaleY( -1 );`. Flips the element vertically.
+/// @group transform
+
+$kendo-utils-flip: map-get( $kendo-utils, "flip" ) !default;
+
+@if $kendo-utils-flip {
+    .#{$kendo-prefix}flip-h { transform: scaleX( -1 ); }
+    .\!#{$kendo-prefix}flip-h { transform: scaleX( -1 ) !important; } // sass-lint:disable-line no-important
+    .#{$kendo-prefix}flip-v { transform: scaleY( -1 ); }
+    .\!#{$kendo-prefix}flip-v { transform: scaleY( -1 ) !important; } // sass-lint:disable-line no-important
+    .#{$kendo-prefix}flip-h.#{$kendo-prefix}flip-v { transform: scale( -1, -1 ); }
+    .\!#{$kendo-prefix}flip-h.\!#{$kendo-prefix}flip-v { transform: scale( -1, -1 ) !important; } // sass-lint:disable-line no-important
+
+    // Aliases
+    .#{$kendo-prefix}flip-x { @extend .#{$kendo-prefix}flip-h !optional; }
+    .\!#{$kendo-prefix}flip-x { @extend .\!#{$kendo-prefix}flip-h !optional; }
+    .#{$kendo-prefix}flip-y { @extend .#{$kendo-prefix}flip-v !optional; }
+    .\!#{$kendo-prefix}flip-y { @extend .\!#{$kendo-prefix}flip-v !optional; }
+}

package/scss/transform/_origin.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-origin: map-get( $kendo-utils, "origin" ) !default;
+
+@include generate-utils( origin, transform-origin, $kendo-utils-origin );

package/scss/transform/_rotate.scss

@@ -0,0 +1,11 @@
+// TODO DOCS
+
+$kendo-utils-rotate: map-get( $kendo-utils, "rotate" ) !default;
+
+// sass-lint:disable function-name-format
+@function __rotate( $val ) {
+    @return rotate( $val );
+}
+// sass-lint:enable function-name-format
+
+@include generate-utils( rotate, transform, $kendo-utils-rotate, __rotate );

package/scss/transform/_scale.scss

@@ -0,0 +1,19 @@
+// TODO DOCS
+
+$kendo-utils-scale: map-get( $kendo-utils, "scale" ) !default;
+
+// sass-lint:disable function-name-format
+@function __scale( $val ) {
+    @return scale( $val );
+}
+@function __scale-x( $val ) {
+    @return scaleX( $val );
+}
+@function __scale-y( $val ) {
+    @return scaleY( $val );
+}
+// sass-lint:enable function-name-format
+
+@include generate-utils( scale, transform, $kendo-utils-scale, __scale );
+@include generate-utils( scale-x, transform, $kendo-utils-scale, __scale-x );
+@include generate-utils( scale-y, transform, $kendo-utils-scale, __scale-y );

package/scss/transform/_skew.scss

@@ -0,0 +1,15 @@
+// TODO DOCS
+
+$kendo-utils-skew: map-get( $kendo-utils, "skew" ) !default;
+
+// sass-lint:disable function-name-format
+@function __skew-x( $val ) {
+    @return skewX( $val );
+}
+@function __skew-y( $val ) {
+    @return skewY( $val );
+}
+// sass-lint:enable function-name-format
+
+@include generate-utils( skew-x, transform, $kendo-utils-skew, __skew-x );
+@include generate-utils( skew-y, transform, $kendo-utils-skew, __skew-y );

package/scss/transform/_translate.scss

@@ -0,0 +1,15 @@
+// TODO DOCS
+
+$kendo-utils-translate: map-get( $kendo-utils, "translate" ) !default;
+
+// sass-lint:disable function-name-format
+@function __translate-x( $val ) {
+    @return translateX( $val );
+}
+@function __translate-y( $val ) {
+    @return translateY( $val );
+}
+// sass-lint:enable function-name-format
+
+@include generate-utils( translate-x, transform, $kendo-utils-translate, __translate-x );
+@include generate-utils( translate-y, transform, $kendo-utils-translate, __translate-y );

package/scss/transform/index.import.scss

@@ -0,0 +1,6 @@
+@import "./_flip.scss";
+@import "./_scale.scss";
+@import "./_rotate.scss";
+@import "./_translate.scss";
+@import "./_skew.scss";
+@import "./_origin.scss";

package/scss/typography/_font-size.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-font-size: map-get( $kendo-utils, "font-size" ) !default;
+
+@include generate-utils( font-size, font-size, $kendo-utils-font-size );

package/scss/typography/_font-style.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-font-style: map-get( $kendo-utils, "font-style" ) !default;
+
+@include generate-utils( font, font-style, $kendo-utils-font-style );

package/scss/typography/_font-weight.scss

@@ -0,0 +1,5 @@
+// TODO DOCS
+
+$kendo-utils-font-weight: map-get( $kendo-utils, "font-weight" ) !default;
+
+@include generate-utils( font, font-weight, $kendo-utils-font-weight );

package/scss/typography/_text-align.scss

@@ -0,0 +1,19 @@
+/// @name .k-text-left
+/// @description This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box.
+/// @group text-align
+
+/// @name .k-text-right
+/// @description This is equivalent to `text-align: right;`. The inline contents are aligned to the right edge of the line box.
+/// @group text-align
+
+/// @name .k-text-center
+/// @description This is equivalent to `text-align: center;`. The inline contents are centered within the line box.
+/// @group text-align
+
+/// @name .k-text-justify
+/// @description This is equivalent to `text-align: justify;`. The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
+/// @group text-align
+
+$kendo-utils-text-align: map-get( $kendo-utils, "text-align" ) !default;
+
+@include generate-utils( text, text-align, $kendo-utils-text-align );

package/scss/typography/_text-transform.scss

@@ -0,0 +1,17 @@
+// TODO DOCS
+
+/// @name k-text-lowercase
+/// @description This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
+/// @group text-transform
+
+/// @name k-text-uppercase
+/// @description This is equivalent to `text-transform: uppercase;`. Is a keyword that converts all characters to uppercase.
+/// @group text-transform
+
+/// @name k-text-capitalize
+/// @description This is equivalent to `text-transform: capitalize;`. Is a keyword that converts the first letter of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text).
+/// @group text-transform
+
+$kendo-utils-text-transform: map-get( $kendo-utils, "text-transform" ) !default;
+
+@include generate-utils( text, text-transform, $kendo-utils-text-transform );

package/scss/typography/_white-space.scss

@@ -0,0 +1,27 @@
+/// @name .k-white-space-normal
+/// @description This is equivalent to `white-space: normal;`. Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
+/// @group white-space
+
+/// @name .k-white-space-nowrap
+/// @description This is equivalent to `white-space: nowrap;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
+/// @group white-space
+
+/// @name .k-white-space-pre
+/// @description This is equivalent to `white-space: pre;`. Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.
+/// @group white-space
+
+/// @name .k-white-space-pre-wrap
+/// @description This is equivalent to `white-space: pre-wrap;`. Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
+/// @group white-space
+
+/// @name .k-white-space-pre-line
+/// @description This is equivalent to `white-space: pre-line;`. Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
+/// @group white-space
+
+/// @name .k-white-space-break-spaces
+/// @description This is equivalent to `white-space: break-spaces;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
+/// @group white-space
+
+$kendo-utils-white-space: map-get( $kendo-utils, "white-space" ) !default;
+
+@include generate-utils( white-space, white-space, $kendo-utils-white-space );

package/scss/typography/index.import.scss

@@ -0,0 +1,17 @@
+// font family
+@import "./_font-size.scss";
+// font smoothing
+@import "./_font-style.scss";
+@import "./_font-weight.scss";
+// font variant
+// letter spacing
+// line height
+// list style
+@import "./_text-align.scss";
+// text color
+// text decoration
+@import "./_text-transform.scss";
+// text overflow
+// text indent
+// vertical align
+@import "./_white-space.scss";