@lightspeed/design-system-css 1.1.0 → 1.2.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -417,6 +417,29 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
417
417
  animation-fill-mode: forwards;
418
418
  }
419
419
 
420
+ @keyframes vd-blink-highlight {
421
+ 20%, 70% {
422
+ background-color: var(--vd-colour--go-highlight);
423
+ }
424
+ }
425
+ @keyframes vd-shake {
426
+ 10%, 90% {
427
+ transform: translate3d(-1px, 0, 0);
428
+ }
429
+ 20%, 80% {
430
+ transform: translate3d(2px, 0, 0);
431
+ }
432
+ 30%, 50%, 70% {
433
+ transform: translate3d(-4px, 0, 0);
434
+ }
435
+ 40%, 60% {
436
+ transform: translate3d(4px, 0, 0);
437
+ }
438
+ }
439
+ .vd-shake-highlight {
440
+ animation: vd-shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both, vd-blink-highlight 1.2s;
441
+ }
442
+
420
443
  #vd-viewport-identifier {
421
444
  position: absolute;
422
445
  z-index: -1;
@@ -4096,6 +4119,20 @@ vd-dott, .vd-dott {
4096
4119
  z-index: 410;
4097
4120
  }
4098
4121
 
4122
+ .vd-nav-divider {
4123
+ display: flex;
4124
+ align-items: center;
4125
+ justify-content: center;
4126
+ height: 25px;
4127
+ }
4128
+ .vd-nav-divider::before {
4129
+ content: "";
4130
+ display: block;
4131
+ height: 1px;
4132
+ width: 20px;
4133
+ background-color: var(--vd-colour--keyline);
4134
+ }
4135
+
4099
4136
  .vd-nav-item {
4100
4137
  box-sizing: border-box;
4101
4138
  height: 100%;
@@ -5064,6 +5101,10 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
5064
5101
  margin-left: 0;
5065
5102
  }
5066
5103
 
5104
+ .vd-sidebar:empty {
5105
+ display: none;
5106
+ }
5107
+
5067
5108
  .vd-sidebar {
5068
5109
  display: flex;
5069
5110
  position: relative;
@@ -5072,29 +5113,116 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
5072
5113
  box-sizing: border-box;
5073
5114
  font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
5074
5115
  line-height: normal;
5116
+ max-width: 240px;
5117
+ transform: translateX(0);
5118
+ transition: transform 0.2s ease-in-out;
5119
+ z-index: 200;
5120
+ }
5121
+ .vd-sidebar .vd-sidebar-modal-close {
5122
+ display: none;
5123
+ top: 10px;
5124
+ right: -60px;
5125
+ }
5126
+ .vd-sidebar .vd-sidebar-tabs {
5127
+ height: auto;
5128
+ }
5129
+ .vd-sidebar .vd-sidebar-drawer {
5130
+ height: auto;
5131
+ }
5132
+ @media print {
5133
+ .vd-sidebar {
5134
+ display: none;
5135
+ }
5136
+ }
5137
+ @media only screen and (max-width: 1200px) {
5138
+ .vd-sidebar {
5139
+ z-index: 302;
5140
+ }
5141
+ }
5142
+
5143
+ .vd-sidebar-content {
5144
+ background: linear-gradient(to right, var(--vd-colour--nav-side-tabs) 0, var(--vd-colour--nav-side-tabs) 64px, var(--vd-colour--nav-side-drawer) 64px, var(--vd-colour--nav-side-drawer) 176px);
5145
+ width: auto;
5146
+ overflow-y: auto;
5147
+ overflow-x: hidden;
5148
+ height: 100%;
5149
+ display: flex;
5150
+ }
5151
+
5152
+ .vd-sidebar--pad-drawer {
5153
+ padding-right: 176px;
5154
+ }
5155
+
5156
+ .nv-display-sidenav-modal .vd-sidebar {
5157
+ z-index: 411;
5158
+ }
5159
+ .nv-display-sidenav-modal .vd-sidebar .vd-sidebar-modal-close {
5160
+ display: flex;
5161
+ }
5162
+
5163
+ @media only screen and (max-width: 1200px) {
5164
+ .vd-sidebar {
5165
+ position: absolute;
5166
+ left: 0;
5167
+ height: 100%;
5168
+ transform: translateX(calc(-100% - 1px));
5169
+ }
5170
+
5171
+ .nv-display-sidenav-modal .vd-sidebar {
5172
+ transform: translateX(0);
5173
+ }
5174
+
5175
+ .vd-sidebar--pad-drawer {
5176
+ padding-right: 0;
5177
+ }
5075
5178
  }
