diff --git a/package-lock.json b/package-lock.json index 4e688293e07..41796de42db 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": "^12.0.0", + "igniteui-theming": "^13.0.0-beta.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -13752,9 +13752,9 @@ } }, "node_modules/igniteui-theming": { - "version": "12.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-12.0.0.tgz", - "integrity": "sha512-blSZS1nkgLCoZwyydVXPA5zuvTCto3hIFuBaCAPafxc+3at94DO1YoWnp8l0D/khMVnXdzg+Cps0XQnwE2ThpQ==", + "version": "13.0.0-beta.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-13.0.0-beta.1.tgz", + "integrity": "sha512-hKPUOBTjKdIg5nV5Q3xbTQRKFpNduEIKUWbEsOHAVKx3Dae7zHsqSaPJxDTCKKw+dk7gR77DKtAXmln5FgE5Hg==", "license": "MIT", "peerDependencies": { "sass": "^1.58.1" diff --git a/package.json b/package.json index 80116c25d7b..e3c7b798a3f 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "@types/source-map": "0.5.2", "express": "^4.21.0", "fflate": "^0.8.1", - "igniteui-theming": "^12.0.0", + "igniteui-theming": "^13.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/src/lib/carousel/carousel.component.html b/projects/igniteui-angular/src/lib/carousel/carousel.component.html index b5901cb4f55..ccc21c14266 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.html +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.html @@ -31,7 +31,7 @@ -
+
{{getCarouselLabel}}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss index 6cdc04c3e59..73a1fd48f99 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss @@ -21,6 +21,10 @@ @extend %igx-carousel-indicators--bottom !optional; } } + + @include b(igx-carousel-label-indicator) { + @extend %igx-carousel-label-indicator !optional; + } } @mixin _igx-carousel-navigation-partial { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss index a1ac19bb104..3f674008377 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss @@ -137,10 +137,6 @@ @include scale-in-center(); @include scale-out-center(); - $carousel-arrow-margin: 0 rem(16px); - $carousel-indicators-margin: rem(16px) 0; - $carousel-indicators-padding: 0; - $carousel-indicator-margin: 0 rem(5px); $indicator-border-style: rem(2px) solid; $variant: map.get($theme, '_meta', 'variant'); @@ -170,24 +166,20 @@ color: var-get($theme, 'button-arrow-color'); background: var-get($theme, 'button-background'); box-shadow: var-get($theme, 'button-shadow'); + border-radius: var-get($theme, 'border-radius'); + border: rem(1px) solid var-get($theme, 'button-border-color'); igx-icon { - --component-size: 3; - } - - @if $not-bootstrap-theme { - border-radius: border-radius(50%); - } @else { - border-radius: var-get($theme, 'border-radius'); + --component-size: 1; } @if $variant == 'indigo' { width: rem(28px); height: rem(28px); - border: rem(2px) solid var-get($theme, 'button-border-color'); + border-width: rem(2px); igx-icon { - --component-size: 1; + --component-size: 2; } } } @@ -211,7 +203,7 @@ } %igx-carousel-arrow { - margin: $carousel-arrow-margin; + margin: 0 rem(16px); position: absolute; top: 50%; transform: translateY(-50%); @@ -256,20 +248,24 @@ display: flex; justify-content: center; align-items: center; - margin: $carousel-indicators-margin; - padding: $carousel-indicators-padding; + margin: rem(16px) 0; + padding: rem(4px) rem(6px); + gap: rem(8px); list-style: none; z-index: 10; inset-inline-start: 50%; transform: translateX(-50%); + background: var-get($theme, 'indicator-background'); + box-shadow: var-get($theme, 'button-shadow'); + border-radius: var-get($theme, 'border-radius'); [dir='rtl'] & { transform: translateX(50%); } @if $variant == 'indigo' { - gap: rem(10px); - margin-block-start: 0; + gap: rem(4px); + padding: rem(6px); } } @@ -283,20 +279,24 @@ %igx-carousel-indicators-label { align-items: center; - // TODO: this should be wrapped in carousel typogrpahy - font-size: rem(16px); + } + + %igx-carousel-label-indicator { + @include type-style('caption'); + + margin: rem(16px) 0; + min-width: rem(46px); + box-shadow: none; + border-radius: rem(4px); + color: var-get($theme, 'indicator-color'); + background: var-get($theme, 'label-indicator-background'); } %igx-carousel-indicator { display: flex; align-items: center; justify-content: center; - margin: $carousel-indicator-margin; cursor: pointer; - - @if $variant == 'indigo' { - margin: 0; - } } %igx-nav-dot { @@ -308,11 +308,9 @@ @if $variant != 'indigo' { border: $indicator-border-style; border-color: var-get($theme, 'indicator-border-color'); - box-shadow: elevation(1); - opacity: .7; } @else { - width: rem(20px); - height: rem(20px); + width: rem(16px); + height: rem(16px); } border-radius: border-radius(50%); @@ -337,7 +335,7 @@ } &:hover { - opacity: 1; + border-color: var-get($theme, 'indicator-active-border-color'); @if $variant == 'indigo' { &::after { @@ -347,8 +345,8 @@ &::before { position: absolute; content: ''; - width: rem(20px); - height: rem(20px); + width: inherit; + height: inherit; border: rem(2px) solid var-get($theme, 'indicator-hover-dot-color'); inset-inline-start: 0; top: 0; @@ -366,8 +364,8 @@ &::before { position: absolute; content: ''; - width: rem(20px); - height: rem(20px); + width: inherit; + height: inherit; border: rem(2px) solid var-get($theme, 'indicator-active-dot-color'); inset-inline-start: 0; top: 0; @@ -375,8 +373,6 @@ } } - opacity: 1; - &::after { background: var-get($theme, 'indicator-active-dot-color'); @if $variant != 'indigo' { @@ -403,8 +399,7 @@ height: inherit; overflow: hidden; outline-style: none; - border-radius: var-get($theme, 'border-radius'); - min-height: rem(300px); + min-height: rem(240px); min-width: rem(300px); } diff --git a/projects/igniteui-angular/src/lib/icon/icon.references.ts b/projects/igniteui-angular/src/lib/icon/icon.references.ts index b4d082253b8..08a02f381db 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.references.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.references.ts @@ -90,7 +90,7 @@ const loadIconRefs = () => [ }), addIcon('carousel_prev', { default: { - name: 'arrow_back', + name: 'keyboard_arrow_left', family: 'material', }, indigo: { @@ -100,7 +100,7 @@ const loadIconRefs = () => [ }), addIcon('carousel_next', { default: { - name: 'arrow_forward', + name: 'keyboard_arrow_right', family: 'material', }, indigo: {