ode-csslib-openent-na 3.4.13-develop-integration.202607191447 → 3.4.13-develop-integration.202607191539

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,3 +6,4 @@
6
6
  @import "styles/magneto";
7
7
  @import "styles/mediacentre";
8
8
  @import "styles/navbar";
9
+ @import "styles/header-v2";
@@ -0,0 +1,77 @@
1
+ // Header v2 (uiOverrides['layout.header'] = 'v2') — na only.
2
+ // Layers on top of the shared .header rules (scss/layouts/_header.scss),
3
+ // which stay untouched so every other skin/override keeps the v1 look.
4
+
5
+ .header-v2 .navbar {
6
+ background: $white;
7
+ box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
8
+ border-bottom: 2px solid;
9
+ border-image-slice: 1;
10
+ border-image-source: linear-gradient(67.55deg, #ffc403, #fc94ff);
11
+ }
12
+
13
+ .header-v2 .navbar-brand .logo {
14
+ display: none;
15
+ }
16
+
17
+ @media (min-width: 800px) {
18
+ .header-v2 .navbar-brand .logo {
19
+ display: inline-block;
20
+ height: 20px;
21
+ }
22
+ }
23
+
24
+ .header-v2 .navbar .navbar-nav {
25
+ gap: 8px;
26
+ justify-content: space-between;
27
+ margin-right: 0 !important;
28
+ }
29
+
30
+ @media (min-width: 800px) {
31
+ .header-v2 .navbar .navbar-nav {
32
+ gap: 24px;
33
+ justify-content: flex-end;
34
+ }
35
+ }
36
+
37
+ .header-v2 .navbar .nav-link .badge {
38
+ background-color: #dc0404 !important;
39
+ border-radius: 50rem;
40
+ right: -16px;
41
+ }
42
+
43
+ @media (min-width: 800px) {
44
+ .header-v2 .navbar .nav-link .badge {
45
+ right: -12px;
46
+ }
47
+ }
48
+
49
+ .header-v2 .avatar {
50
+ --ode-avatar-size: 24px;
51
+ --ode-avatar-svg-size: 18px;
52
+ }
53
+
54
+ @media (min-width: 800px) {
55
+ .header-v2 .avatar {
56
+ --ode-avatar-size: 32px;
57
+ --ode-avatar-svg-size: 24px;
58
+ }
59
+ }
60
+
61
+ .header-v2 .notification-button {
62
+ display: inline-flex;
63
+ align-items: center;
64
+ justify-content: center;
65
+ padding: 8px;
66
+ border-radius: 8px;
67
+ background-color: transparent;
68
+ transition: background-color 0.2s ease-in-out;
69
+
70
+ &:hover {
71
+ background-color: #f7f7f7;
72
+ }
73
+
74
+ &:active {
75
+ background-color: #f2f2f2;
76
+ }
77
+ }
@@ -18,7 +18,7 @@
18
18
  ~
19
19
  -->
20
20
 
21
- <header class="header no-1d" ng-controller="Account">
21
+ <header class="header header-v2 no-1d" ng-controller="Account">
22
22
  <nav class="navbar navbar-expand-md">
23
23
  <div class="container-fluid">
24
24
  <a class="navbar-brand d-none d-md-block" href="/timeline/timeline">
@@ -116,7 +116,7 @@
116
116
  </li>
117
117
 
118
118
  <li class="nav-item">
119
- <button type="button" class="nav-link btn btn-naked" aria-label="notifications">
119
+ <button type="button" class="nav-link btn btn-naked notification-button" aria-label="notifications">
120
120
  <svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
121
121
  <path stroke="#1C1C73" stroke-miterlimit="10" stroke-width="2.667" d="M13.363 5.348a2.726 2.726 0 1 1 5.383-.622q0 .423-.12.808M19.886 25.184a3.919 3.919 0 1 1-7.559-.26"></path>
122
122
  <path stroke="#1C1C73" stroke-miterlimit="10" stroke-width="2.667" d="M28.62 18.901H4.058v6.682h24.56z"></path>