summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components/_userNotifications.scss
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/resources/scss/components/_userNotifications.scss')
-rw-r--r--openecomp-ui/resources/scss/components/_userNotifications.scss225
1 files changed, 112 insertions, 113 deletions
diff --git a/openecomp-ui/resources/scss/components/_userNotifications.scss b/openecomp-ui/resources/scss/components/_userNotifications.scss
index 74cafae438..649e636541 100644
--- a/openecomp-ui/resources/scss/components/_userNotifications.scss
+++ b/openecomp-ui/resources/scss/components/_userNotifications.scss
@@ -1,123 +1,122 @@
-
.onboarding-notifications {
- margin-left: 10px;
- .notifications-icon {
- display: flex;
- @extend .clickable;
- .notifications-count {
- color: $white;
- font-size: 11px;
- text-align: center;
- width: 16px;
- height: 16px;
- background-color: $orange;
- border-radius: 50%;
- position: relative;
- right: 7px;
- top: -2px;
- &.hidden-count {
- background-color: transparent;
- color: transparent;
- }
- }
- }
- .onboarding-overlay {
- width: 520px;
- right: 39px;
- margin-top: 18px;
- .arrow-up {
- margin-left: 487px;
+ margin-left: 10px;
+ .notifications-icon {
+ display: flex;
+ @extend .clickable;
+ .notifications-count {
+ color: $white;
+ font-size: 11px;
+ text-align: center;
+ width: 16px;
+ height: 16px;
+ background-color: $orange;
+ border-radius: 50%;
+ position: relative;
+ right: 7px;
+ top: -2px;
+ &.hidden-count {
+ background-color: transparent;
+ color: transparent;
+ }
+ }
}
+ .onboarding-overlay {
+ width: 520px;
+ right: 39px;
+ margin-top: 18px;
+ .arrow-up {
+ margin-left: 487px;
+ }
- .user-notifications {
- .notifications-title {
- color: $blue;
- @extend .heading-5-semibold;
- @extend .text-uppercase !optional;
- padding: 13px 20px 10px 20px;
- border-bottom: 1px solid $tlv-light-gray;
- }
- .notifications-list {
- max-height: 600px;
- overflow-y: auto;
- .notification {
- border-bottom: 1px solid $tlv-light-gray;
- padding: 16px 20px 18px 20px;
- display: flex;
- &.unread {
- background-color: lighten($gray, 38%);
- .item-name {
- display: flex;
- @include base-font-bold;
- }
- .unread-circle-icon {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background-color: $blue;
- align-self: center;
- margin-bottom: 3px;
- margin-left: 9px;
- }
- }
- .notification-data {
- width: 366px;
- margin-right: 30px;
- color: $dark-gray;
- .item-name {
- @extend .body-2-semibold;
- @extend .text-uppercase !optional;
- margin-bottom: 6px;
- }
- .flex-items {
- display: flex;
- margin: 6px 0 11px 0;
- @extend .body-3;
- line-height: 20px;
- @extend .text-uppercase !optional;
- color: $gray;
- .separator {
- border-left: 1px solid $dark-gray;
- margin: 5px 8px;
- }
- }
- .description {
- @extend .body-3;
- margin: 11px 0 8px 0;
- .more-less {
- font-size: $icon-font-size;
+ .user-notifications {
+ .notifications-title {
color: $blue;
- }
- }
- .date {
- font-size: $icon-font-size;
- @include base-font-regular;
- color: $gray;
- margin-top: 8px;
+ @extend .heading-5-semibold;
+ @extend .text-uppercase !optional;
+ padding: 13px 20px 10px 20px;
+ border-bottom: 1px solid $tlv-light-gray;
}
- }
+ .notifications-list {
+ max-height: 600px;
+ overflow-y: auto;
+ .notification {
+ border-bottom: 1px solid $tlv-light-gray;
+ padding: 16px 20px 18px 20px;
+ display: flex;
+ &.unread {
+ background-color: lighten($gray, 38%);
+ .item-name {
+ display: flex;
+ @include base-font-bold;
+ }
+ .unread-circle-icon {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background-color: $blue;
+ align-self: center;
+ margin-bottom: 3px;
+ margin-left: 9px;
+ }
+ }
+ .notification-data {
+ width: 366px;
+ margin-right: 30px;
+ color: $dark-gray;
+ .item-name {
+ @extend .body-2-semibold;
+ @extend .text-uppercase !optional;
+ margin-bottom: 6px;
+ }
+ .flex-items {
+ display: flex;
+ margin: 6px 0 11px 0;
+ @extend .body-3;
+ line-height: 20px;
+ @extend .text-uppercase !optional;
+ color: $gray;
+ .separator {
+ border-left: 1px solid $dark-gray;
+ margin: 5px 8px;
+ }
+ }
+ .description {
+ @extend .body-3;
+ margin: 11px 0 8px 0;
+ .more-less {
+ font-size: $icon-font-size;
+ color: $blue;
+ }
+ }
+ .date {
+ font-size: $icon-font-size;
+ @include base-font-regular;
+ color: $gray;
+ margin-top: 8px;
+ }
+ }
- .notification-action .action-button {
- @extend .clickable;
- width: 74px;
- height: 28px;
- color: $white;
- background-color: $blue;
- border-radius: 2px;
- text-align: center;
- line-height: 2;
- margin-top: 4px;
- &.active {
- background-color: #0091c7;
- border: solid 1px #006186;
- }
- &:hover {
- background-color: #1ec2ff;
- border: solid 1px #0091c8;
+ .notification-action .action-button {
+ @extend .clickable;
+ width: 74px;
+ height: 28px;
+ color: $white;
+ background-color: $blue;
+ border-radius: 2px;
+ text-align: center;
+ line-height: 2;
+ margin-top: 4px;
+ &.active {
+ background-color: $action-button-active-bg;
+ border: solid 1px $action-button-active-border;
+ }
+ &:hover {
+ background-color: $action-button-hover-bg;
+ border: solid 1px $action-button-hover-border;
+ }
+ }
+ }
}
- }
}
- }
}
- }
}