skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(table): use solid color for sorting arrow (#11533)

Browse Source 
Currently we use an rgba color for the table's sorting arrow which ends up looking weird, because the arrow is made up of multiple stacked elements. These changes add some logic that convert the arrow's color into a solid one so the individual pieces can blend into each other.

Fixes #11340.
This commit is contained in:
Kristiyan Kostadinov
2018-06-20 19:54:47 +02:00
committed by tinayuangao
parent 1ff9cf028d
commit 4b13555d87
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/sort/_sort-theme.scss
+15 -2
View File
@@ -1,4 +1,17 @@
// Empty mixins to be consistent with all other components.
@mixin mat-sort-theme($theme) { }
@mixin mat-sort-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.mat-sort-header-arrow {
// Because the arrow is made up of multiple elements that are stacked on top of each other,
// we can't use the semi-trasparent color from the theme directly. We convert it into a solid
// color by taking the opacity from the rgba value and using the value to determine the
// percentage of the background to put into foreground when mixing the colors together.
$table-background: mat-color($background, 'card');
$text-color: mat-color($foreground, secondary-text);
$text-opacity: opacity($text-color);
color: mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
}
}
@mixin mat-sort-typography($config) { }