@geotab/zenith 3.14.0-beta.0 → 3.14.0-beta.2

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.
Files changed (17) hide show
  1. package/dist/commonStyles/caption/caption.less +5 -3
  2. package/dist/commonStyles/colors/colors.less +19 -4
  3. package/dist/commonStyles/columnsList.less +0 -1
  4. package/dist/commonStyles/common.less +2 -1
  5. package/dist/commonStyles/ellipsis.less +1 -1
  6. package/dist/commonStyles/fonts/roboto.less +7 -7
  7. package/dist/commonStyles/link/link.less +1 -1
  8. package/dist/commonStyles/notSelectable.less +4 -0
  9. package/dist/commonStyles/pillStyles/pillContent.less +2 -6
  10. package/dist/commonStyles/pillStyles/pillStyles.less +1 -1
  11. package/dist/commonStyles/pillStyles/pillTextContent.less +0 -3
  12. package/dist/commonStyles/pillStyles/pillTypes.less +0 -10
  13. package/dist/commonStyles/rangeFieldMixin.less +6 -3
  14. package/dist/commonStyles/shadows/shadows.less +3 -3
  15. package/dist/commonStyles/typography/typography.less +24 -24
  16. package/dist/index.css +519 -402
  17. package/package.json +1 -10
package/dist/commonStyles/caption/caption.less CHANGED
@@ -1,5 +1,6 @@
1
1
  .zen-caption {
2
2
  @button-line-height: 16px;
3
+
3
4
  display: inline-flex;
4
5
  align-items: center;
5
6
  overflow: hidden;
@@ -9,7 +10,7 @@
9
10
  justify-content: center;
10
11
 
11
12
  .zen-caption__content {
12
- margin-inline-end: 0;
13
+ margin-right: 0;
13
14
  }
14
15
  }
15
16
 
@@ -21,7 +22,8 @@
21
22
  line-height: @button-line-height;
22
23
  font-weight: 400;
23
24
  white-space: nowrap;
24
- margin-inline: 0 auto;
25
+ margin-left: 0;
26
+ margin-right: auto;
25
27
  }
26
28
 
27
29
  &--hidden {
@@ -31,7 +33,7 @@
31
33
  &--wrapped {
32
34
  .zen-caption__content {
33
35
  white-space: normal;
34
- overflow-wrap: break-word;
36
+ word-wrap: break-word;
35
37
  }
36
38
  }
37
39
  }
package/dist/commonStyles/colors/colors.less CHANGED
@@ -7,11 +7,11 @@
7
7
  --text-nav-highlight: #0069bf;
8
8
  --text-error-message: #c51a11;
9
9
  --text-button-disabled: #c0ccd8;
10
- --text-reverse-primary: #fff;
10
+ --text-reverse-primary: #ffffff;
11
11
  --text-reverse-primary-button: var(--text-reverse-primary);
12
12
 
13
13
  // backgrounds
14
- --backgrounds-main: #fff;
14
+ --backgrounds-main: #ffffff;
15
15
  --backgrounds-content-0: #f9fafb;
16
16
  --backgrounds-content-1: #f2f5f7;
17
17
  --backgrounds-content-2: #d9e1e8;
@@ -36,22 +36,28 @@
36
36
  --action-primary--default: #0078d3;
37
37
  --action-primary--hover: #005aa8;
38
38
  --action-primary--active: #004080;
39
+
39
40
  --action-secondary--default: #4e677e;
40
41
  --action-secondary--hover: #3e5265;
41
42
  --action-secondary--active: #2f3d4c;
43
+
42
44
  --action-destructive--default: #c51a11;
43
45
  --action-destructive--hover: #b11810;
44
46
  --action-destructive--active: #a01f0e;
47
+
45
48
  --action-tertiary--hover: #e6ebef;
46
49
  --action-tertiary--active: #3e5265;
47
50
 
48
51
  // accents
