@ndla/ui 56.0.30-alpha.0 → 56.0.32-alpha.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.
@@ -256,6 +256,7 @@
256
256
  "textStyle]___[value:label.xsmall]___[cond:& a",
257
257
  "marginInlineStart]___[value:1]___[cond:& a",
258
258
  "borderRadius]___[value:0]___[cond:& img",
259
+ "zIndex]___[value:docked",
259
260
  "background]___[value:background.default]___[cond:_hover<___>& [data-byline-button]",
260
261
  "transform]___[value:scale(1.2)]___[cond:_hover<___>& button[data-expanded]",
261
262
  "transform]___[value:rotate(-45deg)]___[cond:& button[data-expanded='true']<___>& svg",
package/dist/styles.css CHANGED
@@ -49,6 +49,7 @@
49
49
  }
50
50
 
51
51
  .textStyle_heading\.large {
52
+ letter-spacing: -1px;
52
53
  font-family: var(--fonts-sans);
53
54
  font-weight: var(--font-weights-bold);
54
55
  font-size: var(--font-sizes-4xlarge);
@@ -61,6 +62,7 @@
61
62
  }
62
63
 
63
64
  .textStyle_title\.medium {
65
+ letter-spacing: -1px;
64
66
  font-family: var(--fonts-sans);
65
67
  font-weight: var(--font-weights-bold);
66
68
  font-size: var(--font-sizes-large);
@@ -82,6 +84,30 @@
82
84
  .\[\&_a\]\:textStyle_label\.xsmall a:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
83
85
  font-size: calc(var(--font-sizes-xxsmall) * 1.11);
84
86
  line-height: calc(var(--line-heights-xxsmall) * 1.11);
87
+ }
88
+
89
+ @media screen and (max-width: 29.7475rem) {
90
+ .textStyle_heading\.large {
91
+ font-size: var(--font-sizes-3xlarge);
92
+ line-height: var(--line-heights-3xlarge);
93
+ }
94
+
95
+ .textStyle_heading\.large:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
96
+ font-size: calc(var(--font-sizes-3xlarge) * 1.11);
97
+ line-height: calc(var(--line-heights-3xlarge) * 1.11);
98
+ }
99
+ }
100
+
101
+ @media screen and (max-width: 29.7475rem) {
102
+ .textStyle_title\.medium {
103
+ font-size: var(--font-sizes-medium);
104
+ line-height: var(--line-heights-small);
105
+ }
106
+
107
+ .textStyle_title\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
108
+ font-size: calc(var(--font-sizes-medium) * 1.11);
109
+ line-height: calc(var(--line-heights-small) * 1.11);
110
+ }
85
111
  }
86
112
  }
87
113
 
@@ -467,6 +493,10 @@
467
493
  max-height: 50vh;
468
494
  }
469
495
 
496
+ .z_docked {
497
+ z-index: var(--z-index-docked);
498
+ }
499
+
470
500
  .p_0 {
471
501
  padding: 0;
472
502
  }
@@ -111,6 +111,7 @@ const ImageWrapper = styled("div", {
111
111
  });
112
112
  const StyledFigure = styled(Figure, {
113
113
  base: {
114
+ zIndex: "docked",
114
115
  _hover: {
115
116
  "& [data-byline-button]": {
116
117
  background: "background.default"
package/es/styles.css CHANGED
@@ -49,6 +49,7 @@
49
49
  }
50
50
 
51
51
  .textStyle_heading\.large {
52
+ letter-spacing: -1px;
52
53
  font-family: var(--fonts-sans);
53
54
  font-weight: var(--font-weights-bold);
54
55
  font-size: var(--font-sizes-4xlarge);
@@ -61,6 +62,7 @@
61
62
  }
62
63
 
63
64
  .textStyle_title\.medium {
65
+ letter-spacing: -1px;
64
66
  font-family: var(--fonts-sans);
65
67
  font-weight: var(--font-weights-bold);
66
68
  font-size: var(--font-sizes-large);
@@ -82,6 +84,30 @@
82
84
  .\[\&_a\]\:textStyle_label\.xsmall a:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
83
85
  font-size: calc(var(--font-sizes-xxsmall) * 1.11);
84
86
  line-height: calc(var(--line-heights-xxsmall) * 1.11);
87
+ }
88
+
89
+ @media screen and (max-width: 29.7475rem) {
90
+ .textStyle_heading\.large {
91
+ font-size: var(--font-sizes-3xlarge);
92
+ line-height: var(--line-heights-3xlarge);
93
+ }
94
+
95
+ .textStyle_heading\.large:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
96
+ font-size: calc(var(--font-sizes-3xlarge) * 1.11);
97
+ line-height: calc(var(--line-heights-3xlarge) * 1.11);
98
+ }
99
+ }
100
+
101
+ @media screen and (max-width: 29.7475rem) {
102
+ .textStyle_title\.medium {
103
+ font-size: var(--font-sizes-medium);
104
+ line-height: var(--line-heights-small);
105
+ }
106
+
107
+ .textStyle_title\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
108
+ font-size: calc(var(--font-sizes-medium) * 1.11);
109
+ line-height: calc(var(--line-heights-small) * 1.11);
110
+ }
85
111
  }
86
112
  }
87
113
 
@@ -467,6 +493,10 @@
467
493
  max-height: 50vh;
468
494
  }
