From d083d761ac184e314fbf50af04605f62f2c7f3ad Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 20 Jun 2018 19:54:47 +0200 Subject: [PATCH] fix(table): use solid color for sorting arrow (#11533) 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. --- src/lib/sort/_sort-theme.scss | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/lib/sort/_sort-theme.scss b/src/lib/sort/_sort-theme.scss index 9aaf2958b28a..667100201c09 100644 --- a/src/lib/sort/_sort-theme.scss +++ b/src/lib/sort/_sort-theme.scss @@ -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) { }