@lightspeed/design-system-css 1.1.2 → 1.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (111) hide show
  1. package/README.md +1 -1
  2. package/dist/index.css +382 -240
  3. package/dist/index.css.map +1 -1
  4. package/dist/vend-styles.css +382 -240
  5. package/package.json +1 -34
  6. package/src/images-ui/images-ui-ns.scss +1 -1
  7. package/src/vend-stylelint/use-colour-function.js +25 -22
  8. package/src/vend-styles/components/BarChart/BarChart.scss +9 -9
  9. package/src/vend-styles/components/CodeInput/CodeInput.scss +0 -1
  10. package/src/vend-styles/components/DatePicker/DatePicker.scss +3 -11
  11. package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss +1 -1
  12. package/src/vend-styles/components/LineChart/LineChart.scss +5 -4
  13. package/src/vend-styles/components/Modal/Modal.scss +25 -12
  14. package/src/vend-styles/components/Modal/_Modal-ns.scss +7 -2
  15. package/src/vend-styles/components/PromotionModal/PromotionModal.scss +1 -1
  16. package/src/vend-styles/components/TableList/TableList.scss +5 -1
  17. package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss +1 -6
  18. package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex.scss +15 -7
  19. package/src/vend.ui/behaviours/vd-align/vd-align.scss +9 -3
  20. package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +4 -3
  21. package/src/vend.ui/components/vd-avatar/vd-avatar.scss +7 -7
  22. package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +1 -1
  23. package/src/vend.ui/components/vd-badges/vd-badges.scss +1 -1
  24. package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +7 -3
  25. package/src/vend.ui/components/vd-banner/vd-banner-ns.scss +5 -1
  26. package/src/vend.ui/components/vd-banner/vd-banner.scss +8 -4
  27. package/src/vend.ui/components/vd-bg/vd-bg.scss +1 -1
  28. package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +15 -15
  29. package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +4 -3
  30. package/src/vend.ui/components/vd-btn/vd-btn.scss +11 -9
  31. package/src/vend.ui/components/vd-carousel/vd-carousel.scss +3 -2
  32. package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +33 -12
  33. package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +2 -2
  34. package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +16 -6
  35. package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +3 -1
  36. package/src/vend.ui/components/vd-dialog/vd-dialog.scss +13 -13
  37. package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +2 -2
  38. package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer.scss +1 -1
  39. package/src/vend.ui/components/vd-dott/vd-dott.scss +5 -4
  40. package/src/vend.ui/components/vd-dropdown/vd-dropdown.scss +1 -1
  41. package/src/vend.ui/components/vd-flag/vd-flag.scss +1 -2
  42. package/src/vend.ui/components/vd-flex/vd-flex.scss +39 -13
  43. package/src/vend.ui/components/vd-hero/vd-hero-ns.scss +2 -2
  44. package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +0 -2
  45. package/src/vend.ui/components/vd-input/vd-input-ns.scss +19 -12
  46. package/src/vend.ui/components/vd-input/vd-input.scss +12 -4
  47. package/src/vend.ui/components/vd-link/vd-link.scss +12 -4
  48. package/src/vend.ui/components/vd-loader/vd-loader.scss +1 -1
  49. package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +22 -7
  50. package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss +1 -1
  51. package/src/vend.ui/components/vd-nav-divider/vd-nav-divider.scss +14 -0
  52. package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss +1 -1
  53. package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -1
  54. package/src/vend.ui/components/vd-p/vd-p.scss +3 -1
  55. package/src/vend.ui/components/vd-popover/vd-popover.scss +3 -1
  56. package/src/vend.ui/components/vd-popover-list/vd-popover-list-ns.scss +3 -1
  57. package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +1 -2
  58. package/src/vend.ui/components/vd-promo/vd-promo-ns.scss +1 -1
  59. package/src/vend.ui/components/vd-promo/vd-promo.scss +0 -1
  60. package/src/vend.ui/components/vd-radio/vd-radio.scss +30 -10
  61. package/src/vend.ui/components/vd-section/vd-section.scss +26 -11
  62. package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +3 -1
  63. package/src/vend.ui/components/vd-select/vd-select-group.scss +11 -5
  64. package/src/vend.ui/components/vd-select/vd-select-inline.scss +2 -1
  65. package/src/vend.ui/components/vd-select/vd-select.scss +2 -2
  66. package/src/vend.ui/components/vd-settings/vd-settings.scss +1 -1
  67. package/src/vend.ui/components/vd-sidebar/tmp-overrides.scss +95 -0
  68. package/src/vend.ui/components/vd-sidebar/vd-sidebar-ns.scss +23 -0
  69. package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +113 -0
  70. package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer-ns.scss +4 -4
  71. package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer.scss +5 -2
  72. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +12 -3
  73. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs.scss +42 -27
  74. package/src/vend.ui/components/vd-suggestion/vd-suggestion-list-ns.scss +2 -2
  75. package/src/vend.ui/components/vd-table/vd-table.scss +102 -33
  76. package/src/vend.ui/components/vd-tabs/vd-tabs.scss +1 -2
  77. package/src/vend.ui/components/vd-text/vd-text.scss +13 -5
  78. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +2 -1
  79. package/src/vend.ui/components/vd-topbar/vd-topbar.scss +2 -2
  80. package/src/vend.ui/components/vd-visibility/vd-visibility.scss +9 -3
  81. package/src/vend.ui/styles/global/_base-mixins.scss +1 -2
  82. package/src/vend.ui/styles/global/_grid.scss +5 -5
  83. package/src/vend.ui/styles/global/_layout.scss +2 -2
  84. package/src/vend.ui/styles/global/_non-styles.scss +1 -0
  85. package/src/vend.ui/styles/global/_normalise.scss +8 -1
  86. package/src/vend.ui/styles/global/_z-index.scss +0 -8
  87. package/src/vend.ui/styles/global/colour/_base.scss +8 -13
  88. package/src/vend.ui/styles/global/colour/_colour-functions.scss +2 -10
  89. package/src/vend.ui/styles/global/colour/_colour.scss +3 -3
  90. package/src/vend.ui/styles/global/effects/_effects-ns.scss +4 -4
  91. package/src/vend.ui/styles/global/effects/_effects.scss +51 -6
  92. package/src/vend.ui/styles/global/spacing/_spacing-functions.scss +2 -2
  93. package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss +2 -6
  94. package/src/vend.ui/styles/global/text/_base.scss +1 -1
  95. package/src/vend.ui/styles/global/text/_text-definitions.scss +13 -13
  96. package/src/vend.ui/styles/global/text/_text-mixins.scss +15 -23
  97. package/src/vend.ui/styles/global/text/_text.scss +2 -2
  98. package/src/vend.ui/styles/global/utils/_functions.scss +2 -2
  99. package/src/vend.ui/styles/global/viewport/_viewport-data.scss +30 -30
  100. package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss +1 -1
  101. package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss +16 -16
  102. package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss +9 -9
  103. package/src/vend.ui/styles/navi/_nv-topnav-title.scss +1 -1
  104. package/src/vend.ui/styles/navi/_nv-topnav.scss +4 -4
  105. package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +2 -2
  106. package/src/vend.ui/styles/navi/navi.scss +8 -9
  107. package/src/vend.ui/styles/navi/non-styles/_mixins.scss +6 -4
  108. package/src/vend.ui/styles/navi/non-styles/_variables.scss +0 -11
  109. package/src/vend.ui/styles/vend-ui.scss +2 -0
  110. package/CHANGELOG.md +0 -186
  111. package/src/vend.ui/styles/navi/_nv-sidenav.scss +0 -143