469
495
 
496
+ .z_docked {
497
+ z-index: var(--z-index-docked);
498
+ }
499
+
470
500
  .p_0 {
471
501
  padding: 0;
472
502
  }
@@ -121,6 +121,7 @@ const ImageWrapper = (0, _jsx2.styled)("div", {
121
121
  });
122
122
  const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
123
123
  base: {
124
+ zIndex: "docked",
124
125
  _hover: {
125
126
  "& [data-byline-button]": {
126
127
  background: "background.default"
package/lib/styles.css CHANGED
@@ -49,6 +49,7 @@
49
49
  }
50
50
 
51
51
  .textStyle_heading\.large {
52
+ letter-spacing: -1px;
52
53
  font-family: var(--fonts-sans);
53
54
  font-weight: var(--font-weights-bold);
54
55
  font-size: var(--font-sizes-4xlarge);
@@ -61,6 +62,7 @@
61
62
  }
62
63
 
63
64
  .textStyle_title\.medium {
65
+ letter-spacing: -1px;
64
66
  font-family: var(--fonts-sans);
65
67
  font-weight: var(--font-weights-bold);
66
68
  font-size: var(--font-sizes-large);
@@ -82,6 +84,30 @@
82
84
  .\[\&_a\]\:textStyle_label\.xsmall a:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
83
85
  font-size: calc(var(--font-sizes-xxsmall) * 1.11);
84
86
  line-height: calc(var(--line-heights-xxsmall) * 1.11);
87
+ }
88
+
89
+ @media screen and (max-width: 29.7475rem) {
90
+ .textStyle_heading\.large {
91
+ font-size: var(--font-sizes-3xlarge);
92
+ line-height: var(--line-heights-3xlarge);
93
+ }
94
+
95
+ .textStyle_heading\.large:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
96
+ font-size: calc(var(--font-sizes-3xlarge) * 1.11);
97
+ line-height: calc(var(--line-heights-3xlarge) * 1.11);
98
+ }
99
+ }
100
+
101
+ @media screen and (max-width: 29.7475rem) {
102
+ .textStyle_title\.medium {
103
+ font-size: var(--font-sizes-medium);
104
+ line-height: var(--line-heights-small);
105
+ }
106
+
107
+ .textStyle_title\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
108
+ font-size: calc(var(--font-sizes-medium) * 1.11);
109
+ line-height: calc(var(--line-heights-small) * 1.11);
110
+ }
85
111
  }
86
112
  }
87
113
 
@@ -467,6 +493,10 @@
467
493
  max-height: 50vh;
468
494
  }
469
495
 
496
+ .z_docked {
497
+ z-index: var(--z-index-docked);
498
+ }
499
+
470
500
  .p_0 {
471
501
  padding: 0;
472
502
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/ui",
3
- "version": "56.0.30-alpha.0",
3
+ "version": "56.0.32-alpha.0",
4
4
  "description": "UI component library for NDLA",
5
5
  "license": "GPL-3.0",
6
6
  "main": "lib/index.js",
@@ -34,10 +34,10 @@
34
34
  ],
35
35
  "dependencies": {
36
36
  "@ndla/core": "^5.0.2",
37
- "@ndla/icons": "^8.0.20-alpha.0",
37
+ "@ndla/icons": "^8.0.22-alpha.0",
38
38
  "@ndla/licenses": "^8.0.3-alpha.0",
39
- "@ndla/primitives": "^1.0.27-alpha.0",
40
- "@ndla/safelink": "^7.0.27-alpha.0",
39
+ "@ndla/primitives": "^1.0.29-alpha.0",
40
+ "@ndla/safelink": "^7.0.29-alpha.0",
41
41
  "@ndla/styled-system": "^0.0.22",
42
42
  "@ndla/util": "^5.0.0-alpha.0",
43
43
  "html-react-parser": "^5.1.8",
@@ -51,7 +51,7 @@
51
51
  "react-router-dom": "> 6.0.0"
52
52
  },
53
53
  "devDependencies": {
54
- "@ndla/preset-panda": "^0.0.30",
54
+ "@ndla/preset-panda": "^0.0.32",
55
55
  "@ndla/types-backend": "^0.2.86",
56
56
  "@ndla/types-embed": "^5.0.2-alpha.0",
57
57
  "@pandacss/dev": "^0.46.0",
@@ -64,5 +64,5 @@
64
64
  "publishConfig": {
65
65
  "access": "public"
66
66
  },
67
- "gitHead": "fe2fb3061416c88e5fd5f1d52c216e17e52c4387"
67
+ "gitHead": "8bfa22e2ca1f9ee0638df252f56389807797e704"
68
68
  }
@@ -140,6 +140,7 @@ const ImageWrapper = styled("div", {
140
140
 
141
141
  const StyledFigure = styled(Figure, {
142
142
  base: {
143
+ zIndex: "docked",
143
144
  _hover: {
144
145
  "& [data-byline-button]": {
145
146
  background: "background.default",