From fbe3e46ba67609774dbb2bcd37f198b866025e34 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 19 Dec 2022 23:36:40 +0200 Subject: [PATCH 01/16] feat(sizing): Use the sizable mixins and functions to size components. -- remove unused placeholder selector form badge theme and make it size the same way as in the WC product. -- remove leftovers form removed css prop 'size' in avatar theme. -- banner -- make button use the sizable() function for height. -- remove compact placeholder from the card component since the size is the same as the other sizes. -- make chip use the sizable() function for height. -- make all grid height to use sizable() function. -- make dropdown items to use sizable function(). --- .../components/avatar/_avatar-component.scss | 1 + .../components/avatar/_avatar-theme.scss | 47 +-- .../components/badge/_badge-component.scss | 4 - .../styles/components/badge/_badge-theme.scss | 24 +- .../components/banner/_banner-component.scss | 6 +- .../components/banner/_banner-theme.scss | 43 ++- .../components/button/_button-component.scss | 1 + .../components/button/_button-theme.scss | 250 +++++++------- .../components/card/_card-component.scss | 4 - .../styles/components/card/_card-theme.scss | 7 +- .../components/chip/_chip-component.scss | 1 + .../styles/components/chip/_chip-theme.scss | 59 ++-- .../drop-down/_drop-down-component.scss | 10 + .../drop-down/_drop-down-theme.scss | 72 ++-- .../core/styles/themes/generators/_base.scss | 18 + .../styles/themes/schemas/light/_avatar.scss | 1 - src/app/badge/badge.sample.css | 6 - .../grid-column-moving.sample.css | 20 +- .../grid-column-moving.sample.html | 315 +++++++++--------- .../grid-filtering/grid-filtering.sample.css | 32 +- .../grid-filtering/grid-filtering.sample.html | 231 ++++++------- 21 files changed, 567 insertions(+), 585 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss index b62be675bda..6f3d1ebe5a8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss @@ -5,6 +5,7 @@ /// @author Simeon Simeonoff @mixin component { @include b(igx-avatar) { + @include sizable(); // Register the component in the component registry $this: bem--selector-to-string(&); @include register-component( diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss index b95fa879fb9..db49e9f606e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss @@ -15,7 +15,6 @@ /// @param {Color} $color [null] - The text color used of the avatar. /// @param {Color} $background [null] - The background color used of the avatar. /// @param {number} $border-radius [null] - The border-radius used of the avatar. -/// @param {number} $size [null] - The size of the avatar. /// @requires $light-schema /// /// @example scss Change the background and icon colors in icon avatars @@ -27,7 +26,6 @@ $background: null, $color: null, $border-radius: null, - $size: null, ) { $name: 'igx-avatar'; $avatar-schema: (); @@ -53,7 +51,6 @@ background: $background, color: $color, border-radius: $border-radius, - size: $size )); } @@ -61,11 +58,6 @@ @mixin avatar($theme) { @include css-vars($theme); - $size: map.get($theme, 'size'); - $small-size: rem(40px); - $medium-size: rem(64px); - $large-size: rem(88px); - $variant: map.get($theme, variant); $bootstrap-theme: $variant == 'bootstrap'; @@ -86,6 +78,8 @@ } %igx-avatar-display { + --sizes: #{sizable(#{rem(40px)}, #{rem(64px)}, #{rem(88px)})}; + position: relative; display: inline-flex; justify-content: center; @@ -97,6 +91,8 @@ border-radius: var-get($theme, 'border-radius'); outline-style: none; flex-shrink: 0; + width: var(--sizes); + height: var(--sizes); &::after { box-shadow: none; @@ -126,41 +122,22 @@ %igx-avatar--initials { text-transform: uppercase; + font-size: calc(var(--sizes) / 2); + line-height: calc(var(--sizes) / 2); } + %igx-avatar--small, %igx-avatar-initials--small { - --size: #{$size or $small-size}; - font-size: calc(#{var-get(('size': $size or $small-size), 'size')} / 2); - line-height: calc(#{var-get(('size': $size or $small-size), 'size')} / 2); + --component-size: var(--ig-size, var(--ig-size-small)); } + %igx-avatar--medium, %igx-avatar-initials--medium { - --size: #{$size or $medium-size}; - font-size: calc(#{var-get(('size': $size or $medium-size), 'size')} / 2); - line-height: calc(#{var-get(('size': $size or $medium-size), 'size')} / 2); + --component-size: var(--ig-size, var(--ig-size-medium)); } + %igx-avatar--large, %igx-avatar-initials--large { - --size: #{$size or $large-size}; - font-size: calc(#{var-get(('size': $size or $large-size), 'size')} / 2); - line-height: calc(#{var-get(('size': $size or $large-size), 'size')} / 2); - } - - %igx-avatar--small { - --size: #{$size or $small-size}; - width: var-get(('size': $size or $small-size), 'size'); - height: var-get(('size': $size or $small-size), 'size'); - } - - %igx-avatar--medium { - --size: #{$size or $medium-size}; - width: var-get(('size': $size or $medium-size), 'size'); - height: var-get(('size': $size or $medium-size), 'size'); - } - - %igx-avatar--large { - --size: #{$size or $large-size}; - width: var-get(('size': $size or $large-size), 'size'); - height: var-get(('size': $size or $large-size), 'size'); + --component-size: var(--ig-size, var(--ig-size-large)); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss index 1c6baf3f13c..24db08d5a26 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss @@ -19,10 +19,6 @@ @extend %igx-badge-value !optional; } - @include m(default) { - @extend %igx-badge--default !optional; - } - @include m(info) { @extend %igx-badge--info !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss index 8744056eecc..49fb3b3090c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss @@ -86,24 +86,22 @@ @mixin badge($theme) { @include css-vars($theme); - $badge-width: rem(22px); - $badge-height: $badge-width; - - $badge-font-size: rem(11px); $badge-font-weight: normal; - $badge-icon-font-size: rem(12px); - - $badge-value-padding: rem(4px); + $badge-value-padding: rem(4px) rem(8px); $border-type: solid; %igx-badge-display { + --size: #{rem(22px)}; + --font-size: calc(var(--size) / 2); + --icon-font-size: #{rem(12px)}; + display: flex; justify-content: center; align-items: center; - min-width: $badge-width; - height: $badge-height; - font-size: $badge-font-size; + min-width: var(--size); + min-height: var(--size); + font-size: var(--font-size); font-weight: $badge-font-weight; color: var-get($theme, 'text-color'); line-height: 1; @@ -119,9 +117,9 @@ display: inline-flex; justify-content: center; align-items: center; - width: var(--igx-icon-size, #{$badge-width - rem(2px)}); - height: var(--igx-icon-size, #{$badge-width - rem(2px)}); - font-size: var(--igx-icon-size, #{$badge-icon-font-size}); + width: var(--igx-icon-size, #{var(--size) - rem(2px)}); + height: var(--igx-icon-size, #{var(--size) - rem(2px)}); + font-size: var(--igx-icon-size, #{var(--icon-font-size)}); font-weight: $badge-font-weight; color: var-get($theme, 'icon-color'); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss index 604e5cfb5c3..39eabee9188 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss @@ -9,6 +9,8 @@ } @include b(igx-banner) { + @include sizable(); + // Register the component in the component registry $this: bem--selector-to-string(&); @include register-component( $name: string.slice($this, 2, -1), @@ -46,12 +48,10 @@ } @include m(cosy) { - @extend %igx-banner !optional; @extend %igx-banner--cosy !optional - } + } @include m(compact) { - @extend %igx-banner !optional; @extend %igx-banner--compact !optional; } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss index 3079c719766..9c656394b08 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss @@ -31,7 +31,7 @@ $banner-illustration-color: null ) { $name: 'igx-banner'; - $selector: 'igx-banner, .igx-banner, .igx-banner--cosy, .igx-banner--compact'; + $selector: 'igx-banner, .igx-banner'; $banner-schema: (); @if map.has-key($schema, $name) { @@ -61,11 +61,8 @@ @include css-vars($theme); $variant: map.get($theme, 'variant'); - $banner-padding: ( - comfortable: rem(8px), - cosy: rem(8px), - compact: rem(8px) - ); + $padding: rem(8px); + $padding-inline-start: calc(#{$padding} * 2); %igx-banner-host { igx-expansion-panel-body { @@ -86,17 +83,28 @@ } %igx-banner { + --component-size: var(--ig-size, var(--ig-size-large)); + display: flex; justify-content: flex-end; flex-wrap: wrap; - grid-gap: rem(8px); - padding-inline-start: calc(#{map.get($banner-padding, 'comfortable') * 2}); - padding-inline-end: map.get($banner-padding, 'comfortable'); - padding-block-start: map.get($banner-padding, 'comfortable'); - padding-block-end: map.get($banner-padding, 'comfortable'); + gap: rem(8px); + + padding-inline-start: pad-inline($padding-inline-start, $padding-inline-start, $padding-inline-start); + padding-inline-end: pad-inline(rem(4px), rem(8px), rem(16px)); + padding-block-start: pad-block(rem(4px), rem(8px), rem(16px)); + padding-block-end: pad-block(rem(4px), rem(8px), rem(16px)); background: var-get($theme, 'banner-background'); } + %igx-banner--cosy { + --component-size: var(--ig-size, var(--ig-size-medium)); + } + + %igx-banner--compact { + --component-size: var(--ig-size, var(--ig-size-small)); + } + %igx-banner__illustration { justify-content: center; width: rem(40px); @@ -124,19 +132,6 @@ } } - %igx-banner--cosy { - padding-inline-start: calc(#{map.get($banner-padding, 'cosy') * 2}); - padding-inline-end: map.get($banner-padding, 'cosy'); - padding-block-start: map.get($banner-padding, 'cosy'); - padding-block-end: map.get($banner-padding, 'cosy'); - } - - %igx-banner--compact { - padding-inline-start: calc(#{map.get($banner-padding, 'compact') * 2}); - padding-inline-end: map.get($banner-padding, 'compact'); - padding-block-start: map.get($banner-padding, 'compact'); - padding-block-end: map.get($banner-padding, 'compact'); - } %igx-banner__message { min-width: rem(150px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss index c5a12ef3b7a..bc8a10c8384 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss @@ -5,6 +5,7 @@ /// @author Simeon Simeonoff @mixin component { @include b(igx-button) { + @include sizable(); $this: bem--selector-to-string(&); @include register-component( $name: string.slice($this, 2, -1), diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index a33c5848677..8c07ce66635 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -254,40 +254,75 @@ ), $variant); $button-icon-height: $button-icon-width; - $button-icon-font-size: rem(24px, 24px); - $button-icon-padding: 0; - $button-padding-material: ( - comfortable: rem(7px, 16px) rem(16px, 16px), - cosy: rem(4px, 16px) rem(16px, 16px), - compact: rem(1px, 16px) rem(16px, 16px) + $button-padding-material-inline: ( + comfortable: rem(16px, 16px), + cosy: rem(16px, 16px), + compact: rem(16px, 16px) ); - $outlined-button-padding-material: ( - comfortable: rem(7px, 16px) rem(14px, 16px), - cosy: rem(4px, 16px) rem(14px, 16px), - compact: rem(1px, 16px) rem(14px, 16px) + $button-padding-material-block: ( + comfortable: rem(7px, 16px), + cosy: rem(4px, 16px), + compact: rem(1px, 16px) ); - $button-padding-fluent: ( - comfortable: 0 rem(16px, 16px), - cosy: 0 rem(16px, 16px), - compact: 0 rem(16px, 16px) + $button-padding-fluent-inline: ( + comfortable: rem(16px, 16px), + cosy: rem(16px, 16px), + compact: rem(16px, 16px) ); - $button-padding-bootstrap: ( - comfortable: rem(6px, 16px) rem(12px, 16px), - cosy: rem(4px, 16px) rem(10px, 16px), - compact: rem(2px, 16px) rem(8px, 16px) + $button-padding-fluent-block: ( + comfortable: rem(16px, 16px), + cosy: rem(16px, 16px), + compact: rem(16px, 16px) + ); + + $button-padding-bootstrap-inline: ( + comfortable: rem(12px, 16px), + cosy: rem(10px, 16px), + compact: rem(8px, 16px) + ); + + $button-padding-bootstrap-block: ( + comfortable: rem(6px, 16px), + cosy: rem(4px, 16px), + compact: rem(2px, 16px) + ); + + $button-padding-indigo-inline: ( + comfortable: rem(12px, 16px), + cosy: rem(12px, 16px), + compact: rem(8px, 16px) + ); + + $button-padding-indigo-block: ( + comfortable: rem(3px, 16px), + cosy: rem(2px, 16px), + compact: rem(1px, 16px) ); - $button-padding-indigo: ( - comfortable: rem(3px, 16px) rem(12px, 16px), - cosy: rem(2px, 16px) rem(12px, 16px), - compact: rem(1px, 16px) rem(8px, 16px) + $outlined-button-padding-material-inline: ( + comfortable: rem(14px, 16px), + cosy: rem(14px, 16px), + compact: rem(14px, 16px) ); - $outlined-button-padding-indigo: ( + $outlined-button-padding-material-block: ( + comfortable: rem(7px, 16px), + cosy: rem(4px, 16px), + compact: rem(1px, 16px) + ); + + + $outlined-button-padding-indigo-inline: ( + comfortable: rem(6px, 16px) rem(14px, 16px), + cosy: rem(4px, 16px) rem(10px, 16px), + compact: rem(2px, 16px) rem(6px, 16px) + ); + + $outlined-button-padding-indigo-block: ( comfortable: rem(6px, 16px) rem(14px, 16px), cosy: rem(4px, 16px) rem(10px, 16px), compact: rem(2px, 16px) rem(6px, 16px) @@ -317,18 +352,32 @@ compact: rem(28px, 16px), ); - $button-padding: map.get(( - material: $button-padding-material, - fluent: $button-padding-fluent, - bootstrap: $button-padding-bootstrap, - indigo-design: $button-padding-indigo, + $button-padding-inline: map.get(( + material: $button-padding-material-inline, + fluent: $button-padding-fluent-inline, + bootstrap: $button-padding-bootstrap-inline, + indigo-design: $button-padding-indigo-inline, ), $variant); - $outlined-button-padding: map.get(( - material: $outlined-button-padding-material, - fluent: $button-padding-fluent, - bootstrap: $button-padding-bootstrap, - indigo-design: $outlined-button-padding-indigo + $button-padding-block: map.get(( + material: $button-padding-material-block, + fluent: $button-padding-fluent-block, + bootstrap: $button-padding-bootstrap-block, + indigo-design: $button-padding-indigo-block, + ), $variant); + + $outlined-button-padding-inline: map.get(( + material: $outlined-button-padding-material-inline, + fluent: $button-padding-fluent-inline, + bootstrap: $button-padding-bootstrap-inline, + indigo-design: $outlined-button-padding-indigo-inline + ), $variant); + + $outlined-button-padding-block: map.get(( + material: $outlined-button-padding-material-block, + fluent: $button-padding-fluent-block, + bootstrap: $button-padding-bootstrap-block, + indigo-design: $outlined-button-padding-indigo-block ), $variant); $icon-button-width: map.get(( @@ -369,10 +418,16 @@ indigo-design: $button--size-indigo, ), $variant); - $button-floating-padding: ( - comfortable: rem(8px) rem(14px), - cosy: rem(4px) rem(10px), - compact: 0 rem(6px) + $button-floating-padding-block: ( + comfortable: rem(8px), + cosy: rem(4px), + compact: 0 + ); + + $button-floating-padding-inline: ( + comfortable: rem(14px), + cosy: rem(10px), + compact: rem(6px) ); $button-floating-size: ( @@ -471,13 +526,17 @@ ), $variant); %igx-button-display { + --component-size: var(--ig-size, var(--ig-size-large)); + --size: #{sizable(#{map.get($button-size, 'compact')}, #{map.get($button-size, 'cosy')}, #{map.get($button-size, 'comfortable')})}; + position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: $button-width; - padding: map.get($button-padding, 'comfortable'); - min-height: map.get($button-size, 'comfortable'); + padding-inline: pad(map.get($button-padding-inline, 'compact'), map.get($button-padding-inline, 'cosy'), map.get($button-padding-inline, 'comfortable')); + padding-block: pad(map.get($button-padding-block, 'compact'), map.get($button-padding-block, 'cosy'), map.get($button-padding-block, 'comfortable')); + min-height: var(--size); border: rem(1px) solid var-get($flat-theme, 'border-color'); cursor: pointer; user-select: none; @@ -502,13 +561,12 @@ } * + * { - margin-inline-start: map.get($icon-in-button-margin, 'comfortable'); + margin-inline-start: pad-inline(map.get($icon-in-button-margin, 'compact'), map.get($icon-in-button-margin, 'cosy'), map.get($icon-in-button-margin, 'comfortable')); } } %igx-button-display--cosy { - padding: map.get($button-padding, 'cosy'); - min-height: map.get($button-size, 'cosy'); + --component-size: var(--ig-size, var(--ig-size-medium)); * + * { margin-inline-start: map.get($icon-in-button-margin, 'cosy'); @@ -516,8 +574,7 @@ } %igx-button-display--compact { - padding: map.get($button-padding, 'compact'); - min-height: map.get($button-size, 'compact'); + --component-size: var(--ig-size, var(--ig-size-small)); * + * { margin-inline-start: map.get($icon-in-button-margin, 'compact'); @@ -526,8 +583,10 @@ igx-grid-filtering-row { @if ($variant == 'bootstrap') { + --size: #{sizable(#{map.get($filtering-row-button-size, 'compact')}, #{map.get($filtering-row-button-size, 'cosy')}, #{map.get($filtering-row-button-size, 'comfortable')})}; + %igx-button-display { - min-height: map.get($filtering-row-button-size, 'comfortable'); + min-height: var(--size); padding-block: 0; > * { @@ -536,14 +595,6 @@ height: rem(18px); } } - - %igx-button-display--cosy { - min-height: map.get($filtering-row-button-size, 'cosy'); - } - - %igx-button-display--compact { - min-height: map.get($filtering-row-button-size, 'compact'); - } } } @@ -588,11 +639,14 @@ } %igx-button--outlined { + --size: #{sizable(map.get($button-size, 'compact'), map.get($button-size, 'cosy'), map.get($button-size, 'comfortable'))}; background: var-get($outlined-theme, 'background'); color: var-get($outlined-theme, 'foreground'); border-color: var-get($outlined-theme, 'border-color'); border-radius: var-get($outlined-theme, 'border-radius'); - padding: map.get($outlined-button-padding, 'comfortable'); + padding-block: pad(map.get($outlined-button-padding-block, 'compact'), map.get($outlined-button-padding-block, 'cosy'), map.get($outlined-button-padding-block, 'comfortable')); + padding-inline: pad(map.get($outlined-button-padding-inline, 'compact'), map.get($outlined-button-padding-inline, 'cosy'), map.get($outlined-button-padding-inline, 'comfortable')); + min-height: var(--size); @if $variant == 'indigo-design' { border-width: rem(2px); @@ -674,23 +728,9 @@ /* stylelint-enable */ } } - } - - %igx-button--outlined-cosy { - padding: map.get($outlined-button-padding, 'cosy'); - min-height: map.get($button-size, 'cosy'); * + * { - margin-inline-start: map.get($icon-in-button-margin, 'cosy'); - } - } - - %igx-button--outlined-compact { - padding: map.get($outlined-button-padding, 'compact'); - min-height: map.get($button-size, 'compact'); - - * + * { - margin-inline-start: map.get($icon-in-button-margin, 'compact'); + margin-inline-start: pad-inline(map.get($icon-in-button-margin, 'compact'), map.get($icon-in-button-margin, 'cosy'), map.get($icon-in-button-margin, 'comfortable')); } } @@ -797,9 +837,18 @@ } %igx-button--fab { - padding: map.get($button-floating-padding, 'comfortable'); - min-width: map.get($button-floating-size, 'comfortable'); - min-height: map.get($button-floating-size, 'comfortable'); + @if $variant != 'indigo-design' { + --size: #{sizable(map.get($button-floating-size, 'compact'), map.get($button-floating-size, 'cosy'), map.get($button-floating-size, 'comfortable'))}; + } + + @if $variant == 'indigo-design' { + --size: #{sizable(map.get($button-floating-size-indigo, 'compact'), map.get($button-floating-size-indigo, 'cosy'), map.get($button-floating-size-indigo, 'comfortable'))}; + } + + padding-block: pad(map.get($button-floating-padding-block, 'compact'), map.get($button-floating-padding-block, 'cosy'), map.get($button-floating-padding-block, 'comfortable')); + padding-inline: pad(map.get($button-floating-padding-inline, 'compact'), map.get($button-floating-padding-inline, 'cosy'), map.get($button-floating-padding-inline, 'comfortable')); + min-width: var(--size); + min-height: var(--size); line-height: unset; white-space: nowrap; color: var-get($fab-theme, 'foreground'); @@ -808,11 +857,6 @@ box-shadow: $fab-shadow; border-radius: var-get($fab-theme, 'border-radius'); - @if $variant == 'indigo-design' { - min-width: map.get($button-floating-size-indigo, 'comfortable'); - min-height: map.get($button-floating-size-indigo, 'comfortable'); - } - &:hover { color: var-get($fab-theme, 'hover-foreground'); background: var-get($fab-theme, 'hover-background'); @@ -894,47 +938,18 @@ } * + * { - margin-inline-start: map.get($icon-in-button-margin, 'comfortable'); - } - } - - %igx-button--fab-cosy { - padding: map.get($button-floating-padding, 'cosy'); - min-width: map.get($button-floating-size, 'cosy'); - min-height: map.get($button-floating-size, 'cosy'); - - @if $variant == 'indigo-design' { - min-width: map.get($button-floating-size-indigo, 'cosy'); - min-height: map.get($button-floating-size-indigo, 'cosy'); - } - - * + * { - margin-inline-start: map.get($icon-in-button-margin, 'cosy'); - } - } - - %igx-button--fab-compact { - padding: map.get($button-floating-padding, 'compact'); - min-width: map.get($button-floating-size, 'compact'); - min-height: map.get($button-floating-size, 'compact'); - - @if $variant == 'indigo-design' { - min-width: map.get($button-floating-size-indigo, 'compact'); - min-height: map.get($button-floating-size-indigo, 'compact'); - } - - * + * { - margin-inline-start: map.get($icon-in-button-margin, 'compact'); + margin-inline-start: pad-inline(map.get($icon-in-button-margin, 'compact'), map.get($icon-in-button-margin, 'cosy'), map.get($icon-in-button-margin, 'comfortable')); } } %igx-button--icon { - width: map.get($icon-button-width, 'comfortable'); - height: map.get($icon-button-width, 'comfortable'); + --size: #{sizable(map.get($icon-button-width, 'compact'), map.get($icon-button-width, 'cosy'), map.get($icon-button-width, 'comfortable'))}; + width: var(--size); + height: var(--size); min-width: unset; min-height: unset; - font-size: $button-icon-font-size; - padding: $button-icon-padding; + font-size: rem(24px, 24px); + padding: 0; color: var-get($icon-theme, 'foreground'); background: var-get($icon-theme, 'background'); border-radius: var-get($icon-theme, 'border-radius'); @@ -944,7 +959,6 @@ border-width: rem(3px); } - &:hover { @if $variant != 'fluent' { transition: $button-transition; @@ -1009,16 +1023,6 @@ } } - %igx-button--icon-cosy { - width: map.get($icon-button-width, 'cosy'); - height: map.get($icon-button-width, 'cosy'); - } - - %igx-button--icon-compact { - width: map.get($icon-button-width, 'compact'); - height: map.get($icon-button-width, 'compact'); - } - %igx-button--disabled { background: var-get($flat-theme, 'disabled-background'); color: var-get($flat-theme, 'disabled-foreground'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-component.scss index 47b94047c80..eacc1e976c8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-component.scss @@ -61,10 +61,6 @@ @extend %igx-card-header-subtitle !optional; } - @include m(compact) { - @extend %igx-card-header--compact !optional; - } - @include m(vertical) { @extend %igx-card-header--vertical !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss index 9b399a1800b..6e78c45b7d2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss @@ -113,8 +113,7 @@ @include css-vars($theme); - $card-heading-padding: rem(16px); - $card-heading-compact-padding: rem(16px, 16px); + $card-heading-padding: rem(16px, 16px); $card-content-padding: rem(14px); $card-actions-padding: rem(8px); @@ -185,10 +184,6 @@ } } - %igx-card-header--compact { - padding: $card-heading-compact-padding; - } - %igx-card-header-thumbnail { align-self: flex-start; margin-inline-end: rem(16px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss index 2e2dac08382..7c9c4467dbe 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss @@ -9,6 +9,7 @@ } @include b(igx-chip) { + @include sizable(); $this: bem--selector-to-string(&); @include register-component( $name: string.slice($this, 2, -1), diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index 8aefdc46889..7a153f30cf6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -264,10 +264,10 @@ indigo-design: $chip-height-material ), $variant); - $chip-padding: ( - comfortable: 0 rem(8px), - cosy: 0 rem(4px), - compact: 0 rem(2px) + $chip-padding-inline: ( + comfortable: rem(8px), + cosy: rem(4px), + compact: rem(2px) ); $box-shadow: map.get(( @@ -306,6 +306,9 @@ } %igx-chip { + --component-size: var(--ig-size, var(--ig-size-large)); + --size: #{sizable(map.get($chip-height, 'compact'), map.get($chip-height, 'cosy'), map.get($chip-height, 'comfortable'))}; + @extend %igx-chip-custom-icon; position: relative; @@ -315,7 +318,7 @@ transition-property: top, left; [dir='rtl'] & { - transition-property: top right; + transition-property: top, right; } touch-action: none; @@ -357,10 +360,14 @@ } %igx-chip--cosy { + --component-size: var(--ig-size, var(--ig-size-medium)); + @extend %igx-chip-custom-icon--cosy; } %igx-chip--compact { + --component-size: var(--ig-size, var(--ig-size-small)); + @extend %igx-chip-custom-icon--compact; } @@ -429,7 +436,8 @@ %igx-chip__content { @include ellipsis(); - padding: map.get($chip-padding, 'comfortable'); + padding-inline: pad-inline(map.get($chip-padding-inline, 'compact'), map.get($chip-padding-inline, 'cosy'), map.get($chip-padding-inline, 'comfortable')); + padding-block: 0; max-width: $chip-max-width; &:empty { @@ -437,14 +445,6 @@ } } - %igx-chip__content--cosy { - padding: map.get($chip-padding, 'cosy'); - } - - %igx-chip__content--compact { - padding: map.get($chip-padding, 'compact'); - } - %igx-chip__remove { display: inline-flex; margin-inline-end: rem(4px); @@ -506,7 +506,7 @@ align-items: center; justify-content: center; flex: 1 1 auto; - height: map.get($chip-height, 'comfortable'); + height: var(--size); padding: $chip-item-padding; color: var-get($theme, 'text-color'); background: var-get($theme, 'background'); @@ -517,7 +517,7 @@ user-select: none; overflow: hidden; cursor: pointer; - //hacking overflow hidden with border radius + // hacking overflow hidden with border radius // not playing nicely together filter: opacity(1); } @@ -565,17 +565,11 @@ } } - %igx-chip__item--cosy { - height: map.get($chip-height, 'cosy'); - padding: map.get($chip-padding, 'cosy'); - } - - %igx-chip__item--compact { - height: map.get($chip-height, 'compact'); - padding: map.get($chip-padding, 'compact'); - } - %igx-chip__ghost { + --component-size: var(--ig-size, var(--ig-size-small)); + --size: #{sizable(map.get($chip-height, 'compact'), map.get($chip-height, 'cosy'), map.get($chip-height, 'comfortable'))}; + + height: var(--size); position: absolute; box-shadow: var-get($theme, 'ghost-shadow'); overflow: hidden; @@ -589,20 +583,13 @@ } %igx-chip__ghost--cosy { - height: map.get($chip-height, 'cosy'); - - %igx-chip__content { - padding: map.get($chip-padding, 'cosy'); - } + --component-size: var(--ig-size, var(--ig-size-medium)); } %igx-chip__ghost--compact { - @extend %igx-chip-custom-icon--compact; - height: map.get($chip-height, 'compact'); + --component-size: var(--ig-size, var(--ig-size-small)); - %igx-chip__content { - padding: map.get($chip-padding, 'compact'); - } + @extend %igx-chip-custom-icon--compact; } // Remark: If z-index is not set, the chip would diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss index 6772627fdd0..db0772b9d05 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss @@ -14,9 +14,19 @@ @extend %igx-drop-down !optional; @include e(list) { + @include sizable(); + @extend %igx-drop-down__list !optional; } + @include e(list, $m: cosy) { + @extend %igx-drop-down__list--cosy !optional; + } + + @include e(list, $m: compact) { + @extend %igx-drop-down__list--compact !optional; + } + @include e(list-scroll) { @extend %igx-drop-down__list-scroll !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index 7d8f4db25ba..0354674df06 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -196,40 +196,28 @@ compact: rem(28px) ); - $item-padding-comfortable: 0 rem(24px); - $item-padding-cosy: 0 rem(20px); - $item-padding-compact: 0 rem(16px); - - $prefix-margin-comfortable: rem(20px); - $prefix-margin-cosy: rem(16px); - $prefix-margin-compact: rem(12px); - - $suffix-margin-comfortable: rem(8px); - $suffix-margin-cosy: rem(6px); - $suffix-margin-compact: rem(4px); - - $item-padding: ( - comfortable: $item-padding-comfortable, - cosy: $item-padding-cosy, - compact: $item-padding-compact + $item-padding-inline: ( + comfortable: rem(24px), + cosy: rem(20px), + compact: rem(16px) ); $prefix-margin: ( - comfortable: $prefix-margin-comfortable, - cosy: $prefix-margin-cosy, - compact: $prefix-margin-compact + comfortable: rem(20px), + cosy: rem(16px), + compact: rem(12px) ); $suffix-margin: ( - comfortable: $suffix-margin-comfortable, - cosy: $suffix-margin-cosy, - compact: $suffix-margin-compact + comfortable: rem(8px), + cosy: rem(6px), + compact: rem(4px) ); - $header-item-padding: ( - comfortable: 0 rem(16px), - cosy: 0 rem(12px), - compact: 0 rem(8px) + $header-item-padding-inline: ( + comfortable: rem(16px), + cosy: rem(12px), + compact: rem(8px) ); %igx-drop-down { @@ -237,6 +225,8 @@ } %igx-drop-down__list { + --component-size: var(--ig-size, var(--ig-size-large)); + --item-size: #{sizable(map.get($item-height, 'compact'), map.get($item-height, 'cosy'), map.get($item-height, 'comfortable'))}; overflow: hidden; border-radius: var-get($theme, 'border-radius'); background: var-get($theme, 'background-color'); @@ -245,6 +235,14 @@ border: var-get($theme, 'border-width') solid var-get($theme, 'border-color'); } + %igx-drop-down__list--cosy { + --component-size: var(--ig-size, var(--ig-size-medium)); + } + + %igx-drop-down__list--compact { + --component-size: var(--ig-size, var(--ig-size-small)); + } + %igx-drop-down__list-scroll { overflow-y: auto; overflow-x: hidden; @@ -263,7 +261,7 @@ align-items: center; width: 100%; white-space: nowrap; - height: map.get($item-height, 'comfortable'); + height: var(--item-size); position: relative; igx-prefix, @@ -287,7 +285,8 @@ %igx-drop-down__item { color: var-get($theme, 'item-text-color'); cursor: pointer; - padding: map.get($item-padding, 'comfortable'); + padding-inline: pad-inline(map.get($item-padding-inline, 'compact'), map.get($item-padding-inline, 'cosy'), map.get($item-padding-inline, 'comfortable')); + padding-block: 0; border-radius: var-get($theme, 'item-border-radius'); &:focus { @@ -316,9 +315,6 @@ } %igx-drop-down__item--cosy { - height: map.get($item-height, 'cosy'); - padding: map.get($item-padding, 'cosy'); - igx-prefix, [igxPrefix] { @extend %igx-drop-down__prefix--cosy; @@ -331,9 +327,6 @@ } %igx-drop-down__item--compact { - height: map.get($item-height, 'compact'); - padding: map.get($item-padding, 'compact'); - igx-prefix, [igxPrefix] { @extend %igx-drop-down__prefix--compact; @@ -381,13 +374,11 @@ %igx-drop-down__header { color: var-get($theme, 'header-text-color'); pointer-events: none; - padding: map.get($header-item-padding, 'comfortable'); + padding-inline: pad-inline(map.get($header-item-padding-inline, 'compact'), map.get($header-item-padding-inline, 'cosy'), map.get($header-item-padding-inline, 'comfortable')); + padding-block: 0; } %igx-drop-down__header--cosy { - height: map.get($item-height, 'cosy'); - padding: map.get($header-item-padding, 'cosy'); - igx-prefix, [igxPrefix] { @extend %igx-drop-down__prefix--cosy; @@ -400,9 +391,6 @@ } %igx-drop-down__header--compact { - height: map.get($item-height, 'compact'); - padding: map.get($header-item-padding, 'compact'); - igx-prefix, [igxPrefix] { @extend %igx-drop-down__prefix--compact; @@ -422,7 +410,7 @@ } %igx-drop-down__item { - text-indent: map.get($item-padding, 'comfortable'); + text-indent: pad-inline(map.get($item-padding-inline, 'comfortable')); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 187fa8a213e..982e04d4a4e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -55,6 +55,24 @@ } } + #{$scope} { + --ig-size-small: 1; + --ig-size-medium: 2; + --ig-size-large: 3; + + --ig-spacing-small: 1; + --ig-spacing-medium: 1; + --ig-spacing-large: 1; + + --ig-spacing-inline-small: 1; + --ig-spacing-inline-medium: 1; + --ig-spacing-inline-large: 1; + + --ig-spacing-block-small: 1; + --ig-spacing-block-medium: 1; + --ig-spacing-block-large: 1; + } + @if list.length($exclude) > 0 { $excluded: is-component($exclude); } diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss index b97b0f614a0..e3d9a6ac502 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss @@ -11,7 +11,6 @@ /// @prop {Map} background [color: ('gray', 400, .54)]- The background color of the avatar. /// @prop {Map} color [color: ('gray', 800, .96)] - The text/icon color of the avatar. /// @prop {Number} border-radius [0] - The border radius. Can be a fraction between 0 and 1, pixels, or percent. -/// @prop {Number} size - The size of the avatar. $light-avatar: extend( ( variant: 'material', diff --git a/src/app/badge/badge.sample.css b/src/app/badge/badge.sample.css index 36734fd3108..13d17ea3041 100644 --- a/src/app/badge/badge.sample.css +++ b/src/app/badge/badge.sample.css @@ -12,9 +12,3 @@ height: 88px; align-items: center; } - -.badge-theme { - min-width: 15px; - width: 15px; - height: 15px; -} diff --git a/src/app/grid-column-moving/grid-column-moving.sample.css b/src/app/grid-column-moving/grid-column-moving.sample.css index 262bb4a7886..14cd0b18cbf 100644 --- a/src/app/grid-column-moving/grid-column-moving.sample.css +++ b/src/app/grid-column-moving/grid-column-moving.sample.css @@ -1,15 +1,23 @@ -.sample-buttons { - margin-top: 24px; +.sample { + display: flex; + flex-direction: column; + gap: 32px } -[igxButton] { - margin-right: 8px; - margin-bottom: 8px; +.sample-buttons { + display: flex; + align-items: center; + gap: 16px; } .density-chooser { - margin-bottom: 16px; + padding-bottom: 10px; + border-bottom: 1px solid #ddd; +} + +igx-buttongroup { max-width: 900px; + margin: 0 auto; } .references { diff --git a/src/app/grid-column-moving/grid-column-moving.sample.html b/src/app/grid-column-moving/grid-column-moving.sample.html index 987b449b96f..0cdd3783631 100644 --- a/src/app/grid-column-moving/grid-column-moving.sample.html +++ b/src/app/grid-column-moving/grid-column-moving.sample.html @@ -1,164 +1,163 @@ -
-
-
+
+

