@lightspeed/design-system-css 3.0.2 → 5.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. package/dist/index.css +0 -747
  2. package/dist/index.css.map +1 -1
  3. package/dist/vend-styles.css +0 -747
  4. package/package.json +1 -1
  5. package/src/vend.ui/components/vd-section/vd-section.scss +1 -1
  6. package/src/vend.ui/styles/global/_misc.scss +5 -2
  7. package/src/vend.ui/styles/global/_non-styles.scss +0 -8
  8. package/src/vend.ui/styles/vend-ui.scss +0 -11
  9. package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer-ns.scss +0 -1
  10. package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer.scss +0 -22
  11. package/src/vend.ui/components/vd-nav-divider/vd-nav-divider.scss +0 -14
  12. package/src/vend.ui/components/vd-nav-item/vd-nav-item.scss +0 -30
  13. package/src/vend.ui/components/vd-sidebar/vd-sidebar-ns.scss +0 -23
  14. package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +0 -123
  15. package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer-ns.scss +0 -6
  16. package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer.scss +0 -92
  17. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +0 -24
  18. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs.scss +0 -123
  19. package/src/vend.ui/components/vd-topbar/vd-topbar-ns.scss +0 -10
  20. package/src/vend.ui/components/vd-topbar/vd-topbar.scss +0 -53
  21. package/src/vend.ui/styles/navi/_non-styles.scss +0 -2
  22. package/src/vend.ui/styles/navi/_nv-account-banner.scss +0 -17
  23. package/src/vend.ui/styles/navi/_nv-notifications-item.scss +0 -15
  24. package/src/vend.ui/styles/navi/_nv-topnav-title.scss +0 -29
  25. package/src/vend.ui/styles/navi/_nv-topnav.scss +0 -121
  26. package/src/vend.ui/styles/navi/_nv-user-sale-data.scss +0 -14
  27. package/src/vend.ui/styles/navi/dialogs/_nv-dialog-drawer.scss +0 -44
  28. package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +0 -85
  29. package/src/vend.ui/styles/navi/dialogs/_nv-user-dialog.scss +0 -44
  30. package/src/vend.ui/styles/navi/navi.scss +0 -11
  31. package/src/vend.ui/styles/navi/non-styles/_mixins.scss +0 -50
  32. package/src/vend.ui/styles/navi/non-styles/_variables.scss +0 -15
