@semcore/modal 2.4.8 → 3.0.1

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 (7) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/lib/cjs/Modal.js +6 -6
  3. package/lib/cjs/style/modal.shadow.css +9 -8
  4. package/lib/es6/Modal.js +6 -6
  5. package/lib/es6/style/modal.shadow.css +9 -8
  6. package/package.json +1 -1
  7. package/src/style/modal.shadow.css +9 -8
package/CHANGELOG.md CHANGED
@@ -2,6 +2,24 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [3.0.1] - 2022-05-18
6
+
7
+ ### Changed
8
+
9
+ - Version patch update due to children dependencies update (`@semcore/icon` [2.24.0 ~> 2.25.0]).
10
+
11
+ ## [3.0.0] - 2022-05-17
12
+
13
+ ### BREAK
14
+
15
+ - Updated styles according to the library redesign policy.
16
+
17
+ ## [2.4.9] - 2022-05-16
18
+
19
+ ### Changed
20
+
21
+ - Version patch update due to children dependencies update (`@semcore/icon` [2.21.0 ~> 2.24.0]).
22
+
5
23
  ## [2.4.8] - 2022-04-28
6
24
 
7
25
  ### Changed
package/lib/cjs/Modal.js CHANGED
@@ -70,15 +70,15 @@ var style = (
70
70
  /*__reshadow_css_start__*/
71
71
  _core.sstyled.insert(
72
72
  /*__inner_css_start__*/
73
- ".___SWindow_2jffv_gg_{position:relative;border-radius:6px;background:#fff;box-sizing:border-box;margin:auto;padding:24px 32px 32px 32px}.___SWindow_2jffv_gg_:focus{outline:none}.___SOverlay_2jffv_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(0,0,0,.6);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_2jffv_gg_ .___SOverlay_2jffv_gg_{background:rgba(0,0,0,.4)}.___SClose_2jffv_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a6b0b3;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_2jffv_gg_:hover{color:#929b9e}.___SClose_2jffv_gg_.__keyboardFocused_2jffv_gg_{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}@media (max-width:767px){.___SWindow_2jffv_gg_{min-width:60%}.___SOverlay_2jffv_gg_{padding:10px}}"
73
+ ".___SWindow_bgw27_gg_{position:relative;border-radius:12px;background:#ffffff;box-sizing:border-box;margin:auto;padding:40px;box-shadow:0 3px 8px rgba(25,27,35,.2)}.___SWindow_bgw27_gg_:focus{outline:none}.___SOverlay_bgw27_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(25,27,35,.7);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_bgw27_gg_ .___SOverlay_bgw27_gg_{background:rgba(25,27,35,.4)}.___SClose_bgw27_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a9abb6;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_bgw27_gg_:hover{color:#8a8e9b}.___SClose_bgw27_gg_.__keyboardFocused_bgw27_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}@media (max-width:767px){.___SWindow_bgw27_gg_{min-width:60%}.___SOverlay_bgw27_gg_{padding:12px}}"
74
74
  /*__inner_css_end__*/
75
- , "juwj6d_gg_")
75
+ , "kfzky3_gg_")
76
76
  /*__reshadow_css_end__*/
77
77
  , {
78
- "__SWindow": "___SWindow_2jffv_gg_",
79
- "__SOverlay": "___SOverlay_2jffv_gg_",
80
- "__SClose": "___SClose_2jffv_gg_",
81
- "_keyboardFocused": "__keyboardFocused_2jffv_gg_"
78
+ "__SWindow": "___SWindow_bgw27_gg_",
79
+ "__SOverlay": "___SOverlay_bgw27_gg_",
80
+ "__SClose": "___SClose_bgw27_gg_",
81
+ "_keyboardFocused": "__keyboardFocused_bgw27_gg_"
82
82
  });
83
83
 