5179
+ @media only screen and (min-width: 1201px) {
5180
+ .vd-sidebar--no-drawer {
5181
+ width: 64px;
5182
+ }
5076
5183
 
5184
+ .nv-display-sidenav-modal .vd-sidebar--no-drawer .vd-sidebar-content {
5185
+ position: absolute;
5186
+ }
5187
+ .nv-display-sidenav-modal .vd-sidebar--no-drawer .vd-sidebar-modal-close {
5188
+ right: -236px;
5189
+ }
5190
+ }
5077
5191
  .vd-sidebar-drawer {
5078
5192
  display: flex;
5079
5193
  flex-direction: column;
5080
5194
  flex-shrink: 0;
5081
- width: 145px;
5195
+ width: 176px;
5082
5196
  height: 100%;
5083
5197
  background-color: var(--vd-colour--nav-side-drawer);
5084
- border-right: 1px solid var(--vd-colour--framing);
5198
+ border-right: 1px solid var(--vd-colour--background);
5085
5199
  box-sizing: border-box;
5200
+ padding-top: 15px;
5201
+ padding-bottom: 15px;
5086
5202
  }
5087
5203
  .vd-sidebar-drawer .vd-nav-item {
5088
5204
  width: 100%;
5089
5205
  height: auto;
5090
5206
  color: var(--vd-colour--text);
5091
- font-weight: 700;
5207
+ font-weight: 400;
5092
5208
  }
5093
5209
  .vd-sidebar-drawer .vd-nav-item:hover {
5094
5210
  background: var(--vd-colour--go-highlight);
5095
5211
  }
5096
5212
  .vd-sidebar-drawer .vd-nav-item-action {
5097
- padding: 20px 10px;
5213
+ padding: 13px 22px;
5214
+ }
5215
+ .vd-sidebar-drawer .vd-nav-item--active {
5216
+ position: relative;
5217
+ }
5218
+ .vd-sidebar-drawer .vd-nav-item--active::before {
5219
+ content: "";
5220
+ position: absolute;
5221
+ top: 0;
5222
+ bottom: 0;
5223
+ right: 0;
5224
+ width: 4px;
5225
+ background-color: var(--vd-colour--go);
5098
5226
  }
5099
5227
  .vd-sidebar-drawer .vd-nav-item--active .vd-nav-item-action {
5100
5228
  color: var(--vd-colour--go);
@@ -5110,7 +5238,7 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
5110
5238
  background-color: inherit;
5111
5239
  }
5112
5240
  .vd-sidebar-drawer .vd-nav-item-label {
5113
- font-size: 14px;
5241
+ font-size: 15px;
5114
5242
  }
5115
5243
 
5116
5244
  .vd-sidebar-tabs {
@@ -5119,32 +5247,30 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
5119
5247
  flex-shrink: 0;
5120
5248
  z-index: 101;
5121
5249
  box-sizing: border-box;
5122
- width: 85px;
5250
+ width: 64px;
5123
5251
  height: 100%;
5124
5252
  background-color: var(--vd-colour--nav-side-tabs);
5125
- font-size: 12px;
5253
+ font-size: 15px;
5126
5254
  color: var(--vd-colour--text);
5255
+ padding-top: 15px;
5256
+ padding-bottom: 15px;
5257
+ transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
5258
+ overflow: hidden;
5259
+ }
5260
+ .vd-sidebar-tabs.vd-sidebar-tabs--expanded {
5261
+ width: 240px;
5262
+ }
5263
+ .vd-sidebar-tabs.vd-sidebar-tabs--expanded .vd-nav-item-action {
5264
+ justify-content: start;
5127
5265
  }
5128
5266
  .vd-sidebar-tabs .vd-nav-item {
5129
5267
  flex-shrink: 0;
5130
- height: 75px;
5131
- width: 100%;
5132
- }
5133
- .vd-sidebar-tabs .vd-nav-item .vd-nav-item-icon.vd-nav-item-icon {
5134
- color: inherit;
5268
+ height: 44px;
5269
+ transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
5135
5270
  }
5136
5271
  .vd-sidebar-tabs .vd-nav-item:hover {
5137
5272
  background: var(--vd-colour--background);
5138
5273
  }
