Update quote reply color in iOS theme

This commit is contained in:
Josh Perez 2020-04-01 12:33:16 -07:00 committed by Scott Nonnenberg
parent 12c2017b2e
commit efd12028f0
3 changed files with 34 additions and 24 deletions

View file

@ -232,9 +232,13 @@
margin: 0;
border-left-style: none;
@include ios-dark-theme {
background-color: $ultramarine-brand-dark;
border-left-color: $color-black;
}
@include ios-theme {
background-color: $ultramarine-ui-light-alpha-25;
border-left-color: $ultramarine-ui-light;
background-color: $color-ios-blue-tint;
border-left-color: $color-white;
}
}

View file

@ -1626,13 +1626,13 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
}
// Note: both of these override all of the specific color classes below
@include ios-theme {
border-left-color: $color-white;
background-color: $color-white-alpha-60;
}
@include ios-dark-theme {
background-color: $ultramarine-brand-dark;
border-left-color: $color-black;
background-color: $color-conversation-blue-shade;
}
@include ios-theme {
background-color: $color-ios-blue-tint;
border-left-color: $color-white;
}
}
@ -1668,12 +1668,12 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
// Note: both of these override all of the specific color classes below
@include ios-theme {
background-color: $ultramarine-ui-light-alpha-25;
border-left-color: $ultramarine-ui-light;
background-color: $color-ios-blue-tint;
border-left-color: $color-white;
}
@include ios-dark-theme {
background-color: $color-conversation-blue-shade;
border-left-color: $ultramarine-ui-dark;
background-color: $ultramarine-ui-dark;
border-left-color: $color-black;
}
}
@each $color, $value in $conversation-colors-tint {
@ -1942,6 +1942,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
}
.module-quote__reference-warning {
color: $color-gray-90;
height: 26px;
display: flex;
flex-direction: row;
@ -1957,17 +1958,20 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
background-color: $color-white-alpha-20;
}
@include ios-theme {
background-color: $ultramarine-ui-light-tint-alpha-50;
background-color: $color-ios-ref-warning-light;
}
@include ios-dark-theme {
background-color: $color-white-alpha-40;
background-color: $color-ios-ref-warning-dark;
}
}
.module-quote__reference-warning--incoming {
color: $color-gray-90;
@include ios-theme {
background-color: $color-ios-ref-warning-light;
}
@include ios-dark-theme {
color: $color-gray-15;
background-color: $ultramarine-ui-light-alpha-50;
background-color: $color-ios-ref-warning-dark;
}
}
@ -1981,14 +1985,20 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
@include dark-theme {
@include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-25);
}
@include ios-theme {
@include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-90);
}
@include ios-dark-theme {
@include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-90);
}
}
.module-quote__reference-warning__icon--incoming {
@include ios-theme {
@include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-90);
}
@include ios-dark-theme {
@include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-15);
@include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-90);
}
}
@ -2010,7 +2020,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
.module-quote__reference-warning__text--incoming {
@include ios-dark-theme {
color: $color-gray-05;
color: $color-gray-90;
}
}
@ -7356,7 +7366,7 @@ button.module-image__border-overlay:focus {
background-color: $ultramarine-ui-light;
&:hover {
background-color: $color-ios-blue-shade;
background-color: $ultramarine-brand-dark;
}
}

View file

@ -57,7 +57,8 @@ $color-steel: #6b6b78;
$color-ios-blue-tint: #b0c8f9;
// Used for scroll down button hover state when it has new messages
$color-ios-blue-shade: #1851b4;
$color-ios-ref-warning-light: #d2def8;
$color-ios-ref-warning-dark: #7b97cd;
$color-crimson-tint: #eda6ae;
$color-vermilion-tint: #eba78e;
@ -176,11 +177,6 @@ $color-white-alpha-40: rgba($color-white, 0.4);
// Used in tap-to-view error states
$color-deep-red: #ff261f;
// Used in iOS quote composition and reference warnings
$ultramarine-ui-light-alpha-25: rgba($ultramarine-ui-light, 0.25);
$ultramarine-ui-light-alpha-50: rgba($ultramarine-ui-light, 0.5);
$ultramarine-ui-light-tint-alpha-50: rgba($color-ios-blue-tint, 0.5);
// -- A few layout variables used cross-file
$left-pane-width: 320px;