@lightspeed/design-system-css 4.0.0 → 5.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.css +0 -725
- package/dist/index.css.map +1 -1
- package/dist/vend-styles.css +0 -725
- package/package.json +1 -1
- package/src/vend.ui/components/vd-section/vd-section.scss +1 -1
- package/src/vend.ui/styles/global/_misc.scss +5 -2
- package/src/vend.ui/styles/global/_non-styles.scss +0 -7
- package/src/vend.ui/styles/vend-ui.scss +0 -10
- package/src/vend.ui/components/vd-nav-divider/vd-nav-divider.scss +0 -14
- package/src/vend.ui/components/vd-nav-item/vd-nav-item.scss +0 -30
- package/src/vend.ui/components/vd-sidebar/vd-sidebar-ns.scss +0 -23
- package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +0 -123
- package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer-ns.scss +0 -6
- package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer.scss +0 -92
- package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +0 -24
- package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs.scss +0 -123
- package/src/vend.ui/components/vd-topbar/vd-topbar-ns.scss +0 -10
- package/src/vend.ui/components/vd-topbar/vd-topbar.scss +0 -53
- package/src/vend.ui/styles/navi/_non-styles.scss +0 -2
- package/src/vend.ui/styles/navi/_nv-account-banner.scss +0 -17
- package/src/vend.ui/styles/navi/_nv-notifications-item.scss +0 -15
- package/src/vend.ui/styles/navi/_nv-topnav-title.scss +0 -29
- package/src/vend.ui/styles/navi/_nv-topnav.scss +0 -121
- package/src/vend.ui/styles/navi/_nv-user-sale-data.scss +0 -14
- package/src/vend.ui/styles/navi/dialogs/_nv-dialog-drawer.scss +0 -44
- package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +0 -85
- package/src/vend.ui/styles/navi/dialogs/_nv-user-dialog.scss +0 -44
- package/src/vend.ui/styles/navi/navi.scss +0 -11
- package/src/vend.ui/styles/navi/non-styles/_mixins.scss +0 -50
- package/src/vend.ui/styles/navi/non-styles/_variables.scss +0 -15
package/package.json
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"name":"@lightspeed/design-system-css","version":"
|
1
|
+
{"name":"@lightspeed/design-system-css","version":"5.0.0","description":"Lightspeed's Design System in CSS","repository":"https://github.com/lightspeed/helios.git","author":"Lightspeed Commerce Inc.","license":"SEE LICENSE IN LICENSE.md","main":"dist/index.css","publishConfig":{"access":"public"},"files":["src","dist"],"scripts":{"prebuild":"rm -rf dist","build":"yarn lint && yarn build:css && yarn build:retrocompatibility","build:css":"sass --load-path=../../node_modules -q src/index.scss:dist/index.css","build:retrocompatibility":"cp dist/index.css dist/vend-styles.css","watch":"yarn lint && yarn build:css --watch","lint":"yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"},"dependencies":{"@lightspeed/design-system-tokens":"^1.1.0"},"devDependencies":{"@types/node":"^16.11.2","sass":"~1.45.2","stylelint":"^13.5.0","stylelint-scss":"^3.17.2","ts-node":"^10.3.1"}}
|
@@ -9,6 +9,9 @@ $vd-shadow-blur: 3px !default;
|
|
9
9
|
$vd-shadow-spread: 2px !default;
|
10
10
|
$vd-box-shadow: 0 4px 10px vd-colour(shadow);
|
11
11
|
|
12
|
-
//
|
13
|
-
$vd-
|
12
|
+
// Shared navi non-styles
|
13
|
+
$vd-topbar-height: 50px;
|
14
14
|
$vd-nav-width: 230px;
|
15
|
+
$vd-sidebar-drawer-desktop-width: 176px;
|
16
|
+
$vd-sidebar-drawer-item-font-size: 15px;
|
17
|
+
$vd-sidebar-drawer-item-padding-x: 22px;
|
@@ -53,9 +53,6 @@
|
|
53
53
|
@import '../../components/vd-section/vd-section-ns';
|
54
54
|
@import '../../components/vd-select/vd-select-ns';
|
55
55
|
@import '../../components/vd-section-back/vd-section-back-ns';
|
56
|
-
@import '../../components/vd-sidebar/vd-sidebar-ns';
|
57
|
-
@import '../../components/vd-sidebar-drawer/vd-sidebar-drawer-ns';
|
58
|
-
@import '../../components/vd-sidebar-tabs/vd-sidebar-tabs-ns';
|
59
56
|
@import '../../components/vd-status-icon/vd-status-icon-ns';
|
60
57
|
@import '../../components/vd-suggestion/vd-suggestion-list-ns';
|
61
58
|
@import '../../components/vd-switch/vd-switch-ns';
|
@@ -63,10 +60,6 @@
|
|
63
60
|
@import '../../components/vd-tabs/vd-tabs-ns';
|
64
61
|
@import '../../components/vd-toast-notification/vd-toast-notification-ns';
|
65
62
|
@import '../../components/vd-tooltip/vd-tooltip-ns';
|
66
|
-
@import '../../components/vd-topbar/vd-topbar-ns';
|
67
63
|
@import '../../components/vd-hero/vd-hero-ns';
|
68
64
|
@import '../../components/vd-promo/vd-promo-ns';
|
69
65
|
@import '../../components/vd-settings/vd-settings-ns';
|
70
|
-
|
71
|
-
// Navi non-style variables and mixins
|
72
|
-
@import '../navi/non-styles';
|
@@ -57,8 +57,6 @@
|
|
57
57
|
@import '../components/vd-loader/vd-loader';
|
58
58
|
@import '../components/vd-main-content/vd-main-content';
|
59
59
|
@import '../components/vd-modals-container/vd-modals-container';
|
60
|
-
@import '../components/vd-nav-divider/vd-nav-divider';
|
61
|
-
@import '../components/vd-nav-item/vd-nav-item';
|
62
60
|
@import '../components/vd-overlay/vd-overlay';
|
63
61
|
@import '../components/vd-p/vd-p';
|
64
62
|
@import '../components/vd-panel/vd-panel';
|
@@ -71,9 +69,6 @@
|
|
71
69
|
@import '../components/vd-section/vd-section';
|
72
70
|
@import '../components/vd-section-back/vd-section-back';
|
73
71
|
@import '../components/vd-segcontrol/vd-segcontrol';
|
74
|
-
@import '../components/vd-sidebar/vd-sidebar';
|
75
|
-
@import '../components/vd-sidebar-drawer/vd-sidebar-drawer';
|
76
|
-
@import '../components/vd-sidebar-tabs/vd-sidebar-tabs';
|
77
72
|
@import '../components/vd-splash/vd-splash';
|
78
73
|
@import '../components/vd-status-icon/vd-status-icon';
|
79
74
|
@import '../components/vd-suggestion/vd-suggestion-list';
|
@@ -83,7 +78,6 @@
|
|
83
78
|
@import '../components/vd-text/vd-text';
|
84
79
|
@import '../components/vd-toast-notification/vd-toast-notification';
|
85
80
|
@import '../components/vd-tooltip/vd-tooltip';
|
86
|
-
@import '../components/vd-topbar/vd-topbar';
|
87
81
|
@import '../components/vd-visibility/vd-visibility';
|
88
82
|
@import '../components/vd-next-stepper/vd-next-stepper';
|
89
83
|
@import '../components/vd-settings/vd-settings';
|
@@ -93,7 +87,3 @@
|
|
93
87
|
|
94
88
|
// Must be last items in the style sheet
|
95
89
|
@import 'global/spacing/spacing-helpers';
|
96
|
-
|
97
|
-
// Navi styles
|
98
|
-
// !! NOTE: Please keep @import navi styles AT THE BOTTOM to avoid nav UI issue
|
99
|
-
@import 'navi/navi';
|
@@ -1,30 +0,0 @@
|
|
1
|
-
.vd-nav-item {
|
2
|
-
box-sizing: border-box;
|
3
|
-
height: 100%;
|
4
|
-
}
|
5
|
-
|
6
|
-
.vd-nav-item-action {
|
7
|
-
display: flex;
|
8
|
-
align-items: center;
|
9
|
-
|
10
|
-
box-sizing: border-box;
|
11
|
-
width: 100%;
|
12
|
-
height: 100%;
|
13
|
-
|
14
|
-
color: inherit;
|
15
|
-
|
16
|
-
// Overrides any base anchor styles
|
17
|
-
&:active,
|
18
|
-
&:focus,
|
19
|
-
&:hover {
|
20
|
-
color: inherit;
|
21
|
-
}
|
22
|
-
}
|
23
|
-
|
24
|
-
.vd-nav-item--disabled {
|
25
|
-
cursor: not-allowed;
|
26
|
-
|
27
|
-
.vd-nav-item-action {
|
28
|
-
pointer-events: none;
|
29
|
-
}
|
30
|
-
}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
$vd-sidebar-base-z-index: $vd-z-index-navigation-base;
|
2
|
-
$vd-sidebar-modal-z-index: $vd-modals-z-index + 1;
|
3
|
-
$vd-sidebar-modal-close-base-offset: 10px;
|
4
|
-
$vd-sidebar-modal-close-right-offset: -($vd-dialog-close-width + $vd-sidebar-modal-close-base-offset);
|
5
|
-
|
6
|
-
$vd-sidebar-content-box-shadow-offset-x: 1px;
|
7
|
-
$vd-sidebar-tabs-mobile-width: 85px;
|
8
|
-
$vd-sidebar-drawer-mobile-width: 145px;
|
9
|
-
|
10
|
-
$vd-sidebar-width: 240px;
|
11
|
-
|
12
|
-
@mixin vd-sidebar-active-indicator() {
|
13
|
-
position: relative;
|
14
|
-
&::before {
|
15
|
-
content: '';
|
16
|
-
position: absolute;
|
17
|
-
top: 0;
|
18
|
-
bottom: 0;
|
19
|
-
right: 0;
|
20
|
-
width: 4px;
|
21
|
-
background-color: vd-colour(go);
|
22
|
-
}
|
23
|
-
}
|
@@ -1,123 +0,0 @@
|
|
1
|
-
@mixin vd-sidebar-faux-column-bg($tabs-width, $drawer-width) {
|
2
|
-
background: linear-gradient(
|
3
|
-
to right,
|
4
|
-
$vd-sidebar-tabs-background-color 0,
|
5
|
-
$vd-sidebar-tabs-background-color $tabs-width,
|
6
|
-
$vd-sidebar-drawer-background-color $tabs-width,
|
7
|
-
$vd-sidebar-drawer-background-color $drawer-width
|
8
|
-
);
|
9
|
-
}
|
10
|
-
|
11
|
-
// The sidebar contents can be hidden, if so we shouldn't show the sidebar
|
12
|
-
.vd-sidebar:empty {
|
13
|
-
display: none;
|
14
|
-
}
|
15
|
-
|
16
|
-
.vd-sidebar {
|
17
|
-
display: flex;
|
18
|
-
position: relative;
|
19
|
-
|
20
|
-
flex-shrink: 0;
|
21
|
-
height: calc(100% - #{$vd-topbar-height});
|
22
|
-
box-sizing: border-box;
|
23
|
-
font-family: $vd-font-primary;
|
24
|
-
line-height: normal;
|
25
|
-
max-width: $vd-sidebar-width;
|
26
|
-
|
27
|
-
transform: translateX(0);
|
28
|
-
transition: transform 0.2s ease-in-out;
|
29
|
-
z-index: $vd-sidebar-base-z-index;
|
30
|
-
|
31
|
-
.vd-sidebar-modal-close {
|
32
|
-
display: none;
|
33
|
-
top: $vd-sidebar-modal-close-base-offset;
|
34
|
-
right: $vd-sidebar-modal-close-right-offset;
|
35
|
-
}
|
36
|
-
|
37
|
-
.vd-sidebar-tabs {
|
38
|
-
height: auto;
|
39
|
-
}
|
40
|
-
|
41
|
-
.vd-sidebar-drawer {
|
42
|
-
height: auto;
|
43
|
-
}
|
44
|
-
|
45
|
-
@media print {
|
46
|
-
display: none;
|
47
|
-
}
|
48
|
-
|
49
|
-
// Required so banner does not appear over the top of the sidenav when its toggled
|
50
|
-
// on smaller devices
|
51
|
-
@include vd-viewport-media-max($vd-breakpoint-large) {
|
52
|
-
z-index: $vd-z-index-popover-base + 2;
|
53
|
-
}
|
54
|
-
}
|
55
|
-
|
56
|
-
.vd-sidebar-content {
|
57
|
-
@include vd-sidebar-faux-column-bg(
|
58
|
-
$vd-sidebar-tabs-desktop-width,
|
59
|
-
$vd-sidebar-drawer-desktop-width
|
60
|
-
);
|
61
|
-
width: auto;
|
62
|
-
overflow-y: auto;
|
63
|
-
overflow-x: hidden;
|
64
|
-
height: 100%;
|
65
|
-
display: flex;
|
66
|
-
}
|
67
|
-
|
68
|
-
.vd-sidebar--pad-drawer {
|
69
|
-
padding-right: $vd-sidebar-drawer-desktop-width;
|
70
|
-
}
|
71
|
-
|
72
|
-
// ========= Body Class Sidenav Modal State ========= //
|
73
|
-
|
74
|
-
.nv-display-sidenav-modal {
|
75
|
-
.vd-sidebar {
|
76
|
-
z-index: $vd-sidebar-modal-z-index;
|
77
|
-
|
78
|
-
.vd-sidebar-modal-close {
|
79
|
-
display: flex;
|
80
|
-
}
|
81
|
-
}
|
82
|
-
}
|
83
|
-
|
84
|
-
// ========= Responsive Breakpoint Styles ========= //
|
85
|
-
|
86
|
-
@include vd-viewport-media-max($vd-breakpoint-large) {
|
87
|
-
.vd-sidebar {
|
88
|
-
position: absolute;
|
89
|
-
left: 0;
|
90
|
-
height: 100%;
|
91
|
-
transform: translateX(calc(-100% - #{$vd-sidebar-content-box-shadow-offset-x}));
|
92
|
-
}
|
93
|
-
|
94
|
-
.nv-display-sidenav-modal {
|
95
|
-
.vd-sidebar {
|
96
|
-
transform: translateX(0);
|
97
|
-
}
|
98
|
-
}
|
99
|
-
|
100
|
-
.vd-sidebar--pad-drawer {
|
101
|
-
padding-right: 0;
|
102
|
-
}
|
103
|
-
}
|
104
|
-
|
105
|
-
@include vd-viewport-media-min($vd-breakpoint-xlarge-min) {
|
106
|
-
// The following styles are required to allow the sidenav modal overlay page content when no drawer is displayed
|
107
|
-
// This only applies to the nav at large desktop size
|
108
|
-
.vd-sidebar--no-drawer {
|
109
|
-
width: $vd-sidebar-tabs-desktop-width;
|
110
|
-
}
|
111
|
-
|
112
|
-
.nv-display-sidenav-modal {
|
113
|
-
.vd-sidebar--no-drawer {
|
114
|
-
.vd-sidebar-content {
|
115
|
-
position: absolute;
|
116
|
-
}
|
117
|
-
|
118
|
-
.vd-sidebar-modal-close {
|
119
|
-
right: $vd-sidebar-modal-close-right-offset - $vd-sidebar-drawer-desktop-width;
|
120
|
-
}
|
121
|
-
}
|
122
|
-
}
|
123
|
-
}
|
@@ -1,92 +0,0 @@
|
|
1
|
-
@keyframes nv-sidebar-drawer-loader {
|
2
|
-
0% {
|
3
|
-
background-color: vd-rgba(vd-colour(nav-side-tabs-rgb), 0.1);
|
4
|
-
}
|
5
|
-
100% {
|
6
|
-
background-color: vd-rgba(vd-colour(nav-side-tabs-rgb), 1);
|
7
|
-
}
|
8
|
-
}
|
9
|
-
|
10
|
-
.vd-sidebar-drawer {
|
11
|
-
display: flex;
|
12
|
-
flex-direction: column;
|
13
|
-
flex-shrink: 0;
|
14
|
-
width: $vd-sidebar-drawer-desktop-width;
|
15
|
-
height: 100%;
|
16
|
-
background-color: $vd-sidebar-drawer-background-color;
|
17
|
-
border-right: 1px solid vd-colour(background);
|
18
|
-
box-sizing: border-box;
|
19
|
-
padding-top: $vd-sidebar-drawer-item-font-size;
|
20
|
-
padding-bottom: $vd-sidebar-drawer-item-font-size;
|
21
|
-
|
22
|
-
.vd-nav-item {
|
23
|
-
width: 100%;
|
24
|
-
height: auto;
|
25
|
-
color: vd-colour(text);
|
26
|
-
font-weight: $vd-font-weight--regular;
|
27
|
-
|
28
|
-
&:hover {
|
29
|
-
background: vd-colour(go-highlight);
|
30
|
-
}
|
31
|
-
}
|
32
|
-
|
33
|
-
.vd-nav-item-action {
|
34
|
-
padding: $vd-sidebar-drawer-item-padding-y $vd-sidebar-drawer-item-padding-x;
|
35
|
-
}
|
36
|
-
|
37
|
-
.vd-nav-item--active {
|
38
|
-
@include vd-sidebar-active-indicator();
|
39
|
-
.vd-nav-item-action {
|
40
|
-
color: vd-colour(go);
|
41
|
-
}
|
42
|
-
}
|
43
|
-
|
44
|
-
.vd-nav-item--pending {
|
45
|
-
color: vd-colour(supplementary--text);
|
46
|
-
}
|
47
|
-
|
48
|
-
// @todo Make this a mixin for all disabled things.
|
49
|
-
.vd-nav-item--disabled {
|
50
|
-
opacity: 0.35;
|
51
|
-
filter: grayscale(100%);
|
52
|
-
|
53
|
-
&:hover {
|
54
|
-
background-color: inherit;
|
55
|
-
}
|
56
|
-
}
|
57
|
-
|
58
|
-
.vd-nav-item-label {
|
59
|
-
font-size: $vd-sidebar-drawer-item-font-size;
|
60
|
-
}
|
61
|
-
|
62
|
-
.nv-tx-loading & {
|
63
|
-
.vd-nav-item {
|
64
|
-
pointer-events: none;
|
65
|
-
}
|
66
|
-
|
67
|
-
.vd-nav-item--active::before {
|
68
|
-
display: none;
|
69
|
-
}
|
70
|
-
|
71
|
-
.vd-nav-item-label {
|
72
|
-
animation: nv-sidebar-drawer-loader 1s linear infinite alternate;
|
73
|
-
color: transparent;
|
74
|
-
display: block;
|
75
|
-
width: 100%;
|
76
|
-
height: 18px;
|
77
|
-
}
|
78
|
-
|
79
|
-
.register-info {
|
80
|
-
margin: 0 auto;
|
81
|
-
animation: nv-sidebar-drawer-loader 1s linear infinite alternate;
|
82
|
-
|
83
|
-
&::before {
|
84
|
-
display: none;
|
85
|
-
}
|
86
|
-
|
87
|
-
> * {
|
88
|
-
visibility: hidden;
|
89
|
-
}
|
90
|
-
}
|
91
|
-
}
|
92
|
-
}
|
@@ -1,24 +0,0 @@
|
|
1
|
-
@use 'sass:math';
|
2
|
-
|
3
|
-
$vd-sidebar-tabs-animation-duration: 200ms;
|
4
|
-
|
5
|
-
$vd-sidebar-tabs-background-color: vd-colour(nav-side-tabs);
|
6
|
-
|
7
|
-
$vd-sidebar-tabs-desktop-width: 64px;
|
8
|
-
$vd-sidebar-tabs-expanded-width: 240px;
|
9
|
-
|
10
|
-
$vd-sidebar-tab-height: 44px !default;
|
11
|
-
$vd-sidebar-tab-font-colour: vd-colour(text) !default;
|
12
|
-
$vd-sidebar-tab-font-size: 15px !default;
|
13
|
-
$vd-sidebar-tab-icon-font-size: 20px !default;
|
14
|
-
$vd-sidebar-tab-padding-x: math.div(
|
15
|
-
$vd-sidebar-tabs-desktop-width - $vd-sidebar-tab-icon-font-size,
|
16
|
-
2
|
17
|
-
);
|
18
|
-
|
19
|
-
$vd-sidebar-tab-active-bg-colour: vd-colour(text) !default;
|
20
|
-
$vd-sidebar-tab-active-border-width: 6px !default;
|
21
|
-
|
22
|
-
$vd-sidebar-tab-chevron-position-top: 25px;
|
23
|
-
$vd-sidebar-tab-chevron-position-right: 8px;
|
24
|
-
$vd-sidebar-tab-chevron-opacity: 0.4;
|
@@ -1,123 +0,0 @@
|
|
1
|
-
@keyframes nv-sidebar-tabs-loader {
|
2
|
-
0% {
|
3
|
-
background-color: vd-rgba(vd-colour(background-rgb), 0.1);
|
4
|
-
}
|
5
|
-
100% {
|
6
|
-
background-color: vd-rgba(vd-colour(background-rgb), 1);
|
7
|
-
}
|
8
|
-
}
|
9
|
-
|
10
|
-
.vd-sidebar-tabs {
|
11
|
-
display: flex;
|
12
|
-
flex-direction: column;
|
13
|
-
flex-shrink: 0;
|
14
|
-
z-index: $vd-z-index-content-base + 1;
|
15
|
-
|
16
|
-
box-sizing: border-box;
|
17
|
-
width: $vd-sidebar-tabs-desktop-width;
|
18
|
-
height: 100%;
|
19
|
-
|
20
|
-
background-color: $vd-sidebar-tabs-background-color;
|
21
|
-
|
22
|
-
font-size: $vd-sidebar-tab-font-size;
|
23
|
-
color: vd-colour(text);
|
24
|
-
|
25
|
-
padding-top: $vd-sidebar-drawer-item-font-size;
|
26
|
-
padding-bottom: $vd-sidebar-drawer-item-font-size;
|
27
|
-
|
28
|
-
transition: width $vd-sidebar-tabs-animation-duration cubic-bezier(0.4, 0, 0.2, 1);
|
29
|
-
|
30
|
-
overflow: hidden;
|
31
|
-
|
32
|
-
&.vd-sidebar-tabs--expanded {
|
33
|
-
width: $vd-sidebar-tabs-expanded-width;
|
34
|
-
|
35
|
-
.vd-nav-item-action {
|
36
|
-
justify-content: start;
|
37
|
-
}
|
38
|
-
}
|
39
|
-
|
40
|
-
.vd-nav-item {
|
41
|
-
flex-shrink: 0;
|
42
|
-
height: $vd-sidebar-tab-height;
|
43
|
-
transition: width $vd-sidebar-tabs-animation-duration cubic-bezier(0.4, 0, 0.2, 1);
|
44
|
-
|
45
|
-
&:hover {
|
46
|
-
background: vd-colour(background);
|
47
|
-
}
|
48
|
-
}
|
49
|
-
|
50
|
-
.vd-nav-item--pending {
|
51
|
-
background: vd-colour(background);
|
52
|
-
}
|
53
|
-
|
54
|
-
.vd-nav-item--disabled {
|
55
|
-
opacity: 0.35;
|
56
|
-
filter: grayscale(100%);
|
57
|
-
|
58
|
-
&:hover {
|
59
|
-
background-color: inherit;
|
60
|
-
}
|
61
|
-
}
|
62
|
-
|
63
|
-
.vd-nav-item--active {
|
64
|
-
color: vd-colour(do);
|
65
|
-
background: vd-colour(box);
|
66
|
-
|
67
|
-
&.vd-nav-item--no-children {
|
68
|
-
@include vd-sidebar-active-indicator();
|
69
|
-
}
|
70
|
-
}
|
71
|
-
|
72
|
-
.vd-nav-item-action {
|
73
|
-
flex-direction: row;
|
74
|
-
position: relative;
|
75
|
-
justify-content: start;
|
76
|
-
}
|
77
|
-
|
78
|
-
.vd-nav-item-label {
|
79
|
-
white-space: nowrap;
|
80
|
-
}
|
81
|
-
|
82
|
-
.vd-nav-item-icon {
|
83
|
-
flex-shrink: 0;
|
84
|
-
text-align: center;
|
85
|
-
font-size: $vd-sidebar-tab-icon-font-size;
|
86
|
-
min-width: $vd-sidebar-tab-icon-font-size;
|
87
|
-
padding-left: $vd-sidebar-tab-padding-x;
|
88
|
-
padding-right: $vd-sidebar-tab-padding-x;
|
89
|
-
|
90
|
-
transition: padding-right $vd-sidebar-tabs-animation-duration cubic-bezier(0.4, 0, 0.2, 1);
|
91
|
-
}
|
92
|
-
|
93
|
-
.vd-nav-divider {
|
94
|
-
padding-left: $vd-sidebar-tab-padding-x;
|
95
|
-
justify-content: flex-start;
|
96
|
-
}
|
97
|
-
|
98
|
-
.nv-tx-loading & {
|
99
|
-
.vd-nav-item {
|
100
|
-
pointer-events: none;
|
101
|
-
}
|
102
|
-
|
103
|
-
.vd-nav-item--active {
|
104
|
-
color: vd-colour(text);
|
105
|
-
|
106
|
-
&::before {
|
107
|
-
display: none;
|
108
|
-
}
|
109
|
-
}
|
110
|
-
|
111
|
-
.vd-nav-item-label {
|
112
|
-
animation: nv-sidebar-tabs-loader 1s linear infinite alternate;
|
113
|
-
width: 50%;
|
114
|
-
height: 18px;
|
115
|
-
color: transparent;
|
116
|
-
}
|
117
|
-
|
118
|
-
// Hide the expander button until translations are loaded
|
119
|
-
.vd-sidebar-expander {
|
120
|
-
display: none;
|
121
|
-
}
|
122
|
-
}
|
123
|
-
}
|
@@ -1,10 +0,0 @@
|
|
1
|
-
$vd-topbar-height: 50px;
|
2
|
-
$vd-topbar-background-color: vd-colour(nav-top);
|
3
|
-
|
4
|
-
$vd-topbar-font-size: 14px;
|
5
|
-
$vd-topbar-font-color: vd-colour(text-nav);
|
6
|
-
|
7
|
-
$vd-topbar-item-side-padding: vd-grid-unit(5);
|
8
|
-
$vd-topbar-item-label-margin-left: 10px;
|
9
|
-
$vd-topbar-item-default-opactiy: 0.5 !default;
|
10
|
-
$vd-topbar-item-label-max-width: 150px;
|
@@ -1,53 +0,0 @@
|
|
1
|
-
.vd-topbar {
|
2
|
-
display: flex;
|
3
|
-
align-items: center;
|
4
|
-
justify-content: space-between;
|
5
|
-
|
6
|
-
flex: 1 100%;
|
7
|
-
height: $vd-topbar-height;
|
8
|
-
|
9
|
-
box-sizing: border-box;
|
10
|
-
background-color: $vd-topbar-background-color;
|
11
|
-
|
12
|
-
font-family: $vd-font-primary;
|
13
|
-
font-size: 15px;
|
14
|
-
line-height: normal;
|
15
|
-
color: $vd-topbar-font-color;
|
16
|
-
|
17
|
-
.vd-nav-item-action {
|
18
|
-
padding: 0 $vd-topbar-item-side-padding;
|
19
|
-
opacity: $vd-topbar-item-default-opactiy;
|
20
|
-
|
21
|
-
&:hover {
|
22
|
-
opacity: 1;
|
23
|
-
}
|
24
|
-
}
|
25
|
-
|
26
|
-
.vd-nav-item-icon + .vd-nav-item-label {
|
27
|
-
margin-left: $vd-topbar-item-label-margin-left;
|
28
|
-
}
|
29
|
-
|
30
|
-
.vd-nav-item-label {
|
31
|
-
max-width: $vd-topbar-item-label-max-width;
|
32
|
-
white-space: nowrap;
|
33
|
-
text-overflow: ellipsis;
|
34
|
-
overflow: hidden;
|
35
|
-
}
|
36
|
-
|
37
|
-
.vd-logo-container {
|
38
|
-
display: flex;
|
39
|
-
height: 100%;
|
40
|
-
}
|
41
|
-
|
42
|
-
.vd-logo {
|
43
|
-
padding-left: 23px;
|
44
|
-
}
|
45
|
-
|
46
|
-
// Hide content when Transifex translations are being fetched
|
47
|
-
.nv-tx-loading & {
|
48
|
-
.nv-topnav-header--mobile,
|
49
|
-
.nv-topnav-content {
|
50
|
-
visibility: hidden;
|
51
|
-
}
|
52
|
-
}
|
53
|
-
}
|
@@ -1,17 +0,0 @@
|
|
1
|
-
.nv-account-banner {
|
2
|
-
display: block;
|
3
|
-
|
4
|
-
.vd-banner-content {
|
5
|
-
display: inline-flex;
|
6
|
-
}
|
7
|
-
|
8
|
-
// Hide account banners when navigation translations are being fetched
|
9
|
-
.nv-tx-loading & {
|
10
|
-
display: none;
|
11
|
-
}
|
12
|
-
}
|
13
|
-
|
14
|
-
.nv-account-banner-action {
|
15
|
-
flex-shrink: 0;
|
16
|
-
margin-left: vd-grid-unit(6);
|
17
|
-
}
|
@@ -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
|
-
}
|