@phillips/seldon 1.195.2 → 1.196.0

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.
@@ -1,5 +1,5 @@
1
1
  /**
2
2
  * Used to hide or show components based on the current breakpoint in a SSR friendly way
3
3
  */
4
- export declare const SSRMediaQuery: import('@artsy/fresnel/dist/Media').CreateMediaResults<"sm" | "md" | "lg" | "xl" | "xsm", never>;
4
+ export declare const SSRMediaQuery: import('@artsy/fresnel/dist/Media').CreateMediaResults<"sm" | "md" | "lg" | "xl" | "snw-mobile" | "xsm", never>;
5
5
  export declare const ssrMediaQueryStyle: string;
@@ -101,6 +101,20 @@
101
101
  }
102
102
  }
103
103
 
104
+ @if $breakpoint == $size-snw-mobile or $breakpoint == $breakpoint-snw-mobile {
105
+ @if $type == 'min' {
106
+ @media (min-width: $breakpoint-snw-mobile) {
107
+ @content;
108
+ }
109
+ }
110
+
111
+ @if $type == 'max' {
112
+ @media (max-width: calc($breakpoint-snw-mobile - 1px)) {
113
+ @content;
114
+ }
115
+ }
116
+ }
117
+
104
118
  @if $breakpoint == $size-md or $breakpoint == $breakpoint-md {
105
119
  // $breakpoint-md: 961px;
106
120
  @if $type == 'min' {
@@ -180,6 +180,9 @@ $breakpoint-md: 961px;
180
180
  $breakpoint-lg: 1401px;
181
181
  $breakpoint-xl: 1801px;
182
182
 
183
+ // Temporary token for mobile breakpoint added to support [L3-7681](https://phillipsauctions.atlassian.net/browse/L3-7681)
184
+ $breakpoint-snw-mobile: 768px;
185
+
183
186
  ////////////////////////
184
187
  /// FONT SIZE TOKENS:
185
188
  ///////////////////////
@@ -491,6 +494,7 @@ $size-md: 'md';
491
494
  $size-lg: 'lg';
492
495
  $size-xl: 'xl';
493
496
  $size-xxl: 'xxl';
497
+ $size-snw-mobile: 'snw-mobile';
494
498
  $default-transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);
495
499
  $drawer-content-transition: 350ms cubic-bezier(0, 0, 0.2, 1);
496
500
  $default-overlay-transition: 350ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -180,6 +180,9 @@ $breakpoint-md: 961px;
180
180
  $breakpoint-lg: 1401px;
181
181
  $breakpoint-xl: 1801px;
182
182
 
183
+ // Temporary token for mobile breakpoint added to support [L3-7681](https://phillipsauctions.atlassian.net/browse/L3-7681)
184
+ $breakpoint-snw-mobile: 768px;
185
+
183
186
  ////////////////////////
184
187
  /// FONT SIZE TOKENS:
185
188
  ///////////////////////
@@ -491,6 +494,7 @@ $size-md: 'md';
491
494
  $size-lg: 'lg';
492
495
  $size-xl: 'xl';
493
496
  $size-xxl: 'xxl';
497
+ $size-snw-mobile: 'snw-mobile';
494
498
  $default-transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);
495
499
  $drawer-content-transition: 350ms cubic-bezier(0, 0, 0.2, 1);
496
500
  $default-overlay-transition: 350ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -9,7 +9,6 @@
9
9
  display: flex;
10
10
  gap: 1rem;
11
11
  overflow: hidden; /* Prevent overflow */
12
- padding: 0 $padding-md;
13
12
  position: relative;
14
13
  }
15
14
 
@@ -17,7 +16,8 @@
17
16
  background: none;
18
17
  border: none;
19
18
  border-bottom: 2px solid transparent;
20
- padding: $padding-xsm $padding-xsm $padding-sm;
19
+ padding-bottom: $snowflake-menu-padding;
20
+ padding-inline: 0;
21
21
  transition:
22
22
  background 0.2s ease,
23
23
  font-weight 0.2s ease-out,
@@ -33,6 +33,7 @@
33
33
  cursor: pointer;
34
34
  font-size: $body-size2;
35
35
  font-variation-settings: 'wght' 600;
36
+ letter-spacing: normal;
36
37
  line-height: $body-line-height-size2;
37
38
 
38
39
  &:hover {
@@ -6,7 +6,7 @@
6
6
  flex-direction: column;
7
7
  gap: $spacing-md;
8
8
 
9
- @include media($breakpoint-md) {
9
+ @include media($breakpoint-snw-mobile) {
10
10
  flex-direction: row;
11
11
  }
12
12
 
@@ -19,7 +19,7 @@
19
19
  justify-content: center;
20
20
  min-width: 100%;
21
21
 
22
- @include media($breakpoint-md) {
22
+ @include media($breakpoint-snw-mobile) {
23
23
  min-width: auto;
24
24
  }
25
25
 
@@ -37,7 +37,7 @@
37
37
  flex-grow: 1;
38
38
  gap: $spacing-micro;
39
39
 
40
- @include media($size-md, 'max') {
40
+ @include media($size-snw-mobile, 'max') {
41
41
  align-self: flex-start;
42
42
  }
43
43
  }
@@ -45,7 +45,7 @@
45
45
  &__ctas {
46
46
  flex: 0 0 0%;
47
47
 
48
- @include media($breakpoint-md) {
48
+ @include media($breakpoint-snw-mobile) {
49
49
  flex-basis: 191px;
50
50
  }
51
51
 
@@ -116,7 +116,7 @@
116
116
  align-items: flex-start;
117
117
  gap: $spacing-sm;
118
118
 
119
- @include media($size-md, 'max') {
119
+ @include media($size-snw-mobile, 'max') {
120
120
  flex-direction: row;
121
121
  }
122
122
 
@@ -8,7 +8,7 @@
8
8
  gap: $spacing-md;
9
9
  justify-content: center;
10
10
  max-width: none;
11
- padding: $spacing-lg $spacing-md;
11
+ padding: $spacing-lg 0;
12
12
 
13
13
  h1 {
14
14
  white-space: nowrap;
@@ -5,5 +5,6 @@ export declare const BREAKPOINTS: {
5
5
  md: number;
6
6
  lg: number;
7
7
  xl: number;
8
+ "snw-mobile": number;
8
9
  };
9
10
  export declare const DEFAULT_REM_SIZE = 16;
@@ -3,9 +3,11 @@ const s = {
3
3
  sm: 361,
4
4
  md: 961,
5
5
  lg: 1401,
6
- xl: 1801
7
- }, E = 16;
6
+ xl: 1801,
7
+ // Temporary token for mobile breakpoint added to support [L3-7681](https://phillipsauctions.atlassian.net/browse/L3-7681)
8
+ "snw-mobile": 768
9
+ }, m = 16;
8
10
  export {
9
11
  s as BREAKPOINTS,
10
- E as DEFAULT_REM_SIZE
12
+ m as DEFAULT_REM_SIZE
11
13
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phillips/seldon",
3
- "version": "1.195.2",
3
+ "version": "1.196.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/PhillipsAuctionHouse/seldon"