From 0a465a1f939556e621e63038f4a0cc07d2d1cf3c Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Thu, 26 Sep 2024 14:10:19 +0300 Subject: [PATCH 1/8] Chip - Update indigo theme (#14790) --- .../styles/components/chip/_chip-theme.scss | 308 ++++++++++-------- src/app/chips/chips.sample.html | 1 + src/app/chips/chips.sample.scss | 16 +- 3 files changed, 173 insertions(+), 152 deletions(-) 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 a1663d19227..cc1693e30ac 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 @@ -243,7 +243,8 @@ focus-selected-outline-color: $focus-selected-outline-color, focus-outline-color: $focus-outline-color, _meta: map.merge(if($meta, $meta, ()), ( - variant: map.get($schema, '_meta', 'theme') + variant: map.get($schema, '_meta', 'theme'), + theme-variant: map.get($schema, '_meta', 'variant') )), size: $size, )); @@ -258,11 +259,12 @@ $chip-max-width: 32ch; $variant: map.get($theme, '_meta', 'variant'); + $theme-variant: map.get($theme, '_meta', 'theme-variant'); $chip-padding: ( - comfortable: rem(12px), - cosy: rem(6px), - compact: rem(2px) + comfortable: rem(if($variant != 'indigo', 12px, 7px)), + cosy: rem(if($variant != 'indigo', 6px, 5px)), + compact: rem(if($variant != 'indigo', 2px, 3px)) ); $box-shadow-focus: map.get(( @@ -288,6 +290,11 @@ flex-wrap: wrap; width: 100%; + @if $variant == 'indigo' { + padding: rem(4px); + gap: rem(8px) + } + &:empty { display: none; } @@ -316,21 +323,6 @@ outline: none; // The focus and hover are build that way since the host is the focusable element - - &:hover { - %igx-chip__item { - color: var-get($theme, 'hover-text-color'); - background: var-get($theme, 'hover-background'); - border-color: var-get($theme, 'hover-border-color'); - } - - %igx-chip__item--selected { - color: var-get($theme, 'hover-selected-text-color'); - background: var-get($theme, 'hover-selected-background'); - border-color: var-get($theme, 'hover-selected-border-color'); - } - } - &:focus { %igx-chip__item { outline-style: none; @@ -349,19 +341,17 @@ } } - @if $variant == 'indigo' { - &:focus:hover { - %igx-chip__item { - color: var-get($theme, 'hover-text-color'); - background: var-get($theme, 'hover-background'); - border-color: var-get($theme, 'hover-border-color'); - } + &:hover { + %igx-chip__item { + color: var-get($theme, 'hover-text-color'); + background: var-get($theme, 'hover-background'); + border-color: var-get($theme, 'hover-border-color'); + } - %igx-chip__item--selected { - color: var-get($theme, 'hover-selected-text-color'); - background: var-get($theme, 'hover-selected-background'); - border-color: var-get($theme, 'hover-selected-border-color'); - } + %igx-chip__item--selected { + color: var-get($theme, 'hover-selected-text-color'); + background: var-get($theme, 'hover-selected-background'); + border-color: var-get($theme, 'hover-selected-border-color'); } } } @@ -378,6 +368,7 @@ map.get($chip-padding, 'cosy'), map.get($chip-padding, 'comfortable') ); + gap: sizable(rem(3px), rem(6px), rem(8px)); color: var-get($theme, 'text-color'); background: var-get($theme, 'background'); @@ -404,6 +395,12 @@ --component-size: var(--chip-size); } + @if $variant == 'indigo' { + %igx-icon-display { + --size: #{sizable(rem(14px), rem(14px), rem(16px))} + } + } + igx-avatar, igx-circular-bar { max-height: 100%; @@ -441,20 +438,6 @@ } %igx-chip%igx-chip--primary { - &:hover { - %igx-chip__item { - @if $variant == 'indigo' { - color: contrast-color($color: 'primary', $variant: 400); - background: color($color: 'primary', $variant: 400); - border-color: color($color: 'primary', $variant: 400); - } @else { - color: contrast-color($color: 'primary', $variant: 600); - background: color($color: 'primary', $variant: 600); - border-color: color($color: 'primary', $variant: 600); - } - } - } - &:focus { %igx-chip__item { color: contrast-color($color: 'primary', $variant: 800); @@ -462,10 +445,10 @@ border-color: color($color: 'primary', $variant: 800); @if $variant == 'indigo' { - color: contrast-color($color: 'primary', $variant: 500); + color: contrast-color($color: 'primary', $variant: 900); background: color($color: 'primary', $variant: 500); border-color: color($color: 'primary', $variant: 500); - box-shadow: 0 0 0 rem(3px) color($color: 'primary', $variant: 200); + box-shadow: 0 0 0 rem(3px) color($color: 'primary', $variant: 400, $opacity: .5); } @if $variant == 'bootstrap' { @@ -473,29 +456,29 @@ } } } - } - - %igx-chip__item--info { - color: contrast-color($color: 'info', $variant: 500); - background: color($color: 'info', $variant: 500); - border-color: color($color: 'info', $variant: 500); - } - %igx-chip%igx-chip--info { &:hover { %igx-chip__item { @if $variant == 'indigo' { - color: contrast-color($color: 'info', $variant: 400); - background: color($color: 'info', $variant: 400); - border-color: color($color: 'info', $variant: 400); + color: contrast-color($color: 'primary', $variant: 900); + background: color($color: 'primary', $variant: 400); + border-color: color($color: 'primary', $variant: 400); } @else { - color: contrast-color($color: 'info', $variant: 600); - background: color($color: 'info', $variant: 600); - border-color: color($color: 'info', $variant: 600); + color: contrast-color($color: 'primary', $variant: 600); + background: color($color: 'primary', $variant: 600); + border-color: color($color: 'primary', $variant: 600); } } } + } + %igx-chip__item--info { + color: contrast-color($color: 'info', $variant: 500); + background: color($color: 'info', $variant: 500); + border-color: color($color: 'info', $variant: 500); + } + + %igx-chip%igx-chip--info { &:focus { %igx-chip__item { color: contrast-color($color: 'info', $variant: 800); @@ -506,7 +489,7 @@ color: contrast-color($color: 'info', $variant: 500); background: color($color: 'info', $variant: 500); border-color: color($color: 'info', $variant: 500); - box-shadow: 0 0 0 rem(3px) color($color: 'info', $variant: 200); + box-shadow: 0 0 0 rem(3px) color($color: 'info', $variant: if($theme-variant == 'light', 100, 800)); } @if $variant == 'bootstrap' { @@ -514,33 +497,33 @@ } } } + + &:hover { + %igx-chip__item { + @if $variant == 'indigo' { + color: contrast-color($color: 'info', $variant: 400); + background: color($color: 'info', $variant: 400); + border-color: color($color: 'info', $variant: 400); + } @else { + color: contrast-color($color: 'info', $variant: 600); + background: color($color: 'info', $variant: 600); + border-color: color($color: 'info', $variant: 600); + } + } + } } %igx-chip__item--success { @if $variant == 'bootstrap' { color: contrast-color($color: 'success', $variant: 600); } @else { - color: contrast-color($color: 'success', $variant: 500); + color: contrast-color($color: 'success', $variant: if($variant = 'indigo', 900, 500)); } background: color($color: 'success', $variant: 500); border-color: color($color: 'success', $variant: 500); } %igx-chip%igx-chip--success { - &:hover { - %igx-chip__item { - @if $variant == 'indigo' { - color: contrast-color($color: 'success', $variant: 400); - background: color($color: 'success', $variant: 400); - border-color: color($color: 'success', $variant: 400); - } @else { - color: contrast-color($color: 'success', $variant: 600); - background: color($color: 'success', $variant: 600); - border-color: color($color: 'success', $variant: 600); - } - } - } - &:focus { %igx-chip__item { color: contrast-color($color: 'success', $variant: 800); @@ -548,10 +531,10 @@ border-color: color($color: 'success', $variant: 800); @if $variant == 'indigo' { - color: contrast-color($color: 'success', $variant: 500); + color: contrast-color($color: 'success', $variant: 900); background: color($color: 'success', $variant: 500); border-color: color($color: 'success', $variant: 500); - box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: 200); + box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: if($theme-variant == 'light', 200, 800)); } @if $variant == 'bootstrap' { @@ -559,29 +542,29 @@ } } } - } - %igx-chip__item--warning { - color: contrast-color($color: 'warn', $variant: 500); - background: color($color: 'warn', $variant: 500); - border-color: color($color: 'warn', $variant: 500); - } - - %igx-chip%igx-chip--warning { &:hover { %igx-chip__item { @if $variant == 'indigo' { - color: contrast-color($color: 'warn', $variant: 400); - background: color($color: 'warn', $variant: 400); - border-color: color($color: 'warn', $variant: 400); + color: contrast-color($color: 'success', $variant: 900); + background: color($color: 'success', $variant: 400); + border-color: color($color: 'success', $variant: 400); } @else { - color: contrast-color($color: 'warn', $variant: 600); - background: color($color: 'warn', $variant: 600); - border-color: color($color: 'warn', $variant: 600); + color: contrast-color($color: 'success', $variant: 600); + background: color($color: 'success', $variant: 600); + border-color: color($color: 'success', $variant: 600); } } } + } + %igx-chip__item--warning { + color: contrast-color($color: 'warn', $variant: 900); + background: color($color: 'warn', $variant: 500); + border-color: color($color: 'warn', $variant: 500); + } + + %igx-chip%igx-chip--warning { &:focus { %igx-chip__item { color: contrast-color($color: 'warn', $variant: 800); @@ -589,10 +572,10 @@ border-color: color($color: 'warn', $variant: 800); @if $variant == 'indigo' { - color: contrast-color($color: 'warn', $variant: 500); + color: contrast-color($color: 'warn', $variant: 900); background: color($color: 'warn', $variant: 500); border-color: color($color: 'warn', $variant: 500); - box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: 200); + box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: if($theme-variant == 'light', 100, 900)); } @if $variant == 'bootstrap' { @@ -600,33 +583,33 @@ } } } + + &:hover { + %igx-chip__item { + @if $variant == 'indigo' { + color: contrast-color($color: 'warn', $variant: 900); + background: color($color: 'warn', $variant: 400); + border-color: color($color: 'warn', $variant: 400); + } @else { + color: contrast-color($color: 'warn', $variant: 600); + background: color($color: 'warn', $variant: 600); + border-color: color($color: 'warn', $variant: 600); + } + } + } } %igx-chip__item--danger { @if $variant == 'bootstrap' { color: contrast-color($color: 'error', $variant: 600); } @else { - color: contrast-color($color: 'error', $variant: 500); + color: contrast-color($color: 'error', $variant: if($variant = 'indigo', 900, 500)); } background: color($color: 'error', $variant: 500); border-color: color($color: 'error', $variant: 500); } %igx-chip%igx-chip--danger { - &:hover { - %igx-chip__item { - @if $variant == 'indigo' { - color: contrast-color($color: 'error', $variant: 400); - background: color($color: 'error', $variant: 400); - border-color: color($color: 'error', $variant: 400); - } @else { - color: contrast-color($color: 'error', $variant: 600); - background: color($color: 'error', $variant: 600); - border-color: color($color: 'error', $variant: 600); - } - } - } - &:focus { %igx-chip__item { color: contrast-color($color: 'error', $variant: 800); @@ -634,10 +617,10 @@ border-color: color($color: 'error', $variant: 800); @if $variant == 'indigo' { - color: contrast-color($color: 'error', $variant: 500); + color: contrast-color($color: 'error', $variant: 900); background: color($color: 'error', $variant: 500); border-color: color($color: 'error', $variant: 500); - box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: 200); + box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: if($theme-variant == 'light', 100, 900)); } @if $variant == 'bootstrap' { @@ -645,13 +628,31 @@ } } } + + &:hover { + %igx-chip__item { + @if $variant == 'indigo' { + color: contrast-color($color: 'error', $variant: 900); + background: color($color: 'error', $variant: 400); + border-color: color($color: 'error', $variant: 400); + } @else { + color: contrast-color($color: 'error', $variant: 600); + background: color($color: 'error', $variant: 600); + border-color: color($color: 'error', $variant: 600); + } + } + } } %igx-chip__start { > igx-avatar, > igx-circular-bar { &:first-child { - margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + @if $variant != 'indigo' { + margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + } @else { + margin-inline-start: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1); + } } } @@ -660,7 +661,11 @@ &:first-of-type { igx-avatar, igx-circular-bar { - margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + @if $variant != 'indigo' { + margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + } @else { + margin-inline-start: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1); + } } } } @@ -670,7 +675,11 @@ > igx-avatar, > igx-circular-bar { &:last-child { - margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + @if $variant != 'indigo' { + margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + } @else { + margin-inline-end: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1); + } } } @@ -679,7 +688,11 @@ &:first-of-type { igx-avatar, igx-circular-bar { - margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + @if $variant != 'indigo' { + margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1); + } @else { + margin-inline-end: calc(#{sizable(rem(1px), rem(3px), rem(4px))} * -1); + } } } } @@ -777,58 +790,79 @@ } } + %igx-chip__item--disabled { + color: var-get($theme, 'disabled-text-color'); + background: var-get($theme, 'disabled-background'); + border-color: var-get($theme, 'disabled-border-color'); + } + %igx-chip--disabled { cursor: default; pointer-events: none; - @if $variant == 'indigo' { + %igx-chip__item--selected { + background: color($color: 'primary', $variant: 400, $opacity: .5); + border-color: transparent; + color: contrast-color($color: 'primary', $variant: 900, $opacity: if($theme-variant == 'light', .4, .2)); + } + &%igx-chip--primary { %igx-chip__item { - color: contrast-color($color: 'primary', $variant: 400); - background: color($color: 'primary', $variant: 200); - border-color: color($color: 'primary', $variant: 200); + /* stylelint-disable max-nesting-depth */ + @if $theme-variant == 'light' { + color: contrast-color($color: 'primary', $variant: 900, $opacity: .4); + } @else { + color: contrast-color($color: 'primary', $variant: 900, $opacity: .2); + } + + background: color($color: 'primary', $variant: 400, $opacity: .5); + border-color: transparent; + /* stylelint-enable max-nesting-depth */ } } &%igx-chip--info { %igx-chip__item { - color: contrast-color($color: 'info', $variant: 400); - background: color($color: 'info', $variant: 200); - border-color: color($color: 'info', $variant: 200); + color: contrast-color($color: 'info', $variant: 900); + background: color($color: 'info', $variant: 500); + border-color: color($color: 'info', $variant: 500); } } &%igx-chip--success { %igx-chip__item { - color: contrast-color($color: 'success', $variant: 800); - background: color($color: 'success', $variant: 200); - border-color: color($color: 'success', $variant: 200); + color: contrast-color($color: 'success', $variant: 900); + background: color($color: 'success', $variant: 500); + border-color: color($color: 'success', $variant: 500); } } &%igx-chip--warning { %igx-chip__item { color: contrast-color($color: 'warn', $variant: 900); - background: color($color: 'warn', $variant: 200); - border-color: color($color: 'warn', $variant: 200); + background: color($color: 'warn', $variant: 500); + border-color: color($color: 'warn', $variant: 500); } } &%igx-chip--danger { %igx-chip__item { - color: contrast-color($color: 'error', $variant: 400); - background: color($color: 'error', $variant: 200); - border-color: color($color: 'error', $variant: 200); + color: contrast-color($color: 'error', $variant: 900); + background: color($color: 'error', $variant: 500); + border-color: color($color: 'error', $variant: 500); } } - } - } - %igx-chip__item--disabled { - color: var-get($theme, 'disabled-text-color'); - background: var-get($theme, 'disabled-background'); - border-color: var-get($theme, 'disabled-border-color'); + &%igx-chip--info, + &%igx-chip--success, + &%igx-chip--warning, + &%igx-chip--danger { + %igx-chip__item { + opacity: .4; + } + } + } } } diff --git a/src/app/chips/chips.sample.html b/src/app/chips/chips.sample.html index 32a788d1655..889ea39b440 100644 --- a/src/app/chips/chips.sample.html +++ b/src/app/chips/chips.sample.html @@ -112,6 +112,7 @@

Chips in Chip Area

+

Chips in a Custom Scenario

diff --git a/src/app/chips/chips.sample.scss b/src/app/chips/chips.sample.scss index ee40f927761..c33dfc17db9 100644 --- a/src/app/chips/chips.sample.scss +++ b/src/app/chips/chips.sample.scss @@ -2,10 +2,6 @@ @use '../../../projects/igniteui-angular/src/lib/core/styles/components/chip/chip-component' as *; @use '../../../projects/igniteui-angular/src/lib/core/styles/components/chip/chip-theme' as *; -igx-chip { - margin: rem(4px); -} - .sample-title { font-size: 16px; font-weight: 900; @@ -99,20 +95,10 @@ $padding: 32px; min-width: rem(24px); } -.chip-storyboard { - display: flex; - flex-direction: column; - flex-wrap: wrap; - gap: 20px; - - igx-chip { - margin: rem(4px); - } -} - .chip-area-connector { color: currentColor; opacity: .54; + user-select: none; } .wrapperAreaCc, From 5629601d61fc723c2d4152040791cd2457f0e425 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 26 Sep 2024 14:13:12 +0300 Subject: [PATCH 2/8] deps(theming): bump to latest beta --- package-lock.json | 9 +++++---- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1863ef5b2d4..0d90912c3e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^4.21.0", "fflate": "^0.8.1", - "igniteui-theming": "^13.0.0", + "igniteui-theming": "^14.0.0-beta.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -13752,9 +13752,10 @@ } }, "node_modules/igniteui-theming": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-13.0.0.tgz", - "integrity": "sha512-UP1KNUpGSfQ8FQgUu7jB7RFE7cFRkVhTugCoIWwcQzIpsWnCL68tmcvAYs/B1soPOIa5KeJJF0k/PwfmEWibhg==", + "version": "14.0.0-beta.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-14.0.0-beta.1.tgz", + "integrity": "sha512-nTpOawVvxPtu0eMzAmrcq4e2HCMi39txaMwujSe3Xjdw6v5VmKyfnPHpnsg9WmNyXXRYvswnH99gzyWyCDWPhw==", + "license": "MIT", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index e79669fd194..7c86b64dfa6 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "@types/source-map": "0.5.2", "express": "^4.21.0", "fflate": "^0.8.1", - "igniteui-theming": "^13.0.0", + "igniteui-theming": "^14.0.0-beta.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index 2f6d0740503..0a05e53532e 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -74,7 +74,7 @@ "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "uuid": "^9.0.0", - "igniteui-theming": "^13.0.0", + "igniteui-theming": "^14.0.0", "@igniteui/material-icons-extended": "^3.0.0" }, "peerDependencies": { From b52551513ce44c723952b001b7138974d6dc01d2 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Thu, 26 Sep 2024 14:14:13 +0300 Subject: [PATCH 3/8] feat(tabs): update theme according to new Indigo design (#14785) --- .../styles/components/tabs/_tabs-theme.scss | 71 ++++++++++++++----- .../lib/core/styles/typography/_indigo.scss | 4 +- .../src/lib/tabs/tabs/tabs.component.ts | 3 +- 3 files changed, 60 insertions(+), 18 deletions(-) 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 573b796a6d4..6727f4e30f0 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 @@ -188,7 +188,8 @@ border-color: $border-color, border-radius: $border-radius, _meta: map.merge(if($meta, $meta, ()), ( - variant: map.get($schema, '_meta', 'theme') + variant: map.get($schema, '_meta', 'theme'), + theme-variant: map.get($schema, '_meta', 'variant') )), )); } @@ -205,6 +206,7 @@ $not-bootstrap-theme: $variant != 'bootstrap'; $bootstrap-theme: $variant == 'bootstrap'; $indigo-theme: $variant == 'indigo'; + $theme-variant: map.get($theme, '_meta', 'theme-variant'); $item-min-width: rem(90px); $item-max-width: rem(360px); @@ -228,9 +230,12 @@ %tabs-header-item-inner, %tabs-header-content { display: flex; + align-items: center; } %tabs-display { + --nav-btn-border-color: #{var-get($theme, 'border-color')}; + display: flex; flex-direction: column; overflow: hidden; @@ -240,7 +245,7 @@ overflow: hidden; flex: 0 0 auto; background: var-get($theme, 'item-background'); - min-height: rem(42px); + min-height: #{if($variant == 'indigo', rem(40px), rem(42px))}; z-index: 1; } @@ -304,12 +309,33 @@ &:disabled { color: var-get($theme, 'button-disabled-color'); + cursor: default; + pointer-events: none; } &--none { display: none; } + @if $indigo-theme { + min-width: rem(40px); + width: rem(40px); + border-radius: border-radius(0); + align-self: stretch; + height: auto; + transition: none; + border-bottom: rem(1px) solid var(--nav-btn-border-color); + + &:focus-visible { + border: rem(3px) solid var(--nav-btn-border-color); + background: var-get($theme, 'button-background'); + box-shadow: none; + + @if $theme-variant == 'dark' { + border: rem(3px) solid contrast-color($color: 'gray', $variant: 50, $opacity: .2); + } + } + } @include ripple($button-ripple-theme); @include css-vars($button-ripple-theme); @@ -355,16 +381,6 @@ color: var-get($theme, 'item-icon-color'); } - @if $bootstrap-theme { - padding-block: rem(12px); - border-start-start-radius: var-get($theme, 'border-radius'); - border-start-end-radius: var-get($theme, 'border-radius'); - } - - @if $indigo-theme { - border-bottom: rem(1px) solid var-get($theme, 'border-color'); - } - &::-moz-focus-inner { border: 0; } @@ -392,6 +408,7 @@ } @if $bootstrap-theme { + padding-block: rem(12px); border-start-start-radius: var-get($theme, 'border-radius'); border-start-end-radius: var-get($theme, 'border-radius'); } @@ -407,13 +424,18 @@ } @if $indigo-theme { - border-top: transparent; - border-inline: transparent; + border-top: rem(1px) solid transparent; + border-inline: rem(1px) solid transparent; &:hover, &:focus { - border-top: transparent; - border-inline: transparent; + border-top: rem(1px) solid transparent; + border-inline: rem(1px) solid transparent; + border-bottom: rem(1px) solid var-get($theme, 'border-color'); + } + + igx-icon { + --ig-size: 2; } } @@ -459,6 +481,18 @@ box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'); } } + + @if $indigo-theme { + &:hover, + &:focus-visible { + background: var-get($theme, 'item-hover-background'); + color: var-get($theme, 'item-hover-color'); + + igx-icon { + color: var-get($theme, 'item-hover-icon-color'); + } + } + } } %tabs-header-item:focus, @@ -516,9 +550,14 @@ min-width: $item-min-width; background: var-get($theme, 'indicator-color'); transition: transform .3s $tabs-animation-function, width .2s $tabs-animation-function; + @if $bootstrap-theme { display: none; } + + @if $indigo-theme { + height: rem(3px); + } } %tabs-panels { diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index 10a0a363109..9229d26fbf7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -102,7 +102,9 @@ @include switch-typography($categories: ( label: 'body-2' )); - @include tabs-typography(); + @include tabs-typography($categories: ( + label: 'subtitle-2', + )); @include time-picker-typography($categories: ( header-time-period: 'subtitle-1', header-hour: 'h5', diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts index 382861349c0..59c09d4b56d 100644 --- a/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts +++ b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts @@ -8,6 +8,7 @@ import { IgxTabsDirective } from '../tabs.directive'; import { NgClass, NgFor, NgTemplateOutlet, NgIf } from '@angular/common'; import { IgxIconComponent } from '../../icon/icon.component'; import { IgxRippleDirective } from '../../directives/ripple/ripple.directive'; +import { IgxIconButtonDirective } from '../../directives/button/icon-button.directive'; export const IgxTabsAlignment = /*@__PURE__*/mkenum({ start: 'start', @@ -63,7 +64,7 @@ let NEXT_TAB_ID = 0; templateUrl: 'tabs.component.html', providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], standalone: true, - imports: [IgxRippleDirective, IgxIconComponent, NgClass, NgFor, NgTemplateOutlet, NgIf] + imports: [IgxRippleDirective, IgxIconComponent, NgClass, NgFor, NgTemplateOutlet, NgIf, IgxIconButtonDirective] }) export class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit, OnDestroy { From cb6ba701c7d166f33e0844a581f5130190fe4640 Mon Sep 17 00:00:00 2001 From: sivanova Date: Thu, 26 Sep 2024 16:52:48 +0300 Subject: [PATCH 4/8] fix(tabs): bottom border indigo --- .../src/lib/core/styles/components/tabs/_tabs-theme.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 6727f4e30f0..154b9187584 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 @@ -425,12 +425,12 @@ @if $indigo-theme { border-top: rem(1px) solid transparent; - border-inline: rem(1px) solid transparent; + border-inline: none; &:hover, &:focus { border-top: rem(1px) solid transparent; - border-inline: rem(1px) solid transparent; + border-inline: none; border-bottom: rem(1px) solid var-get($theme, 'border-color'); } From f6e1367849f7016ab495ebfd0375dcb3fbe028fb Mon Sep 17 00:00:00 2001 From: sivanova Date: Sun, 29 Sep 2024 17:22:08 +0300 Subject: [PATCH 5/8] fix(tabs): requested changes --- .../styles/components/tabs/_tabs-theme.scss | 37 +++++++++++++------ 1 file changed, 26 insertions(+), 11 deletions(-) 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 154b9187584..47c3221c3c4 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 @@ -247,6 +247,20 @@ background: var-get($theme, 'item-background'); min-height: #{if($variant == 'indigo', rem(40px), rem(42px))}; z-index: 1; + + @if $indigo-theme { + [igxIconButton=flat].igx-button--focused { + box-shadow: none; + + &::after { + border: rem(3px) solid var(--nav-btn-border-color); + + @if $theme-variant == 'dark' { + border-color: contrast-color($color: 'gray', $variant: 50, $opacity: .2); + } + } + } + } } %tabs-header-content { @@ -299,7 +313,10 @@ &:focus { outline: 0; - background: var-get($theme, 'button-hover-background'); + + @if $variant != 'indigo' { + background: var-get($theme, 'button-hover-background'); + } } &::-moz-focus-inner { @@ -324,16 +341,14 @@ align-self: stretch; height: auto; transition: none; - border-bottom: rem(1px) solid var(--nav-btn-border-color); - &:focus-visible { - border: rem(3px) solid var(--nav-btn-border-color); - background: var-get($theme, 'button-background'); - box-shadow: none; - - @if $theme-variant == 'dark' { - border: rem(3px) solid contrast-color($color: 'gray', $variant: 50, $opacity: .2); - } + &::after { + content: ''; + position: absolute; + pointer-events: none; + width: 100%; + height: 100%; + border-bottom: rem(1px) solid var(--nav-btn-border-color); } } @@ -353,7 +368,7 @@ %tabs-header-item { > * { - margin-inline-start: rem(12px); + margin-inline-start: rem(if($variant != 'indigo', 12px, 8px)); &:first-child { margin-inline-start: 0; From ee0ea12f68aad116ba2958ea922fac907216b6ac Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Sun, 29 Sep 2024 17:29:38 +0300 Subject: [PATCH 6/8] Update _tabs-theme.scss --- .../src/lib/core/styles/components/tabs/_tabs-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 47c3221c3c4..240094bd72e 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 @@ -249,7 +249,7 @@ z-index: 1; @if $indigo-theme { - [igxIconButton=flat].igx-button--focused { + [igxIconButton='flat'].igx-button--focused { box-shadow: none; &::after { From cd77c1af273a42be6ce0e65e4ba948a9a04229d5 Mon Sep 17 00:00:00 2001 From: sivanova Date: Mon, 30 Sep 2024 09:43:32 +0300 Subject: [PATCH 7/8] fix(tabs): navigation buttons in the other themes --- .../lib/core/styles/components/tabs/_tabs-theme.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 240094bd72e..9b079ef287e 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 @@ -245,7 +245,6 @@ overflow: hidden; flex: 0 0 auto; background: var-get($theme, 'item-background'); - min-height: #{if($variant == 'indigo', rem(40px), rem(42px))}; z-index: 1; @if $indigo-theme { @@ -305,6 +304,10 @@ background: var-get($theme, 'button-background'); color: var-get($theme, 'button-color'); outline: 0; + align-self: stretch; + height: auto; + transition: none; + border-radius: border-radius(0); &:hover { background: var-get($theme, 'button-hover-background'); @@ -337,10 +340,6 @@ @if $indigo-theme { min-width: rem(40px); width: rem(40px); - border-radius: border-radius(0); - align-self: stretch; - height: auto; - transition: none; &::after { content: ''; @@ -379,6 +378,7 @@ align-items: center; min-width: $item-min-width; max-width: $item-max-width; + min-height: #{if($variant == 'indigo', rem(40px), rem(42px))}; word-wrap: break-word; // Flex basis & shrink are Needed for IE11 flex-basis: auto; From 3e872d9ae18210068acebd98e4094282baaaed83 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 1 Oct 2024 12:30:37 +0300 Subject: [PATCH 8/8] deps(theming): bump to latest version --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0d90912c3e6..ba9f4fb1434 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^4.21.0", "fflate": "^0.8.1", - "igniteui-theming": "^14.0.0-beta.1", + "igniteui-theming": "^14.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -13752,9 +13752,9 @@ } }, "node_modules/igniteui-theming": { - "version": "14.0.0-beta.1", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-14.0.0-beta.1.tgz", - "integrity": "sha512-nTpOawVvxPtu0eMzAmrcq4e2HCMi39txaMwujSe3Xjdw6v5VmKyfnPHpnsg9WmNyXXRYvswnH99gzyWyCDWPhw==", + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-14.0.0.tgz", + "integrity": "sha512-IcKuGLEzjD7r7kpQLUrD0iTfOPciUrXtC2b5f9Y4O8963UTKvtBZYIVuWzSmnDp4OH1Ga+5Cv4OMUddYXGtHsQ==", "license": "MIT", "peerDependencies": { "sass": "^1.58.1" diff --git a/package.json b/package.json index 7c86b64dfa6..5c9447cd2f2 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "@types/source-map": "0.5.2", "express": "^4.21.0", "fflate": "^0.8.1", - "igniteui-theming": "^14.0.0-beta.1", + "igniteui-theming": "^14.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0",