From e4ab60ec11b1379269059e32e97494bc7b0c3667 Mon Sep 17 00:00:00 2001 From: joneff Date: Tue, 3 Jan 2023 18:53:44 +0200 Subject: [PATCH] feat: use utility class names from utils package BREAKING CHANGE: Use utility class names from utils package Previously, the utility classes were defined in the default theme and were consumed from the derived themes. While no class names were changed, we did try to move to a more consistent naming convention for the class names. For example, the class name for `display: flex` was changed from `k-display-flex` to `k-d-flex`, as it's shorter and unambiguous. Of course, the old class names are still supported and will be removed in the next major version. --- packages/bootstrap/scss/_variables.scss | 58 ++++- packages/bootstrap/scss/badge/_index.scss | 2 +- .../scss/bottom-navigation/_index.scss | 2 +- .../bootstrap/scss/breadcrumb/_variables.scss | 4 + packages/bootstrap/scss/button/_index.scss | 1 - .../bootstrap/scss/calendar/_variables.scss | 4 + packages/bootstrap/scss/captcha/_index.scss | 2 +- packages/bootstrap/scss/card/_index.scss | 4 +- packages/bootstrap/scss/checkbox/_index.scss | 2 - .../bootstrap/scss/checkbox/_variables.scss | 3 + packages/bootstrap/scss/chip/_index.scss | 1 - packages/bootstrap/scss/chip/_variables.scss | 3 + .../bootstrap/scss/colorgradient/_index.scss | 4 +- .../bootstrap/scss/colorpalette/_index.scss | 2 +- packages/bootstrap/scss/common/_index.scss | 2 - packages/bootstrap/scss/dataviz/_index.scss | 1 - .../bootstrap/scss/dataviz/_variables.scss | 4 + .../bootstrap/scss/dropdowngrid/_index.scss | 11 +- .../scss/dropdowngrid/_variables.scss | 1 + .../bootstrap/scss/dropzone/_variables.scss | 1 + .../scss/expansion-panel/_index.scss | 4 +- packages/bootstrap/scss/fab/_index.scss | 2 +- packages/bootstrap/scss/forms/_index.scss | 4 - packages/bootstrap/scss/forms/_variables.scss | 6 + packages/bootstrap/scss/grid/_index.scss | 4 +- packages/bootstrap/scss/listview/_index.scss | 4 +- .../bootstrap/scss/loader/_variables.scss | 1 + packages/bootstrap/scss/map/_index.scss | 2 +- .../bootstrap/scss/multiselect/_index.scss | 1 - packages/bootstrap/scss/orgchart/_index.scss | 2 +- packages/bootstrap/scss/pager/_index.scss | 1 - packages/bootstrap/scss/pager/_variables.scss | 3 + .../bootstrap/scss/panelbar/_variables.scss | 4 + .../bootstrap/scss/pdf-viewer/_index.scss | 3 +- .../bootstrap/scss/pdf-viewer/_variables.scss | 1 + packages/bootstrap/scss/pivotgrid/_index.scss | 9 +- .../bootstrap/scss/pivotgrid/_variables.scss | 3 + packages/bootstrap/scss/popup/_variables.scss | 1 + packages/bootstrap/scss/radio/_index.scss | 3 - packages/bootstrap/scss/radio/_variables.scss | 4 + packages/bootstrap/scss/switch/_index.scss | 2 +- packages/bootstrap/scss/table/_index.scss | 7 - packages/bootstrap/scss/table/_variables.scss | 3 + .../bootstrap/scss/tabstrip/_variables.scss | 4 + packages/bootstrap/scss/taskboard/_index.scss | 2 +- .../scss/timeselector/_variables.scss | 4 + packages/bootstrap/scss/treelist/_index.scss | 2 +- .../bootstrap/scss/treeview/_variables.scss | 3 + .../bootstrap/scss/typography/_index.scss | 1 - .../bootstrap/scss/typography/_variables.scss | 36 --- packages/bootstrap/scss/upload/_index.scss | 1 - .../bootstrap/scss/upload/_variables.scss | 1 + .../bootstrap/scss/utils/_aspect-ratio.scss | 1 - packages/bootstrap/scss/utils/_border.scss | 10 - packages/bootstrap/scss/utils/_display.scss | 1 - packages/bootstrap/scss/utils/_flex.scss | 1 - packages/bootstrap/scss/utils/_float.scss | 1 - packages/bootstrap/scss/utils/_grid.scss | 1 - packages/bootstrap/scss/utils/_index.scss | 22 -- packages/bootstrap/scss/utils/_order.scss | 1 - packages/bootstrap/scss/utils/_overflow.scss | 1 - .../bootstrap/scss/utils/_pointer-events.scss | 1 - packages/bootstrap/scss/utils/_position.scss | 1 - packages/bootstrap/scss/utils/_resize.scss | 1 - packages/bootstrap/scss/utils/_spacer.scss | 1 - packages/bootstrap/scss/utils/_spacing.scss | 1 - .../bootstrap/scss/utils/_table-layout.scss | 1 - packages/bootstrap/scss/utils/_text.scss | 1 - .../bootstrap/scss/utils/_theme-colors.scss | 1 - .../bootstrap/scss/utils/_touch-action.scss | 1 - packages/bootstrap/scss/utils/_transform.scss | 1 - .../bootstrap/scss/utils/_user-select.scss | 1 - .../bootstrap/scss/window/_variables.scss | 4 + packages/classic/scss/_variables.scss | 60 ++++- .../classic/scss/action-sheet/_variables.scss | 1 + packages/classic/scss/badge/_index.scss | 2 +- packages/classic/scss/badge/_variables.scss | 1 + .../scss/bottom-navigation/_index.scss | 2 +- .../classic/scss/breadcrumb/_variables.scss | 4 + packages/classic/scss/button/_index.scss | 2 +- .../classic/scss/calendar/_variables.scss | 4 + packages/classic/scss/captcha/_index.scss | 2 +- packages/classic/scss/card/_index.scss | 4 +- packages/classic/scss/checkbox/_index.scss | 2 - .../classic/scss/checkbox/_variables.scss | 3 + packages/classic/scss/chip/_index.scss | 1 - packages/classic/scss/chip/_variables.scss | 3 + .../classic/scss/colorgradient/_index.scss | 4 +- .../classic/scss/colorpalette/_index.scss | 2 +- packages/classic/scss/common/_index.scss | 2 - packages/classic/scss/dataviz/_index.scss | 1 - packages/classic/scss/dataviz/_variables.scss | 4 + .../classic/scss/dropdowngrid/_index.scss | 11 +- .../classic/scss/dropdowngrid/_variables.scss | 1 + .../classic/scss/dropzone/_variables.scss | 1 + .../classic/scss/expansion-panel/_index.scss | 4 +- packages/classic/scss/fab/_index.scss | 2 +- packages/classic/scss/forms/_index.scss | 4 - packages/classic/scss/forms/_variables.scss | 7 + packages/classic/scss/grid/_index.scss | 4 +- packages/classic/scss/listview/_index.scss | 4 +- packages/classic/scss/loader/_variables.scss | 1 + packages/classic/scss/map/_index.scss | 2 +- packages/classic/scss/menu/_variables.scss | 4 + packages/classic/scss/multiselect/_index.scss | 1 - packages/classic/scss/orgchart/_index.scss | 2 +- packages/classic/scss/pager/_index.scss | 2 - packages/classic/scss/pager/_variables.scss | 3 + packages/classic/scss/pdf-viewer/_index.scss | 3 +- .../classic/scss/pdf-viewer/_variables.scss | 1 + packages/classic/scss/pivotgrid/_index.scss | 9 +- .../classic/scss/pivotgrid/_variables.scss | 3 + packages/classic/scss/radio/_index.scss | 3 - packages/classic/scss/radio/_variables.scss | 4 + packages/classic/scss/rating/_variables.scss | 1 + packages/classic/scss/switch/_index.scss | 2 +- packages/classic/scss/table/_index.scss | 8 - packages/classic/scss/table/_variables.scss | 3 + packages/classic/scss/taskboard/_index.scss | 2 +- .../classic/scss/timeselector/_variables.scss | 4 + packages/classic/scss/treelist/_index.scss | 2 +- .../classic/scss/treeview/_variables.scss | 3 + packages/classic/scss/typography/_index.scss | 1 - .../classic/scss/typography/_variables.scss | 36 --- packages/classic/scss/upload/_index.scss | 1 - packages/classic/scss/upload/_variables.scss | 1 + .../classic/scss/utils/_aspect-ratio.scss | 1 - packages/classic/scss/utils/_border.scss | 10 - packages/classic/scss/utils/_display.scss | 1 - packages/classic/scss/utils/_flex.scss | 1 - packages/classic/scss/utils/_float.scss | 1 - packages/classic/scss/utils/_grid.scss | 1 - packages/classic/scss/utils/_index.scss | 22 -- packages/classic/scss/utils/_order.scss | 1 - packages/classic/scss/utils/_overflow.scss | 1 - .../classic/scss/utils/_pointer-events.scss | 1 - packages/classic/scss/utils/_position.scss | 1 - packages/classic/scss/utils/_resize.scss | 1 - packages/classic/scss/utils/_spacer.scss | 1 - packages/classic/scss/utils/_spacing.scss | 1 - .../classic/scss/utils/_table-layout.scss | 1 - packages/classic/scss/utils/_text.scss | 1 - .../classic/scss/utils/_theme-colors.scss | 1 - .../classic/scss/utils/_touch-action.scss | 1 - packages/classic/scss/utils/_transform.scss | 1 - packages/classic/scss/utils/_user-select.scss | 1 - packages/classic/scss/window/_variables.scss | 4 + packages/core/scss/styles/_layout.scss | 22 +- packages/default/scss/_variables.scss | 60 ++++- .../default/scss/action-sheet/_variables.scss | 1 + packages/default/scss/badge/_index.scss | 2 +- .../scss/bottom-navigation/_index.scss | 2 +- .../default/scss/breadcrumb/_variables.scss | 4 + packages/default/scss/button/_index.scss | 1 - .../default/scss/calendar/_variables.scss | 4 + packages/default/scss/captcha/_index.scss | 2 +- packages/default/scss/card/_index.scss | 4 +- packages/default/scss/checkbox/_index.scss | 2 - .../default/scss/checkbox/_variables.scss | 3 + packages/default/scss/chip/_index.scss | 1 - packages/default/scss/chip/_variables.scss | 3 + .../default/scss/colorgradient/_index.scss | 4 +- .../default/scss/colorpalette/_index.scss | 2 +- packages/default/scss/common/_index.scss | 2 - packages/default/scss/dataviz/_index.scss | 1 - packages/default/scss/dataviz/_theme.scss | 2 + packages/default/scss/dataviz/_variables.scss | 4 + .../default/scss/dropdowngrid/_index.scss | 11 +- .../default/scss/dropdowngrid/_variables.scss | 1 + .../default/scss/dropzone/_variables.scss | 1 + .../default/scss/expansion-panel/_index.scss | 4 +- packages/default/scss/fab/_index.scss | 2 +- packages/default/scss/forms/_index.scss | 4 - packages/default/scss/forms/_layout.scss | 4 + packages/default/scss/forms/_variables.scss | 7 + packages/default/scss/gantt/_index.scss | 2 +- packages/default/scss/gantt/_variables.scss | 4 + packages/default/scss/grid/_index.scss | 4 +- packages/default/scss/listview/_index.scss | 4 +- packages/default/scss/loader/_variables.scss | 1 + packages/default/scss/map/_index.scss | 2 +- packages/default/scss/menu/_variables.scss | 4 + packages/default/scss/multiselect/_index.scss | 1 - packages/default/scss/orgchart/_index.scss | 2 +- packages/default/scss/pager/_index.scss | 2 - packages/default/scss/pager/_variables.scss | 4 + .../default/scss/panelbar/_variables.scss | 4 + packages/default/scss/pdf-viewer/_index.scss | 3 +- .../default/scss/pdf-viewer/_variables.scss | 1 + packages/default/scss/pivotgrid/_index.scss | 10 +- .../default/scss/pivotgrid/_variables.scss | 3 + packages/default/scss/radio/_index.scss | 3 - packages/default/scss/radio/_variables.scss | 4 + packages/default/scss/rating/_variables.scss | 1 + packages/default/scss/switch/_index.scss | 2 +- packages/default/scss/table/_index.scss | 8 - packages/default/scss/table/_variables.scss | 3 + .../default/scss/tabstrip/_variables.scss | 4 + packages/default/scss/taskboard/_index.scss | 2 +- .../default/scss/timeselector/_theme.scss | 2 + .../default/scss/timeselector/_variables.scss | 4 + packages/default/scss/treelist/_index.scss | 2 +- .../default/scss/treeview/_variables.scss | 3 + packages/default/scss/typography/_index.scss | 1 - .../default/scss/typography/_variables.scss | 36 --- packages/default/scss/upload/_index.scss | 1 - packages/default/scss/upload/_variables.scss | 1 + .../default/scss/utils/_aspect-ratio.scss | 32 --- packages/default/scss/utils/_border.scss | 109 --------- packages/default/scss/utils/_display.scss | 41 ---- packages/default/scss/utils/_flex.scss | 189 ---------------- packages/default/scss/utils/_float.scss | 85 ------- packages/default/scss/utils/_grid.scss | 45 ---- packages/default/scss/utils/_index.scss | 22 -- packages/default/scss/utils/_order.scss | 54 ----- packages/default/scss/utils/_overflow.scss | 87 -------- .../default/scss/utils/_pointer-events.scss | 30 --- packages/default/scss/utils/_position.scss | 209 ------------------ packages/default/scss/utils/_resize.scss | 47 ---- packages/default/scss/utils/_spacer.scss | 16 -- packages/default/scss/utils/_spacing.scss | 162 -------------- .../default/scss/utils/_table-layout.scss | 17 -- packages/default/scss/utils/_text.scss | 154 ------------- .../default/scss/utils/_theme-colors.scss | 47 ---- .../default/scss/utils/_touch-action.scss | 30 --- packages/default/scss/utils/_transform.scss | 105 --------- packages/default/scss/utils/_user-select.scss | 51 ----- packages/default/scss/window/_variables.scss | 4 + packages/material/scss/_variables.scss | 60 ++++- .../scss/action-sheet/_variables.scss | 1 + packages/material/scss/badge/_index.scss | 2 +- .../scss/bottom-navigation/_index.scss | 2 +- packages/material/scss/button/_index.scss | 1 - .../material/scss/calendar/_variables.scss | 4 + packages/material/scss/captcha/_index.scss | 2 +- packages/material/scss/card/_index.scss | 4 +- packages/material/scss/checkbox/_index.scss | 2 - .../material/scss/checkbox/_variables.scss | 3 + packages/material/scss/chip/_index.scss | 1 - packages/material/scss/chip/_variables.scss | 3 + .../material/scss/colorgradient/_index.scss | 4 +- .../material/scss/colorpalette/_index.scss | 2 +- packages/material/scss/common/_index.scss | 2 - packages/material/scss/dataviz/_index.scss | 1 - .../material/scss/dataviz/_variables.scss | 4 + .../material/scss/dropdowngrid/_index.scss | 11 +- .../scss/dropdowngrid/_variables.scss | 1 + .../material/scss/dropzone/_variables.scss | 1 + .../material/scss/expansion-panel/_index.scss | 4 +- packages/material/scss/fab/_index.scss | 2 +- packages/material/scss/forms/_index.scss | 4 - packages/material/scss/forms/_layout.scss | 1 + packages/material/scss/forms/_variables.scss | 6 + packages/material/scss/grid/_index.scss | 4 +- packages/material/scss/listview/_index.scss | 4 +- packages/material/scss/loader/_variables.scss | 1 + packages/material/scss/map/_index.scss | 2 +- .../material/scss/multiselect/_index.scss | 1 - packages/material/scss/orgchart/_index.scss | 2 +- packages/material/scss/pager/_index.scss | 2 - packages/material/scss/pager/_variables.scss | 3 + .../material/scss/panelbar/_variables.scss | 4 + packages/material/scss/pdf-viewer/_index.scss | 4 +- .../material/scss/pdf-viewer/_variables.scss | 1 + packages/material/scss/pivotgrid/_index.scss | 9 +- .../material/scss/pivotgrid/_variables.scss | 4 + packages/material/scss/radio/_index.scss | 3 - packages/material/scss/radio/_variables.scss | 4 + packages/material/scss/rating/_variables.scss | 1 + packages/material/scss/switch/_index.scss | 2 +- packages/material/scss/table/_index.scss | 8 - packages/material/scss/table/_variables.scss | 3 + packages/material/scss/taskboard/_index.scss | 2 +- .../scss/timeselector/_variables.scss | 4 + .../material/scss/tooltip/_variables.scss | 1 + packages/material/scss/treelist/_index.scss | 2 +- packages/material/scss/typography/_index.scss | 1 - .../material/scss/typography/_variables.scss | 36 --- packages/material/scss/upload/_index.scss | 1 - packages/material/scss/upload/_variables.scss | 1 + .../material/scss/utils/_aspect-ratio.scss | 1 - packages/material/scss/utils/_border.scss | 10 - packages/material/scss/utils/_display.scss | 1 - packages/material/scss/utils/_flex.scss | 1 - packages/material/scss/utils/_float.scss | 1 - packages/material/scss/utils/_grid.scss | 1 - packages/material/scss/utils/_index.scss | 22 -- packages/material/scss/utils/_order.scss | 1 - packages/material/scss/utils/_overflow.scss | 1 - .../material/scss/utils/_pointer-events.scss | 1 - packages/material/scss/utils/_position.scss | 1 - packages/material/scss/utils/_resize.scss | 1 - packages/material/scss/utils/_spacer.scss | 1 - packages/material/scss/utils/_spacing.scss | 1 - .../material/scss/utils/_table-layout.scss | 1 - packages/material/scss/utils/_text.scss | 1 - .../material/scss/utils/_theme-colors.scss | 1 - .../material/scss/utils/_touch-action.scss | 1 - packages/material/scss/utils/_transform.scss | 1 - .../material/scss/utils/_user-select.scss | 1 - packages/material/scss/window/_variables.scss | 4 + .../nouvelle/scss/multiselect/_variables.scss | 2 +- packages/utils/scss/_variables.scss | 53 +++-- .../scss/background/_background-color.scss | 5 + .../utils/scss/background/index.import.scss | 1 + packages/utils/scss/border/_border-width.scss | 7 + .../utils/scss/flex-grid/_flex-direction.scss | 5 + .../flex-grid/_grid-column-start-end.scss | 5 + .../scss/flex-grid/_grid-row-start-end.scss | 5 + packages/utils/scss/index.import.scss | 2 +- .../scss/interactivity/_pointer-events.scss | 2 + .../utils/scss/interactivity/_resize.scss | 2 + packages/utils/scss/layout/_aspect-ratio.scss | 4 + packages/utils/scss/layout/_display.scss | 5 + packages/utils/scss/layout/_position.scss | 8 +- .../utils/scss/typography/_font-size.scss | 4 + .../utils/scss/typography/_font-weight.scss | 4 + .../utils/scss/typography/_text-align.scss | 2 + .../utils/scss/typography/_text-color.scss | 9 + .../scss/typography/_text-transform.scss | 2 +- .../utils/scss/typography/_white-space.scss | 7 + .../utils/scss/typography/index.import.scss | 8 +- 322 files changed, 737 insertions(+), 2113 deletions(-) create mode 100644 packages/bootstrap/scss/dropdowngrid/_variables.scss delete mode 100644 packages/bootstrap/scss/utils/_aspect-ratio.scss delete mode 100644 packages/bootstrap/scss/utils/_border.scss delete mode 100644 packages/bootstrap/scss/utils/_display.scss delete mode 100644 packages/bootstrap/scss/utils/_flex.scss delete mode 100644 packages/bootstrap/scss/utils/_float.scss delete mode 100644 packages/bootstrap/scss/utils/_grid.scss delete mode 100644 packages/bootstrap/scss/utils/_order.scss delete mode 100644 packages/bootstrap/scss/utils/_overflow.scss delete mode 100644 packages/bootstrap/scss/utils/_pointer-events.scss delete mode 100644 packages/bootstrap/scss/utils/_position.scss delete mode 100644 packages/bootstrap/scss/utils/_resize.scss delete mode 100644 packages/bootstrap/scss/utils/_spacer.scss delete mode 100644 packages/bootstrap/scss/utils/_spacing.scss delete mode 100644 packages/bootstrap/scss/utils/_table-layout.scss delete mode 100644 packages/bootstrap/scss/utils/_text.scss delete mode 100644 packages/bootstrap/scss/utils/_theme-colors.scss delete mode 100644 packages/bootstrap/scss/utils/_touch-action.scss delete mode 100644 packages/bootstrap/scss/utils/_transform.scss delete mode 100644 packages/bootstrap/scss/utils/_user-select.scss create mode 100644 packages/classic/scss/dropdowngrid/_variables.scss delete mode 100644 packages/classic/scss/utils/_aspect-ratio.scss delete mode 100644 packages/classic/scss/utils/_border.scss delete mode 100644 packages/classic/scss/utils/_display.scss delete mode 100644 packages/classic/scss/utils/_flex.scss delete mode 100644 packages/classic/scss/utils/_float.scss delete mode 100644 packages/classic/scss/utils/_grid.scss delete mode 100644 packages/classic/scss/utils/_order.scss delete mode 100644 packages/classic/scss/utils/_overflow.scss delete mode 100644 packages/classic/scss/utils/_pointer-events.scss delete mode 100644 packages/classic/scss/utils/_position.scss delete mode 100644 packages/classic/scss/utils/_resize.scss delete mode 100644 packages/classic/scss/utils/_spacer.scss delete mode 100644 packages/classic/scss/utils/_spacing.scss delete mode 100644 packages/classic/scss/utils/_table-layout.scss delete mode 100644 packages/classic/scss/utils/_text.scss delete mode 100644 packages/classic/scss/utils/_theme-colors.scss delete mode 100644 packages/classic/scss/utils/_touch-action.scss delete mode 100644 packages/classic/scss/utils/_transform.scss delete mode 100644 packages/classic/scss/utils/_user-select.scss create mode 100644 packages/default/scss/dropdowngrid/_variables.scss delete mode 100644 packages/default/scss/utils/_aspect-ratio.scss delete mode 100644 packages/default/scss/utils/_border.scss delete mode 100644 packages/default/scss/utils/_display.scss delete mode 100644 packages/default/scss/utils/_flex.scss delete mode 100644 packages/default/scss/utils/_float.scss delete mode 100644 packages/default/scss/utils/_grid.scss delete mode 100644 packages/default/scss/utils/_order.scss delete mode 100644 packages/default/scss/utils/_overflow.scss delete mode 100644 packages/default/scss/utils/_pointer-events.scss delete mode 100644 packages/default/scss/utils/_position.scss delete mode 100644 packages/default/scss/utils/_resize.scss delete mode 100644 packages/default/scss/utils/_spacer.scss delete mode 100644 packages/default/scss/utils/_spacing.scss delete mode 100644 packages/default/scss/utils/_table-layout.scss delete mode 100644 packages/default/scss/utils/_text.scss delete mode 100644 packages/default/scss/utils/_theme-colors.scss delete mode 100644 packages/default/scss/utils/_touch-action.scss delete mode 100644 packages/default/scss/utils/_transform.scss delete mode 100644 packages/default/scss/utils/_user-select.scss create mode 100644 packages/material/scss/dropdowngrid/_variables.scss delete mode 100644 packages/material/scss/utils/_aspect-ratio.scss delete mode 100644 packages/material/scss/utils/_border.scss delete mode 100644 packages/material/scss/utils/_display.scss delete mode 100644 packages/material/scss/utils/_flex.scss delete mode 100644 packages/material/scss/utils/_float.scss delete mode 100644 packages/material/scss/utils/_grid.scss delete mode 100644 packages/material/scss/utils/_order.scss delete mode 100644 packages/material/scss/utils/_overflow.scss delete mode 100644 packages/material/scss/utils/_pointer-events.scss delete mode 100644 packages/material/scss/utils/_position.scss delete mode 100644 packages/material/scss/utils/_resize.scss delete mode 100644 packages/material/scss/utils/_spacer.scss delete mode 100644 packages/material/scss/utils/_spacing.scss delete mode 100644 packages/material/scss/utils/_table-layout.scss delete mode 100644 packages/material/scss/utils/_text.scss delete mode 100644 packages/material/scss/utils/_theme-colors.scss delete mode 100644 packages/material/scss/utils/_touch-action.scss delete mode 100644 packages/material/scss/utils/_transform.scss delete mode 100644 packages/material/scss/utils/_user-select.scss create mode 100644 packages/utils/scss/background/_background-color.scss create mode 100644 packages/utils/scss/background/index.import.scss create mode 100644 packages/utils/scss/typography/_text-color.scss diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss index eb5fe9d01f3..5e289021ba8 100644 --- a/packages/bootstrap/scss/_variables.scss +++ b/packages/bootstrap/scss/_variables.scss @@ -85,6 +85,15 @@ $kendo-border-radius-sm: k-math-div( $kendo-border-radius, 2 ) !default; $kendo-border-radius-md: $kendo-border-radius !default; $kendo-border-radius-lg: $kendo-border-radius * 1.5 !default; +$kendo-border-radii: ( + DEFAULT: $kendo-border-radius-md, + 0: 0, + sm: $kendo-border-radius-sm, + md: $kendo-border-radius-md, + lg: $kendo-border-radius-lg, + full: 9999px +) !default; + $kendo-zindex-popup: 1 !default; $kendo-zindex-window: 2 !default; @@ -192,6 +201,51 @@ $kendo-theme-colors: ( ) !default; +// Typography + +/// Base font size across all components. +/// @group typography +$font-size: $font-size-base !default; +$font-size-xs: ( $font-size * .75 ) !default; +$font-size-sm: $font-size-sm !default; +$font-size-md: $font-size !default; +$font-size-lg: $font-size-lg !default; +$font-size-xl: ( $font-size-md * 1.5 ) !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; + +/// Font family across all components. +/// @group typography +$font-family: $font-family-sans-serif !default; + +/// Font family for monospaced text. Used for styling the code. +/// @group typography +$font-family-monospace: $font-family-monospace !default; + +/// Line height used along with $font-size. +/// @group typography +$line-height: $line-height-base !default; +$line-height-xs: 1 !default; +$line-height-sm: $line-height-sm !default; +$line-height-md: $line-height !default; +$line-height-lg: $line-height-lg !default; +$line-height-em: calc( #{$line-height} * 1em ) !default; + +// Font weight +$font-weight-light: $font-weight-light !default; +$font-weight-normal: $font-weight-normal !default; +$font-weight-bold: $font-weight-bold !default; + +// Letter Spacing +$letter-spacing: null !default; + + // Root styles $kendo-body-bg: $kendo-color-white !default; $kendo-body-text: k-contrast-color( $kendo-body-bg, $gray-900, $gray-100 ) !default; @@ -270,13 +324,9 @@ $kendo-disabled-styling: ( ) !default; - // Generic styles // TODO: refactor once we extract drag drop as separate module -$font-size: $font-size-base !default; -$font-family: $font-family-sans-serif !default; -$line-height: $line-height-base !default; // Header diff --git a/packages/bootstrap/scss/badge/_index.scss b/packages/bootstrap/scss/badge/_index.scss index ac781c66f0a..29c5d58e467 100644 --- a/packages/bootstrap/scss/badge/_index.scss +++ b/packages/bootstrap/scss/badge/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../icons/_index.scss"; diff --git a/packages/bootstrap/scss/bottom-navigation/_index.scss b/packages/bootstrap/scss/bottom-navigation/_index.scss index 92ed3fd17ea..e37b9c27815 100644 --- a/packages/bootstrap/scss/bottom-navigation/_index.scss +++ b/packages/bootstrap/scss/bottom-navigation/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../icons/_index.scss"; diff --git a/packages/bootstrap/scss/breadcrumb/_variables.scss b/packages/bootstrap/scss/breadcrumb/_variables.scss index 931472c8667..e448a291be6 100644 --- a/packages/bootstrap/scss/breadcrumb/_variables.scss +++ b/packages/bootstrap/scss/breadcrumb/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Breadcrumb + $breadcrumb-margin-x: null !default; $breadcrumb-margin-y: null !default; $breadcrumb-padding-x: null !default; diff --git a/packages/bootstrap/scss/button/_index.scss b/packages/bootstrap/scss/button/_index.scss index f8bd4bc8969..b6ef32746ce 100644 --- a/packages/bootstrap/scss/button/_index.scss +++ b/packages/bootstrap/scss/button/_index.scss @@ -4,7 +4,6 @@ // Dependencies @import "../badge/_index.scss"; @import "../icons/_index.scss"; -@import "../typography/_variables.scss"; // Component diff --git a/packages/bootstrap/scss/calendar/_variables.scss b/packages/bootstrap/scss/calendar/_variables.scss index 091083f7755..6263eec9571 100644 --- a/packages/bootstrap/scss/calendar/_variables.scss +++ b/packages/bootstrap/scss/calendar/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Calendar + $calendar-border-width: 1px !default; $calendar-font-family: $font-family !default; $calendar-font-size: $font-size !default; diff --git a/packages/bootstrap/scss/captcha/_index.scss b/packages/bootstrap/scss/captcha/_index.scss index 058a4d2f13b..ec50e27eb5e 100644 --- a/packages/bootstrap/scss/captcha/_index.scss +++ b/packages/bootstrap/scss/captcha/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_index.scss"; +// @import "../utils/_index.scss"; @import "../common/_index.scss"; @import "../icons/_index.scss"; @import "../input/_index.scss"; diff --git a/packages/bootstrap/scss/card/_index.scss b/packages/bootstrap/scss/card/_index.scss index 88dc019c391..2f95d3ab5d6 100644 --- a/packages/bootstrap/scss/card/_index.scss +++ b/packages/bootstrap/scss/card/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_grid.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_grid.scss"; @import "../action-buttons/_index.scss"; @import "../icons/_index.scss"; @import "../typography/_index.scss"; diff --git a/packages/bootstrap/scss/checkbox/_index.scss b/packages/bootstrap/scss/checkbox/_index.scss index 8cb597fb591..43dc7943c9f 100644 --- a/packages/bootstrap/scss/checkbox/_index.scss +++ b/packages/bootstrap/scss/checkbox/_index.scss @@ -2,8 +2,6 @@ // Dependencies -@import "../typography/_variables.scss"; -@import "../list/_variables.scss"; // Component diff --git a/packages/bootstrap/scss/checkbox/_variables.scss b/packages/bootstrap/scss/checkbox/_variables.scss index 1fdd0b684dc..fc60057d591 100644 --- a/packages/bootstrap/scss/checkbox/_variables.scss +++ b/packages/bootstrap/scss/checkbox/_variables.scss @@ -1,3 +1,6 @@ +@import "../list/_variables.scss"; + + // Checkbox /// Border width of checkbox. diff --git a/packages/bootstrap/scss/chip/_index.scss b/packages/bootstrap/scss/chip/_index.scss index 7f40fe77778..832c0dab47c 100644 --- a/packages/bootstrap/scss/chip/_index.scss +++ b/packages/bootstrap/scss/chip/_index.scss @@ -3,7 +3,6 @@ // Dependencies @import "../icons/_index.scss"; -@import "../button/_variables.scss"; // Component diff --git a/packages/bootstrap/scss/chip/_variables.scss b/packages/bootstrap/scss/chip/_variables.scss index b82838061f8..708a3c85727 100644 --- a/packages/bootstrap/scss/chip/_variables.scss +++ b/packages/bootstrap/scss/chip/_variables.scss @@ -1,3 +1,6 @@ +@import "../button/_variables.scss"; + + // Chip /// Width of the border around the button. diff --git a/packages/bootstrap/scss/colorgradient/_index.scss b/packages/bootstrap/scss/colorgradient/_index.scss index 64d1c6087ae..4f8ee59cb8d 100644 --- a/packages/bootstrap/scss/colorgradient/_index.scss +++ b/packages/bootstrap/scss/colorgradient/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_spacer.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_spacer.scss"; @import "../icons/_index.scss"; @import "../button/_index.scss"; @import "../slider/_index.scss"; diff --git a/packages/bootstrap/scss/colorpalette/_index.scss b/packages/bootstrap/scss/colorpalette/_index.scss index ae34f9fea74..33e62335fcb 100644 --- a/packages/bootstrap/scss/colorpalette/_index.scss +++ b/packages/bootstrap/scss/colorpalette/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; +// @import "../utils/_flex.scss"; // Component @import "./_variables.scss"; diff --git a/packages/bootstrap/scss/common/_index.scss b/packages/bootstrap/scss/common/_index.scss index e04c27c6f89..731ca7c8261 100644 --- a/packages/bootstrap/scss/common/_index.scss +++ b/packages/bootstrap/scss/common/_index.scss @@ -1,5 +1,3 @@ -@import "../typography/_variables.scss"; - @import "./_base.scss"; @import "./_animations.scss"; @import "./_resizing.scss"; diff --git a/packages/bootstrap/scss/dataviz/_index.scss b/packages/bootstrap/scss/dataviz/_index.scss index c8a5ae4fbcc..1a6e25bf4ed 100644 --- a/packages/bootstrap/scss/dataviz/_index.scss +++ b/packages/bootstrap/scss/dataviz/_index.scss @@ -5,7 +5,6 @@ @import "../common/_index.scss"; @import "../popup/_index.scss"; @import "../tooltip/_index.scss"; -@import "../button/_variables.scss"; // Component diff --git a/packages/bootstrap/scss/dataviz/_variables.scss b/packages/bootstrap/scss/dataviz/_variables.scss index d0166f2bfb3..6ea72737f7f 100644 --- a/packages/bootstrap/scss/dataviz/_variables.scss +++ b/packages/bootstrap/scss/dataviz/_variables.scss @@ -1,4 +1,8 @@ +@import "../button/_variables.scss"; + + // Chart + /// The first base series color and its light and dark shades. /// @group charts $series-a: $blue !default; diff --git a/packages/bootstrap/scss/dropdowngrid/_index.scss b/packages/bootstrap/scss/dropdowngrid/_index.scss index e459b0d1cf7..4e0d03ff53f 100644 --- a/packages/bootstrap/scss/dropdowngrid/_index.scss +++ b/packages/bootstrap/scss/dropdowngrid/_index.scss @@ -3,17 +3,14 @@ // Dependencies @import "../common/_index.scss"; -@import "../table/_index.scss"; -@import "../input/_index.scss"; @import "../floating-label/_index.scss"; -@import "../combobox/_index.scss"; +@import "../icons/_index.scss"; +@import "../input/_index.scss"; @import "../popup/_index.scss"; -@import "../toolbar/_variables.scss"; -@import "../menu/_variables.scss"; -@import "../chip/_variables.scss"; -@import "../grid/_variables.scss"; +@import "../table/_index.scss"; // Component +@import "./_variables.scss"; @import "./_layout.scss"; @import "./_theme.scss"; diff --git a/packages/bootstrap/scss/dropdowngrid/_variables.scss b/packages/bootstrap/scss/dropdowngrid/_variables.scss new file mode 100644 index 00000000000..801f9dc9831 --- /dev/null +++ b/packages/bootstrap/scss/dropdowngrid/_variables.scss @@ -0,0 +1 @@ +// Dropdown grid diff --git a/packages/bootstrap/scss/dropzone/_variables.scss b/packages/bootstrap/scss/dropzone/_variables.scss index ed6cdcec062..b78cc06f5ac 100644 --- a/packages/bootstrap/scss/dropzone/_variables.scss +++ b/packages/bootstrap/scss/dropzone/_variables.scss @@ -1,4 +1,5 @@ // Dropzone + $dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default; $dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default; $dropzone-border-width: 1px !default; diff --git a/packages/bootstrap/scss/expansion-panel/_index.scss b/packages/bootstrap/scss/expansion-panel/_index.scss index c2e2f6da7c1..91ad9f3e79a 100644 --- a/packages/bootstrap/scss/expansion-panel/_index.scss +++ b/packages/bootstrap/scss/expansion-panel/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_display.scss"; -@import "../utils/_spacer.scss"; +// @import "../utils/_display.scss"; +// @import "../utils/_spacer.scss"; @import "../icons/_index.scss"; @import "../list/_index.scss"; diff --git a/packages/bootstrap/scss/fab/_index.scss b/packages/bootstrap/scss/fab/_index.scss index 73ff9ff6f3e..428a2aa05c8 100644 --- a/packages/bootstrap/scss/fab/_index.scss +++ b/packages/bootstrap/scss/fab/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../icons/_index.scss"; @import "../button/_index.scss"; @import "../badge/_index.scss"; diff --git a/packages/bootstrap/scss/forms/_index.scss b/packages/bootstrap/scss/forms/_index.scss index 00de1b10a12..ae13a53bed8 100644 --- a/packages/bootstrap/scss/forms/_index.scss +++ b/packages/bootstrap/scss/forms/_index.scss @@ -3,12 +3,8 @@ // Dependencies // TODO: extract variables @import "../common/_index.scss"; -@import "../tooltip/_variables.scss"; -@import "../button/_variables.scss"; -@import "../input/_variables.scss"; @import "../toolbar/_index.scss"; @import "../action-buttons/_index.scss"; -@import "../window/_variables.scss"; // Component diff --git a/packages/bootstrap/scss/forms/_variables.scss b/packages/bootstrap/scss/forms/_variables.scss index d6b526df750..f0337d2f206 100644 --- a/packages/bootstrap/scss/forms/_variables.scss +++ b/packages/bootstrap/scss/forms/_variables.scss @@ -1,3 +1,9 @@ +@import "../input/_variables.scss"; +@import "../tooltip/_variables.scss"; +@import "../typography/_variables.scss"; +@import "../window/_variables.scss"; + + // Forms $kendo-form-spacer: $kendo-padding-md-x * 2 !default; diff --git a/packages/bootstrap/scss/grid/_index.scss b/packages/bootstrap/scss/grid/_index.scss index cfc4689b0f2..ea2cd27a62b 100644 --- a/packages/bootstrap/scss/grid/_index.scss +++ b/packages/bootstrap/scss/grid/_index.scss @@ -22,8 +22,8 @@ @import "../pager/_index.scss"; @import "../chip/_index.scss"; @import "../skeleton/_index.scss"; -@import "../utils/_float.scss"; -@import "../utils/_spacer.scss"; +// @import "../utils/_float.scss"; +// @import "../utils/_spacer.scss"; @import "../list/_index.scss"; @import "../table/_index.scss"; diff --git a/packages/bootstrap/scss/listview/_index.scss b/packages/bootstrap/scss/listview/_index.scss index 5a72cedb6d5..228b79abea1 100644 --- a/packages/bootstrap/scss/listview/_index.scss +++ b/packages/bootstrap/scss/listview/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_grid.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_grid.scss"; @import "../pager/_index.scss"; @import "../icons/_index.scss"; diff --git a/packages/bootstrap/scss/loader/_variables.scss b/packages/bootstrap/scss/loader/_variables.scss index 4640d923763..5a70caeb46c 100644 --- a/packages/bootstrap/scss/loader/_variables.scss +++ b/packages/bootstrap/scss/loader/_variables.scss @@ -1,4 +1,5 @@ // Loader + $kendo-loader-segment-border-radius: 50% !default; $kendo-loader-segment-size-sm: k-map-get( $kendo-spacing, 1 ) !default; $kendo-loader-segment-size-md: k-map-get( $kendo-spacing, 2 ) !default; diff --git a/packages/bootstrap/scss/map/_index.scss b/packages/bootstrap/scss/map/_index.scss index 10bcb60b424..ff33afef70e 100644 --- a/packages/bootstrap/scss/map/_index.scss +++ b/packages/bootstrap/scss/map/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../button/_index.scss"; @import "../scroller/_index.scss"; @import "../icons/_index.scss"; diff --git a/packages/bootstrap/scss/multiselect/_index.scss b/packages/bootstrap/scss/multiselect/_index.scss index 58a4cabf3af..7e7acf74fb0 100644 --- a/packages/bootstrap/scss/multiselect/_index.scss +++ b/packages/bootstrap/scss/multiselect/_index.scss @@ -3,7 +3,6 @@ // Dependencies @import "../common/_index.scss"; -@import "../forms/_variables.scss"; @import "../button/_index.scss"; @import "../input/_index.scss"; @import "../chip/_index.scss"; diff --git a/packages/bootstrap/scss/orgchart/_index.scss b/packages/bootstrap/scss/orgchart/_index.scss index d9668fafdc2..62a230602c8 100644 --- a/packages/bootstrap/scss/orgchart/_index.scss +++ b/packages/bootstrap/scss/orgchart/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_index.scss"; +// @import "../utils/_index.scss"; @import "../common/_index.scss"; @import "../icons/_index.scss"; @import "../forms/_index.scss"; diff --git a/packages/bootstrap/scss/pager/_index.scss b/packages/bootstrap/scss/pager/_index.scss index 77fa9ddf949..c97e961f80e 100644 --- a/packages/bootstrap/scss/pager/_index.scss +++ b/packages/bootstrap/scss/pager/_index.scss @@ -5,7 +5,6 @@ @import "../common/_index.scss"; @import "../dropdownlist/_index.scss"; @import "../icons/_index.scss"; -@import "../toolbar/_variables.scss"; @import "../list/_index.scss"; @import "../button/_index.scss"; diff --git a/packages/bootstrap/scss/pager/_variables.scss b/packages/bootstrap/scss/pager/_variables.scss index eae26840283..e72dfa37a63 100644 --- a/packages/bootstrap/scss/pager/_variables.scss +++ b/packages/bootstrap/scss/pager/_variables.scss @@ -1,3 +1,6 @@ +@import "../typography/_variables.scss"; + + // Pager /// Horizontal padding of the pager according to the pager size. diff --git a/packages/bootstrap/scss/panelbar/_variables.scss b/packages/bootstrap/scss/panelbar/_variables.scss index ddf5f93c425..f5e0228bf89 100644 --- a/packages/bootstrap/scss/panelbar/_variables.scss +++ b/packages/bootstrap/scss/panelbar/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Panelbar + $panelbar-padding-x: 0px !default; $panelbar-padding-y: 0px !default; $panelbar-font-family: $font-family !default; diff --git a/packages/bootstrap/scss/pdf-viewer/_index.scss b/packages/bootstrap/scss/pdf-viewer/_index.scss index 9ac4d66bba5..079c371f879 100644 --- a/packages/bootstrap/scss/pdf-viewer/_index.scss +++ b/packages/bootstrap/scss/pdf-viewer/_index.scss @@ -3,8 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_index.scss"; -@import "../button/_variables.scss"; +// @import "../utils/_index.scss"; @import "../combobox/_index.scss"; @import "../toolbar/_index.scss"; @import "../dialog/_index.scss"; diff --git a/packages/bootstrap/scss/pdf-viewer/_variables.scss b/packages/bootstrap/scss/pdf-viewer/_variables.scss index bf74a2fd9e1..e696bce0d14 100644 --- a/packages/bootstrap/scss/pdf-viewer/_variables.scss +++ b/packages/bootstrap/scss/pdf-viewer/_variables.scss @@ -1,4 +1,5 @@ // PDF viewer + $pdf-viewer-border-width: 1px !default; $pdf-viewer-font-family: $font-family !default; $pdf-viewer-font-size: $font-size !default; diff --git a/packages/bootstrap/scss/pivotgrid/_index.scss b/packages/bootstrap/scss/pivotgrid/_index.scss index d1204b679d5..40ecdaaf1b7 100644 --- a/packages/bootstrap/scss/pivotgrid/_index.scss +++ b/packages/bootstrap/scss/pivotgrid/_index.scss @@ -7,12 +7,11 @@ @import "../treeview/_index.scss"; @import "../grid/_index.scss"; @import "../icons/_index.scss"; -@import "../utils/_spacer.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_grid.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_spacer.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_grid.scss"; +// @import "../utils/_position.scss"; @import "../list/_index.scss"; -@import "../table/_variables.scss"; // Component diff --git a/packages/bootstrap/scss/pivotgrid/_variables.scss b/packages/bootstrap/scss/pivotgrid/_variables.scss index 61e5067e582..8c3ead522cd 100644 --- a/packages/bootstrap/scss/pivotgrid/_variables.scss +++ b/packages/bootstrap/scss/pivotgrid/_variables.scss @@ -1,3 +1,6 @@ +@import "../table/_variables.scss"; + + // Pivot grid $pivotgrid-spacer: k-map-get( $kendo-spacing, 4 ) !default; $pivotgrid-padding-x: null !default; diff --git a/packages/bootstrap/scss/popup/_variables.scss b/packages/bootstrap/scss/popup/_variables.scss index 099b98531cb..44577d3609c 100644 --- a/packages/bootstrap/scss/popup/_variables.scss +++ b/packages/bootstrap/scss/popup/_variables.scss @@ -1,4 +1,5 @@ // Popup + $popup-padding-x: null !default; $popup-padding-y: null !default; $popup-border-width: 1px !default; diff --git a/packages/bootstrap/scss/radio/_index.scss b/packages/bootstrap/scss/radio/_index.scss index cd8b651613f..43dc7943c9f 100644 --- a/packages/bootstrap/scss/radio/_index.scss +++ b/packages/bootstrap/scss/radio/_index.scss @@ -2,9 +2,6 @@ // Dependencies -@import "../typography/_variables.scss"; -@import "../list/_variables.scss"; -@import "../checkbox/_variables.scss"; // Component diff --git a/packages/bootstrap/scss/radio/_variables.scss b/packages/bootstrap/scss/radio/_variables.scss index 6909eb4039f..f16a3c0627f 100644 --- a/packages/bootstrap/scss/radio/_variables.scss +++ b/packages/bootstrap/scss/radio/_variables.scss @@ -1,3 +1,7 @@ +@import "../list/_variables.scss"; +@import "../checkbox/_variables.scss"; + + // Radio button /// Border radius of radio button. diff --git a/packages/bootstrap/scss/switch/_index.scss b/packages/bootstrap/scss/switch/_index.scss index 5f1651c1b41..3b6b57176dc 100644 --- a/packages/bootstrap/scss/switch/_index.scss +++ b/packages/bootstrap/scss/switch/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_border.scss"; +// @import "../utils/_border.scss"; // Component diff --git a/packages/bootstrap/scss/table/_index.scss b/packages/bootstrap/scss/table/_index.scss index 2ff228014e6..f509a25f02d 100644 --- a/packages/bootstrap/scss/table/_index.scss +++ b/packages/bootstrap/scss/table/_index.scss @@ -3,16 +3,9 @@ // Dependencies @import "../common/_index.scss"; -@import "../input/_index.scss"; -@import "../floating-label/_index.scss"; -@import "../combobox/_index.scss"; -@import "../popup/_index.scss"; -@import "../toolbar/_variables.scss"; -@import "../menu/_variables.scss"; // Component @import "./_variables.scss"; @import "./_layout.scss"; @import "./_theme.scss"; - diff --git a/packages/bootstrap/scss/table/_variables.scss b/packages/bootstrap/scss/table/_variables.scss index 1f8449c9261..706292ff734 100644 --- a/packages/bootstrap/scss/table/_variables.scss +++ b/packages/bootstrap/scss/table/_variables.scss @@ -1,3 +1,6 @@ +@import "../list/_variables.scss"; + + // Table /// The width of the table border. diff --git a/packages/bootstrap/scss/tabstrip/_variables.scss b/packages/bootstrap/scss/tabstrip/_variables.scss index 7a2adaab0fc..03faca16c99 100644 --- a/packages/bootstrap/scss/tabstrip/_variables.scss +++ b/packages/bootstrap/scss/tabstrip/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Tabstrip + $tabstrip-wrapper-padding-x: 0px !default; $tabstrip-wrapper-padding-y: 0px !default; $tabstrip-wrapper-border-width: 0px !default; diff --git a/packages/bootstrap/scss/taskboard/_index.scss b/packages/bootstrap/scss/taskboard/_index.scss index bd0a0bb6566..16440d15a5e 100644 --- a/packages/bootstrap/scss/taskboard/_index.scss +++ b/packages/bootstrap/scss/taskboard/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_index.scss"; +// @import "../utils/_index.scss"; @import "../common/_index.scss"; @import "../icons/_index.scss"; @import "../forms/_index.scss"; diff --git a/packages/bootstrap/scss/timeselector/_variables.scss b/packages/bootstrap/scss/timeselector/_variables.scss index b345f1ac751..794765faa10 100644 --- a/packages/bootstrap/scss/timeselector/_variables.scss +++ b/packages/bootstrap/scss/timeselector/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Time selector + $time-selector-border-width: 1px !default; $time-selector-font-family: $font-family !default; $time-selector-font-size: $font-size !default; diff --git a/packages/bootstrap/scss/treelist/_index.scss b/packages/bootstrap/scss/treelist/_index.scss index 1fc93f158bc..f5a0ef3aa76 100644 --- a/packages/bootstrap/scss/treelist/_index.scss +++ b/packages/bootstrap/scss/treelist/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_text.scss"; +// @import "../utils/_text.scss"; @import "../grid/_index.scss"; @import "../icons/_index.scss"; diff --git a/packages/bootstrap/scss/treeview/_variables.scss b/packages/bootstrap/scss/treeview/_variables.scss index a0030541f68..f7d2153e3d7 100644 --- a/packages/bootstrap/scss/treeview/_variables.scss +++ b/packages/bootstrap/scss/treeview/_variables.scss @@ -1,3 +1,6 @@ +@import "../typography/_variables.scss"; + + // Treeview /// Font family of the treeview component. diff --git a/packages/bootstrap/scss/typography/_index.scss b/packages/bootstrap/scss/typography/_index.scss index f509a25f02d..43dc7943c9f 100644 --- a/packages/bootstrap/scss/typography/_index.scss +++ b/packages/bootstrap/scss/typography/_index.scss @@ -2,7 +2,6 @@ // Dependencies -@import "../common/_index.scss"; // Component diff --git a/packages/bootstrap/scss/typography/_variables.scss b/packages/bootstrap/scss/typography/_variables.scss index f11e729a1f6..c38f998435e 100644 --- a/packages/bootstrap/scss/typography/_variables.scss +++ b/packages/bootstrap/scss/typography/_variables.scss @@ -4,42 +4,6 @@ /// @group typography $enable-typography: false !default; -/// Base font size across all components. -/// @group typography -$font-size: $font-size-base !default; -$font-size-xs: ( $font-size * .75 ) !default; -$font-size-sm: $font-size-sm !default; -$font-size-md: $font-size !default; -$font-size-lg: $font-size-lg !default; -$font-size-xl: ( $font-size-md * 1.5 ) !default; - -/// Font family across all components. -/// @group typography -$font-family: $font-family-sans-serif !default; - -/// Font family for monospaced text. Used for styling the code. -/// @group typography -$font-family-monospace: $font-family-monospace !default; - -/// Line height used along with $font-size. -/// @group typography -$line-height: $line-height-base !default; -$line-height-xs: 1 !default; -$line-height-sm: $line-height-sm !default; -$line-height-md: $line-height !default; -$line-height-lg: $line-height-lg !default; -$line-height-em: calc( #{$line-height} * 1em ) !default; - - -// Font weight -$font-weight-light: $font-weight-light !default; -$font-weight-normal: $font-weight-normal !default; -$font-weight-bold: $font-weight-bold !default; - - -// Letter Spacing -$letter-spacing: null !default; - // Headings $h1-font-size: $h1-font-size !default; diff --git a/packages/bootstrap/scss/upload/_index.scss b/packages/bootstrap/scss/upload/_index.scss index c94cc6d4629..cb227e333e5 100644 --- a/packages/bootstrap/scss/upload/_index.scss +++ b/packages/bootstrap/scss/upload/_index.scss @@ -7,7 +7,6 @@ @import "../action-buttons/_index.scss"; @import "../icons/_index.scss"; @import "../dropzone/_index.scss"; -@import "../toolbar/_variables.scss"; // Component diff --git a/packages/bootstrap/scss/upload/_variables.scss b/packages/bootstrap/scss/upload/_variables.scss index 26830c13952..6a715113f03 100644 --- a/packages/bootstrap/scss/upload/_variables.scss +++ b/packages/bootstrap/scss/upload/_variables.scss @@ -1,4 +1,5 @@ // Upload + $kendo-upload-border-width: 1px !default; $kendo-upload-font-family: $font-family !default; $kendo-upload-font-size: $font-size !default; diff --git a/packages/bootstrap/scss/utils/_aspect-ratio.scss b/packages/bootstrap/scss/utils/_aspect-ratio.scss deleted file mode 100644 index 0d26161b2d1..00000000000 --- a/packages/bootstrap/scss/utils/_aspect-ratio.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_aspect-ratio.scss"; diff --git a/packages/bootstrap/scss/utils/_border.scss b/packages/bootstrap/scss/utils/_border.scss deleted file mode 100644 index 96c150753d7..00000000000 --- a/packages/bootstrap/scss/utils/_border.scss +++ /dev/null @@ -1,10 +0,0 @@ -$utils-border-radius: ( - default: $kendo-border-radius-md, - 0: 0, - sm: $kendo-border-radius-sm, - md: $kendo-border-radius-md, - lg: $kendo-border-radius-lg, - full: 9999px -) !default; - -@import "@progress/kendo-theme-default/scss/utils/_border.scss"; diff --git a/packages/bootstrap/scss/utils/_display.scss b/packages/bootstrap/scss/utils/_display.scss deleted file mode 100644 index dc1a65e77f4..00000000000 --- a/packages/bootstrap/scss/utils/_display.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_display.scss"; diff --git a/packages/bootstrap/scss/utils/_flex.scss b/packages/bootstrap/scss/utils/_flex.scss deleted file mode 100644 index 43548b3cbba..00000000000 --- a/packages/bootstrap/scss/utils/_flex.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_flex.scss"; diff --git a/packages/bootstrap/scss/utils/_float.scss b/packages/bootstrap/scss/utils/_float.scss deleted file mode 100644 index 3a4bcbe39ee..00000000000 --- a/packages/bootstrap/scss/utils/_float.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_float.scss"; diff --git a/packages/bootstrap/scss/utils/_grid.scss b/packages/bootstrap/scss/utils/_grid.scss deleted file mode 100644 index 39816c23a0c..00000000000 --- a/packages/bootstrap/scss/utils/_grid.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_grid.scss"; diff --git a/packages/bootstrap/scss/utils/_index.scss b/packages/bootstrap/scss/utils/_index.scss index e40b85c80ab..6dea880a8db 100644 --- a/packages/bootstrap/scss/utils/_index.scss +++ b/packages/bootstrap/scss/utils/_index.scss @@ -2,29 +2,7 @@ // Dependencies -@import "../typography/_variables.scss"; // Component -// @import "./_aspect-ratio.scss"; -// @import "./_border.scss"; -// @import "./_display.scss"; -// @import "./_flex.scss"; -// @import "./_float.scss"; -// @import "./_grid.scss"; -// @import "./_order.scss"; -// @import "./_overflow.scss"; -// @import "./_pointer-events.scss"; -// @import "./_position.scss"; -// @import "./_resize.scss"; -// @import "./_spacing.scss"; -// @import "./_spacer.scss"; -// @import "./_table-layout.scss"; -@import "./_text.scss"; -@import "./_theme-colors.scss"; -// @import "./_touch-action.scss"; -// @import "./_transform.scss"; -// @import "./_user-select.scss"; - - @import "@progress/kendo-theme-utils/scss/all.scss"; diff --git a/packages/bootstrap/scss/utils/_order.scss b/packages/bootstrap/scss/utils/_order.scss deleted file mode 100644 index 1b12e1027fc..00000000000 --- a/packages/bootstrap/scss/utils/_order.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_order.scss"; diff --git a/packages/bootstrap/scss/utils/_overflow.scss b/packages/bootstrap/scss/utils/_overflow.scss deleted file mode 100644 index b83da2498f9..00000000000 --- a/packages/bootstrap/scss/utils/_overflow.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_overflow.scss"; diff --git a/packages/bootstrap/scss/utils/_pointer-events.scss b/packages/bootstrap/scss/utils/_pointer-events.scss deleted file mode 100644 index 1204fc18f01..00000000000 --- a/packages/bootstrap/scss/utils/_pointer-events.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_pointer-events.scss"; diff --git a/packages/bootstrap/scss/utils/_position.scss b/packages/bootstrap/scss/utils/_position.scss deleted file mode 100644 index 0b35bd0e2d8..00000000000 --- a/packages/bootstrap/scss/utils/_position.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_position.scss"; diff --git a/packages/bootstrap/scss/utils/_resize.scss b/packages/bootstrap/scss/utils/_resize.scss deleted file mode 100644 index 86f0d62db87..00000000000 --- a/packages/bootstrap/scss/utils/_resize.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_resize.scss"; diff --git a/packages/bootstrap/scss/utils/_spacer.scss b/packages/bootstrap/scss/utils/_spacer.scss deleted file mode 100644 index 6466439a719..00000000000 --- a/packages/bootstrap/scss/utils/_spacer.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_spacer.scss"; diff --git a/packages/bootstrap/scss/utils/_spacing.scss b/packages/bootstrap/scss/utils/_spacing.scss deleted file mode 100644 index 20038b9723e..00000000000 --- a/packages/bootstrap/scss/utils/_spacing.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_spacing.scss"; diff --git a/packages/bootstrap/scss/utils/_table-layout.scss b/packages/bootstrap/scss/utils/_table-layout.scss deleted file mode 100644 index fc7cccfd8be..00000000000 --- a/packages/bootstrap/scss/utils/_table-layout.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_table-layout.scss"; diff --git a/packages/bootstrap/scss/utils/_text.scss b/packages/bootstrap/scss/utils/_text.scss deleted file mode 100644 index a8345405832..00000000000 --- a/packages/bootstrap/scss/utils/_text.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_text.scss"; diff --git a/packages/bootstrap/scss/utils/_theme-colors.scss b/packages/bootstrap/scss/utils/_theme-colors.scss deleted file mode 100644 index a82c76a542f..00000000000 --- a/packages/bootstrap/scss/utils/_theme-colors.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_theme-colors.scss"; diff --git a/packages/bootstrap/scss/utils/_touch-action.scss b/packages/bootstrap/scss/utils/_touch-action.scss deleted file mode 100644 index a77c7b0ecf0..00000000000 --- a/packages/bootstrap/scss/utils/_touch-action.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_touch-action.scss"; diff --git a/packages/bootstrap/scss/utils/_transform.scss b/packages/bootstrap/scss/utils/_transform.scss deleted file mode 100644 index 636c45c15db..00000000000 --- a/packages/bootstrap/scss/utils/_transform.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_transform.scss"; diff --git a/packages/bootstrap/scss/utils/_user-select.scss b/packages/bootstrap/scss/utils/_user-select.scss deleted file mode 100644 index 9da9eb1223d..00000000000 --- a/packages/bootstrap/scss/utils/_user-select.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_user-select.scss"; diff --git a/packages/bootstrap/scss/window/_variables.scss b/packages/bootstrap/scss/window/_variables.scss index 3fbd3cb2986..1c3c9abd7a4 100644 --- a/packages/bootstrap/scss/window/_variables.scss +++ b/packages/bootstrap/scss/window/_variables.scss @@ -1,4 +1,8 @@ +@import "../action-buttons/_variables.scss"; + + // Window + $kendo-window-border-width: 1px !default; $kendo-window-border-radius: $kendo-border-radius-md !default; $kendo-window-font-family: $font-family !default; diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss index 6e8d5c7ea58..667d7cd0145 100644 --- a/packages/classic/scss/_variables.scss +++ b/packages/classic/scss/_variables.scss @@ -82,6 +82,15 @@ $kendo-border-radius-sm: k-math-div( $kendo-border-radius, 2 ) !default; $kendo-border-radius-md: $kendo-border-radius !default; $kendo-border-radius-lg: $kendo-border-radius * 2 !default; +$kendo-border-radii: ( + DEFAULT: $kendo-border-radius-md, + 0: 0, + sm: $kendo-border-radius-sm, + md: $kendo-border-radius-md, + lg: $kendo-border-radius-lg, + full: 9999px +) !default; + $kendo-zindex-popup: 1 !default; $kendo-zindex-window: 2 !default; @@ -189,6 +198,53 @@ $kendo-theme-colors: ( ) !default; +// Typography + +/// Base font size across all components. +/// @group typography +$font-size: 14px !default; +$font-size-xs: 10px !default; +$font-size-sm: 12px !default; +$font-size-md: $font-size !default; +$font-size-lg: 16px !default; +$font-size-xl: 20px !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; + +/// Font family across all components. +/// @group typography +$font-family: inherit !default; + +/// Font family for monospaced text. Used for styling the code. +/// @group typography +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default; + +/// Line height used along with $font-size. +/// @group typography +$line-height: k-math-div( 20, 14 ) !default; +$line-height-xs: 1 !default; +$line-height-sm: 1.25 !default; +$line-height-md: $line-height !default; +$line-height-lg: 1.5 !default; +$line-height-em: calc( #{$line-height} * 1em ) !default; + + +// Font weight +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 700 !default; + + +// Letter Spacing +$letter-spacing: null !default; + + // Root styles $kendo-body-bg: $kendo-color-white !default; $kendo-body-text: #272727 !default; @@ -263,13 +319,9 @@ $kendo-disabled-styling: ( ) !default; - // Generic styles // TODO: refactor once we extract drag drop as separate module -$font-size: 14px !default; -$font-family: inherit !default; -$line-height: k-math-div( 20, 14 ) !default; // Header diff --git a/packages/classic/scss/action-sheet/_variables.scss b/packages/classic/scss/action-sheet/_variables.scss index 8ed206de19e..06df3438839 100644 --- a/packages/classic/scss/action-sheet/_variables.scss +++ b/packages/classic/scss/action-sheet/_variables.scss @@ -1,4 +1,5 @@ // Action sheet + $actionsheet-padding-x: null !default; $actionsheet-padding-y: null !default; $actionsheet-width: 360px !default; diff --git a/packages/classic/scss/badge/_index.scss b/packages/classic/scss/badge/_index.scss index ac781c66f0a..29c5d58e467 100644 --- a/packages/classic/scss/badge/_index.scss +++ b/packages/classic/scss/badge/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../icons/_index.scss"; diff --git a/packages/classic/scss/badge/_variables.scss b/packages/classic/scss/badge/_variables.scss index a2116dcf517..b740102b1d9 100644 --- a/packages/classic/scss/badge/_variables.scss +++ b/packages/classic/scss/badge/_variables.scss @@ -1,4 +1,5 @@ // Badge + /// Width of the border around the badge. /// @group badge $kendo-badge-border-width: 1px !default; diff --git a/packages/classic/scss/bottom-navigation/_index.scss b/packages/classic/scss/bottom-navigation/_index.scss index 92ed3fd17ea..e37b9c27815 100644 --- a/packages/classic/scss/bottom-navigation/_index.scss +++ b/packages/classic/scss/bottom-navigation/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../icons/_index.scss"; diff --git a/packages/classic/scss/breadcrumb/_variables.scss b/packages/classic/scss/breadcrumb/_variables.scss index cf1c1c3918e..ed47dea8f88 100644 --- a/packages/classic/scss/breadcrumb/_variables.scss +++ b/packages/classic/scss/breadcrumb/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Breadcrumb + $breadcrumb-margin-x: null !default; $breadcrumb-margin-y: null !default; $breadcrumb-padding-x: null !default; diff --git a/packages/classic/scss/button/_index.scss b/packages/classic/scss/button/_index.scss index e9480800eb5..b6ef32746ce 100644 --- a/packages/classic/scss/button/_index.scss +++ b/packages/classic/scss/button/_index.scss @@ -4,7 +4,7 @@ // Dependencies @import "../badge/_index.scss"; @import "../icons/_index.scss"; -@import "../typography/_variables.scss"; + // Component @import "./_variables.scss"; diff --git a/packages/classic/scss/calendar/_variables.scss b/packages/classic/scss/calendar/_variables.scss index 177b157c682..b4861cd061e 100644 --- a/packages/classic/scss/calendar/_variables.scss +++ b/packages/classic/scss/calendar/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Calendar + $calendar-border-width: 1px !default; $calendar-font-family: $font-family !default; $calendar-font-size: $font-size !default; diff --git a/packages/classic/scss/captcha/_index.scss b/packages/classic/scss/captcha/_index.scss index 058a4d2f13b..ec50e27eb5e 100644 --- a/packages/classic/scss/captcha/_index.scss +++ b/packages/classic/scss/captcha/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_index.scss"; +// @import "../utils/_index.scss"; @import "../common/_index.scss"; @import "../icons/_index.scss"; @import "../input/_index.scss"; diff --git a/packages/classic/scss/card/_index.scss b/packages/classic/scss/card/_index.scss index 88dc019c391..2f95d3ab5d6 100644 --- a/packages/classic/scss/card/_index.scss +++ b/packages/classic/scss/card/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_grid.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_grid.scss"; @import "../action-buttons/_index.scss"; @import "../icons/_index.scss"; @import "../typography/_index.scss"; diff --git a/packages/classic/scss/checkbox/_index.scss b/packages/classic/scss/checkbox/_index.scss index 8cb597fb591..43dc7943c9f 100644 --- a/packages/classic/scss/checkbox/_index.scss +++ b/packages/classic/scss/checkbox/_index.scss @@ -2,8 +2,6 @@ // Dependencies -@import "../typography/_variables.scss"; -@import "../list/_variables.scss"; // Component diff --git a/packages/classic/scss/checkbox/_variables.scss b/packages/classic/scss/checkbox/_variables.scss index a7ae3179c7e..3eec4e44abd 100644 --- a/packages/classic/scss/checkbox/_variables.scss +++ b/packages/classic/scss/checkbox/_variables.scss @@ -1,3 +1,6 @@ +@import "../list/_variables.scss"; + + // Checkbox /// Border width of checkbox. diff --git a/packages/classic/scss/chip/_index.scss b/packages/classic/scss/chip/_index.scss index 7f40fe77778..832c0dab47c 100644 --- a/packages/classic/scss/chip/_index.scss +++ b/packages/classic/scss/chip/_index.scss @@ -3,7 +3,6 @@ // Dependencies @import "../icons/_index.scss"; -@import "../button/_variables.scss"; // Component diff --git a/packages/classic/scss/chip/_variables.scss b/packages/classic/scss/chip/_variables.scss index 7acfde94665..0fe32612e60 100644 --- a/packages/classic/scss/chip/_variables.scss +++ b/packages/classic/scss/chip/_variables.scss @@ -1,3 +1,6 @@ +@import "../button/_variables.scss"; + + // Chip /// Width of the border around the button. diff --git a/packages/classic/scss/colorgradient/_index.scss b/packages/classic/scss/colorgradient/_index.scss index 64d1c6087ae..4f8ee59cb8d 100644 --- a/packages/classic/scss/colorgradient/_index.scss +++ b/packages/classic/scss/colorgradient/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_spacer.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_spacer.scss"; @import "../icons/_index.scss"; @import "../button/_index.scss"; @import "../slider/_index.scss"; diff --git a/packages/classic/scss/colorpalette/_index.scss b/packages/classic/scss/colorpalette/_index.scss index 72afe33d581..b01214ca47a 100644 --- a/packages/classic/scss/colorpalette/_index.scss +++ b/packages/classic/scss/colorpalette/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; +// @import "../utils/_flex.scss"; // Component diff --git a/packages/classic/scss/common/_index.scss b/packages/classic/scss/common/_index.scss index e04c27c6f89..731ca7c8261 100644 --- a/packages/classic/scss/common/_index.scss +++ b/packages/classic/scss/common/_index.scss @@ -1,5 +1,3 @@ -@import "../typography/_variables.scss"; - @import "./_base.scss"; @import "./_animations.scss"; @import "./_resizing.scss"; diff --git a/packages/classic/scss/dataviz/_index.scss b/packages/classic/scss/dataviz/_index.scss index c8a5ae4fbcc..1a6e25bf4ed 100644 --- a/packages/classic/scss/dataviz/_index.scss +++ b/packages/classic/scss/dataviz/_index.scss @@ -5,7 +5,6 @@ @import "../common/_index.scss"; @import "../popup/_index.scss"; @import "../tooltip/_index.scss"; -@import "../button/_variables.scss"; // Component diff --git a/packages/classic/scss/dataviz/_variables.scss b/packages/classic/scss/dataviz/_variables.scss index 5a6f5967d90..943c1ef1c85 100644 --- a/packages/classic/scss/dataviz/_variables.scss +++ b/packages/classic/scss/dataviz/_variables.scss @@ -1,4 +1,8 @@ +@import "../button/_variables.scss"; + + // Chart + /// The first base series color and its light and dark shades. /// @group charts $series-a: #ff6358 !default; diff --git a/packages/classic/scss/dropdowngrid/_index.scss b/packages/classic/scss/dropdowngrid/_index.scss index e459b0d1cf7..4e0d03ff53f 100644 --- a/packages/classic/scss/dropdowngrid/_index.scss +++ b/packages/classic/scss/dropdowngrid/_index.scss @@ -3,17 +3,14 @@ // Dependencies @import "../common/_index.scss"; -@import "../table/_index.scss"; -@import "../input/_index.scss"; @import "../floating-label/_index.scss"; -@import "../combobox/_index.scss"; +@import "../icons/_index.scss"; +@import "../input/_index.scss"; @import "../popup/_index.scss"; -@import "../toolbar/_variables.scss"; -@import "../menu/_variables.scss"; -@import "../chip/_variables.scss"; -@import "../grid/_variables.scss"; +@import "../table/_index.scss"; // Component +@import "./_variables.scss"; @import "./_layout.scss"; @import "./_theme.scss"; diff --git a/packages/classic/scss/dropdowngrid/_variables.scss b/packages/classic/scss/dropdowngrid/_variables.scss new file mode 100644 index 00000000000..801f9dc9831 --- /dev/null +++ b/packages/classic/scss/dropdowngrid/_variables.scss @@ -0,0 +1 @@ +// Dropdown grid diff --git a/packages/classic/scss/dropzone/_variables.scss b/packages/classic/scss/dropzone/_variables.scss index f455c8a4c0d..f5a20e5c300 100644 --- a/packages/classic/scss/dropzone/_variables.scss +++ b/packages/classic/scss/dropzone/_variables.scss @@ -1,4 +1,5 @@ // Dropzone + $dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default; $dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default; $dropzone-border-width: 1px !default; diff --git a/packages/classic/scss/expansion-panel/_index.scss b/packages/classic/scss/expansion-panel/_index.scss index c2e2f6da7c1..91ad9f3e79a 100644 --- a/packages/classic/scss/expansion-panel/_index.scss +++ b/packages/classic/scss/expansion-panel/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_display.scss"; -@import "../utils/_spacer.scss"; +// @import "../utils/_display.scss"; +// @import "../utils/_spacer.scss"; @import "../icons/_index.scss"; @import "../list/_index.scss"; diff --git a/packages/classic/scss/fab/_index.scss b/packages/classic/scss/fab/_index.scss index 73ff9ff6f3e..428a2aa05c8 100644 --- a/packages/classic/scss/fab/_index.scss +++ b/packages/classic/scss/fab/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../icons/_index.scss"; @import "../button/_index.scss"; @import "../badge/_index.scss"; diff --git a/packages/classic/scss/forms/_index.scss b/packages/classic/scss/forms/_index.scss index 00de1b10a12..ae13a53bed8 100644 --- a/packages/classic/scss/forms/_index.scss +++ b/packages/classic/scss/forms/_index.scss @@ -3,12 +3,8 @@ // Dependencies // TODO: extract variables @import "../common/_index.scss"; -@import "../tooltip/_variables.scss"; -@import "../button/_variables.scss"; -@import "../input/_variables.scss"; @import "../toolbar/_index.scss"; @import "../action-buttons/_index.scss"; -@import "../window/_variables.scss"; // Component diff --git a/packages/classic/scss/forms/_variables.scss b/packages/classic/scss/forms/_variables.scss index 779a7bc1e70..5f318ebd2fa 100644 --- a/packages/classic/scss/forms/_variables.scss +++ b/packages/classic/scss/forms/_variables.scss @@ -1,4 +1,11 @@ +@import "../input/_variables.scss"; +@import "../tooltip/_variables.scss"; +@import "../typography/_variables.scss"; +@import "../window/_variables.scss"; + + // Forms + $kendo-form-spacer: $kendo-padding-md-x * 2 !default; $kendo-form-font-size: $font-size !default; diff --git a/packages/classic/scss/grid/_index.scss b/packages/classic/scss/grid/_index.scss index cfc4689b0f2..ea2cd27a62b 100644 --- a/packages/classic/scss/grid/_index.scss +++ b/packages/classic/scss/grid/_index.scss @@ -22,8 +22,8 @@ @import "../pager/_index.scss"; @import "../chip/_index.scss"; @import "../skeleton/_index.scss"; -@import "../utils/_float.scss"; -@import "../utils/_spacer.scss"; +// @import "../utils/_float.scss"; +// @import "../utils/_spacer.scss"; @import "../list/_index.scss"; @import "../table/_index.scss"; diff --git a/packages/classic/scss/listview/_index.scss b/packages/classic/scss/listview/_index.scss index 5a72cedb6d5..228b79abea1 100644 --- a/packages/classic/scss/listview/_index.scss +++ b/packages/classic/scss/listview/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_grid.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_grid.scss"; @import "../pager/_index.scss"; @import "../icons/_index.scss"; diff --git a/packages/classic/scss/loader/_variables.scss b/packages/classic/scss/loader/_variables.scss index ac3a8ebc29b..4bc375975d8 100644 --- a/packages/classic/scss/loader/_variables.scss +++ b/packages/classic/scss/loader/_variables.scss @@ -1,4 +1,5 @@ // Loader + $kendo-loader-segment-border-radius: 50% !default; $kendo-loader-segment-size-sm: k-map-get( $kendo-spacing, 1 ) !default; $kendo-loader-segment-size-md: k-map-get( $kendo-spacing, 2 ) !default; diff --git a/packages/classic/scss/map/_index.scss b/packages/classic/scss/map/_index.scss index 10bcb60b424..ff33afef70e 100644 --- a/packages/classic/scss/map/_index.scss +++ b/packages/classic/scss/map/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../button/_index.scss"; @import "../scroller/_index.scss"; @import "../icons/_index.scss"; diff --git a/packages/classic/scss/menu/_variables.scss b/packages/classic/scss/menu/_variables.scss index 0f4694c4a11..67b574575b6 100644 --- a/packages/classic/scss/menu/_variables.scss +++ b/packages/classic/scss/menu/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Menu + $menu-padding-x: 0px !default; $menu-padding-y: 0px !default; $menu-border-width: 1px !default; diff --git a/packages/classic/scss/multiselect/_index.scss b/packages/classic/scss/multiselect/_index.scss index 58a4cabf3af..7e7acf74fb0 100644 --- a/packages/classic/scss/multiselect/_index.scss +++ b/packages/classic/scss/multiselect/_index.scss @@ -3,7 +3,6 @@ // Dependencies @import "../common/_index.scss"; -@import "../forms/_variables.scss"; @import "../button/_index.scss"; @import "../input/_index.scss"; @import "../chip/_index.scss"; diff --git a/packages/classic/scss/orgchart/_index.scss b/packages/classic/scss/orgchart/_index.scss index d9668fafdc2..62a230602c8 100644 --- a/packages/classic/scss/orgchart/_index.scss +++ b/packages/classic/scss/orgchart/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_index.scss"; +// @import "../utils/_index.scss"; @import "../common/_index.scss"; @import "../icons/_index.scss"; @import "../forms/_index.scss"; diff --git a/packages/classic/scss/pager/_index.scss b/packages/classic/scss/pager/_index.scss index 77fa9ddf949..0749af28ce2 100644 --- a/packages/classic/scss/pager/_index.scss +++ b/packages/classic/scss/pager/_index.scss @@ -5,8 +5,6 @@ @import "../common/_index.scss"; @import "../dropdownlist/_index.scss"; @import "../icons/_index.scss"; -@import "../toolbar/_variables.scss"; -@import "../list/_index.scss"; @import "../button/_index.scss"; diff --git a/packages/classic/scss/pager/_variables.scss b/packages/classic/scss/pager/_variables.scss index cb536feb4b7..329612e678f 100644 --- a/packages/classic/scss/pager/_variables.scss +++ b/packages/classic/scss/pager/_variables.scss @@ -1,3 +1,6 @@ +@import "../list/_variables.scss"; + + // Pager /// Horizontal padding of the pager according to the pager size. diff --git a/packages/classic/scss/pdf-viewer/_index.scss b/packages/classic/scss/pdf-viewer/_index.scss index 9ac4d66bba5..079c371f879 100644 --- a/packages/classic/scss/pdf-viewer/_index.scss +++ b/packages/classic/scss/pdf-viewer/_index.scss @@ -3,8 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_index.scss"; -@import "../button/_variables.scss"; +// @import "../utils/_index.scss"; @import "../combobox/_index.scss"; @import "../toolbar/_index.scss"; @import "../dialog/_index.scss"; diff --git a/packages/classic/scss/pdf-viewer/_variables.scss b/packages/classic/scss/pdf-viewer/_variables.scss index 3d8ea9384c7..d76542e952f 100644 --- a/packages/classic/scss/pdf-viewer/_variables.scss +++ b/packages/classic/scss/pdf-viewer/_variables.scss @@ -1,4 +1,5 @@ // PDF viewer + $pdf-viewer-border-width: 1px !default; $pdf-viewer-font-family: $font-family !default; $pdf-viewer-font-size: $font-size !default; diff --git a/packages/classic/scss/pivotgrid/_index.scss b/packages/classic/scss/pivotgrid/_index.scss index d1204b679d5..40ecdaaf1b7 100644 --- a/packages/classic/scss/pivotgrid/_index.scss +++ b/packages/classic/scss/pivotgrid/_index.scss @@ -7,12 +7,11 @@ @import "../treeview/_index.scss"; @import "../grid/_index.scss"; @import "../icons/_index.scss"; -@import "../utils/_spacer.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_grid.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_spacer.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_grid.scss"; +// @import "../utils/_position.scss"; @import "../list/_index.scss"; -@import "../table/_variables.scss"; // Component diff --git a/packages/classic/scss/pivotgrid/_variables.scss b/packages/classic/scss/pivotgrid/_variables.scss index 5a8db7f2000..5a02bbb134d 100644 --- a/packages/classic/scss/pivotgrid/_variables.scss +++ b/packages/classic/scss/pivotgrid/_variables.scss @@ -1,3 +1,6 @@ +@import "../table/_variables.scss"; + + // Pivot grid $pivotgrid-spacer: k-map-get( $kendo-spacing, 4 ) !default; $pivotgrid-padding-x: null !default; diff --git a/packages/classic/scss/radio/_index.scss b/packages/classic/scss/radio/_index.scss index cd8b651613f..43dc7943c9f 100644 --- a/packages/classic/scss/radio/_index.scss +++ b/packages/classic/scss/radio/_index.scss @@ -2,9 +2,6 @@ // Dependencies -@import "../typography/_variables.scss"; -@import "../list/_variables.scss"; -@import "../checkbox/_variables.scss"; // Component diff --git a/packages/classic/scss/radio/_variables.scss b/packages/classic/scss/radio/_variables.scss index 5e815637d35..42850ce2629 100644 --- a/packages/classic/scss/radio/_variables.scss +++ b/packages/classic/scss/radio/_variables.scss @@ -1,3 +1,7 @@ +@import "../list/_variables.scss"; +@import "../checkbox/_variables.scss"; + + // Radio button /// Border radius of radio button. diff --git a/packages/classic/scss/rating/_variables.scss b/packages/classic/scss/rating/_variables.scss index 1b0513a1d5b..ca3c91b135f 100644 --- a/packages/classic/scss/rating/_variables.scss +++ b/packages/classic/scss/rating/_variables.scss @@ -1,4 +1,5 @@ // Rating + $rating-font-family: $font-family !default; $rating-font-size: $font-size !default; $rating-line-height: $line-height !default; diff --git a/packages/classic/scss/switch/_index.scss b/packages/classic/scss/switch/_index.scss index 5f1651c1b41..3b6b57176dc 100644 --- a/packages/classic/scss/switch/_index.scss +++ b/packages/classic/scss/switch/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_border.scss"; +// @import "../utils/_border.scss"; // Component diff --git a/packages/classic/scss/table/_index.scss b/packages/classic/scss/table/_index.scss index aeff2815a1b..f509a25f02d 100644 --- a/packages/classic/scss/table/_index.scss +++ b/packages/classic/scss/table/_index.scss @@ -3,17 +3,9 @@ // Dependencies @import "../common/_index.scss"; -@import "../input/_index.scss"; -@import "../floating-label/_index.scss"; -@import "../combobox/_index.scss"; -@import "../popup/_index.scss"; -@import "../toolbar/_variables.scss"; -@import "../menu/_variables.scss"; -@import "../list/_variables.scss"; // Component @import "./_variables.scss"; @import "./_layout.scss"; @import "./_theme.scss"; - diff --git a/packages/classic/scss/table/_variables.scss b/packages/classic/scss/table/_variables.scss index bc029848270..18b2e99b972 100644 --- a/packages/classic/scss/table/_variables.scss +++ b/packages/classic/scss/table/_variables.scss @@ -1,3 +1,6 @@ +@import "../list/_variables.scss"; + + // Table /// The width of the table border. diff --git a/packages/classic/scss/taskboard/_index.scss b/packages/classic/scss/taskboard/_index.scss index bd0a0bb6566..16440d15a5e 100644 --- a/packages/classic/scss/taskboard/_index.scss +++ b/packages/classic/scss/taskboard/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_index.scss"; +// @import "../utils/_index.scss"; @import "../common/_index.scss"; @import "../icons/_index.scss"; @import "../forms/_index.scss"; diff --git a/packages/classic/scss/timeselector/_variables.scss b/packages/classic/scss/timeselector/_variables.scss index 7cab81139d3..6cf76317880 100644 --- a/packages/classic/scss/timeselector/_variables.scss +++ b/packages/classic/scss/timeselector/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Time selector + $time-selector-border-width: 1px !default; $time-selector-font-family: $font-family !default; $time-selector-font-size: $font-size !default; diff --git a/packages/classic/scss/treelist/_index.scss b/packages/classic/scss/treelist/_index.scss index 1fc93f158bc..f5a0ef3aa76 100644 --- a/packages/classic/scss/treelist/_index.scss +++ b/packages/classic/scss/treelist/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_text.scss"; +// @import "../utils/_text.scss"; @import "../grid/_index.scss"; @import "../icons/_index.scss"; diff --git a/packages/classic/scss/treeview/_variables.scss b/packages/classic/scss/treeview/_variables.scss index 292a2700cbb..eae65256250 100644 --- a/packages/classic/scss/treeview/_variables.scss +++ b/packages/classic/scss/treeview/_variables.scss @@ -1,3 +1,6 @@ +@import "../typography/_variables.scss"; + + // Treeview /// Font family of the treeview component. diff --git a/packages/classic/scss/typography/_index.scss b/packages/classic/scss/typography/_index.scss index f509a25f02d..43dc7943c9f 100644 --- a/packages/classic/scss/typography/_index.scss +++ b/packages/classic/scss/typography/_index.scss @@ -2,7 +2,6 @@ // Dependencies -@import "../common/_index.scss"; // Component diff --git a/packages/classic/scss/typography/_variables.scss b/packages/classic/scss/typography/_variables.scss index 1c7ded1b972..283dcde4eb8 100644 --- a/packages/classic/scss/typography/_variables.scss +++ b/packages/classic/scss/typography/_variables.scss @@ -4,42 +4,6 @@ /// @group typography $enable-typography: false !default; -/// Base font size across all components. -/// @group typography -$font-size: 14px !default; -$font-size-xs: 10px !default; -$font-size-sm: 12px !default; -$font-size-md: $font-size !default; -$font-size-lg: 16px !default; -$font-size-xl: 20px !default; - -/// Font family across all components. -/// @group typography -$font-family: inherit !default; - -/// Font family for monospaced text. Used for styling the code. -/// @group typography -$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default; - -/// Line height used along with $font-size. -/// @group typography -$line-height: k-math-div( 20, 14 ) !default; -$line-height-xs: 1 !default; -$line-height-sm: 1.25 !default; -$line-height-md: $line-height !default; -$line-height-lg: 1.5 !default; -$line-height-em: calc( #{$line-height} * 1em ) !default; - - -// Font weight -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 700 !default; - - -// Letter Spacing -$letter-spacing: null !default; - // Headings $h1-font-size: ($font-size * 3) !default; diff --git a/packages/classic/scss/upload/_index.scss b/packages/classic/scss/upload/_index.scss index c94cc6d4629..cb227e333e5 100644 --- a/packages/classic/scss/upload/_index.scss +++ b/packages/classic/scss/upload/_index.scss @@ -7,7 +7,6 @@ @import "../action-buttons/_index.scss"; @import "../icons/_index.scss"; @import "../dropzone/_index.scss"; -@import "../toolbar/_variables.scss"; // Component diff --git a/packages/classic/scss/upload/_variables.scss b/packages/classic/scss/upload/_variables.scss index aa2754698ed..cd800ee0ad4 100644 --- a/packages/classic/scss/upload/_variables.scss +++ b/packages/classic/scss/upload/_variables.scss @@ -1,4 +1,5 @@ // Upload + $kendo-upload-border-width: 1px !default; $kendo-upload-font-family: $font-family !default; $kendo-upload-font-size: $font-size !default; diff --git a/packages/classic/scss/utils/_aspect-ratio.scss b/packages/classic/scss/utils/_aspect-ratio.scss deleted file mode 100644 index 0d26161b2d1..00000000000 --- a/packages/classic/scss/utils/_aspect-ratio.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_aspect-ratio.scss"; diff --git a/packages/classic/scss/utils/_border.scss b/packages/classic/scss/utils/_border.scss deleted file mode 100644 index 96c150753d7..00000000000 --- a/packages/classic/scss/utils/_border.scss +++ /dev/null @@ -1,10 +0,0 @@ -$utils-border-radius: ( - default: $kendo-border-radius-md, - 0: 0, - sm: $kendo-border-radius-sm, - md: $kendo-border-radius-md, - lg: $kendo-border-radius-lg, - full: 9999px -) !default; - -@import "@progress/kendo-theme-default/scss/utils/_border.scss"; diff --git a/packages/classic/scss/utils/_display.scss b/packages/classic/scss/utils/_display.scss deleted file mode 100644 index dc1a65e77f4..00000000000 --- a/packages/classic/scss/utils/_display.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_display.scss"; diff --git a/packages/classic/scss/utils/_flex.scss b/packages/classic/scss/utils/_flex.scss deleted file mode 100644 index 43548b3cbba..00000000000 --- a/packages/classic/scss/utils/_flex.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_flex.scss"; diff --git a/packages/classic/scss/utils/_float.scss b/packages/classic/scss/utils/_float.scss deleted file mode 100644 index 3a4bcbe39ee..00000000000 --- a/packages/classic/scss/utils/_float.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_float.scss"; diff --git a/packages/classic/scss/utils/_grid.scss b/packages/classic/scss/utils/_grid.scss deleted file mode 100644 index 39816c23a0c..00000000000 --- a/packages/classic/scss/utils/_grid.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_grid.scss"; diff --git a/packages/classic/scss/utils/_index.scss b/packages/classic/scss/utils/_index.scss index e40b85c80ab..6dea880a8db 100644 --- a/packages/classic/scss/utils/_index.scss +++ b/packages/classic/scss/utils/_index.scss @@ -2,29 +2,7 @@ // Dependencies -@import "../typography/_variables.scss"; // Component -// @import "./_aspect-ratio.scss"; -// @import "./_border.scss"; -// @import "./_display.scss"; -// @import "./_flex.scss"; -// @import "./_float.scss"; -// @import "./_grid.scss"; -// @import "./_order.scss"; -// @import "./_overflow.scss"; -// @import "./_pointer-events.scss"; -// @import "./_position.scss"; -// @import "./_resize.scss"; -// @import "./_spacing.scss"; -// @import "./_spacer.scss"; -// @import "./_table-layout.scss"; -@import "./_text.scss"; -@import "./_theme-colors.scss"; -// @import "./_touch-action.scss"; -// @import "./_transform.scss"; -// @import "./_user-select.scss"; - - @import "@progress/kendo-theme-utils/scss/all.scss"; diff --git a/packages/classic/scss/utils/_order.scss b/packages/classic/scss/utils/_order.scss deleted file mode 100644 index 1b12e1027fc..00000000000 --- a/packages/classic/scss/utils/_order.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_order.scss"; diff --git a/packages/classic/scss/utils/_overflow.scss b/packages/classic/scss/utils/_overflow.scss deleted file mode 100644 index b83da2498f9..00000000000 --- a/packages/classic/scss/utils/_overflow.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_overflow.scss"; diff --git a/packages/classic/scss/utils/_pointer-events.scss b/packages/classic/scss/utils/_pointer-events.scss deleted file mode 100644 index 1204fc18f01..00000000000 --- a/packages/classic/scss/utils/_pointer-events.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_pointer-events.scss"; diff --git a/packages/classic/scss/utils/_position.scss b/packages/classic/scss/utils/_position.scss deleted file mode 100644 index 0b35bd0e2d8..00000000000 --- a/packages/classic/scss/utils/_position.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_position.scss"; diff --git a/packages/classic/scss/utils/_resize.scss b/packages/classic/scss/utils/_resize.scss deleted file mode 100644 index 86f0d62db87..00000000000 --- a/packages/classic/scss/utils/_resize.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_resize.scss"; diff --git a/packages/classic/scss/utils/_spacer.scss b/packages/classic/scss/utils/_spacer.scss deleted file mode 100644 index 6466439a719..00000000000 --- a/packages/classic/scss/utils/_spacer.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_spacer.scss"; diff --git a/packages/classic/scss/utils/_spacing.scss b/packages/classic/scss/utils/_spacing.scss deleted file mode 100644 index 20038b9723e..00000000000 --- a/packages/classic/scss/utils/_spacing.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_spacing.scss"; diff --git a/packages/classic/scss/utils/_table-layout.scss b/packages/classic/scss/utils/_table-layout.scss deleted file mode 100644 index fc7cccfd8be..00000000000 --- a/packages/classic/scss/utils/_table-layout.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_table-layout.scss"; diff --git a/packages/classic/scss/utils/_text.scss b/packages/classic/scss/utils/_text.scss deleted file mode 100644 index a8345405832..00000000000 --- a/packages/classic/scss/utils/_text.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_text.scss"; diff --git a/packages/classic/scss/utils/_theme-colors.scss b/packages/classic/scss/utils/_theme-colors.scss deleted file mode 100644 index a82c76a542f..00000000000 --- a/packages/classic/scss/utils/_theme-colors.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_theme-colors.scss"; diff --git a/packages/classic/scss/utils/_touch-action.scss b/packages/classic/scss/utils/_touch-action.scss deleted file mode 100644 index a77c7b0ecf0..00000000000 --- a/packages/classic/scss/utils/_touch-action.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_touch-action.scss"; diff --git a/packages/classic/scss/utils/_transform.scss b/packages/classic/scss/utils/_transform.scss deleted file mode 100644 index 636c45c15db..00000000000 --- a/packages/classic/scss/utils/_transform.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_transform.scss"; diff --git a/packages/classic/scss/utils/_user-select.scss b/packages/classic/scss/utils/_user-select.scss deleted file mode 100644 index 9da9eb1223d..00000000000 --- a/packages/classic/scss/utils/_user-select.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_user-select.scss"; diff --git a/packages/classic/scss/window/_variables.scss b/packages/classic/scss/window/_variables.scss index 3a8191f49fd..5bd0cfe8552 100644 --- a/packages/classic/scss/window/_variables.scss +++ b/packages/classic/scss/window/_variables.scss @@ -1,4 +1,8 @@ +@import "../action-buttons/_variables.scss"; + + // Window + $kendo-window-border-width: 1px !default; $kendo-window-border-radius: k-map-get( $kendo-spacing, 1 ) !default; $kendo-window-font-family: $font-family !default; diff --git a/packages/core/scss/styles/_layout.scss b/packages/core/scss/styles/_layout.scss index 5c76c05c0ae..15cb8a8a539 100644 --- a/packages/core/scss/styles/_layout.scss +++ b/packages/core/scss/styles/_layout.scss @@ -7,15 +7,21 @@ display: flex; flex-flow: column nowrap; } -.k-flex { + +// Spacer +.k-spacer { flex: 1 1 auto; } -.k-spacer { +.k-spacer-sized { flex: none; - flex-grow: 1; } -.k-spacer-sized { - flex-grow: 0; + + +// Float wrap +.k-float-wrap::after { + content: ""; + display: block; + clear: both; } @@ -79,5 +85,7 @@ hr.k-separator { // Legacy aliases -.k-hbox { @extend .k-hstack; } -.k-vbox { @extend .k-vstack; } +.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; } diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss index 11e0721df07..e861fd40d28 100644 --- a/packages/default/scss/_variables.scss +++ b/packages/default/scss/_variables.scss @@ -83,6 +83,15 @@ $kendo-border-radius-sm: $kendo-border-radius - k-map-get( $kendo-spacing, 0.5 ) $kendo-border-radius-md: $kendo-border-radius !default; $kendo-border-radius-lg: $kendo-border-radius + k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero +$kendo-border-radii: ( + DEFAULT: $kendo-border-radius-md, + 0: 0, + sm: $kendo-border-radius-sm, + md: $kendo-border-radius-md, + lg: $kendo-border-radius-lg, + full: 9999px +) !default; + $kendo-zindex-popup: 1 !default; $kendo-zindex-window: 2 !default; @@ -190,6 +199,53 @@ $kendo-theme-colors: ( ) !default; +// Typography + +/// Base font size across all components. +/// @group typography +$font-size: 14px !default; +$font-size-xs: 10px !default; +$font-size-sm: 12px !default; +$font-size-md: $font-size !default; +$font-size-lg: 16px !default; +$font-size-xl: 20px !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; + +/// Font family across all components. +/// @group typography +$font-family: inherit !default; + +/// Font family for monospaced text. Used for styling the code. +/// @group typography +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default; + +/// Line height used along with $font-size. +/// @group typography +$line-height: k-math-div( 20, 14 ) !default; +$line-height-xs: 1 !default; +$line-height-sm: 1.25 !default; +$line-height-md: $line-height !default; +$line-height-lg: 1.5 !default; +$line-height-em: calc( #{$line-height} * 1em ) !default; + + +// Font weight +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 700 !default; + + +// Letter Spacing +$letter-spacing: null !default; + + // Root styles $kendo-body-bg: $kendo-color-white !default; $kendo-body-text: #424242 !default; @@ -267,13 +323,9 @@ $kendo-disabled-styling: ( ) !default; - // Generic styles // TODO: refactor once we extract drag drop as separate module -$font-size: 14px !default; -$font-family: inherit !default; -$line-height: k-math-div( 20, 14 ) !default; // Header diff --git a/packages/default/scss/action-sheet/_variables.scss b/packages/default/scss/action-sheet/_variables.scss index d5a1d9b7762..ce09c7efe73 100644 --- a/packages/default/scss/action-sheet/_variables.scss +++ b/packages/default/scss/action-sheet/_variables.scss @@ -1,4 +1,5 @@ // Action sheet + $actionsheet-padding-x: null !default; $actionsheet-padding-y: null !default; $actionsheet-width: 360px !default; diff --git a/packages/default/scss/badge/_index.scss b/packages/default/scss/badge/_index.scss index ac781c66f0a..29c5d58e467 100644 --- a/packages/default/scss/badge/_index.scss +++ b/packages/default/scss/badge/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../icons/_index.scss"; diff --git a/packages/default/scss/bottom-navigation/_index.scss b/packages/default/scss/bottom-navigation/_index.scss index 92ed3fd17ea..e37b9c27815 100644 --- a/packages/default/scss/bottom-navigation/_index.scss +++ b/packages/default/scss/bottom-navigation/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../icons/_index.scss"; diff --git a/packages/default/scss/breadcrumb/_variables.scss b/packages/default/scss/breadcrumb/_variables.scss index f9e18871ab8..9decc6736da 100644 --- a/packages/default/scss/breadcrumb/_variables.scss +++ b/packages/default/scss/breadcrumb/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Breadcrumb + $breadcrumb-margin-x: null !default; $breadcrumb-margin-y: null !default; $breadcrumb-padding-x: null !default; diff --git a/packages/default/scss/button/_index.scss b/packages/default/scss/button/_index.scss index f8bd4bc8969..b6ef32746ce 100644 --- a/packages/default/scss/button/_index.scss +++ b/packages/default/scss/button/_index.scss @@ -4,7 +4,6 @@ // Dependencies @import "../badge/_index.scss"; @import "../icons/_index.scss"; -@import "../typography/_variables.scss"; // Component diff --git a/packages/default/scss/calendar/_variables.scss b/packages/default/scss/calendar/_variables.scss index 4acdf91b60c..9cdc33ea055 100644 --- a/packages/default/scss/calendar/_variables.scss +++ b/packages/default/scss/calendar/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Calendar + $calendar-border-width: 1px !default; $calendar-font-family: $font-family !default; $calendar-font-size: $font-size !default; diff --git a/packages/default/scss/captcha/_index.scss b/packages/default/scss/captcha/_index.scss index 058a4d2f13b..ec50e27eb5e 100644 --- a/packages/default/scss/captcha/_index.scss +++ b/packages/default/scss/captcha/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_index.scss"; +// @import "../utils/_index.scss"; @import "../common/_index.scss"; @import "../icons/_index.scss"; @import "../input/_index.scss"; diff --git a/packages/default/scss/card/_index.scss b/packages/default/scss/card/_index.scss index 88dc019c391..2f95d3ab5d6 100644 --- a/packages/default/scss/card/_index.scss +++ b/packages/default/scss/card/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_grid.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_grid.scss"; @import "../action-buttons/_index.scss"; @import "../icons/_index.scss"; @import "../typography/_index.scss"; diff --git a/packages/default/scss/checkbox/_index.scss b/packages/default/scss/checkbox/_index.scss index 8cb597fb591..43dc7943c9f 100644 --- a/packages/default/scss/checkbox/_index.scss +++ b/packages/default/scss/checkbox/_index.scss @@ -2,8 +2,6 @@ // Dependencies -@import "../typography/_variables.scss"; -@import "../list/_variables.scss"; // Component diff --git a/packages/default/scss/checkbox/_variables.scss b/packages/default/scss/checkbox/_variables.scss index 20d6ae5c159..2887f30d658 100644 --- a/packages/default/scss/checkbox/_variables.scss +++ b/packages/default/scss/checkbox/_variables.scss @@ -1,3 +1,6 @@ +@import "../list/_variables.scss"; + + // Checkbox /// Border width of checkbox. diff --git a/packages/default/scss/chip/_index.scss b/packages/default/scss/chip/_index.scss index 7f40fe77778..832c0dab47c 100644 --- a/packages/default/scss/chip/_index.scss +++ b/packages/default/scss/chip/_index.scss @@ -3,7 +3,6 @@ // Dependencies @import "../icons/_index.scss"; -@import "../button/_variables.scss"; // Component diff --git a/packages/default/scss/chip/_variables.scss b/packages/default/scss/chip/_variables.scss index 7a446c68023..d3c8a0f0bb1 100644 --- a/packages/default/scss/chip/_variables.scss +++ b/packages/default/scss/chip/_variables.scss @@ -1,3 +1,6 @@ +@import "../button/_variables.scss"; + + // Chip /// Width of the border around the button. diff --git a/packages/default/scss/colorgradient/_index.scss b/packages/default/scss/colorgradient/_index.scss index 82b79ddc4d1..be92ee3278c 100644 --- a/packages/default/scss/colorgradient/_index.scss +++ b/packages/default/scss/colorgradient/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_spacer.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_spacer.scss"; @import "../icons/_index.scss"; @import "../button/_index.scss"; @import "../slider/_index.scss"; diff --git a/packages/default/scss/colorpalette/_index.scss b/packages/default/scss/colorpalette/_index.scss index 72afe33d581..b01214ca47a 100644 --- a/packages/default/scss/colorpalette/_index.scss +++ b/packages/default/scss/colorpalette/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; +// @import "../utils/_flex.scss"; // Component diff --git a/packages/default/scss/common/_index.scss b/packages/default/scss/common/_index.scss index e04c27c6f89..731ca7c8261 100644 --- a/packages/default/scss/common/_index.scss +++ b/packages/default/scss/common/_index.scss @@ -1,5 +1,3 @@ -@import "../typography/_variables.scss"; - @import "./_base.scss"; @import "./_animations.scss"; @import "./_resizing.scss"; diff --git a/packages/default/scss/dataviz/_index.scss b/packages/default/scss/dataviz/_index.scss index c8a5ae4fbcc..1a6e25bf4ed 100644 --- a/packages/default/scss/dataviz/_index.scss +++ b/packages/default/scss/dataviz/_index.scss @@ -5,7 +5,6 @@ @import "../common/_index.scss"; @import "../popup/_index.scss"; @import "../tooltip/_index.scss"; -@import "../button/_variables.scss"; // Component diff --git a/packages/default/scss/dataviz/_theme.scss b/packages/default/scss/dataviz/_theme.scss index a69a69b01ec..cdf0e296fdf 100644 --- a/packages/default/scss/dataviz/_theme.scss +++ b/packages/default/scss/dataviz/_theme.scss @@ -87,6 +87,8 @@ .k-handle { cursor: e-resize; + + // TODO: refactor and remove button dependency @include fill( $kendo-button-text, $kendo-button-bg, diff --git a/packages/default/scss/dataviz/_variables.scss b/packages/default/scss/dataviz/_variables.scss index 2b0aa93375b..b876b389ba7 100644 --- a/packages/default/scss/dataviz/_variables.scss +++ b/packages/default/scss/dataviz/_variables.scss @@ -1,4 +1,8 @@ +@import "../button/_variables.scss"; + + // Chart + /// The first base series color and its light and dark shades. /// @group charts $series-a: #ff6358 !default; diff --git a/packages/default/scss/dropdowngrid/_index.scss b/packages/default/scss/dropdowngrid/_index.scss index e459b0d1cf7..4e0d03ff53f 100644 --- a/packages/default/scss/dropdowngrid/_index.scss +++ b/packages/default/scss/dropdowngrid/_index.scss @@ -3,17 +3,14 @@ // Dependencies @import "../common/_index.scss"; -@import "../table/_index.scss"; -@import "../input/_index.scss"; @import "../floating-label/_index.scss"; -@import "../combobox/_index.scss"; +@import "../icons/_index.scss"; +@import "../input/_index.scss"; @import "../popup/_index.scss"; -@import "../toolbar/_variables.scss"; -@import "../menu/_variables.scss"; -@import "../chip/_variables.scss"; -@import "../grid/_variables.scss"; +@import "../table/_index.scss"; // Component +@import "./_variables.scss"; @import "./_layout.scss"; @import "./_theme.scss"; diff --git a/packages/default/scss/dropdowngrid/_variables.scss b/packages/default/scss/dropdowngrid/_variables.scss new file mode 100644 index 00000000000..801f9dc9831 --- /dev/null +++ b/packages/default/scss/dropdowngrid/_variables.scss @@ -0,0 +1 @@ +// Dropdown grid diff --git a/packages/default/scss/dropzone/_variables.scss b/packages/default/scss/dropzone/_variables.scss index f455c8a4c0d..f5a20e5c300 100644 --- a/packages/default/scss/dropzone/_variables.scss +++ b/packages/default/scss/dropzone/_variables.scss @@ -1,4 +1,5 @@ // Dropzone + $dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default; $dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default; $dropzone-border-width: 1px !default; diff --git a/packages/default/scss/expansion-panel/_index.scss b/packages/default/scss/expansion-panel/_index.scss index c2e2f6da7c1..91ad9f3e79a 100644 --- a/packages/default/scss/expansion-panel/_index.scss +++ b/packages/default/scss/expansion-panel/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_display.scss"; -@import "../utils/_spacer.scss"; +// @import "../utils/_display.scss"; +// @import "../utils/_spacer.scss"; @import "../icons/_index.scss"; @import "../list/_index.scss"; diff --git a/packages/default/scss/fab/_index.scss b/packages/default/scss/fab/_index.scss index 73ff9ff6f3e..428a2aa05c8 100644 --- a/packages/default/scss/fab/_index.scss +++ b/packages/default/scss/fab/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../icons/_index.scss"; @import "../button/_index.scss"; @import "../badge/_index.scss"; diff --git a/packages/default/scss/forms/_index.scss b/packages/default/scss/forms/_index.scss index 00de1b10a12..ae13a53bed8 100644 --- a/packages/default/scss/forms/_index.scss +++ b/packages/default/scss/forms/_index.scss @@ -3,12 +3,8 @@ // Dependencies // TODO: extract variables @import "../common/_index.scss"; -@import "../tooltip/_variables.scss"; -@import "../button/_variables.scss"; -@import "../input/_variables.scss"; @import "../toolbar/_index.scss"; @import "../action-buttons/_index.scss"; -@import "../window/_variables.scss"; // Component diff --git a/packages/default/scss/forms/_layout.scss b/packages/default/scss/forms/_layout.scss index 055fcf7d33a..2c7f3e548f0 100644 --- a/packages/default/scss/forms/_layout.scss +++ b/packages/default/scss/forms/_layout.scss @@ -287,6 +287,7 @@ width: $kendo-inline-form-element-width; text-align: right; line-height: $line-height; + // TODO: do we need the input variable? padding: calc( #{$kendo-padding-md-y} + #{$kendo-input-border-width} ) 0; padding-right: $kendo-padding-lg-x; align-self: center; @@ -334,12 +335,14 @@ // Action buttons .k-popup-edit-form > .k-actions, .k-edit-form-container .k-actions { + // TODO: refactor margin: k-map-get( $kendo-spacing, 4 ) (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y); } .k-edit-label { margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0; + // TODO: do we need the input variable? padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0; width: 30%; line-height: $kendo-form-line-height; @@ -355,6 +358,7 @@ position: relative; &.k-no-editor { + // TODO: do we need the input variable? padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0; } } diff --git a/packages/default/scss/forms/_variables.scss b/packages/default/scss/forms/_variables.scss index c33655fe062..1ef3723e655 100644 --- a/packages/default/scss/forms/_variables.scss +++ b/packages/default/scss/forms/_variables.scss @@ -1,4 +1,11 @@ +@import "../input/_variables.scss"; +@import "../tooltip/_variables.scss"; +@import "../typography/_variables.scss"; +@import "../window/_variables.scss"; + + // Forms + $kendo-form-spacer: $kendo-padding-md-x * 2 !default; $kendo-form-font-size: $font-size !default; diff --git a/packages/default/scss/gantt/_index.scss b/packages/default/scss/gantt/_index.scss index 6a29fe4f83a..9232635ea9c 100644 --- a/packages/default/scss/gantt/_index.scss +++ b/packages/default/scss/gantt/_index.scss @@ -11,7 +11,7 @@ @import "../window/_index.scss"; @import "../splitter/_index.scss"; @import "../treelist/_index.scss"; -@import "../table/_variables.scss"; + // Component @import "./_variables.scss"; diff --git a/packages/default/scss/gantt/_variables.scss b/packages/default/scss/gantt/_variables.scss index fb455b375d4..4ae4bc0d9d1 100644 --- a/packages/default/scss/gantt/_variables.scss +++ b/packages/default/scss/gantt/_variables.scss @@ -1,4 +1,8 @@ +@import "../table/_variables.scss"; + + // Gantt + $gantt-border-width: 1px !default; $gantt-font-family: $font-family !default; $gantt-font-size: $font-size !default; diff --git a/packages/default/scss/grid/_index.scss b/packages/default/scss/grid/_index.scss index cfc4689b0f2..ea2cd27a62b 100644 --- a/packages/default/scss/grid/_index.scss +++ b/packages/default/scss/grid/_index.scss @@ -22,8 +22,8 @@ @import "../pager/_index.scss"; @import "../chip/_index.scss"; @import "../skeleton/_index.scss"; -@import "../utils/_float.scss"; -@import "../utils/_spacer.scss"; +// @import "../utils/_float.scss"; +// @import "../utils/_spacer.scss"; @import "../list/_index.scss"; @import "../table/_index.scss"; diff --git a/packages/default/scss/listview/_index.scss b/packages/default/scss/listview/_index.scss index 5a72cedb6d5..228b79abea1 100644 --- a/packages/default/scss/listview/_index.scss +++ b/packages/default/scss/listview/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_grid.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_grid.scss"; @import "../pager/_index.scss"; @import "../icons/_index.scss"; diff --git a/packages/default/scss/loader/_variables.scss b/packages/default/scss/loader/_variables.scss index 3ee48d73da5..0fd940d5152 100644 --- a/packages/default/scss/loader/_variables.scss +++ b/packages/default/scss/loader/_variables.scss @@ -1,4 +1,5 @@ // Loader + $kendo-loader-segment-border-radius: 50% !default; $kendo-loader-segment-size-sm: k-map-get( $kendo-spacing, 1 ) !default; $kendo-loader-segment-size-md: k-map-get( $kendo-spacing, 2 ) !default; diff --git a/packages/default/scss/map/_index.scss b/packages/default/scss/map/_index.scss index 10bcb60b424..ff33afef70e 100644 --- a/packages/default/scss/map/_index.scss +++ b/packages/default/scss/map/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../button/_index.scss"; @import "../scroller/_index.scss"; @import "../icons/_index.scss"; diff --git a/packages/default/scss/menu/_variables.scss b/packages/default/scss/menu/_variables.scss index 316892301fe..f44020295e3 100644 --- a/packages/default/scss/menu/_variables.scss +++ b/packages/default/scss/menu/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Menu + $menu-padding-x: 0px !default; $menu-padding-y: 0px !default; $menu-border-width: 0px !default; diff --git a/packages/default/scss/multiselect/_index.scss b/packages/default/scss/multiselect/_index.scss index 58a4cabf3af..7e7acf74fb0 100644 --- a/packages/default/scss/multiselect/_index.scss +++ b/packages/default/scss/multiselect/_index.scss @@ -3,7 +3,6 @@ // Dependencies @import "../common/_index.scss"; -@import "../forms/_variables.scss"; @import "../button/_index.scss"; @import "../input/_index.scss"; @import "../chip/_index.scss"; diff --git a/packages/default/scss/orgchart/_index.scss b/packages/default/scss/orgchart/_index.scss index d9668fafdc2..62a230602c8 100644 --- a/packages/default/scss/orgchart/_index.scss +++ b/packages/default/scss/orgchart/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_index.scss"; +// @import "../utils/_index.scss"; @import "../common/_index.scss"; @import "../icons/_index.scss"; @import "../forms/_index.scss"; diff --git a/packages/default/scss/pager/_index.scss b/packages/default/scss/pager/_index.scss index 77fa9ddf949..0749af28ce2 100644 --- a/packages/default/scss/pager/_index.scss +++ b/packages/default/scss/pager/_index.scss @@ -5,8 +5,6 @@ @import "../common/_index.scss"; @import "../dropdownlist/_index.scss"; @import "../icons/_index.scss"; -@import "../toolbar/_variables.scss"; -@import "../list/_index.scss"; @import "../button/_index.scss"; diff --git a/packages/default/scss/pager/_variables.scss b/packages/default/scss/pager/_variables.scss index d20547d01c3..329612e678f 100644 --- a/packages/default/scss/pager/_variables.scss +++ b/packages/default/scss/pager/_variables.scss @@ -1,3 +1,6 @@ +@import "../list/_variables.scss"; + + // Pager /// Horizontal padding of the pager according to the pager size. @@ -57,6 +60,7 @@ $kendo-pager-focus-shadow: $kendo-focus-shadow !default; /// Spacing between the pager sections. /// @group pager $kendo-pager-section-spacing: k-map-get( $kendo-spacing, 4 ) !default; + /// Border width of the pager items. /// @group pager $kendo-pager-item-border-width: 0px !default; diff --git a/packages/default/scss/panelbar/_variables.scss b/packages/default/scss/panelbar/_variables.scss index cb5a3601107..a4083c5dab0 100644 --- a/packages/default/scss/panelbar/_variables.scss +++ b/packages/default/scss/panelbar/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Panelbar + $panelbar-padding-x: 0px !default; $panelbar-padding-y: 0px !default; $panelbar-font-family: $font-family !default; diff --git a/packages/default/scss/pdf-viewer/_index.scss b/packages/default/scss/pdf-viewer/_index.scss index 9ac4d66bba5..079c371f879 100644 --- a/packages/default/scss/pdf-viewer/_index.scss +++ b/packages/default/scss/pdf-viewer/_index.scss @@ -3,8 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_index.scss"; -@import "../button/_variables.scss"; +// @import "../utils/_index.scss"; @import "../combobox/_index.scss"; @import "../toolbar/_index.scss"; @import "../dialog/_index.scss"; diff --git a/packages/default/scss/pdf-viewer/_variables.scss b/packages/default/scss/pdf-viewer/_variables.scss index 8ea70208e37..483298bf3c8 100644 --- a/packages/default/scss/pdf-viewer/_variables.scss +++ b/packages/default/scss/pdf-viewer/_variables.scss @@ -1,4 +1,5 @@ // PDF viewer + $pdf-viewer-border-width: 1px !default; $pdf-viewer-font-family: $font-family !default; $pdf-viewer-font-size: $font-size !default; diff --git a/packages/default/scss/pivotgrid/_index.scss b/packages/default/scss/pivotgrid/_index.scss index 7a46599aaed..40ecdaaf1b7 100644 --- a/packages/default/scss/pivotgrid/_index.scss +++ b/packages/default/scss/pivotgrid/_index.scss @@ -7,12 +7,12 @@ @import "../treeview/_index.scss"; @import "../grid/_index.scss"; @import "../icons/_index.scss"; -@import "../utils/_spacer.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_grid.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_spacer.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_grid.scss"; +// @import "../utils/_position.scss"; @import "../list/_index.scss"; -@import "../table/_variables.scss"; + // Component @import "./_variables.scss"; diff --git a/packages/default/scss/pivotgrid/_variables.scss b/packages/default/scss/pivotgrid/_variables.scss index de1cef70885..8386186fe9f 100644 --- a/packages/default/scss/pivotgrid/_variables.scss +++ b/packages/default/scss/pivotgrid/_variables.scss @@ -1,3 +1,6 @@ +@import "../table/_variables.scss"; + + // Pivot grid $pivotgrid-spacer: k-map-get( $kendo-spacing, 4 ) !default; $pivotgrid-padding-x: null !default; diff --git a/packages/default/scss/radio/_index.scss b/packages/default/scss/radio/_index.scss index cd8b651613f..43dc7943c9f 100644 --- a/packages/default/scss/radio/_index.scss +++ b/packages/default/scss/radio/_index.scss @@ -2,9 +2,6 @@ // Dependencies -@import "../typography/_variables.scss"; -@import "../list/_variables.scss"; -@import "../checkbox/_variables.scss"; // Component diff --git a/packages/default/scss/radio/_variables.scss b/packages/default/scss/radio/_variables.scss index b5a5ecd6b11..56da5920e68 100644 --- a/packages/default/scss/radio/_variables.scss +++ b/packages/default/scss/radio/_variables.scss @@ -1,3 +1,7 @@ +@import "../list/_variables.scss"; +@import "../checkbox/_variables.scss"; + + // Radio button /// Border radius of radio button. diff --git a/packages/default/scss/rating/_variables.scss b/packages/default/scss/rating/_variables.scss index b2e9759ffb3..6b6baef7000 100644 --- a/packages/default/scss/rating/_variables.scss +++ b/packages/default/scss/rating/_variables.scss @@ -1,4 +1,5 @@ // Rating + $rating-font-family: $font-family !default; $rating-font-size: $font-size !default; $rating-line-height: $line-height !default; diff --git a/packages/default/scss/switch/_index.scss b/packages/default/scss/switch/_index.scss index 5f1651c1b41..3b6b57176dc 100644 --- a/packages/default/scss/switch/_index.scss +++ b/packages/default/scss/switch/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_border.scss"; +// @import "../utils/_border.scss"; // Component diff --git a/packages/default/scss/table/_index.scss b/packages/default/scss/table/_index.scss index aeff2815a1b..f509a25f02d 100644 --- a/packages/default/scss/table/_index.scss +++ b/packages/default/scss/table/_index.scss @@ -3,17 +3,9 @@ // Dependencies @import "../common/_index.scss"; -@import "../input/_index.scss"; -@import "../floating-label/_index.scss"; -@import "../combobox/_index.scss"; -@import "../popup/_index.scss"; -@import "../toolbar/_variables.scss"; -@import "../menu/_variables.scss"; -@import "../list/_variables.scss"; // Component @import "./_variables.scss"; @import "./_layout.scss"; @import "./_theme.scss"; - diff --git a/packages/default/scss/table/_variables.scss b/packages/default/scss/table/_variables.scss index f4def250f1c..2572ce7129e 100644 --- a/packages/default/scss/table/_variables.scss +++ b/packages/default/scss/table/_variables.scss @@ -1,3 +1,6 @@ +@import "../list/_variables.scss"; + + // Table /// The width of the table border. diff --git a/packages/default/scss/tabstrip/_variables.scss b/packages/default/scss/tabstrip/_variables.scss index bcb7b8ccef1..66933ad27b9 100644 --- a/packages/default/scss/tabstrip/_variables.scss +++ b/packages/default/scss/tabstrip/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Tabstrip + $tabstrip-wrapper-padding-x: 0px !default; $tabstrip-wrapper-padding-y: 0px !default; $tabstrip-wrapper-border-width: 0px !default; diff --git a/packages/default/scss/taskboard/_index.scss b/packages/default/scss/taskboard/_index.scss index bb05a0ac99a..2fae76a3fa6 100644 --- a/packages/default/scss/taskboard/_index.scss +++ b/packages/default/scss/taskboard/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_index.scss"; +// @import "../utils/_index.scss"; @import "../common/_index.scss"; @import "../icons/_index.scss"; @import "../forms/_index.scss"; diff --git a/packages/default/scss/timeselector/_theme.scss b/packages/default/scss/timeselector/_theme.scss index 083f0873c7b..ac497e0c8d0 100644 --- a/packages/default/scss/timeselector/_theme.scss +++ b/packages/default/scss/timeselector/_theme.scss @@ -15,9 +15,11 @@ .k-time-selector-header { .k-time-now { + // TODO: use a variable color: $link-text; } .k-time-now:hover { + // TODO: use a variable color: $link-hover-text; } } diff --git a/packages/default/scss/timeselector/_variables.scss b/packages/default/scss/timeselector/_variables.scss index 2cad549ba58..b386bb60a2a 100644 --- a/packages/default/scss/timeselector/_variables.scss +++ b/packages/default/scss/timeselector/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Time selector + $time-selector-border-width: 1px !default; $time-selector-font-family: $font-family !default; $time-selector-font-size: $font-size !default; diff --git a/packages/default/scss/treelist/_index.scss b/packages/default/scss/treelist/_index.scss index 1fc93f158bc..f5a0ef3aa76 100644 --- a/packages/default/scss/treelist/_index.scss +++ b/packages/default/scss/treelist/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_text.scss"; +// @import "../utils/_text.scss"; @import "../grid/_index.scss"; @import "../icons/_index.scss"; diff --git a/packages/default/scss/treeview/_variables.scss b/packages/default/scss/treeview/_variables.scss index 8d888a507ba..bcde36bcd87 100644 --- a/packages/default/scss/treeview/_variables.scss +++ b/packages/default/scss/treeview/_variables.scss @@ -1,3 +1,6 @@ +@import "../typography/_variables.scss"; + + // Treeview /// Font family of the treeview component. diff --git a/packages/default/scss/typography/_index.scss b/packages/default/scss/typography/_index.scss index f509a25f02d..43dc7943c9f 100644 --- a/packages/default/scss/typography/_index.scss +++ b/packages/default/scss/typography/_index.scss @@ -2,7 +2,6 @@ // Dependencies -@import "../common/_index.scss"; // Component diff --git a/packages/default/scss/typography/_variables.scss b/packages/default/scss/typography/_variables.scss index ca8b1f056cb..a05d214c282 100644 --- a/packages/default/scss/typography/_variables.scss +++ b/packages/default/scss/typography/_variables.scss @@ -4,42 +4,6 @@ /// @group typography $enable-typography: false !default; -/// Base font size across all components. -/// @group typography -$font-size: 14px !default; -$font-size-xs: 10px !default; -$font-size-sm: 12px !default; -$font-size-md: $font-size !default; -$font-size-lg: 16px !default; -$font-size-xl: 20px !default; - -/// Font family across all components. -/// @group typography -$font-family: inherit !default; - -/// Font family for monospaced text. Used for styling the code. -/// @group typography -$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default; - -/// Line height used along with $font-size. -/// @group typography -$line-height: k-math-div( 20, 14 ) !default; -$line-height-xs: 1 !default; -$line-height-sm: 1.25 !default; -$line-height-md: $line-height !default; -$line-height-lg: 1.5 !default; -$line-height-em: calc( #{$line-height} * 1em ) !default; - - -// Font weight -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 700 !default; - - -// Letter Spacing -$letter-spacing: null !default; - // Headings $h1-font-size: ($font-size * 3) !default; diff --git a/packages/default/scss/upload/_index.scss b/packages/default/scss/upload/_index.scss index c94cc6d4629..cb227e333e5 100644 --- a/packages/default/scss/upload/_index.scss +++ b/packages/default/scss/upload/_index.scss @@ -7,7 +7,6 @@ @import "../action-buttons/_index.scss"; @import "../icons/_index.scss"; @import "../dropzone/_index.scss"; -@import "../toolbar/_variables.scss"; // Component diff --git a/packages/default/scss/upload/_variables.scss b/packages/default/scss/upload/_variables.scss index 6935deab11e..ee944d73a14 100644 --- a/packages/default/scss/upload/_variables.scss +++ b/packages/default/scss/upload/_variables.scss @@ -1,4 +1,5 @@ // Upload + $kendo-upload-border-width: 1px !default; $kendo-upload-font-family: $font-family !default; $kendo-upload-font-size: $font-size !default; diff --git a/packages/default/scss/utils/_aspect-ratio.scss b/packages/default/scss/utils/_aspect-ratio.scss deleted file mode 100644 index 262a4807eb4..00000000000 --- a/packages/default/scss/utils/_aspect-ratio.scss +++ /dev/null @@ -1,32 +0,0 @@ -@include exports( "utils/aspect-ratio" ) { - - // Aspect-ratio documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio. - - /// This is equivalent to `aspect-ratio: auto;`. Replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. Size calculations involving intrinsic aspect ratio always work with the content box dimensions. - /// @name .k-aspect-ratio-auto - /// @group aspect-ratio - /// @contextType css - _ {} - - /// This is equivalent to `aspect-ratio: 1;`. The box's preferred aspect ratio is the specified ratio of 1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing. - /// @name .k-aspect-ratio-1 - /// @group aspect-ratio - /// @contextType css - _ {} - - // Aspect ratio utility classes - $utils-aspect-ratio: ( - auto, - 1 - ) !default; - - @if $utils-aspect-ratio { - @each $aspect-ratio in $utils-aspect-ratio { - .k-aspect-ratio-#{$aspect-ratio} { aspect-ratio: $aspect-ratio; } - - // sass-lint:disable-block no-important - .\!k-aspect-ratio-#{$aspect-ratio} { aspect-ratio: $aspect-ratio !important; } - } - } - -} diff --git a/packages/default/scss/utils/_border.scss b/packages/default/scss/utils/_border.scss deleted file mode 100644 index 5777d7ae09e..00000000000 --- a/packages/default/scss/utils/_border.scss +++ /dev/null @@ -1,109 +0,0 @@ -@include exports( "utils/border" ) { - - // Border utility classes - // sass-lint:disable-block no-important - - $utils-border-sides: ( - default: border-width, - top: border-top-width, - right: border-right-width, - bottom: border-bottom-width, - left: border-left-width, - x: ( border-left-width, border-right-width ), - y: ( border-top-width, border-bottom-width ) - ) !default; - - $utils-border-style: ( - solid, - dashed, - dotted, - double, - none - ) !default; - - $utils-border-width: ( - default: 1px, - 0: 0 - ) !default; - - $utils-border-color: $kendo-theme-colors !default; - - $utils-border-radius-sides: ( - default: border-radius, - top: ( border-top-left-radius, border-top-right-radius ), - right: ( border-top-right-radius, border-bottom-right-radius ), - bottom: ( border-bottom-left-radius, border-bottom-right-radius ), - left: ( border-bottom-left-radius, border-top-left-radius ), - top-left: border-top-left-radius, - top-right: border-top-right-radius, - bottom-left: border-bottom-left-radius, - bottom-right: border-bottom-right-radius - ) !default; - - $utils-border-radius: ( - default: $kendo-border-radius-md, - 0: 0, - sm: $kendo-border-radius-sm, - md: $kendo-border-radius-md, - lg: $kendo-border-radius-lg, - full: 9999px - ) !default; - - - @if $utils-border-sides and $utils-border-width { - @each $side, $props in $utils-border-sides { - - $_selector-base: if( $side == default, "border", "border-#{$side}" ); - - @each $width, $value in $utils-border-width { - $_selector-suffix: if( $width == default, "", "-#{$width}" ); - - .k-#{$_selector-base}#{$_selector-suffix} { - @each $prop in $props { - #{$prop}: $value !important; - } - } - } - } - } - - @if $utils-border-style { - @each $style in $utils-border-style { - .k-border-#{$style} { - border-style: $style !important; - } - } - } - - @if $utils-border-color { - @each $name, $color in $utils-border-color { - .k-border-#{$name} { - border-color: $color !important; - } - } - } - - @if $utils-border-radius-sides and $utils-border-radius { - @each $side, $props in $utils-border-radius-sides { - - $_selector-base: if( $side == default, "rounded", "rounded-#{$side}" ); - - @each $radius, $value in $utils-border-radius { - $_selector-suffix: if( $radius == default, "", "-#{$radius}" ); - - .k-#{$_selector-base}#{$_selector-suffix} { - @each $prop in $props { - #{$prop}: $value; - } - } - .\!k-#{$_selector-base}#{$_selector-suffix} { - @each $prop in $props { - #{$prop}: $value !important; - } - } - } - - } - } - -} diff --git a/packages/default/scss/utils/_display.scss b/packages/default/scss/utils/_display.scss deleted file mode 100644 index 1f0169bf0e7..00000000000 --- a/packages/default/scss/utils/_display.scss +++ /dev/null @@ -1,41 +0,0 @@ -@include exports( "utils/display" ) { - - // sass-lint:disable-block no-important - // stylelint-disable block-opening-brace-space-before - - // Display documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/display. - - /// 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. - /// @name .k-display-inline - /// @group display - .k-display-inline { display: inline !important; } - /// 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. - /// @name .k-display-block - /// @group display - .k-display-block { display: block !important; } - /// 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). - /// @name .k-display-inline-block - /// @group display - .k-display-inline-block { display: inline-block !important; } - /// This is equivalent to `display: flex;`. The element behaves like a block element and lays out its content according to the flexbox model. - /// @name .k-display-flex - /// @group display - .k-display-flex { display: flex !important; } - /// This is equivalent to `display: inline-flex;`. The element behaves like an inline element and lays out its content according to the flexbox model. - /// @name .k-display-inline-flex - /// @group display - .k-display-inline-flex { display: inline-flex !important; } - /// This is equivalent to `display: table;`. These elements behave like HTML `` elements. It defines a block-level box. - /// @name .k-display-table - /// @group display - .k-display-table { display: table !important; } - /// This is equivalent to `display: inline-table;`. The inline-table value does not have a direct mapping in HTML. It behaves like an HTML `
` element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context. - /// @name .k-display-inline-table - /// @group display - .k-display-inline-table { display: inline-table !important; } - /// 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. - /// @name .k-display-none - /// @group display - .k-display-none { display: none !important; } - -} diff --git a/packages/default/scss/utils/_flex.scss b/packages/default/scss/utils/_flex.scss deleted file mode 100644 index cb2a9e60f79..00000000000 --- a/packages/default/scss/utils/_flex.scss +++ /dev/null @@ -1,189 +0,0 @@ -@include exports( "utils/flex" ) { - - // stylelint-disable block-opening-brace-space-before - - // Flex documentation sourced from https://css-tricks.com/almanac/properties/f/flex/. - - /// This is equivalent to `display: flex`. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns. - /// @name .k-d-flex - /// @group flex-layout - .k-d-flex { display: flex; } - .\!k-d-flex { display: flex !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `display: inline-flex`. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns. - /// @name .k-d-inline-flex - /// @group flex-layout - .k-d-inline-flex { display: inline-flex; } - .\!k-d-inline-flex { display: inline-flex !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `display: inline-flex` and `flex-direction: row`. - /// @name .k-d-flex-row - /// @group flex-layout - .k-d-flex-row { @extend .k-d-flex, .k-flex-row; } - .\!k-d-flex-row { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format - /// This is equivalent to `display: inline-flex` and `flex-direction: column`. - /// @name .k-d-flex-col - /// @group flex-layout - .k-d-flex-col { @extend .k-d-flex, .k-flex-col; } - .\!k-d-flex-col { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format - /// This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`. - /// @name .k-flex-row - /// @group flex-layout - .k-flex-row { flex-direction: row; } - .\!k-flex-row { flex-direction: row !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex-direction: row-reverse`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in `ltr`; left to right in `rtl`. - /// @name .k-flex-row-reverse - /// @group flex-layout - .k-flex-row-reverse { flex-direction: row-reverse; } - .\!k-flex-row-reverse { flex-direction: row-reverse !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex-direction: column`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom. - /// @name .k-flex-col - /// @group flex-layout - .k-flex-col { flex-direction: column; } - .\!k-flex-col { flex-direction: column !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex-direction: column-reverse`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top. - /// @name .k-flex-col-reverse - /// @group flex-layout - .k-flex-col-reverse { flex-direction: column-reverse; } - .\!k-flex-col-reverse { flex-direction: column-reverse !important; } // sass-lint:disable-line no-important class-name-format - - - // Aliases - .k-flex-column { @extend .k-flex-col; } - .k-flex-column-reverse { @extend .k-flex-col-reverse; } - - - // Flex wrap - - /// This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom. - /// @name .k-flex-wrap - /// @group flex-layout - .k-flex-wrap { flex-wrap: wrap; } - .\!k-flex-wrap { flex-wrap: wrap !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex-wrap: nowrap`. All flex items will be on one line. - /// @name .k-flex-nowrap - /// @group flex-layout - .k-flex-nowrap { flex-wrap: nowrap; } - .\!k-flex-nowrap { flex-wrap: nowrap !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex-wrap: wrap-reverse`. It allows flex items to wrap as needed onto multiple lines, from bottom to top. - /// @name .k-flex-wrap-reverse - /// @group flex-layout - .k-flex-wrap-reverse { flex-wrap: wrap-reverse; } - .\!k-flex-wrap-reverse { flex-wrap: wrap-reverse !important; } // sass-lint:disable-line no-important class-name-format - - - // Flex, shrink, grow, - - /// This is the same as `flex: initial;` and the shorthand for the default value: `flex: 0 1 auto`. It sizes the item based on its `width`/`height` properties (or its content if not set). It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or `auto` margins can be used to align flex items along the main axis. - /// @name .k-flex-initial - /// @group flex-layout - .k-flex-initial { flex: 0 1 auto; } - .\!k-flex-initial { flex: 0 1 auto !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex: 1 1 0%`. It sizes the item not based on its `width`/`height` properties, but based on the available space. This is similar to `flex: 1 1 auto` execpt it is allowed to shrink beyond its initial size. - /// @name .k-flex-1 - /// @group flex-layout - .k-flex-1 { flex: 1 1 0%; } - .\!k-flex-1 { flex: 1 1 0% !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex: 1 1 auto`. Beware, this is not the default value. It sizes the item based on its `width`/`height` properties, but makes it fully flexible so that they absorb any extra space along the main axis. If all items are either `flex: auto`, `flex: initial`, or `flex: none`, any remaining space after the items have been sized will be distributed evenly to the items with `flex: auto`. - /// @name .k-flex-auto - /// @group flex-layout - .k-flex-auto { flex: 1 1 auto; } - .\!k-flex-auto { flex: 1 1 auto !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex: 0 0 auto`. It sizes the item according to its `width`/`height` properties, but makes it fully inflexible. This is similar to `flex: initial` except it is not allowed to shrink, even in an overflow situation. - /// @name .k-flex-none - /// @group flex-layout - .k-flex-none { flex: none; } - .\!k-flex-none { flex: none !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex-grow: 1`. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. - /// @name .k-flex-grow - /// @group flex-layout - .k-flex-grow { flex-grow: 1; } - .\!k-flex-grow { flex-grow: 1 !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex-grow: 0`. The item will not grow. - /// @name .k-flex-grow-0 - /// @group flex-layout - .k-flex-grow-0 { flex-grow: 0; } - .\!k-flex-grow-0 { flex-grow: 0 !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex-shrink: 1`. It determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row. - /// @name .k-flex-shrink - /// @group flex-layout - .k-flex-shrink { flex-shrink: 1; } - .\!k-flex-shrink { flex-shrink: 1 !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex-shrink: 0`. The item will not shrink. - /// @name .k-flex-shrink-0 - /// @group flex-layout - .k-flex-shrink-0 { flex-shrink: 0; } - .\!k-flex-shrink-0 { flex-shrink: 0 !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex-basis: auto`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It sizes the element according to its size property. - /// @name .k-flex-basis-auto - /// @group flex-layout - .k-flex-basis-auto { flex-basis: auto; } - .\!k-flex-basis-auto { flex-basis: auto !important; } // sass-lint:disable-line no-important class-name-format - /// This is equivalent to `flex-basis: 0`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It disregards the element' size property. - /// @name .k-flex-basis-0 - /// @group flex-layout - .k-flex-basis-0 { flex-basis: 0%; } - .\!k-flex-basis-0 { flex-basis: 0% !important; } // sass-lint:disable-line no-important class-name-format - - - // Flex align - .k-align-items-start { align-items: flex-start; } - .\!k-align-items-start { align-items: flex-start !important; } // sass-lint:disable-line no-important class-name-format - .k-align-items-end { align-items: flex-end; } - .\!k-align-items-end { align-items: flex-end !important; } // sass-lint:disable-line no-important class-name-format - .k-align-items-center { align-items: center; } - .\!k-align-items-center { align-items: center !important; } // sass-lint:disable-line no-important class-name-format - .k-align-items-stretch { align-items: stretch; } - .\!k-align-items-stretch { align-items: stretch !important; } // sass-lint:disable-line no-important class-name-format - .k-align-items-baseline { align-items: baseline; } - .\!k-align-items-baseline { align-items: baseline !important; } // sass-lint:disable-line no-important class-name-format - - .k-align-content-start { align-content: flex-start; } - .\!k-align-content-start { align-content: flex-start !important; } // sass-lint:disable-line no-important class-name-format - .k-align-content-end { align-content: flex-end; } - .\!k-align-content-end { align-content: flex-end !important; } // sass-lint:disable-line no-important class-name-format - .k-align-content-center { align-content: center; } - .\!k-align-content-center { align-content: center !important; } // sass-lint:disable-line no-important class-name-format - .k-align-content-stretch { align-content: stretch; } - .\!k-align-content-stretch { align-content: stretch !important; } // sass-lint:disable-line no-important class-name-format - .k-align-content-baseline { align-content: baseline; } - .\!k-align-content-baseline { align-content: baseline !important; } // sass-lint:disable-line no-important class-name-format - - .k-align-self-start { align-self: flex-start; } - .\!k-align-self-start { align-self: flex-start !important; } // sass-lint:disable-line no-important class-name-format - .k-align-self-end { align-self: flex-end; } - .\!k-align-self-end { align-self: flex-end !important; } // sass-lint:disable-line no-important class-name-format - .k-align-self-center { align-self: center; } - .\!k-align-self-center { align-self: center !important; } // sass-lint:disable-line no-important class-name-format - .k-align-self-stretch { align-self: stretch; } - .\!k-align-self-stretch { align-self: stretch !important; } // sass-lint:disable-line no-important class-name-format - .k-align-self-baseline { align-self: baseline; } - .\!k-align-self-baseline { align-self: baseline !important; } // sass-lint:disable-line no-important class-name-format - - - // Justify content - .k-justify-content-start { justify-content: flex-start; } - .\!k-justify-content-start { justify-content: flex-start !important; } // sass-lint:disable-line no-important class-name-format - .k-justify-content-end { justify-content: flex-end; } - .\!k-justify-content-end { justify-content: flex-end !important; } // sass-lint:disable-line no-important class-name-format - .k-justify-content-center { justify-content: center; } - .\!k-justify-content-center { justify-content: center !important; } // sass-lint:disable-line no-important class-name-format - .k-justify-content-between { justify-content: space-between; } - .\!k-justify-content-between { justify-content: space-between !important; } // sass-lint:disable-line no-important class-name-format - .k-justify-content-around { justify-content: space-around; } - .\!k-justify-content-around { justify-content: space-around !important; } // sass-lint:disable-line no-important class-name-format - .k-justify-content-evenly { justify-content: space-evenly; } - .\!k-justify-content-evenly { justify-content: space-evenly !important; } // sass-lint:disable-line no-important class-name-format - .k-justify-content-stretch > * { flex: 1 0 0%; } - .\!k-justify-content-stretch > * { flex: 1 0 0% !important; } // sass-lint:disable-line no-important class-name-format - - - // Justify items - .k-justify-items-start { justify-items: flex-start; } - .\!k-justify-items-start { justify-items: flex-start !important; } // sass-lint:disable-line no-important class-name-format - .k-justify-items-end { justify-items: flex-end; } - .\!k-justify-items-end { justify-items: flex-end !important; } // sass-lint:disable-line no-important class-name-format - .k-justify-items-center { justify-items: center; } - .\!k-justify-items-center { justify-items: center !important; } // sass-lint:disable-line no-important class-name-format - .k-justify-items-stretch { justify-items: stretch; } - .\!k-justify-items-stretch { justify-items: stretch !important; } // sass-lint:disable-line no-important class-name-format - -} diff --git a/packages/default/scss/utils/_float.scss b/packages/default/scss/utils/_float.scss deleted file mode 100644 index cd864104b98..00000000000 --- a/packages/default/scss/utils/_float.scss +++ /dev/null @@ -1,85 +0,0 @@ -@include exports( "utils/float" ) { - - // Float documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/float. - // Clear documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/clear. - - /// This is equivalent to `float: left;`. The element must float on the left side of its containing block. - /// @name .k-float-left - /// @group float - /// @contextType css - _ {} - - /// This is equivalent to `float: right;`. The element must float on the right side of its containing block. - /// @name .k-float-right - /// @group float - /// @contextType css - _ {} - - /// This is equivalent to `float: none;`. The element must not float. - /// @name .k-float-none - /// @group float - /// @contextType css - _ {} - - /// This is equivalent to `clear: left;`. Is a keyword indicating that the element is moved down to clear past left floats. - /// @name .k-clear-left - /// @group float - /// @contextType css - _ {} - - /// This is equivalent to `clear: right;`. Is a keyword indicating that the element is moved down to clear past right floats. - /// @name .k-clear-right - /// @group float - /// @contextType css - _ {} - - /// This is equivalent to `clear: both;`. Is a keyword indicating that the element is moved down to clear past both left and right floats. - /// @name .k-clear-both - /// @group float - /// @contextType css - _ {} - - /// This is equivalent to `clear: none;`. Is a keyword indicating that the element is not moved down to clear past floating elements. - /// @name .k-clear-none - /// @group float - /// @contextType css - _ {} - - // Float utility classes - $utils-float: ( - left, - right, - none - ) !default; - - // Clear utility classes - $utils-clear: ( - left, - right, - both, - none - ) !default; - - @if $utils-float { - @each $float in $utils-float { - // sass-lint:disable-block no-important - .k-float-#{$float} { float: $float !important; } - } - } - - @if $utils-clear { - @each $clear in $utils-clear { - // sass-lint:disable-block no-important - .k-clear-#{$clear} { clear: $clear !important; } - } - } - - - // Float wrap - .k-floatwrap::after { - content: ""; - display: block; - clear: both; - } - -} diff --git a/packages/default/scss/utils/_grid.scss b/packages/default/scss/utils/_grid.scss deleted file mode 100644 index 7a69842cb39..00000000000 --- a/packages/default/scss/utils/_grid.scss +++ /dev/null @@ -1,45 +0,0 @@ -@include exports("utils/grid") { - - // stylelint-disable block-opening-brace-space-before - - /// This is equivalent to `display: grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents. - /// @name .k-d-grid - /// @group grid-layout - .k-d-grid { display: grid; } - .k-grid-cols-none { grid-template-columns: none; } - .k-grid-rows-none { grid-template-rows: none; } - - - // Grid flow - .k-grid-flow-col { grid-auto-flow: column; } - .k-grid-flow-col-dense { grid-auto-flow: column dense; } - .k-grid-flow-row { grid-auto-flow: row; } - .k-grid-flow-row-dense { grid-auto-flow: row dense; } - .k-grid-flow-unset { grid-auto-flow: unset; } - - - // Columns - .k-colspan-all { grid-column: 1 / -1; } - .k-colspan-auto { grid-column: auto; } - - - // Rows - .k-rowspan-all { grid-row: 1 / -1; } - .k-rowspan-auto { grid-row: auto; } - - - // Grid utilities - @for $i from 1 through $grid-cols { - .k-grid-cols-#{$i} { grid-template-columns: repeat($i, minmax(0, 1fr)); } - .k-colspan-#{$i} { grid-column: span $i; } - .k-col-start-#{$i} { grid-column-start: $i; } - .k-col-end-#{$i} { grid-column-end: $i; } - } - @for $i from 1 through $grid-rows { - .k-grid-rows-#{$i} { grid-template-rows: repeat($i, minmax(0, 1fr)); } - .k-rowspan-#{$i} { grid-row: span $i; } - .k-row-start-#{$i} { grid-row-start: $i; } - .k-row-end-#{$i} { grid-row-end: $i; } - } - -} diff --git a/packages/default/scss/utils/_index.scss b/packages/default/scss/utils/_index.scss index e40b85c80ab..6dea880a8db 100644 --- a/packages/default/scss/utils/_index.scss +++ b/packages/default/scss/utils/_index.scss @@ -2,29 +2,7 @@ // Dependencies -@import "../typography/_variables.scss"; // Component -// @import "./_aspect-ratio.scss"; -// @import "./_border.scss"; -// @import "./_display.scss"; -// @import "./_flex.scss"; -// @import "./_float.scss"; -// @import "./_grid.scss"; -// @import "./_order.scss"; -// @import "./_overflow.scss"; -// @import "./_pointer-events.scss"; -// @import "./_position.scss"; -// @import "./_resize.scss"; -// @import "./_spacing.scss"; -// @import "./_spacer.scss"; -// @import "./_table-layout.scss"; -@import "./_text.scss"; -@import "./_theme-colors.scss"; -// @import "./_touch-action.scss"; -// @import "./_transform.scss"; -// @import "./_user-select.scss"; - - @import "@progress/kendo-theme-utils/scss/all.scss"; diff --git a/packages/default/scss/utils/_order.scss b/packages/default/scss/utils/_order.scss deleted file mode 100644 index ce675043cad..00000000000 --- a/packages/default/scss/utils/_order.scss +++ /dev/null @@ -1,54 +0,0 @@ -@include exports( "utils/order" ) { - - /// This is equivalent to `order: -9999;`. - /// @name .k-order-first - /// @group order - /// @contextType css - _ {} - - /// This is equivalent to `order: 9999;`. - /// @name .k-order-last - /// @group order - /// @contextType css - _ {} - - /// This is equivalent to `order: 0;`. - /// @name .k-order-none - /// @group order - /// @contextType css - _ {} - - /// This is equivalent to `order: 1;`, `order: 2;`, `order: 12;`, etc. - /// @name .from k-order-1 to k-order-12 - /// @group order - /// @contextType css - _ {} - - // Order utility classes - $utils-order: ( - first: -9999, - last: 9999, - none: 0, - 1: 1, - 2: 2, - 3: 3, - 4: 4, - 5: 5, - 6: 6, - 7: 7, - 8: 8, - 9: 9, - 10: 10, - 11: 11, - 12: 12 - ) !default; - - // sass-lint:disable no-important - @if $utils-order { - @each $order, $val in $utils-order { - .k-order-#{$order} { order: $val !important; } - } - } - // sass-lint:enable no-important - -} diff --git a/packages/default/scss/utils/_overflow.scss b/packages/default/scss/utils/_overflow.scss deleted file mode 100644 index 231fe197ea9..00000000000 --- a/packages/default/scss/utils/_overflow.scss +++ /dev/null @@ -1,87 +0,0 @@ -@include exports( "utils/overflow" ) { - - // Overflow documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/overflow. - - /// 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 scrollbars if content overflows. - /// @name .k-overflow-auto - /// @group overflow - /// @contextType css - _ {} - - /// This is equivalent to `overflow: hidden;`. Content is clipped if necessary to fit the padding box. No scrollbars are 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. - /// @name .k-overflow-hidden - /// @group overflow - /// @contextType css - _ {} - - /// This is equivalent to `overflow: visible;`. Content is not clipped and may be rendered outside the padding box. - /// @name .k-overflow-visible - /// @group overflow - /// @contextType css - _ {} - - /// This is equivalent to `overflow: scroll;`. Content is clipped if necessary to fit the padding box. Browsers always display scrollbars whether or not any content is actually clipped, preventing scrollbars from appearing or disappearing as content changes. Printers may still print overflowing content. - /// @name .k-overflow-scroll - /// @group overflow - /// @contextType css - _ {} - - /// 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. - /// @name .k-overflow-clip - /// @group overflow - /// @contextType css - _ {} - - /// This is equivalent to `overflow-x: VALUE;`. Sets what shows when content overflows a block-level element's left and right edges. The `VALUE` could be set to `auto`, `hidden`, `visible`, `scroll`, and `clip`. - /// @name .k-overflow-x-VALUE - /// @group overflow - /// @contextType css - _ {} - - /// This is equivalent to `overflow-y: VALUE;`. Sets what shows when content overflows a block-level element's top and bottom edges. The `VALUE` could be set to `auto`, `hidden`, `visible`, `scroll`, and `clip`. - /// @name .k-overflow-y-VALUE - /// @group overflow - /// @contextType css - _ {} - - /// This is equivalent to `overflow: VALUE_X VALUE_Y;`. This is a shorthand for `overflow-x: VALUE_X; overflow-y: VALUE_Y;`. The `VALUE_X` and `VALUE_Y` could be set to `auto`, `hidden`, `visible`, `scroll`, and `clip`. - /// @name .k-overflow-VALUE_X-VALUE_Y - /// @group overflow - /// @contextType css - _ {} - - // Overflow utility classes - $utils-overflow: ( - auto, - hidden, - visible, - scroll, - clip - ) !default; - - // sass-lint:disable no-important - @if $utils-overflow { - @each $overflow in $utils-overflow { - .k-overflow-#{$overflow} { overflow: $overflow; } - .k-overflow-x-#{$overflow} { overflow-x: $overflow; } - .k-overflow-y-#{$overflow} { overflow-y: $overflow; } - - .\!k-overflow-#{$overflow} { overflow: $overflow !important; } - .\!k-overflow-x-#{$overflow} { overflow-x: $overflow !important; } - .\!k-overflow-y-#{$overflow} { overflow-y: $overflow !important; } - } - - - @each $overflow-x in $utils-overflow { - @each $overflow-y in $utils-overflow { - @if $overflow-x != $overflow-y { - .k-overflow-#{$overflow-x}-#{$overflow-y} { overflow: $overflow-x $overflow-y; } - - .\!k-overflow-#{$overflow-x}-#{$overflow-y} { overflow: $overflow-x $overflow-y !important; } - } - } - } - } - // sass-lint:enable no-important - -} diff --git a/packages/default/scss/utils/_pointer-events.scss b/packages/default/scss/utils/_pointer-events.scss deleted file mode 100644 index c0fe407a8e0..00000000000 --- a/packages/default/scss/utils/_pointer-events.scss +++ /dev/null @@ -1,30 +0,0 @@ -@include exports( "utils/pointer-events" ) { - - // 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. - /// @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. - /// @name .k-pointer-events-auto - /// @group pointer-events - /// @contextType css - _ {} - - // Pointer events utility classes - $utils-pointer-events: ( - none, - auto - ) !default; - - @if $utils-pointer-events { - @each $pointer-events in $utils-pointer-events { - // sass-lint:disable-block no-important - .k-pointer-events-#{$pointer-events} { pointer-events: $pointer-events !important; } - } - } - -} diff --git a/packages/default/scss/utils/_position.scss b/packages/default/scss/utils/_position.scss deleted file mode 100644 index 27505f9e991..00000000000 --- a/packages/default/scss/utils/_position.scss +++ /dev/null @@ -1,209 +0,0 @@ -@include exports( "utils/position" ) { - - // Position documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/position. - - /// 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. - /// @name .k-pos-static - /// @group position - /// @contextType css - _ {} - - /// 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. - /// @name .k-pos-relative - /// @group position - /// @contextType css - _ {} - - /// 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. - /// @name .k-pos-absolute - /// @group position - /// @contextType css - _ {} - - /// 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. - /// @name .k-pos-fixed - /// @group position - /// @contextType css - _ {} - - /// 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. - /// @name .k-pos-sticky - /// @group position - /// @contextType css - _ {} - - @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 - } - - /// This is equivalent to `top: 0;`. - /// @name .k-pos-top - /// @group position - /// @contextType css - _ {} - - /// This is equivalent to `right: 0;`. - /// @name .k-pos-right - /// @group position - /// @contextType css - _ {} - - /// This is equivalent to `bottom: 0;`. - /// @name .k-pos-bottom - /// @group position - /// @contextType css - _ {} - - /// This is equivalent to `left: 0;`. - /// @name .k-pos-left - /// @group position - /// @contextType css - _ {} - - @each $side in (top, right, bottom, left) { - .k-#{$side}, - .k-pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style - } - - /// This is equivalent to `top: 0; left: 0;`. - /// @name .k-pos-top-start - /// @group position - /// @contextType css - .k-top-start, - .k-pos-top-start { - top: 0; - left: 0; - - .k-rtl &, - &[dir="rtl"], - [dir="rtl"] & { - left: auto; - right: 0; - } - } - - /// This is equivalent to `top: 0; left: 50%; transform: translateX(-50%);`. - /// @name .k-pos-top-center - /// @group position - /// @contextType css - .k-top-center, - .k-pos-top-center { - top: 0; - left: 50%; - transform: translateX(-50%); - } - - /// This is equivalent to `top: 0; right: 0;`. - /// @name .k-pos-top-end - /// @group position - /// @contextType css - .k-top-end, - .k-pos-top-end { - top: 0; - right: 0; - - .k-rtl &, - &[dir="rtl"], - [dir="rtl"] & { - right: auto; - left: 0; - } - } - - /// This is equivalent to `top: 50%; left: 0; transform: translateY(-50%);`. - /// @name .k-pos-middle-start - /// @group position - /// @contextType css - .k-middle-start, - .k-pos-middle-start { - top: 50%; - left: 0; - transform: translateY(-50%); - - .k-rtl &, - &[dir="rtl"], - [dir="rtl"] & { - left: auto; - right: 0; - } - } - - /// This is equivalent to `top: 50%; left: 50%; transform: translate(-50%, -50%);`. - /// @name .k-pos-middle-center - /// @group position - /// @contextType css - .k-middle-center, - .k-pos-middle-center { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - - /// This is equivalent to `top: 50%; right: 0; transform: translateY(-50%);`. - /// @name .k-pos-middle-end - /// @group position - /// @contextType css - .k-middle-end, - .k-pos-middle-end { - top: 50%; - right: 0; - transform: translateY(-50%); - - .k-rtl &, - &[dir="rtl"], - [dir="rtl"] & { - right: auto; - left: 0; - } - } - - /// This is equivalent to `bottom: 0; left: 0;`. - /// @name .k-pos-bottom-start - /// @group position - /// @contextType css - .k-bottom-start, - .k-pos-bottom-start { - bottom: 0; - left: 0; - - .k-rtl &, - &[dir="rtl"], - [dir="rtl"] & { - left: auto; - right: 0; - } - } - - /// This is equivalent to `bottom: 0; left: 50%; translateX(-50%);`. - /// @name .k-pos-bottom-center - /// @group position - /// @contextType css - .k-bottom-center, - .k-pos-bottom-center { - bottom: 0; - left: 50%; - transform: translateX(-50%); - } - - /// This is equivalent to `bottom: 0; right: 0;`. - /// @name .k-pos-bottom-end - /// @group position - /// @contextType css - .k-bottom-end, - .k-pos-bottom-end { - bottom: 0; - right: 0; - - .k-rtl &, - &[dir="rtl"], - [dir="rtl"] & { - right: auto; - left: 0; - } - } - -} diff --git a/packages/default/scss/utils/_resize.scss b/packages/default/scss/utils/_resize.scss deleted file mode 100644 index 0f3c53c4088..00000000000 --- a/packages/default/scss/utils/_resize.scss +++ /dev/null @@ -1,47 +0,0 @@ -@include exports( "utils/resize" ) { - - // Resize documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/resize. - - /// This is equivalent to `resize: none;`. The element offers no user-controllable method for resizing it. - /// @name .k-resize-none - /// @group resize - /// @contextType css - _ {} - - /// 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. - /// @name .k-resize-both - /// @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. - /// @name .k-resize-horizontal - /// @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. - /// @name .k-resize-vertical - /// @group resize - /// @contextType css - _ {} - - - // Resize utility classes - $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; } - } - } - -} diff --git a/packages/default/scss/utils/_spacer.scss b/packages/default/scss/utils/_spacer.scss deleted file mode 100644 index 8ec2e92a36e..00000000000 --- a/packages/default/scss/utils/_spacer.scss +++ /dev/null @@ -1,16 +0,0 @@ -@include exports( "utils/spacer" ) { - - /// 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. - /// @name .k-spacer - /// @group spacer - .k-spacer { - flex: 1 0 auto; - } - - /// This is equivalent to `flex-grow: 0;`. The spacer will not take any of the remaining space in a flex container. - /// @name .k-spacer-sized - /// @group spacer - .k-spacer-sized { - flex-grow: 0; - } -} diff --git a/packages/default/scss/utils/_spacing.scss b/packages/default/scss/utils/_spacing.scss deleted file mode 100644 index 3542e3de630..00000000000 --- a/packages/default/scss/utils/_spacing.scss +++ /dev/null @@ -1,162 +0,0 @@ -@include exports( "utils/spacing" ) { - - // sass-lint:disable-block no-important - // sass-lint:disable-block indentation - - $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; - - /// This is equivalent to `margin: VALUE;`. Margin area on all four sides of the element. - /// @name k-m-VALUE - /// @group spacing - /// @contextType css - _ {} - - /// This is equivalent to `margin-top: VALUE;`. Margin area on top of the element. - /// @name k-mt-VALUE - /// @group spacing - /// @contextType css - _ {} - - /// This is equivalent to `margin-right: VALUE;`. Margin area on right of the element. - /// @name k-mr-VALUE - /// @group spacing - /// @contextType css - _ {} - - /// This is equivalent to `margin-bottom: VALUE;`. Margin area on bottom of the element. - /// @name k-mb-VALUE - /// @group spacing - /// @contextType css - _ {} - - /// This is equivalent to `margin-left: VALUE;`. Margin area on left of the element. - /// @name k-ml-VALUE - /// @group spacing - /// @contextType css - _ {} - - /// This is equivalent to `margin-left: VALUE; margin-right: VALUE;`. Margin area on left and right of the element. - /// @name k-mx-VALUE - /// @group spacing - /// @contextType css - _ {} - - /// This is equivalent to `margin-top: VALUE; margin-bottom: VALUE;``. Margin area on top and bottom of the element. - /// @name k-my-VALUE - /// @group spacing - /// @contextType css - _ {} - - // Margin - @each $size, $val in $kendo-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; - } - } - - /// This is equivalent to `padding: VALUE;`. Padding area on all four sides of the element. - /// @name k-p-VALUE - /// @group spacing - /// @contextType css - _ {} - - /// This is equivalent to `padding-top: VALUE;`. Padding area on top of the element. - /// @name k-pt-VALUE - /// @group spacing - /// @contextType css - _ {} - - /// This is equivalent to `padding-right: VALUE;`. Padding area on right of the element. - /// @name k-pr-VALUE - /// @group spacing - /// @contextType css - _ {} - - /// This is equivalent to `padding-bottom: VALUE;`. Padding area on bottom of the element. - /// @name k-pb-VALUE - /// @group spacing - /// @contextType css - _ {} - - /// This is equivalent to `padding-left: VALUE;`. Padding area on left of the element. - /// @name k-pl-VALUE - /// @group spacing - /// @contextType css - _ {} - - /// This is equivalent to `padding-left: VALUE; padding-right: VALUE;`. Padding area on left and right of the element. - /// @name k-px-VALUE - /// @group spacing - /// @contextType css - _ {} - - /// This is equivalent to `padding-top: VALUE; padding-bottom: VALUE;``. Padding area on top and bottom of the element. - /// @name k-py-VALUE - /// @group spacing - /// @contextType css - _ {} - - // Padding - @each $size, $val in $kendo-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; - } - } - - /// This is equivalent to `gap: VALUE;`. Gap area between both rows and columns in grid and flexbox layouts. - /// @name k-gap-VALUE - /// @group spacing - - /// This is equivalent to `column-gap: VALUE;`. Gap area between columns in grid and flexbox layouts. - /// @name k-gap-x-VALUE - /// @group spacing - - /// This is equivalent to `row-gap: VALUE;`. Gap area between rows in grid and flexbox layouts. - /// @name k-gap-y-VALUE - /// @group spacing - - // Gap - .k-no-gap { gap: 0 !important; } - - @each $size, $val in $kendo-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; } - } -} diff --git a/packages/default/scss/utils/_table-layout.scss b/packages/default/scss/utils/_table-layout.scss deleted file mode 100644 index 104c72fdf3e..00000000000 --- a/packages/default/scss/utils/_table-layout.scss +++ /dev/null @@ -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. - - /// 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. - /// @name .k-table-layout-fixed - /// @group table-layout - .k-table-layout-fixed { table-layout: fixed; } - /// 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. - /// @name .k-table-layout-auto - /// @group table-layout - .k-table-layout-auto { table-layout: auto; } - -} diff --git a/packages/default/scss/utils/_text.scss b/packages/default/scss/utils/_text.scss deleted file mode 100644 index 41ec953efc0..00000000000 --- a/packages/default/scss/utils/_text.scss +++ /dev/null @@ -1,154 +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 - - /// This is equivalent to `white-space: nowrap;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source. - /// @name .k-text-nowrap - /// @group text - .k-text-nowrap { white-space: nowrap; } - .\!k-text-nowrap { white-space: nowrap !important; } // sass-lint:disable-line no-important - /// This is equivalent to `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`. - /// @name .k-text-ellipsis - /// @group text - .k-text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // sass-lint:disable-line one-declaration-per-line - - /// 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. - /// @name .k-white-space-normal - /// @group text - /// @contextType css - _ {} - - /// This is equivalent to `white-space: nowrap;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source. - /// @name .k-white-space-nowrap - /// @group text - /// @contextType css - _ {} - - /// 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
elements. - /// @name .k-white-space-pre - /// @group text - /// @contextType css - _ {} - - /// This is equivalent to `white-space: pre-wrap;`. Sequences of white space are preserved. Lines are broken at newline characters, at
, and as necessary to fill line boxes. - /// @name .k-white-space-pre-wrap - /// @group text - /// @contextType css - _ {} - - /// This is equivalent to `white-space: pre-line;`. Sequences of white space are collapsed. Lines are broken at newline characters, at
, and as necessary to fill line boxes. - /// @name .k-white-space-pre-line - /// @group text - /// @contextType css - _ {} - - /// This is equivalent to `white-space: break-spaces;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source. - /// @name .k-white-space-break-spaces - /// @group text - /// @contextType css - _ {} - - @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 - - /// This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box. - /// @name .k-text-left - /// @group text - /// @contextType css - _ {} - - /// This is equivalent to `text-align: right;`. The inline contents are aligned to the right edge of the line box. - /// @name .k-text-right - /// @group text - /// @contextType css - _ {} - - /// This is equivalent to `text-align: center;`. The inline contents are centered within the line box. - /// @name .k-text-center - /// @group text - /// @contextType css - _ {} - - /// 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. - /// @name .k-text-justify - /// @group text - /// @contextType css - _ {} - - @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 - - /// This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase. - /// @name .k-text-lowercase - /// @group text - /// @contextType css - _ {} - - /// This is equivalent to `text-transform: uppercase;`. Is a keyword that converts all characters to uppercase. - /// @name .k-text-uppercase - /// @group text - /// @contextType css - _ {} - - /// 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). - /// @name .k-text-capitalize - /// @group text - /// @contextType css - _ {} - - @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 - - /// This is equivalent to `font-weight: 300;`. The value of `300` may be different for each Kendo UI Theme. - /// @name .k-font-weight-light - /// @group text - .k-font-weight-light { font-weight: $font-weight-light !important; } // sass-lint:disable-line no-important - /// This is equivalent to `font-weight: 400;`. The value of `400` may be different for each Kendo UI Theme. - /// @name .k-font-weight-normal - /// @group text - .k-font-weight-normal { font-weight: $font-weight-normal !important; } // sass-lint:disable-line no-important - /// This is equivalent to `font-weight: 700;`. The value of `700` may be different for each Kendo UI Theme. - /// @name .k-font-weight-bold - /// @group text - .k-font-weight-bold { font-weight: $font-weight-bold !important; } // sass-lint:disable-line no-important - -} diff --git a/packages/default/scss/utils/_theme-colors.scss b/packages/default/scss/utils/_theme-colors.scss deleted file mode 100644 index 8d6c40b060d..00000000000 --- a/packages/default/scss/utils/_theme-colors.scss +++ /dev/null @@ -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; - } - } - -} diff --git a/packages/default/scss/utils/_touch-action.scss b/packages/default/scss/utils/_touch-action.scss deleted file mode 100644 index fbc4854e8d0..00000000000 --- a/packages/default/scss/utils/_touch-action.scss +++ /dev/null @@ -1,30 +0,0 @@ -@include exports( "utils/touch-action" ) { - - // Touch-action documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action. - - /// This is equivalent to `touch-action: none;`. Disable browser handling of all panning and zooming gestures. - /// @name k-touch-action-none - /// @group touch-action - /// @contextType css - _ {} - - /// This is equivalent to `touch-action: auto;`. Enable browser handling of all panning and zooming gestures. - /// @name k-touch-action-auto - /// @group touch-action - /// @contextType css - _ {} - - // Touch-action utility classes - $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; } - } - } - -} diff --git a/packages/default/scss/utils/_transform.scss b/packages/default/scss/utils/_transform.scss deleted file mode 100644 index af5efe15529..00000000000 --- a/packages/default/scss/utils/_transform.scss +++ /dev/null @@ -1,105 +0,0 @@ -@include exports( "utils/transform" ) { - - // stylelint-disable block-opening-brace-space-before - - // Flip - - /// This is equivalent to `transform: scaleX( -1 );`. Flips the element horizontally. - /// @name .k-flip-h - /// @group transform - .k-flip-h { transform: scaleX( -1 ); } - /// This is equivalent to `transform: scaleY( -1 );`. Flips the element vertically. - /// @name .k-flip-v - /// @group transform - .k-flip-v { transform: scaleY( -1 ); } - .k-flip-h.k-flip-v { transform: scale( -1, -1 ); } - - - // Rotate - - /// This is equivalent to `transform: rotate( 45deg );`. Rotates the element by 45 degrees. - /// @name .k-rotate-45 - /// @group transform - .k-rotate-45 { transform: rotate( 45deg ); } - /// This is equivalent to `transform: rotate( 90deg );`. Rotates the element by 90 degrees. - /// @name .k-rotate-90 - /// @group transform - .k-rotate-90 { transform: rotate( 90deg ); } - /// This is equivalent to `transform: rotate( 135deg );`. Rotates the element by 135 degrees. - /// @name .k-rotate-135 - /// @group transform - .k-rotate-135 { transform: rotate( 135deg ); } - /// This is equivalent to `transform: rotate( 180deg );`. Rotates the element by 180 degrees. - /// @name .k-rotate-180 - /// @group transform - .k-rotate-180 { transform: rotate( 180deg ); } - /// This is equivalent to `transform: rotate( 225deg );`. Rotates the element by 225 degrees. - /// @name .k-rotate-225 - /// @group transform - .k-rotate-225 { transform: rotate( 225deg ); } - /// This is equivalent to `transform: rotate( 270deg );`. Rotates the element by 270 degrees. - /// @name .k-rotate-270 - /// @group transform - .k-rotate-270 { transform: rotate( 270deg ); } - /// This is equivalent to `transform: rotate( 315deg );`. Rotates the element by 315 degrees. - /// @name .k-rotate-315 - /// @group transform - .k-rotate-315 { transform: rotate( 315deg ); } - - - // Scale - - /// This is equivalent to `transform: scale( 0, 0 );`. The element is shrunk and no longer visible. - /// @name .k-scale-0 - /// @group transform - .k-scale-0 { transform: scale( 0, 0 ); } - /// This is equivalent to `transform: scale( 1, 1 );`. The element has its default scale. - /// @name .k-scale-1 - /// @group transform - .k-scale-1 { transform: scale( 1, 1 ); } - /// This is equivalent to `transform: scale( 2, 2 );`. The element is scaling two times in both directions. - /// @name .k-scale-2 - /// @group transform - .k-scale-2 { transform: scale( 2, 2 ); } - - - // Translate - - /// This is equivalent to `transform: translate( 0, 0 );`. The element does not move. - /// @name .k-translate-0 - /// @group transform - .k-translate-0 { transform: translate( 0, 0 ); } - /// This is equivalent to `transform: translate( 0, 50% );`. The element moves vertically by 50% of its height. - /// @name .k-translate-0-50 - /// @group transform - .k-translate-0-50 { transform: translate( 0, 50% ); } - /// This is equivalent to `transform: translate( 0, 100% );`. The element moves vertically by 100% of its height. - /// @name .k-translate-0-100 - /// @group transform - .k-translate-0-100 { transform: translate( 0, 100% ); } - /// This is equivalent to `transform: translate( 50%, 0 );`. The element moves horizontally by 50% of its width. - /// @name .k-translate-50-0 - /// @group transform - .k-translate-50-0 { transform: translate( 50%, 0 ); } - /// This is equivalent to `transform: translate( 50%, 50% );`. The element moves horizontally by 50% of its width and vertically by 50% of its height. - /// @name .k-translate-50-50 - /// @group transform - .k-translate-50-50 { transform: translate( 50%, 50% ); } - /// This is equivalent to `transform: translate( 50%, 100% );`. The element moves horizontally by 50% of its width and vertically by 100% of its height. - /// @name .k-translate-50-100 - /// @group transform - .k-translate-50-100 { transform: translate( 50%, 100% ); } - /// This is equivalent to `transform: translate( 100%, 0 );`. The element moves horizontally by 100% of its width. - /// @name .k-translate-100-0 - /// @group transform - .k-translate-100-0 { transform: translate( 100%, 0 ); } - /// This is equivalent to `transform: translate( 100%, 50% );`. The element moves horizontally by 100% of its width and vertically by 50% of its height. - /// @name .k-translate-100-50 - /// @group transform - .k-translate-100-50 { transform: translate( 100%, 50% ); } - /// This is equivalent to `transform: translate( 100%, 100% );`. The element moves horizontally by 100% of its width and vertically by 100% of its height. - /// @name .k-translate-100-100 - /// @group transform - .k-translate-100-100 { transform: translate( 100%, 100% ); } - -} diff --git a/packages/default/scss/utils/_user-select.scss b/packages/default/scss/utils/_user-select.scss deleted file mode 100644 index 736ce8d0d23..00000000000 --- a/packages/default/scss/utils/_user-select.scss +++ /dev/null @@ -1,51 +0,0 @@ -@include exports( "utils/user-select" ) { - - // User-select documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/user-select. - - /// This is equivalent to `user-select: none;`. The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements. - /// @name .k-user-select-none - /// @group user-select - /// @contextType css - _ {} - - /// This is equivalent to `user-select: auto;`. This is the default value of the `user-select` property. - /// @name .k-user-select-auto - /// @group user-select - /// @contextType css - _ {} - - /// This is equivalent to `user-select: text;`. The text can be selected by the user. - /// @name .k-user-select-text - /// @group user-select - /// @contextType css - _ {} - - /// This is equivalent to `user-select: all;`. The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected. - /// @name .k-user-select-all - /// @group user-select - /// @contextType css - _ {} - - /// This is equivalent to `user-select: contain;`. Enables selection to start within the element; however, the selection will be contained by the bounds of that element. - /// @name .k-user-select-contain - /// @group user-select - /// @contextType css - _ {} - - // User select utility classes - $utils-user-select: ( - none, - auto, - text, - all, - contain - ) !default; - - @if $utils-user-select { - @each $user-select in $utils-user-select { - // sass-lint:disable-block no-important - .k-user-select-#{$user-select} { user-select: $user-select !important; } - } - } - -} diff --git a/packages/default/scss/window/_variables.scss b/packages/default/scss/window/_variables.scss index fdb66a763b3..40e72c39bf7 100644 --- a/packages/default/scss/window/_variables.scss +++ b/packages/default/scss/window/_variables.scss @@ -1,4 +1,8 @@ +@import "../action-buttons/_variables.scss"; + + // Window + $kendo-window-border-width: 0px !default; $kendo-window-border-radius: 0px !default; $kendo-window-font-family: $font-family !default; diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss index ce3147bd97b..6ee728f531f 100644 --- a/packages/material/scss/_variables.scss +++ b/packages/material/scss/_variables.scss @@ -128,6 +128,15 @@ $kendo-border-radius-sm: k-math-div( $kendo-border-radius, 2 ) !default; $kendo-border-radius-md: $kendo-border-radius !default; $kendo-border-radius-lg: $kendo-border-radius * 1.5 !default; +$kendo-border-radii: ( + DEFAULT: $kendo-border-radius-md, + 0: 0, + sm: $kendo-border-radius-sm, + md: $kendo-border-radius-md, + lg: $kendo-border-radius-lg, + full: 9999px +) !default; + $kendo-zindex-popup: 1 !default; $kendo-zindex-window: 2 !default; @@ -236,6 +245,53 @@ $kendo-theme-colors: ( ) !default; +// Typography + +/// Base font size across all components. +/// @group typography +$font-size: 14px !default; +$font-size-xs: 10px !default; +$font-size-sm: 12px !default; +$font-size-md: 14px !default; +$font-size-lg: 16px !default; +$font-size-xl: 20px !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; + +/// Font family across all components. +/// @group typography +$font-family: Roboto, "Helvetica Neue", sans-serif !default; + +/// Font family for monospaced text. Used for styling the code. +/// @group typography +$font-family-monospace: Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default; + +/// Line height used along with $font-size. +/// @group typography +$line-height: k-math-div( 28, 14 ) !default; +$line-height-xs: 1 !default; +$line-height-sm: 1.2 !default; +$line-height-md: $line-height !default; +$line-height-lg: 1.5 !default; +$line-height-em: calc( #{$line-height} * 1em ) !default; + + +// Font weight +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 500 !default; + + +// Letter Spacing +$letter-spacing: null !default; + + // Root styles $kendo-body-bg: k-map-get( $theme, body-bg ) !default; $kendo-body-text: k-map-get( $theme, body-text ) !default; @@ -310,13 +366,9 @@ $kendo-disabled-styling: ( ) !default; - // Generic styles // TODO: refactor once we extract drag drop as separate module -$font-size: 14px !default; -$font-family: Roboto, "Helvetica Neue", sans-serif !default; -$line-height: 2 !default; // Header diff --git a/packages/material/scss/action-sheet/_variables.scss b/packages/material/scss/action-sheet/_variables.scss index 0620cc14c92..e436f01a2bd 100644 --- a/packages/material/scss/action-sheet/_variables.scss +++ b/packages/material/scss/action-sheet/_variables.scss @@ -1,4 +1,5 @@ // Action sheet + $actionsheet-padding-x: null !default; $actionsheet-padding-y: null !default; $actionsheet-width: 360px !default; diff --git a/packages/material/scss/badge/_index.scss b/packages/material/scss/badge/_index.scss index ac781c66f0a..29c5d58e467 100644 --- a/packages/material/scss/badge/_index.scss +++ b/packages/material/scss/badge/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../icons/_index.scss"; diff --git a/packages/material/scss/bottom-navigation/_index.scss b/packages/material/scss/bottom-navigation/_index.scss index 92ed3fd17ea..e37b9c27815 100644 --- a/packages/material/scss/bottom-navigation/_index.scss +++ b/packages/material/scss/bottom-navigation/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../icons/_index.scss"; diff --git a/packages/material/scss/button/_index.scss b/packages/material/scss/button/_index.scss index f8bd4bc8969..b6ef32746ce 100644 --- a/packages/material/scss/button/_index.scss +++ b/packages/material/scss/button/_index.scss @@ -4,7 +4,6 @@ // Dependencies @import "../badge/_index.scss"; @import "../icons/_index.scss"; -@import "../typography/_variables.scss"; // Component diff --git a/packages/material/scss/calendar/_variables.scss b/packages/material/scss/calendar/_variables.scss index 2f65fc53773..37b357bccc9 100644 --- a/packages/material/scss/calendar/_variables.scss +++ b/packages/material/scss/calendar/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Calendar + $calendar-border-width: 1px !default; $calendar-font-family: $font-family !default; $calendar-font-size: $font-size !default; diff --git a/packages/material/scss/captcha/_index.scss b/packages/material/scss/captcha/_index.scss index 058a4d2f13b..ec50e27eb5e 100644 --- a/packages/material/scss/captcha/_index.scss +++ b/packages/material/scss/captcha/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_index.scss"; +// @import "../utils/_index.scss"; @import "../common/_index.scss"; @import "../icons/_index.scss"; @import "../input/_index.scss"; diff --git a/packages/material/scss/card/_index.scss b/packages/material/scss/card/_index.scss index 88dc019c391..2f95d3ab5d6 100644 --- a/packages/material/scss/card/_index.scss +++ b/packages/material/scss/card/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_grid.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_grid.scss"; @import "../action-buttons/_index.scss"; @import "../icons/_index.scss"; @import "../typography/_index.scss"; diff --git a/packages/material/scss/checkbox/_index.scss b/packages/material/scss/checkbox/_index.scss index 8cb597fb591..43dc7943c9f 100644 --- a/packages/material/scss/checkbox/_index.scss +++ b/packages/material/scss/checkbox/_index.scss @@ -2,8 +2,6 @@ // Dependencies -@import "../typography/_variables.scss"; -@import "../list/_variables.scss"; // Component diff --git a/packages/material/scss/checkbox/_variables.scss b/packages/material/scss/checkbox/_variables.scss index 39a97aee2ac..949bdc22499 100644 --- a/packages/material/scss/checkbox/_variables.scss +++ b/packages/material/scss/checkbox/_variables.scss @@ -1,3 +1,6 @@ +@import "../list/_variables.scss"; + + // Checkbox /// Border width of checkbox. diff --git a/packages/material/scss/chip/_index.scss b/packages/material/scss/chip/_index.scss index 7f40fe77778..832c0dab47c 100644 --- a/packages/material/scss/chip/_index.scss +++ b/packages/material/scss/chip/_index.scss @@ -3,7 +3,6 @@ // Dependencies @import "../icons/_index.scss"; -@import "../button/_variables.scss"; // Component diff --git a/packages/material/scss/chip/_variables.scss b/packages/material/scss/chip/_variables.scss index 15e88981d4b..0c7c30cc8c0 100644 --- a/packages/material/scss/chip/_variables.scss +++ b/packages/material/scss/chip/_variables.scss @@ -1,3 +1,6 @@ +@import "../button/_variables.scss"; + + // Chip /// Width of the border around the button. diff --git a/packages/material/scss/colorgradient/_index.scss b/packages/material/scss/colorgradient/_index.scss index 64d1c6087ae..4f8ee59cb8d 100644 --- a/packages/material/scss/colorgradient/_index.scss +++ b/packages/material/scss/colorgradient/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_spacer.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_spacer.scss"; @import "../icons/_index.scss"; @import "../button/_index.scss"; @import "../slider/_index.scss"; diff --git a/packages/material/scss/colorpalette/_index.scss b/packages/material/scss/colorpalette/_index.scss index 72afe33d581..b01214ca47a 100644 --- a/packages/material/scss/colorpalette/_index.scss +++ b/packages/material/scss/colorpalette/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; +// @import "../utils/_flex.scss"; // Component diff --git a/packages/material/scss/common/_index.scss b/packages/material/scss/common/_index.scss index e04c27c6f89..731ca7c8261 100644 --- a/packages/material/scss/common/_index.scss +++ b/packages/material/scss/common/_index.scss @@ -1,5 +1,3 @@ -@import "../typography/_variables.scss"; - @import "./_base.scss"; @import "./_animations.scss"; @import "./_resizing.scss"; diff --git a/packages/material/scss/dataviz/_index.scss b/packages/material/scss/dataviz/_index.scss index c8a5ae4fbcc..1a6e25bf4ed 100644 --- a/packages/material/scss/dataviz/_index.scss +++ b/packages/material/scss/dataviz/_index.scss @@ -5,7 +5,6 @@ @import "../common/_index.scss"; @import "../popup/_index.scss"; @import "../tooltip/_index.scss"; -@import "../button/_variables.scss"; // Component diff --git a/packages/material/scss/dataviz/_variables.scss b/packages/material/scss/dataviz/_variables.scss index 9e63fdaa05a..be59e5f2c77 100644 --- a/packages/material/scss/dataviz/_variables.scss +++ b/packages/material/scss/dataviz/_variables.scss @@ -1,4 +1,8 @@ +@import "../button/_variables.scss"; + + // Chart + /// The first base series color and its light and dark shades. /// @group charts $series-a: get-base-hue( purple, 500 ) !default; diff --git a/packages/material/scss/dropdowngrid/_index.scss b/packages/material/scss/dropdowngrid/_index.scss index e459b0d1cf7..4e0d03ff53f 100644 --- a/packages/material/scss/dropdowngrid/_index.scss +++ b/packages/material/scss/dropdowngrid/_index.scss @@ -3,17 +3,14 @@ // Dependencies @import "../common/_index.scss"; -@import "../table/_index.scss"; -@import "../input/_index.scss"; @import "../floating-label/_index.scss"; -@import "../combobox/_index.scss"; +@import "../icons/_index.scss"; +@import "../input/_index.scss"; @import "../popup/_index.scss"; -@import "../toolbar/_variables.scss"; -@import "../menu/_variables.scss"; -@import "../chip/_variables.scss"; -@import "../grid/_variables.scss"; +@import "../table/_index.scss"; // Component +@import "./_variables.scss"; @import "./_layout.scss"; @import "./_theme.scss"; diff --git a/packages/material/scss/dropdowngrid/_variables.scss b/packages/material/scss/dropdowngrid/_variables.scss new file mode 100644 index 00000000000..801f9dc9831 --- /dev/null +++ b/packages/material/scss/dropdowngrid/_variables.scss @@ -0,0 +1 @@ +// Dropdown grid diff --git a/packages/material/scss/dropzone/_variables.scss b/packages/material/scss/dropzone/_variables.scss index 4f2413271de..c607de82a58 100644 --- a/packages/material/scss/dropzone/_variables.scss +++ b/packages/material/scss/dropzone/_variables.scss @@ -1,4 +1,5 @@ // Dropzone + $dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default; $dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default; $dropzone-border-width: 1px !default; diff --git a/packages/material/scss/expansion-panel/_index.scss b/packages/material/scss/expansion-panel/_index.scss index c2e2f6da7c1..91ad9f3e79a 100644 --- a/packages/material/scss/expansion-panel/_index.scss +++ b/packages/material/scss/expansion-panel/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_display.scss"; -@import "../utils/_spacer.scss"; +// @import "../utils/_display.scss"; +// @import "../utils/_spacer.scss"; @import "../icons/_index.scss"; @import "../list/_index.scss"; diff --git a/packages/material/scss/fab/_index.scss b/packages/material/scss/fab/_index.scss index 73ff9ff6f3e..428a2aa05c8 100644 --- a/packages/material/scss/fab/_index.scss +++ b/packages/material/scss/fab/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../icons/_index.scss"; @import "../button/_index.scss"; @import "../badge/_index.scss"; diff --git a/packages/material/scss/forms/_index.scss b/packages/material/scss/forms/_index.scss index 00de1b10a12..ae13a53bed8 100644 --- a/packages/material/scss/forms/_index.scss +++ b/packages/material/scss/forms/_index.scss @@ -3,12 +3,8 @@ // Dependencies // TODO: extract variables @import "../common/_index.scss"; -@import "../tooltip/_variables.scss"; -@import "../button/_variables.scss"; -@import "../input/_variables.scss"; @import "../toolbar/_index.scss"; @import "../action-buttons/_index.scss"; -@import "../window/_variables.scss"; // Component diff --git a/packages/material/scss/forms/_layout.scss b/packages/material/scss/forms/_layout.scss index 86b8f8b5465..642fa8e62f5 100644 --- a/packages/material/scss/forms/_layout.scss +++ b/packages/material/scss/forms/_layout.scss @@ -32,6 +32,7 @@ .k-validator-tooltip { bottom: 0; + // TODO: do we need the tooltip variable? transform: translateY(100%) translateY($tooltip-callout-size); } } diff --git a/packages/material/scss/forms/_variables.scss b/packages/material/scss/forms/_variables.scss index a5324ce1697..37cb91a3fb9 100644 --- a/packages/material/scss/forms/_variables.scss +++ b/packages/material/scss/forms/_variables.scss @@ -1,3 +1,9 @@ +@import "../input/_variables.scss"; +@import "../tooltip/_variables.scss"; +@import "../typography/_variables.scss"; +@import "../window/_variables.scss"; + + // Forms $kendo-form-spacer: $kendo-padding-md-x * 2 !default; diff --git a/packages/material/scss/grid/_index.scss b/packages/material/scss/grid/_index.scss index 9ef8927ec73..c41f2c98c02 100644 --- a/packages/material/scss/grid/_index.scss +++ b/packages/material/scss/grid/_index.scss @@ -22,8 +22,8 @@ @import "../pager/_index.scss"; @import "../chip/_index.scss"; @import "../skeleton/_index.scss"; -@import "../utils/_float.scss"; -@import "../utils/_spacer.scss"; +// @import "../utils/_float.scss"; +// @import "../utils/_spacer.scss"; @import "../table/_index.scss"; diff --git a/packages/material/scss/listview/_index.scss b/packages/material/scss/listview/_index.scss index 5a72cedb6d5..228b79abea1 100644 --- a/packages/material/scss/listview/_index.scss +++ b/packages/material/scss/listview/_index.scss @@ -3,8 +3,8 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_grid.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_grid.scss"; @import "../pager/_index.scss"; @import "../icons/_index.scss"; diff --git a/packages/material/scss/loader/_variables.scss b/packages/material/scss/loader/_variables.scss index 917e39955c2..6f01022dd0d 100644 --- a/packages/material/scss/loader/_variables.scss +++ b/packages/material/scss/loader/_variables.scss @@ -1,4 +1,5 @@ // Loader + $kendo-loader-segment-border-radius: 50% !default; $kendo-loader-segment-size-sm: k-map-get( $kendo-spacing, 1 ) !default; $kendo-loader-segment-size-md: k-map-get( $kendo-spacing, 2 ) !default; diff --git a/packages/material/scss/map/_index.scss b/packages/material/scss/map/_index.scss index 10bcb60b424..ff33afef70e 100644 --- a/packages/material/scss/map/_index.scss +++ b/packages/material/scss/map/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_position.scss"; @import "../button/_index.scss"; @import "../scroller/_index.scss"; @import "../icons/_index.scss"; diff --git a/packages/material/scss/multiselect/_index.scss b/packages/material/scss/multiselect/_index.scss index 58a4cabf3af..7e7acf74fb0 100644 --- a/packages/material/scss/multiselect/_index.scss +++ b/packages/material/scss/multiselect/_index.scss @@ -3,7 +3,6 @@ // Dependencies @import "../common/_index.scss"; -@import "../forms/_variables.scss"; @import "../button/_index.scss"; @import "../input/_index.scss"; @import "../chip/_index.scss"; diff --git a/packages/material/scss/orgchart/_index.scss b/packages/material/scss/orgchart/_index.scss index d9668fafdc2..62a230602c8 100644 --- a/packages/material/scss/orgchart/_index.scss +++ b/packages/material/scss/orgchart/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_index.scss"; +// @import "../utils/_index.scss"; @import "../common/_index.scss"; @import "../icons/_index.scss"; @import "../forms/_index.scss"; diff --git a/packages/material/scss/pager/_index.scss b/packages/material/scss/pager/_index.scss index 77fa9ddf949..0749af28ce2 100644 --- a/packages/material/scss/pager/_index.scss +++ b/packages/material/scss/pager/_index.scss @@ -5,8 +5,6 @@ @import "../common/_index.scss"; @import "../dropdownlist/_index.scss"; @import "../icons/_index.scss"; -@import "../toolbar/_variables.scss"; -@import "../list/_index.scss"; @import "../button/_index.scss"; diff --git a/packages/material/scss/pager/_variables.scss b/packages/material/scss/pager/_variables.scss index 0de68ed64c4..daa61eaf7ce 100644 --- a/packages/material/scss/pager/_variables.scss +++ b/packages/material/scss/pager/_variables.scss @@ -1,3 +1,6 @@ +@import "../list/_variables.scss"; + + // Pager /// Horizontal padding of the pager according to the pager size. diff --git a/packages/material/scss/panelbar/_variables.scss b/packages/material/scss/panelbar/_variables.scss index 82b74e022ea..3145470c19e 100644 --- a/packages/material/scss/panelbar/_variables.scss +++ b/packages/material/scss/panelbar/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Panelbar + $panelbar-padding-x: 0px !default; $panelbar-padding-y: 0px !default; $panelbar-font-family: $font-family !default; diff --git a/packages/material/scss/pdf-viewer/_index.scss b/packages/material/scss/pdf-viewer/_index.scss index c23cbd51bcf..079c371f879 100644 --- a/packages/material/scss/pdf-viewer/_index.scss +++ b/packages/material/scss/pdf-viewer/_index.scss @@ -3,8 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_index.scss"; -@import "../button/_variables.scss"; +// @import "../utils/_index.scss"; @import "../combobox/_index.scss"; @import "../toolbar/_index.scss"; @import "../dialog/_index.scss"; @@ -13,6 +12,7 @@ @import "../dropzone/_index.scss"; @import "../window/_index.scss"; + // Component @import "./_variables.scss"; @import "./_layout.scss"; diff --git a/packages/material/scss/pdf-viewer/_variables.scss b/packages/material/scss/pdf-viewer/_variables.scss index da082a4a7cd..4be48e2b2f1 100644 --- a/packages/material/scss/pdf-viewer/_variables.scss +++ b/packages/material/scss/pdf-viewer/_variables.scss @@ -1,4 +1,5 @@ // PDF viewer + $pdf-viewer-border-width: 1px !default; $pdf-viewer-font-family: $font-family !default; $pdf-viewer-font-size: $font-size !default; diff --git a/packages/material/scss/pivotgrid/_index.scss b/packages/material/scss/pivotgrid/_index.scss index d1204b679d5..40ecdaaf1b7 100644 --- a/packages/material/scss/pivotgrid/_index.scss +++ b/packages/material/scss/pivotgrid/_index.scss @@ -7,12 +7,11 @@ @import "../treeview/_index.scss"; @import "../grid/_index.scss"; @import "../icons/_index.scss"; -@import "../utils/_spacer.scss"; -@import "../utils/_flex.scss"; -@import "../utils/_grid.scss"; -@import "../utils/_position.scss"; +// @import "../utils/_spacer.scss"; +// @import "../utils/_flex.scss"; +// @import "../utils/_grid.scss"; +// @import "../utils/_position.scss"; @import "../list/_index.scss"; -@import "../table/_variables.scss"; // Component diff --git a/packages/material/scss/pivotgrid/_variables.scss b/packages/material/scss/pivotgrid/_variables.scss index a61b212512e..4c83be2b11f 100644 --- a/packages/material/scss/pivotgrid/_variables.scss +++ b/packages/material/scss/pivotgrid/_variables.scss @@ -1,4 +1,8 @@ +@import "../table/_variables.scss"; + + // Pivot grid + $pivotgrid-spacer: k-map-get( $kendo-spacing, 4 ) !default; $pivotgrid-padding-x: null !default; $pivotgrid-padding-y: null !default; diff --git a/packages/material/scss/radio/_index.scss b/packages/material/scss/radio/_index.scss index cd8b651613f..43dc7943c9f 100644 --- a/packages/material/scss/radio/_index.scss +++ b/packages/material/scss/radio/_index.scss @@ -2,9 +2,6 @@ // Dependencies -@import "../typography/_variables.scss"; -@import "../list/_variables.scss"; -@import "../checkbox/_variables.scss"; // Component diff --git a/packages/material/scss/radio/_variables.scss b/packages/material/scss/radio/_variables.scss index 4a7ad4a9a32..27dbbf998c6 100644 --- a/packages/material/scss/radio/_variables.scss +++ b/packages/material/scss/radio/_variables.scss @@ -1,3 +1,7 @@ +@import "../list/_variables.scss"; +@import "../checkbox/_variables.scss"; + + // Radio button /// Border radius of radio button. diff --git a/packages/material/scss/rating/_variables.scss b/packages/material/scss/rating/_variables.scss index 11c1c891410..a4402cee850 100644 --- a/packages/material/scss/rating/_variables.scss +++ b/packages/material/scss/rating/_variables.scss @@ -1,4 +1,5 @@ // Rating + $rating-font-family: $font-family !default; $rating-font-size: $font-size !default; $rating-line-height: $line-height !default; diff --git a/packages/material/scss/switch/_index.scss b/packages/material/scss/switch/_index.scss index 5f1651c1b41..3b6b57176dc 100644 --- a/packages/material/scss/switch/_index.scss +++ b/packages/material/scss/switch/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_border.scss"; +// @import "../utils/_border.scss"; // Component diff --git a/packages/material/scss/table/_index.scss b/packages/material/scss/table/_index.scss index aeff2815a1b..f509a25f02d 100644 --- a/packages/material/scss/table/_index.scss +++ b/packages/material/scss/table/_index.scss @@ -3,17 +3,9 @@ // Dependencies @import "../common/_index.scss"; -@import "../input/_index.scss"; -@import "../floating-label/_index.scss"; -@import "../combobox/_index.scss"; -@import "../popup/_index.scss"; -@import "../toolbar/_variables.scss"; -@import "../menu/_variables.scss"; -@import "../list/_variables.scss"; // Component @import "./_variables.scss"; @import "./_layout.scss"; @import "./_theme.scss"; - diff --git a/packages/material/scss/table/_variables.scss b/packages/material/scss/table/_variables.scss index bcd7f41ad26..0f4eb7c53e6 100644 --- a/packages/material/scss/table/_variables.scss +++ b/packages/material/scss/table/_variables.scss @@ -1,3 +1,6 @@ +@import "../list/_variables.scss"; + + // Table /// The width of the table border. diff --git a/packages/material/scss/taskboard/_index.scss b/packages/material/scss/taskboard/_index.scss index bb05a0ac99a..2fae76a3fa6 100644 --- a/packages/material/scss/taskboard/_index.scss +++ b/packages/material/scss/taskboard/_index.scss @@ -2,7 +2,7 @@ // Dependencies -@import "../utils/_index.scss"; +// @import "../utils/_index.scss"; @import "../common/_index.scss"; @import "../icons/_index.scss"; @import "../forms/_index.scss"; diff --git a/packages/material/scss/timeselector/_variables.scss b/packages/material/scss/timeselector/_variables.scss index 449423466e6..ed789cfaf30 100644 --- a/packages/material/scss/timeselector/_variables.scss +++ b/packages/material/scss/timeselector/_variables.scss @@ -1,4 +1,8 @@ +@import "../typography/_variables.scss"; + + // Time selector + $time-selector-border-width: 1px !default; $time-selector-font-family: $font-family !default; $time-selector-font-size: $font-size !default; diff --git a/packages/material/scss/tooltip/_variables.scss b/packages/material/scss/tooltip/_variables.scss index fa3648e070f..a5b9c9fdf01 100644 --- a/packages/material/scss/tooltip/_variables.scss +++ b/packages/material/scss/tooltip/_variables.scss @@ -1,4 +1,5 @@ // Tooltip + $tooltip-padding-y: ($kendo-padding-md-y * .75) !default; $tooltip-padding-x: k-math-div( $kendo-padding-md-x, 2 ) !default; $tooltip-max-width: null !default; diff --git a/packages/material/scss/treelist/_index.scss b/packages/material/scss/treelist/_index.scss index 1fc93f158bc..f5a0ef3aa76 100644 --- a/packages/material/scss/treelist/_index.scss +++ b/packages/material/scss/treelist/_index.scss @@ -3,7 +3,7 @@ // Dependencies @import "../common/_index.scss"; -@import "../utils/_text.scss"; +// @import "../utils/_text.scss"; @import "../grid/_index.scss"; @import "../icons/_index.scss"; diff --git a/packages/material/scss/typography/_index.scss b/packages/material/scss/typography/_index.scss index f509a25f02d..43dc7943c9f 100644 --- a/packages/material/scss/typography/_index.scss +++ b/packages/material/scss/typography/_index.scss @@ -2,7 +2,6 @@ // Dependencies -@import "../common/_index.scss"; // Component diff --git a/packages/material/scss/typography/_variables.scss b/packages/material/scss/typography/_variables.scss index 305046906fa..c87147c3de5 100644 --- a/packages/material/scss/typography/_variables.scss +++ b/packages/material/scss/typography/_variables.scss @@ -4,42 +4,6 @@ /// @group typography $enable-typography: false !default; -/// Base font size across all components. -/// @group typography -$font-size: 14px !default; -$font-size-xs: 10px !default; -$font-size-sm: 12px !default; -$font-size-md: 14px !default; -$font-size-lg: 16px !default; -$font-size-xl: 20px !default; - -/// Font family across all components. -/// @group typography -$font-family: Roboto, "Helvetica Neue", sans-serif !default; - -/// Font family for monospaced text. Used for styling the code. -/// @group typography -$font-family-monospace: Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default; - -/// Line height used along with $font-size. -/// @group typography -$line-height: k-math-div( 28, 14 ) !default; -$line-height-xs: 1 !default; -$line-height-sm: 1.2 !default; -$line-height-md: $line-height !default; -$line-height-lg: 1.5 !default; -$line-height-em: calc( #{$line-height} * 1em ) !default; - - -// Font weight -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 500 !default; - - -// Letter Spacing -$letter-spacing: null !default; - // Headings $h1-font-size: 96px !default; diff --git a/packages/material/scss/upload/_index.scss b/packages/material/scss/upload/_index.scss index c94cc6d4629..cb227e333e5 100644 --- a/packages/material/scss/upload/_index.scss +++ b/packages/material/scss/upload/_index.scss @@ -7,7 +7,6 @@ @import "../action-buttons/_index.scss"; @import "../icons/_index.scss"; @import "../dropzone/_index.scss"; -@import "../toolbar/_variables.scss"; // Component diff --git a/packages/material/scss/upload/_variables.scss b/packages/material/scss/upload/_variables.scss index 5adc17c62e8..50dd11beca2 100644 --- a/packages/material/scss/upload/_variables.scss +++ b/packages/material/scss/upload/_variables.scss @@ -1,4 +1,5 @@ // Upload + $kendo-upload-border-width: 1px !default; $kendo-upload-font-family: $font-family !default; $kendo-upload-font-size: $font-size !default; diff --git a/packages/material/scss/utils/_aspect-ratio.scss b/packages/material/scss/utils/_aspect-ratio.scss deleted file mode 100644 index 0d26161b2d1..00000000000 --- a/packages/material/scss/utils/_aspect-ratio.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_aspect-ratio.scss"; diff --git a/packages/material/scss/utils/_border.scss b/packages/material/scss/utils/_border.scss deleted file mode 100644 index 96c150753d7..00000000000 --- a/packages/material/scss/utils/_border.scss +++ /dev/null @@ -1,10 +0,0 @@ -$utils-border-radius: ( - default: $kendo-border-radius-md, - 0: 0, - sm: $kendo-border-radius-sm, - md: $kendo-border-radius-md, - lg: $kendo-border-radius-lg, - full: 9999px -) !default; - -@import "@progress/kendo-theme-default/scss/utils/_border.scss"; diff --git a/packages/material/scss/utils/_display.scss b/packages/material/scss/utils/_display.scss deleted file mode 100644 index dc1a65e77f4..00000000000 --- a/packages/material/scss/utils/_display.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_display.scss"; diff --git a/packages/material/scss/utils/_flex.scss b/packages/material/scss/utils/_flex.scss deleted file mode 100644 index 43548b3cbba..00000000000 --- a/packages/material/scss/utils/_flex.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_flex.scss"; diff --git a/packages/material/scss/utils/_float.scss b/packages/material/scss/utils/_float.scss deleted file mode 100644 index 3a4bcbe39ee..00000000000 --- a/packages/material/scss/utils/_float.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_float.scss"; diff --git a/packages/material/scss/utils/_grid.scss b/packages/material/scss/utils/_grid.scss deleted file mode 100644 index 39816c23a0c..00000000000 --- a/packages/material/scss/utils/_grid.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_grid.scss"; diff --git a/packages/material/scss/utils/_index.scss b/packages/material/scss/utils/_index.scss index e40b85c80ab..6dea880a8db 100644 --- a/packages/material/scss/utils/_index.scss +++ b/packages/material/scss/utils/_index.scss @@ -2,29 +2,7 @@ // Dependencies -@import "../typography/_variables.scss"; // Component -// @import "./_aspect-ratio.scss"; -// @import "./_border.scss"; -// @import "./_display.scss"; -// @import "./_flex.scss"; -// @import "./_float.scss"; -// @import "./_grid.scss"; -// @import "./_order.scss"; -// @import "./_overflow.scss"; -// @import "./_pointer-events.scss"; -// @import "./_position.scss"; -// @import "./_resize.scss"; -// @import "./_spacing.scss"; -// @import "./_spacer.scss"; -// @import "./_table-layout.scss"; -@import "./_text.scss"; -@import "./_theme-colors.scss"; -// @import "./_touch-action.scss"; -// @import "./_transform.scss"; -// @import "./_user-select.scss"; - - @import "@progress/kendo-theme-utils/scss/all.scss"; diff --git a/packages/material/scss/utils/_order.scss b/packages/material/scss/utils/_order.scss deleted file mode 100644 index 1b12e1027fc..00000000000 --- a/packages/material/scss/utils/_order.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_order.scss"; diff --git a/packages/material/scss/utils/_overflow.scss b/packages/material/scss/utils/_overflow.scss deleted file mode 100644 index b83da2498f9..00000000000 --- a/packages/material/scss/utils/_overflow.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_overflow.scss"; diff --git a/packages/material/scss/utils/_pointer-events.scss b/packages/material/scss/utils/_pointer-events.scss deleted file mode 100644 index 1204fc18f01..00000000000 --- a/packages/material/scss/utils/_pointer-events.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_pointer-events.scss"; diff --git a/packages/material/scss/utils/_position.scss b/packages/material/scss/utils/_position.scss deleted file mode 100644 index 0b35bd0e2d8..00000000000 --- a/packages/material/scss/utils/_position.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_position.scss"; diff --git a/packages/material/scss/utils/_resize.scss b/packages/material/scss/utils/_resize.scss deleted file mode 100644 index 86f0d62db87..00000000000 --- a/packages/material/scss/utils/_resize.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_resize.scss"; diff --git a/packages/material/scss/utils/_spacer.scss b/packages/material/scss/utils/_spacer.scss deleted file mode 100644 index 6466439a719..00000000000 --- a/packages/material/scss/utils/_spacer.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_spacer.scss"; diff --git a/packages/material/scss/utils/_spacing.scss b/packages/material/scss/utils/_spacing.scss deleted file mode 100644 index 20038b9723e..00000000000 --- a/packages/material/scss/utils/_spacing.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_spacing.scss"; diff --git a/packages/material/scss/utils/_table-layout.scss b/packages/material/scss/utils/_table-layout.scss deleted file mode 100644 index fc7cccfd8be..00000000000 --- a/packages/material/scss/utils/_table-layout.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_table-layout.scss"; diff --git a/packages/material/scss/utils/_text.scss b/packages/material/scss/utils/_text.scss deleted file mode 100644 index a8345405832..00000000000 --- a/packages/material/scss/utils/_text.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_text.scss"; diff --git a/packages/material/scss/utils/_theme-colors.scss b/packages/material/scss/utils/_theme-colors.scss deleted file mode 100644 index a82c76a542f..00000000000 --- a/packages/material/scss/utils/_theme-colors.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_theme-colors.scss"; diff --git a/packages/material/scss/utils/_touch-action.scss b/packages/material/scss/utils/_touch-action.scss deleted file mode 100644 index a77c7b0ecf0..00000000000 --- a/packages/material/scss/utils/_touch-action.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_touch-action.scss"; diff --git a/packages/material/scss/utils/_transform.scss b/packages/material/scss/utils/_transform.scss deleted file mode 100644 index 636c45c15db..00000000000 --- a/packages/material/scss/utils/_transform.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_transform.scss"; diff --git a/packages/material/scss/utils/_user-select.scss b/packages/material/scss/utils/_user-select.scss deleted file mode 100644 index 9da9eb1223d..00000000000 --- a/packages/material/scss/utils/_user-select.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@progress/kendo-theme-default/scss/utils/_user-select.scss"; diff --git a/packages/material/scss/window/_variables.scss b/packages/material/scss/window/_variables.scss index bd022f4a844..1bca93b0de4 100644 --- a/packages/material/scss/window/_variables.scss +++ b/packages/material/scss/window/_variables.scss @@ -1,4 +1,8 @@ +@import "../action-buttons/_variables.scss"; + + // Window + $kendo-window-border-width: 0px !default; $kendo-window-border-radius: 4px !default; $kendo-window-font-family: $font-family !default; diff --git a/packages/nouvelle/scss/multiselect/_variables.scss b/packages/nouvelle/scss/multiselect/_variables.scss index 3f0434a9e93..ae5ad09d52b 100644 --- a/packages/nouvelle/scss/multiselect/_variables.scss +++ b/packages/nouvelle/scss/multiselect/_variables.scss @@ -1 +1 @@ -// Multi select +// Multiselect diff --git a/packages/utils/scss/_variables.scss b/packages/utils/scss/_variables.scss index 57e23093d67..de71854c585 100644 --- a/packages/utils/scss/_variables.scss +++ b/packages/utils/scss/_variables.scss @@ -1,6 +1,10 @@ $kendo-prefix: k- !default; $kendo-important: true !default; -$kendo-colors: () !default; + +$kendo-theme-colors: () !default; + +$kendo-font-sizes: () !default; + $kendo-spacing: ( // sass-lint:disable-block leading-zero 0: 0, @@ -74,6 +78,15 @@ $kendo-sizing: k-map-merge( $kendo-spacing, ( "fit": fit-content )) !default; +$kendo-border-radii: ( + DEFAULT: .25rem, + 0: 0, + sm: .125rem, + md: .25rem, + lg: .5rem, + full: 9999px +) !default; + // $kendo-utils: ( @@ -340,7 +353,8 @@ $kendo-utils: ( row: row, col: column, row-dense: row dense, - col-dense: column dense + col-dense: column dense, + unset: unset ), "grid-auto-columns": ( auto: auto, @@ -510,7 +524,14 @@ $kendo-utils: ( center, justify ), - "text-color": (), + "text-color": k-map-merge( $kendo-theme-colors, ( + // sass-lint:disable-block indentation + "inherit": inherit, + "current": currentColor, + "transparent": transparent, + "black": black, + "white": white + )), "text-decoration": (), "text-decoration-width": (), "text-decoration-style": (), @@ -536,6 +557,13 @@ $kendo-utils: ( "word-break": (), // Background + "background-color": k-map-merge( $kendo-theme-colors, ( + // sass-lint:disable-block indentation + "inherit": inherit, + "transparent": transparent, + "black": black, + "white": white + )), // Border "border-width": ( @@ -553,16 +581,15 @@ $kendo-utils: ( hidden, none ), - "border-color": (), - "border-radius": ( - DEFAULT: .25rem, - 0: 0, - sm: .125rem, - md: .25rem, - lg: .5rem, - none: 0, - full: 9999px - ), + "border-color": k-map-merge( $kendo-theme-colors, ( + // sass-lint:disable-block indentation + "inherit": inherit, + "current": currentColor, + "transparent": transparent, + "black": black, + "white": white + )), + "border-radius": $kendo-border-radii, "outline-width": ( DEFAULT: 1px, 0: 0, diff --git a/packages/utils/scss/background/_background-color.scss b/packages/utils/scss/background/_background-color.scss new file mode 100644 index 00000000000..e16de5a4f29 --- /dev/null +++ b/packages/utils/scss/background/_background-color.scss @@ -0,0 +1,5 @@ +// TODO DOCS + +$kendo-utils-background-color: k-map-get( $kendo-utils, "background-color" ) !default; + +@include generate-utils( bg, background-color, $kendo-utils-background-color ); diff --git a/packages/utils/scss/background/index.import.scss b/packages/utils/scss/background/index.import.scss new file mode 100644 index 00000000000..163f9ce87b3 --- /dev/null +++ b/packages/utils/scss/background/index.import.scss @@ -0,0 +1 @@ +@import "./_background-color.scss"; diff --git a/packages/utils/scss/border/_border-width.scss b/packages/utils/scss/border/_border-width.scss index ef5dec3ce2a..445b626dbd5 100644 --- a/packages/utils/scss/border/_border-width.scss +++ b/packages/utils/scss/border/_border-width.scss @@ -9,3 +9,10 @@ $kendo-utils-border-width: k-map-get( $kendo-utils, "border-width" ) !default; @include generate-utils( border-l, border-left-width, $kendo-utils-border-width ); @include generate-utils( border-x, border-inline-width, $kendo-utils-border-width ); @include generate-utils( border-y, border-block-width, $kendo-utils-border-width ); + + +// Legacy aliases +@include generate-utils( border-top, border-top-width, $kendo-utils-border-width ); +@include generate-utils( border-right, border-right-width, $kendo-utils-border-width ); +@include generate-utils( border-bottom, border-bottom-width, $kendo-utils-border-width ); +@include generate-utils( border-left, border-left-width, $kendo-utils-border-width ); diff --git a/packages/utils/scss/flex-grid/_flex-direction.scss b/packages/utils/scss/flex-grid/_flex-direction.scss index 6e1ffc8e1f7..3a18ead003a 100644 --- a/packages/utils/scss/flex-grid/_flex-direction.scss +++ b/packages/utils/scss/flex-grid/_flex-direction.scss @@ -22,3 +22,8 @@ $kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !default; @include generate-utils( flex, flex-direction, $kendo-utils-flex-direction ); + + +// Legacy aliases +.#{$kendo-prefix}flex-column { @extend .#{$kendo-prefix}flex-col !optional; } +.#{$kendo-prefix}flex-column-reverse { @extend .#{$kendo-prefix}flex-col-reverse !optional; } diff --git a/packages/utils/scss/flex-grid/_grid-column-start-end.scss b/packages/utils/scss/flex-grid/_grid-column-start-end.scss index 6b583b9a85d..48bfdf929a6 100644 --- a/packages/utils/scss/flex-grid/_grid-column-start-end.scss +++ b/packages/utils/scss/flex-grid/_grid-column-start-end.scss @@ -13,4 +13,9 @@ $kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !defa $kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default; @include generate-utils( col-span, grid-column, $kendo-utils-grid-column-span ); + + +// Legacy aliases @include generate-utils( colspan, grid-column, $kendo-utils-grid-column-span ); +.#{$kendo-prefix}colspan-all { @extend .#{$kendo-prefix}colspan-full !optional; } // sass-lint:disable-line class-name-format +.\!#{$kendo-prefix}colspan-all { @extend .\!#{$kendo-prefix}colspan-full !optional; } // sass-lint:disable-line class-name-format diff --git a/packages/utils/scss/flex-grid/_grid-row-start-end.scss b/packages/utils/scss/flex-grid/_grid-row-start-end.scss index 89984e084c4..2637e0789d9 100644 --- a/packages/utils/scss/flex-grid/_grid-row-start-end.scss +++ b/packages/utils/scss/flex-grid/_grid-row-start-end.scss @@ -13,4 +13,9 @@ $kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default; $kendo-utils-grid-row-span: k-map-get( $kendo-utils, "grid-row-span" ) !default; @include generate-utils( row-span, grid-row, $kendo-utils-grid-row-span ); + + +// Legacy aliases @include generate-utils( rowspan, grid-row, $kendo-utils-grid-row-span ); +.#{$kendo-prefix}rowspan-all { @extend .#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format +.\!#{$kendo-prefix}rowspan-all { @extend .\!#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format diff --git a/packages/utils/scss/index.import.scss b/packages/utils/scss/index.import.scss index 1fc96325b81..022830a23f0 100644 --- a/packages/utils/scss/index.import.scss +++ b/packages/utils/scss/index.import.scss @@ -8,7 +8,7 @@ @import "./spacing/index.import.scss"; @import "./sizing/index.import.scss"; @import "./typography/index.import.scss"; -// background +@import "./background/index.import.scss"; @import "./border/index.import.scss"; // effects // filter diff --git a/packages/utils/scss/interactivity/_pointer-events.scss b/packages/utils/scss/interactivity/_pointer-events.scss index 57e83b80fe7..6d70e953473 100644 --- a/packages/utils/scss/interactivity/_pointer-events.scss +++ b/packages/utils/scss/interactivity/_pointer-events.scss @@ -1,3 +1,5 @@ +// 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. /// @name .k-pointer-events-none /// @group pointer-events diff --git a/packages/utils/scss/interactivity/_resize.scss b/packages/utils/scss/interactivity/_resize.scss index c2db53fbd73..6a3b453cce9 100644 --- a/packages/utils/scss/interactivity/_resize.scss +++ b/packages/utils/scss/interactivity/_resize.scss @@ -1,3 +1,5 @@ +// 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. /// @name .k-resize /// @group resize diff --git a/packages/utils/scss/layout/_aspect-ratio.scss b/packages/utils/scss/layout/_aspect-ratio.scss index 0d85d47dc16..7ae612db085 100644 --- a/packages/utils/scss/layout/_aspect-ratio.scss +++ b/packages/utils/scss/layout/_aspect-ratio.scss @@ -23,3 +23,7 @@ $kendo-utils-aspect-ratio: k-map-get( $kendo-utils, "aspect-ratio" ) !default; @include generate-utils( ratio, aspect-ratio, $kendo-utils-aspect-ratio ); + + +// Legacy aliases +@include generate-utils( aspect-ratio, aspect-ratio, $kendo-utils-aspect-ratio ); diff --git a/packages/utils/scss/layout/_display.scss b/packages/utils/scss/layout/_display.scss index 85558b9171f..ca566859796 100644 --- a/packages/utils/scss/layout/_display.scss +++ b/packages/utils/scss/layout/_display.scss @@ -58,5 +58,10 @@ $kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default; @include generate-utils( d, display, $kendo-utils-display ); + // Legacy alias @include generate-utils( display, display, $kendo-utils-display ); +.#{$kendo-prefix}d-flex-row { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-row !optional; } +.\!#{$kendo-prefix}d-flex-row { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format +.#{$kendo-prefix}d-flex-col { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-col !optional; } +.\!#{$kendo-prefix}d-flex-col { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format diff --git a/packages/utils/scss/layout/_position.scss b/packages/utils/scss/layout/_position.scss index 53a310cd084..b7a114ede20 100644 --- a/packages/utils/scss/layout/_position.scss +++ b/packages/utils/scss/layout/_position.scss @@ -61,25 +61,25 @@ $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default; .#{$kendo-prefix}top-start, .#{$kendo-prefix}pos-top-start { top: 0; - left: 0; + inset-inline-start: 0; } .#{$kendo-prefix}top-end, .#{$kendo-prefix}pos-top-end { top: 0; - right: 0; + inset-inline-end: 0; } .#{$kendo-prefix}bottom-start, .#{$kendo-prefix}pos-bottom-start { bottom: 0; - left: 0; + inset-inline-start: 0; } .#{$kendo-prefix}bottom-end, .#{$kendo-prefix}pos-bottom-end { bottom: 0; - right: 0; + inset-inline-end: 0; } .#{$kendo-prefix}top-center, diff --git a/packages/utils/scss/typography/_font-size.scss b/packages/utils/scss/typography/_font-size.scss index 7a6d277292b..1003eb5dd3f 100644 --- a/packages/utils/scss/typography/_font-size.scss +++ b/packages/utils/scss/typography/_font-size.scss @@ -3,3 +3,7 @@ $kendo-utils-font-size: k-map-get( $kendo-utils, "font-size" ) !default; @include generate-utils( font-size, font-size, $kendo-utils-font-size ); + + +// Legacy aliases +@include generate-utils( fs, font-size, $kendo-utils-font-size ); diff --git a/packages/utils/scss/typography/_font-weight.scss b/packages/utils/scss/typography/_font-weight.scss index 98e5af19deb..aa49e7eca50 100644 --- a/packages/utils/scss/typography/_font-weight.scss +++ b/packages/utils/scss/typography/_font-weight.scss @@ -3,3 +3,7 @@ $kendo-utils-font-weight: k-map-get( $kendo-utils, "font-weight" ) !default; @include generate-utils( font, font-weight, $kendo-utils-font-weight ); + + +// Legacy aliases +@include generate-utils( font-weight, font-weight, $kendo-utils-font-weight ); diff --git a/packages/utils/scss/typography/_text-align.scss b/packages/utils/scss/typography/_text-align.scss index 200ce116538..6d0050bb790 100644 --- a/packages/utils/scss/typography/_text-align.scss +++ b/packages/utils/scss/typography/_text-align.scss @@ -1,3 +1,5 @@ +// Text-align documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-align. + /// This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box. /// @name .k-text-left /// @group text-align diff --git a/packages/utils/scss/typography/_text-color.scss b/packages/utils/scss/typography/_text-color.scss new file mode 100644 index 00000000000..78e5e8199f1 --- /dev/null +++ b/packages/utils/scss/typography/_text-color.scss @@ -0,0 +1,9 @@ +// TODO DOCS + +$kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default; + +@include generate-utils( text, color, $kendo-utils-text-color ); + + +// Legacy aliases +@include generate-utils( color, color, $kendo-utils-text-color ); diff --git a/packages/utils/scss/typography/_text-transform.scss b/packages/utils/scss/typography/_text-transform.scss index ef1ca8a481c..73f30e5cd15 100644 --- a/packages/utils/scss/typography/_text-transform.scss +++ b/packages/utils/scss/typography/_text-transform.scss @@ -1,4 +1,4 @@ -// TODO DOCS +// Text-transform documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform. /// This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase. /// @name k-text-lowercase diff --git a/packages/utils/scss/typography/_white-space.scss b/packages/utils/scss/typography/_white-space.scss index 094215d49c0..cd157001eea 100644 --- a/packages/utils/scss/typography/_white-space.scss +++ b/packages/utils/scss/typography/_white-space.scss @@ -1,3 +1,5 @@ +// White-space documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/white-space. + /// 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. /// @name .k-white-space-normal /// @group white-space @@ -32,3 +34,8 @@ $kendo-utils-white-space: k-map-get( $kendo-utils, "white-space" ) !default; @include generate-utils( white-space, white-space, $kendo-utils-white-space ); +@include generate-utils( whitespace, white-space, $kendo-utils-white-space ); + + +// Legacy aliases +.#{$kendo-prefix}text-nowrap { @extend .#{$kendo-prefix}white-space-nowrap !optional; } diff --git a/packages/utils/scss/typography/index.import.scss b/packages/utils/scss/typography/index.import.scss index ac17226a186..13c38f9de40 100644 --- a/packages/utils/scss/typography/index.import.scss +++ b/packages/utils/scss/typography/index.import.scss @@ -8,10 +8,16 @@ // line height // list style @import "./_text-align.scss"; -// text color +@import "./_text-color.scss"; // text decoration @import "./_text-transform.scss"; // text overflow // text indent // vertical align @import "./_white-space.scss"; + + +/// This is equivalent to `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`. +/// @name .k-text-ellipsis +/// @group text +.#{$kendo-prefix}text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // sass-lint:disable-line one-declaration-per-line