@progress/kendo-theme-default 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/utils/_position.scss

@@ -1,182 +0,0 @@
-@include exports( "utils/position" ) {
-
-    // Position documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/position.
-
-    /// @name k-pos-static
-    /// @description This is equivalent to `position: static;`. The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.
-    /// @group position
-
-    /// @name k-pos-relative
-    /// @description This is equivalent to `position: relative;`. The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
-    /// @group position
-
-    /// @name k-pos-absolute
-    /// @description This is equivalent to `position: absolute;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
-    /// @group position
-
-    /// @name k-pos-fixed
-    /// @description This is equivalent to `position: fixed;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
-    /// @group position
-
-    /// @name k-pos-sticky
-    /// @description This is equivalent to `position: sticky;`. The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
-    /// @group position
-
-    @each $pos in (static, relative, absolute, fixed, sticky) {
-        .k-#{$pos},
-        .k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
-
-        .\!k-#{$pos},
-        .\!k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
-    }
-
-    /// @name k-pos-top
-    /// @description This is equivalent to `top: 0;`.
-    /// @group position
-
-    /// @name k-pos-right
-    /// @description This is equivalent to `right: 0;`.
-    /// @group position
-
-    /// @name k-pos-bottom
-    /// @description This is equivalent to `bottom: 0;`.
-    /// @group position
-
-    /// @name k-pos-left
-    /// @description This is equivalent to `left: 0;`.
-    /// @group position
-
-    @each $side in (top, right, bottom, left) {
-        .k-#{$side},
-        .k-pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
-    }
-
-    /// @name k-pos-top-start
-    /// @description This is equivalent to `top: 0; left: 0;`.
-    /// @group position
-    .k-top-start,
-    .k-pos-top-start {
-        top: 0;
-        left: 0;
-
-        .k-rtl &,
-        &[dir="rtl"],
-        [dir="rtl"] & {
-            left: auto;
-            right: 0;
-        }
-    }
-
-    /// @name k-pos-top-center
-    /// @description This is equivalent to `top: 0; left: 50%; transform: translateX(-50%);`.
-    /// @group position
-    .k-top-center,
-    .k-pos-top-center {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    /// @name k-pos-top-end
-    /// @description This is equivalent to `top: 0; right: 0;`.
-    /// @group position
-    .k-top-end,
-    .k-pos-top-end {
-        top: 0;
-        right: 0;
-
-        .k-rtl &,
-        &[dir="rtl"],
-        [dir="rtl"] & {
-            right: auto;
-            left: 0;
-        }
-    }
-
-    /// @name k-pos-middle-start
-    /// @description This is equivalent to `top: 50%; left: 0; transform: translateY(-50%);`.
-    /// @group position
-    .k-middle-start,
-    .k-pos-middle-start {
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%);
-
-        .k-rtl &,
-        &[dir="rtl"],
-        [dir="rtl"] & {
-            left: auto;
-            right: 0;
-        }
-    }
-
-    /// @name k-pos-middle-center
-    /// @description This is equivalent to `top: 50%; left: 50%; transform: translate(-50%, -50%);`.
-    /// @group position
-    .k-middle-center,
-    .k-pos-middle-center {
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-
-    /// @name k-pos-middle-end
-    /// @description This is equivalent to `top: 50%; right: 0; transform: translateY(-50%);`.
-    /// @group position
-    .k-middle-end,
-    .k-pos-middle-end {
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
-
-        .k-rtl &,
-        &[dir="rtl"],
-        [dir="rtl"] & {
-            right: auto;
-            left: 0;
-        }
-    }
-
-    /// @name k-pos-bottom-start
-    /// @description This is equivalent to `bottom: 0; left: 0;`.
-    /// @group position
-    .k-bottom-start,
-    .k-pos-bottom-start {
-        bottom: 0;
-        left: 0;
-
-        .k-rtl &,
-        &[dir="rtl"],
-        [dir="rtl"] & {
-            left: auto;
-            right: 0;
-        }
-    }
-
-    /// @name k-pos-bottom-center
-    /// @description This is equivalent to `bottom: 0; left: 50%; translateX(-50%);`.
-    /// @group position
-    .k-bottom-center,
-    .k-pos-bottom-center {
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    /// @name k-pos-bottom-end
-    /// @description This is equivalent to `bottom: 0; right: 0;`.
-    /// @group position
-    .k-bottom-end,
-    .k-pos-bottom-end {
-        bottom: 0;
-        right: 0;
-
-        .k-rtl &,
-        &[dir="rtl"],
-        [dir="rtl"] & {
-            right: auto;
-            left: 0;
-        }
-    }
-
-}

package/scss/utils/_resize.scss

@@ -1,37 +0,0 @@
-@include exports( "utils/resize" ) {
-
-    // Resize documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/resize.
-
-    // @name k-resize-none
-    // @description This is equivalent to `resize: none;`. The element offers no user-controllable method for resizing it.
-    // @group resize
-
-    // @name k-resize-both
-    // @description 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.
-    // @group resize
-
-    // @name k-resize-horizontal
-    // @description This is equivalent to `resize: horizontal;`. The element displays a mechanism for allowing the user to resize it in the horizontal direction.
-    // @group resize
-
-    // @name k-resize-vertical
-    // @description This is equivalent to `resize: vertical;`. The element displays a mechanism for allowing the user to resize it in the vertical direction.
-    // @group resize
-
-    $utils-resize: (
-        none,
-        both,
-        horizontal,
-        vertical
-    ) !default;
-
-    @if $utils-resize {
-        @each $resize in $utils-resize {
-            .k-resize-#{$resize} { resize: $resize; }
-
-            // sass-lint:disable-block no-important
-            .\!k-resize-#{$resize} { resize: $resize !important; }
-        }
-    }
-
-}

package/scss/utils/_spacer.scss

@@ -1,16 +0,0 @@
-@include exports( "utils/spacer" ) {
-
-    /// @name k-spacer
-    /// @description This is equivalent to `flex: 1 0 auto;`. If every other element has a fixed size in a flex container, the spacer will take up the remaining space.
-    /// @group spacer
-    .k-spacer {
-        flex: 1 0 auto;
-    }
-
-    /// @name k-spacer-sized
-    /// @description This is equivalent to `flex-grow: 0;`. The spacer will not take any of the remaining space in a flex container.
-    /// @group spacer
-    .k-spacer-sized {
-        flex-grow: 0;
-    }
-}

package/scss/utils/_spacing.scss

@@ -1,138 +0,0 @@
-@include exports( "utils/spacing" ) {
-
-    // sass-lint:disable-block no-important
-    // sass-lint:disable-block indentation
-
-    // @name Available Padding and Margin Values
-    // @description From `0`(0) to `24`(96px or 6rem), `xs`(4px or .25rem), `sm`(8px or .5rem), `md`(12px or .75rem), `lg`(16px or 1rem), `xl`(24px or 1.5rem), `thin`(2px or .125rem), and `hair`(1px or .0625rem). Numeric values examples - `1`(4px or .25rem), `5`(20px or 1.25rem), `10`(40px or 2.5rem), `20`(80px or 5rem).
-    // @group spacing
-
-    $utils-margin: (
-        m: margin,
-        mt: margin-top,
-        mr: margin-right,
-        mb: margin-bottom,
-        ml: margin-left
-    ) !default;
-
-    $utils-padding: (
-        p: padding,
-        pt: padding-top,
-        pr: padding-right,
-        pb: padding-bottom,
-        pl: padding-left
-    ) !default;
-
-    // @name k-m-VALUE
-    // @description This is equivalent to `margin: VALUE;`. Margin area on all four sides of the element.
-    // @group spacing
-
-    // @name k-mt-VALUE
-    // @description This is equivalent to `margin-top: VALUE;`. Margin area on top of the element.
-    // @group spacing
-
-    // @name k-mr-VALUE
-    // @description This is equivalent to `margin-right: VALUE;`. Margin area on right of the element.
-    // @group spacing
-
-    // @name k-mb-VALUE
-    // @description This is equivalent to `margin-bottom: VALUE;`. Margin area on bottom of the element.
-    // @group spacing
-
-    // @name k-ml-VALUE
-    // @description This is equivalent to `margin-left: VALUE;`. Margin area on left of the element.
-    // @group spacing
-
-    // @name k-mx-VALUE
-    // @description This is equivalent to `margin-left: VALUE; margin-right: VALUE;`. Margin area on left and right of the element.
-    // @group spacing
-
-    // @name k-my-VALUE
-    // @description This is equivalent to `margin-top: VALUE; margin-bottom: VALUE;``. Margin area on top and bottom of the element.
-    // @group spacing
-
-    // Margin
-    @each $size, $val in $spacing {
-        @each $name, $prop in $utils-margin {
-            .k-#{$name}-#{$size} { #{$prop}: $val !important; }
-        }
-
-        .k-mx-#{$size} {
-            margin-left: $val !important;
-            margin-right: $val !important;
-        }
-        .k-my-#{$size} {
-            margin-top: $val !important;
-            margin-bottom: $val !important;
-        }
-    }
-
-    // @name k-p-VALUE
-    // @description This is equivalent to `padding: VALUE;`. Padding area on all four sides of the element.
-    // @group spacing
-
-    // @name k-pt-VALUE
-    // @description This is equivalent to `padding-top: VALUE;`. Padding area on top of the element.
-    // @group spacing
-
-    // @name k-pr-VALUE
-    // @description This is equivalent to `padding-right: VALUE;`. Padding area on right of the element.
-    // @group spacing
-
-    // @name k-pb-VALUE
-    // @description This is equivalent to `padding-bottom: VALUE;`. Padding area on bottom of the element.
-    // @group spacing
-
-    // @name k-pl-VALUE
-    // @description This is equivalent to `padding-left: VALUE;`. Padding area on left of the element.
-    // @group spacing
-
-    // @name k-px-VALUE
-    // @description This is equivalent to `padding-left: VALUE; padding-right: VALUE;`. Padding area on left and right of the element.
-    // @group spacing
-
-    // @name k-py-VALUE
-    // @description This is equivalent to `padding-top: VALUE; padding-bottom: VALUE;``. Padding area on top and bottom of the element.
-    // @group spacing
-
-    // Padding
-    @each $size, $val in $spacing {
-        @each $name, $prop in $utils-padding {
-            .k-#{$name}-#{$size} { #{$prop}: $val !important; }
-        }
-
-        .k-px-#{$size} {
-            padding-left: $val !important;
-            padding-right: $val !important;
-        }
-        .k-py-#{$size} {
-            padding-top: $val !important;
-            padding-bottom: $val !important;
-        }
-    }
-
-    // @name k-gap-VALUE
-    // @description This is equivalent to `gap: VALUE;`. Gap area between both rows and columns in grid and flexbox layouts.
-    // @group spacing
-
-    // @name k-gap-x-VALUE
-    // @description This is equivalent to `column-gap: VALUE;`. Gap area between columns in grid and flexbox layouts.
-    // @group spacing
-
-    // @name k-gap-y-VALUE
-    // @description This is equivalent to `row-gap: VALUE;`. Gap area between rows in grid and flexbox layouts.
-    // @group spacing
-
-    // Gap
-    .k-no-gap { gap: 0 !important; }
-
-    @each $size, $val in $spacing {
-        .k-gap-#{$size}     { gap: $val; }
-        .k-gap-x-#{$size}   { column-gap: $val; }
-        .k-gap-y-#{$size}   { row-gap: $val; }
-
-        .\!k-gap-#{$size}   { gap: $val !important; }
-        .\!k-gap-x-#{$size} { column-gap: $val !important; }
-        .\!k-gap-y-#{$size} { row-gap: $val !important; }
-    }
-}

