monica-alexandria 3.2.1 → 3.2.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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "monica-alexandria",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.2",
|
|
4
4
|
"description": "A styled-components styles library for Doitforme platorm and universal tweeks to create your own new styled library for your project",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.es.js",
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import styled from 'styled-components'
|
|
3
|
+
import { Main_ } from '../button'
|
|
3
4
|
|
|
4
5
|
const Slider = styled.div`
|
|
5
6
|
position: fixed;
|
|
@@ -10,10 +11,54 @@ const Slider = styled.div`
|
|
|
10
11
|
height: 100vh;
|
|
11
12
|
`
|
|
12
13
|
|
|
14
|
+
const SliderOverlay = styled(Slider)`
|
|
15
|
+
background: ${p => p.theme.overlay};
|
|
16
|
+
`
|
|
17
|
+
|
|
18
|
+
const SliderWrapper = styled.div`
|
|
19
|
+
position: fixed;
|
|
20
|
+
top: 0;
|
|
21
|
+
right: 0;
|
|
22
|
+
z-index: 501;
|
|
23
|
+
width: 100%;
|
|
24
|
+
height: 100%;
|
|
25
|
+
max-width: 60%;
|
|
26
|
+
background-color: ${p => p.theme.background};
|
|
27
|
+
`
|
|
28
|
+
|
|
29
|
+
const SliderTitle = styled.div`
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
justify-content: space-between;
|
|
33
|
+
height: 6rem;
|
|
34
|
+
padding: 0 4rem;
|
|
35
|
+
`
|
|
36
|
+
|
|
37
|
+
const SliderContainer = styled.div`
|
|
38
|
+
padding: 2rem 4rem 10rem 4rem;
|
|
39
|
+
background: ${p => p.theme.low};
|
|
40
|
+
height: 100%;
|
|
41
|
+
overflow: auto;
|
|
42
|
+
`
|
|
43
|
+
|
|
13
44
|
export const Slider_ = (props) => {
|
|
14
45
|
return (
|
|
15
46
|
<Slider>
|
|
16
|
-
|
|
47
|
+
<SliderOverlay onClick = {props.onClick_Close}></SliderOverlay>
|
|
48
|
+
<SliderWrapper>
|
|
49
|
+
<SliderTitle>
|
|
50
|
+
<h3>{props.text_Title}</h3>
|
|
51
|
+
<Main_
|
|
52
|
+
text_Button = {props.text_MainButton}
|
|
53
|
+
icon_Right = "Check"
|
|
54
|
+
variant_Size = 'normal'
|
|
55
|
+
onClick = {props.onClick_Close}
|
|
56
|
+
/>
|
|
57
|
+
</SliderTitle>
|
|
58
|
+
<SliderContainer>
|
|
59
|
+
{props.children}
|
|
60
|
+
</SliderContainer>
|
|
61
|
+
</SliderWrapper>
|
|
17
62
|
</Slider>
|
|
18
63
|
)
|
|
19
64
|
}
|