84
84
  var ModalRoot = /*#__PURE__*/function (_Component) {
package/lib/cjs/style/modal.shadow.css CHANGED
@@ -2,11 +2,12 @@
2
2
 
3
3
  SWindow {
4
4
  position: relative;
5
- border-radius: 6px;
5
+ border-radius: var(--rounded-l);
6
6
  background: var(--white);
7
7
  box-sizing: border-box;
8
8
  margin: auto;
9
- padding: 24px 32px 32px 32px;
9
+ padding: 40px;
10
+ box-shadow: 0 3px 8px color-mod(var(--gray-800) a(20%));
10
11
 
11
12
  &:focus {
12
13
  outline: none;
@@ -24,13 +25,13 @@ SOverlay {
24
25
  justify-content: center;
25
26
  align-items: center;
26
27
  padding: 40px;
27
- background: rgba(0, 0, 0, 0.6);
28
+ background: color-mod(var(--gray-800) a(70%));
28
29
  overflow: auto;
29
30
  z-index: 10005;
30
31
  -webkit-overflow-scrolling: touch;
31
32
 
32
33
  & SOverlay {
33
- background: rgba(0, 0, 0, 0.4);
34
+ background: color-mod(var(--gray-800) a(40%));
34
35
  }
35
36
  }
36
37
 
@@ -40,7 +41,7 @@ SClose {
40
41
  right: 0;
41
42
  top: 0;
42
43
  padding: 12px;
43
- color: var(--stone);
44
+ color: var(--gray-300);
44
45
  cursor: pointer;
45
46
  z-index: 1;
46
47
  border: none;
@@ -48,12 +49,12 @@ SClose {
48
49
  outline: none;
49
50
 
50
51
  &:hover {
51
- color: color-mod(var(--stone) shade(12%));
52
+ color: var(--gray-400);
52
53
  }
53
54
  }
54
55
 
55
56
  SClose[keyboardFocused] {
56
- box-shadow: var(--keyborad-focus);
57
+ box-shadow: var(--keyboard-focus);
57
58
  }
58
59
 
59
60
  @media (max-width: 767px) {
@@ -62,6 +63,6 @@ SClose[keyboardFocused] {
62
63
  }
63
64
 
64
65
  SOverlay {
65
- padding: 10px;
66
+ padding: 12px;
66
67
  }
67
68
  }
package/lib/es6/Modal.js CHANGED
@@ -40,15 +40,15 @@ var style = (
40
40
  /*__reshadow_css_start__*/
41
41
  _sstyled.insert(
42
42
  /*__inner_css_start__*/
43
- ".___SWindow_2jffv_gg_{position:relative;border-radius:6px;background:#fff;box-sizing:border-box;margin:auto;padding:24px 32px 32px 32px}.___SWindow_2jffv_gg_:focus{outline:none}.___SOverlay_2jffv_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(0,0,0,.6);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_2jffv_gg_ .___SOverlay_2jffv_gg_{background:rgba(0,0,0,.4)}.___SClose_2jffv_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a6b0b3;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_2jffv_gg_:hover{color:#929b9e}.___SClose_2jffv_gg_.__keyboardFocused_2jffv_gg_{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}@media (max-width:767px){.___SWindow_2jffv_gg_{min-width:60%}.___SOverlay_2jffv_gg_{padding:10px}}"
43
+ ".___SWindow_bgw27_gg_{position:relative;border-radius:12px;background:#ffffff;box-sizing:border-box;margin:auto;padding:40px;box-shadow:0 3px 8px rgba(25,27,35,.2)}.___SWindow_bgw27_gg_:focus{outline:none}.___SOverlay_bgw27_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(25,27,35,.7);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_bgw27_gg_ .___SOverlay_bgw27_gg_{background:rgba(25,27,35,.4)}.___SClose_bgw27_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a9abb6;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_bgw27_gg_:hover{color:#8a8e9b}.___SClose_bgw27_gg_.__keyboardFocused_bgw27_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}@media (max-width:767px){.___SWindow_bgw27_gg_{min-width:60%}.___SOverlay_bgw27_gg_{padding:12px}}"
44
44
  /*__inner_css_end__*/
45
- , "juwj6d_gg_")
45
+ , "kfzky3_gg_")
46
46
  /*__reshadow_css_end__*/
47
47
  , {
48
- "__SWindow": "___SWindow_2jffv_gg_",
49
- "__SOverlay": "___SOverlay_2jffv_gg_",
50
- "__SClose": "___SClose_2jffv_gg_",
51
- "_keyboardFocused": "__keyboardFocused_2jffv_gg_"
48
+ "__SWindow": "___SWindow_bgw27_gg_",
49
+ "__SOverlay": "___SOverlay_bgw27_gg_",
50
+ "__SClose": "___SClose_bgw27_gg_",
51
+ "_keyboardFocused": "__keyboardFocused_bgw27_gg_"
52
52
  });
53
53
 
54
54
  var ModalRoot = /*#__PURE__*/function (_Component) {
package/lib/es6/style/modal.shadow.css CHANGED
@@ -2,11 +2,12 @@
2
2
 
3
3
  SWindow {
4
4
  position: relative;
5
- border-radius: 6px;
5
+ border-radius: var(--rounded-l);
6
6
  background: var(--white);
7
7
  box-sizing: border-box;
8
8
  margin: auto;
9
- padding: 24px 32px 32px 32px;
9
+ padding: 40px;
10
+ box-shadow: 0 3px 8px color-mod(var(--gray-800) a(20%));
10
11
 
11
12
  &:focus {
12
13
  outline: none;
@@ -24,13 +25,13 @@ SOverlay {
24
25
  justify-content: center;
25
26
  align-items: center;
26
27
  padding: 40px;
27
- background: rgba(0, 0, 0, 0.6);
28
+ background: color-mod(var(--gray-800) a(70%));
28
29
  overflow: auto;
29
30
  z-index: 10005;
30
31
  -webkit-overflow-scrolling: touch;
31
32
 
32
33
  & SOverlay {
33
- background: rgba(0, 0, 0, 0.4);
34
+ background: color-mod(var(--gray-800) a(40%));
34
35
  }
35
36
  }
36
37
 
@@ -40,7 +41,7 @@ SClose {
40
41
  right: 0;
41
42
  top: 0;
42
43
  padding: 12px;
43
- color: var(--stone);
44
+ color: var(--gray-300);
44
45
  cursor: pointer;
45
46
  z-index: 1;
46
47
  border: none;
@@ -48,12 +49,12 @@ SClose {
48
49
  outline: none;
49
50
 
50
51
  &:hover {
51
- color: color-mod(var(--stone) shade(12%));
52
+ color: var(--gray-400);
52
53
  }
53
54
  }
54
55
 
55
56
  SClose[keyboardFocused] {
56
- box-shadow: var(--keyborad-focus);
57
+ box-shadow: var(--keyboard-focus);
57
58
  }
58
59
 
59
60
  @media (max-width: 767px) {
@@ -62,6 +63,6 @@ SClose[keyboardFocused] {
62
63
  }
63
64
 
64
65
  SOverlay {
65
- padding: 10px;
66
+ padding: 12px;
66
67
  }
67
68
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/modal",
3
3
  "description": "SEMRush Modal Component",
4
- "version": "2.4.8",
4
+ "version": "3.0.1",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
package/src/style/modal.shadow.css CHANGED
@@ -2,11 +2,12 @@
2
2
 
3
3
  SWindow {
4
4
  position: relative;
5
- border-radius: 6px;
5
+ border-radius: var(--rounded-l);
6
6
  background: var(--white);
7
7
  box-sizing: border-box;
8
8
  margin: auto;
9
- padding: 24px 32px 32px 32px;
9
+ padding: 40px;
10
+ box-shadow: 0 3px 8px color-mod(var(--gray-800) a(20%));
10
11
 
11
12
  &:focus {
12
13
  outline: none;
@@ -24,13 +25,13 @@ SOverlay {
24
25
  justify-content: center;
25
26
  align-items: center;
26
27
  padding: 40px;
27
- background: rgba(0, 0, 0, 0.6);
28
+ background: color-mod(var(--gray-800) a(70%));
28
29
  overflow: auto;
29
30
  z-index: 10005;
30
31
  -webkit-overflow-scrolling: touch;
31
32
 
32
33
  & SOverlay {
33
- background: rgba(0, 0, 0, 0.4);
34
+ background: color-mod(var(--gray-800) a(40%));
34
35
  }
35
36
  }
36
37
 
@@ -40,7 +41,7 @@ SClose {
40
41
  right: 0;
41
42
  top: 0;
42
43
  padding: 12px;
43
- color: var(--stone);
44
+ color: var(--gray-300);
44
45
  cursor: pointer;
45
46
  z-index: 1;
46
47
  border: none;
@@ -48,12 +49,12 @@ SClose {
48
49
  outline: none;
49
50
 
50
51
  &:hover {
51
- color: color-mod(var(--stone) shade(12%));
52
+ color: var(--gray-400);
52
53
  }
53
54
  }
54
55
 
55
56
  SClose[keyboardFocused] {
56
- box-shadow: var(--keyborad-focus);
57
+ box-shadow: var(--keyboard-focus);
57
58
  }
58
59
 
59
60
  @media (max-width: 767px) {
@@ -62,6 +63,6 @@ SClose[keyboardFocused] {
62
63
  }
63
64
 
64
65
  SOverlay {
65
- padding: 10px;
66
+ padding: 12px;
66
67
  }
67
68
  }