package/scss/utils/_table-layout.scss

@@ -1,17 +0,0 @@
-@include exports( "utils/table-layout" ) {
-
-    // sass-lint:disable-block no-important
-    // stylelint-disable block-opening-brace-space-before
-
-    // Table-layout documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/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
-    .k-table-layout-fixed           { table-layout: fixed; }
-    /// @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
-    .k-table-layout-auto            { table-layout: auto; }
-
-}

package/scss/utils/_text.scss

@@ -1,128 +0,0 @@
-@include exports( "utils/text" ) {
-
-    // stylelint-disable block-opening-brace-space-before
-    // sass-lint:disable class-name-format
-
-    // White-space documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/white-space.
-    // Text-align documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-align.
-    // Text-transform documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform.
-
-    $text-align: ( left, right, center, justify ) !default;
-    $text-transform: ( lowercase, uppercase, capitalize ) !default;
-    $white-space: ( normal, nowrap, pre, pre-wrap, pre-line, break-spaces ) !default;
-
-    $kendo-font-sizes: (
-        xs: $font-size-xs,
-        sm: $font-size-sm,
-        md: $font-size-md,
-        lg: $font-size-lg,
-        xl: $font-size-xl
-    ) !default;
-
-    // Wrapping
-
-    /// @name k-text-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 text
-    .k-text-nowrap                  { white-space: nowrap; }
-    .\!k-text-nowrap                { white-space: nowrap !important; } // sass-lint:disable-line no-important
-    /// @name k-text-ellipsis
-    /// @description This is equivalent to `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`.
-    /// @group text
-    .k-text-ellipsis                { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // sass-lint:disable-line one-declaration-per-line
-
-    /// @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 text
-
-    /// @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 text
-
-    /// @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 text
-
-    /// @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 text
-
-    /// @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 text
-
-    /// @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 text
-
-    @each $wrap in $white-space {
-        .k-white-space-#{$wrap}    { white-space: $wrap; }
-        .\!k-white-space-#{$wrap}  { white-space: $wrap !important; } // sass-lint:disable-line no-important
-    }
-
-
-    // Align
-
-    /// @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
-
-    /// @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
-
-    /// @name k-text-center
-    /// @description This is equivalent to `text-align: center;`. The inline contents are centered within the line box.
-    /// @group text
-
-    /// @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
-
-    @each $align in $text-align {
-        .k-text-#{$align}           { text-align: $align; }
-        .\!k-text-#{$align}         { text-align: $align !important; } // sass-lint:disable-line no-important
-    }
-
-
-    // Transform
-
-    /// @name k-text-lowercase
-    /// @description This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
-    /// @group text
-
-    /// @name k-text-uppercase
-    /// @description This is equivalent to `text-transform: uppercase;`. Is a keyword that converts all characters to uppercase.
-    /// @group text
-
-    /// @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
-
-    @each $transform in $text-transform {
-        .k-text-#{$transform}       { text-transform: $transform; }
-        .\!k-text-#{$transform}     { text-transform: $transform !important; } // sass-lint:disable-line no-important
-    }
-
-    // Font Size
-    @each $name, $size in $kendo-font-sizes {
-        .k-fs-#{$name}              { font-size: $size; }
-        .\!k-fs-#{$name}            { font-size: $size !important; } // sass-lint:disable-line no-important
-    }
-
-    // Named font-weight
-
-    /// @name k-font-weight-light
-    /// @description This is equivalent to `font-weight: 300;`. The value of `300` may be different for each Kendo UI Theme.
-    /// @group text
-    .k-font-weight-light            { font-weight: $font-weight-light !important; } // sass-lint:disable-line no-important
-    /// @name k-font-weight-normal
-    /// @description This is equivalent to `font-weight: 400;`. The value of `400` may be different for each Kendo UI Theme.
-    /// @group text
-    .k-font-weight-normal           { font-weight: $font-weight-normal !important; } // sass-lint:disable-line no-important
-    /// @name k-font-weight-bold
-    /// @description This is equivalent to `font-weight: 700;`. The value of `700` may be different for each Kendo UI Theme.
-    /// @group text
-    .k-font-weight-bold             { font-weight: $font-weight-bold !important; } // sass-lint:disable-line no-important
-
-}

package/scss/utils/_theme-colors.scss

@@ -1,47 +0,0 @@
-@include exports( "common/decoration/color" ) {
-
-    // sass-lint:disable-block no-important
-    // sass-lint:disable-block class-name-format
-    // stylelint-disable block-opening-brace-space-before
-
-    .k-text-base,
-    .k-color-base {
-        color: $base-text;
-    }
-    .\!k-text-base,
-    .\!k-color-base {
-        color: $base-text !important;
-    }
-
-    .k-color-inherit { color: inherit; }
-    .\!k-color-inherit { color: inherit !important; }
-
-    @each $name, $color in $kendo-theme-colors {
-        .k-text-#{$name},
-        .k-color-#{$name} {
-            color: $color;
-        }
-        .\!k-text-#{$name},
-        .\!k-color-#{$name} {
-            color: $color !important;
-        }
-    }
-
-}
-
-
-@include exports( "common/decoration/background" ) {
-
-    // sass-lint:disable-block no-important
-    // sass-lint:disable-block class-name-format
-
-    @each $name, $bg-color in $kendo-theme-colors {
-        .k-bg-#{$name} {
-            background-color: $bg-color;
-        }
-        .\!k-bg-#{$name} {
-            background-color: $bg-color !important;
-        }
-    }
-
-}

package/scss/utils/_touch-action.scss

@@ -1,25 +0,0 @@
-@include exports( "utils/touch-action" ) {
-
-    // Touch-action documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action.
-
-    // @name k-touch-action-none
-    // @description This is equivalent to `touch-action: none;`. Disable browser handling of all panning and zooming gestures.
-    // @group touch-action
-
-    // @name k-touch-action-auto
-    // @description This is equivalent to `touch-action: auto;`. Enable browser handling of all panning and zooming gestures.
-    // @group touch-action
-
-    $utils-touch-action: (
-        none,
-        auto
-    ) !default;
-
-    @if $utils-touch-action {
-        @each $touch-action in $utils-touch-action {
-            // sass-lint:disable-block no-important
-            .k-touch-action-#{$touch-action} { touch-action: $touch-action !important; }
-        }
-    }
-
-}