49
52
  --accents-warning--main: #fef7ed;
50
53
  --accents-warning--detail: #59480d;
54
+
51
55
  --accents-error--main: #ffeceb;
52
56
  --accents-error--detail: #a01f0e;
57
+
53
58
  --accents-success--main: #edfef2;
54
59
  --accents-success--detail: #2b6436;
60
+
55
61
  --accents-general--main: #ebf6ff;
56
62
  --accents-general--detail: #25477b;
57
63
 
@@ -59,11 +65,13 @@
59
65
  --chart-sequential-green-1: #4aa75e;
60
66
  --chart-divergent-red-blue-3: #b72931;
61
67
  --chart-sequential-blue-5: #0c74c3;
68
+
62
69
  --duty-status-workday: #faad41;
63
70
  --duty-status-cycle: #c0c1c6;
64
71
  --duty-status-rest: #fe6867;
65
72
  --duty-status-drive: #49c649;
66
73
  --duty-status-exemption: #4e677e;
74
+
67
75
  --data--categorical-light-blue: #3ccde5;
68
76
  --data--categorical-blue: #428aff;
69
77
  --data--categorical-purple: #8256e5;
@@ -76,7 +84,7 @@
76
84
 
77
85
  .zen-dark {
78
86
  // text
79
- --text-primary: #fff;
87
+ --text-primary: #ffffff;
80
88
  --text-secondary: #c0ccd8;
81
89
  --text-placeholder: #a6b8c9;
82
90
  --text-hyperlink: #ebf6ff;
@@ -96,7 +104,7 @@
96
104
  --backgrounds-overlay: rgba(31, 40, 51, 0.4);
97
105
  --backgrounds-primary-brand: #4cb2ff;
98
106
  --backgrounds-reverse-2: #5282cb;
99
- --backgrounds-reverse-1: #fff;
107
+ --backgrounds-reverse-1: #ffffff;
100
108
  --backgrounds-reverse-0: #f2f5f7;
101
109
 
102
110
  // borders
@@ -111,22 +119,28 @@
111
119
  --action-primary--default: #4cb2ff;
112
120
  --action-primary--hover: #9ed5ff;
113
121
  --action-primary--active: #ebf6ff;
122
+
114
123
  --action-secondary--default: #e6ebef;
115
124
  --action-secondary--hover: #f2f5f7;
116
125
  --action-secondary--active: #f9fafb;
126
+
117
127
  --action-destructive--default: #f7a1a2;
118
128
  --action-destructive--hover: #fac7c7;
119
129
  --action-destructive--active: #ffeceb;
130
+
120
131
  --action-tertiary--hover: rgba(31, 40, 51, 0.07);
121
132
  --action-tertiary--active: rgba(31, 40, 51, 0.14);
122
133
 
123
134
  // accents
124
135
  --accents-warning--main: #a17a18;
125
136
  --accents-warning--detail: #fef7ed;
137
+
126
138
  --accents-error--main: #c51a11;
127
139
  --accents-error--detail: #ffeceb;
140
+
128
141
  --accents-success--main: #46af55;
129
142
  --accents-success--detail: #edfef2;
143
+
130
144
  --accents-general--main: #396dbc;
131
145
  --accents-general--detail: #eff4fa;
132
146
 
@@ -134,6 +148,7 @@
134
148
  --chart-sequential-green-1: #4aa75e;
135
149
  --chart-divergent-red-blue-3: #b72931;
136
150
  --chart-sequential-blue-5: #0c74c3;
151
+
137
152
  --duty-status-workday: #59480d;
138
153
  --duty-status-cycle: #3e5265;
139
154
  --duty-status-rest: #a01f0e;
package/dist/commonStyles/columnsList.less CHANGED
@@ -36,7 +36,6 @@
36
36
  padding: (2 / @rem) (8 / @rem);
37
37
  display: flex;
38
38
  justify-content: flex-end;
39
-
40
39
  .zen-columns-list__reset:focus {
41
40
  outline: none;
42
41
  border: 1px solid var(--borders-form-field--active);
package/dist/commonStyles/common.less CHANGED
@@ -9,6 +9,7 @@
9
9
  @rem: 16rem;
10
10
 
11
11
  @import "typography/typography.less";
12
+
12
13
  @import "colors/colors.less";
13
14
  @import "caption/caption.less";
14
15
  @import "ellipsis.less";
@@ -38,6 +39,7 @@
38
39
  }
39
40
 
40
41
  .zen-visually-hidden {
42
+ clip: rect(0 0 0 0);
41
43
  clip-path: inset(50%);
42
44
  height: 1px;
43
45
  overflow: hidden;
@@ -49,7 +51,6 @@
49
51
  // Styles reset
50
52
  .box-sizing() {
51
53
  box-sizing: border-box;
52
-
53
54
  * {
54
55
  box-sizing: border-box;
55
56
  }
package/dist/commonStyles/ellipsis.less CHANGED
@@ -2,5 +2,5 @@
2
2
  overflow: hidden;
3
3
  text-overflow: ellipsis;
4
4
  white-space: nowrap;
5
- overflow-wrap: normal;
5
+ word-wrap: normal;
6
6
  }
package/dist/commonStyles/fonts/roboto.less CHANGED
@@ -1,5 +1,5 @@
1
1
  @font-face {
2
- font-family: Roboto;
2
+ font-family: "Roboto";
3
3
  font-style: normal;
4
4
  font-weight: 300;
5
5
  src:
@@ -8,7 +8,7 @@
8
8
  }
9
9
 
10
10
  @font-face {
11
- font-family: Roboto;
11
+ font-family: "Roboto";
12
12
  font-style: normal;
13
13
  font-weight: 400;
14
14
  src:
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  @font-face {
20
- font-family: Roboto;
20
+ font-family: "Roboto";
21
21
  font-style: normal;
22
22
  font-weight: 500;
23
23
  src:
@@ -26,7 +26,7 @@
26
26
  }
27
27
 
28
28
  @font-face {
29
- font-family: Roboto;
29
+ font-family: "Roboto";
30
30
  font-style: normal;
31
31
  font-weight: 700;
32
32
  src:
@@ -35,7 +35,7 @@
35
35
  }
36
36
 
37
37
  @font-face {
38
- font-family: Roboto;
38
+ font-family: "Roboto";
39
39
  font-style: italic;
40
40
  font-weight: 300;
41
41
  src:
@@ -44,7 +44,7 @@
44
44
  }
45
45
 
46
46
  @font-face {
47
- font-family: Roboto;
47
+ font-family: "Roboto";
48
48
  font-style: italic;
49
49
  font-weight: 400;
50
50
  src:
@@ -53,7 +53,7 @@
53
53
  }
54
54
 
55
55
  @font-face {
56
- font-family: Roboto;
56
+ font-family: "Roboto";
57
57
  font-style: italic;
58
58
  font-weight: 700;
59
59
  src:
package/dist/commonStyles/link/link.less CHANGED
@@ -7,7 +7,7 @@
7
7
  cursor: pointer;
8
8
  background: none;
9
9
  border: none;
10
- overflow-wrap: break-word;
10
+ word-wrap: break-word;
11
11
 
12
12
  &:hover,
13
13
  &:focus,
package/dist/commonStyles/notSelectable.less CHANGED
@@ -1,4 +1,8 @@
1
1
  .zen-not-selectable {
2
2
  -webkit-touch-callout: none;
3
+ -webkit-user-select: none;
4
+ -khtml-user-select: none;
5
+ -moz-user-select: none;
6
+ -ms-user-select: none;
3
7
  user-select: none;
4
8
  }
package/dist/commonStyles/pillStyles/pillContent.less CHANGED
@@ -10,12 +10,14 @@
10
10
  @pill-height--mobile: 34px;
11
11
 
12
12
  .zen-body-s-400();
13
+ display: flex;
13
14
  align-items: center;
14
15
  justify-content: space-between;
15
16
  border-radius: (30 / @rem);
16
17
  height: @pill-height;
17
18
  display: grid;
18
19
  grid-auto-flow: column;
20
+
19
21
  gap: (8 / @rem);
20
22
 
21
23
  &--icon-left {
@@ -42,11 +44,9 @@
42
44
  &--hidden {
43
45
  gap: (4 / @rem);
44
46
  }
45
-
46
47
  &.zen-pill-new-content--drive,
47
48
  &.zen-pill-new-content--drive-tablet {
48
49
  height: @pill-height--drive;
49
-
50
50
  .zen-pill-non-actionable__icon {
51
51
  min-width: (16 / @rem);
52
52
  max-width: 16px;
@@ -70,11 +70,9 @@
70
70
  }
71
71
  }
72
72
  }
73
-
74
73
  &.zen-pill-new-content--mobile {
75
74
  height: @pill-height--mobile;
76
75
  .zen-body-m-400-short();
77
-
78
76
  .zen-pill-non-actionable__icon {
79
77
  min-width: (16 / @rem);
80
78
  max-width: 16px;
@@ -98,11 +96,9 @@
98
96
  }
99
97
  }
100
98
  }
101
-
102
99
  &.zen-pill-new-content--drive {
103
100
  .zen-body-s-400-drive();
104
101
  }
105
-
106
102
  &.zen-pill-new-content--drive-tablet {
107
103
  .zen-body-s-400-drive();
108
104
  }
package/dist/commonStyles/pillStyles/pillStyles.less CHANGED
@@ -6,7 +6,7 @@
6
6
  color: var(--text-primary);
7
7
  align-items: center;
8
8
  justify-content: space-between;
9
- padding: (4 / @rem) (12 / @rem);
9
+ padding: (4 / @rem) (12 / @rem) (4 / @rem) (12 / @rem);
10
10
  border-radius: (30 / @rem);
11
11
  background: var(--backgrounds-content-1);
12
12
  }
package/dist/commonStyles/pillStyles/pillTextContent.less CHANGED
@@ -7,16 +7,13 @@
7
7
  &--hidden {
8
8
  visibility: hidden;
9
9
  }
10
-
11
10
  &.zen-pill-text-content--drive,
12
11
  &.zen-pill-text-content--drive-tablet {
13
12
  height: 20px;
14
13
  }
15
-
16
14
  &.zen-pill-text-content--drive {
17
15
  .zen-body-s-400-drive();
18
16
  }
19
-
20
17
  &.zen-pill-text-content--drive-tablet {
21
18
  .zen-body-s-400-drive();
22
19
  }
package/dist/commonStyles/pillStyles/pillTypes.less CHANGED
@@ -5,10 +5,8 @@
5
5
  background: var(--backgrounds-content-1);
6
6
  color: var(--text-primary);
7
7
  fill: var(--text-primary);
8
-
9
8
  .zen-pill-non-actionable__close-button {
10
9
  fill: var(--text-primary);
11
-
12
10
  &:active .zen-pill-non-actionable__close-icon,
13
11
  &:hover .zen-pill-non-actionable__close-icon,
14
12
  &:focus .zen-pill-non-actionable__close-icon {
@@ -23,10 +21,8 @@
23
21
  color: var(--accents-success--detail);
24
22
  background-color: var(--accents-success--main);
25
23
  fill: var(--accents-success--detail);
26
-
27
24
  .zen-pill-non-actionable__close-button {
28
25
  fill: var(--accents-success--detail);
29
-
30
26
  &:active .zen-pill-non-actionable__close-icon,
31
27
  &:hover .zen-pill-non-actionable__close-icon,
32
28
  &:focus .zen-pill-non-actionable__close-icon {
@@ -41,10 +37,8 @@
41
37
  background-color: var(--accents-error--main);
42
38
  color: var(--accents-error--detail);
43
39
  fill: var(--accents-error--detail);
44
-
45
40
  .zen-pill-non-actionable__close-button {
46
41
  fill: var(--accents-error--detail);
47
-
48
42
  &:active .zen-pill-non-actionable__close-icon,
49
43
  &:hover .zen-pill-non-actionable__close-icon,
50
44
  &:focus .zen-pill-non-actionable__close-icon {
@@ -59,10 +53,8 @@
59
53
  background-color: var(--accents-warning--main);
60
54
  color: var(--accents-warning--detail);
61
55
  fill: var(--accents-warning--detail);
62
-
63
56
  .zen-pill-non-actionable__close-button {
64
57
  fill: var(--accents-warning--detail);
65
-
66
58
  &:active .zen-pill-non-actionable__close-icon,
67
59
  &:hover .zen-pill-non-actionable__close-icon,
68
60
  &:focus .zen-pill-non-actionable__close-icon {
@@ -77,10 +69,8 @@
77
69
  background-color: var(--accents-general--main);
78
70
  color: var(--accents-general--detail);
79
71
  fill: var(--accents-general--detail);
80
-
81
72
  .zen-pill-non-actionable__close-button {
82
73
  fill: var(--accents-general--detail);
83
-
84
74
  &:active .zen-pill-non-actionable__close-icon,
85
75
  &:hover .zen-pill-non-actionable__close-icon,
86
76
  &:focus .zen-pill-non-actionable__close-icon {
package/dist/commonStyles/rangeFieldMixin.less CHANGED
@@ -3,12 +3,14 @@
3
3
  grid-template-columns: minmax(min-content, auto) minmax(auto, 168px) minmax(0, auto);
4
4
  grid-template-rows: auto auto;
5
5
  gap: (4 / @rem) (8 / @rem);
6
- place-items: center start;
6
+ align-items: center;
7
+ justify-items: start;
7
8
  }
8
9
 
9
10
  .zen-range-field-wrapper-row {
10
11
  display: grid;
11
- place-items: center start;
12
+ align-items: center;
13
+ justify-items: start;
12
14
  grid-template-columns:
13
15
  minmax((24 / @rem), (32 / @rem))
14
16
  minmax((64 / @rem), (64 / @rem))
@@ -16,5 +18,6 @@
16
18
  minmax((24 / @rem), (32 / @rem))
17
19
  minmax((64 / @rem), (64 / @rem))
18
20
  minmax((24 / @rem), (32 / @rem));
19
- gap: (4 / @rem) (8 / @rem);
21
+ row-gap: (4 / @rem);
22
+ column-gap: (8 / @rem);
20
23
  }
package/dist/commonStyles/shadows/shadows.less CHANGED
@@ -1,11 +1,11 @@
1
1
  .zen-shadow-dropdown-default {
2
- box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
2
+ box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
3
3
  }
4
4
 
5
5
  .zen-card-shadow {
6
- box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
6
+ box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
7
7
  }
8
8
 
9
9
  .zen-chip-shadow {
10
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
10
+ box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
11
11
  }
package/dist/commonStyles/typography/typography.less CHANGED
@@ -441,7 +441,7 @@
441
441
  }
442
442
 
443
443
  // Responsive overrides (mobile — max-width: 640px)
444
- @media (width <= 640px) {
444
+ @media (max-width: 640px) {
445
445
  // Standard
446
446
  .zen-heading-xl-300 {
447
447
  .zen-font(@main-font-family, @heading-01-font-mobile-size, @heading-01-line-height, @weight: @heading-01-weight);
@@ -548,10 +548,10 @@
548
548
  }
549
549
 
550
550
  :root {
551
- --main-font: roboto, "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
552
- --main-font-data: "Roboto Mono", "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
553
- --data-font-drive: "Roboto Mono", "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
554
- --arabic-font-family: "Noto Sans Arabic", roboto, "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
551
+ --main-font: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
552
+ --main-font-data: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
553
+ --data-font-drive: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
554
+ --arabic-font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
555
555
  }
556
556
 
557
557
  // Labels
@@ -571,7 +571,7 @@
571
571
  .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400);
572
572
  }
573
573
 
574
- @media (width <= 640px) {
574
+ @media (max-width: 640px) {
575
575
  .tablet-label-400-drive {
576
576
  .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400);
577
577
  }
@@ -619,7 +619,7 @@
619
619
  .font(var(--main-font), 18px, @line-height: 28px, @letter-spacing: 0, @weight: 400);
620
620
  }
621
621
 
622
- @media (width <= 640px) {
622
+ @media (max-width: 640px) {
623
623
  .tablet-body-l-400-drive {
624
624
  .font(var(--main-font), 18px, @line-height: 28px, @letter-spacing: 0, @weight: 400);
625
625
  }
@@ -635,7 +635,7 @@
635
635
  .font(var(--main-font), 16px, @line-height: 20px, @weight: 400);
636
636
  }
637
637
 
638
- @media (width <= 640px) {
638
+ @media (max-width: 640px) {
639
639
  .tablet-body-m-400-short-drive {
640
640
  .font(var(--main-font), 16px, @line-height: 20px, @weight: 400);
641
641
  }
@@ -651,7 +651,7 @@
651
651
  .font(var(--main-font), 16px, @line-height: 26px, @weight: 400);
652
652
  }
653
653
 
654
- @media (width <= 640px) {
654
+ @media (max-width: 640px) {
655
655
  .tablet-body-m-400-tall-drive {
656
656
  .font(var(--main-font), 16px, @line-height: 26px, @weight: 400);
657
657
  }
@@ -667,7 +667,7 @@
667
667
  .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 700);
668
668
  }
669
669
 
670
- @media (width <= 640px) {
670
+ @media (max-width: 640px) {
671
671
  .tablet-body-s-700-drive {
672
672
  .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 700);
673
673
  }
@@ -683,7 +683,7 @@
683
683
  .font(var(--main-font), 14px, @line-height: 20px, @letter-spacing: 0.32px, @weight: 400);
684
684
  }
685
685
 
686
- @media (width <= 640px) {
686
+ @media (max-width: 640px) {
687
687
  .tablet-body-s-400-drive {
688
688
  .font(var(--main-font), 14px, @line-height: 20px, @letter-spacing: 0.32px, @weight: 400);
689
689
  }
@@ -699,7 +699,7 @@
699
699
  .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400, @style: italic);
700
700
  }
701
701
 
702
- @media (width <= 640px) {
702
+ @media (max-width: 640px) {
703
703
  .tablet-body-s-400-italic-drive {
704
704
  .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400, @style: italic);
705
705
  }
@@ -716,7 +716,7 @@
716
716
  .font(var(--main-font), 20px, @line-height: 36px, @weight: 300);
717
717
  }
718
718
 
719
- @media (width <= 640px) {
719
+ @media (max-width: 640px) {
720
720
  .heading-xl-300 {
721
721
  .font(var(--main-font), 20px, @line-height: 36px, @weight: 300);
722
722
  }
@@ -737,7 +737,7 @@
737
737
  .font(var(--main-font), 18px, @line-height: 28px, @weight: 300);
738
738
  }
739
739
 
740
- @media (width <= 640px) {
740
+ @media (max-width: 640px) {
741
741
  .heading-m-300 {
742
742
  .font(var(--main-font), 18px, @line-height: 28px, @weight: 300);
743
743
  }
@@ -773,7 +773,7 @@
773
773
  .font(var(--main-font), 24px, 32px, @weight: 300);
774
774
  }
775
775
 
776
- @media (width <= 640px) {
776
+ @media (max-width: 640px) {
777
777
  .tablet-heading-xl-300-drive {
778
778
  .font(var(--main-font), 24px, 32px, @weight: 300);
779
779
  }
@@ -789,7 +789,7 @@
789
789
  .font(var(--main-font), 22px, 28px, @weight: 400);
790
790
  }
791
791
 
792
- @media (width <= 640px) {
792
+ @media (max-width: 640px) {
793
793
  .tablet-heading-l-400-drive {
794
794
  .font(var(--main-font), 22px, 28px, @weight: 400);
795
795
  }
@@ -805,7 +805,7 @@
805
805
  .font(var(--main-font), 18px, 24px, @weight: 300);
806
806
  }
807
807
 
808
- @media (width <= 640px) {
808
+ @media (max-width: 640px) {
809
809
  .tablet-heading-m-300-drive {
810
810
  .font(var(--main-font), 18px, 24px, @weight: 300);
811
811
  }
@@ -821,7 +821,7 @@
821
821
  .font(var(--main-font), 18px, 26px, @weight: 500);
822
822
  }
823
823
 
824
- @media (width <= 640px) {
824
+ @media (max-width: 640px) {
825
825
  .tablet-heading-m-500-drive {
826
826
  .font(var(--main-font), 18px, 26px, @weight: 500);
827
827
  }
@@ -837,7 +837,7 @@
837
837
  .font(var(--main-font), 16px, 20px, 0.16px, 500);
838
838
  }
839
839
 
840
- @media (width <= 640px) {
840
+ @media (max-width: 640px) {
841
841
  .tablet-heading-s-500-drive {
842
842
  .font(var(--main-font), 16px, 20px, 0.16px, 500);
843
843
  }
@@ -861,7 +861,7 @@
861
861
  .font(var(--main-font), 16px, 18px, 0.16px, 300);
862
862
  }
863
863
 
864
- @media (width <= 640px) {
864
+ @media (max-width: 640px) {
865
865
  .tablet-heading-s-300-drive {
866
866
  .font(var(--main-font), 16px, 18px, 0.16px, 300);
867
867
  }
@@ -909,7 +909,7 @@
909
909
  .font(var(--data-font-drive), 32px, 40px, @arabic-font: var(--data-font-drive));
910
910
  }
911
911
 
912
- @media (width <= 640px) {
912
+ @media (max-width: 640px) {
913
913
  .tablet-data-xl-drive {
914
914
  .font(var(--data-font-drive), 32px, 40px, @arabic-font: var(--data-font-drive));
915
915
  }
@@ -925,7 +925,7 @@
925
925
  .font(var(--data-font-drive), 20px, 24px, @arabic-font: var(--data-font-drive));
926
926
  }
927
927
 
928
- @media (width <= 640px) {
928
+ @media (max-width: 640px) {
929
929
  .tablet-data-l-drive {
930
930
  .font(var(--data-font-drive), 20px, 24px, @arabic-font: var(--data-font-drive));
931
931
  }
@@ -941,7 +941,7 @@
941
941
  .font(var(--data-font-drive), 16px, 21px, @arabic-font: var(--data-font-drive));
942
942
  }
943
943
 
944
- @media (width <= 640px) {
944
+ @media (max-width: 640px) {
945
945
  .tablet-data-m-drive {
946
946
  .font(var(--data-font-drive), 16px, 21px, @arabic-font: var(--data-font-drive));
947
947
  }
@@ -957,7 +957,7 @@
957
957
  .font(var(--data-font-drive), 16px, 24px, @arabic-font: var(--data-font-drive));
958
958
  }
959
959
 
960
- @media (width <= 640px) {
960
+ @media (max-width: 640px) {
961
961
  .tablet-data-s-drive {
962
962
  .font(var(--data-font-drive), 16px, 24px, @arabic-font: var(--data-font-drive));
963
963
  }