@@ -1,29 +0,0 @@
1
- .nv-topnav-title {
2
- display: flex;
3
- align-items: center;
4
- height: 100%;
5
- flex-shrink: 0;
6
- font-size: vd-text-size(body);
7
- font-weight: $vd-font-weight--bold;
8
-
9
- // Hide custom nav titles when navigation translations are being fetched
10
- .nv-tx-loading & {
11
- display: none;
12
- }
13
- }
14
-
15
- .nv-topnav-title-shorthand {
16
- display: none;
17
- }
18
-
19
- // ========= Responsive Breakpoint Styles ========= //
20
-
21
- @include vd-viewport-media-max($vd-breakpoint-medium) {
22
- .nv-topnav-title-shorthand {
23
- display: inline;
24
- }
25
-
26
- .nv-topnav-title-full {
27
- display: none;
28
- }
29
- }
@@ -1,121 +0,0 @@
1
- .nv-topnav-container {
2
- width: 100%;
3
- }
4
-
5
- .nv-topnav-container--hidden {
6
- display: none;
7
- }
8
-
9
- .nv-topnav {
10
- position: relative;
11
- width: 100%;
12
- z-index: 1;
13
-
14
- @media print {
15
- display: none;
16
- }
17
- }
18
-
19
- .nv-topnav-title--banner {
20
- justify-content: center;
21
- flex: 1;
22
-
23
- @include vd-viewport-media-max($vd-breakpoint-xsmall) {
24
- flex: initial;
25
- }
26
- }
27
-
28
- .nv-topnav-header {
29
- min-width: 0;
30
- flex: 1;
31
-
32
- @include vd-viewport-media-max($vd-breakpoint-xsmall) {
33
- &.nv-topnav-header--mobile {
34
- flex: initial;
35
- }
36
- }
37
-
38
- .vd-nav-item-label {
39
- font-size: $nv-header-font-size;
40
- font-weight: $vd-font-weight--bold;
41
- max-width: none;
42
- }
43
-
44
- .vd-nav-item-action {
45
- display: inline-flex;
46
- width: auto;
47
- max-width: 100%;
48
- }
49
-
50
- .vd-nav-item-icon {
51
- font-size: $nv-header-logo-font-size;
52
- }
53
-
54
- // Disabled states for main header
55
- &.vd-nav-item--disabled {
56
- .vd-nav-item-action {
57
- opacity: 1;
58
- }
59
-
60
- .vd-nav-item-icon {
61
- opacity: $vd-topbar-item-default-opactiy;
62
- }
63
- }
64
-
65
- &.nv-topnav-header--mobile {
66
- display: none;
67
- }
68
- }
69
-
70
- .nv-topnav-content {
71
- display: flex;
72
- align-items: center;
73
- justify-content: flex-end;
74
- height: 100%;
75
- align-self: flex-end;
76
- margin-left: auto;
77
- flex: 1;
78
-
79
- @include vd-viewport-media-max($vd-breakpoint-xsmall) {
80
- flex: initial;
81
- }
82
- }
83
-
84
- // ========= Disabled States ========= //
85
-
86
- .nv-topnav--offline {
87
- @include nv-striped-background($nv-topnav-offline-colour);
88
- }
89
-
90
- .nv-topnav--training {
91
- @include nv-striped-background($nv-topnav-training-colour);
92
- }
93
-
94
- // ========= Responsive Breakpoint Styles ========= //
95
-
96
- @include vd-viewport-media-max($vd-breakpoint-large) {
97
- .nv-topnav-header {
98
- display: none;
99
-
100
- &.nv-topnav-header--mobile {
101
- display: flex;
102
- position: relative;
103
-
104
- @include nv-topnav-status-icon(vd-colour(no)) {
105
- left: 33px;
106
- top: 10px;
107
- }
108
-
109
- // Highlight an error within the current sidebar drawer
110
- &.nv-topnav-header--nav-error {
111
- &::after {
112
- transform: scale(1);
113
- }
114
- }
115
-
116
- .vd-nav-item-icon {
117
- font-size: $nv-header-logo-font-size--mobile;
118
- }
119
- }
120
- }
121
- }
@@ -1,14 +0,0 @@
1
- .nv-user-sale-data-header {
2
- display: flex;
3
- justify-content: space-between;
4
- }
5
-
6
- .nv-user-sale-data-heading {
7
- font-weight: $vd-font-weight--bold;
8
- }
9
-
10
- .nv-user-sale-data-total {
11
- font-size: vd-text-size(sub-heading);
12
- font-weight: vd-text-weight(sub-heading);
13
- text-align: right;
14
- }
@@ -1,44 +0,0 @@
1
- .nv-dialog-drawer-top-banner {
2
- background: $vd-topbar-background-color;
3
- height: $vd-topbar-height;
4
- padding: 0;
5
- color: $vd-topbar-font-color;
6
- display: flex;
7
- align-items: center;
8
- justify-content: center;
9
- flex-shrink: 0;
10
-
11
- font-family: $vd-font-lato;
12
- font-size: vd-text-size(sub-heading);
13
- }
14
-
15
- .nv-dialog-drawer-main {
16
- display: flex;
17
- flex-direction: column;
18
- flex: 1;
19
- font-family: $vd-font-lato;
20
- }
21
-
22
- .nv-dialog-drawer-highlight-icon {
23
- color: vd-colour(supplementary--text);
24
- text-align: center;
25
- font-size: 32px;
26
- display: block;
27
- }
28
-
29
- .nv-dialog-drawer-content {
30
- display: flex;
31
- flex-direction: column;
32
- flex: 1;
33
- overflow: auto;
34
- }
35
-
36
- .nv-dialog-drawer-container {
37
- display: flex;
38
- flex-direction: column;
39
- height: 100%;
40
- }
41
-
42
- .nv-dialog-drawer-footer {
43
- background: vd-colour(background);
44
- }
@@ -1,85 +0,0 @@
1
- .nv-notifications--retrieving {
2
- text-align: center;
3
- margin-top: $nv-notifications-list-spacing;
4
- }
5
-
6
- .nv-notifications-list {
7
- list-style: none;
8
- padding: 0;
9
- margin: 0;
10
- max-height: calc(100vh - #{$vd-topbar-height});
11
- }
12
-
13
- .nv-notifications-list-item {
14
- padding: $nv-notifications-list-spacing;
15
- padding-left: $nv-notifications-list-spacing * 2;
16
- font-size: vd-text-size(body);
17
- border-bottom: vd-border(framing);
18
- line-height: $nv-notifications-item-line-height;
19
- flex-shrink: 0;
20
-
21
- &.nv-notifications-list-item--read {
22
- background-color: vd-colour(box);
23
- }
24
-
25
- &.nv-notifications-list-item--unread {
26
- background-color: vd-colour(background);
27
- }
28
- }
29
-
30
- .nv-notifications-list-item-about {
31
- position: relative;
32
- word-wrap: break-word;
33
-
34
- &:before {
35
- content: '';
36
- width: 8px;
37
- height: 8px;
38
- box-sizing: content-box;
39
-
40
- color: vd-colour(keyline);
41
-
42
- border: 1px solid currentColor;
43
- background-color: currentColor;
44
- border-radius: 50%;
45
-
46
- display: block;
47
-
48
- position: absolute;
49
- top: $nv-notifications-list-spacing * 0.5;
50
- left: -$nv-notifications-list-spacing;
51
-
52
- .nv-notifications-list-item--read & {
53
- background-color: transparent;
54
- }
55
-
56
- .nv-notifications-list-item--unread & {
57
- color: vd-colour(do);
58
- }
59
- }
60
- }
61
-
62
- .nv-notifications-list-item-action {
63
- font-size: vd-text-size(body);
64
- margin-top: 20px;
65
- display: inline-block;
66
- }
67
-
68
- .nv-notifications-message-header {
69
- font-size: vd-text-size(sub-heading);
70
- }
71
-
72
- .nv-notifications-message-img {
73
- max-width: 100%;
74
- }
75
-
76
- .nv-dialog-drawer-content--empty {
77
- padding: $nv-notifications-list-spacing;
78
- justify-content: center;
79
- align-items: center;
80
-
81
- // Reset the justification at a set max height so content can be fully scrolled
82
- @media only screen and (max-height: $nv-notifications-content-empty-flex-start-height) {
83
- justify-content: flex-start;
84
- }
85
- }
@@ -1,44 +0,0 @@
1
- $nv-user-dialog-section-border: vd-border(keyline);
2
-
3
- .nv-user-switch-button {
4
- width: 100%;
5
- margin: 0;
6
- transform: translateY(-50%);
7
- }
8
-
9
- .nv-user-dialog-current-user {
10
- background: vd-colour(background);
11
- color: vd-colour(text);
12
- border-bottom: $nv-user-dialog-section-border;
13
- line-height: initial;
14
- }
15
-
16
- .nv-user-dialog-current-user--with-switch-user-button {
17
- padding-top: 0;
18
- }
19
-
20
- .nv-user-display-name {
21
- overflow: hidden;
22
- text-overflow: ellipsis;
23
- width: 100%;
24
- }
25
-
26
- .nv-user-account-type {
27
- text-transform: capitalize;
28
- margin-right: 10px;
29
- font-weight: $vd-font-weight--bold;
30
- }
31
-
32
- .nv-user-account-email {
33
- word-wrap: break-word;
34
- overflow: hidden;
35
- color: vd-colour(text);
36
- }
37
-
38
- .nv-user-dialog-outlet-info {
39
- font-weight: $vd-font-weight--bold;
40
- }
41
-
42
- .nv-user-dialog-content-section {
43
- border-bottom: $nv-user-dialog-section-border;
44
- }
@@ -1,11 +0,0 @@
1
- // Modules
2
- @import 'nv-topnav';
3
- @import 'nv-topnav-title';
4
- @import 'nv-account-banner';
5
- @import 'nv-notifications-item';
6
- @import 'nv-user-sale-data';
7
-
8
- // Dialogs
9
- @import 'dialogs/nv-dialog-drawer';
10
- @import 'dialogs/nv-notifications-dialog';
11
- @import 'dialogs/nv-user-dialog';
@@ -1,50 +0,0 @@
1
- //
2
- // Generates a striped background with the stripes slanted at 60 deg and alternating between the given color and a
3
- // darkened equivalent. Stripes are 15px wide.
4
- //
5
- @mixin nv-striped-background($color) {
6
- background: repeating-linear-gradient(
7
- -60deg,
8
- darken($color, 3),
9
- darken($color, 3) 15px,
10
- $color 15px,
11
- $color 30px
12
- );
13
- }
14
-
15
- @mixin nv-topnav-status-icon($_vd-icon-color: vd-colour(do)) {
16
- &::after {
17
- content: '';
18
- transform: scale(0);
19
- opacity: 1;
20
-
21
- position: absolute;
22
- height: 10px;
23
- width: 10px;
24
-
25
- box-sizing: content-box;
26
- background-color: $_vd-icon-color;
27
- border: 3px solid $vd-topbar-background-color;
28
- border-radius: 50%;
29
-
30
- transition: transform 0.2s ease 0s;
31
-
32
- pointer-events: none;
33
-
34
- @content;
35
- }
36
-
37
- // When either offline or training mode is triggered, the border of the status icon needs to match the new
38
- // backround color
39
- .nv-topnav--offline & {
40
- &::after {
41
- border-color: $nv-topnav-offline-colour;
42
- }
43
- }
44
-
45
- .nv-topnav--training & {
46
- &::after {
47
- border-color: $nv-topnav-training-colour;
48
- }
49
- }
50
- }
@@ -1,15 +0,0 @@
1
- // Top Navigation
2
-
3
- $nv-header-font-size: 15px;
4
- $nv-header-logo-font-size: 42px;
5
- $nv-header-logo-font-size--mobile: 24px;
6
-
7
- // Notifications Side Drawer
8
-
9
- $nv-notifications-list-spacing: 20px;
10
- $nv-notifications-item-line-height: 18px;
11
- $nv-notifications-content-empty-flex-start-height: 500px;
12
-
13
- // Navigation Colours
14
- $nv-topnav-offline-colour: $vd-colour-charcoal-60;
15
- $nv-topnav-training-colour: $vd-colour-blue-60;