Sample 1

-
- - - - - -
-
- -
- - - - - - - - - - - - - -
{{ cell.value}}
- - - - - - - Drag mode: {{ grid1.selectionService.dragMode }} -
- - - - - -
+
+ +
- Grid with MCH -
- -
-
- - - - - -
- - - - {{ column.header }} {{ column.visibleIndex }} - - - - {{ column.field }} {{ column.visibleIndex }} - - - - - {{ column.field }} {{ column.visibleIndex }} - - - - - {{ column.header }} {{ column.visibleIndex }} - - - - {{ column.field }} {{ column.visibleIndex }} - - - - - {{ column.field }} {{ column.visibleIndex }} - - - - - {{column.expanded ? 'remove' : 'add'}} - - - - - {{ column.field }} {{ column.visibleIndex }} - - - - - {{ column.header }} {{ column.visibleIndex }} - - - - {{ column.field }} {{ column.visibleIndex }} - - - - - {{ column.field }} {{ column.visibleIndex }} - - - - {{ column.field }} {{ column.visibleIndex }} - - - - - {{ column.field }} {{ column.visibleIndex }} - - - - - {{ column.field }} {{ column.visibleIndex }} - - - - - {{ column.field }} {{ column.visibleIndex }} - - - - - - {{ column.field }} {{ column.visibleIndex }} - - - - {{ column.field }} {{ column.visibleIndex }} - - - - - {{ column.field }} {{ column.visibleIndex }} - - - - - -
-
+
+ + + + + + +
+ +
+

