Skip to content
This repository was archived by the owner on Nov 16, 2018. It is now read-only.

Commit 4aa3232

Browse files
codeBeltcodeBelt
authored
add awesome modal code (#31)
1 parent 161cce0 commit 4aa3232

25 files changed

+887
-5
lines changed

‎.yarnrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
save-prefix false
1+
save-prefix ""

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,9 @@
9393
"dependencies": {
9494
"babel-polyfill": "6.26.0",
9595
"bootstrap": "next",
96+
"classnames": "2.2.5",
9697
"fetch-everywhere": "1.0.5",
98+
"form2js": "1.0.0",
9799
"fs-extra": "4.0.2",
98100
"hapi": "16.6.2",
99101
"hapi-webpack-plugin": "2.0.0",

‎src/RouterWrapper.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Contact from './views/contact/Contact';
1010
import FooterAsync from './views/landmarks/FooterAsync';
1111
import Header from './views/landmarks/Header';
1212
import NotFoundAsync from './views/errors/NotFoundAsync';
13+
import ModalHub from './views/modals/ModalHub';
1314

1415
const RouterWrapper = (props) => {
1516
const Router = props.isServerSide ? StaticRouter : ConnectedRouter;
@@ -46,6 +47,7 @@ const RouterWrapper = (props) => {
4647
<Route component={NotFoundAsync} />
4748
</Switch>
4849
<FooterAsync />
50+
<ModalHub />
4951
</div>
5052
</Router>
5153
</Provider>

‎src/assets/styles/base/elements.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
form:not(.u-validate) input:invalid {
2+
background-color: #fafad2;
3+
border: 1px solid var(--COLOR_BRAND_PRIMARY);
4+
}

‎src/assets/styles/components/inputField.css

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.inputField-label {
2+
display: block;
3+
margin-bottom: 5px;
4+
}
5+
6+
.inputField-input {
7+
appearance: none;
8+
background-color: #ffffff;
9+
border: 1px solid var(--COLOR_DARKGRAY_MEDIUM);
10+
box-shadow: inset 0 0 0 1px color(var(--COLOR_PRIMARY) alpha(0%));
11+
font-size: 16px;
12+
max-width: 100%;
13+
padding: 9px;
14+
transition:
15+
border-color 300ms var(--EASE_IN_QUAD),
16+
box-shadow 300ms var(--EASE_IN_QUAD);
17+
18+
&:focus {
19+
border-color: var(--COLOR_PRIMARY);
20+
box-shadow: inset 0 0 0 1px color(var(--COLOR_PRIMARY) alpha(100%));
21+
transition:
22+
border-color 250ms var(--EASE_OUT_QUAD),
23+
box-shadow 250ms var(--EASE_OUT_QUAD);
24+
}
25+
}
26+
27+
.inputField_inline {
28+
align-items: center;
29+
display: flex;
30+
}
31+
32+
.inputField_inline .inputField-label {
33+
flex: 1 0 auto;
34+
margin-bottom: 0;
35+
margin-right: 12px;
36+
}
37+
38+
.inputField_noLabel .inputField-label {
39+
@apply --isVisuallyHidden;
40+
}

‎src/assets/styles/components/modal.css

+195
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
.modal {
2+
display: block;
3+
bottom: 0;
4+
left: 0;
5+
padding-top: 5px;
6+
position: fixed;
7+
right: 0;
8+
top: 0;
9+
z-index: var(--Z_INDEX_MODAL);
10+
11+
@media (--SM) {
12+
padding-top: 50px;
13+
}
14+
15+
@media (--MD) {
16+
padding-top: 100px;
17+
}
18+
}
19+
20+
.modal-overlay {
21+
animation: modalOverlayFadeIn 300ms var(--EASE_OUT_CUBIC) forwards;
22+
background-color: rgba(0, 0, 0, 0.4);
23+
bottom: 0;
24+
cursor: pointer;
25+
left: 0;
26+
opacity: 0;
27+
position: fixed;
28+
right: 0;
29+
top: 0;
30+
z-index: var(--Z_INDEX_MODAL_OVERLAY);
31+
}
32+
33+
.modal-overlay_required {
34+
cursor: default;
35+
}
36+
37+
.modal-content {
38+
animation: modalDropIn 300ms var(--EASE_OUT_CUBIC) forwards;
39+
background-color: #fefefe;
40+
border: 1px solid #888888;
41+
border-radius: 10px;
42+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
43+
display: flex;
44+
flex-direction: column;
45+
font-size: 16px;
46+
margin: auto auto 5px;
47+
max-width: 800px;
48+
min-height: 250px;
49+
opacity: 0;
50+
overflow: hidden;
51+
padding: 20px;
52+
position: relative;
53+
transform: translateY(-5px);
54+
width: calc(100% - 10px);
55+
z-index: var(--Z_INDEX_MODAL_CONTENT);
56+
57+
@media (--SM) {
58+
margin-bottom: 20px;
59+
transform: translateY(-50px);
60+
}
61+
62+
@media (--MD) {
63+
margin-bottom: 20px;
64+
transform: translateY(-100px);
65+
}
66+
}
67+
68+
.modal-content_sm {
69+
max-width: 440px;
70+
}
71+
72+
.modal-content_md {
73+
max-width: 600px;
74+
}
75+
76+
.modal-close {
77+
color: #000000;
78+
font-size: 28px;
79+
font-weight: bold;
80+
width: 28px;
81+
}
82+
83+
.modal-close:active,
84+
.modal-close:hover,
85+
.modal-close:focus {
86+
color: #000000;
87+
cursor: pointer;
88+
text-decoration: none;
89+
}
90+
91+
.modal-header {
92+
align-items: center;
93+
display: flex;
94+
justify-content: flex-end;
95+
margin-bottom: 10px;
96+
padding: 2px 16px;
97+
}
98+
99+
.modal-header-icon {
100+
margin-right: 5px;
101+
width: 16px;
102+
}
103+
104+
.modal-header_left {
105+
justify-content: flex-start;
106+
padding: 2px 16px;
107+
}
108+
109+
.modal-header_center {
110+
justify-content: center;
111+
}
112+
113+
.modal-body {
114+
flex: 1 0 auto;
115+
min-height: 160px;
116+
padding: 2px 16px;
117+
text-align: center;
118+
119+
& p strong {
120+
font-weight: 700;
121+
}
122+
}
123+
124+
.modal-body + .modal-footer {
125+
margin-top: 30px;
126+
}
127+
128+
.modal-buttonspace {
129+
padding-bottom: 4px;
130+
padding-top: 4px;
131+
width: 100%;
132+
}
133+
134+
.modal-footer {
135+
display: flex;
136+
justify-content: flex-end;
137+
padding: 0 16px;
138+
139+
& > * {
140+
margin-right: 10px;
141+
142+
&:last-child {
143+
margin-right: 0;
144+
}
145+
}
146+
}
147+
148+
.modal-footer_stack {
149+
display: block;
150+
151+
@media (--XS) {
152+
display: flex;
153+
justify-content: flex-end;
154+
}
155+
156+
& > * {
157+
margin-bottom: 10px;
158+
width: 100%;
159+
160+
@media (--XS) {
161+
margin-bottom: 0;
162+
width: auto;
163+
}
164+
165+
&:last-child {
166+
margin-bottom: 0;
167+
}
168+
}
169+
}
170+
171+
.modal-footer_block {
172+
& > * {
173+
@media (--XS) {
174+
width: 50%;
175+
}
176+
}
177+
}
178+
179+
.loader ~ .modal-body {
180+
visibility: hidden;
181+
}
182+
183+
@keyframes modalDropIn {
184+
to {
185+
opacity: 1;
186+
transform: translateY(0);
187+
}
188+
}
189+
190+
@keyframes modalOverlayFadeIn {
191+
to {
192+
opacity: 1;
193+
}
194+
}
195+

‎src/assets/styles/components/modalForm.css

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
.modalForm {
2+
text-align: left;
3+
}
4+
5+
.modalForm-warning {
6+
font-size: 14px;
7+
margin-bottom: 15px;
8+
}
9+
10+
.modalForm-item {
11+
margin-bottom: 20px;
12+
13+
@media (--XS) {
14+
align-items: center;
15+
display: flex;
16+
flex-wrap: wrap;
17+
margin-left: -20px;
18+
}
19+
20+
@media (--SM) {
21+
flex-wrap: nowrap;
22+
margin-bottom: 10px;
23+
}
24+
25+
&:last-child {
26+
margin-bottom: 0;
27+
}
28+
29+
& > * {
30+
@media (--XS) {
31+
flex: 0 0 auto;
32+
padding-left: 20px;
33+
}
34+
}
35+
}
36+
37+
.modalForm-item-label {
38+
display: block;
39+
margin-bottom: 5px;
40+
41+
@media (--XS) {
42+
width: 100%;
43+
}
44+
45+
@media (--SM) {
46+
margin-bottom: 0;
47+
text-align: right;
48+
width: 25%;
49+
}
50+
}
51+
52+
.modalForm-item-input {
53+
@media (--XS) {
54+
width: 55%;
55+
}
56+
57+
@media (--SM) {
58+
width: 45%;
59+
}
60+
}
61+
62+
.modalForm-item-input + .modalForm-item-modifier {
63+
margin-top: 10px;
64+
65+
@media (--XS) {
66+
margin-top: 0;
67+
}
68+
}
69+
70+
.modalForm-item-modifier {
71+
text-align: right;
72+
73+
@media (--XS) {
74+
text-align: left;
75+
width: 45%;
76+
}
77+
78+
@media (--SM) {
79+
width: 30%;
80+
}
81+
}

‎src/assets/styles/helpers/easing.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* stylelint-disable number-no-trailing-zeros */
2+
:root {
3+
--EASE_IN_QUAD: cubic-bezier(0.550, 0.085, 0.680, 0.530);
4+
--EASE_IN_SINE: cubic-bezier(0.470, 0.000, 0.745, 0.715);
5+
--EASE_OUT_SINE: cubic-bezier(0.390, 0.575, 0.565, 1.000);
6+
--EASE_OUT_BACK: cubic-bezier(0.175, 0.885, 0.320, 1.275);
7+
--EASE_OUT_QUAD: cubic-bezier(0.250, 0.460, 0.450, 0.940);
8+
--EASE_OUT_CUBIC: cubic-bezier(0.215, 0.610, 0.355, 1.000);
9+
}

‎src/assets/styles/helpers/utils.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* utils
2+
------------------------------------------------- */
3+
:root {
4+
--isVisuallyHidden: {
5+
border: 0;
6+
clip: rect(0 0 0 0);
7+
height: 1px;
8+
margin: -1px;
9+
overflow: hidden;
10+
padding: 0;
11+
position: absolute;
12+
width: 1px;
13+
};
14+
}
15+
16+
.u-isHidden {
17+
display: none !important;
18+
}
19+
20+
.u-isVisuallyHidden {
21+
@apply --isVisuallyHidden;
22+
}

0 commit comments

Comments
 (0)