Skip to content

Commit

Permalink
Merge 0730732 into 07f7ef2
Browse files Browse the repository at this point in the history
  • Loading branch information
@SisIvanova
SisIvanova committed Apr 26, 2024
2 parents 07f7ef2 + 0730732 commit 99a776d
Show file tree
Hide file tree
Showing 21 changed files with 430 additions and 352 deletions.
8 changes: 4 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -78,7 +78,7 @@
"globby": "^14.0.1",
"husky": "^9.0.11",
"ig-typedoc-theme": "^5.0.3",
"igniteui-theming": "^6.0.2",
"igniteui-theming": "^6.2.0",
"keep-a-changelog": "^2.5.3",
"lint-staged": "^15.2.2",
"lit-analyzer": "^2.0.3",
Expand Down
22 changes: 4 additions & 18 deletions src/components/button-group/themes/button.base.scss
View file
Expand Up @@ -58,26 +58,12 @@ $transition: all 140ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
pointer-events: none;
}

:host([selected]:disabled),
:host([selected][disabled]) {
[part~='toggle'] {
&::before {
position: absolute;
content: '';
inset: 0;
z-index: 3;

// this is implemented the same way as in igniteui-angular
background: color($color: 'gray', $variant: 500, $opacity: .12);
}
}
:host(:focus-visible) {
outline: none;
}

:host(:focus-within),
:host(:focus) {
[part~='toggle'] {
outline: none;
}
[part~='toggle']:focus-visible {
outline: none;
}

:host([selected]) {
Expand Down
7 changes: 7 additions & 0 deletions src/components/button-group/themes/button.ts
View file
Expand Up @@ -5,6 +5,7 @@ import type { Themes } from '../../../theming/types';
import { styles as bootstrap } from './shared/button/button.bootstrap.css.js';
import { styles as fluent } from './shared/button/button.fluent.css.js';
import { styles as indigo } from './shared/button/button.indigo.css.js';
import { styles as material } from './shared/button/button.material.css.js';

const light = {
bootstrap: css`
Expand All @@ -16,6 +17,9 @@ const light = {
indigo: css`
${indigo}
`,
material: css`
${material}
`,
};

const dark = {
Expand All @@ -28,6 +32,9 @@ const dark = {
indigo: css`
${indigo}
`,
material: css`
${material}
`,
};

export const all: Themes = { light, dark };
43 changes: 37 additions & 6 deletions src/components/button-group/themes/shared/button/button.bootstrap.scss
View file
Expand Up @@ -12,19 +12,50 @@ $group-item-border-thickness: rem(1px);
border-width: $group-item-border-thickness;
padding-inline: pad-inline(rem(8px), rem(10px), rem(12px));
padding-block: pad-block(rem(2px), rem(4px), rem(7px));
min-width: var(--button-min-width);

&::before {
position: absolute;
pointer-events: none;
width: 100%;
height: 100%;
z-index: -1;
}
}

[part~='toggle']:focus-visible {
box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
}
}

:host(:hover),
:host(:focus) {
:host(:active) {
[part~='toggle'] {
border-color: var-get($theme, 'item-border-color');
background: var-get($theme, 'item-hover-background');
color: var-get($theme, 'item-hover-text-color');
border-color: var-get($theme, 'item-hover-border-color');

&::before {
content: '';
background: var-get($theme, 'item-focused-background');
}
}

::slotted(igc-icon) {
color: var-get($theme, 'item-hover-icon-color');
}
}

:host(:focus) {
:host([selected]:active) {
[part~='toggle'] {
box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
background: var-get($theme, 'item-selected-hover-background');
color: var-get($theme, 'item-selected-hover-text-color');
border-color: var-get($theme, 'item-selected-hover-border-color');

::slotted(igc-icon) {
color: var-get($theme, 'item-selected-hover-icon-color');
}

&::before {
background: var-get($theme, 'item-selected-focus-background');
}
}
}
42 changes: 14 additions & 28 deletions src/components/button-group/themes/shared/button/button.common.scss
View file
Expand Up @@ -23,6 +23,7 @@ $theme: $material;
--igx-icon-size: #{$icon-size};

min-height: $material-flat-btn-size;
min-width: var(--button-min-width);
color: var-get($theme, 'item-text-color');
background: var-get($theme, 'item-background');
padding-inline: rem(16px);
Expand All @@ -47,24 +48,6 @@ $theme: $material;
}
}

:host(:focus) {
[part~='toggle'] {
color: var-get($theme, 'item-focused-text-color');
background: var-get($theme, 'item-focused-background');
border-color: var-get($theme, 'item-focused-border-color');

&:hover {
color: var-get($theme, 'item-hover-text-color');
background: var-get($theme, 'item-hover-background');
border-color: var-get($theme, 'item-hover-border-color');

::slotted(igc-icon) {
color: var-get($theme, 'item-hover-icon-color');
}
}
}
}

:host([selected]) {
[part~='toggle'] {
color: var-get($theme, 'item-selected-text-color');
Expand All @@ -89,16 +72,6 @@ $theme: $material;
}
}

:host([selected]:focus) {
[part~='toggle'] {
&:hover {
::slotted(igc-icon) {
color: var-get($theme, 'item-selected-hover-icon-color');
}
}
}
}

:host([disabled]),
:host(:disabled) {
@include disabled();
Expand All @@ -108,3 +81,16 @@ $theme: $material;
:host-context(:disabled) {
@include disabled();
}

:host([selected]:disabled),
:host([selected][disabled]) {
[part~='toggle'] {
&::before {
position: absolute;
content: '';
inset: 0;
z-index: 3;
background: var-get($theme, 'disabled-selected-background');
}
}
}
61 changes: 30 additions & 31 deletions src/components/button-group/themes/shared/button/button.fluent.scss
View file
Expand Up @@ -5,18 +5,6 @@ $theme: $fluent;
$group-item-border-thickness: rem(1px);
$outline-btn-indent: rem(2px);

:host(:focus) {
[part~='toggle'] {
background: var-get($theme, 'item-background');
}
}

:host(:active) {
[part~='toggle'] {
background: var-get($theme, 'item-focused-background');
}
}

:host {
[part~='toggle'] {
min-height: $fluent-flat-btn-size;
Expand All @@ -35,39 +23,50 @@ $outline-btn-indent: rem(2px);
height: calc(100% - (#{$outline-btn-indent} * 2));
box-shadow: 0 0 0 rem(1px) var-get($theme, 'item-focused-border-color');
}
}
}
}

&:hover {
background: var-get($theme, 'item-hover-background');
}
:host(:hover) {
[part~='toggle']:focus-visible {
background: var-get($theme, 'item-hover-background');
}
}

&:active {
background: var-get($theme, 'item-focused-background');
}
:host(:active) {
[part~='toggle'] {
background: var-get($theme, 'item-focused-background');

&:focus-visible {
background: var-get($theme, 'item-focused-background');
}
}
}

:host([selected]:hover),
:host([selected]:focus) {
:host([selected]:hover) {
[part~='toggle'] {
background: var-get($theme, 'item-selected-background');

&::before {
content: '';
position: absolute;
pointer-events: none;
width: 100%;
height: 100%;
z-index: -1;
background: var-get($theme, 'item-selected-hover-background');
}
}
}

:host([selected]:active) {
[part~='toggle'] {
background: var-get($theme, 'item-selected-hover-background');
:host([selected]) {
[part~='toggle']:focus-visible {
background: var-get($theme, 'item-selected-background');
}
}

:host([selected]) {
:host([selected]:active) {
[part~='toggle'] {
&:focus-visible {
background: var-get($theme, 'item-selected-background');

&:active {
background: var-get($theme, 'item-selected-hover-background');
}
}
background: var-get($theme, 'item-selected-focus-background');
}
}
14 changes: 9 additions & 5 deletions src/components/button-group/themes/shared/button/button.indigo.scss
View file
Expand Up @@ -20,10 +20,10 @@ $group-item-border-thickness: rem(1px);
}

[part~='toggle']:focus-visible {
outline: none;
z-index: 2;
box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
border-color: var-get($theme, 'item-border-color');
color: var-get($theme, 'item-focused-text-color');
}
}

Expand All @@ -34,6 +34,7 @@ $group-item-border-thickness: rem(1px);

[part~='toggle']:focus-visible {
border-color: var-get($theme, 'item-hover-border-color');
color: var-get($theme, 'item-hover-text-color');
}
}

Expand All @@ -50,14 +51,17 @@ $group-item-border-thickness: rem(1px);
}
}

:host([selected]:hover) {
[part~='toggle']:focus-visible {
border-color: var-get($theme, 'item-selected-hover-border-color');
}
}

:host([selected]) {
[part~='toggle']:focus-visible {
box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
border-color: var-get($theme, 'item-selected-border-color');

&:hover {
border-color: var-get($theme, 'item-selected-hover-border-color');
}
color: var-get($theme, 'item-selected-hover-text-color');
}
}

Expand Down

0 comments on commit 99a776d

Please sign in to comment.