5139
- .vd-sidebar-tabs .vd-nav-item-action {
5140
- flex-direction: column;
5141
- justify-content: center;
5142
- position: relative;
5143
- }
5144
- .vd-sidebar-tabs .vd-nav-item--active {
5145
- color: var(--vd-colour--do);
5146
- background: var(--vd-colour--box);
5147
- }
5148
5274
  .vd-sidebar-tabs .vd-nav-item--pending {
5149
5275
  background: var(--vd-colour--background);
5150
5276
  }
@@ -5155,71 +5281,109 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
5155
5281
  .vd-sidebar-tabs .vd-nav-item--disabled:hover {
5156
5282
  background-color: inherit;
5157
5283
  }
5158
- .vd-sidebar-tabs .vd-nav-item-label {
5159
- font-weight: 700;
5284
+ .vd-sidebar-tabs .vd-nav-item--active {
5285
+ color: var(--vd-colour--do);
5286
+ background: var(--vd-colour--box);
5160
5287
  }
5161
- .vd-sidebar-tabs .vd-nav-item-icon {
5162
- font-size: 20px;
5288
+ .vd-sidebar-tabs .vd-nav-item--active.vd-nav-item--no-children {
5289
+ position: relative;
5163
5290
  }
5164
- .vd-sidebar-tabs .vd-nav-item--carnation .vd-nav-item-icon {
5165
- color: #f5765f;
5291
+ .vd-sidebar-tabs .vd-nav-item--active.vd-nav-item--no-children::before {
5292
+ content: "";
5293
+ position: absolute;
5294
+ top: 0;
5295
+ bottom: 0;
5296
+ right: 0;
5297
+ width: 4px;
5298
+ background-color: var(--vd-colour--go);
5166
5299
  }
5167
- .vd-sidebar-tabs .vd-nav-item--carnation.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--carnation.vd-nav-item--pending {
5168
- border-color: #f5765f;
5300
+ .vd-sidebar-tabs .vd-nav-item-action {
5301
+ flex-direction: row;
5302
+ position: relative;
5303
+ justify-content: start;
5169
5304
  }
5170
- .vd-sidebar-tabs .vd-nav-item--ocean-green .vd-nav-item-icon {
5171
- color: #44b773;
5305
+ .vd-sidebar-tabs .vd-nav-item-label {
5306
+ white-space: nowrap;
5172
5307
  }
5173
- .vd-sidebar-tabs .vd-nav-item--ocean-green.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--ocean-green.vd-nav-item--pending {
5174
- border-color: #44b773;
5308
+ .vd-sidebar-tabs .vd-nav-item-icon {
5309
+ flex-shrink: 0;
5310
+ text-align: center;
5311
+ font-size: 20px;
5312
+ min-width: 20px;
5313
+ padding-left: 22px;
5314
+ padding-right: 22px;
5315
+ transition: padding-right 200ms cubic-bezier(0.4, 0, 0.2, 1);
5175
5316
  }
5176
- .vd-sidebar-tabs .vd-nav-item--rajah .vd-nav-item-icon {
5177
- color: #f3c276;
5317
+ .vd-sidebar-tabs .vd-nav-divider {
5318
+ padding-left: 22px;
5319
+ justify-content: flex-start;
5178
5320
  }
5179
- .vd-sidebar-tabs .vd-nav-item--rajah.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--rajah.vd-nav-item--pending {
5180
- border-color: #f3c276;
5321
+
5322
+ /**
5323
+ Temporary overrides for feature flag `sidebar_new`.
5324
+
5325
+ Those overrides bring back the old sidebar styles unless
5326
+ the class `vd-sidebar--new` is set.
5327
+
5328
+ @REMOVEME: When flag `sidebar_new` is fully rolled out
5329
+ */
5330
+ .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs {
5331
+ width: 85px;
5332
+ font-size: 12px;
5333
+ padding-top: 0;
5334
+ padding-bottom: 0;
5181
5335
  }
5182
- .vd-sidebar-tabs .vd-nav-item--shakespeare .vd-nav-item-icon {
5183
- color: #56bad6;
5336
+ .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item {
5337
+ width: 100%;
5338
+ height: 75px;
5184
5339
  }
5185
- .vd-sidebar-tabs .vd-nav-item--shakespeare.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--shakespeare.vd-nav-item--pending {
5186
- border-color: #56bad6;
5340
+ .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item--active::before {
5341
+ content: none;
5187
5342
  }
5188
- .vd-sidebar-tabs .vd-nav-item--downy .vd-nav-item-icon {
5189
- color: #70b8d3;
5343
+ .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-action {
5344
+ flex-direction: column;
5345
+ justify-content: center;
5346
+ position: relative;
5190
5347
  }
5191
- .vd-sidebar-tabs .vd-nav-item--downy.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--downy.vd-nav-item--pending {
5192
- border-color: #70b8d3;
5348
+ .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-icon {
5349
+ width: auto;
5350
+ padding-left: 0;
5351
+ padding-right: 0;
5193
5352
  }
5194
- .vd-sidebar-tabs .vd-nav-item--fern .vd-nav-item-icon {
5195
- color: #65b479;
5353
+ .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-label {
5354
+ font-size: 12px;
5355
+ font-weight: 700;
5196
5356
  }
5197
- .vd-sidebar-tabs .vd-nav-item--fern.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--fern.vd-nav-item--pending {
5198
- border-color: #65b479;
5357
+ .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-divider, .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-sidebar-expander, .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-icon--new {
5358
+ display: none;
5199
5359
  }
5200
- .vd-sidebar-tabs .vd-nav-item--fiord .vd-nav-item-icon {
5201
- color: #4b576e;
5360
+ .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer {
5361
+ width: 155px;
5362
+ padding-top: 0;
5363
+ padding-bottom: 0;
5202
5364
  }
5203
- .vd-sidebar-tabs .vd-nav-item--fiord.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--fiord.vd-nav-item--pending {
5204
- border-color: #4b576e;
5365
+ .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer .vd-nav-item {
5366
+ font-weight: 700;
5205
5367
  }
5206
- .vd-sidebar-tabs .vd-nav-item--rob-roy .vd-nav-item-icon {
5207
- color: #ebc381;
5368
+ .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer .vd-nav-item--active::before {
5369
+ content: none;
5208
5370
  }
5209
- .vd-sidebar-tabs .vd-nav-item--rob-roy.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--rob-roy.vd-nav-item--pending {
5210
- border-color: #ebc381;
5371
+ .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer .vd-nav-item-action {
5372
+ padding: 20px 10px;
5211
5373
  }
5212
- .vd-sidebar-tabs .vd-nav-item--terracotta .vd-nav-item-icon {
5213
- color: #e57d66;
5374
+ .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer .vd-nav-item-label {
5375
+ font-size: 14px;
5214
5376
  }
5215
- .vd-sidebar-tabs .vd-nav-item--terracotta.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--terracotta.vd-nav-item--pending {
5216
- border-color: #e57d66;
5377
+
5378
+ .nv-topnav-container:not(.vd-sidebar--new) .vd-logo {
5379
+ padding-left: 34px;
5217
5380
  }
5218
- .vd-sidebar-tabs .vd-nav-item--wistera .vd-nav-item-icon {
5219
- color: #965fb0;
5381
+
5382
+ .vd-sidebar.vd-sidebar--new .vd-sidebar-tabs .vd-nav-item-icon:not(.vd-nav-item-icon--new) {
5383
+ display: none;
5220
5384
  }
5221
- .vd-sidebar-tabs .vd-nav-item--wistera.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--wistera.vd-nav-item--pending {
5222
- border-color: #965fb0;
5385
+ .vd-sidebar.vd-sidebar--new .vd-sidebar-expander, .vd-sidebar.vd-sidebar--new .vd-nav-item-icon--new {
5386
+ display: block !important;
5223
5387
  }
5224
5388
 
5225
5389
  .vd-splash-fullscreen-container {
@@ -5815,7 +5979,7 @@ table {
5815
5979
  .vd-toast-notification {
5816
5980
  position: relative;
5817
5981
  display: flex;
5818
- align-items: start;
5982
+ align-items: flex-start;
5819
5983
  justify-content: center;
5820
5984
  width: calc(100% - 20px);
5821
5985
  max-width: 680px;
@@ -5900,7 +6064,7 @@ table {
5900
6064
  height: 100%;
5901
6065
  }
5902
6066
  .vd-topbar .vd-logo {
5903
- padding-left: 34px;
6067
+ padding-left: 23px;
5904
6068
  }
5905
6069
 
5906
6070
  @media only screen and (max-width: 480px) {
@@ -6750,6 +6914,7 @@ td.vd-hide-print {
6750
6914
  .nv-topnav {
6751
6915
  position: relative;
6752
6916
  width: 100%;
6917
+ z-index: 1;
6753
6918
  }
6754
6919
  @media print {
6755
6920
  .nv-topnav {
@@ -6881,105 +7046,6 @@ td.vd-hide-print {
6881
7046
  display: none;
6882
7047
  }
6883
7048
  }
6884
- .vd-sidebar:empty {
6885
- display: none;
6886
- }
6887
-
6888
- .nv-sidenav {
6889
- transform: translateX(0);
6890
- transition: transform 0.2s ease-in-out;
6891
- display: block;
6892
- height: calc(100% - 50px);
6893
- z-index: 200;
6894
- }
6895
- .nv-sidenav .nv-sidenav-modal-close {
6896
- display: none;
6897
- top: 10px;
6898
- right: -60px;
6899
- }
6900
- .nv-sidenav .vd-sidebar-tabs {
6901
- box-shadow: none;
6902
- height: auto;
6903
- }
6904
- .nv-sidenav .vd-sidebar-drawer {
6905
- border-right: none;
6906
- height: auto;
6907
- }
6908
- @media print {
6909
- .nv-sidenav {
6910
- display: none;
6911
- }
6912
- }
6913
- @supports (height: min-content) {
6914
- .nv-sidenav .vd-sidebar-tabs,
6915
- .nv-sidenav .vd-sidebar-drawer {
6916
- height: min-content;
6917
- }
6918
- }
6919
- @media only screen and (max-width: 1200px) {
6920
- .nv-sidenav {
6921
- z-index: 302;
6922
- }
6923
- }
6924
-
6925
- .nv-sidenav-content {
6926
- background: linear-gradient(to right, var(--vd-colour--nav-side-tabs) 0, var(--vd-colour--nav-side-tabs) 85px, var(--vd-colour--nav-side-drawer) 85px, var(--vd-colour--nav-side-drawer) 145px);
6927
- width: auto;
6928
- overflow-y: auto;
6929
- overflow-x: hidden;
6930
- height: 100%;
6931
- display: flex;
6932
- box-shadow: 1px 0 0 0 var(--vd-colour--framing);
6933
- }
6934
-
6935
- .nv-sidenav--pad-drawer {
6936
- padding-right: 145px;
6937
- }
6938
-
6939
- .nv-display-sidenav-modal .nv-sidenav {
6940
- z-index: 411;
6941
- }
6942
- .nv-display-sidenav-modal .nv-sidenav .nv-sidenav-modal-close {
6943
- display: flex;
6944
- }
6945
-
6946
- @media only screen and (max-width: 1200px) {
6947
- .nv-sidenav {
6948
- position: absolute;
6949
- left: 0;
6950
- height: 100%;
6951
- transform: translateX(calc(-100% - 1px));
6952
- }
6953
- .nv-sidenav .nv-sidenav-content {
6954
- background: linear-gradient(to right, var(--vd-colour--nav-side-tabs) 0, var(--vd-colour--nav-side-tabs) 85px, var(--vd-colour--nav-side-drawer) 85px, var(--vd-colour--nav-side-drawer) 145px);
6955
- }
6956
- .nv-sidenav .vd-sidebar-tabs {
6957
- width: 85px;
6958
- }
6959
- .nv-sidenav .vd-sidebar-drawer {
6960
- width: 145px;
6961
- }
6962
-
6963
- .nv-display-sidenav-modal .nv-sidenav {
6964
- transform: translateX(0);
6965
- }
6966
-
6967
- .nv-sidenav--pad-drawer {
6968
- padding-right: 0;
6969
- }
6970
- }
6971
- @media only screen and (min-width: 1201px) {
6972
- .nv-sidenav--no-drawer {
6973
- width: 85px;
6974
- }
6975
-
6976
- .nv-display-sidenav-modal .nv-sidenav--no-drawer .nv-sidenav-content {
6977
- position: absolute;
6978
- }
6979
- .nv-display-sidenav-modal .nv-sidenav--no-drawer .nv-sidenav-modal-close {
6980
- right: -205px;
6981
- }
6982
- }
6983
7049
  .nv-account-banner {
6984
7050
  display: block;
6985
7051
  }
@@ -7988,6 +8054,9 @@ td.vd-hide-print {
7988
8054
  .vd-table-list-row {
7989
8055
  border-bottom: 1px solid var(--vd-colour--framing);
7990
8056
  }
8057
+ .vd-table-list-row.vd-table-list-row--active {
8058
+ background-color: var(--vd-colour--go-highlight);
8059
+ }
7991
8060
 
7992
8061
  .vd-table-list-row--expandable:hover {
7993
8062
  cursor: pointer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lightspeed/design-system-css",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "Lightspeed's Design System in CSS",
5
5
  "author": "Lightspeed Commerce Inc.",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -17,12 +17,12 @@
17
17
  "build": "yarn lint && yarn build:css && yarn build:retrocompatibility",
18
18
  "build:css": "sass --load-path=../../node_modules -q src/index.scss:dist/index.css",
19
19
  "build:retrocompatibility": "cp dist/index.css dist/vend-styles.css",
20
- "build:watch": "yarn lint && yarn build:css --watch",
20
+ "watch": "yarn lint && yarn build:css --watch",
21
21
  "test": "true",
22
22
  "lint": "yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"
23
23
  },
24
24
  "dependencies": {
25
- "@lightspeed/design-system-tokens": "1.0.0"
25
+ "@lightspeed/design-system-tokens": "^1.0.0"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@types/node": "^16.11.2",
@@ -164,6 +164,9 @@
164
164
  // -----------------------------------------------------------------
165
165
  .vd-table-list-row {
166
166
  border-bottom: vd-border(framing);
167
+ &.vd-table-list-row--active {
168
+ background-color: vd-colour(go-highlight);
169
+ }
167
170
  }
168
171
 
169
172
  // TABLE ROWS - EXPANDABLE ROW
@@ -0,0 +1,14 @@
1
+ .vd-nav-divider {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+ height: 25px;
6
+
7
+ &::before {
8
+ content: '';
9
+ display: block;
10
+ height: 1px;
11
+ width: 20px;
12
+ background-color: vd-colour(keyline);
13
+ }
14
+ }
@@ -0,0 +1,92 @@
1
+ /**
2
+ Temporary overrides for feature flag `sidebar_new`.
3
+
4
+ Those overrides bring back the old sidebar styles unless
5
+ the class `vd-sidebar--new` is set.
6
+
7
+ @REMOVEME: When flag `sidebar_new` is fully rolled out
8
+ */
9
+ .vd-sidebar:not(.vd-sidebar--new) {
10
+ .vd-sidebar-tabs {
11
+ width: 85px;
12
+ font-size: 12px;
13
+
14
+ padding-top: 0;
15
+ padding-bottom: 0;
16
+
17
+ .vd-nav-item {
18
+ width: 100%;
19
+ height: 75px;
20
+ }
21
+
22
+ .vd-nav-item--active {
23
+ &::before {
24
+ content: none;
25
+ }
26
+ }
27
+
28
+ .vd-nav-item-action {
29
+ flex-direction: column;
30
+ justify-content: center;
31
+ position: relative;
32
+ }
33
+
34
+ .vd-nav-item-icon {
35
+ width: auto;
36
+ padding-left: 0;
37
+ padding-right: 0;
38
+ }
39
+
40
+ .vd-nav-item-label {
41
+ font-size: 12px;
42
+ font-weight: $vd-font-weight--bold;
43
+ }
44
+
45
+ .vd-nav-divider, .vd-sidebar-expander, .vd-nav-item-icon--new {
46
+ display: none;
47
+ }
48
+ }
49
+
50
+ .vd-sidebar-drawer {
51
+ width: 155px;
52
+
53
+ padding-top: 0;
54
+ padding-bottom: 0;
55
+
56
+ .vd-nav-item {
57
+ font-weight: $vd-font-weight--bold;
58
+ }
59
+
60
+ .vd-nav-item--active {
61
+ &::before {
62
+ content: none;
63
+ }
64
+ }
65
+
66
+ .vd-nav-item-action {
67
+ padding: 20px 10px;
68
+ }
69
+
70
+ .vd-nav-item-label {
71
+ font-size: 14px;
72
+ }
73
+ }
74
+ }
75
+
76
+ .nv-topnav-container:not(.vd-sidebar--new) {
77
+ .vd-logo {
78
+ padding-left: 34px;
79
+ }
80
+ }
81
+
82
+ .vd-sidebar.vd-sidebar--new {
83
+ .vd-sidebar-tabs {
84
+ .vd-nav-item-icon:not(.vd-nav-item-icon--new) {
85
+ display: none;
86
+ }
87
+ }
88
+
89
+ .vd-sidebar-expander, .vd-nav-item-icon--new {
90
+ display: block !important;
91
+ }
92
+ }
@@ -0,0 +1,23 @@
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
+ }