@semcore/spin-container 6.0.2 → 6.0.5
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.
- package/CHANGELOG.md +18 -0
- package/README.md +67 -0
- package/lib/cjs/SpinContainer.js +9 -9
- package/lib/cjs/SpinContainer.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/SpinContainer.js +9 -9
- package/lib/es6/SpinContainer.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +2 -2
- package/src/SpinContainer.jsx +0 -88
- package/src/index.d.ts +0 -38
- package/src/index.js +0 -1
- package/src/style/spin-container.shadow.css +0 -36
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
|
+
## [6.0.5] - 2022-07-22
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0], `@semcore/spin` [4.0.4 ~> 4.0.5], `@semcore/flex-box` [4.5.6 ~> 4.5.7], `@semcore/animation` [1.5.4 ~> 1.5.5]).
|
|
10
|
+
|
|
11
|
+
## [6.0.4] - 2022-07-07
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.33.0 ~> 3.34.0], `@semcore/spin` [4.0.3 ~> 4.0.4], `@semcore/flex-box` [4.5.5 ~> 4.5.6], `@semcore/animation` [1.5.3 ~> 1.5.4]).
|
|
16
|
+
|
|
17
|
+
## [6.0.3] - 2022-06-02
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.32.2 ~> 3.33.0], `@semcore/spin` [4.0.2 ~> 4.0.3], `@semcore/flex-box` [4.5.4 ~> 4.5.5], `@semcore/animation` [1.5.2 ~> 1.5.3]).
|
|
22
|
+
|
|
5
23
|
## [6.0.2] - 2022-05-31
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/README.md
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @semcore/spin-container
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/@semcore/spin-container)
|
|
4
|
+
[](https://www.npmjs.com/package/@semcore/spin-container)
|
|
5
|
+
[](https://github.com/semrush/intergalactic/blob/master/LICENSE)
|
|
6
|
+
|
|
7
|
+
> This component is part of the Intergalactic design system
|
|
8
|
+
|
|
9
|
+
### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/spin-container/)
|
|
10
|
+
|
|
11
|
+
### 🏠 [Design system](https://developer.semrush.com/intergalactic/)
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npm install @semcore/ui
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import SpinContainer from '@semcore/ui/spin-container';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
<details>
|
|
26
|
+
<summary>Alternative installation and use</summary>
|
|
27
|
+
|
|
28
|
+
**We do not recommend this usage path due to possible dependency and update issues.**
|
|
29
|
+
|
|
30
|
+
### Install
|
|
31
|
+
|
|
32
|
+
You can only install one package from the design system
|
|
33
|
+
|
|
34
|
+
```sh
|
|
35
|
+
npm install @semcore/spin-container @semcore/core
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
`@semcore/core` - _is the basic package by which we create our components, and it contains all of the common logic
|
|
39
|
+
of the components that is discussed below. There should only be one version of the package in the project._
|
|
40
|
+
|
|
41
|
+
### Usage
|
|
42
|
+
|
|
43
|
+
You can use the package the same way but without `/ui/` in the import path.
|
|
44
|
+
|
|
45
|
+
```jsx
|
|
46
|
+
import SpinContainer from '@semcore/spin-container';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
|
+
## 👤 Author
|
|
52
|
+
|
|
53
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
54
|
+
|
|
55
|
+
## 🤝 Contributing
|
|
56
|
+
|
|
57
|
+
Contributions, issues and feature requests are welcome!
|
|
58
|
+
|
|
59
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
|
|
60
|
+
|
|
61
|
+
## Show your support
|
|
62
|
+
|
|
63
|
+
Give a ⭐️ if this project helped you!
|
|
64
|
+
|
|
65
|
+
## 📝 License
|
|
66
|
+
|
|
67
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
|
package/lib/cjs/SpinContainer.js
CHANGED
|
@@ -52,18 +52,18 @@ var style = (
|
|
|
52
52
|
/*__reshadow_css_start__*/
|
|
53
53
|
_core.sstyled.insert(
|
|
54
54
|
/*__inner_css_start__*/
|
|
55
|
-
".
|
|
55
|
+
".___SSpinContainer_1rkdu_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_1rkdu_gg_{z-index:0;position:relative}.___SOverlay_1rkdu_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_1rkdu_gg_._theme_invert_1rkdu_gg_{background-color:rgba(25,27,35,.4)}.___SOverlay_1rkdu_gg_._theme_dark_1rkdu_gg_{background-color:hsla(0,0%,100%,.85)}.___SOverlay_1rkdu_gg_._theme_custom_1rkdu_gg_{background-color:var(--background_1rkdu)}"
|
|
56
56
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
57
|
+
, "1rkdu_gg_")
|
|
58
58
|
/*__reshadow_css_end__*/
|
|
59
59
|
, {
|
|
60
|
-
"__SSpinContainer": "
|
|
61
|
-
"__SContent": "
|
|
62
|
-
"__SOverlay": "
|
|
63
|
-
"_theme_invert": "
|
|
64
|
-
"_theme_dark": "
|
|
65
|
-
"_theme_custom": "
|
|
66
|
-
"--background": "--
|
|
60
|
+
"__SSpinContainer": "___SSpinContainer_1rkdu_gg_",
|
|
61
|
+
"__SContent": "___SContent_1rkdu_gg_",
|
|
62
|
+
"__SOverlay": "___SOverlay_1rkdu_gg_",
|
|
63
|
+
"_theme_invert": "_theme_invert_1rkdu_gg_",
|
|
64
|
+
"_theme_dark": "_theme_dark_1rkdu_gg_",
|
|
65
|
+
"_theme_custom": "_theme_custom_1rkdu_gg_",
|
|
66
|
+
"--background": "--background_1rkdu"
|
|
67
67
|
});
|
|
68
68
|
|
|
69
69
|
var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"SpinContainer.js","names":["SpinContainerRoot","asProps","loading","background","duration","size","theme","SSpinContainer","Box","styles","Children","advanceMode","isAdvanceMode","SpinContainer","Content","displayName","Overlay","sstyled","Component","style","SOverlay","useTheme","resolveColor","children","props","SContent","createComponent"],"sources":["../../src/SpinContainer.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { FadeInOut } from '@semcore/animation';\nimport Spin from '@semcore/spin';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\n\nimport style from './style/spin-container.shadow.css';\n\nclass SpinContainerRoot extends Component {\n static displayName = 'SpinContainer';\n static style = style;\n static defaultProps = {\n size: 'xxl',\n theme: 'dark',\n duration: 200,\n };\n\n getOverlayProps() {\n const { loading, background, duration, size, theme } = this.asProps;\n return {\n background,\n // for Animated\n loading,\n duration,\n // for Spin\n size,\n theme,\n };\n }\n\n render() {\n const SSpinContainer = Root;\n const { styles, Children } = this.asProps;\n\n const advanceMode = isAdvanceMode(Children, [\n SpinContainer.Content.displayName,\n SpinContainer.Overlay.displayName,\n ]);\n\n return sstyled(styles)(\n <SSpinContainer render={Box}>\n {advanceMode ? (\n <Children />\n ) : (\n <>\n <SpinContainer.Content>\n <Children />\n </SpinContainer.Content>\n <SpinContainer.Overlay />\n </>\n )}\n </SSpinContainer>,\n );\n }\n}\n\nclass Overlay extends Component {\n static defaultProps = ({ size, theme }) => ({\n children: <Spin size={size} theme={theme} />,\n });\n\n render() {\n const SOverlay = Root;\n const { styles, theme, background, loading, duration } = this.asProps;\n const useTheme = background ? 'custom' : theme;\n\n return sstyled(styles)(\n <FadeInOut visible={loading} duration={duration}>\n <SOverlay render={Box} use:theme={useTheme} use:background={resolveColor(background)} />\n </FadeInOut>,\n );\n }\n}\n\nfunction Content(props) {\n const SContent = Root;\n const { styles } = props;\n return sstyled(styles)(<SContent render={Box} />);\n}\n\nconst SpinContainer = createComponent(SpinContainerRoot, {\n Overlay,\n Content,\n});\n\nexport default SpinContainer;\n"],"mappings":"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"}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './SpinContainer';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
|
package/lib/es6/SpinContainer.js
CHANGED
|
@@ -30,18 +30,18 @@ var style = (
|
|
|
30
30
|
/*__reshadow_css_start__*/
|
|
31
31
|
_sstyled.insert(
|
|
32
32
|
/*__inner_css_start__*/
|
|
33
|
-
".
|
|
33
|
+
".___SSpinContainer_1rkdu_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_1rkdu_gg_{z-index:0;position:relative}.___SOverlay_1rkdu_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_1rkdu_gg_._theme_invert_1rkdu_gg_{background-color:rgba(25,27,35,.4)}.___SOverlay_1rkdu_gg_._theme_dark_1rkdu_gg_{background-color:hsla(0,0%,100%,.85)}.___SOverlay_1rkdu_gg_._theme_custom_1rkdu_gg_{background-color:var(--background_1rkdu)}"
|
|
34
34
|
/*__inner_css_end__*/
|
|
35
|
-
, "
|
|
35
|
+
, "1rkdu_gg_")
|
|
36
36
|
/*__reshadow_css_end__*/
|
|
37
37
|
, {
|
|
38
|
-
"__SSpinContainer": "
|
|
39
|
-
"__SContent": "
|
|
40
|
-
"__SOverlay": "
|
|
41
|
-
"_theme_invert": "
|
|
42
|
-
"_theme_dark": "
|
|
43
|
-
"_theme_custom": "
|
|
44
|
-
"--background": "--
|
|
38
|
+
"__SSpinContainer": "___SSpinContainer_1rkdu_gg_",
|
|
39
|
+
"__SContent": "___SContent_1rkdu_gg_",
|
|
40
|
+
"__SOverlay": "___SOverlay_1rkdu_gg_",
|
|
41
|
+
"_theme_invert": "_theme_invert_1rkdu_gg_",
|
|
42
|
+
"_theme_dark": "_theme_dark_1rkdu_gg_",
|
|
43
|
+
"_theme_custom": "_theme_custom_1rkdu_gg_",
|
|
44
|
+
"--background": "--background_1rkdu"
|
|
45
45
|
});
|
|
46
46
|
|
|
47
47
|
var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"SpinContainer.js","names":["React","createComponent","Component","sstyled","Root","FadeInOut","Spin","Box","resolveColor","isAdvanceMode","SpinContainerRoot","asProps","loading","background","duration","size","theme","SSpinContainer","styles","Children","advanceMode","SpinContainer","Content","displayName","Overlay","style","SOverlay","useTheme","children","props","SContent"],"sources":["../../src/SpinContainer.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { FadeInOut } from '@semcore/animation';\nimport Spin from '@semcore/spin';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\n\nimport style from './style/spin-container.shadow.css';\n\nclass SpinContainerRoot extends Component {\n static displayName = 'SpinContainer';\n static style = style;\n static defaultProps = {\n size: 'xxl',\n theme: 'dark',\n duration: 200,\n };\n\n getOverlayProps() {\n const { loading, background, duration, size, theme } = this.asProps;\n return {\n background,\n // for Animated\n loading,\n duration,\n // for Spin\n size,\n theme,\n };\n }\n\n render() {\n const SSpinContainer = Root;\n const { styles, Children } = this.asProps;\n\n const advanceMode = isAdvanceMode(Children, [\n SpinContainer.Content.displayName,\n SpinContainer.Overlay.displayName,\n ]);\n\n return sstyled(styles)(\n <SSpinContainer render={Box}>\n {advanceMode ? (\n <Children />\n ) : (\n <>\n <SpinContainer.Content>\n <Children />\n </SpinContainer.Content>\n <SpinContainer.Overlay />\n </>\n )}\n </SSpinContainer>,\n );\n }\n}\n\nclass Overlay extends Component {\n static defaultProps = ({ size, theme }) => ({\n children: <Spin size={size} theme={theme} />,\n });\n\n render() {\n const SOverlay = Root;\n const { styles, theme, background, loading, duration } = this.asProps;\n const useTheme = background ? 'custom' : theme;\n\n return sstyled(styles)(\n <FadeInOut visible={loading} duration={duration}>\n <SOverlay render={Box} use:theme={useTheme} use:background={resolveColor(background)} />\n </FadeInOut>,\n );\n }\n}\n\nfunction Content(props) {\n const SContent = Root;\n const { styles } = props;\n return sstyled(styles)(<SContent render={Box} />);\n}\n\nconst SpinContainer = createComponent(SpinContainerRoot, {\n Overlay,\n Content,\n});\n\nexport default SpinContainer;\n"],"mappings":"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"}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './SpinContainer';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,iBAAxB"}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/spin-container",
|
|
3
3
|
"description": "SEMRush SpinContainer Component",
|
|
4
|
-
"version": "6.0.
|
|
4
|
+
"version": "6.0.5",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"types": "lib/types/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
|
-
"author": "
|
|
9
|
+
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"scripts": {
|
|
12
12
|
"build": "build --source=js",
|
package/src/SpinContainer.jsx
DELETED
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import { FadeInOut } from '@semcore/animation';
|
|
4
|
-
import Spin from '@semcore/spin';
|
|
5
|
-
import { Box } from '@semcore/flex-box';
|
|
6
|
-
import resolveColor from '@semcore/utils/lib/color';
|
|
7
|
-
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
|
8
|
-
|
|
9
|
-
import style from './style/spin-container.shadow.css';
|
|
10
|
-
|
|
11
|
-
class SpinContainerRoot extends Component {
|
|
12
|
-
static displayName = 'SpinContainer';
|
|
13
|
-
static style = style;
|
|
14
|
-
static defaultProps = {
|
|
15
|
-
size: 'xxl',
|
|
16
|
-
theme: 'dark',
|
|
17
|
-
duration: 200,
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
getOverlayProps() {
|
|
21
|
-
const { loading, background, duration, size, theme } = this.asProps;
|
|
22
|
-
return {
|
|
23
|
-
background,
|
|
24
|
-
// for Animated
|
|
25
|
-
loading,
|
|
26
|
-
duration,
|
|
27
|
-
// for Spin
|
|
28
|
-
size,
|
|
29
|
-
theme,
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
render() {
|
|
34
|
-
const SSpinContainer = Root;
|
|
35
|
-
const { styles, Children } = this.asProps;
|
|
36
|
-
|
|
37
|
-
const advanceMode = isAdvanceMode(Children, [
|
|
38
|
-
SpinContainer.Content.displayName,
|
|
39
|
-
SpinContainer.Overlay.displayName,
|
|
40
|
-
]);
|
|
41
|
-
|
|
42
|
-
return sstyled(styles)(
|
|
43
|
-
<SSpinContainer render={Box}>
|
|
44
|
-
{advanceMode ? (
|
|
45
|
-
<Children />
|
|
46
|
-
) : (
|
|
47
|
-
<>
|
|
48
|
-
<SpinContainer.Content>
|
|
49
|
-
<Children />
|
|
50
|
-
</SpinContainer.Content>
|
|
51
|
-
<SpinContainer.Overlay />
|
|
52
|
-
</>
|
|
53
|
-
)}
|
|
54
|
-
</SSpinContainer>,
|
|
55
|
-
);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
class Overlay extends Component {
|
|
60
|
-
static defaultProps = ({ size, theme }) => ({
|
|
61
|
-
children: <Spin size={size} theme={theme} />,
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
render() {
|
|
65
|
-
const SOverlay = Root;
|
|
66
|
-
const { styles, theme, background, loading, duration } = this.asProps;
|
|
67
|
-
const useTheme = background ? 'custom' : theme;
|
|
68
|
-
|
|
69
|
-
return sstyled(styles)(
|
|
70
|
-
<FadeInOut visible={loading} duration={duration}>
|
|
71
|
-
<SOverlay render={Box} use:theme={useTheme} use:background={resolveColor(background)} />
|
|
72
|
-
</FadeInOut>,
|
|
73
|
-
);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
function Content(props) {
|
|
78
|
-
const SContent = Root;
|
|
79
|
-
const { styles } = props;
|
|
80
|
-
return sstyled(styles)(<SContent render={Box} />);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
const SpinContainer = createComponent(SpinContainerRoot, {
|
|
84
|
-
Overlay,
|
|
85
|
-
Content,
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
export default SpinContainer;
|
package/src/index.d.ts
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { PropGetterFn, ReturnEl, CProps } from '@semcore/core';
|
|
2
|
-
import { ISpinProps } from '@semcore/spin';
|
|
3
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
-
|
|
5
|
-
export interface ISpinContainerProps extends IBoxProps, ISpinProps {
|
|
6
|
-
/**
|
|
7
|
-
* Color of container spinner; you can use your own color
|
|
8
|
-
*/
|
|
9
|
-
background?: string;
|
|
10
|
-
/** Duration of animation displaying in ms
|
|
11
|
-
* @default 200
|
|
12
|
-
*/
|
|
13
|
-
duration?: number;
|
|
14
|
-
/**
|
|
15
|
-
* Property responsible for displaying the spinner
|
|
16
|
-
* */
|
|
17
|
-
loading?: boolean;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export interface ISpinContainerContext {
|
|
21
|
-
getOverlayProps: PropGetterFn;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export interface ISpinContainerOverlayProps extends IBoxProps {
|
|
25
|
-
/**
|
|
26
|
-
* Css background; you can use your own color
|
|
27
|
-
*/
|
|
28
|
-
background?: string;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
declare const SpinContainer: (<T>(
|
|
32
|
-
props: CProps<ISpinContainerProps & T, ISpinContainerContext>,
|
|
33
|
-
) => ReturnEl) & {
|
|
34
|
-
Content: typeof Box;
|
|
35
|
-
Overlay: <T>(props: ISpinContainerOverlayProps & T) => ReturnEl;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
export default SpinContainer;
|
package/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './SpinContainer';
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SSpinContainer {
|
|
4
|
-
z-index: 0;
|
|
5
|
-
position: relative;
|
|
6
|
-
display: block;
|
|
7
|
-
overflow: hidden;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
SContent {
|
|
11
|
-
z-index: 0;
|
|
12
|
-
position: relative;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
SOverlay {
|
|
16
|
-
z-index: 1;
|
|
17
|
-
display: flex;
|
|
18
|
-
width: 100%;
|
|
19
|
-
height: 100%;
|
|
20
|
-
justify-content: center;
|
|
21
|
-
align-items: center;
|
|
22
|
-
position: absolute;
|
|
23
|
-
top: 0;
|
|
24
|
-
left: 0;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
SOverlay[theme='invert'] {
|
|
28
|
-
background-color: color-mod(var(--gray-800) a(40%));
|
|
29
|
-
}
|
|
30
|
-
SOverlay[theme='dark'] {
|
|
31
|
-
background-color: rgba(255, 255, 255, 0.85);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
SOverlay[theme='custom'] {
|
|
35
|
-
background-color: var(--background);
|
|
36
|
-
}
|