diff --git a/packages/bootstrap/scss/breadcrumb/_variables.scss b/packages/bootstrap/scss/breadcrumb/_variables.scss index 71ef8dc957f..0ced7ffd7b5 100644 --- a/packages/bootstrap/scss/breadcrumb/_variables.scss +++ b/packages/bootstrap/scss/breadcrumb/_variables.scss @@ -1,59 +1,232 @@ // Breadcrumb +/// The width of the border around the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-border-width: 0px !default; + +/// The horizontal margin of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-margin-x: null !default; +/// The vertical margin of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-margin-y: null !default; + +/// The horizontal padding of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-padding-x: null !default; +/// The vertical padding of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-padding-y: null !default; -$kendo-breadcrumb-border-width: 0px !default; +/// The font family of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-font-family: $kendo-font-family !default; + +/// The font size of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-font-size: $kendo-font-size-md !default; +/// The font size of the small Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-font-size: $kendo-font-size-sm !default; +/// The font size of the medium Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default; +/// The font size of the large Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-font-size: $kendo-font-size-md !default; + +/// The line-height of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-line-height: $kendo-line-height-md !default; +/// The line-height of the small Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-line-height: k-math-div( 20, 14 ) !default; +/// The line-height of the medium Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default; +/// The line-height of the height Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-line-height: $kendo-line-height-md !default; +/// The base background of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-bg: $kendo-component-bg !default; +/// The base text color of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-text: $kendo-component-text !default; +/// The base border color of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-border: $kendo-component-border !default; +/// The box shadow of the focused Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default; + +/// The horizontal padding of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 3 ) !default; +/// The horizontal padding of the small Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 3 ) !default; +/// The horizontal padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default; +/// The horizontal padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 3 ) !default; + +/// The vertical padding of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default; +/// The vertical padding of the small Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default; +/// The vertical padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default; +/// The vertical padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default; + +/// The border-radius of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default; -$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default; -$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default; +/// The vertical padding of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default; +/// The vertical padding of the small Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default; +/// The vertical padding of the medium Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default; +/// The vertical padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3.5 ) !default; -$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default; -$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default; +/// The horizontal padding of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default; +/// The horizontal padding of the small Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default; +/// The horizontal padding of the medium Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default; +/// The horizontal padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default; +/// The text color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-initial-text: inherit !default; +/// The spacing of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default; +/// The background color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-bg: null !default; +/// The text color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-text: $kendo-link-text !default; +/// The border color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-border: null !default; +/// The background color of the hovered Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-hover-bg: null !default; +/// The text color of the hovered Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !default; +/// The border color of the hovered Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-hover-border: null !default; +/// The background color of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-bg: null !default; +/// The text color of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-text: null !default; +/// The border color of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-border: null !default; +/// The box shadow of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-shadow: inset 0 0 0 3px rgba( $kendo-breadcrumb-text, .25 ) !default; +/// The background color of the Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-bg: null !default; +/// The text color of the Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-text: $kendo-link-text !default; +/// The border color of the Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-border: null !default; +/// The background color of the hovered Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-hover-bg: null !default; +/// The text color of the hovered Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-hover-text: $kendo-link-hover-text !default; +/// The border color of the hovered Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-hover-border: null !default; +/// The background color of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-bg: null !default; +/// The text color of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-text: null !default; +/// The border color of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-border: null !default; +/// The box shadow of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default; +/// The background color of the current Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-current-item-bg: null !default; +/// The text color of the current Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-current-item-text: $kendo-color-secondary !default; +/// The border color of the current Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-current-item-border: null !default; -$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default; + +/// The sizes map for the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sizes: ( + sm: ( + link-padding-x: $kendo-breadcrumb-sm-link-padding-x, + link-padding-y: $kendo-breadcrumb-sm-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y, + font-size: $kendo-breadcrumb-sm-font-size, + line-height: $kendo-breadcrumb-sm-line-height + ), + md: ( + link-padding-x: $kendo-breadcrumb-md-link-padding-x, + link-padding-y: $kendo-breadcrumb-md-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y, + font-size: $kendo-breadcrumb-md-font-size, + line-height: $kendo-breadcrumb-md-line-height + ), + lg: ( + link-padding-x: $kendo-breadcrumb-lg-link-padding-x, + link-padding-y: $kendo-breadcrumb-lg-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y, + font-size: $kendo-breadcrumb-lg-font-size, + line-height: $kendo-breadcrumb-lg-line-height + ) +) !default; diff --git a/packages/classic/scss/breadcrumb/_variables.scss b/packages/classic/scss/breadcrumb/_variables.scss index 306608032ad..d4f61b0691e 100644 --- a/packages/classic/scss/breadcrumb/_variables.scss +++ b/packages/classic/scss/breadcrumb/_variables.scss @@ -1,59 +1,230 @@ // Breadcrumb +/// The width of the border around the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-border-width: 0px !default; + +/// The horizontal margin of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-margin-x: null !default; +/// The vertical margin of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-margin-y: null !default; + +/// The horizontal padding of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-padding-x: null !default; +/// The vertical padding of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-padding-y: null !default; -$kendo-breadcrumb-border-width: 0px !default; +/// The font family of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-font-family: $kendo-font-family !default; + +/// The font size of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-font-size: $kendo-font-size-md !default; +/// The font size of the small Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-font-size: $kendo-font-size-md !default; +/// The font size of the medium Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default; +/// The font size of the large Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-font-size: $kendo-font-size-lg !default; + +/// The line-height of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-line-height: $kendo-line-height-md !default; +/// The line-height of the small Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default; +/// The line-height of the medium Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default; +/// The line-height of the height Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-line-height: $kendo-line-height-lg !default; +/// The base background of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-bg: $kendo-component-bg !default; +/// The base text color of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-text: $kendo-component-text !default; +/// The base border color of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-border: $kendo-component-border !default; +/// The box shadow of the focused Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default; + +/// The horizontal padding of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default; +/// The horizontal padding of the small Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default; +/// The horizontal padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default; +/// The horizontal padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default; + +/// The vertical padding of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default; +/// The vertical padding of the small Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default; +/// The vertical padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default; +/// The vertical padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default; + +/// The border-radius of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default; -$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default; -$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default; +/// The vertical padding of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default; +/// The vertical padding of the small Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default; +/// The vertical padding of the medium Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default; +/// The vertical padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default; -$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default; -$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default; +/// The horizontal padding of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default; +/// The horizontal padding of the small Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default; +/// The horizontal padding of the medium Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default; +/// The horizontal padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default; +/// The text color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-initial-text: inherit !default; +/// The spacing of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default; +/// The background color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-bg: null !default; +/// The text color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-text: $kendo-link-text !default; +/// The border color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-border: null !default; +/// @group breadcrumb $kendo-breadcrumb-link-hover-bg: $kendo-base-bg !default; +/// The text color of the hovered Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !default; +/// The border color of the hovered Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-hover-border: null !default; +/// The background color of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-bg: null !default; +/// The text color of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-text: $kendo-link-text !default; +/// The border color of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-border: null !default; +/// The box shadow of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-shadow: $kendo-focus-shadow !default; +/// The background color of the Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-bg: null !default; +/// The text color of the Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-text: null !default; +/// The border color of the Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-border: null !default; +/// The background color of the hovered Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-hover-bg: $kendo-base-bg !default; +/// The text color of the hovered Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-hover-text: null !default; +/// The border color of the hovered Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-hover-border: null !default; +/// The background color of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-bg: null !default; +/// The text color of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-text: null !default; +/// The border color of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-border: null !default; +/// The box shadow of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default; +/// The background color of the current Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-current-item-bg: null !default; +/// The text color of the current Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-current-item-text: null !default; +/// The border color of the current Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-current-item-border: null !default; -$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default; +/// The sizes map for the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sizes: ( + sm: ( + link-padding-x: $kendo-breadcrumb-sm-link-padding-x, + link-padding-y: $kendo-breadcrumb-sm-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y, + font-size: $kendo-breadcrumb-sm-font-size, + line-height: $kendo-breadcrumb-sm-line-height + ), + md: ( + link-padding-x: $kendo-breadcrumb-md-link-padding-x, + link-padding-y: $kendo-breadcrumb-md-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y, + font-size: $kendo-breadcrumb-md-font-size, + line-height: $kendo-breadcrumb-md-line-height + ), + lg: ( + link-padding-x: $kendo-breadcrumb-lg-link-padding-x, + link-padding-y: $kendo-breadcrumb-lg-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y, + font-size: $kendo-breadcrumb-lg-font-size, + line-height: $kendo-breadcrumb-lg-line-height + ) +) !default; diff --git a/packages/default/scss/breadcrumb/_layout.scss b/packages/default/scss/breadcrumb/_layout.scss index d1601594cc8..3b4340b1b4e 100644 --- a/packages/default/scss/breadcrumb/_layout.scss +++ b/packages/default/scss/breadcrumb/_layout.scss @@ -11,8 +11,6 @@ box-sizing: border-box; outline: 0; font-family: $kendo-breadcrumb-font-family; - font-size: $kendo-breadcrumb-font-size; - line-height: $kendo-breadcrumb-line-height; display: flex; flex-direction: row; -webkit-touch-callout: none; @@ -64,8 +62,6 @@ .k-breadcrumb-link, .k-breadcrumb-root-link { @include border-radius( $kendo-breadcrumb-link-border-radius ); - padding-block: $kendo-breadcrumb-link-padding-y; - padding-inline: $kendo-breadcrumb-link-padding-x; color: $kendo-breadcrumb-link-initial-text; text-decoration: none; white-space: nowrap; @@ -79,21 +75,12 @@ transition: $kendo-transition; } - .k-breadcrumb-root-link { - margin-inline-end: $kendo-breadcrumb-root-link-spacing; - } - .k-breadcrumb-link > .k-image, .k-breadcrumb-icontext-link .k-icon, .k-breadcrumb-icontext-link .k-svg-icon { margin-inline-end: $kendo-breadcrumb-link-icon-spacing; } - .k-breadcrumb-icon-link { - padding-block: $kendo-breadcrumb-icon-link-padding-y; - padding-inline: $kendo-breadcrumb-icon-link-padding-x; - } - // Breadcrumb delimiter .k-breadcrumb-delimiter, @@ -112,6 +99,34 @@ } } + + // Sizes + @each $size, $size-props in $kendo-breadcrumb-sizes { + $_link-padding-x: k-map-get( $size-props, link-padding-x ); + $_link-padding-y: k-map-get( $size-props, link-padding-y ); + $_icon-link-padding-x: k-map-get( $size-props, icon-link-padding-x ); + $_icon-link-padding-y: k-map-get( $size-props, icon-link-padding-y ); + $_font-size: k-map-get( $size-props, font-size ); + $_line-height: k-map-get( $size-props, line-height ); + + .k-breadcrumb-#{$size} { + font-size: $_font-size; + line-height: $_line-height; + + + .k-breadcrumb-link, + .k-breadcrumb-root-link { + padding-block: $_link-padding-y; + padding-inline: $_link-padding-x; + } + + .k-breadcrumb-icon-link { + padding-block: $_icon-link-padding-y; + padding-inline: $_icon-link-padding-x; + } + } + } + } diff --git a/packages/default/scss/breadcrumb/_variables.scss b/packages/default/scss/breadcrumb/_variables.scss index ed6a9fe1029..8817599e437 100644 --- a/packages/default/scss/breadcrumb/_variables.scss +++ b/packages/default/scss/breadcrumb/_variables.scss @@ -1,59 +1,230 @@ // Breadcrumb +/// The width of the border around the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-border-width: 0px !default; + +/// The horizontal margin of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-margin-x: null !default; +/// The vertical margin of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-margin-y: null !default; +/// The horizontal padding of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-padding-x: null !default; +/// The vertical padding of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-padding-y: null !default; -$kendo-breadcrumb-border-width: 0px !default; +/// The font family of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-font-family: $kendo-font-family !default; + +/// The font size of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-font-size: $kendo-font-size-md !default; +/// The font size of the small Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-font-size: $kendo-font-size-md !default; +/// The font size of the medium Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default; +/// The font size of the large Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-font-size: $kendo-font-size-lg !default; + +/// The line-height of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-line-height: $kendo-line-height-md !default; +/// The line-height of the small Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default; +/// The line-height of the medium Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default; +/// The line-height of the height Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-line-height: $kendo-line-height-lg !default; +/// The base background of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-bg: $kendo-component-bg !default; +/// The base text color of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-text: $kendo-component-text !default; +/// The base border color of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-border: $kendo-component-border !default; +/// The box shadow of the focused Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default; + +/// The horizontal padding of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default; +/// The horizontal padding of the small Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default; +/// The horizontal padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default; +/// The horizontal padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default; + +/// The vertical padding of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default; +/// The vertical padding of the small Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default; +/// The vertical padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default; +/// The vertical padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default; + +/// The border-radius of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default; -$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default; -$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default; +/// The vertical padding of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default; +/// The vertical padding of the small Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default; +/// The vertical padding of the medium Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default; +/// The vertical padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default; -$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default; -$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default; +/// The horizontal padding of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default; +/// The horizontal padding of the small Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default; +/// The horizontal padding of the medium Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default; +/// The horizontal padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default; +/// The text color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-initial-text: inherit !default; +/// The spacing of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default; +/// The background color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-bg: null !default; +/// The text color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-text: $kendo-link-text !default; +/// The border color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-border: null !default; +/// The background color of the hovered Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-hover-bg: $kendo-base-bg !default; +/// The text color of the hovered Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !default; +/// The border color of the hovered Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-hover-border: null !default; +/// The background color of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-bg: null !default; +/// The text color of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-text: $kendo-link-text !default; +/// The border color of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-border: null !default; +/// The box shadow of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-shadow: $kendo-focus-shadow !default; +/// The background color of the Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-bg: null !default; +/// The text color of the Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-text: null !default; +/// The border color of the Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-border: null !default; +/// The background color of the hovered Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-hover-bg: $kendo-base-bg !default; +/// The text color of the hovered Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-hover-text: null !default; +/// The border color of the hovered Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-hover-border: null !default; +/// The background color of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-bg: null !default; +/// The text color of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-text: null !default; +/// The border color of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-border: null !default; +/// The box shadow of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default; +/// The background color of the current Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-current-item-bg: null !default; +/// The text color of the current Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-current-item-text: null !default; +/// The border color of the current Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-current-item-border: null !default; -$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default; +/// The sizes map for the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sizes: ( + sm: ( + link-padding-x: $kendo-breadcrumb-sm-link-padding-x, + link-padding-y: $kendo-breadcrumb-sm-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y, + font-size: $kendo-breadcrumb-sm-font-size, + line-height: $kendo-breadcrumb-sm-line-height + ), + md: ( + link-padding-x: $kendo-breadcrumb-md-link-padding-x, + link-padding-y: $kendo-breadcrumb-md-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y, + font-size: $kendo-breadcrumb-md-font-size, + line-height: $kendo-breadcrumb-md-line-height + ), + lg: ( + link-padding-x: $kendo-breadcrumb-lg-link-padding-x, + link-padding-y: $kendo-breadcrumb-lg-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y, + font-size: $kendo-breadcrumb-lg-font-size, + line-height: $kendo-breadcrumb-lg-line-height + ) +) !default; diff --git a/packages/fluent/scss/breadcrumb/_layout.scss b/packages/fluent/scss/breadcrumb/_layout.scss index 4b7693423c6..aa6213bac0c 100644 --- a/packages/fluent/scss/breadcrumb/_layout.scss +++ b/packages/fluent/scss/breadcrumb/_layout.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @use "../core/" as *; @use "./_variables.scss" as *; @@ -14,8 +15,8 @@ box-sizing: border-box; outline: 0; font-family: var( --kendo-breadcrumb-font-family, #{$kendo-breadcrumb-font-family} ); - font-size: var( --kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} ); - line-height: var( --kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} ); + font-size: var( --INTERNAL--kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} ); + line-height: var( --INTERNAL--kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} ); display: flex; flex-direction: row; -webkit-touch-callout: none; @@ -67,8 +68,8 @@ .k-breadcrumb-link, .k-breadcrumb-root-link { @include border-radius( var( --kendo-breadcrumb-border-radius, #{$kendo-breadcrumb-link-border-radius} ) ); - padding-inline: var( --kendo-breadcrumb-link-padding-x, #{$kendo-breadcrumb-link-padding-x} ); - padding-block: var( --kendo-breadcrumb-link-padding-y, #{$kendo-breadcrumb-link-padding-y} ); + padding-inline: var( --INTERNAL--kendo-breadcrumb-link-padding-x, #{$kendo-breadcrumb-link-padding-x} ); + padding-block: var( --INTERNAL--kendo-breadcrumb-link-padding-y, #{$kendo-breadcrumb-link-padding-y} ); color: var( --kendo-breadcrumb-link-initial-text, #{$kendo-breadcrumb-link-initial-text} ); text-decoration: none; white-space: nowrap; @@ -92,10 +93,6 @@ } } - .k-breadcrumb-root-link { - margin-inline-end: var( --kendo-breadcrumb-root-link-spacing, #{$kendo-breadcrumb-root-link-spacing} ); - } - .k-breadcrumb-link > .k-image, .k-breadcrumb-icontext-link .k-icon, .k-breadcrumb-icontext-link .k-svg-icon { @@ -103,8 +100,8 @@ } .k-breadcrumb-icon-link { - padding-inline: var( --kendo-breadcrumb-icon-link-padding-x, #{$kendo-breadcrumb-icon-link-padding-x} ); - padding-block: var( --kendo-breadcrumb-icon-link-padding-y, #{$kendo-breadcrumb-icon-link-padding-y} ); + padding-inline: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-x, #{$kendo-breadcrumb-icon-link-padding-x} ); + padding-block: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-y, #{$kendo-breadcrumb-icon-link-padding-y} ); } @@ -124,4 +121,34 @@ } } + + // Sizing + @each $size, $size-props in $kendo-breadcrumb-sizes { + $_link-padding-x: map.get( $size-props, link-padding-x ); + $_link-padding-y: map.get( $size-props, link-padding-y ); + $_icon-link-padding-x: map.get( $size-props, icon-link-padding-x ); + $_icon-link-padding-y: map.get( $size-props, icon-link-padding-y ); + $_font-size: map.get( $size-props, font-size ); + $_line-height: map.get( $size-props, line-height ); + + // Breadcrumb sizes + .k-breadcrumb-#{$size} { + --INTERNAL--kendo-breadcrumb-font-size: var( --kendo-breadcrumb-#{$size}-font-size, #{$_font-size} ); + --INTERNAL--kendo-breadcrumb-line-height: var( --kendo-breadcrumb-#{$size}-line-height, #{$_line-height} ); + + // Breadcrumb links + .k-breadcrumb-link, + .k-breadcrumb-root-link { + --INTERNAL--kendo-breadcrumb-link-padding-x: var( --kendo-breadcrumb-#{$size}-link-padding-x, #{$_link-padding-x} ); + --INTERNAL--kendo-breadcrumb-link-padding-y: var( --kendo-breadcrumb-#{$size}-link-padding-y, #{$_link-padding-y} ); + } + + // Breadcrumb icon links + .k-breadcrumb-icon-link { + --INTERNAL--kendo-breadcrumb-icon-link-padding-x: var( --kendo-breadcrumb-#{$size}-icon-link-padding-x, #{$_icon-link-padding-x} ); + --INTERNAL--kendo-breadcrumb-icon-link-padding-y: var( --kendo-breadcrumb-#{$size}-icon-link-padding-y, #{$_icon-link-padding-y} ); + } + } + } + } diff --git a/packages/fluent/scss/breadcrumb/_variables.scss b/packages/fluent/scss/breadcrumb/_variables.scss index 63f73267fd7..ae063abf1c5 100644 --- a/packages/fluent/scss/breadcrumb/_variables.scss +++ b/packages/fluent/scss/breadcrumb/_variables.scss @@ -2,62 +2,105 @@ @use "../core/" as *; @use "../icon/_variables.scss" as *; -/// The horizontal margin of the breadcrumb +/// The horizontal margin of the Breadcrumb /// @group breadcrumb $kendo-breadcrumb-margin-x: 0px !default; -/// The vertical margin of the breadcrumb +/// The vertical margin of the Breadcrumb /// @group breadcrumb $kendo-breadcrumb-margin-y: 0px !default; -/// The horizontal padding of the breadcrumb +/// The horizontal padding of the Breadcrumb /// @group breadcrumb $kendo-breadcrumb-padding-x: 0px !default; -/// The vertical padding of the breadcrumb +/// The vertical padding of the Breadcrumb /// @group breadcrumb $kendo-breadcrumb-padding-y: 0px !default; -/// The width of the border around the breadcrumb + +/// The width of the border around the Breadcrumb /// @group breadcrumb $kendo-breadcrumb-border-width: 0px !default; -/// The font family of the breadcrumb + +/// The font family of the Breadcrumb /// @group breadcrumb $kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default; -/// The font size of the breadcrumb +/// The font size of the Breadcrumb + /// @group breadcrumb $kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default; -/// The line height of the breadcrumb +/// The font size of the small breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-font-size: var( --kendo-font-size-md, inherit ) !default; +/// The font size of the medium breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-font-size: var( --kendo-font-size-md, inherit ) !default; +/// The font size of the large breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-font-size: var( --kendo-font-size-md, inherit ) !default; + +/// The line height used along with the $kendo-font-size variable of the Breadcrumb. /// @group breadcrumb $kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default; -/// The background color of the breadcrumb +/// The line height used along with the $kendo-font-size variable of the small breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-line-height: var( --kendo-line-height, normal ) !default; +/// The line height used along with the $kendo-font-size variable of the medium breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-line-height: var( --kendo-line-height, normal ) !default; +/// The line height used along with the $kendo-font-size variable of the large breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default; + +/// The background color of the Breadcrumb /// @group breadcrumb $kendo-breadcrumb-bg: var( --kendo-component-bg, initial ) !default; -/// The text color of the breadcrumb +/// The text color of the Breadcrumb /// @group breadcrumb -$kendo-breadcrumb-text: k-get-theme-color-var( neutral-130 ) !default; -/// The border color of the breadcrumb +$kendo-breadcrumb-text: get-theme-color-var( neutral-130 ) !default; +/// The border color of the Breadcrumb /// @group breadcrumb $kendo-breadcrumb-border: transparent !default; /// The box shadow of the focused breadcrumb /// @group breadcrumb $kendo-breadcrumb-focus-shadow: 0 0 0 1px k-get-theme-color-var( neutral-30 ) !default; -/// The horizontal padding of the breadcrumb link +/// The horizontal padding of the Breadcrumb link /// @group breadcrumb $kendo-breadcrumb-link-padding-x: map.get( $kendo-spacing, 2 ) !default; -/// The vertical padding of the breadcrumb link +/// The horizontal padding of the small Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-sm-link-padding-x: map.get( $kendo-spacing, 2 ) !default; +/// The horizontal padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default; +/// The horizontal padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-x: map.get( $kendo-spacing, 2 ) !default; + +/// The vertical padding of the Breadcrumb link +/// @group breadcrumb +$kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 2 ) !default; +/// The vertical padding of the small Breadcrumb link. /// @group breadcrumb -$kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default; -/// The radius of the border around the breadcrumb link +$kendo-breadcrumb-sm-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default; +/// The vertical padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default; +/// The vertical padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-y: map.get( $kendo-spacing, 2.5 ) !default; + +/// The radius of the border around the Breadcrumb link /// @group breadcrumb $kendo-breadcrumb-link-border-radius: 0px !default; -/// The initial text color of the breadcrumb link +/// The initial text color of the Breadcrumb link /// @group breadcrumb $kendo-breadcrumb-link-initial-text: inherit !default; -/// The background color of the breadcrumb link +/// The background color of the Breadcrumb link /// @group breadcrumb $kendo-breadcrumb-link-bg: transparent !default; -/// The text color of the breadcrumb link +/// The text color of the Breadcrumb link /// @group breadcrumb -$kendo-breadcrumb-link-text: k-get-theme-color-var( neutral-130 ) !default; -/// The borer color of the breadcrumb link +$kendo-breadcrumb-link-text: get-theme-color-var( neutral-130 ) !default; +/// The borer color of the Breadcrumb link /// @group breadcrumb $kendo-breadcrumb-link-border: transparent !default; /// The background color of the hovered breadcrumb link @@ -86,8 +129,8 @@ $kendo-breadcrumb-link-focus-bg: transparent !default; $kendo-breadcrumb-link-focus-text: k-get-theme-color-var( neutral-190 ) !default; /// The box shadow of the focused breadcrumb link /// @group breadcrumb -$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 1px k-get-theme-color-var( neutral-130 ) !default; -/// The focus and hover background color of the breadcrumb link +$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 1px get-theme-color-var( neutral-130 ) !default; +/// The focus and hover background color of the Breadcrumb link /// @group breadcrumb $kendo-breadcrumb-link-focus-hover-bg: var( --kendo-hover-bg, initial ) !default; /// The background color of the disabled breadcrumb link @@ -99,7 +142,7 @@ $kendo-breadcrumb-link-disabled-text: var( --kendo-disabled-text, initial ) !def /// The border color of the disabled breadcrumb link /// @group breadcrumb $kendo-breadcrumb-link-disabled-border: none !default; -/// The background color of selected the breadcrumb link +/// The background color of selected the Breadcrumb link /// @group breadcrumb $kendo-breadcrumb-link-selected-bg: var( --kendo-component-bg, initial ) !default; /// The text color of the selected breadcrumb link @@ -112,13 +155,13 @@ $kendo-breadcrumb-link-selected-border: transparent !default; /// @group breadcrumb $kendo-breadcrumb-link-selected-font-weight: var( --kendo-font-weight-bold, bold ) !default; -/// The background color of the breadcrumb root link +/// The background color of the Breadcrumb root link /// @group breadcrumb $kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-link-bg !default; -/// The text color of the breadcrumb root link +/// The text color of the Breadcrumb root link /// @group breadcrumb $kendo-breadcrumb-root-link-text: $kendo-breadcrumb-link-text !default; -/// The border color of the breadcrumb root link +/// The border color of the Breadcrumb root link /// @group breadcrumb $kendo-breadcrumb-root-link-border: $kendo-breadcrumb-link-border !default; /// The background color of the hovered breadcrumb root link @@ -148,7 +191,7 @@ $kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-link-focus-text !defau /// The border color of the focused breadcrumb root link /// @group breadcrumb $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default; -/// The focus and hover background color of the breadcrumb root link +/// The focus and hover background color of the Breadcrumb root link /// @group breadcrumb $kendo-breadcrumb-root-link-focus-hover-bg: $kendo-breadcrumb-link-focus-hover-bg !default; /// The text color of the disabled breadcrumb root link @@ -159,13 +202,61 @@ $kendo-breadcrumb-current-item-bg: null !default; $kendo-breadcrumb-current-item-text: null !default; $kendo-breadcrumb-current-item-border: null !default; -/// The horizontal padding of the breadcrumb link icon +/// The vertical padding of the Breadcrumb link icon +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-y: map.get( $kendo-spacing, 2.5 ) !default; +/// The vertical padding of the small Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-sm-icon-link-padding-y: map.get( $kendo-spacing, 2 ) !default; +/// The vertical padding of the medium Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default; +/// The vertical padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-y: map.get( $kendo-spacing, 3 ) !default; + +/// The horizontal padding of the Breadcrumb link icon +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default; +/// The horizontal padding of the small Breadcrumb link icon. /// @group breadcrumb -$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default; -/// The vertical padding of the breadcrumb link icon +$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default; +/// The horizontal padding of the medium Breadcrumb link icon. /// @group breadcrumb -$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default; +$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default; +/// The horizontal padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default; // Root link spacing -$kendo-breadcrumb-root-link-spacing: 0px !default; $kendo-breadcrumb-link-icon-spacing: var( --kendo-icon-spacing, #{$kendo-icon-spacing} ) !default; + + +/// The sizes map for the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sizes: ( + sm: ( + link-padding-x: $kendo-breadcrumb-sm-link-padding-x, + link-padding-y: $kendo-breadcrumb-sm-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y, + font-size: $kendo-breadcrumb-sm-font-size, + line-height: $kendo-breadcrumb-sm-line-height + ), + md: ( + link-padding-x: $kendo-breadcrumb-md-link-padding-x, + link-padding-y: $kendo-breadcrumb-md-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y, + font-size: $kendo-breadcrumb-md-font-size, + line-height: $kendo-breadcrumb-md-line-height + ), + lg: ( + link-padding-x: $kendo-breadcrumb-lg-link-padding-x, + link-padding-y: $kendo-breadcrumb-lg-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y, + font-size: $kendo-breadcrumb-lg-font-size, + line-height: $kendo-breadcrumb-lg-line-height + ) +) !default; diff --git a/packages/material/scss/breadcrumb/_variables.scss b/packages/material/scss/breadcrumb/_variables.scss index 33f18ec3f73..68c1c6db76a 100644 --- a/packages/material/scss/breadcrumb/_variables.scss +++ b/packages/material/scss/breadcrumb/_variables.scss @@ -1,58 +1,231 @@ // Breadcrumb + +/// The width of the border around the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-border-width: 0px !default; + +/// The horizontal margin of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-margin-x: null !default; +/// The vertical margin of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-margin-y: null !default; +/// The horizontal padding of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-padding-x: null !default; +/// The vertical padding of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-padding-y: null !default; -$kendo-breadcrumb-border-width: 0px !default; +/// The font family of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-font-family: $kendo-font-family !default; + +/// The font size of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-font-size: $kendo-font-size-md !default; +/// The font size of the small Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-font-size: $kendo-font-size-md !default; +/// The font size of the medium Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default; +/// The font size of the large Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-font-size: $kendo-font-size-md !default; + +/// The line-height of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-line-height: $kendo-line-height-md !default; +/// The line-height of the small Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default; +/// The line-height of the medium Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default; +/// The line-height of the height Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-line-height: $kendo-line-height-md !default; +/// The base background of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-bg: $kendo-component-bg !default; +/// The base text color of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-text: $kendo-component-text !default; +/// The base border color of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-border: $kendo-component-border !default; +/// The box shadow of the focused Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default; + +/// The horizontal padding of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default; +/// The horizontal padding of the small Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default; +/// The horizontal padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default; +/// The horizontal padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default; + +/// The vertical padding of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default; +/// The vertical padding of the small Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; +/// The vertical padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default; +/// The vertical padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default; + +/// The border-radius of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default; -$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default; -$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default; +/// The vertical padding of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default; +/// The vertical padding of the small Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default; +/// The vertical padding of the medium Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default; +/// The vertical padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default; + +/// The horizontal padding of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default; +/// The horizontal padding of the small Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default; +/// The horizontal padding of the medium Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default; +/// The horizontal padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default; -$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default; +/// The spacing of the Breadcrumb link icon. +/// @group breadcrumb $kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default; +/// The text color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-initial-text: inherit !default; +/// The background color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-bg: null !default; +/// The text color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-text: $kendo-color-primary !default; +/// The border color of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-border: null !default; +/// The background color of the hovered Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-hover-bg: $kendo-hover-bg !default; +/// The text color of the hovered Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-hover-text: null !default; +/// The border color of the hovered Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-hover-border: null !default; +/// The background color of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-bg: k-map-get( $theme, focus-bg ) !default; +/// The text color of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-text: null !default; +/// The border color of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-border: null !default; +/// The box shadow of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-shadow: null !default; +/// The background color of the Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-bg: null !default; +/// The text color of the Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-text: null !default; +/// The border color of the Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-border: null !default; +/// The background color of the hovered Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-hover-bg: $kendo-hover-bg !default; +/// The text color of the hovered Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-hover-text: null !default; +/// The border color of the hovered Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-hover-border: null !default; +/// The background color of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-bg: k-map-get( $theme, focus-bg ) !default; +/// The text color of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-text: null !default; +/// The border color of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-border: null !default; +/// The box shadow of the focused Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-root-link-focus-shadow: null !default; +/// The background color of the current Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-current-item-bg: null !default; +/// The text color of the current Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-current-item-text: null !default; +/// The border color of the current Breadcrumb root link. +/// @group breadcrumb $kendo-breadcrumb-current-item-border: null !default; -$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default; +/// The sizes map for the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sizes: ( + sm: ( + link-padding-x: $kendo-breadcrumb-sm-link-padding-x, + link-padding-y: $kendo-breadcrumb-sm-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y, + font-size: $kendo-breadcrumb-sm-font-size, + line-height: $kendo-breadcrumb-sm-line-height + ), + md: ( + link-padding-x: $kendo-breadcrumb-md-link-padding-x, + link-padding-y: $kendo-breadcrumb-md-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y, + font-size: $kendo-breadcrumb-md-font-size, + line-height: $kendo-breadcrumb-md-line-height + ), + lg: ( + link-padding-x: $kendo-breadcrumb-lg-link-padding-x, + link-padding-y: $kendo-breadcrumb-lg-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y, + font-size: $kendo-breadcrumb-lg-font-size, + line-height: $kendo-breadcrumb-lg-line-height + ) +) !default; diff --git a/packages/nouvelle/scss/breadcrumb/_layout.scss b/packages/nouvelle/scss/breadcrumb/_layout.scss index 664b7d107e4..adb7711b540 100644 --- a/packages/nouvelle/scss/breadcrumb/_layout.scss +++ b/packages/nouvelle/scss/breadcrumb/_layout.scss @@ -11,8 +11,8 @@ box-sizing: border-box; outline: 0; font-family: var( --kendo-breadcrumb-font-family, #{k-if-var( $kendo-breadcrumb-font-family, inherit )} ); - font-size: var( --kendo-breadcrumb-font-size, #{k-if-var( $kendo-breadcrumb-font-size, 1rem )} ); - line-height: var( --kendo-breadcrumb-line-height, #{k-if-var( $kendo-breadcrumb-line-height, normal )} ); + font-size: var( --INTERNAL--kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} ); + line-height: var( --INTERNAL--kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} ); display: flex; flex-direction: row; -webkit-touch-callout: none; @@ -64,8 +64,8 @@ .k-breadcrumb-link, .k-breadcrumb-root-link { @include border-radius( var( --kendo-breadcrumb-border-radius, #{k-if-var( $kendo-breadcrumb-link-border-radius, 0 )} ) ); - padding-inline: var( --kendo-breadcrumb-link-padding-x, #{k-if-var( $kendo-breadcrumb-link-padding-x, 0 )} ); - padding-block: var( --kendo-breadcrumb-link-padding-y, #{k-if-var( $kendo-breadcrumb-link-padding-y, 0 )} ); + padding-inline: var( --INTERNAL--kendo-breadcrumb-link-padding-x, #{k-if-var( $kendo-breadcrumb-link-padding-x, 0 )} ); + padding-block: var( --INTERNAL--kendo-breadcrumb-link-padding-y, #{k-if-var( $kendo-breadcrumb-link-padding-y, 0 )} ); color: inherit; text-decoration: none; white-space: nowrap; @@ -79,10 +79,6 @@ transition: var( --kendo-transition, none ); } - .k-breadcrumb-root-link { - margin-inline-end: var( --kendo-breadcrumb-root-link-spacing, #{k-if-var( $kendo-breadcrumb-root-link-spacing, 0 )} ); - } - .k-breadcrumb-link > .k-image, .k-breadcrumb-icontext-link .k-icon, .k-breadcrumb-icontext-link .k-svg-icon { @@ -90,8 +86,8 @@ } .k-breadcrumb-icon-link { - padding-inline: var( --kendo-breadcrumb-icon-link-padding-x, #{k-if-var( $kendo-breadcrumb-icon-link-padding-x, 0 )} ); - padding-block: var( --kendo-breadcrumb-icon-link-padding-y, #{k-if-var( $kendo-breadcrumb-icon-link-padding-y, 0 )} ); + padding-inline: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-x, #{k-if-var( $kendo-breadcrumb-icon-link-padding-x, 0 )} ); + padding-block: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-y, #{k-if-var( $kendo-breadcrumb-icon-link-padding-y, 0 )} ); } @@ -111,4 +107,32 @@ } } + // Sizing + @each $size, $size-props in $kendo-breadcrumb-sizes { + $_link-padding-x: k-map-get( $size-props, link-padding-x ); + $_link-padding-y: k-map-get( $size-props, link-padding-y ); + $_icon-link-padding-x: k-map-get( $size-props, icon-link-padding-x ); + $_icon-link-padding-y: k-map-get( $size-props, icon-link-padding-y ); + $_font-size: k-map-get( $size-props, font-size ); + $_line-height: k-map-get( $size-props, line-height ); + + // Breadcrumb sizes + .k-breadcrumb-#{$size} { + --INTERNAL--kendo-breadcrumb-font-size: var( --kendo-breadcrumb-#{$size}-font-size, #{$_font-size} ); + --INTERNAL--kendo-breadcrumb-line-height: var( --kendo-breadcrumb-#{$size}-line-height, #{$_line-height} ); + + // Breadcrumb links + .k-breadcrumb-link, + .k-breadcrumb-root-link { + --INTERNAL--kendo-breadcrumb-link-padding-x: var( --kendo-breadcrumb-#{$size}-link-padding-x, #{$_link-padding-x} ); + --INTERNAL--kendo-breadcrumb-link-padding-y: var( --kendo-breadcrumb-#{$size}-link-padding-y, #{$_link-padding-y} ); + } + + // Breadcrumb icon links + .k-breadcrumb-icon-link { + --INTERNAL--kendo-breadcrumb-icon-link-padding-x: var( --kendo-breadcrumb-#{$size}-icon-link-padding-x, #{$_icon-link-padding-x} ); + --INTERNAL--kendo-breadcrumb-icon-link-padding-y: var( --kendo-breadcrumb-#{$size}-icon-link-padding-y, #{$_icon-link-padding-y} ); + } + } + } } diff --git a/packages/nouvelle/scss/breadcrumb/_variables.scss b/packages/nouvelle/scss/breadcrumb/_variables.scss index df5157e210a..50412c5258a 100644 --- a/packages/nouvelle/scss/breadcrumb/_variables.scss +++ b/packages/nouvelle/scss/breadcrumb/_variables.scss @@ -1,28 +1,149 @@ // Breadcrumb +/// The width of the border around the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-border-width: 0px !default; + +/// The horizontal margin of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-margin-x: null !default; +/// The vertical margin of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-margin-y: null !default; + +/// The horizontal padding of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-padding-x: null !default; +/// The vertical padding of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-padding-y: null !default; -$kendo-breadcrumb-border-width: 0px !default; +/// The font family of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-font-family: $kendo-font-family !default; + +/// The font size of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-font-size: $kendo-font-size-md !default; +/// The font size of the small Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-font-size: $kendo-font-size-sm !default; +/// The font size of the medium Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default; +/// The font size of the large Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-font-size: $kendo-font-size-lg !default; + +/// The line-height of the Breadcrumb. +/// @group breadcrumb $kendo-breadcrumb-line-height: $kendo-line-height-md !default; +/// The line-height of the small Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default; +/// The line-height of the medium Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default; +/// The line-height of the height Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-line-height: $kendo-line-height-lg !default; + +/// The box shadow of the focused Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-focus-shadow: $kendo-focus-shadow !default; +/// The horizontal padding of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default; +/// The horizontal padding of the small Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default; +/// The horizontal padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default; +/// The horizontal padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default; + +/// The vertical padding of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default; +/// The vertical padding of the small Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default; +/// The vertical padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default; +/// The vertical padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default; + +/// The border-radius of the Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-border-radius: k-map-get( $kendo-border-radii, md ) !default; -$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default; -$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default; +/// The vertical padding of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default; +/// The vertical padding of the small Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default; +/// The vertical padding of the medium Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default; +/// The vertical padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default; + +/// The horizontal padding of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default; +/// The horizontal padding of the small Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default; +/// The horizontal padding of the medium Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default; +/// The horizontal padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default; -$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default; +/// The spacing of the Breadcrumb link icon. +/// @group breadcrumb $kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default; -$kendo-breadcrumb-focus-shadow: $kendo-focus-shadow !default; +/// The box shadow of the focused Breadcrumb link. +/// @group breadcrumb $kendo-breadcrumb-link-focus-shadow: $kendo-focus-shadow !default; +/// The sizes map for the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sizes: ( + sm: ( + link-padding-x: $kendo-breadcrumb-sm-link-padding-x, + link-padding-y: $kendo-breadcrumb-sm-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y, + font-size: $kendo-breadcrumb-sm-font-size, + line-height: $kendo-breadcrumb-sm-line-height + ), + md: ( + link-padding-x: $kendo-breadcrumb-md-link-padding-x, + link-padding-y: $kendo-breadcrumb-md-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y, + font-size: $kendo-breadcrumb-md-font-size, + line-height: $kendo-breadcrumb-md-line-height + ), + lg: ( + link-padding-x: $kendo-breadcrumb-lg-link-padding-x, + link-padding-y: $kendo-breadcrumb-lg-link-padding-y, + icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x, + icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y, + font-size: $kendo-breadcrumb-lg-font-size, + line-height: $kendo-breadcrumb-lg-line-height + ) +) !default; // Breadcrumb theme $kendo-breadcrumb-ui-states: (