Drag mode: {{ grid1.selectionService.dragMode }}

+
+ + + + + +
+ + + + + + + + + + + + +
{{ cell.value}}
+ + + + + + + +

Sample 2 - Grid with MCH

+ +
+ + + + + +
+ + + + + {{ column.header }} {{ column.visibleIndex }} + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{ column.header }} {{ column.visibleIndex }} + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{column.expanded ? 'remove' : 'add'}} + + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{ column.header }} {{ column.visibleIndex }} + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{ column.field }} {{ column.visibleIndex }} + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + + {{ column.field }} {{ column.visibleIndex }} + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{ column.field }} {{ column.visibleIndex }} + + + + +
diff --git a/src/app/grid-filtering/grid-filtering.sample.css b/src/app/grid-filtering/grid-filtering.sample.css index 9e63014b814..14cd0b18cbf 100644 --- a/src/app/grid-filtering/grid-filtering.sample.css +++ b/src/app/grid-filtering/grid-filtering.sample.css @@ -1,18 +1,32 @@ -.density-chooser { - margin-bottom: 16px; - max-width: 900px; +.sample { + display: flex; + flex-direction: column; + gap: 32px } .sample-buttons { - margin-top: 24px; display: flex; - flex-wrap: wrap; + align-items: center; + gap: 16px; +} + +.density-chooser { + padding-bottom: 10px; + border-bottom: 1px solid #ddd; +} + +igx-buttongroup { + max-width: 900px; + margin: 0 auto; } -igx-checkbox { - margin: 0px 10px; +.references { + font-size: .75em; } -[igxButton]+[igxButton] { - margin-left: 8px; +.references > p { + margin: 0; + letter-spacing: initial; + line-height: initial; + font-size: 1em; } diff --git a/src/app/grid-filtering/grid-filtering.sample.html b/src/app/grid-filtering/grid-filtering.sample.html index 3fb7a703e08..1893ea47465 100644 --- a/src/app/grid-filtering/grid-filtering.sample.html +++ b/src/app/grid-filtering/grid-filtering.sample.html @@ -1,120 +1,121 @@ -
-
-
- -
+
+

Sample 1

- - - - - - - Really advanced filtering - - - Export to Excel 👌 - Export to CSV 👍 - - - - - - - - -
- Allow Filtering - -
-
- Allow Advanced Filtering - - - Apply Changes - -
+
+ +
-

ESF Templates

- - - - - - Really advanced filtering - - Export to Excel 👌 - Export to CSV 👍 - - - - - + + + + + + + Really advanced filtering + + + Export to Excel 👌 + Export to CSV 👍 + + + + + + + + - - filter_alt - +
+ Allow Filtering + +
- -
COLUMN OPERATIONS - - - - - - -
- FILTER OPERATIONS - - - - - - -
+
+ Allow Advanced Filtering + + + Apply Changes +
+ +

ESF Templates

+ + + + + + + Really advanced filtering + + Export to Excel 👌 + Export to CSV 👍 + + + + + + + + filter_alt + + + +
COLUMN OPERATIONS + + + + + + +
+ FILTER OPERATIONS + + + + + + +
From 644462d175d1a5e644756d6abde906e90e2a40ea Mon Sep 17 00:00:00 2001 From: sivanova Date: Fri, 6 Jan 2023 10:16:54 +0200 Subject: [PATCH 02/16] feat(action-strip/paginator): sizable mixins and functions --- .../action-strip/_action-strip-theme.scss | 18 +++++-------- .../paginator/_paginator-theme.scss | 26 ++++++++++++------- .../styles/components/tabs/_tabs-theme.scss | 8 +----- 3 files changed, 24 insertions(+), 28 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss index e0747d109e1..9432076ae59 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss @@ -64,10 +64,10 @@ @mixin action-strip($theme) { @include css-vars($theme); - $padding: ( - comfortable: 0 rem(24px), - cosy: 0 rem(16px), - compact: 0 rem(12px) + $padding-inline: ( + comfortable: rem(24px), + cosy: rem(16px), + compact: rem(12px) ); $variant: map.get($theme, variant); @@ -84,7 +84,8 @@ inset-inline-start: 0; background: var-get($theme, 'background'); color: inherit; - padding: map.get($padding, 'comfortable'); + padding-inline: pad-inline(map.get($padding-inline, 'compact'), map.get($padding-inline, 'cosy'), map.get($padding-inline, 'comfortable')); + padding-block: 0; z-index: 9999; } @@ -101,14 +102,9 @@ } } - %igx-action-strip--cosy { - @extend %action-icons-density; - padding: map.get($padding, 'cosy'); - } - + %igx-action-strip--cosy, %igx-action-strip--compact { @extend %action-icons-density; - padding: map.get($padding, 'compact'); } %igx-action-strip__editing-actions, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss index b64e94fbb2c..5dca3fe9b0c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss @@ -56,10 +56,14 @@ @mixin paginator($theme) { @include css-vars($theme); - $paginator-padding: ( - comfortable: 0 rem(24px), - cosy: 0 rem(16px), - compact: 0 rem(12px) + igx-paginator { + @include sizable(); + } + + $paginator-padding-inline: ( + comfortable: rem(24px), + cosy: rem(16px), + compact: rem(12px) ); $paginator-height: ( @@ -69,6 +73,9 @@ ); %igx-paginator { + --component-size: var(--ig-size, var(--ig-size-large)); + --size: #{sizable(#{map.get($paginator-height, 'compact')}, #{map.get($paginator-height, 'cosy')}, #{map.get($paginator-height, 'comfortable')})}; + display: flex; justify-content: space-between; align-items: center; @@ -77,8 +84,9 @@ font-size: rem(12px); border-top: rem(1px) solid var-get($theme, 'border-color'); z-index: 1; - padding: map.get($paginator-padding, 'comfortable'); - height: map.get($paginator-height, 'comfortable'); + padding-inline: pad-inline(map.get($paginator-padding-inline, 'compact'), map.get($paginator-padding-inline, 'cosy'), map.get($paginator-padding-inline, 'comfortable')); + padding-block: 0; + height: var(--size); width: 100%; &:empty { @@ -87,13 +95,11 @@ } %igx-paginator--cosy { - padding: map.get($paginator-padding, 'cosy'); - height: map.get($paginator-height, 'cosy'); + --component-size: var(--ig-size, var(--ig-size-medium)); } %igx-paginator--compact { - padding: map.get($paginator-padding, 'compact'); - height: map.get($paginator-height, 'compact'); + --component-size: var(--ig-size, var(--ig-size-small)); } %igx-paginator-content { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index 0f27a27a1f1..e609c2ee8eb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss @@ -223,12 +223,6 @@ $color: var-get($theme, 'button-ripple-color') ); - $icon-space: ( - comfortable: rem(12px), - cosy: rem(8px), - compact: rem(4px) - ); - %tabs-header, %tabs-header-button, %tabs-header-item-inner, @@ -327,7 +321,7 @@ %tabs-header-item { > * { - margin-inline-start: map.get($icon-space, 'comfortable'); + margin-inline-start: rem(12px); &:first-child { margin-inline-start: 0; From c7097e83d2000a583490d9eb7c237c0e7b8ee181 Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 11 Jan 2023 09:36:39 +0200 Subject: [PATCH 03/16] feat(list/tree): sizable mixins and functions --- .../components/list/_list-component.scss | 2 + .../styles/components/list/_list-theme.scss | 106 ++++++++---------- .../components/tree/_tree-component.scss | 2 + .../styles/components/tree/_tree-theme.scss | 21 ++-- 4 files changed, 64 insertions(+), 67 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-component.scss index d655be717b2..122e3fa6e57 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-component.scss @@ -15,6 +15,7 @@ // css class 'igx-list__header' @include e(header) { + @include sizable(); @extend %igx-list-header !optional; } @@ -35,6 +36,7 @@ // css class 'igx-list__item-content' @include e(item-content) { + @include sizable(); @extend %igx-list-item-content !optional; &:active { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss index 4954f14ad94..88b54a0b5f1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss @@ -242,21 +242,27 @@ $variant: map.get($theme, variant); $bootstrap-theme: $variant == 'bootstrap'; - $list-empty-padding: ( + $list-item-padding-inline: ( comfortable: rem(16px), cosy: rem(8px), compact: rem(4px) ); - $list-item-padding: ( - comfortable: rem(8px) rem(16px), - cosy: rem(4px) rem(8px), - compact: rem(2px) rem(4px) + $list-item-padding-block: ( + comfortable: rem(8px), + cosy: rem(4px), + compact: rem(2px) ); - $list-icon-margin: ( - comfortable: rem(8px) rem(16px), - cosy: rem(6px) rem(8px), + $list-icon-margin-inline: ( + comfortable: rem(16px), + cosy: rem(8px), + compact: rem(4px) + ); + + $list-icon-margin-block: ( + comfortable: rem(8px), + cosy: rem(6px), compact: rem(4px) ); @@ -266,6 +272,12 @@ compact: rem(8px) ); + $list-actions-margin: ( + comfortable: rem(8px), + cosy: rem(6px), + compact: rem(4px) + ); + %igx-list { position: relative; display: flex; @@ -286,25 +298,29 @@ %igx-list__message--empty { text-align: center; color: var-get($theme, 'item-text-color'); - padding: map.get($list-empty-padding, 'comfortable'); + padding: rem(16px); z-index: 1; } %igx-list-header { + --component-size: var(--ig-size, var(--ig-size-large)); display: flex; align-items: center; color: var-get($theme, 'header-text-color'); background: var-get($theme, 'header-background'); - padding: map.get($list-item-padding, 'comfortable'); + padding-inline: pad-inline(map.get($list-item-padding-inline, 'compact'), map.get($list-item-padding-inline, 'cosy'), map.get($list-item-padding-inline, 'comfortable')); + padding-block: pad-block(map.get($list-item-padding-block, 'compact'), map.get($list-item-padding-block, 'cosy'), map.get($list-item-padding-block, 'comfortable')); user-select: none; } - %igx-list-header--cosy { - padding: map.get($list-item-padding, 'cosy'); + %igx-list-header--cosy, + %igx-list-item-content--cosy { + --component-size: var(--ig-size, var(--ig-size-medium)); } - %igx-list-header--compact { - padding: map.get($list-item-padding, 'compact'); + %igx-list-header--compact, + %igx-list-item-content--compact { + --component-size: var(--ig-size, var(--ig-size-small)); } %igx-list-item-base { @@ -391,7 +407,8 @@ color: var-get($theme, 'item-action-color'); > * { - margin-inline-start: rem(8px); + --component-size: var(--ig-size, var(--ig-size-large)); + margin-inline-start: pad-inline(map.get($list-actions-margin, 'compact'), map.get($list-actions-margin, 'cosy'), map.get($list-actions-margin, 'comfortable')); } &:empty { @@ -410,23 +427,17 @@ } %igx-list-item-content { + --component-size: var(--ig-size, var(--ig-size-large)); display: flex; align-items: center; position: relative; - padding: map.get($list-item-padding, 'comfortable'); + padding-inline: pad-inline(map.get($list-item-padding-inline, 'compact'), map.get($list-item-padding-inline, 'cosy'), map.get($list-item-padding-inline, 'comfortable')); + padding-block: pad-block(map.get($list-item-padding-block, 'compact'), map.get($list-item-padding-block, 'cosy'), map.get($list-item-padding-block, 'comfortable')); border-radius: var-get($theme, 'item-border-radius'); background: inherit; z-index: 2; } - %igx-list-item-content--compact { - padding: map.get($list-item-padding, 'compact'); - } - - %igx-list-item-content--cosy { - padding: map.get($list-item-padding, 'cosy'); - } - %igx-list__item-thumbnail { display: flex; align-items: center; @@ -436,8 +447,10 @@ color: var-get($theme, 'item-thumbnail-color'); > igx-icon { - margin: map.get($list-icon-margin, 'comfortable'); + --component-size: var(--ig-size, var(--ig-size-large)); + margin-inline-end: pad-inline(map.get($list-icon-margin-inline, 'compact'), map.get($list-icon-margin-inline, 'cosy'), map.get($list-icon-margin-inline, 'comfortable')); margin-inline-start: 0; + margin-block: pad-block(map.get($list-icon-margin-block, 'compact'), map.get($list-icon-margin-block, 'cosy'), map.get($list-icon-margin-block, 'comfortable')); } > igx-avatar { @@ -452,44 +465,21 @@ } %igx-list__item-thumbnail:not(:empty) + %igx-list__item-lines { + --component-size: var(--ig-size, var(--ig-size-large)); margin: 0; - margin-inline-start: map.get($list-line-margin, 'comfortable'); - } - - %igx-list__item-thumbnail--cosy:not(:empty) + %igx-list__item-lines { - margin: 0; - margin-inline-start: map.get($list-line-margin, 'cosy'); - } - - %igx-list__item-thumbnail--compact:not(:empty) + %igx-list__item-lines { - margin: 0; - margin-inline-start: map.get($list-line-margin, 'compact'); - } - - %igx-list__item-thumbnail--cosy { - > igx-icon { - margin: map.get($list-icon-margin, 'cosy'); - margin-inline-start: 0; - } + margin-inline-start: pad-inline(map.get($list-line-margin, 'compact'), map.get($list-line-margin, 'cosy'), map.get($list-line-margin, 'comfortable')); } - %igx-list__item-thumbnail--compact { - > igx-icon { - margin: map.get($list-icon-margin, 'compact'); - margin-inline-start: 0; - } + %igx-list__item-thumbnail--cosy:not(:empty) + %igx-list__item-lines, + %igx-list__item-thumbnail--cosy > igx-icon, + %igx-list__item-actions--cosy > * { + --component-size: var(--ig-size, var(--ig-size-medium)); } - %igx-list__item-actions--cosy { - > * { - margin-inline-start: rem(6px); - } - } - - %igx-list__item-actions--compact { - > * { - margin-inline-start: rem(4px); - } + %igx-list__item-thumbnail--compact:not(:empty) + %igx-list__item-lines, + %igx-list__item-thumbnail--compact > igx-icon, + %igx-list__item-actions--compact > * { + --component-size: var(--ig-size, var(--ig-size-small)); } %igx-list__item-lines + %igx-list__item-actions { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-component.scss index 7cafb11ba86..eb55b6c5d9f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-component.scss @@ -21,6 +21,7 @@ @extend %tree-node !optional; @include e(wrapper) { + @include sizable(); @extend %node-wrapper !optional; &:hover { @@ -65,6 +66,7 @@ } @include e(spacer) { + @include sizable(); @extend %node-spacer !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss index 18da44dfc36..199f7397015 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss @@ -157,8 +157,11 @@ } %node-wrapper { - min-height: map.get($node-height, 'comfortable'); - padding: 0 map.get($node-indent, 'comfortable'); + --component-size: var(--ig-size, var(--ig-size-large)); + --size: #{sizable(#{map.get($node-height, 'compact')}, #{map.get($node-height, 'cosy')}, #{map.get($node-height, 'comfortable')})}; + min-height: var(--size); + padding-inline: pad-inline(map.get($node-indent, 'compact'), map.get($node-indent, 'cosy'), map.get($node-indent, 'comfortable')); + padding-block: 0; position: relative; background: var-get($theme, 'background'); color: var-get($theme, 'foreground'); @@ -203,11 +206,10 @@ } &--cosy { - min-height: map.get($node-height, 'cosy'); - padding: 0 map.get($node-indent, 'cosy'); + --component-size: var(--ig-size, var(--ig-size-medium)); %node-spacer { - width: map.get($node-indent, 'cosy') + --component-size: var(--ig-size, var(--ig-size-medium)); } %node-drop-indicator { @@ -222,11 +224,10 @@ } &--compact { - min-height: map.get($node-height, 'compact'); - padding: 0 map.get($node-indent, 'compact'); + --component-size: var(--ig-size, var(--ig-size-small)); %node-spacer { - width: map.get($node-indent, 'compact') + --component-size: var(--ig-size, var(--ig-size-small)); } %node-drop-indicator { @@ -290,8 +291,10 @@ } %node-spacer { + --component-size: var(--ig-size, var(--ig-size-large)); + --size: #{sizable(#{map.get($node-indent, 'compact')}, #{map.get($node-indent, 'cosy')}, #{map.get($node-indent, 'comfortable')})}; + width: var(--size); display: inline-block; - width: map.get($node-indent, 'comfortable'); } %node-content { From a84b7f1cf5cac72ea0d60f996f175b7bd66511f7 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 7 Feb 2023 14:10:17 +0200 Subject: [PATCH 04/16] refactor(grid) grid to use pad-block/pad-inline/pad and sizable functions. --- .../components/button/_button-theme.scss | 30 +- .../styles/components/chip/_chip-theme.scss | 4 +- .../grid-summary/_grid-summary-theme.scss | 36 +- .../grid-toolbar/_grid-toolbar-theme.scss | 39 +- .../grid/_excel-filtering-theme.scss | 229 ++------- .../components/grid/_grid-component.scss | 168 +------ .../styles/components/grid/_grid-theme.scss | 458 ++++-------------- .../grid/_header-row-component.scss | 16 - .../grid/_pivot-data-selector-theme.scss | 10 +- .../navdrawer/_navdrawer-component.scss | 1 - 10 files changed, 197 insertions(+), 794 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index 02a6162fa40..a11dda71cdb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -279,9 +279,9 @@ ); $button-padding-fluent-block: ( - comfortable: rem(16px, 16px), - cosy: rem(16px, 16px), - compact: rem(16px, 16px) + comfortable: 0, + cosy: 0, + compact: 0 ); $button-padding-bootstrap-inline: ( @@ -539,8 +539,8 @@ align-items: center; justify-content: center; min-width: $button-width; - padding-inline: pad(map.get($button-padding-inline, 'compact'), map.get($button-padding-inline, 'cosy'), map.get($button-padding-inline, 'comfortable')); - padding-block: pad(map.get($button-padding-block, 'compact'), map.get($button-padding-block, 'cosy'), map.get($button-padding-block, 'comfortable')); + padding-inline: pad-inline(map.get($button-padding-inline, 'compact'), map.get($button-padding-inline, 'cosy'), map.get($button-padding-inline, 'comfortable')); + padding-block: pad-block(map.get($button-padding-block, 'compact'), map.get($button-padding-block, 'cosy'), map.get($button-padding-block, 'comfortable')); min-height: var(--size); border: rem(1px) solid var-get($flat-theme, 'border-color'); cursor: pointer; @@ -572,18 +572,10 @@ %igx-button-display--cosy { --component-size: var(--ig-size, var(--ig-size-medium)); - - * + * { - margin-inline-start: map.get($icon-in-button-margin, 'cosy'); - } } %igx-button-display--compact { --component-size: var(--ig-size, var(--ig-size-small)); - - * + * { - margin-inline-start: map.get($icon-in-button-margin, 'compact'); - } } igx-grid-filtering-row { @@ -649,8 +641,8 @@ color: var-get($outlined-theme, 'foreground'); border-color: var-get($outlined-theme, 'border-color'); border-radius: var-get($outlined-theme, 'border-radius'); - padding-block: pad(map.get($outlined-button-padding-block, 'compact'), map.get($outlined-button-padding-block, 'cosy'), map.get($outlined-button-padding-block, 'comfortable')); - padding-inline: pad(map.get($outlined-button-padding-inline, 'compact'), map.get($outlined-button-padding-inline, 'cosy'), map.get($outlined-button-padding-inline, 'comfortable')); + padding-block: pad-block(map.get($outlined-button-padding-block, 'compact'), map.get($outlined-button-padding-block, 'cosy'), map.get($outlined-button-padding-block, 'comfortable')); + padding-inline: pad-inline(map.get($outlined-button-padding-inline, 'compact'), map.get($outlined-button-padding-inline, 'cosy'), map.get($outlined-button-padding-inline, 'comfortable')); min-height: var(--size); @if $variant == 'indigo-design' { @@ -844,14 +836,12 @@ %igx-button--fab { @if $variant != 'indigo-design' { --size: #{sizable(map.get($button-floating-size, 'compact'), map.get($button-floating-size, 'cosy'), map.get($button-floating-size, 'comfortable'))}; - } - - @if $variant == 'indigo-design' { + } @else { --size: #{sizable(map.get($button-floating-size-indigo, 'compact'), map.get($button-floating-size-indigo, 'cosy'), map.get($button-floating-size-indigo, 'comfortable'))}; } - padding-block: pad(map.get($button-floating-padding-block, 'compact'), map.get($button-floating-padding-block, 'cosy'), map.get($button-floating-padding-block, 'comfortable')); - padding-inline: pad(map.get($button-floating-padding-inline, 'compact'), map.get($button-floating-padding-inline, 'cosy'), map.get($button-floating-padding-inline, 'comfortable')); + padding-block: pad-block(map.get($button-floating-padding-block, 'compact'), map.get($button-floating-padding-block, 'cosy'), map.get($button-floating-padding-block, 'comfortable')); + padding-inline: pad-inline(map.get($button-floating-padding-inline, 'compact'), map.get($button-floating-padding-inline, 'cosy'), map.get($button-floating-padding-inline, 'comfortable')); min-width: var(--size); min-height: var(--size); line-height: unset; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index 88118c85b8f..db11bcece1b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -412,7 +412,7 @@ vertical-align: middle; max-width: $chip-max-width; - > igx-icon { + > igx-icon { display: block; } } @@ -511,7 +511,7 @@ justify-content: center; flex: 1 1 auto; height: var(--size); - padding: $chip-item-padding; + padding-inline: pad-inline(map.get($chip-padding-inline, 'compact'), map.get($chip-padding-inline, 'cosy'), $item-padding); color: var-get($theme, 'text-color'); background: var-get($theme, 'background'); border-width: rem(1px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss index ad4c6d87e43..96d02b53cce 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss @@ -93,16 +93,16 @@ color: var-get($theme, 'pinned-border-color') ); - $item-padding: ( - comfortable: rem(6px) 0, - cosy: rem(2px) 0, + $item-padding-block: ( + comfortable: rem(6px), + cosy: rem(2px), compact: 0 ); - $summary-padding: ( - comfortable: 0 rem(24px), - cosy: 0 rem(16px), - compact: 0 rem(12px) + $summary-padding-inline: ( + comfortable: rem(24px), + cosy: rem(16px), + compact: rem(12px) ); %igx-grid-summary { @@ -110,7 +110,8 @@ display: flex; flex-direction: column; flex: 1 1 0%; - padding: map.get($summary-padding, 'comfortable'); + padding-block: 0; + padding-inline: pad-inline(map.get($summary-padding-inline, 'compact'), map.get($summary-padding-inline, 'cosy'), map.get($summary-padding-inline, 'comfortable')); background: var-get($theme, 'background-color', inherit); overflow: hidden; outline-style: none; @@ -125,14 +126,6 @@ } } - %igx-grid-summary--cosy { - padding: map.get($summary-padding, 'cosy'); - } - - %igx-grid-summary--compact { - padding: map.get($summary-padding, 'compact'); - } - %igx-grid-summary--pinned { position: relative; z-index: 1; @@ -159,19 +152,12 @@ %igx-grid-summary__item { display: flex; align-items: center; - padding: map.get($item-padding, 'comfortable'); + padding-block: pad(map.get($item-padding-block, 'compact'), map.get($item-padding-block, 'cosy'), map.get($item-padding-block, 'comfortable')); + padding-inline: 0; font-size: rem(12px); position: relative; } - %igx-grid-summary__item--cosy { - padding: map.get($item-padding, 'cosy'); - } - - %igx-grid-summary__item--compact { - padding: map.get($item-padding, 'compact'); - } - %igx-grid-summary__label { color: var-get($theme, 'label-color'); min-width: rem(30px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss index 6942ed888e9..3e9779e856b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss @@ -102,10 +102,16 @@ // Caption $grid-toolbar-fs: rem(16px); - $grid-toolbar-padding: ( - comfortable: rem(24px) rem(16px), - cosy: rem(16px) rem(12px), - compact: rem(12px) rem(8px) + $grid-toolbar-padding-start: ( + comfortable: rem(24px), + cosy: rem(16px), + compact: rem(12px) + ); + + $grid-toolbar-padding-end: ( + comfortable: rem(16px), + cosy: rem(12px), + compact: rem(8px) ); $grid-toolbar-spacer: ( @@ -136,12 +142,13 @@ background: var-get($theme, 'background-color'); height: auto; - min-height: map.get($grid-toolbar-height, 'comfortable'); + min-height: sizable(map.get($grid-toolbar-height, 'compact'), map.get($grid-toolbar-height, 'cosy'), map.get($grid-toolbar-height, 'comfortable')); padding-block: 0; - padding-inline: map.get($grid-toolbar-padding, 'comfortable'); + padding-inline-start: pad-inline(map.get($grid-toolbar-padding-start, 'compact'), map.get($grid-toolbar-padding-start, 'cosy'), map.get($grid-toolbar-padding-start, 'comfortable')); + padding-inline-end: pad-inline(map.get($grid-toolbar-padding-end, 'compact'), map.get($grid-toolbar-padding-end, 'cosy'), map.get($grid-toolbar-padding-end, 'comfortable')); [igxButton] { - margin-inline-start: map.get($grid-toolbar-spacer, 'comfortable'); + margin-inline-start: pad-inline(map.get($grid-toolbar-spacer, 'compact'), map.get($grid-toolbar-spacer, 'cosy'), map.get($grid-toolbar-spacer, 'comfortable')); &:first-of-type { margin-inline-start: 0; @@ -166,24 +173,6 @@ } } - %igx-grid-toolbar--cosy { - min-height: map.get($grid-toolbar-height, 'cosy'); - padding-inline: map.get($grid-toolbar-padding, 'cosy'); - - [igxButton] { - margin-inline-start: map.get($grid-toolbar-spacer, 'cosy'); - } - } - - %igx-grid-toolbar--compact { - min-height: map.get($grid-toolbar-height, 'compact'); - padding-inline: map.get($grid-toolbar-padding, 'compact'); - - [igxButton] { - margin-inline-start: map.get($grid-toolbar-spacer, 'compact'); - } - } - %igx-grid-toolbar__title { color: var-get($theme, 'title-text-color'); flex: 1 1 auto; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss index 9d44eff41a2..386fac7e651 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss @@ -25,6 +25,7 @@ ); $tree-node-expander-size: rem(20px); + $tree-node-height: ( comfortable: rem(40px), cosy: rem(32px), @@ -120,15 +121,18 @@ } igx-chips-area { - padding: rem(16px) rem(16px) 0 rem(16px); - gap: rem(8px); + padding-block-start: pad-block(rem(4px), rem(8px), rem(16px)); + padding-block-end: 0; + padding-inline-start: pad-block(rem(4px), rem(8px), rem(16px)); + padding-inline-end: pad-block(rem(4px), rem(8px), rem(16px)); + gap: pad(rem(4px), rem(4px), rem(8px)); } } %grid-excel-menu__header { display: flex; align-items: center; - padding: rem(16px); + padding: pad(rem(4px), rem(8px), rem(16px)); color: color($color: 'gray', $variant: 700); } @@ -154,6 +158,8 @@ %grid-excel-menu__footer { display: flex; justify-content: space-between; + padding-inline: pad-inline(rem(4px), rem(8px), rem(8px)); + padding-block: pad-block(rem(8px)); %grid-excel-filter__apply, %grid-excel-filter__cancel { @@ -176,7 +182,8 @@ %grid-excel-sort, %grid-excel-move { display: block; - padding: rem(8px) rem(16px); + padding-block: pad-block(rem(4px), rem(8px), rem(8px)); + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); header { color: color($color: 'gray', $variant: 700); @@ -203,7 +210,8 @@ } %grid-excel-actions { - padding: rem(8px) rem(16px); + padding-block: pad-block(rem(4px), rem(8px), rem(8px)); + padding-inline: pad-inline(rem(4px), rem(16px), rem(16px)); } %grid-excel-actions--selected { @@ -242,7 +250,8 @@ display: flex; align-items: center; justify-content: space-between; - padding: rem(8px) rem(16px); + padding-block: pad-block(rem(4px), rem(8px), rem(8px)); + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); cursor: pointer; color: color($color: 'gray', $variant: 700); outline-style: none; @@ -271,17 +280,19 @@ } %grid-excel-main { + --size: #{sizable(map.get($tree-node-height, 'compact'), map.get($tree-node-height, 'cosy'), map.get($tree-node-height, 'comfortable'))}; + display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; - padding: rem(16px); - gap: rem(16px); + padding: pad(rem(4px), rem(8px), rem(16px)); + gap: pad(rem(4px), rem(8px), rem(16px)); igx-list { flex-grow: 1; overflow: hidden; - margin-inline: -#{rem(16px)}; + margin-inline: pad-inline(rem(-4px), rem(-8px), rem(-16px)); border: 0; @if $bootstrap-theme { @@ -296,7 +307,8 @@ %igx-excel-filter__tree { background: color($color: 'surface'); overflow-y: auto; - margin: 0 rem(-16px); + margin-inline: pad-inline(rem(-4px), rem(-8px), rem(-16px)); + margin-block: 0; flex: 1; @if $bootstrap-theme { @@ -315,13 +327,13 @@ > igx-checkbox, .igx-tree-node__wrapper { - height: map.get($tree-node-height, 'comfortable'); - min-height: map.get($tree-node-height, 'comfortable'); + height: var(--size); + min-height: var(--size); } .igx-tree-node__toggle-button { min-width: rem(20px); - margin-inline-start: map.get($tree-node-indent, 'comfortable'); + margin-inline-start: pad-inline(map.get($tree-node-indent, 'compact'), map.get($tree-node-indent, 'cosy'), map.get($tree-node-indent, 'comfortable')); } } @@ -335,7 +347,7 @@ %igx-excel-filter__tree-alike-item { display: flex; align-items: center; - height: map.get($tree-node-height, 'comfortable'); + height: var(--size); background: color($color: 'surface'); &:hover, @@ -344,85 +356,24 @@ } > igx-checkbox { - margin-inline-start: map.get($checkbox-indent, 'comfortable'); + margin-inline-start: pad-inline(map.get($checkbox-indent, 'compact'), map.get($checkbox-indent, 'cosy'), map.get($checkbox-indent, 'comfortable')); } } } %grid-excel-menu--cosy { - igx-chips-area { - padding: rem(8px) rem(8px) 0 rem(8px); - } - %grid-excel-menu__header { justify-content: space-between; - padding: rem(8px); - } - - %grid-excel-sort { - padding: rem(8px); - } - - %grid-excel-move { - padding: rem(8px); - } - - %grid-excel-actions { - padding: rem(8px); - } - - %grid-excel-actions__action { - padding: rem(8px); - } - - %grid-excel-main { - padding: rem(8px); - gap: rem(8px); - } - - igx-list { - margin-inline-start: -#{rem(8px)}; - margin-inline-end: -#{rem(8px)}; - } - - %igx-excel-filter__tree { - margin: 0 rem(-8px); - - > igx-checkbox, - .igx-tree-node__wrapper { - height: map.get($tree-node-height, 'cosy'); - min-height: map.get($tree-node-height, 'cosy'); - } - - .igx-tree-node__toggle-button { - margin-inline-start: map.get($tree-node-indent, 'cosy'); - } - } - - %igx-excel-filter__tree-alike-item { - height: map.get($tree-node-height, 'cosy'); - - > igx-checkbox { - margin-inline-start: map.get($checkbox-indent, 'cosy'); - } } } %grid-excel-menu--compact { - igx-chips-area { - padding: rem(4px) rem(4px) 0 rem(4px); - gap: rem(4px); - } - %grid-excel-menu__header { justify-content: space-between; - padding: rem(4px); } %grid-excel-sort, %grid-excel-move { - padding: rem(4px); - @extend %grid-excel-action--compact; igx-buttongroup { @@ -433,46 +384,6 @@ %grid-excel-move { margin-bottom: 0; } - - %grid-excel-actions { - padding: rem(4px); - } - - %grid-excel-actions__action { - padding: rem(4px); - } - - %grid-excel-main { - padding: rem(4px); - gap: rem(4px); - } - - igx-list { - margin-inline-start: -#{rem(4px)}; - margin-inline-end: -#{rem(4px)}; - } - - %igx-excel-filter__tree { - margin: 0 rem(-4px); - - igx-checkbox, - .igx-tree-node__wrapper { - height: map.get($tree-node-height, 'compact'); - min-height: map.get($tree-node-height, 'compact'); - } - - .igx-tree-node__toggle-button { - margin: 0 map.get($tree-node-indent, 'compact'); - } - } - - %igx-excel-filter__tree-alike-item { - height: map.get($tree-node-height, 'compact'); - - > igx-checkbox { - margin-inline-start: map.get($checkbox-indent, 'compact'); - } - } } %grid-excel-menu__secondary { @@ -483,39 +394,41 @@ border-radius: border-radius(rem(4px)); } - %grid-excel-menu__secondary--cosy { - %grid-excel-menu__header { - padding: rem(8px); - } - - %grid-excel-menu__condition { - padding: 0 rem(8px); - } + %grid-excel-menu__condition { + display: flex; + flex-wrap: wrap; + align-items: center; + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); + padding-block: 0; - %grid-excel-menu__add-filter { - margin: 0 rem(8px) rem(8px); - } + igx-select { + flex-grow: 1; + flex-basis: 40%; + margin: rem(16px) 0; - %grid-excel-menu__footer { - padding: rem(8px); + ~ igx-input-group, + ~ igx-date-picker { + margin-inline-start: rem(16px); + } } - } - %grid-excel-menu__secondary--compact { - %grid-excel-menu__header { - padding: rem(4px); + igx-buttongroup { + min-width: 30%; } - %grid-excel-menu__condition { - padding: 0 rem(4px); + [igxButton='icon'] { + margin-inline-start: rem(16px); } + } - %grid-excel-menu__add-filter { - margin: 0 rem(4px) rem(4px); - } + %grid-excel-menu__add-filter { + margin-inline: pad-inline(rem(4px), rem(4px), rem(16px)); + margin-block: 0; - %grid-excel-menu__footer { - padding: rem(8px) rem(4px); + igx-icon { + width: var(--igx-icon-size, #{rem(18px)}); + height: var(--igx-icon-size, #{rem(18px)}); + font-size: var(--igx-icon-size, #{rem(18px)}); } } @@ -545,42 +458,6 @@ } } - %grid-excel-menu__condition { - display: flex; - flex-wrap: wrap; - align-items: center; - padding: 0 rem(16px); - - igx-select { - flex-grow: 1; - flex-basis: 40%; - margin: rem(16px) 0; - - ~ igx-input-group, - ~ igx-date-picker { - margin-inline-start: rem(16px); - } - } - - igx-buttongroup { - min-width: 30%; - } - - [igxButton='icon'] { - margin-inline-start: rem(16px); - } - } - - %grid-excel-menu__add-filter { - margin: 0 rem(16px) rem(16px); - - igx-icon { - width: var(--igx-icon-size, #{rem(18px)}); - height: var(--igx-icon-size, #{rem(18px)}); - font-size: var(--igx-icon-size, #{rem(18px)}); - } - } - igx-excel-style-filter-operations, [igxExcelStyleFilterOperations] { display: flex; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss index 256a4ba818f..fa117943d20 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss @@ -25,6 +25,8 @@ ) ); + @extend %grid-host !optional; + @extend %grid-display !optional; @include e(caption) { @@ -319,10 +321,6 @@ @extend %grid-cell--pinned-first !optional; } - @include e(td, $m: pinned-end) { - @extend %grid-cell-pinned--end !optional; - } - @include e(td, $m: fw) { @extend %grid-cell--fixed-width !optional; } @@ -443,14 +441,6 @@ @extend %igx-grid__filtering-cell !optional; } - @include e(filtering-cell, $m: cosy) { - @extend %igx-grid__filtering-cell--cosy !optional; - } - - @include e(filtering-cell, $m: compact) { - @extend %igx-grid__filtering-cell--compact !optional; - } - @include e(filtering-cell, $m: 'selected') { @extend %igx-grid__filtering-cell !optional; @extend %igx-grid__filtering-cell--selected !optional; @@ -477,14 +467,6 @@ @extend %igx-grid__filtering-row !optional; } - @include e(filtering-row, $m: cosy) { - @extend %igx-grid__filtering-row--cosy !optional; - } - - @include e(filtering-row, $m: compact) { - @extend %igx-grid__filtering-row--compact !optional; - } - @include e(filtering-row-editing-buttons) { @extend %igx-grid__filtering-row-editing-buttons !optional; } @@ -608,83 +590,14 @@ @extend %grid-display !optional; @extend %grid-display-cosy !optional; - @include e(tr-pivot) { - @extend %igx-grid__tr-pivot--cosy !optional - } - - @include e(tr-pivot, $m: 'row-area') { - @extend %igx-grid__tr-pivot--row-area--cosy !optional - } - - @include e(tr-pivot, $m: 'filter') { - @extend %igx-grid__tr-pivot--filter--cosy !optional - } - - @include e(drag-indicator) { - @extend %igx-grid__drag-indicator--cosy !optional; - } - - @include e(cbx-padding) { - @extend %cbx-padding--cosy !optional; - } - @include e(cbx-selection, $m: push) { @extend %grid__cbx-selection--push--cosy !optional; } - @include e(drag-ghost-image) { - @extend %grid__drag-ghost-image--cosy !optional; - } - - @include e(td) { - @extend %grid-cell-display--cosy !optional; - } - - @include e(group-content) { - @extend %igx-grid__group-content--cosy !optional; - } - - @include e(row-indentation) { - @extend %igx-grid__row-indentation--cosy !optional; - } - - @include e(header-indentation) { - @extend %igx-grid__header-indentation--cosy !optional; - } - - @include e(grouping-indicator) { - @extend %igx-grid__grouping-indicator--cosy !optional; - } - - @include e(group-expand-btn) { - @extend %igx-grid__group-expand-btn--cosy !optional; - } - - @include e(group-row) { - @extend %igx-grid__group-row--cosy !optional; - } - - @include e(hierarchical-indent) { - @extend %igx-grid__hierarchical-indent--cosy !optional; - } - - @include e(hierarchical-indent, $m: scroll) { - @extend %igx-grid__hierarchical-indent--cosy--scroll !optional; - } - - @include e(hierarchical-expander) { - @extend %igx-grid__hierarchical-expander--cosy !optional; - } - @include e(hierarchical-expander, $m: empty) { - @extend %igx-grid__hierarchical-expander--cosy !optional; @extend %igx-grid__hierarchical-expander--empty !optional; } - @include e(hierarchical-expander, $m: push) { - @extend %igx-grid__hierarchical-expander--push--cosy !optional; - } - @for $i from 1 through 10 { @include e(row-indentation, $m: level-#{$i}) { @extend %igx-grid__row-indentation-cosy--level-#{$i} !optional; @@ -694,93 +607,20 @@ @extend %igx-grid__group-row-cosy--padding-level-#{$i} !optional; } } - - @include e(td, $m: pinned-chip) { - @extend %grid-cell--pinned-chip--cosy !optional; - } } @include m(compact) { @extend %grid-display !optional; @extend %grid-display-compact !optional; - @include e(tr-pivot) { - @extend %igx-grid__tr-pivot--compact !optional - } - - @include e(tr-pivot, $m: 'row-area') { - @extend %igx-grid__tr-pivot--row-area--compact !optional - } - - @include e(tr-pivot, $m: 'filter') { - @extend %igx-grid__tr-pivot--filter--compact !optional - } - - @include e(drag-indicator) { - @extend %igx-grid__drag-indicator--compact !optional; - } - - @include e(cbx-padding) { - @extend %cbx-padding--compact !optional; - } - @include e(cbx-selection, $m: push) { @extend %grid__cbx-selection--push--compact !optional; } - @include e(drag-ghost-image) { - @extend %grid__drag-ghost-image--compact !optional; - } - - @include e(td) { - @extend %grid-cell-display--compact !optional; - } - - @include e(group-content) { - @extend %igx-grid__group-content--compact !optional; - } - - @include e(row-indentation) { - @extend %igx-grid__row-indentation--compact !optional; - } - - @include e(header-indentation) { - @extend %igx-grid__header-indentation--compact !optional; - } - - @include e(grouping-indicator) { - @extend %igx-grid__grouping-indicator--compact !optional; - } - - @include e(group-expand-btn) { - @extend %igx-grid__group-expand-btn--compact !optional; - } - - @include e(group-row) { - @extend %igx-grid__group-row--compact !optional; - } - - @include e(hierarchical-indent) { - @extend %igx-grid__hierarchical-indent--compact !optional; - } - - @include e(hierarchical-indent, $m: scroll) { - @extend %igx-grid__hierarchical-indent--compact--scroll !optional; - } - - @include e(hierarchical-expander) { - @extend %igx-grid__hierarchical-expander--compact !optional; - } - @include e(hierarchical-expander, $m: empty) { - @extend %igx-grid__hierarchical-expander--compact !optional; @extend %igx-grid__hierarchical-expander--empty !optional; } - @include e(hierarchical-expander, $m: push) { - @extend %igx-grid__hierarchical-expander--push--compact !optional; - } - @for $i from 1 through 10 { @include e(row-indentation, $m: level-#{$i}) { @extend %igx-grid__row-indentation-compact--level-#{$i} !optional; @@ -790,10 +630,6 @@ @extend %igx-grid__group-row-compact--padding-level-#{$i} !optional; } } - - @include e(td, $m: pinned-chip) { - @extend %grid-cell--pinned-chip--compact !optional; - } } @include excel-filtering-partial(); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 3b9630ba7ca..1a9d7b67c40 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -609,10 +609,10 @@ $padding-cosy: rem(16px); $padding-compact: rem(12px); - $grid-header-padding: ( - comfortable: 0 $padding-comfortable, - cosy: 0 $padding-cosy, - compact: 0 $padding-compact + $grid-header-padding-inline: ( + comfortable: $padding-comfortable, + cosy: $padding-cosy, + compact: $padding-compact ); $pivot-row-aria-padding: ( @@ -647,10 +647,10 @@ $cell-padding-cosy: rem(16px); $cell-padding-compact: rem(12px); - $grid-cell-padding: ( - comfortable: 0 $cell-padding-comfortable, - cosy: 0 $cell-padding-cosy, - compact: 0 $cell-padding-compact + $grid-cell-padding-inline: ( + comfortable: $cell-padding-comfortable, + cosy: $cell-padding-cosy, + compact: $cell-padding-compact ); $hierarchical-grid-indent: ( @@ -661,10 +661,22 @@ $hierarchical-action-icon: rem(24px); - $grouparea-padding: ( - comfortable: 0 rem(24px), - cosy: 0 rem(16px), - compact: 0 rem(12px) + $hierarchical-indent: ( + comfortable: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon}), + cosy: calc(2 * #{map.get($hierarchical-grid-indent, 'cosy')} + #{$hierarchical-action-icon}), + compact: calc(2 * #{map.get($hierarchical-grid-indent, 'compact')} + #{$hierarchical-action-icon}) + ); + + $hierarchical-indent-scroll: ( + comfortable: calc(#{map.get($hierarchical-grid-indent, 'comfortable')} + 18px), + cosy: calc(#{map.get($hierarchical-grid-indent, 'cosy')} + 18px), + compact: calc(#{map.get($hierarchical-grid-indent, 'compact')} + 18px) + ); + + $grouparea-padding-inline: ( + comfortable: rem(24px), + cosy: rem(16px), + compact: rem(12px) ); $grouparea-min-height: ( @@ -694,7 +706,14 @@ outline: 0; } + %grid-host { + --component-size: var(--ig-size, var(--ig-size-large)); + } + %grid-display { + @include sizable(); + --header-size: #{sizable(map.get($grid-header-height, 'compact'), map.get($grid-header-height, 'cosy'), map.get($grid-header-height, 'comfortable'))}; + --grouparea-size: #{sizable(map.get($grouparea-min-height, 'compact'), map.get($grouparea-min-height, 'cosy'), map.get($grouparea-min-height, 'comfortable'))}; --igx-tree-indent-size: #{rem(24px)}; position: relative; @@ -717,10 +736,12 @@ } %grid-display-cosy { + --component-size: var(--ig-size, var(--ig-size-medium)); --igx-tree-indent-size: #{rem(16px)}; } %grid-display-compact { + --component-size: var(--ig-size, var(--ig-size-small)); --igx-tree-indent-size: #{rem(12px)}; } @@ -770,7 +791,7 @@ %grid__cbx-selection--push { align-items: flex-start; - padding-top: math.div(map.get($grid-header-height, 'comfortable') - rem(20px), 2); + padding-block-start: pad-block(math.div(map.get($grid-header-height, 'compact') - rem(20px), 2), math.div(map.get($grid-header-height, 'cosy') - rem(20px), 2), math.div(map.get($grid-header-height, 'comfortable') - rem(20px), 2)); } %grid-row { @@ -800,14 +821,12 @@ %grid-thead--cosy { %grid__cbx-selection--push--cosy { align-items: flex-start; - padding-top: math.div(map.get($grid-header-height, 'cosy') - rem(20px), 2); } } %grid-thead--compact { %grid__cbx-selection--push--compact { align-items: flex-start; - padding-top: math.div(map.get($grid-header-height, 'compact') - rem(20px), 2); } } @@ -815,23 +834,15 @@ flex-basis: auto !important; align-items: center !important; border-bottom: $grid-header-border; - height: map.get($grid-header-height, 'comfortable'); + height: var(--header-size); + padding-inline: pad-inline(map.get($grid-cell-padding-inline, 'compact'), map.get($grid-cell-padding-inline, 'cosy'), map.get($grid-cell-padding-inline, 'comfortable')); + padding-block: 0; } %grid-thead-title--pinned { border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; } - %grid-thead-title--cosy { - height: map.get($grid-header-height, 'cosy'); - padding: map.get($grid-cell-padding, 'cosy'); - } - - %grid-thead-title--compact { - height: map.get($grid-header-height, 'compact'); - padding: map.get($grid-cell-padding, 'compact'); - } - %grid-thead-group { display: flex; flex-flow: row nowrap; @@ -1052,7 +1063,8 @@ display: flex; align-items: center; justify-content: center; - padding: map.get($grid-cell-padding, 'comfortable'); + padding-inline: pad-inline(map.get($grid-cell-padding-inline, 'compact'), map.get($grid-cell-padding-inline, 'cosy'), map.get($grid-cell-padding-inline, 'comfortable')); + padding-block: 0; flex: 1 0 auto; // Fix for IE 11 min-width: calc(#{$drag-icon-size} + #{$cell-padding-comfortable}); @@ -1069,18 +1081,6 @@ } } - %igx-grid__drag-indicator--cosy { - padding: map.get($grid-cell-padding, 'cosy'); - // Fix for IE 11 - min-width: calc(#{$drag-icon-size} + #{$cell-padding-cosy}); - } - - %igx-grid__drag-indicator--compact { - padding: map.get($grid-cell-padding, 'compact'); - // Fix for IE 11 - min-width: calc(#{$drag-icon-size} + #{$cell-padding-compact}); - } - %igx-grid__drag-indicator--header { border-inline-end: $grid-header-border; } @@ -1328,7 +1328,8 @@ flex: 1 1 0%; align-items: center; outline-style: none; - padding: map.get($grid-cell-padding, 'comfortable'); + padding-inline: pad-inline(map.get($grid-cell-padding-inline, 'compact'), map.get($grid-cell-padding-inline, 'cosy'), map.get($grid-cell-padding-inline, 'comfortable')); + padding-block: 0; font-size: $grid-cell-fs; line-height: $grid-cell-lh; color: inherit; @@ -1349,14 +1350,6 @@ @include ellipsis(); } - %grid-cell-display--cosy { - padding: map.get($grid-cell-padding, 'cosy'); - } - - %grid-cell-display--compact { - padding: map.get($grid-cell-padding, 'compact'); - } - %grid-cell--fixed-width { flex-grow: 0; outline-style: none; @@ -1603,15 +1596,7 @@ } %grid-cell--pinned-chip { - margin-inline-end: rem(12px); - } - - %grid-cell--pinned-chip--cosy { - margin-inline-end: rem(8px); - } - - %grid-cell--pinned-chip--compact { - margin-inline-end: rem(4px); + margin-inline-end: pad-inline(rem(4px), rem(8px), rem(12px)); } %grid-cell-header { @@ -1621,8 +1606,10 @@ font-size: $grid-head-fs; font-weight: $grid-head-fw; min-width: 0; - padding: map.get($grid-header-padding, 'comfortable'); + padding-inline: pad-inline(map.get($grid-header-padding-inline, 'compact'), map.get($grid-header-padding-inline, 'cosy'), map.get($grid-header-padding-inline, 'comfortable')); + padding-block: 0; border-inline-end: $grid-header-border; + min-height: var(--header-size); outline-style: none; overflow: hidden; transition: color 250ms ease-in-out; @@ -1634,16 +1621,6 @@ z-index: 3; } - %grid-cell-header--cosy { - padding: map.get($grid-header-padding, 'cosy'); - min-height: map.get($grid-header-height, 'cosy'); - } - - %grid-cell-header--compact { - padding: map.get($grid-header-padding, 'compact'); - min-height: map.get($grid-header-height, 'compact'); - } - %grid-cell-header-title { @include ellipsis(); font-weight: $grid-header-weight; @@ -1652,25 +1629,17 @@ cursor: initial; flex-grow: 1; /* hey IE, the text should take most of the space */ // align-self: flex-end; /* commenting out for now on external request */ - line-height: math.div(map.get($grid-header-height, 'comfortable'), $grid-head-fs); + line-height: var(--header-size); transition: color 250ms ease-in-out; } - %grid-cell-header-title--cosy { - line-height: math.div(map.get($grid-header-height, 'cosy'), $grid-head-fs); - } - - %grid-cell-header-title--compact { - line-height: math.div(map.get($grid-header-height, 'compact'), $grid-head-fs); - } - %grid-cell-header-icons { display: inline-flex; align-items: center; justify-content: flex-end; user-select: none; min-width: rem(30px); /* sort-icon + filter icon width */ - height: map.get($grid-header-height, 'comfortable'); + height: var(--header-size); align-self: flex-end; &:empty { @@ -1837,14 +1806,6 @@ transition: all 250ms ease-in-out; } - %grid-cell-header-icons--cosy { - height: map.get($grid-header-height, 'cosy'); - } - - %grid-cell-header-icons--compact { - height: map.get($grid-header-height, 'compact'); - } - %grid-cell-number { text-align: $grid-cell-align-num; justify-content: flex-end; @@ -1872,16 +1833,7 @@ display: flex; align-items: center; justify-content: center; - // The min-width here plays the role of padding because of IE11 - min-width: calc(#{$cbx-size} + (#{$cbx-padding} * 2)); - } - - %cbx-padding--cosy { - min-width: calc(#{$cbx-size} + (#{$cbx-padding-cosy} * 2)); - } - - %cbx-padding--compact { - min-width: calc(#{$cbx-size} + (#{$cbx-padding-compact} * 2)); + padding-inline: pad-inline($cbx-padding-compact, $cbx-padding-cosy, $cbx-padding); } %grid__resize-handle { @@ -2032,8 +1984,8 @@ color: var-get($theme, 'ghost-header-text-color'); min-width: rem(168px); max-width: rem(320px); - height: map.get($grid-header-height, 'comfortable'); - min-height: map.get($grid-header-height, 'comfortable'); + height: var(--header-size); + min-height: var(--header-size); top: rem(-99999px); inset-inline-start: rem(-99999px); border: none; @@ -2056,16 +2008,6 @@ } } - %grid__drag-ghost-image--cosy { - height: map.get($grid-header-height, 'cosy'); - min-height: map.get($grid-header-height, 'cosy'); - } - - %grid__drag-ghost-image--compact { - height: map.get($grid-header-height, 'compact'); - min-height: map.get($grid-header-height, 'compact'); - } - %grid__drag-ghost-image-icon { color: var-get($theme, 'ghost-header-icon-color'); margin-inline-end: rem(12px); @@ -2073,7 +2015,7 @@ %grid__drag-ghost-image-icon-group { color: var-get($theme, 'ghost-header-icon-color'); - padding: var-get($grid-header-padding, 'comfortable'); + padding: $padding-comfortable; padding-inline-end: 0; margin-inline-end: rem(8); } @@ -2094,7 +2036,7 @@ display: flex; outline-style: none; border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); - min-height: map.get($grid-header-height, 'comfortable'); + min-height: var(--header-size); %igx-grid__drag-indicator { cursor: default; @@ -2122,14 +2064,6 @@ } } - %igx-grid__group-row--cosy { - min-height: map.get($grid-header-height, 'cosy'); - } - - %igx-grid__group-row--compact { - min-height: map.get($grid-header-height, 'compact'); - } - %igx-group-label { display: flex; align-items: center; @@ -2177,15 +2111,7 @@ [dir='rtl'] { %igx-grid__group-content { - padding-inline-start: map.get($grid-grouping-indicator-padding, 'comfortable'); - } - - %igx-grid__group-content--cosy { - padding-inline-start: map.get($grid-grouping-indicator-padding, 'cosy'); - } - - %igx-grid__group-content--compact{ - padding-inline-start: map.get($grid-grouping-indicator-padding, 'compact'); + padding-inline-start: pad-inline(map.get($grid-grouping-indicator-padding, 'compact'), map.get($grid-grouping-indicator-padding, 'cosy'), map.get($grid-grouping-indicator-padding, 'comfortable')) } %igx-group-label { @@ -2204,31 +2130,21 @@ align-items: center; justify-content: flex-start; flex: 1 1 auto; - padding-inline-start: map.get($grid-grouping-indicator-padding, 'comfortable'); - min-height: map.get($grid-header-height, 'comfortable'); + padding-inline-start: pad-inline(map.get($grid-grouping-indicator-padding, 'compact'), map.get($grid-grouping-indicator-padding, 'cosy'), map.get($grid-grouping-indicator-padding, 'comfortable')); + min-height: sizable(map.get($grid-header-height, 'compact'), map.get($grid-header-height, 'cosy'), map.get($grid-header-height, 'comfortable')); &:focus { outline: transparent; } } - %igx-grid__group-content--cosy { - padding-inline-start: map.get($grid-grouping-indicator-padding, 'cosy'); - min-height: map.get($grid-header-height, 'cosy'); - } - - %igx-grid__group-content--compact{ - padding-inline-start: map.get($grid-grouping-indicator-padding, 'compact'); - min-height: map.get($grid-header-height, 'compact'); - } - %igx-grid__row-indentation { position: relative; display: flex; justify-content: center; align-items: center; - padding-inline-start: map.get($grid-grouping-indicator-padding, 'comfortable'); - padding-inline-end: map.get($grid-grouping-indicator-padding, 'comfortable'); + padding-inline-start: pad-inline(map.get($grid-grouping-indicator-padding, 'compact'), map.get($grid-grouping-indicator-padding, 'cosy'), map.get($grid-grouping-indicator-padding, 'comfortable')); + padding-inline-end: pad-inline(map.get($grid-grouping-indicator-padding, 'compact'), map.get($grid-grouping-indicator-padding, 'cosy'), map.get($grid-grouping-indicator-padding, 'comfortable')); border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); background: inherit; z-index: 1; @@ -2258,16 +2174,6 @@ } } - %igx-grid__row-indentation--cosy { - padding-inline-start: map.get($grid-grouping-indicator-padding, 'cosy'); - padding-inline-end: map.get($grid-grouping-indicator-padding, 'cosy') - } - - %igx-grid__row-indentation--compact { - padding-inline-start: map.get($grid-grouping-indicator-padding, 'compact'); - padding-inline-end: map.get($grid-grouping-indicator-padding, 'compact') - } - %igx-grid-grouparea { grid-row: 2; display: flex; @@ -2277,8 +2183,9 @@ border-bottom: $grid-header-border; background: var-get($theme, 'grouparea-background'); color: var-get($theme, 'grouparea-color'); - min-height: map.get($grouparea-min-height, 'comfortable'); - padding: map.get($grouparea-padding, 'comfortable'); + min-height: var(--grouparea-size); + padding-inline: pad-inline(map.get($grouparea-padding-inline, 'compact'), map.get($grouparea-padding-inline, 'cosy'), map.get($grouparea-padding-inline, 'comfortable')); + padding-block: 0; z-index: 2; height: 100%; overflow: hidden; @@ -2288,8 +2195,7 @@ } %igx-chip { - margin-top: rem(8px); - margin-bottom: rem(8px); + margin-block: pad-block(rem(4px), rem(8px), rem(8px)); } } @@ -2310,34 +2216,14 @@ } } - %igx-grid-grouparea--cosy { - min-height: map.get($grouparea-min-height, 'cosy'); - padding: map.get($grouparea-padding, 'cosy'); - - %igx-chip { - margin-top: rem(8px); - margin-bottom: rem(8px); - } - } - - %igx-grid-grouparea--compact { - min-height: map.get($grouparea-min-height, 'compact'); - padding: map.get($grouparea-padding, 'compact'); - - %igx-chip { - margin-top: rem(4px); - margin-bottom: rem(4px); - } - } - %igx-drop-area { min-width: rem(80px); display: flex; align-items: center; justify-content: flex-start; - height: map.get($drop-area-height, 'comfortable'); - border-radius: var-get($theme, 'drop-area-border-radius'); - padding: map.get($grid-cell-padding, 'comfortable'); + height: sizable(map.get($drop-area-height, 'compact'), map.get($drop-area-height, 'cosy'), map.get($drop-area-height, 'comfortable')); + padding-inline: pad-inline(map.get($grid-cell-padding-inline, 'compact'), map.get($grid-cell-padding-inline, 'cosy'), map.get($grid-cell-padding-inline, 'comfortable')); + padding-block: 0; flex: 1 0 0%; background: var-get($theme, 'drop-area-background'); @@ -2354,16 +2240,10 @@ background: var-get($theme, 'drop-area-on-drop-background'); } - %igx-drop-area--cosy { - height: map.get($drop-area-height, 'cosy'); - border-radius: var-get($theme, 'drop-area-border-radius'); - padding: map.get($grid-cell-padding, 'cosy'); - } - + %igx-drop-area, + %igx-drop-area--cosy, %igx-drop-area--compact { - height: map.get($drop-area-height, 'compact'); border-radius: var-get($theme, 'drop-area-border-radius'); - padding: map.get($grid-cell-padding, 'compact'); } %igx-drop-area__text { @@ -2375,15 +2255,14 @@ %igx-grid__grouping-indicator { position: relative; display: flex; - user-select: none; justify-content: center; align-items: center; z-index: 1; cursor: pointer; padding-inline-end: $grouping-padding-right; - margin-inline-start: #{map.get($grid-grouping-indicator-padding, 'comfortable')}; - min-height: map.get($grid-header-height, 'comfortable'); + margin-inline-start: sizable(#{map.get($grid-grouping-indicator-padding, 'compact')}, #{map.get($grid-grouping-indicator-padding, 'cosy')}, #{map.get($grid-grouping-indicator-padding, 'comfortable')}); + min-height: var(--header-size); igx-icon { color: var-get($theme, 'expand-icon-color'); @@ -2404,92 +2283,53 @@ } } - %igx-grid__grouping-indicator--cosy { - min-height: map.get($grid-header-height, 'cosy'); - margin-inline-start: #{map.get($grid-grouping-indicator-padding, 'cosy')}; - } - - %igx-grid__grouping-indicator--compact { - min-height: map.get($grid-header-height, 'compact'); - margin-inline-start: #{map.get($grid-grouping-indicator-padding, 'compact')}; - } - %igx-grid__header-indentation { position: relative; - padding-inline-end: map.get($grid-grouping-indicator-padding, 'comfortable'); + padding-inline-end: sizable(map.get($grid-grouping-indicator-padding, 'compact'), map.get($grid-grouping-indicator-padding, 'cosy'), map.get($grid-grouping-indicator-padding, 'comfortable')); border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); background: var-get($theme, 'header-background'); z-index: 4; } - %igx-grid__header-indentation--cosy { - padding-inline-end: map.get($grid-grouping-indicator-padding, 'cosy'); - } - - %igx-grid__header-indentation--compact { - padding-inline-end: map.get($grid-grouping-indicator-padding, 'compact'); - } %igx-grid__group-expand-btn { position: absolute; cursor: pointer; user-select: none; - top: calc(50% - 12px); - inset-inline-start: map.get($grid-grouping-indicator-padding, 'comfortable'); + inset-block-start: calc(50% - 12px); + inset-inline-start: sizable(map.get($grid-grouping-indicator-padding, 'compact'), map.get($grid-grouping-indicator-padding, 'cosy'), map.get($grid-grouping-indicator-padding, 'comfortable')); &:hover { color: var-get($theme, 'expand-icon-hover-color'); } &%igx-grid__group-expand-btn--push { - top: math.div(map.get($grid-header-height, 'comfortable') - rem(24px), 2); - } - } - - %igx-grid__group-expand-btn--cosy { - inset-inline-start: map.get($grid-grouping-indicator-padding, 'cosy'); - - &%igx-grid__group-expand-btn--push { - top: math.div(map.get($grid-header-height, 'cosy') - rem(24px), 2); - } - } - - %igx-grid__group-expand-btn--compact { - inset-inline-start: map.get($grid-grouping-indicator-padding, 'compact'); - - &%igx-grid__group-expand-btn--push { - top: math.div(map.get($grid-header-height, 'compact') - rem(24px), 2); + inset-block-start: sizable(math.div(map.get($grid-header-height, 'compact') - rem(24px), 2), math.div(map.get($grid-header-height, 'cosy') - rem(24px), 2), math.div(map.get($grid-header-height, 'comfortable') - rem(24px), 2)); } } @for $i from 1 through 10 { - %igx-grid__row-indentation--level-#{$i} { - padding-inline-start: calc(#{$i * map.get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width}); - } - - %igx-grid__group-row--padding-level-#{$i} { - %igx-grid__grouping-indicator { - padding-inline-start: #{$i * map.get($grid-grouping-indicator-padding, 'comfortable')}; - } - } + $row-indentation-level: ( + comfortable: calc(#{$i * map.get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width}), + cosy: calc(#{$i * map.get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width}), + compact: calc(#{$i * map.get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width}) + ); - %igx-grid__row-indentation-cosy--level-#{$i} { - padding-inline-start: calc(#{$i * map.get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width}); - } + $level--comfortable: map-get($row-indentation-level, 'comfortable'); + $level--cosy: map-get($row-indentation-level, 'cosy'); + $level--compact: map-get($row-indentation-level, 'compact'); - %igx-grid__group-row-cosy--padding-level-#{$i} { - %igx-grid__grouping-indicator { - padding-inline-start: #{$i * map.get($grid-grouping-indicator-padding, 'cosy')}; - } + %igx-grid__row-indentation--level-#{$i} { + padding-inline-start: pad-inline($level--compact, $level--cosy, $level--comfortable); } - %igx-grid__row-indentation-compact--level-#{$i} { - padding-inline-start: calc(#{$i * map.get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width}); - } + $indicator-padding--comfortable: #{$i * map.get($grid-grouping-indicator-padding, 'comfortable')}; + $indicator-padding--cosy: #{$i * map.get($grid-grouping-indicator-padding, 'cosy')}; + $indicator-padding--compact: #{$i * map.get($grid-grouping-indicator-padding, 'compact')}; - %igx-grid__group-row-compact--padding-level-#{$i} { + %igx-grid__group-row--padding-level-#{$i} { %igx-grid__grouping-indicator { - padding-inline-start: #{$i * map.get($grid-grouping-indicator-padding, 'compact')}; + padding-inline-start: pad-inline($indicator-padding--compact, $indicator-padding--cosy, $indicator-padding--comfortable); } } } @@ -2535,8 +2375,9 @@ align-items: center; border-inline-end: $grid-header-border; border-top: $grid-header-border; - height: map.get($grid-header-height, 'comfortable'); - padding: map.get($grid-header-padding, 'comfortable'); + height: var(--header-size); + padding-inline: pad-inline(map.get($grid-header-padding-inline, 'compact'), map.get($grid-header-padding-inline, 'cosy'), map.get($grid-header-padding-inline, 'comfortable')); + padding-block: 0; overflow: hidden; igx-chips-area { @@ -2592,22 +2433,12 @@ visibility: hidden; } - %igx-grid__filtering-cell--cosy { - height: map.get($grid-header-height, 'cosy'); - padding: map.get($grid-header-padding, 'comfortable'); - } - - %igx-grid__filtering-cell--compact { - height: map.get($grid-header-height, 'compact'); - padding: map.get($grid-header-padding, 'comfortable'); - } - %igx-grid__filtering-row { position: absolute; display: flex; width: 100%; - height: map.get($grid-header-height, 'comfortable'); - padding: map.get($grid-cell-padding, 'cosy'); + height: sizable(map.get($grid-header-height, 'compact'), map.get($grid-header-height, 'cosy'), map.get($grid-header-height, 'comfortable')); + padding: $cell-padding-cosy; align-items: center; justify-content: space-between; background: var-get($theme, 'filtering-row-background'); @@ -2665,14 +2496,6 @@ margin-inline-start: rem(16px); } - %igx-grid__filtering-row--cosy { - height: map.get($grid-header-height, 'cosy'); - } - - %igx-grid__filtering-row--compact { - height: map.get($grid-header-height, 'compact'); - } - %igx-grid__filtering-row-main { display: flex; flex: 1; @@ -2795,8 +2618,7 @@ %igx-grid__hierarchical-expander { user-select: none; background: inherit; - padding-inline-start: map.get($hierarchical-grid-indent, 'comfortable'); - padding-inline-end: map.get($hierarchical-grid-indent, 'comfortable'); + padding-inline: pad-inline(map.get($hierarchical-grid-indent, 'compact'), map.get($hierarchical-grid-indent, 'cosy'), map.get($hierarchical-grid-indent, 'comfortable')); display: flex; align-items: center; justify-content: center; @@ -2835,16 +2657,6 @@ } } - %igx-grid__hierarchical-expander--cosy { - padding-inline-start: map.get($hierarchical-grid-indent, 'cosy'); - padding-inline-end: map.get($hierarchical-grid-indent, 'cosy'); - } - - %igx-grid__hierarchical-expander--compact { - padding-inline-start: map.get($hierarchical-grid-indent, 'compact'); - padding-inline-end: map.get($hierarchical-grid-indent, 'compact'); - } - %igx-grid__hierarchical-expander--header { background: inherit; border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); @@ -2861,20 +2673,8 @@ align-items: flex-start; igx-icon { - min-height: map.get($grid-header-height, 'comfortable'); - max-height: map.get($grid-header-height, 'comfortable'); - } - } - - %igx-grid__hierarchical-expander--push--cosy { - igx-icon { - min-height: map.get($grid-header-height, 'cosy'); - } - } - - %igx-grid__hierarchical-expander--push--compact { - igx-icon { - min-height: map.get($grid-header-height, 'compact'); + min-height: var(--header-size); + max-height: var(--header-size); } } @@ -2883,35 +2683,12 @@ } %igx-grid__hierarchical-indent { - margin-inline-start: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon}); - margin-top: map.get($hierarchical-grid-indent, 'comfortable'); - margin-inline-end: map.get($hierarchical-grid-indent, 'comfortable'); - margin-bottom: map.get($hierarchical-grid-indent, 'comfortable'); - - &--scroll { - margin-inline-end: calc(#{map.get($hierarchical-grid-indent, 'comfortable')} + 18px); - } - } - - %igx-grid__hierarchical-indent--cosy { - margin-inline-start: calc(2 * #{map.get($hierarchical-grid-indent, 'cosy')} + #{$hierarchical-action-icon}); - margin-top: map.get($hierarchical-grid-indent, 'cosy'); - margin-inline-end: map.get($hierarchical-grid-indent, 'cosy'); - margin-bottom: map.get($hierarchical-grid-indent, 'cosy'); + margin-inline-start: pad-inline(map.get($hierarchical-indent, 'compact'), map.get($hierarchical-indent, 'cosy'), map.get($hierarchical-indent, 'comfortable')); + margin-inline-end: pad-inline(map.get($hierarchical-grid-indent, 'compact'), map.get($hierarchical-grid-indent, 'cosy'), map.get($hierarchical-grid-indent, 'comfortable')); + margin-block: pad-block(map.get($hierarchical-grid-indent, 'compact'), map.get($hierarchical-grid-indent, 'cosy'), map.get($hierarchical-grid-indent, 'comfortable')); &--scroll { - margin-inline-end: calc(#{map.get($hierarchical-grid-indent, 'cosy')} + 18px); - } - } - - %igx-grid__hierarchical-indent--compact { - margin-inline-start: calc(2 * #{map.get($hierarchical-grid-indent, 'compact')} + #{$hierarchical-action-icon}); - margin-top: map.get($hierarchical-grid-indent, 'compact'); - margin-inline-end: map.get($hierarchical-grid-indent, 'compact'); - margin-bottom: map.get($hierarchical-grid-indent, 'compact'); - - &--scroll { - margin-inline-end: calc(#{map.get($hierarchical-grid-indent, 'compact')} + 18px); + margin-inline-end: pad-inline(map.get($hierarchical-indent-scroll, 'compact'), map.get($hierarchical-indent-scroll, 'cosy'), map.get($hierarchical-indent-scroll, 'comfortable')); } } @@ -3003,19 +2780,9 @@ background: inherit; overflow: hidden; z-index: 3; - height: map.get($grid-header-height, 'comfortable'); - - &--cosy { - height: map.get($grid-header-height, 'cosy'); - padding: map.get($grid-header-padding, 'cosy'); - } - - &--compact { - height: map.get($grid-header-height, 'compact'); - padding: map.get($grid-header-padding, 'compact'); - } - - padding: map.get($grid-header-padding, 'comfortable'); + height: var(--header-size); + padding-inline: pad-inline(map.get($grid-header-padding-inline, 'compact'), map.get($grid-header-padding-inline, 'cosy'), map.get($grid-header-padding-inline, 'comfortable')); + padding-block: 0; background-clip: border-box !important; border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); @@ -3063,16 +2830,7 @@ %igx-grid__tr-pivot--row-area { height: auto !important; align-items: flex-end; - padding-bottom: map.get($pivot-row-aria-padding, 'comfortable'); - - &--cosy{ - padding-bottom: map.get($pivot-row-aria-padding, 'cosy'); - } - - &--compact{ - padding-bottom: map.get($pivot-row-aria-padding, 'compact'); - } - + padding-bottom: pad-block(map.get($pivot-row-aria-padding, 'compact'), map.get($pivot-row-aria-padding, 'cosy'), map.get($pivot-row-aria-padding, 'comfortable')); border-inline-start: 0; border-bottom: 0; } @@ -3092,15 +2850,7 @@ } %igx-grid__tr-pivot--filter { - height: map.get($grid-header-height, 'comfortable'); - - &--cosy { - height: map.get($grid-header-height, 'cosy'); - } - - &--compact { - height: map.get($grid-header-height, 'compact'); - } + height: var(--header-size); border-inline-start: 0; border-inline-end: 0; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss index e7bf76fd084..492bcd983cc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss @@ -178,26 +178,10 @@ @include m(cosy) { @extend %grid-cell-header--cosy !optional; - - @include e(title) { - @extend %grid-cell-header-title--cosy !optional; - } - - @include e(icons) { - @extend %grid-cell-header-icons--cosy !optional; - } } @include m(compact) { @extend %grid-cell-header--compact !optional; - - @include e(title) { - @extend %grid-cell-header-title--compact !optional; - } - - @include e(icons) { - @extend %grid-cell-header-icons--compact !optional; - } } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss index 75456548284..28c29b93d68 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss @@ -171,15 +171,7 @@ } %igx-chip__item { - height: map.get($chip-height-material, 'comfortable'); - } - - %igx-chip__item--cosy { - height: map.get($chip-height-material, 'cosy'); - } - - %igx-chip__item--compact { - height: map.get($chip-height-material, 'compact'); + height: #{sizable(map.get($chip-height-material, 'compact'), map.get($chip-height-material, 'cosy'), map.get($chip-height-material, 'comfortable'))}; } %igx-chip__content { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-component.scss index bd77cd9825a..5cc1dbb51d7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-component.scss @@ -30,7 +30,6 @@ } } - @include e(aside, right) { @extend %aside--right !optional; } From 3967d18f78cc7bad26f6e409a2b7338f0d7f0a15 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 8 Mar 2023 13:14:31 +0200 Subject: [PATCH 05/16] feat(dropdown esf) fix some of the failing tests --- .../drop-down/_drop-down-component.scss | 17 ++-- .../drop-down/_drop-down-theme.scss | 83 ++++++++----------- .../grid/_excel-filtering-theme.scss | 23 +++-- 3 files changed, 50 insertions(+), 73 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss index 7782c9f868a..0a15288bda6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss @@ -16,25 +16,17 @@ @extend %igx-drop-down !optional; @include e(list) { - @include sizable(); - @extend %igx-drop-down__list !optional; } - @include e(list, $m: cosy) { - @extend %igx-drop-down__list--cosy !optional; - } - - @include e(list, $m: compact) { - @extend %igx-drop-down__list--compact !optional; - } - @include e(list-scroll) { + @include sizable(); @extend %igx-drop-down__list-scroll !optional; } @include e(item) { @extend %igx-drop-down__item !optional; + @extend %item-size !optional; } @include e(inner) { @@ -47,10 +39,12 @@ @include e(item, $m: cosy) { @extend %igx-drop-down__item--cosy !optional; + @extend %item-size !optional; } @include e(item, $m: compact) { @extend %igx-drop-down__item--compact !optional; + @extend %item-size !optional; } @include e(item, $m: focused) { @@ -71,14 +65,17 @@ @include e(header) { @extend %igx-drop-down__header !optional; + @extend %item-size !optional; } @include e(header, $m: cosy) { @extend %igx-drop-down__header--cosy !optional; + @extend %item-size !optional; } @include e(header, $m: compact) { @extend %igx-drop-down__header--compact !optional; + @extend %item-size !optional; } @include e(group) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index 0354674df06..8eeeb7efecf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -191,9 +191,9 @@ $variant: map.get($theme, variant); $item-height: ( - comfortable: rem(40px), - cosy: rem(32px), - compact: rem(28px) + comfortable: #{rem(40px)}, + cosy: #{rem(32px)}, + compact: #{rem(28px)} ); $item-padding-inline: ( @@ -225,8 +225,6 @@ } %igx-drop-down__list { - --component-size: var(--ig-size, var(--ig-size-large)); - --item-size: #{sizable(map.get($item-height, 'compact'), map.get($item-height, 'cosy'), map.get($item-height, 'comfortable'))}; overflow: hidden; border-radius: var-get($theme, 'border-radius'); background: var-get($theme, 'background-color'); @@ -235,14 +233,6 @@ border: var-get($theme, 'border-width') solid var-get($theme, 'border-color'); } - %igx-drop-down__list--cosy { - --component-size: var(--ig-size, var(--ig-size-medium)); - } - - %igx-drop-down__list--compact { - --component-size: var(--ig-size, var(--ig-size-small)); - } - %igx-drop-down__list-scroll { overflow-y: auto; overflow-x: hidden; @@ -254,15 +244,34 @@ } } + %igx-drop-down__content { + display: flex; + width: 100%; + align-items: center; + } + + %igx-drop-down__inner { + display: block; + @include ellipsis(); + margin-inline-end: auto; + } + + // TODO use this after density classes are applied on the scroll container + //%item-size { + // height: sizable(map.get($item-height, 'compact'), map.get($item-height, 'cosy'), map.get($item-height, 'comfortable')); + //} + %igx-drop-down__header, %igx-drop-down__item { + --component-size: var(--ig-size, var(--ig-size-large)); + display: flex; justify-content: flex-start; align-items: center; width: 100%; white-space: nowrap; - height: var(--item-size); position: relative; + height: map.get($item-height, 'comfortable'); igx-prefix, [igxPrefix] { @@ -302,19 +311,12 @@ } } - %igx-drop-down__content { - display: flex; - width: 100%; - align-items: center; - } + %igx-drop-down__item--cosy, + %igx-drop-down__header--cosy { + --component-size: var(--ig-size, var(--ig-size-medium)); - %igx-drop-down__inner { - display: block; - @include ellipsis(); - margin-inline-end: auto; - } + height: map.get($item-height, 'cosy'); - %igx-drop-down__item--cosy { igx-prefix, [igxPrefix] { @extend %igx-drop-down__prefix--cosy; @@ -326,7 +328,12 @@ } } - %igx-drop-down__item--compact { + %igx-drop-down__item--compact, + %igx-drop-down__header--compact { + --component-size: var(--ig-size, var(--ig-size-small)); + + height: map.get($item-height, 'compact'); + igx-prefix, [igxPrefix] { @extend %igx-drop-down__prefix--compact; @@ -378,30 +385,6 @@ padding-block: 0; } - %igx-drop-down__header--cosy { - igx-prefix, - [igxPrefix] { - @extend %igx-drop-down__prefix--cosy; - } - - igx-suffix, - [igxSuffix] { - @extend %igx-drop-down__suffix--cosy; - } - } - - %igx-drop-down__header--compact { - igx-prefix, - [igxPrefix] { - @extend %igx-drop-down__prefix--compact; - } - - igx-suffix, - [igxSuffix] { - @extend %igx-drop-down__suffix--compact; - } - } - %igx-drop-down__group { pointer-events: auto; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss index ceeed87fb6f..86820e34bd4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss @@ -121,11 +121,11 @@ } igx-chips-area { - padding-block-start: pad-block(rem(4px), rem(8px), rem(16px)); - padding-block-end: 0; padding-inline-start: pad-block(rem(4px), rem(8px), rem(16px)); padding-inline-end: pad-block(rem(4px), rem(8px), rem(16px)); - gap: pad(rem(4px), rem(4px), rem(8px)); + padding-block-start: pad-block(rem(4px), rem(8px), rem(16px)); + padding-block-end: 0; + gap: sizable(rem(4px), rem(4px), rem(8px)); } } @@ -158,8 +158,6 @@ %grid-excel-menu__footer { display: flex; justify-content: space-between; - padding-inline: pad-inline(rem(4px), rem(8px), rem(8px)); - padding-block: pad-block(rem(8px)); %grid-excel-filter__apply, %grid-excel-filter__cancel { @@ -280,8 +278,6 @@ } %grid-excel-main { - --size: #{sizable(map.get($tree-node-height, 'compact'), map.get($tree-node-height, 'cosy'), map.get($tree-node-height, 'comfortable'))}; - display: flex; flex-direction: column; flex-grow: 1; @@ -292,7 +288,7 @@ igx-list { flex-grow: 1; overflow: hidden; - margin-inline: pad-inline(rem(-4px), rem(-8px), rem(-16px)); + margin-inline: calc(sizable(rem(-4px), rem(-8px), rem(-16px)) * -1); border: 0; @if $bootstrap-theme { @@ -307,7 +303,7 @@ %igx-excel-filter__tree { background: color($color: 'surface'); overflow-y: auto; - margin-inline: pad-inline(rem(-4px), rem(-8px), rem(-16px)); + margin-inline: calc(pad-inline(rem(-4px), rem(-8px), rem(-16px)) * -1); margin-block: 0; flex: 1; @@ -327,13 +323,14 @@ > igx-checkbox, .igx-tree-node__wrapper { - height: var(--size); - min-height: var(--size); + height: #{sizable(map.get($tree-node-height, 'compact'), map.get($tree-node-height, 'cosy'), map.get($tree-node-height, 'comfortable'))}; + min-height: #{sizable(map.get($tree-node-height, 'compact'), map.get($tree-node-height, 'cosy'), map.get($tree-node-height, 'comfortable'))}; } .igx-tree-node__toggle-button { min-width: rem(20px); margin-inline-start: pad-inline(map.get($tree-node-indent, 'compact'), map.get($tree-node-indent, 'cosy'), map.get($tree-node-indent, 'comfortable')); + margin-inline-end: pad-inline(rem(4px), rem(8px)); } .igx-tree { @@ -351,7 +348,7 @@ %igx-excel-filter__tree-alike-item { display: flex; align-items: center; - height: var(--size); + height: sizable(map.get($tree-node-height, 'compact'), map.get($tree-node-height, 'cosy'), map.get($tree-node-height, 'comfortable')); background: color($color: 'surface'); &:hover, @@ -427,7 +424,7 @@ %grid-excel-menu__add-filter { margin-inline: pad-inline(rem(4px), rem(4px), rem(16px)); - margin-block: 0; + margin-block-start: 0; igx-icon { width: var(--igx-icon-size, #{rem(18px)}); From 665567d8f666cc0fef7fbb19274fab977f7553ef Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 9 Mar 2023 10:43:13 +0200 Subject: [PATCH 06/16] fix(dropdown) tests --- .../drop-down/_drop-down-theme.scss | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index 8eeeb7efecf..8561221322a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -294,7 +294,7 @@ %igx-drop-down__item { color: var-get($theme, 'item-text-color'); cursor: pointer; - padding-inline: pad-inline(map.get($item-padding-inline, 'compact'), map.get($item-padding-inline, 'cosy'), map.get($item-padding-inline, 'comfortable')); + padding-inline: map.get($item-padding-inline, 'comfortable'); padding-block: 0; border-radius: var-get($theme, 'item-border-radius'); @@ -311,6 +311,10 @@ } } + %igx-drop-down__item--cosy { + padding-inline: map.get($item-padding-inline, 'cosy') + } + %igx-drop-down__item--cosy, %igx-drop-down__header--cosy { --component-size: var(--ig-size, var(--ig-size-medium)); @@ -328,6 +332,10 @@ } } + %igx-drop-down__item--compact { + padding-inline: map.get($item-padding-inline, 'compact'); + } + %igx-drop-down__item--compact, %igx-drop-down__header--compact { --component-size: var(--ig-size, var(--ig-size-small)); @@ -381,10 +389,18 @@ %igx-drop-down__header { color: var-get($theme, 'header-text-color'); pointer-events: none; - padding-inline: pad-inline(map.get($header-item-padding-inline, 'compact'), map.get($header-item-padding-inline, 'cosy'), map.get($header-item-padding-inline, 'comfortable')); + padding-inline: map.get($header-item-padding-inline, 'comfortable'); padding-block: 0; } + %igx-drop-down__header--cosy { + padding-inline: map.get($header-item-padding-inline, 'cosy'); + } + + %igx-drop-down__header--compact { + padding-inline: map.get($header-item-padding-inline, 'compact'); + } + %igx-drop-down__group { pointer-events: auto; From 6665ef18f86406b070a883142563225edf1e1bb0 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 15 Mar 2023 09:55:53 +0200 Subject: [PATCH 07/16] lint(themes): base style declares scope twice --- .../core/styles/themes/generators/_base.scss | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 23924217b7d..f6af5bb6575 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -76,24 +76,6 @@ } } - #{$scope} { - --ig-size-small: 1; - --ig-size-medium: 2; - --ig-size-large: 3; - - --ig-spacing-small: 1; - --ig-spacing-medium: 1; - --ig-spacing-large: 1; - - --ig-spacing-inline-small: 1; - --ig-spacing-inline-medium: 1; - --ig-spacing-inline-large: 1; - - --ig-spacing-block-small: 1; - --ig-spacing-block-medium: 1; - --ig-spacing-block-large: 1; - } - @if list.length($exclude) > 0 { $excluded: is-component($exclude); } From 0a08e4799fadb4de04d6edcc6e929906714a23f5 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 2 May 2023 13:44:33 +0300 Subject: [PATCH 08/16] fix(avatar) size --- .../styles/components/avatar/_avatar-component.scss | 10 +--------- .../core/styles/components/avatar/_avatar-theme.scss | 10 +++++----- 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss index c4e1a077e16..128f34dcf93 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss @@ -42,15 +42,7 @@ } @include m(initials) { - @extend %igx-avatar-initials--small !optional; - } - - @include mx(medium, initials) { - @extend %igx-avatar-initials--medium !optional; - } - - @include mx(large, initials) { - @extend %igx-avatar-initials--large !optional; + @extend %igx-avatar--initials !optional; } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss index d390d6dd233..91d0117be31 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss @@ -78,7 +78,7 @@ } %igx-avatar-display { - --sizes: #{sizable(#{rem(40px)}, #{rem(64px)}, #{rem(88px)})}; + --size: #{sizable(#{rem(40px)}, #{rem(64px)}, #{rem(88px)})}; position: relative; display: inline-flex; @@ -91,8 +91,8 @@ border-radius: var-get($theme, 'border-radius'); outline-style: none; flex-shrink: 0; - width: var(--sizes); - height: var(--sizes); + width: var(--size); + height: var(--size); &::after { box-shadow: none; @@ -130,8 +130,8 @@ %igx-avatar--initials { text-transform: uppercase; - font-size: calc(var(--sizes) / 2); - line-height: calc(var(--sizes) / 2); + font-size: calc(var(--size) / 2); + line-height: calc(var(--size) / 2); } %igx-avatar--small, From 4b01bdc169a5b5e96d93bdd8daf37a2bfb44c2a7 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 2 May 2023 16:21:17 +0300 Subject: [PATCH 09/16] fix(badge) size and badge radius. - The radius is expected to have slide difference from the master, since now it is working the same way as WebC. --- .../src/lib/core/styles/components/badge/_badge-theme.scss | 4 ++-- src/app/badge/badge.sample.scss | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss index 211231568b6..a2688012fc1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss @@ -88,7 +88,7 @@ $badge-font-weight: normal; - $badge-value-padding: rem(4px) rem(8px); + $badge-value-padding: rem(4px); $border-type: solid; %igx-badge-display { @@ -106,7 +106,7 @@ color: var-get($theme, 'text-color'); line-height: 1; background: var-get($theme, 'background-color'); - border-radius: 50%; + border-radius: calc(var(--size) / 2); box-shadow: var-get($theme, 'shadow'); border-width: var-get($theme, 'border-width'); border-color: var-get($theme, 'border-color'); diff --git a/src/app/badge/badge.sample.scss b/src/app/badge/badge.sample.scss index ac2c89cfae4..17400ca147d 100644 --- a/src/app/badge/badge.sample.scss +++ b/src/app/badge/badge.sample.scss @@ -14,3 +14,8 @@ height: 88px; align-items: center; } + +.badge-theme { + --size: 15px; + --igx-icon-size: 12px; +} From 31c488e4774a014ff7d663c53c83ae18d37d665f Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 2 May 2023 16:29:30 +0300 Subject: [PATCH 10/16] fix(banner) padding. --- .../lib/core/styles/components/banner/_banner-theme.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss index bdba9c8c77b..e2f607220cc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss @@ -91,9 +91,9 @@ gap: rem(8px); padding-inline-start: pad-inline($padding-inline-start, $padding-inline-start, $padding-inline-start); - padding-inline-end: pad-inline(rem(4px), rem(8px), rem(16px)); - padding-block-start: pad-block(rem(4px), rem(8px), rem(16px)); - padding-block-end: pad-block(rem(4px), rem(8px), rem(16px)); + padding-inline-end: pad-inline($padding, $padding, $padding); + padding-block-start: pad-block($padding, $padding, $padding); + padding-block-end: pad-block($padding, $padding, $padding); background: var-get($theme, 'banner-background'); } From 394d6bd38ad46c80ce3810f0f88a589bf2f93df0 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 2 May 2023 17:28:11 +0300 Subject: [PATCH 11/16] fix(dropdown) groupt item text indent. --- .../core/styles/components/drop-down/_drop-down-theme.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index de86925659e..b8e9cd2e681 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -403,10 +403,6 @@ label { @extend %igx-drop-down__header !optional; } - - %igx-drop-down__item { - text-indent: pad-inline(map.get($item-padding-inline, 'comfortable')); - } } %igx-drop-down__item--focused { From f6356393314ea628379768fd211b46752c3d2ff9 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 3 May 2023 09:47:16 +0300 Subject: [PATCH 12/16] fix(excel-filtering) Add sizable in external mode. --- .../styles/components/grid/_excel-filtering-component.scss | 1 + .../core/styles/components/grid/_excel-filtering-theme.scss | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss index feaa8080e62..461a19bb20c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss @@ -27,6 +27,7 @@ } @include e(menu) { + @include sizable(); @extend %grid-excel-menu !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss index 86820e34bd4..5992aed2024 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss @@ -81,6 +81,8 @@ } %grid-excel-menu { + --component-size: var(--ig-size, var(--ig-size-large)); + display: flex; flex-direction: column; height: 100%; @@ -363,12 +365,16 @@ } %grid-excel-menu--cosy { + --component-size: var(--ig-size, var(--ig-size-medium)); + %grid-excel-menu__header { justify-content: space-between; } } %grid-excel-menu--compact { + --component-size: var(--ig-size, var(--ig-size-small)); + %grid-excel-menu__header { justify-content: space-between; } From 46786b0ae84830d4ddb6131808eb75ddb22fb9dd Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 3 May 2023 10:13:17 +0300 Subject: [PATCH 13/16] fix(badge) fix badge size in context of filtering row. - remove duplicated density chooser from grid-column-moving sample. --- .../lib/core/styles/components/grid/_grid-theme.scss | 12 +++--------- .../grid-column-moving.sample.html | 3 --- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index be8c32039a1..f4f02334e49 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -2416,16 +2416,10 @@ } %igx-badge-display { - /* start of IE vertical alignment fix */ - top: 50%; - transform: translateY(-50%); - /* end of IE vertical alignment fix */ + --size: #{rem(14px)}; + --font-size: #{rem(12px)}; + line-height: 0; position: absolute; - width: rem(14px); - height: rem(14px); - min-width: rem(14px); - font-size: rem(12px); - text-align: center; inset-inline-end: 0; } } diff --git a/src/app/grid-column-moving/grid-column-moving.sample.html b/src/app/grid-column-moving/grid-column-moving.sample.html index 23b491bd308..e5a37cd5f2c 100644 --- a/src/app/grid-column-moving/grid-column-moving.sample.html +++ b/src/app/grid-column-moving/grid-column-moving.sample.html @@ -13,9 +13,6 @@

Sample 1

-
- -
From 8323c87bbabb58ac094c22203d32724e4d5b5863 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 4 May 2023 11:46:00 +0300 Subject: [PATCH 14/16] style(combo): make sure the the combo search padding looks the same as in master. - remove unused placeholder selector from the dropdown. --- .../core/styles/components/combo/_combo-component.scss | 2 ++ .../lib/core/styles/components/combo/_combo-theme.scss | 8 +++++--- .../styles/components/drop-down/_drop-down-component.scss | 7 +------ .../styles/components/drop-down/_drop-down-theme.scss | 5 ----- 4 files changed, 8 insertions(+), 14 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-component.scss index 2a440478ab5..54bdbe1f85d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-component.scss @@ -4,6 +4,8 @@ /// @access private @mixin component { @include b(igx-combo) { + @include sizable(); + $this: bem--selector-to-string(&); @include register-component( $name: string.slice($this, 2, -1), diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index 4491359a66a..aa8680b4592 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -104,8 +104,8 @@ } %igx-combo__search { - padding-inline: pad-inline(4px, 8px, 16px); - padding-block: pad-block(8px); + padding-inline: pad-inline(rem(16px)); + padding-block: pad-block(rem(8px)); margin: 0 !important; z-index: 26; border-bottom: rem(1px) dashed var-get($theme, 'search-separator-border-color'); @@ -115,7 +115,9 @@ height: auto; } - --ig-size: var(--ig-size-small); + igx-input-group { + --ig-size: var(--ig-size-small); + } } %igx-combo__case-icon, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss index 0a15288bda6..8d1e4f1edac 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss @@ -16,6 +16,7 @@ @extend %igx-drop-down !optional; @include e(list) { + @include sizable(); @extend %igx-drop-down__list !optional; } @@ -26,7 +27,6 @@ @include e(item) { @extend %igx-drop-down__item !optional; - @extend %item-size !optional; } @include e(inner) { @@ -39,12 +39,10 @@ @include e(item, $m: cosy) { @extend %igx-drop-down__item--cosy !optional; - @extend %item-size !optional; } @include e(item, $m: compact) { @extend %igx-drop-down__item--compact !optional; - @extend %item-size !optional; } @include e(item, $m: focused) { @@ -65,17 +63,14 @@ @include e(header) { @extend %igx-drop-down__header !optional; - @extend %item-size !optional; } @include e(header, $m: cosy) { @extend %igx-drop-down__header--cosy !optional; - @extend %item-size !optional; } @include e(header, $m: compact) { @extend %igx-drop-down__header--compact !optional; - @extend %item-size !optional; } @include e(group) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index b8e9cd2e681..7c662a10a7a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -252,11 +252,6 @@ margin-inline-end: auto; } - // TODO use this after density classes are applied on the scroll container - //%item-size { - // height: sizable(map.get($item-height, 'compact'), map.get($item-height, 'cosy'), map.get($item-height, 'comfortable')); - //} - %igx-drop-down__header, %igx-drop-down__item { --component-size: var(--ig-size, var(--ig-size-large)); From 5269603968145b5a1678e7710f428f485ae443a8 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 9 May 2023 16:13:36 +0300 Subject: [PATCH 15/16] refactor(chip): fix avatar size in chip context --- .../components/avatar/_avatar-component.scss | 1 + .../styles/components/chip/_chip-component.scss | 2 +- .../core/styles/components/chip/_chip-theme.scss | 15 +++++++++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss index 128f34dcf93..ba799a7e7e8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss @@ -8,6 +8,7 @@ @include sizable(); // Register the component in the component registry $this: bem--selector-to-string(&); + @include register-component( $name: string.slice($this, 2, -1), $deps: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss index 910b0598c08..650f6d75109 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss @@ -123,7 +123,7 @@ --component-size: var(--ig-size, var(--ig-size-small)); @include e(item) { - @extend %igx-chip__item--compact !optional; + @extend %igx-chip__item--compact !optional; } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index c569a3aa19d..f76cd11f4b7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -369,6 +369,7 @@ grid-template-columns: minmax(0, auto) 1fr minmax(0, auto); align-items: center; justify-content: center; + text-align: center; flex: 1 1 auto; height: sizable(map.get($chip-height, 'compact'), map.get($chip-height, 'cosy'), map.get($chip-height, 'comfortable')); padding-inline: sizable(map.get($chip-padding, 'compact'), map.get($chip-padding, 'cosy'), map.get($chip-padding, 'comfortable')); @@ -394,6 +395,8 @@ igx-avatar, igx-circular-bar { + --component-size: 3; + $avatar-size: ( comfortable: rem(24px), cosy: rem(18), @@ -418,6 +421,18 @@ } } + %igx-chip__item--cosy { + igx-avatar { + --component-size: 2; + } + } + + %igx-chip__item--compact { + igx-avatar { + --component-size: 1; + } + } + %igx-chip__item--selected { color: var-get($theme, 'selected-text-color'); background: var-get($theme, 'selected-background'); From 86eb0a6640ad3834fe0778c33159a524eb799ad8 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 9 May 2023 17:31:29 +0300 Subject: [PATCH 16/16] refactor(paginator): use placeholder selector for sizable --- .../styles/components/paginator/_paginator-component.scss | 1 + .../styles/components/paginator/_paginator-theme.scss | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-component.scss index fd866d97325..07a5bee68b6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-component.scss @@ -16,6 +16,7 @@ ); @extend %igx-paginator !optional; + @extend %igx-paginator--sizable !optional; @include m(cosy) { @extend %igx-paginator !optional; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss index b18a31cdf61..1e1831ffc6a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss @@ -56,10 +56,6 @@ @mixin paginator($theme) { @include css-vars($theme); - igx-paginator { - @include sizable(); - } - $paginator-padding-inline: ( comfortable: rem(24px), cosy: rem(16px), @@ -94,6 +90,10 @@ } } + %igx-paginator--sizable { + @include sizable(); + } + %igx-paginator--cosy { --component-size: var(--ig-size, var(--ig-size-medium)); }