@@ -20,7 +20,7 @@
20
20
  justify-content: center;
21
21
  flex: 1;
22
22
 
23
- @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
23
+ @include vd-viewport-media-max($vd-breakpoint-xsmall) {
24
24
  flex: initial;
25
25
  }
26
26
  }
@@ -29,7 +29,7 @@
29
29
  min-width: 0;
30
30
  flex: 1;
31
31
 
32
- @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
32
+ @include vd-viewport-media-max($vd-breakpoint-xsmall) {
33
33
  &.nv-topnav-header--mobile {
34
34
  flex: initial;
35
35
  }
@@ -76,7 +76,7 @@
76
76
  margin-left: auto;
77
77
  flex: 1;
78
78
 
79
- @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
79
+ @include vd-viewport-media-max($vd-breakpoint-xsmall) {
80
80
  flex: initial;
81
81
  }
82
82
  }
@@ -93,7 +93,7 @@
93
93
 
94
94
  // ========= Responsive Breakpoint Styles ========= //
95
95
 
96
- @include vd-viewport-media-max ($vd-breakpoint-large) {
96
+ @include vd-viewport-media-max($vd-breakpoint-large) {
97
97
  .nv-topnav-header {
98
98
  display: none;
99
99
 
@@ -7,7 +7,7 @@
7
7
  list-style: none;
8
8
  padding: 0;
9
9
  margin: 0;
10
- max-height: calc(100vh - #{$vd-topbar-height})
10
+ max-height: calc(100vh - #{$vd-topbar-height});
11
11
  }
12
12
 
13
13
  .nv-notifications-list-item {
@@ -32,7 +32,7 @@
32
32
  word-wrap: break-word;
33
33
 
34
34
  &:before {
35
- content:'';
35
+ content: '';
36
36
  width: 8px;
37
37
  height: 8px;
38
38
  box-sizing: content-box;
@@ -1,12 +1,11 @@
1
1
  // Modules
2
- @import "nv-topnav";
3
- @import "nv-topnav-title";
4
- @import "nv-sidenav";
5
- @import "nv-account-banner";
6
- @import "nv-notifications-item";
7
- @import "nv-user-sale-data";
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';
8
7
 
9
8
  // Dialogs
10
- @import "dialogs/nv-dialog-drawer";
11
- @import "dialogs/nv-notifications-dialog";
12
- @import "dialogs/nv-user-dialog";
9
+ @import 'dialogs/nv-dialog-drawer';
10
+ @import 'dialogs/nv-notifications-dialog';
11
+ @import 'dialogs/nv-user-dialog';
@@ -2,15 +2,17 @@
2
2
  // Generates a striped background with the stripes slanted at 60 deg and alternating between the given color and a
3
3
  // darkened equivalent. Stripes are 15px wide.
4
4
  //
5
- @mixin nv-striped-background ($color) {
6
- background: repeating-linear-gradient(-60deg,
5
+ @mixin nv-striped-background($color) {
6
+ background: repeating-linear-gradient(
7
+ -60deg,
7
8
  darken($color, 3),
8
9
  darken($color, 3) 15px,
9
10
  $color 15px,
10
- $color 30px);
11
+ $color 30px
12
+ );
11
13
  }
12
14
 
13
- @mixin nv-topnav-status-icon ($_vd-icon-color: vd-colour(do)) {
15
+ @mixin nv-topnav-status-icon($_vd-icon-color: vd-colour(do)) {
14
16
  &::after {
15
17
  content: '';
16
18
  transform: scale(0);
@@ -4,17 +4,6 @@ $nv-header-font-size: 15px;
4
4
  $nv-header-logo-font-size: 42px;
5
5
  $nv-header-logo-font-size--mobile: 24px;
6
6
 
7
- // Side Navigation
8
-
9
- $nv-sidenav-base-z-index: $vd-z-index-navigation-base;
10
- $nv-sidenav-modal-z-index: $vd-modals-z-index + 1;
11
- $nv-sidenav-modal-close-base-offset: 10px;
12
- $nv-sidenav-modal-close-right-offset: -($vd-dialog-close-width + $nv-sidenav-modal-close-base-offset);
13
-
14
- $nv-sidenav-content-box-shadow-offset-x: 1px;
15
- $nv-sidenav-tabs-mobile-width: 85px;
16
- $nv-sidenav-drawer-mobile-width: 145px;
17
-
18
7
  // Notifications Side Drawer
19
8
 
20
9
  $nv-notifications-list-spacing: 20px;
@@ -58,6 +58,7 @@
58
58
  @import '../components/vd-loader/vd-loader';
59
59
  @import '../components/vd-main-content/vd-main-content';
60
60
  @import '../components/vd-modals-container/vd-modals-container';
61
+ @import '../components/vd-nav-divider/vd-nav-divider';
61
62
  @import '../components/vd-nav-item/vd-nav-item';
62
63
  @import '../components/vd-overlay/vd-overlay';
63
64
  @import '../components/vd-p/vd-p';
@@ -74,6 +75,7 @@
74
75
  @import '../components/vd-sidebar/vd-sidebar';
75
76
  @import '../components/vd-sidebar-drawer/vd-sidebar-drawer';
76
77
  @import '../components/vd-sidebar-tabs/vd-sidebar-tabs';
78
+ @import '../components/vd-sidebar/tmp-overrides'; // @REMOVEME: When flag `sidebar_new` is fully rolled out
77
79
  @import '../components/vd-splash/vd-splash';
78
80
  @import '../components/vd-status-icon/vd-status-icon';
79
81
  @import '../components/vd-suggestion/vd-suggestion-list';
package/CHANGELOG.md DELETED
@@ -1,186 +0,0 @@
1
- # @lightspeed/design-system-css
2
-
3
- ## 1.1.2
4
-
5
- ### Patch Changes
6
-
7
- - [#4635](https://github.com/vend/monocle/pull/4635) [`de5cd5a28`](https://github.com/vend/monocle/commit/de5cd5a286e507412c816c5c146a9d6c56862c07) Thanks [@aarr0n](https://github.com/aarr0n)! - Setting a zindex on the `topnav` so that it isn't obscured when the Transifex loader is shown.
8
-
9
- ## 1.1.1
10
-
11
- ### Patch Changes
12
-
13
- - [#4592](https://github.com/vend/monocle/pull/4592) [`697caaf9d`](https://github.com/vend/monocle/commit/697caaf9dea2ee9e11322e04a7ceb6de0dbd1f82) Thanks [@edsrzf](https://github.com/edsrzf)! - Use align-items: flex-start instead of start to avoid an autoprefixer warning.
14
-
15
- ## 1.1.0
16
-
17
- ### Minor Changes
18
-
19
- - [#4381](https://github.com/vend/monocle/pull/4381) [`291ce4a3d`](https://github.com/vend/monocle/commit/291ce4a3db11882b4e19e10a9865b896643d890b) Thanks [@stephen-boswell](https://github.com/stephen-boswell)! - Adds classes to hide the nav container in single-spa enviroment
20
-
21
- ## 1.0.3
22
-
23
- ### Patch Changes
24
-
25
- - [#4344](https://github.com/vend/monocle/pull/4344) [`908e57aea`](https://github.com/vend/monocle/commit/908e57aea8abb71d3b4bb26bcae152f87cf2b874) Thanks [@WaiHaiDere](https://github.com/WaiHaiDere)! - Update checkbox styling to match design (Margin + label)
26
-
27
- ## 1.0.2
28
-
29
- ### Patch Changes
30
-
31
- - Updated dependencies [[`13743872b`](https://github.com/vend/monocle/commit/13743872b0eb04bae4143efd20e24d11ba5cd925)]:
32
- - @lightspeed/design-system-tokens@1.0.0
33
-
34
- ## 1.0.1
35
-
36
- ### Patch Changes
37
-
38
- - [#4275](https://github.com/vend/monocle/pull/4275) [`2eb35a37f`](https://github.com/vend/monocle/commit/2eb35a37fb01bbb451bda857666ae5538969fac5) Thanks [@rothlis](https://github.com/rothlis)! - Fix Inputs height to 44px
39
-
40
- **Why?**
41
-
42
- Specs define buttons and inputs having a height of 44px. However, before this release, inputs (e.g. TextInput, Dropdown) where having a height of 46px.
43
-
44
- ## 1.0.0
45
-
46
- ### Major Changes
47
-
48
- - [#4264](https://github.com/vend/monocle/pull/4264) [`50352c606`](https://github.com/vend/monocle/commit/50352c6063a4de1e493d6a95c8058cdbbcb29c66) Thanks [@rothlis](https://github.com/rothlis)! - Ability to manually set the dark or light theme.
49
-
50
- - By default, no dark theme is enabled
51
- - If your UI supports the dark theme, then either:
52
- - Set the SASS variable `$vd-theme-use-dark-mode: true;` before importing the SASS styles
53
- - Set the CSS class `vd-theme--use-dark-mode` to the `<body>`
54
- - The dark theme will be automatically applied based on the OS preference
55
- - If you have a theme swicher, you can add `vd-theme--light` or `vd-theme--dark` to the `<body>`
56
- - This will override the OS preference
57
-
58
- ## 0.6.3
59
-
60
- ### Patch Changes
61
-
62
- - [#4252](https://github.com/vend/monocle/pull/4252) [`b720075e4`](https://github.com/vend/monocle/commit/b720075e419fc9d5671bb448bd987c33119fcd1a) Thanks [@staugaard](https://github.com/staugaard)! - Slightly improved styling of popovers
63
-
64
- ## 0.6.2
65
-
66
- ### Patch Changes
67
-
68
- - [#4249](https://github.com/vend/monocle/pull/4249) [`3dd1fa50b`](https://github.com/vend/monocle/commit/3dd1fa50bd328ac2b33f00fb66aa53e955a47f78) Thanks [@aarr0n](https://github.com/aarr0n)! - Fix animation for Dott.
69
-
70
- ## 0.6.1
71
-
72
- ### Patch Changes
73
-
74
- - [#4237](https://github.com/vend/monocle/pull/4237) [`a90d5a43e`](https://github.com/vend/monocle/commit/a90d5a43eea46eb9ddeca8410638ad1730fd9803) Thanks [@aarr0n](https://github.com/aarr0n)! - Navigation: Update the selector which highlights a sidebar drawer item as "active".
75
-
76
- ## 0.6.0
77
-
78
- ### Minor Changes
79
-
80
- - [#4229](https://github.com/vend/monocle/pull/4229) [`7f70bec24`](https://github.com/vend/monocle/commit/7f70bec24f7cae5938279e0ab567e62196152f5c) Thanks [@haydenwoodhead](https://github.com/haydenwoodhead)! - # Dropdown: add divider and search header margin
81
-
82
- ## What
83
-
84
- - Adds a divider suggestion type to the Dropdown.
85
- - Adds 4px of padding to the label that displays the search header inside of a Dropdown.
86
-
87
- ## Why
88
-
89
- IAM is creating a new page and needs a specific design for the dropdown component. That includes a divider. See the [figma](https://www.figma.com/file/n2CJXP9CDaLyUoiz23iEPj/08-Setup?node-id=1065%3A248430).
90
-
91
- It also appears that this search header label should have some margin. See [this slack discussion](https://lightspeedhq.slack.com/archives/C02K5U88KUH/p1646880176830629).
92
-
93
- ## How
94
-
95
- Use the new divider like so:
96
-
97
- ```
98
- const items = [
99
- { id: 'item7', label: 'item7', name: 'item7' },
100
- {
101
- id: 'dividerItem',
102
- label: 'divider',
103
- name: 'Divider',
104
- itemType: SuggestionType.Divider,
105
- },
106
- { id: 'item8', label: 'item8', name: 'item8' },
107
- { id: 'item9', label: 'item9', name: 'item9' },
108
- ]
109
-
110
- ...
111
-
112
- <Dropdown items={items}>
113
- ```
114
-
115
- ## 0.5.0
116
-
117
- ### Minor Changes
118
-
119
- - [#4200](https://github.com/vend/monocle/pull/4200) [`73d8d0eda`](https://github.com/vend/monocle/commit/73d8d0eda329cd27e99d93275b1ba6324db39a1f) Thanks [@rothlis](https://github.com/rothlis)! - Theme tokens have been extracted to `@lightspeed/design-system-tokens`
120
-
121
- **Deprecated**: This package does not export anymore the theme tokens. Please use `@lightspeed/design-system-tokens` going forward.
122
-
123
- ### Patch Changes
124
-
125
- - Updated dependencies [[`73d8d0eda`](https://github.com/vend/monocle/commit/73d8d0eda329cd27e99d93275b1ba6324db39a1f)]:
126
- - @lightspeed/design-system-tokens@0.1.0
127
-
128
- ## 0.4.0
129
-
130
- ### Minor Changes
131
-
132
- - 24ea79113: Update styling for Vend to Lightspeed brand replacement
133
-
134
- ## 0.3.0
135
-
136
- ### Minor Changes
137
-
138
- - 622131d30: Updates `ToastNotification` by adding a check icon to all success toasts and small style changes (padding and bolded font)
139
-
140
- ## 0.2.0
141
-
142
- ### Minor Changes
143
-
144
- - 495da32fa: Remove Vend's naming from the package's API
145
-
146
- ## New API
147
-
148
- Import CSS styles
149
-
150
- ```tsx
151
- import '@lightspeed/design-system-css'
152
- ```
153
-
154
- Import SCSS non-styles (variables, mixins, functions)
155
-
156
- ```scss
157
- @import '@lightspeed/design-system-css/src/common';
158
- ```
159
-
160
- ## Deprecated API
161
-
162
- > Those APIs are deprecated but still available for retro-compatibility.
163
-
164
- Import CSS styles
165
-
166
- ```tsx
167
- import '@lightspeed/design-system-css/dist/vend-styles.css'
168
- ```
169
-
170
- Import SCSS non-styles (variables, mixins, functions)
171
-
172
- ```scss
173
- @import '@lightspeed/design-system-css/src/vend.ui/styles/global/non-styles';
174
- ```
175
-
176
- ## 0.1.0
177
-
178
- ### Minor Changes
179
-
180
- - 094a8faf7: Initial release of `@lightspeed/design-sytem-css`.
181
-
182
- See https://github.com/vend/monocle/pull/3616 for context.
183
-
184
- ### Patch Changes
185
-
186
- - dc309dc98: Remove dependency on @vend packages
@@ -1,143 +0,0 @@
1
- @mixin nv-sidenav-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
- .nv-sidenav {
17
- transform: translateX(0);
18
- transition: transform 0.2s ease-in-out;
19
- display: block;
20
- height: calc(100% - #{$vd-topbar-height});
21
- z-index: $nv-sidenav-base-z-index;
22
-
23
- .nv-sidenav-modal-close {
24
- display: none;
25
- top: $nv-sidenav-modal-close-base-offset;
26
- right: $nv-sidenav-modal-close-right-offset;
27
- }
28
-
29
- .vd-sidebar-tabs {
30
- box-shadow: none;
31
- height: auto;
32
- }
33
-
34
- .vd-sidebar-drawer {
35
- border-right: none;
36
- height: auto;
37
- }
38
-
39
- @media print {
40
- display: none;
41
- }
42
-
43
- @supports (height: min-content) {
44
- .vd-sidebar-tabs,
45
- .vd-sidebar-drawer {
46
- height: min-content;
47
- }
48
- }
49
-
50
- // Required so banner does not appear over the top of the sidenav when its toggled
51
- // on smaller devices
52
- @include vd-viewport-media-max($vd-breakpoint-large) {
53
- z-index: $vd-z-index-popover-base + 2;
54
- }
55
- }
56
-
57
- .nv-sidenav-content {
58
- @include nv-sidenav-faux-column-bg(
59
- $vd-sidebar-tabs-desktop-width,
60
- $vd-sidebar-drawer-desktop-width
61
- );
62
- width: auto;
63
- overflow-y: auto;
64
- overflow-x: hidden;
65
- height: 100%;
66
- display: flex;
67
- box-shadow: $nv-sidenav-content-box-shadow-offset-x 0 0 0 vd-colour(framing);
68
- }
69
-
70
- .nv-sidenav--pad-drawer {
71
- padding-right: $vd-sidebar-drawer-desktop-width;
72
- }
73
-
74
- // ========= Body Class Sidenav Modal State ========= //
75
-
76
- .nv-display-sidenav-modal {
77
- .nv-sidenav {
78
- z-index: $nv-sidenav-modal-z-index;
79
-
80
- .nv-sidenav-modal-close {
81
- display: flex;
82
- }
83
- }
84
- }
85
-
86
- // ========= Responsive Breakpoint Styles ========= //
87
-
88
- @include vd-viewport-media-max($vd-breakpoint-large) {
89
- .nv-sidenav {
90
- position: absolute;
91
- left: 0;
92
- height: 100%;
93
- transform: translateX(
94
- calc(-100% - #{$nv-sidenav-content-box-shadow-offset-x})
95
- );
96
-
97
- .nv-sidenav-content {
98
- @include nv-sidenav-faux-column-bg(
99
- $nv-sidenav-tabs-mobile-width,
100
- $nv-sidenav-drawer-mobile-width
101
- );
102
- }
103
-
104
- .vd-sidebar-tabs {
105
- width: $nv-sidenav-tabs-mobile-width;
106
- }
107
-
108
- .vd-sidebar-drawer {
109
- width: $nv-sidenav-drawer-mobile-width;
110
- }
111
- }
112
-
113
- .nv-display-sidenav-modal {
114
- .nv-sidenav {
115
- transform: translateX(0);
116
- }
117
- }
118
-
119
- .nv-sidenav--pad-drawer {
120
- padding-right: 0;
121
- }
122
- }
123
-
124
- @include vd-viewport-media-min($vd-breakpoint-xlarge-min) {
125
- // The following styles are required to allow the sidenav modal overlay page content when no drawer is displayed
126
- // This only applies to the nav at large desktop size
127
- .nv-sidenav--no-drawer {
128
- width: $vd-sidebar-tabs-desktop-width;
129
- }
130
-
131
- .nv-display-sidenav-modal {
132
- .nv-sidenav--no-drawer {
133
- .nv-sidenav-content {
134
- position: absolute;
135
- }
136
-
137
- .nv-sidenav-modal-close {
138
- right: $nv-sidenav-modal-close-right-offset -
139
- $vd-sidebar-drawer-desktop-width;
140
- }
141
- }
142
- }
143
- }