blob: 649e63654143a01ebf994bcb82760a20afd723a0 [file] [log] [blame]
talig8e9c0652017-12-20 14:30:43 +02001.onboarding-notifications {
Einav Weiss Keidar1801b242018-08-13 16:19:46 +03002 margin-left: 10px;
3 .notifications-icon {
4 display: flex;
5 @extend .clickable;
6 .notifications-count {
talig8e9c0652017-12-20 14:30:43 +02007 color: $white;
Einav Weiss Keidar1801b242018-08-13 16:19:46 +03008 font-size: 11px;
talig8e9c0652017-12-20 14:30:43 +02009 text-align: center;
Einav Weiss Keidar1801b242018-08-13 16:19:46 +030010 width: 16px;
11 height: 16px;
12 background-color: $orange;
13 border-radius: 50%;
14 position: relative;
15 right: 7px;
16 top: -2px;
17 &.hidden-count {
18 background-color: transparent;
19 color: transparent;
talig8e9c0652017-12-20 14:30:43 +020020 }
talig8e9c0652017-12-20 14:30:43 +020021 }
talig8e9c0652017-12-20 14:30:43 +020022 }
Einav Weiss Keidar1801b242018-08-13 16:19:46 +030023 .onboarding-overlay {
24 width: 520px;
25 right: 39px;
26 margin-top: 18px;
27 .arrow-up {
28 margin-left: 487px;
29 }
30
31 .user-notifications {
32 .notifications-title {
33 color: $blue;
34 @extend .heading-5-semibold;
35 @extend .text-uppercase !optional;
36 padding: 13px 20px 10px 20px;
37 border-bottom: 1px solid $tlv-light-gray;
38 }
39 .notifications-list {
40 max-height: 600px;
41 overflow-y: auto;
42 .notification {
43 border-bottom: 1px solid $tlv-light-gray;
44 padding: 16px 20px 18px 20px;
45 display: flex;
46 &.unread {
47 background-color: lighten($gray, 38%);
48 .item-name {
49 display: flex;
50 @include base-font-bold;
51 }
52 .unread-circle-icon {
53 width: 8px;
54 height: 8px;
55 border-radius: 50%;
56 background-color: $blue;
57 align-self: center;
58 margin-bottom: 3px;
59 margin-left: 9px;
60 }
61 }
62 .notification-data {
63 width: 366px;
64 margin-right: 30px;
65 color: $dark-gray;
66 .item-name {
67 @extend .body-2-semibold;
68 @extend .text-uppercase !optional;
69 margin-bottom: 6px;
70 }
71 .flex-items {
72 display: flex;
73 margin: 6px 0 11px 0;
74 @extend .body-3;
75 line-height: 20px;
76 @extend .text-uppercase !optional;
77 color: $gray;
78 .separator {
79 border-left: 1px solid $dark-gray;
80 margin: 5px 8px;
81 }
82 }
83 .description {
84 @extend .body-3;
85 margin: 11px 0 8px 0;
86 .more-less {
87 font-size: $icon-font-size;
88 color: $blue;
89 }
90 }
91 .date {
92 font-size: $icon-font-size;
93 @include base-font-regular;
94 color: $gray;
95 margin-top: 8px;
96 }
97 }
98
99 .notification-action .action-button {
100 @extend .clickable;
101 width: 74px;
102 height: 28px;
103 color: $white;
104 background-color: $blue;
105 border-radius: 2px;
106 text-align: center;
107 line-height: 2;
108 margin-top: 4px;
109 &.active {
110 background-color: $action-button-active-bg;
111 border: solid 1px $action-button-active-border;
112 }
113 &:hover {
114 background-color: $action-button-hover-bg;
115 border: solid 1px $action-button-hover-border;
116 }
117 }
118 }
119 }
120 }
121 }
talig8e9c0652017-12-20 14:30:43 +0200122}