@pareto-engineering/design-system 2.0.0-alpha.20 → 2.0.0-alpha.21
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/dist/cjs/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +1 -1
- package/dist/cjs/c/ContentSlides/styles.scss +4 -4
- package/dist/es/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +1 -1
- package/dist/es/c/ContentSlides/styles.scss +4 -4
- package/package.json +1 -1
- package/src/__snapshots__/Storyshots.test.js.snap +283 -4
- package/src/stories/c/ContentSlides.stories.jsx +154 -2
- package/src/ui/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.jsx +1 -1
- package/src/ui/c/ContentSlides/styles.scss +4 -4
|
@@ -14,7 +14,7 @@ $class-navigator:navigator;
|
|
|
14
14
|
$default-sidebar-width:minmax(250px, 330px);
|
|
15
15
|
$default-border:none;//2px solid var(--grid);
|
|
16
16
|
$default-border-radius:var(--theme-border-radius);
|
|
17
|
-
$default-content-background:var(--
|
|
17
|
+
$default-content-background: var(--background1);
|
|
18
18
|
$default-padding:var(--u);
|
|
19
19
|
|
|
20
20
|
$mobile-content-margin:6em;
|
|
@@ -61,7 +61,6 @@ $mobile-content-margin:6em;
|
|
|
61
61
|
|
|
62
62
|
//.#{$class-main-container} {
|
|
63
63
|
main {
|
|
64
|
-
background: var(--dark-y);
|
|
65
64
|
overflow: hidden;
|
|
66
65
|
position: relative;
|
|
67
66
|
|
|
@@ -79,7 +78,7 @@ $mobile-content-margin:6em;
|
|
|
79
78
|
.#{bem.$element-content} {
|
|
80
79
|
background: $default-content-background;
|
|
81
80
|
|
|
82
|
-
border:
|
|
81
|
+
border: var(--theme-border);
|
|
83
82
|
border-radius: $default-border-radius;
|
|
84
83
|
max-width: 600px;
|
|
85
84
|
padding: $default-padding;
|
|
@@ -108,8 +107,9 @@ $mobile-content-margin:6em;
|
|
|
108
107
|
|
|
109
108
|
.#{$class-horizontal-menu} {
|
|
110
109
|
background: $default-content-background;
|
|
111
|
-
border-bottom:
|
|
110
|
+
border-bottom: var(--theme-border);
|
|
112
111
|
color: var(--heading);
|
|
112
|
+
z-index: 1;
|
|
113
113
|
|
|
114
114
|
.#{bem.$element-content} {
|
|
115
115
|
display: grid;
|
|
@@ -14,7 +14,7 @@ $class-navigator:navigator;
|
|
|
14
14
|
$default-sidebar-width:minmax(250px, 330px);
|
|
15
15
|
$default-border:none;//2px solid var(--grid);
|
|
16
16
|
$default-border-radius:var(--theme-border-radius);
|
|
17
|
-
$default-content-background:var(--
|
|
17
|
+
$default-content-background: var(--background1);
|
|
18
18
|
$default-padding:var(--u);
|
|
19
19
|
|
|
20
20
|
$mobile-content-margin:6em;
|
|
@@ -61,7 +61,6 @@ $mobile-content-margin:6em;
|
|
|
61
61
|
|
|
62
62
|
//.#{$class-main-container} {
|
|
63
63
|
main {
|
|
64
|
-
background: var(--dark-y);
|
|
65
64
|
overflow: hidden;
|
|
66
65
|
position: relative;
|
|
67
66
|
|
|
@@ -79,7 +78,7 @@ $mobile-content-margin:6em;
|
|
|
79
78
|
.#{bem.$element-content} {
|
|
80
79
|
background: $default-content-background;
|
|
81
80
|
|
|
82
|
-
border:
|
|
81
|
+
border: var(--theme-border);
|
|
83
82
|
border-radius: $default-border-radius;
|
|
84
83
|
max-width: 600px;
|
|
85
84
|
padding: $default-padding;
|
|
@@ -108,8 +107,9 @@ $mobile-content-margin:6em;
|
|
|
108
107
|
|
|
109
108
|
.#{$class-horizontal-menu} {
|
|
110
109
|
background: $default-content-background;
|
|
111
|
-
border-bottom:
|
|
110
|
+
border-bottom: var(--theme-border);
|
|
112
111
|
color: var(--heading);
|
|
112
|
+
z-index: 1;
|
|
113
113
|
|
|
114
114
|
.#{bem.$element-content} {
|
|
115
115
|
display: grid;
|
package/package.json
CHANGED
|
@@ -8567,7 +8567,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
|
|
|
8567
8567
|
}
|
|
8568
8568
|
>
|
|
8569
8569
|
<div
|
|
8570
|
-
className="base content-slides y-background1 u1 md-u2"
|
|
8570
|
+
className="base content-slides y-background1 b-dark-y u1 md-u2"
|
|
8571
8571
|
>
|
|
8572
8572
|
<nav
|
|
8573
8573
|
className="sidebar"
|
|
@@ -8716,7 +8716,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
|
|
|
8716
8716
|
Welcome
|
|
8717
8717
|
</span>
|
|
8718
8718
|
<svg
|
|
8719
|
-
className="base svg base logo x-
|
|
8719
|
+
className="base svg base logo x-paragraph xs-h sm-h"
|
|
8720
8720
|
height="2em"
|
|
8721
8721
|
preserveAspectRatio="xMinYMin meet"
|
|
8722
8722
|
version="1.1"
|
|
@@ -8939,7 +8939,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
|
|
|
8939
8939
|
|
|
8940
8940
|
exports[`Storyshots c/ContentSlides Simple 1`] = `
|
|
8941
8941
|
<div
|
|
8942
|
-
className="base content-slides y-background1 simple u1 md-u2"
|
|
8942
|
+
className="base content-slides y-background1 b-dark-y simple u1 md-u2"
|
|
8943
8943
|
>
|
|
8944
8944
|
<div
|
|
8945
8945
|
className="horizontal-menu"
|
|
@@ -8969,7 +8969,286 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
|
|
|
8969
8969
|
Welcome
|
|
8970
8970
|
</span>
|
|
8971
8971
|
<svg
|
|
8972
|
-
className="base svg base logo x-
|
|
8972
|
+
className="base svg base logo x-paragraph xs-h sm-h"
|
|
8973
|
+
height="2em"
|
|
8974
|
+
preserveAspectRatio="xMinYMin meet"
|
|
8975
|
+
version="1.1"
|
|
8976
|
+
viewBox="0 0 688 250"
|
|
8977
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8978
|
+
>
|
|
8979
|
+
<use
|
|
8980
|
+
className=""
|
|
8981
|
+
href="/logo_parts.svg#logo__p"
|
|
8982
|
+
id="logo__p"
|
|
8983
|
+
style={
|
|
8984
|
+
Object {
|
|
8985
|
+
"style": undefined,
|
|
8986
|
+
}
|
|
8987
|
+
}
|
|
8988
|
+
/>
|
|
8989
|
+
<use
|
|
8990
|
+
className=""
|
|
8991
|
+
href="/logo_parts.svg#logo__areto"
|
|
8992
|
+
id="logo__areto"
|
|
8993
|
+
style={
|
|
8994
|
+
Object {
|
|
8995
|
+
"style": undefined,
|
|
8996
|
+
}
|
|
8997
|
+
}
|
|
8998
|
+
/>
|
|
8999
|
+
<use
|
|
9000
|
+
className=""
|
|
9001
|
+
href="/logo_parts.svg#logo__t"
|
|
9002
|
+
id="logo__t"
|
|
9003
|
+
style={
|
|
9004
|
+
Object {
|
|
9005
|
+
"style": undefined,
|
|
9006
|
+
}
|
|
9007
|
+
}
|
|
9008
|
+
/>
|
|
9009
|
+
</svg>
|
|
9010
|
+
</div>
|
|
9011
|
+
</div>
|
|
9012
|
+
</div>
|
|
9013
|
+
|
|
9014
|
+
<main>
|
|
9015
|
+
<div
|
|
9016
|
+
className="modifierActive slide"
|
|
9017
|
+
>
|
|
9018
|
+
<div
|
|
9019
|
+
className="wrapper"
|
|
9020
|
+
>
|
|
9021
|
+
<div
|
|
9022
|
+
className="content"
|
|
9023
|
+
>
|
|
9024
|
+
<div
|
|
9025
|
+
className="base title"
|
|
9026
|
+
>
|
|
9027
|
+
<h1
|
|
9028
|
+
className="small heading"
|
|
9029
|
+
>
|
|
9030
|
+
Welcome
|
|
9031
|
+
</h1>
|
|
9032
|
+
<p
|
|
9033
|
+
className="subtitle"
|
|
9034
|
+
>
|
|
9035
|
+
Welcome to this site. We hope you will have an amazing experience here.
|
|
9036
|
+
</p>
|
|
9037
|
+
</div>
|
|
9038
|
+
<div
|
|
9039
|
+
className="navigator"
|
|
9040
|
+
>
|
|
9041
|
+
<span />
|
|
9042
|
+
<button
|
|
9043
|
+
className="base button x-main2 next x-main1 modifierCompact"
|
|
9044
|
+
disabled={false}
|
|
9045
|
+
onClick={[Function]}
|
|
9046
|
+
type="button"
|
|
9047
|
+
>
|
|
9048
|
+
Next
|
|
9049
|
+
</button>
|
|
9050
|
+
</div>
|
|
9051
|
+
</div>
|
|
9052
|
+
</div>
|
|
9053
|
+
</div>
|
|
9054
|
+
<div
|
|
9055
|
+
className="slide"
|
|
9056
|
+
>
|
|
9057
|
+
<div
|
|
9058
|
+
className="wrapper"
|
|
9059
|
+
>
|
|
9060
|
+
<div
|
|
9061
|
+
className="content"
|
|
9062
|
+
>
|
|
9063
|
+
<div
|
|
9064
|
+
className="base title"
|
|
9065
|
+
>
|
|
9066
|
+
<h1
|
|
9067
|
+
className="small heading"
|
|
9068
|
+
>
|
|
9069
|
+
Part 2
|
|
9070
|
+
</h1>
|
|
9071
|
+
<p
|
|
9072
|
+
className="subtitle"
|
|
9073
|
+
>
|
|
9074
|
+
Welcome to this site. We hope you will have an amazing experience here.
|
|
9075
|
+
</p>
|
|
9076
|
+
</div>
|
|
9077
|
+
<p>
|
|
9078
|
+
In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
|
|
9079
|
+
|
|
9080
|
+
</p>
|
|
9081
|
+
<p>
|
|
9082
|
+
In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
|
|
9083
|
+
|
|
9084
|
+
</p>
|
|
9085
|
+
<p>
|
|
9086
|
+
In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
|
|
9087
|
+
|
|
9088
|
+
</p>
|
|
9089
|
+
<p>
|
|
9090
|
+
In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
|
|
9091
|
+
|
|
9092
|
+
</p>
|
|
9093
|
+
<div
|
|
9094
|
+
className="navigator"
|
|
9095
|
+
>
|
|
9096
|
+
<span />
|
|
9097
|
+
<button
|
|
9098
|
+
className="base button x-main2 next x-main1 modifierCompact"
|
|
9099
|
+
disabled={false}
|
|
9100
|
+
onClick={[Function]}
|
|
9101
|
+
type="button"
|
|
9102
|
+
>
|
|
9103
|
+
Next
|
|
9104
|
+
</button>
|
|
9105
|
+
</div>
|
|
9106
|
+
</div>
|
|
9107
|
+
</div>
|
|
9108
|
+
</div>
|
|
9109
|
+
<div
|
|
9110
|
+
className="slide"
|
|
9111
|
+
>
|
|
9112
|
+
<div
|
|
9113
|
+
className="wrapper"
|
|
9114
|
+
>
|
|
9115
|
+
<div
|
|
9116
|
+
className="content"
|
|
9117
|
+
>
|
|
9118
|
+
<div
|
|
9119
|
+
className="base title"
|
|
9120
|
+
>
|
|
9121
|
+
<h1
|
|
9122
|
+
className="small heading"
|
|
9123
|
+
>
|
|
9124
|
+
Part 3
|
|
9125
|
+
</h1>
|
|
9126
|
+
<p
|
|
9127
|
+
className="subtitle"
|
|
9128
|
+
>
|
|
9129
|
+
Welcome to this site. We hope you will have an amazing experience here.
|
|
9130
|
+
</p>
|
|
9131
|
+
</div>
|
|
9132
|
+
<div
|
|
9133
|
+
className="navigator"
|
|
9134
|
+
>
|
|
9135
|
+
<span />
|
|
9136
|
+
<button
|
|
9137
|
+
className="base button x-main2 next x-main1 modifierCompact"
|
|
9138
|
+
disabled={false}
|
|
9139
|
+
onClick={[Function]}
|
|
9140
|
+
type="button"
|
|
9141
|
+
>
|
|
9142
|
+
Next
|
|
9143
|
+
</button>
|
|
9144
|
+
</div>
|
|
9145
|
+
</div>
|
|
9146
|
+
</div>
|
|
9147
|
+
</div>
|
|
9148
|
+
<div
|
|
9149
|
+
className="slide"
|
|
9150
|
+
>
|
|
9151
|
+
<div
|
|
9152
|
+
className="wrapper"
|
|
9153
|
+
>
|
|
9154
|
+
<div
|
|
9155
|
+
className="content"
|
|
9156
|
+
>
|
|
9157
|
+
<div
|
|
9158
|
+
className="base title"
|
|
9159
|
+
>
|
|
9160
|
+
<h1
|
|
9161
|
+
className="small heading"
|
|
9162
|
+
>
|
|
9163
|
+
Part 4
|
|
9164
|
+
</h1>
|
|
9165
|
+
<p
|
|
9166
|
+
className="subtitle"
|
|
9167
|
+
>
|
|
9168
|
+
Welcome to this site. We hope you will have an amazing experience here.
|
|
9169
|
+
</p>
|
|
9170
|
+
</div>
|
|
9171
|
+
<div
|
|
9172
|
+
className="navigator"
|
|
9173
|
+
>
|
|
9174
|
+
<span />
|
|
9175
|
+
<button
|
|
9176
|
+
className="base button x-main2 next x-main1 modifierCompact"
|
|
9177
|
+
disabled={false}
|
|
9178
|
+
onClick={[Function]}
|
|
9179
|
+
type="button"
|
|
9180
|
+
>
|
|
9181
|
+
Next
|
|
9182
|
+
</button>
|
|
9183
|
+
</div>
|
|
9184
|
+
</div>
|
|
9185
|
+
</div>
|
|
9186
|
+
</div>
|
|
9187
|
+
</main>
|
|
9188
|
+
</div>
|
|
9189
|
+
`;
|
|
9190
|
+
|
|
9191
|
+
exports[`Storyshots c/ContentSlides With Background Shape 1`] = `
|
|
9192
|
+
<div
|
|
9193
|
+
className="base content-slides y-background4 b-light-y simple u1 md-u2"
|
|
9194
|
+
>
|
|
9195
|
+
<div
|
|
9196
|
+
className="base shapes"
|
|
9197
|
+
style={
|
|
9198
|
+
Object {
|
|
9199
|
+
"--horizontal-align": "flex-start",
|
|
9200
|
+
"--overflow": "hidden",
|
|
9201
|
+
"--shape-height": "65em",
|
|
9202
|
+
"--vertical-align": "center",
|
|
9203
|
+
}
|
|
9204
|
+
}
|
|
9205
|
+
>
|
|
9206
|
+
<div
|
|
9207
|
+
className="spiral"
|
|
9208
|
+
>
|
|
9209
|
+
<div
|
|
9210
|
+
className="circle-one"
|
|
9211
|
+
/>
|
|
9212
|
+
<div
|
|
9213
|
+
className="circle-two"
|
|
9214
|
+
/>
|
|
9215
|
+
<div
|
|
9216
|
+
className="circle-three"
|
|
9217
|
+
/>
|
|
9218
|
+
<div
|
|
9219
|
+
className="circle-four"
|
|
9220
|
+
/>
|
|
9221
|
+
</div>
|
|
9222
|
+
</div>
|
|
9223
|
+
<div
|
|
9224
|
+
className="horizontal-menu"
|
|
9225
|
+
>
|
|
9226
|
+
<div
|
|
9227
|
+
className="base progress-bar modifierAttached x-main2 y-background1 b-dark-y"
|
|
9228
|
+
data-length="50%"
|
|
9229
|
+
style={
|
|
9230
|
+
Object {
|
|
9231
|
+
"--height": ".4em",
|
|
9232
|
+
"--progress": 40,
|
|
9233
|
+
}
|
|
9234
|
+
}
|
|
9235
|
+
/>
|
|
9236
|
+
<div
|
|
9237
|
+
className="elementContent"
|
|
9238
|
+
>
|
|
9239
|
+
<div
|
|
9240
|
+
className="left"
|
|
9241
|
+
/>
|
|
9242
|
+
<div
|
|
9243
|
+
className="title"
|
|
9244
|
+
>
|
|
9245
|
+
<span
|
|
9246
|
+
className="md-h lg-h"
|
|
9247
|
+
>
|
|
9248
|
+
Welcome
|
|
9249
|
+
</span>
|
|
9250
|
+
<svg
|
|
9251
|
+
className="base svg base logo x-paragraph xs-h sm-h"
|
|
8973
9252
|
height="2em"
|
|
8974
9253
|
preserveAspectRatio="xMinYMin meet"
|
|
8975
9254
|
version="1.1"
|
|
@@ -4,6 +4,7 @@ import * as React from 'react'
|
|
|
4
4
|
import {
|
|
5
5
|
ContentSlides,
|
|
6
6
|
SiteContextProvider,
|
|
7
|
+
Shapes,
|
|
7
8
|
useContentSlides,
|
|
8
9
|
Title,
|
|
9
10
|
Logo,
|
|
@@ -74,7 +75,7 @@ export const Base = () => {
|
|
|
74
75
|
|
|
75
76
|
return (
|
|
76
77
|
<div className={`ui-${userTheme}`} style={{ height: '100%' }}>
|
|
77
|
-
<ContentSlides className="y-background1" steps={steps}>
|
|
78
|
+
<ContentSlides className="y-background1 b-dark-y" steps={steps}>
|
|
78
79
|
<ContentSlides.Sidebar
|
|
79
80
|
header={(
|
|
80
81
|
<Logo color="paragraph" />
|
|
@@ -341,7 +342,158 @@ export const Simple = () => {
|
|
|
341
342
|
)
|
|
342
343
|
}
|
|
343
344
|
return (
|
|
344
|
-
<ContentSlides className="y-background1" steps={steps} simple>
|
|
345
|
+
<ContentSlides className="y-background1 b-dark-y" steps={steps} simple>
|
|
346
|
+
<Main />
|
|
347
|
+
</ContentSlides>
|
|
348
|
+
)
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
export const WithBackgroundShape = () => {
|
|
352
|
+
const steps = [
|
|
353
|
+
{
|
|
354
|
+
id :'welcome',
|
|
355
|
+
title :'Welcome',
|
|
356
|
+
progress:40,
|
|
357
|
+
location:'welcome',
|
|
358
|
+
},
|
|
359
|
+
{
|
|
360
|
+
id :'plan',
|
|
361
|
+
title :'Choose your plan',
|
|
362
|
+
progress:60,
|
|
363
|
+
location:'select-plan',
|
|
364
|
+
},
|
|
365
|
+
{
|
|
366
|
+
id :'details',
|
|
367
|
+
title :'Personal details',
|
|
368
|
+
progress:70,
|
|
369
|
+
location:'personal-details',
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
id :'payment',
|
|
373
|
+
title :'Payment',
|
|
374
|
+
progress:90,
|
|
375
|
+
location:'payment',
|
|
376
|
+
},
|
|
377
|
+
]
|
|
378
|
+
|
|
379
|
+
const Main = () => {
|
|
380
|
+
const { isLastStep } = useContentSlides()
|
|
381
|
+
|
|
382
|
+
return (
|
|
383
|
+
<>
|
|
384
|
+
<ContentSlides.HorizontalMenu hideBackIcon={isLastStep} />
|
|
385
|
+
{' '}
|
|
386
|
+
<main>
|
|
387
|
+
<ContentSlides.Slide
|
|
388
|
+
index={0}
|
|
389
|
+
>
|
|
390
|
+
<Title
|
|
391
|
+
heading="Welcome"
|
|
392
|
+
headingAs="h1"
|
|
393
|
+
headingClassName="small"
|
|
394
|
+
subtitle="Welcome to this site. We hope you will have an amazing experience here."
|
|
395
|
+
/>
|
|
396
|
+
<ContentSlides.Navigator />
|
|
397
|
+
</ContentSlides.Slide
|
|
398
|
+
>
|
|
399
|
+
<ContentSlides.Slide
|
|
400
|
+
index={1}
|
|
401
|
+
>
|
|
402
|
+
<Title
|
|
403
|
+
heading="Part 2"
|
|
404
|
+
headingAs="h1"
|
|
405
|
+
headingClassName="small"
|
|
406
|
+
subtitle="Welcome to this site. We hope you will have an amazing experience here."
|
|
407
|
+
/>
|
|
408
|
+
<p>
|
|
409
|
+
In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
|
|
410
|
+
non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
|
|
411
|
+
enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
|
|
412
|
+
Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
|
|
413
|
+
porta placerat leo.
|
|
414
|
+
Donec scelerisque enim risus, in pharetra purus fringilla eu.
|
|
415
|
+
Cras placerat ac enim viverra rhoncus.
|
|
416
|
+
Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
|
|
417
|
+
Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
|
|
418
|
+
Nullam vel porttitor mi, ut vestibulum arcu.
|
|
419
|
+
{' '}
|
|
420
|
+
</p>
|
|
421
|
+
<p>
|
|
422
|
+
In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
|
|
423
|
+
non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
|
|
424
|
+
enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
|
|
425
|
+
Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
|
|
426
|
+
porta placerat leo.
|
|
427
|
+
Donec scelerisque enim risus, in pharetra purus fringilla eu.
|
|
428
|
+
Cras placerat ac enim viverra rhoncus.
|
|
429
|
+
Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
|
|
430
|
+
Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
|
|
431
|
+
Nullam vel porttitor mi, ut vestibulum arcu.
|
|
432
|
+
{' '}
|
|
433
|
+
</p>
|
|
434
|
+
<p>
|
|
435
|
+
In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
|
|
436
|
+
non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
|
|
437
|
+
enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
|
|
438
|
+
Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
|
|
439
|
+
porta placerat leo.
|
|
440
|
+
Donec scelerisque enim risus, in pharetra purus fringilla eu.
|
|
441
|
+
Cras placerat ac enim viverra rhoncus.
|
|
442
|
+
Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
|
|
443
|
+
Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
|
|
444
|
+
Nullam vel porttitor mi, ut vestibulum arcu.
|
|
445
|
+
{' '}
|
|
446
|
+
</p>
|
|
447
|
+
<p>
|
|
448
|
+
In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
|
|
449
|
+
non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
|
|
450
|
+
enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
|
|
451
|
+
Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
|
|
452
|
+
porta placerat leo.
|
|
453
|
+
Donec scelerisque enim risus, in pharetra purus fringilla eu.
|
|
454
|
+
Cras placerat ac enim viverra rhoncus.
|
|
455
|
+
Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
|
|
456
|
+
Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
|
|
457
|
+
Nullam vel porttitor mi, ut vestibulum arcu.
|
|
458
|
+
{' '}
|
|
459
|
+
</p>
|
|
460
|
+
|
|
461
|
+
<ContentSlides.Navigator />
|
|
462
|
+
</ContentSlides.Slide>
|
|
463
|
+
<ContentSlides.Slide
|
|
464
|
+
index={2}
|
|
465
|
+
>
|
|
466
|
+
<Title
|
|
467
|
+
heading="Part 3"
|
|
468
|
+
headingAs="h1"
|
|
469
|
+
headingClassName="small"
|
|
470
|
+
subtitle="Welcome to this site. We hope you will have an amazing experience here."
|
|
471
|
+
/>
|
|
472
|
+
<ContentSlides.Navigator />
|
|
473
|
+
</ContentSlides.Slide>
|
|
474
|
+
<ContentSlides.Slide
|
|
475
|
+
index={3}
|
|
476
|
+
>
|
|
477
|
+
<Title
|
|
478
|
+
heading="Part 4"
|
|
479
|
+
headingAs="h1"
|
|
480
|
+
headingClassName="small"
|
|
481
|
+
subtitle="Welcome to this site. We hope you will have an amazing experience here."
|
|
482
|
+
/>
|
|
483
|
+
<ContentSlides.Navigator />
|
|
484
|
+
</ContentSlides.Slide>
|
|
485
|
+
</main>
|
|
486
|
+
</>
|
|
487
|
+
)
|
|
488
|
+
}
|
|
489
|
+
return (
|
|
490
|
+
<ContentSlides className="y-background4 b-light-y" steps={steps} simple>
|
|
491
|
+
<Shapes
|
|
492
|
+
height="65em"
|
|
493
|
+
verticalAlign="center"
|
|
494
|
+
horizontalAlign="flex-start"
|
|
495
|
+
shape="spiral"
|
|
496
|
+
/>
|
|
345
497
|
<Main />
|
|
346
498
|
</ContentSlides>
|
|
347
499
|
)
|
|
@@ -14,7 +14,7 @@ $class-navigator:navigator;
|
|
|
14
14
|
$default-sidebar-width:minmax(250px, 330px);
|
|
15
15
|
$default-border:none;//2px solid var(--grid);
|
|
16
16
|
$default-border-radius:var(--theme-border-radius);
|
|
17
|
-
$default-content-background:var(--
|
|
17
|
+
$default-content-background: var(--background1);
|
|
18
18
|
$default-padding:var(--u);
|
|
19
19
|
|
|
20
20
|
$mobile-content-margin:6em;
|
|
@@ -61,7 +61,6 @@ $mobile-content-margin:6em;
|
|
|
61
61
|
|
|
62
62
|
//.#{$class-main-container} {
|
|
63
63
|
main {
|
|
64
|
-
background: var(--dark-y);
|
|
65
64
|
overflow: hidden;
|
|
66
65
|
position: relative;
|
|
67
66
|
|
|
@@ -79,7 +78,7 @@ $mobile-content-margin:6em;
|
|
|
79
78
|
.#{bem.$element-content} {
|
|
80
79
|
background: $default-content-background;
|
|
81
80
|
|
|
82
|
-
border:
|
|
81
|
+
border: var(--theme-border);
|
|
83
82
|
border-radius: $default-border-radius;
|
|
84
83
|
max-width: 600px;
|
|
85
84
|
padding: $default-padding;
|
|
@@ -108,8 +107,9 @@ $mobile-content-margin:6em;
|
|
|
108
107
|
|
|
109
108
|
.#{$class-horizontal-menu} {
|
|
110
109
|
background: $default-content-background;
|
|
111
|
-
border-bottom:
|
|
110
|
+
border-bottom: var(--theme-border);
|
|
112
111
|
color: var(--heading);
|
|
112
|
+
z-index: 1;
|
|
113
113
|
|
|
114
114
|
.#{bem.$element-content} {
|
|
115
115
|
display: grid;
|