@progress/kendo-theme-core 6.0.2 → 6.0.4-dev.0

package/dist/all.scss

@@ -2861,137 +2861,163 @@ $_imported: ();
 // #endregion
 // #region @import "./styles/index.import.scss"; -> packages/core/scss/styles/index.import.scss
 // #region @import "./_accessibility.scss"; -> packages/core/scss/styles/_accessibility.scss
-/// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
-/// @name .k-sr-only
-/// @group accessibility
-.k-sr-only {
-    position: absolute;
-    left: -1px;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
+@mixin kendo-core--styles--accessibility() {
+
+    /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
+    /// @name .k-sr-only
+    /// @group accessibility
+    .k-sr-only {
+        position: absolute;
+        left: -1px;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+    }
+
 }
 
 // #endregion
 // #region @import "./_asp-fallback.scss"; -> packages/core/scss/styles/_asp-fallback.scss
-.k-theme-test-class,
-.k-common-test-class {
-    opacity: 0;
+@mixin kendo-core--styles--asp-fallback() {
+
+    .k-theme-test-class,
+    .k-common-test-class {
+        opacity: 0;
+    }
+
 }
 
 // #endregion
 // #region @import "./_layout"; -> packages/core/scss/styles/_layout.scss
-// Basic layout
-.k-hstack {
-    display: flex;
-    flex-flow: row nowrap;
-}
-.k-vstack {
-    display: flex;
-    flex-flow: column nowrap;
-}
+@mixin kendo-core--styles--layout() {
 
-// Spacer
-.k-spacer {
-    flex: 1 1 auto;
-}
-.k-spacer-sized {
-    flex: none;
-}
+    // Basic layout
+    .k-hstack {
+        display: flex;
+        flex-flow: row nowrap;
+    }
+    .k-vstack {
+        display: flex;
+        flex-flow: column nowrap;
+    }
 
+    // Spacer
+    .k-spacer {
+        flex: 1 1 auto;
+    }
+    .k-spacer-sized {
+        flex: none;
+    }
 
-// Float wrap
-.k-float-wrap::after {
-    content: "";
-    display: block;
-    clear: both;
-}
 
+    // Float wrap
+    .k-float-wrap::after {
+        content: "";
+        display: block;
+        clear: both;
+    }
 
-// Stack layout
-.k-stack-layout {}
 
+    // Stack layout
+    .k-stack-layout {}
 
-// Flex layout
-.k-flex-layout {
-    display: flex;
-}
 
+    // Flex layout
+    .k-flex-layout {
+        display: flex;
+    }
 
-// Grid layout
-.k-grid-layout {
-    display: grid;
-}
 
+    // Grid layout
+    .k-grid-layout {
+        display: grid;
+    }
 
-// Separator
-.k-separator {
-    width: auto;
-    height: 0;
-    border-width: 1px 0 0;
-    border-style: solid;
-    border-color: inherit;
-    display: block;
-    flex-grow: 0 !important; // sass-lint:disable-line no-important
-    flex-shrink: 0 !important; // sass-lint:disable-line no-important
-    align-self: stretch;
-}
-.k-separator-horizontal,
-.k-vstack > .k-separator {
-    width: auto;
-    height: 0;
-    border-width: 1px 0 0;
-}
-.k-separator-vertical,
-.k-hstack > .k-separator {
-    width: 0;
-    height: auto;
-    border-width: 0 0 0 1px;
-}
 
-hr.k-separator {
-    margin: 0;
-    padding: 0;
-}
+    // Separator
+    .k-separator {
+        width: auto;
+        height: 0;
+        border-width: 1px 0 0;
+        border-style: solid;
+        border-color: inherit;
+        display: block;
+        flex-grow: 0 !important; // sass-lint:disable-line no-important
+        flex-shrink: 0 !important; // sass-lint:disable-line no-important
+        align-self: stretch;
+    }
+    .k-separator-horizontal,
+    .k-vstack > .k-separator {
+        width: auto;
+        height: 0;
+        border-width: 1px 0 0;
+    }
+    .k-separator-vertical,
+    .k-hstack > .k-separator {
+        width: 0;
+        height: auto;
+        border-width: 0 0 0 1px;
+    }
 
+    hr.k-separator {
+        margin: 0;
+        padding: 0;
+    }
 
-// Hidden
-.k-hidden {
-    display: none !important; // sass-lint:disable-line no-important
-}
 
+    // Hidden
+    .k-hidden {
+        display: none !important; // sass-lint:disable-line no-important
+    }
 
-// RTL
-.k-rtl {
-    direction: rtl;
-}
 
+    // RTL
+    .k-rtl {
+        direction: rtl;
+    }
 
-// Legacy aliases
-.k-hbox { @extend .k-hstack !optional; }
-.k-vbox { @extend .k-vstack !optional; }
-.k-floatwrap { @extend .k-float-wrap !optional; }
-.k-flex { @extend .k-spacer !optional; }
+
+    // Legacy aliases
+    .k-hbox { @extend .k-hstack !optional; }
+    .k-vbox { @extend .k-vstack !optional; }
+    .k-floatwrap { @extend .k-float-wrap !optional; }
+    .k-flex { @extend .k-spacer !optional; }
+
+}
 
 // #endregion
 // #region @import "./_normalize.scss"; -> packages/core/scss/styles/_normalize.scss
-// Hidden attribute
-[hidden] {
-    display: none !important; // sass-lint:disable-line no-important
-}
+@mixin kendo-core--styles--normalize() {
+
+    // Hidden attribute
+    [hidden] {
+        display: none !important; // sass-lint:disable-line no-important
+    }
+
 
+    // Hide script tags
+    // see https://github.com/telerik/kendo-themes/issues/2360
+    script {
+        display: none !important; // sass-lint:disable-line no-important
+    }
 
-// Hide script tags
-// see https://github.com/telerik/kendo-themes/issues/2360
-script {
-    display: none !important; // sass-lint:disable-line no-important
 }
 
 // #endregion
 
+
+@mixin kendo-core--styles() {
+    @include kendo-core--styles--accessibility();
+    @include kendo-core--styles--asp-fallback();
+    @include kendo-core--styles--layout();
+    @include kendo-core--styles--normalize();
+}
+
 // #endregion
 // #region @import "./_variables.scss"; -> packages/core/scss/_variables.scss
 // File already imported_once. Skipping output.
 // #endregion
 
 // #endregion
+
+@include kendo-core--styles();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "6.0.2",
+  "version": "6.0.4-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -39,5 +39,5 @@
     "prepublishOnly": "node ../../scripts/themes-prepublish.js",
     "postpublish": "echo 'no postpublish for core theme'"
   },
-  "gitHead": "ba4938b03e5055885c80f922a872f6d7031e5c61"
+  "gitHead": "15583e94f67633d6680efd66700436332e389175"
 }

package/scss/all.scss

@@ -1 +1,3 @@
 @import "./index.import.scss";
+
+@include kendo-core--styles();

package/scss/styles/_accessibility.scss

@@ -1,10 +1,14 @@
-/// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
-/// @name .k-sr-only
-/// @group accessibility
-.k-sr-only {
-    position: absolute;
-    left: -1px;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
+@mixin kendo-core--styles--accessibility() {
+
+    /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
+    /// @name .k-sr-only
+    /// @group accessibility
+    .k-sr-only {
+        position: absolute;
+        left: -1px;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+    }
+
 }

package/scss/styles/_asp-fallback.scss

@@ -1,4 +1,8 @@
-.k-theme-test-class,
-.k-common-test-class {
-    opacity: 0;
+@mixin kendo-core--styles--asp-fallback() {
+
+    .k-theme-test-class,
+    .k-common-test-class {
+        opacity: 0;
+    }
+
 }

package/scss/styles/_layout.scss

@@ -1,91 +1,95 @@
-// Basic layout
-.k-hstack {
-    display: flex;
-    flex-flow: row nowrap;
-}
-.k-vstack {
-    display: flex;
-    flex-flow: column nowrap;
-}
-
-// Spacer
-.k-spacer {
-    flex: 1 1 auto;
-}
-.k-spacer-sized {
-    flex: none;
-}
-
+@mixin kendo-core--styles--layout() {
+
+    // Basic layout
+    .k-hstack {
+        display: flex;
+        flex-flow: row nowrap;
+    }
+    .k-vstack {
+        display: flex;
+        flex-flow: column nowrap;
+    }
+
+    // Spacer
+    .k-spacer {
+        flex: 1 1 auto;
+    }
+    .k-spacer-sized {
+        flex: none;
+    }
+
+
+    // Float wrap
+    .k-float-wrap::after {
+        content: "";
+        display: block;
+        clear: both;
+    }
+
+
+    // Stack layout
+    .k-stack-layout {}
+
+
+    // Flex layout
+    .k-flex-layout {
+        display: flex;
+    }
+
+
+    // Grid layout
+    .k-grid-layout {
+        display: grid;
+    }
+
+
+    // Separator
+    .k-separator {
+        width: auto;
+        height: 0;
+        border-width: 1px 0 0;
+        border-style: solid;
+        border-color: inherit;
+        display: block;
+        flex-grow: 0 !important; // sass-lint:disable-line no-important
+        flex-shrink: 0 !important; // sass-lint:disable-line no-important
+        align-self: stretch;
+    }
+    .k-separator-horizontal,
+    .k-vstack > .k-separator {
+        width: auto;
+        height: 0;
+        border-width: 1px 0 0;
+    }
+    .k-separator-vertical,
+    .k-hstack > .k-separator {
+        width: 0;
+        height: auto;
+        border-width: 0 0 0 1px;
+    }
+
+    hr.k-separator {
+        margin: 0;
+        padding: 0;
+    }
+
+
+    // Hidden
+    .k-hidden {
+        display: none !important; // sass-lint:disable-line no-important
+    }
+
+
+    // RTL
+    .k-rtl {
+        direction: rtl;
+    }
+
+
+    // Legacy aliases
+    .k-hbox { @extend .k-hstack !optional; }
+    .k-vbox { @extend .k-vstack !optional; }
+    .k-floatwrap { @extend .k-float-wrap !optional; }
+    .k-flex { @extend .k-spacer !optional; }
 
-// Float wrap
-.k-float-wrap::after {
-    content: "";
-    display: block;
-    clear: both;
 }
-
-
-// Stack layout
-.k-stack-layout {}
-
-
-// Flex layout
-.k-flex-layout {
-    display: flex;
-}
-
-
-// Grid layout
-.k-grid-layout {
-    display: grid;
-}
-
-
-// Separator
-.k-separator {
-    width: auto;
-    height: 0;
-    border-width: 1px 0 0;
-    border-style: solid;
-    border-color: inherit;
-    display: block;
-    flex-grow: 0 !important; // sass-lint:disable-line no-important
-    flex-shrink: 0 !important; // sass-lint:disable-line no-important
-    align-self: stretch;
-}
-.k-separator-horizontal,
-.k-vstack > .k-separator {
-    width: auto;
-    height: 0;
-    border-width: 1px 0 0;
-}
-.k-separator-vertical,
-.k-hstack > .k-separator {
-    width: 0;
-    height: auto;
-    border-width: 0 0 0 1px;
-}
-
-hr.k-separator {
-    margin: 0;
-    padding: 0;
-}
-
-
-// Hidden
-.k-hidden {
-    display: none !important; // sass-lint:disable-line no-important
-}
-
-
-// RTL
-.k-rtl {
-    direction: rtl;
-}
-
-
-// Legacy aliases
-.k-hbox { @extend .k-hstack !optional; }
-.k-vbox { @extend .k-vstack !optional; }
-.k-floatwrap { @extend .k-float-wrap !optional; }
-.k-flex { @extend .k-spacer !optional; }

package/scss/styles/_normalize.scss

@@ -1,11 +1,15 @@
-// Hidden attribute
-[hidden] {
-    display: none !important; // sass-lint:disable-line no-important
-}
+@mixin kendo-core--styles--normalize() {
+
+    // Hidden attribute
+    [hidden] {
+        display: none !important; // sass-lint:disable-line no-important
+    }
+
 
+    // Hide script tags
+    // see https://github.com/telerik/kendo-themes/issues/2360
+    script {
+        display: none !important; // sass-lint:disable-line no-important
+    }
 
-// Hide script tags
-// see https://github.com/telerik/kendo-themes/issues/2360
-script {
-    display: none !important; // sass-lint:disable-line no-important
 }

package/scss/styles/index.import.scss

@@ -2,3 +2,11 @@
 @import "./_asp-fallback.scss";
 @import "./_layout";
 @import "./_normalize.scss";
+
+
+@mixin kendo-core--styles() {
+    @include kendo-core--styles--accessibility();
+    @include kendo-core--styles--asp-fallback();
+    @include kendo-core--styles--layout();
+    @include kendo-core--styles--normalize();
+}