Skip to content

Commit

Permalink
fix(checkbox): fix sub pixel rendering for checkbox border (#13477)
Browse files Browse the repository at this point in the history
  • Loading branch information
@desig9stein
desig9stein authored Sep 21, 2023
1 parent bbcc359 commit b9560f6
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 69 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
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
"@types/source-map": "0.5.2",
"fflate": "^0.7.3",
"hammerjs": "^2.0.8",
"igniteui-theming": "^3.0.4",
"igniteui-theming": "^3.0.6",
"igniteui-trial-watermark": "^2.0.0",
"lodash-es": "^4.17.21",
"rxjs": "^6.6.7",
Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
"igniteui-trial-watermark": "^1.0.3",
"lodash-es": "^4.17.21",
"uuid": "^9.0.0",
"igniteui-theming": "^3.0.4",
"igniteui-theming": "^3.0.6",
"@igniteui/material-icons-extended": "^3.0.0"
},
"peerDependencies": {
Expand Down
80 changes: 17 additions & 63 deletions projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,23 +205,13 @@
border-color: var-get($theme, 'empty-color');
border-radius: var-get($theme, 'border-radius');
-webkit-tap-highlight-color: transparent;
transition: border-color .2s $ease-out-quad;
transition: border-color .2s $ease-out-quad, background .2s $ease-out-quad;
overflow: hidden;

&::after {
position: absolute;
content: '';
inset: 0;
transition: background .2s $ease-out-quad;
}
}

%cbx-composite--x {
border-color: var-get($theme, 'fill-color');

&::after {
background: var-get($theme, 'fill-color');
}
background: var-get($theme, 'fill-color');
}

%cbx-composite--invalid {
Expand All @@ -238,33 +228,21 @@

%cbx-composite--x--invalid {
border-color: var-get($theme, 'error-color');

&::after {
background: var-get($theme, 'error-color');
}
background: var-get($theme, 'error-color');
}

%cbx-composite--x--hover {
border-color: var-get($theme, 'fill-color-hover');

&::after {
background: var-get($theme, 'fill-color-hover');
}
background: var-get($theme, 'fill-color-hover');
}

%cbx-composite--x--invalid--hover {
@if $variant == 'material' or $variant == 'fluent' {
border-color: var-get($theme, 'error-color-hover');

&::after {
background: var-get($theme, 'error-color-hover');
}
background: var-get($theme, 'error-color-hover');
} @else {
border-color: var-get($theme, 'error-color');

&::after {
background: var-get($theme, 'error-color');
}
background: var-get($theme, 'error-color');
}
}

Expand All @@ -278,19 +256,13 @@
}

%cbx-composite--x--disabled {
background: var-get($theme, 'disabled-color');

&::after {
@if $variant != 'indigo-design' {
background: var-get($theme, 'disabled-color');
}

@if $variant == 'indigo-design' {
background: var-get($theme, 'disabled-indeterminate-color');
border-color: var-get($theme, 'disabled-indeterminate-color');

&::after {
background: var-get($theme, 'disabled-indeterminate-color');
}
}

@if $bootstrap-theme {
Expand Down Expand Up @@ -322,25 +294,20 @@
%cbx-composite {
border-color: var-get($theme, 'fill-color-hover');

&::before {
border-color: var-get($theme, 'fill-color-hover');
@if $variant != 'fluent' {
background: var-get($theme, 'fill-color-hover');
}

@if $variant != 'fluent' {
&::after {
background: var-get($theme, 'fill-color-hover');
}
&::before {
background: var-get($theme, 'fill-color-hover');
}
}
}

@if $variant == 'material' {
%cbx-composite--x--disabled {
border-color: var-get($theme, 'disabled-indeterminate-color');

&::after {
background: var-get($theme, 'disabled-indeterminate-color');
}
background: var-get($theme, 'disabled-indeterminate-color');
}
}

Expand All @@ -352,10 +319,6 @@
%cbx-composite {
background: transparent;

&::after {
background: transparent;
}

&::before {
content: '';
position: absolute;
Expand All @@ -364,20 +327,15 @@
width: rem(10px);
height: rem(10px);
border-radius: border-radius(rem(2px));
border: rem(5px) solid var-get($theme, 'fill-color');
background: var-get($theme, 'fill-color');
z-index: 1;
}
}

%cbx-composite--x--disabled {
background: transparent;

&::after {
background: transparent;
}

&::before {
border-color: var-get($theme, 'disabled-color');
background: var-get($theme, 'disabled-color');
}
}
Expand All @@ -386,32 +344,28 @@

%igx-checkbox--indeterminate--invalid {
%cbx-composite--x {
&::after {
background: var-get($theme, 'error-color');
}
background: var-get($theme, 'error-color');
}

@if $variant == 'fluent' {
%cbx-composite {
border-color: var-get($theme, 'error-color');

&::before {
border-color: var-get($theme, 'error-color');
background: var-get($theme, 'error-color');
}
}

%cbx-composite--x {
&::after {
background: transparent;
}
background: transparent;
}

&:hover {
%cbx-composite {
border-color: var-get($theme, 'error-color-hover');

&::before {
border-color: var-get($theme, 'error-color-hover');
background: var-get($theme, 'error-color-hover');
}
}
}
Expand Down

0 comments on commit b9560f6

Please sign in to comment.