modalist 1.0.0 → 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +6 -1
- data/README.md +6 -101
- data/app/helpers/modalist/modal_helper.rb +3 -3
- data/lib/modalist/version.rb +1 -1
- data/vendor/javascripts/modalist.js +26 -0
- data/vendor/javascripts/modalist.min.js +27 -0
- data/vendor/stylesheets/modailst.min.css +27 -0
- metadata +3 -2
- data/vendor/stylesheets/modalist.sass +0 -86
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7b782323baccf5b9c81bd18326c8e18b4060ce55af8c7a11091f68343b9f1f43
|
4
|
+
data.tar.gz: ac6a9e9915dbb8542ecea9af8cc2f92f1d64814c764707656091d7105c831339
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 78fd5ce85e533ff2f812c803c5886bdaacabd68ff265a1d8fcaaa09cce75421d669091d0654965032f25a752904ff090b4d70942b92c9c27c5054eaddf03d067
|
7
|
+
data.tar.gz: 809b847ce174a8fd66f46d69e8caef10dd51776ff86e9f9de5f41a6ac3c411d076ebb8fe6acf4f9d666894edc80004947d968ae0c9c930abe1e971d7b6c27c85
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
@@ -8,7 +8,7 @@ Modalist is a powerful ajaxified modal solution for Rails. Here is how it works:
|
|
8
8
|
2) Modalist fetches the modal contents from your specific modal-controller-action with AJAX
|
9
9
|
3) The modal opens
|
10
10
|
|
11
|
-
Modalist does not reinvent the wheel and uses
|
11
|
+
Modalist does not reinvent the wheel and uses todays best modal-engine [iziModal.js](https://github.com/dolce/iziModal) to backup its code.
|
12
12
|
|
13
13
|
---
|
14
14
|
|
@@ -18,11 +18,8 @@ Modalist does not reinvent the wheel and uses the best modal-engine [iziModal.js
|
|
18
18
|
* [Usage](#usage)
|
19
19
|
* [Controllers](#controllers)
|
20
20
|
* [Views](#views)
|
21
|
-
* [Trigger a modal](#trigger-a-modal)
|
22
|
-
* [Modalist functions](#modalist-functions)
|
23
|
-
* [Options](#options)
|
24
21
|
* [Styles](#styles)
|
25
|
-
* [
|
22
|
+
* [Modalist.js](#modalistjs)
|
26
23
|
* [To Do](#to-do)
|
27
24
|
* [Contributing](#contributing)
|
28
25
|
* [Contributors](#contributors)
|
@@ -65,7 +62,7 @@ First let's add the necessary assets to your pipeline:
|
|
65
62
|
```css
|
66
63
|
/*
|
67
64
|
*= require iziModal
|
68
|
-
*= require modalist
|
65
|
+
*= require modalist.min
|
69
66
|
*/
|
70
67
|
```
|
71
68
|
|
@@ -79,7 +76,7 @@ Specify where modals should be located in your view:
|
|
79
76
|
%head
|
80
77
|
-# ...
|
81
78
|
%body
|
82
|
-
=
|
79
|
+
= render_modalist
|
83
80
|
= yield
|
84
81
|
```
|
85
82
|
|
@@ -142,86 +139,6 @@ In your Modalist views are a couple of helper methods available:
|
|
142
139
|
Content ...
|
143
140
|
```
|
144
141
|
|
145
|
-
### Trigger a modal
|
146
|
-
|
147
|
-
There are numerous ways to trigger/open a modal with Modalist.
|
148
|
-
|
149
|
-
One options is to open the modal by calling a JavaScript function - more on that [here](#functions).
|
150
|
-
|
151
|
-
#### Links
|
152
|
-
|
153
|
-
The most common scenario is using a link to trigger the opening of a modal:
|
154
|
-
|
155
|
-
```haml
|
156
|
-
= link_to 'Open modal', settings_modalist_url, class: 'modalist--trigger'
|
157
|
-
```
|
158
|
-
|
159
|
-
You can use [data attributes](#options) to pass options customizing the modal.
|
160
|
-
|
161
|
-
#### Forms
|
162
|
-
|
163
|
-
When you want to open a modal after submitting a form - this is as simple as it gets:
|
164
|
-
|
165
|
-
```haml
|
166
|
-
= simple_form_for @setting, settings_modalist_url(id: @setting.id), method: :get do |f|
|
167
|
-
-# ...
|
168
|
-
= f.input :submit, input_html: { class: 'modalist--trigger', data: { modalist_form: true } }
|
169
|
-
```
|
170
|
-
|
171
|
-
You can use [data attributes](#options) to pass options customizing the modal.
|
172
|
-
|
173
|
-
#### Elements
|
174
|
-
|
175
|
-
You can also trigger a modal from any other HTML element in your view:
|
176
|
-
|
177
|
-
```haml
|
178
|
-
.modalist--trigger{ data: { modalist_url: settings_modalist_url } }
|
179
|
-
```
|
180
|
-
|
181
|
-
You can use [data attributes](#options) to pass options customizing the modal.
|
182
|
-
|
183
|
-
### Modalist functions
|
184
|
-
|
185
|
-
Modalist's JavaScript component provides a set of functions to handle your modals:
|
186
|
-
|
187
|
-
#### Open modals
|
188
|
-
|
189
|
-
```js
|
190
|
-
Modalist.open({ url: 'http://localhost:3000/settings/modal' });
|
191
|
-
```
|
192
|
-
|
193
|
-
You can pass [options](#options) to customize the modal:
|
194
|
-
|
195
|
-
```js
|
196
|
-
Modalist.open({
|
197
|
-
url: 'http://localhost:3000/settings/modal',
|
198
|
-
form: false,
|
199
|
-
fullScreen: false
|
200
|
-
});
|
201
|
-
```
|
202
|
-
|
203
|
-
#### Close modals
|
204
|
-
|
205
|
-
```js
|
206
|
-
Modalist.close();
|
207
|
-
```
|
208
|
-
|
209
|
-
### Options
|
210
|
-
|
211
|
-
There are two sets of options you can pass to Modalist. Those who get passed on initialization and those who get passed on any subsequent calls of a function.
|
212
|
-
|
213
|
-
#### Initialization
|
214
|
-
|
215
|
-
**`ìziModal`:** Options hash utilized to initialize [iziModal](https://github.com/dolce/iziModal).
|
216
|
-
|
217
|
-
#### Subsequent calls
|
218
|
-
|
219
|
-
**`url`:** URL to fetch content of the modal from. Takes a string.
|
220
|
-
|
221
|
-
**`form`:** Submit a form and use the response to populate the modal. Takes a string to specify a jQuery selector for the form or `false`.
|
222
|
-
|
223
|
-
**`fullScreen`:** Show a full screen modal instead of the default windowed modal. Takes a 'true', `'mobile'` (uses a full screen modal on devices smaller than `800px`) or `false`.
|
224
|
-
|
225
142
|
### Styles
|
226
143
|
|
227
144
|
To customize the styles of your modals, require the vendored default styles and then override them with your custom CSS.
|
@@ -239,21 +156,9 @@ It is often useful to be able to provide view-specific styles. Modalist therefor
|
|
239
156
|
}
|
240
157
|
```
|
241
158
|
|
242
|
-
###
|
243
|
-
|
244
|
-
Modalist emits events that allow you to track the navigation lifecycle and respond to content loading. Modalist fires events on the `$(document)` object.
|
245
|
-
|
246
|
-
* `modalist:click` fires when you click a Modal enabled link to trigger a modal opening. The clicked element is the event target. Access the requested location with `event.data.url`.
|
247
|
-
|
248
|
-
* `modalist:request-start` fires before Modal issues a network request to fetch the modal content.
|
249
|
-
|
250
|
-
* `modalist:request-end` fires after the network request completes.
|
251
|
-
|
252
|
-
* `modalist:before-render` fires before rendering the content.
|
253
|
-
|
254
|
-
* `modalist:render` fires after Modal renders the content in the modal.
|
159
|
+
### Modalist.js
|
255
160
|
|
256
|
-
|
161
|
+
Continue reading [here](https://github.com/jonhue/modalist.js) to learn how to use modalist.js to open modals and fetch their content vie AJAX.
|
257
162
|
|
258
163
|
---
|
259
164
|
|
@@ -1,12 +1,12 @@
|
|
1
1
|
module Modalist
|
2
2
|
module ModalHelper
|
3
3
|
|
4
|
-
def
|
5
|
-
render 'modalist/modal'
|
4
|
+
def render_modalist
|
5
|
+
render partial: 'modalist/modal'
|
6
6
|
end
|
7
7
|
|
8
8
|
def modalist_close
|
9
|
-
render 'modalist/close'
|
9
|
+
render partial: 'modalist/close'
|
10
10
|
end
|
11
11
|
|
12
12
|
def modalist_title title
|
data/lib/modalist/version.rb
CHANGED
@@ -1,3 +1,29 @@
|
|
1
|
+
/**!
|
2
|
+
* @fileOverview modalist.js - A powerful AJAX modal plugin extending iziModal
|
3
|
+
* @version 1.0.0
|
4
|
+
* @license
|
5
|
+
* MIT License
|
6
|
+
*
|
7
|
+
* Copyright (c) 2017 Jonas Hübotter
|
8
|
+
*
|
9
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
10
|
+
* of this software and associated documentation files (the "Software"), to deal
|
11
|
+
* in the Software without restriction, including without limitation the rights
|
12
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
13
|
+
* copies of the Software, and to permit persons to whom the Software is
|
14
|
+
* furnished to do so, subject to the following conditions:
|
15
|
+
*
|
16
|
+
* The above copyright notice and this permission notice shall be included in all
|
17
|
+
* copies or substantial portions of the Software.
|
18
|
+
*
|
19
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
20
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
21
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
22
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
23
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
24
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
25
|
+
* SOFTWARE.
|
26
|
+
*/
|
1
27
|
(function($) {
|
2
28
|
var Modalist = new function(options) {
|
3
29
|
|
@@ -0,0 +1,27 @@
|
|
1
|
+
/**!
|
2
|
+
* @fileOverview modalist.js - A powerful AJAX modal plugin extending iziModal
|
3
|
+
* @version 1.0.0
|
4
|
+
* @license
|
5
|
+
* MIT License
|
6
|
+
*
|
7
|
+
* Copyright (c) 2017 Jonas Hübotter
|
8
|
+
*
|
9
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
10
|
+
* of this software and associated documentation files (the "Software"), to deal
|
11
|
+
* in the Software without restriction, including without limitation the rights
|
12
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
13
|
+
* copies of the Software, and to permit persons to whom the Software is
|
14
|
+
* furnished to do so, subject to the following conditions:
|
15
|
+
*
|
16
|
+
* The above copyright notice and this permission notice shall be included in all
|
17
|
+
* copies or substantial portions of the Software.
|
18
|
+
*
|
19
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
20
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
21
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
22
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
23
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
24
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
25
|
+
* SOFTWARE.
|
26
|
+
*/
|
27
|
+
(function(b){var a=new function(c){var d={iziModal:{}};c=b.extend(d,c);this.modal=b("#modalist");this.iziModal=b(a.modal).iziModal(c.iziModal);b(".modalist--trigger").unbind("click");b(".modalist--trigger").click(function(h){h.preventDefault();var h=jQuery.Event("modalist:click"),e=b(this).data("modalist-url")||b(this).attr("href"),g=b(this).data("modalist-form")||false,f=b(this).data("modalist-full-screen");h.target=b(this);h.data={url:e};b(document).trigger(h);a.reset();a.fullScreen(f);a.load(e,g)});this.open=function(e){var f={url:null,form:false,fullScreen:false};e=b.extend(f,e);a.reset();a.fullScreen(e.fullScreen);a.load(e.url,e.form)};this.close=function(){b(a.modal).iziModal("close")};this.reset=function(){b(a.modal).iziModal("setTransitionIn","comingIn");b(a.modal).iziModal("setTransitionOut","comingOut");b(a.modal).data("full-screen",false);b(a.modal).iziModal("setTop","auto");b(a.modal).iziModal("setBottom","auto")};this.fullScreen=function(e){if(e=="true"||(e=="mobile"&&b(window).width()<=800)){b(a.modal).iziModal("setTransitionIn","fadeInRight");b(a.modal).iziModal("setTransitionOut","fadeOutRight");b(a.modal).data("full-screen",true)}};this.load=function(f,e){var g={form:false};e=b.extend(g,e);b(document).trigger("modalist:request-start");if(e.form){b.ajax({url:b(e.form).attr("action"),type:"GET",data:b(e.form).serialize(),success:function(h){b(document).trigger("modalist:request-end");a.data(h)}})}else{b.get(f,function(h){b(document).trigger("modalist:request-end");a.data(h)})}};this.data=function(e){b(document).trigger("modalist:before-render");b(a.modal).find(".iziModal-content").html(e);b(document).trigger("modal:render");b(a.modal).iziModal("open");if(b(a.modal).height()+60>b(window).height()){b(a.modal).iziModal("setTop",30);b(a.modal).iziModal("setBottom",30)}b(document).trigger("modalist:load")}}})(jQuery);
|
@@ -0,0 +1,27 @@
|
|
1
|
+
/**!
|
2
|
+
* @fileOverview modalist.js - A powerful AJAX modal plugin extending iziModal
|
3
|
+
* @version 1.0.0
|
4
|
+
* @license
|
5
|
+
* MIT License
|
6
|
+
*
|
7
|
+
* Copyright (c) 2017 Jonas Hübotter
|
8
|
+
*
|
9
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
10
|
+
* of this software and associated documentation files (the "Software"), to deal
|
11
|
+
* in the Software without restriction, including without limitation the rights
|
12
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
13
|
+
* copies of the Software, and to permit persons to whom the Software is
|
14
|
+
* furnished to do so, subject to the following conditions:
|
15
|
+
*
|
16
|
+
* The above copyright notice and this permission notice shall be included in all
|
17
|
+
* copies or substantial portions of the Software.
|
18
|
+
*
|
19
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
20
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
21
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
22
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
23
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
24
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
25
|
+
* SOFTWARE.
|
26
|
+
*/
|
27
|
+
#modalist.iziModal{box-shadow:0 0.0625em 0.3125em 0 rgba(101,119,134,0.05);border:.0625rem solid #DCE2E7;border-radius:.3125rem !important;max-width:90% !important;width:37.5rem;transition:margin-top .25s ease-out !important}#modalist.iziModal::after{content:none}#modalist.iziModal[data-full-screen="true"]{max-width:100% !important;width:100%;border-radius:0 !important;border:none;height:100vh !important}#modalist.iziModal[data-full-screen="true"].fadeInRight{animation:modalist-fadeInRight .35s ease-out !important}#modalist.iziModal[data-full-screen="true"].fadeOutRight{animation:modalist-fadeOutRight .35s ease-out !important}#modalist.iziModal ::-webkit-scrollbar{width:.3125rem}#modalist.iziModal ::-webkit-scrollbar-track{background:transparent}#modalist.iziModal ::-webkit-scrollbar-thumb{border-radius:.15625rem;background:#DCE2E7}#modalist.iziModal ::-webkit-scrollbar-thumb:hover{background:#bec7cf}#modalist.iziModal>.iziModal-wrap{border-radius:.3125rem;border-bottom:.0625rem solid #DCE2E7}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header{background:#FCFCFC;border-radius:.3125rem .3125rem 0 0;display:flex;align-items:center;justify-content:space-between;padding:1.25rem;border-bottom:.0625rem solid #DCE2E7}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header h4,#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header p{margin:0}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header h4{line-height:1.58;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight:600;font-size:1.125rem;color:#14171A}@media (min-width: 800px){#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header h4{font-size:1.25rem}}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header p{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#3d4553;font-weight:normal;letter-spacing:-.003em;font-size:.875rem;line-height:1.75}@media (min-width: 800px){#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header p{font-size:1rem}}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header .modalist--close{display:flex;align-items:center;justify-content:center;opacity:.85}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header .modalist--close:hover,#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header .modalist--close:focus{opacity:1}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--content{background:white;border-radius:.3125rem;padding:1.25rem}.iziModal-overlay{background:rgba(231,236,240,0.87) !important}#modalist.iziModal,.iziModal-overlay{animation-duration:.5s !important}@keyframes modalist-fadeInRight{from{transform:translateX(100%)}to{transform:none}}@keyframes modalist-fadeOutRight{from{transform:none}to{transform:translateX(100%)}}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: modalist
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.
|
4
|
+
version: 1.0.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Jonas Hübotter
|
@@ -89,9 +89,10 @@ files:
|
|
89
89
|
- vendor/javascripts/iziModal.js
|
90
90
|
- vendor/javascripts/iziModal.min.js
|
91
91
|
- vendor/javascripts/modalist.js
|
92
|
+
- vendor/javascripts/modalist.min.js
|
92
93
|
- vendor/stylesheets/iziModal.css
|
93
94
|
- vendor/stylesheets/iziModal.min.css
|
94
|
-
- vendor/stylesheets/
|
95
|
+
- vendor/stylesheets/modailst.min.css
|
95
96
|
homepage: https://github.com/jonhue/modalist
|
96
97
|
licenses:
|
97
98
|
- MIT
|
@@ -1,86 +0,0 @@
|
|
1
|
-
#modalist.iziModal
|
2
|
-
box-shadow: 0 .0625em .3125em 0 rgba(color(text, base, true), .05)
|
3
|
-
border: .0625rem solid #DCE2E7
|
4
|
-
border-radius: .3125rem !important
|
5
|
-
max-width: 90% !important
|
6
|
-
width: 37.5rem
|
7
|
-
// temporarily fixing height resizing
|
8
|
-
transition: margin-top .25s ease-out !important
|
9
|
-
&::after
|
10
|
-
content: none
|
11
|
-
&[data-full-screen="true"]
|
12
|
-
max-width: 100% !important
|
13
|
-
width: 100%
|
14
|
-
border-radius: 0 !important
|
15
|
-
border: none
|
16
|
-
height: 100vh !important
|
17
|
-
&.fadeInRight
|
18
|
-
animation: modalist-fadeInRight .35s ease-out !important
|
19
|
-
&.fadeOutRight
|
20
|
-
animation: modalist-fadeOutRight .35s ease-out !important
|
21
|
-
::-webkit-scrollbar
|
22
|
-
width: .3125rem
|
23
|
-
::-webkit-scrollbar-track
|
24
|
-
background: transparent
|
25
|
-
::-webkit-scrollbar-thumb
|
26
|
-
border-radius: .15625rem
|
27
|
-
background: #DCE2E7
|
28
|
-
::-webkit-scrollbar-thumb:hover
|
29
|
-
background: #bec7cf
|
30
|
-
& > .iziModal-wrap
|
31
|
-
border-radius: .3125rem
|
32
|
-
border-bottom: .0625rem solid #DCE2E7
|
33
|
-
& > .iziModal-content
|
34
|
-
& > .modalist--header
|
35
|
-
background: #FCFCFC
|
36
|
-
border-radius: .3125rem .3125rem 0 0
|
37
|
-
display: flex
|
38
|
-
align-items: center
|
39
|
-
justify-content: space-between
|
40
|
-
padding: 1.25rem
|
41
|
-
border-bottom: .0625rem solid #DCE2E7
|
42
|
-
h4, p
|
43
|
-
margin: 0
|
44
|
-
h4
|
45
|
-
line-height: 1.58
|
46
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
|
47
|
-
font-weight: 600
|
48
|
-
font-size: 1.125rem
|
49
|
-
color: #14171A
|
50
|
-
@media (min-width: 800px)
|
51
|
-
font-size: 1.25rem
|
52
|
-
p
|
53
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
|
54
|
-
color: #3d4553
|
55
|
-
font-weight: normal
|
56
|
-
letter-spacing: -.003em
|
57
|
-
font-size: .875rem
|
58
|
-
line-height: 1.75
|
59
|
-
@media (min-width: 800px)
|
60
|
-
font-size: 1rem
|
61
|
-
.modalist--close
|
62
|
-
display: flex
|
63
|
-
align-items: center
|
64
|
-
justify-content: center
|
65
|
-
opacity: .85
|
66
|
-
&:hover, &:focus
|
67
|
-
opacity: 1
|
68
|
-
& > .modalist--content
|
69
|
-
background: white
|
70
|
-
border-radius: .3125rem
|
71
|
-
padding: 1.25rem
|
72
|
-
.iziModal-overlay
|
73
|
-
background: transparentize(#E7ECF0, 0.13) !important
|
74
|
-
#modalist.iziModal, .iziModal-overlay
|
75
|
-
animation-duration: .5s !important
|
76
|
-
|
77
|
-
@keyframes modalist-fadeInRight
|
78
|
-
from
|
79
|
-
transform: translateX(100%)
|
80
|
-
to
|
81
|
-
transform: none
|
82
|
-
@keyframes modalist-fadeOutRight
|
83
|
-
from
|
84
|
-
transform: none
|
85
|
-
to
|
86
|
-
transform: translateX(100%)
|