Skip to content
Permalink
Browse files

feat(notifications): Updated styling of the reminder notification (#2…

…776)
  • Loading branch information...
ishakasliwal committed Sep 22, 2017
1 parent 485941c commit 9cbb18ac7b00d0f0786eba8cf23bfb912d05b17f
@@ -117,6 +117,12 @@ props:
COLOR_BACKGROUND_NOTIFICATION_NEW:
value: '{!PALETTE_GRAY_2}'
comment: Background color for a new notification list item.
COLOR_BACKGROUND_REMINDER:
value: '{!LINK_WATER}'
comment: Background color for reminder notification
COLOR_BACKGROUND_REMINDER_HOVER:
value: '{!WHITE}'
comment: Background color for reminder notification on hover
COLOR_BACKGROUND_ORG_SWITCHER_ARROW:
value: '{!DEEP_COVE}'
comment: Stage left org switcher dropdown arrow background color.
@@ -164,7 +164,7 @@ props:
value: '{!WHITE}'
comment: These borders create the faux checkmark when the checkbox toggle is in the checked state.
COLOR_BORDER_REMINDER:
value: '{!CADET_BLUE}'
value: '{!PALETTE_GRAY_4}'
comment: Border color on notification reminders.
COLOR_STROKE_BRAND:
value: '{!SCIENCE_BLUE}'
@@ -38,7 +38,7 @@ props:
value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}'
comment: Shadow for drop down.
SHADOW_REMINDER:
value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_NONE} {!OFFSET_NONE} {!BLACK_TRANSPARENT_10}'
value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_20}'
comment: Shadow for notifications that should be elevated above other components but under modals.
SHADOW_HEADER:
value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!BLACK_TRANSPARENT_07}'
@@ -117,6 +117,12 @@ props:
COLOR_BACKGROUND_NOTIFICATION_NEW:
value: '{!PALETTE_COOL_GRAY_2}'
comment: Background color for a new notification list item.
COLOR_BACKGROUND_REMINDER:
value: '{!LINK_WATER}'
comment: Background color for reminder notification
COLOR_BACKGROUND_REMINDER_HOVER:
value: '{!WHITE}'
comment: Background color for reminder notification on hover
COLOR_BACKGROUND_ORG_SWITCHER_ARROW:
value: '{!DEEP_COVE}'
comment: Stage left org switcher dropdown arrow background color.
@@ -164,7 +164,7 @@ props:
value: '{!WHITE}'
comment: These borders create the faux checkmark when the checkbox toggle is in the checked state.
COLOR_BORDER_REMINDER:
value: '{!CADET_BLUE}'
value: '{!PALETTE_GRAY_4}'
comment: Border color on notification reminders.
COLOR_STROKE_BRAND:
value: '{!SCIENCE_BLUE}'
@@ -38,7 +38,7 @@ props:
value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}'
comment: Shadow for drop down.
SHADOW_REMINDER:
value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_NONE} {!OFFSET_NONE} {!BLACK_TRANSPARENT_10}'
value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_20}'
comment: Shadow for notifications that should be elevated above other components but under modals.
SHADOW_HEADER:
value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!BLACK_TRANSPARENT_07}'
@@ -31,7 +31,7 @@
box-shadow: $shadow-reminder;

+ .slds-notification {
margin-top: $spacing-small;
margin-top: $spacing-x-small;
}

&:nth-of-type(4) {
@@ -60,14 +60,14 @@
* @restrict .slds-notification__body a
*/
.slds-notification__target {
padding: $spacing-small $spacing-large $spacing-medium $spacing-small;
padding: $spacing-small;
border-radius: $border-radius-medium;
background-color: $color-background-alt;
background-color: $color-background-reminder;
color: $color-text-default;

&:hover,
&:focus {
background-color: $color-background;
background-color: $color-background-reminder-hover;
text-decoration: none;
}
}

0 comments on commit 9cbb18a

Please sign in to comment.
You can’t perform that action at this time.