shepherdjs_rails 1.8.1 → 2.0.0.pre.beta.35

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,246 +1,170 @@
1
- .shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top.shepherd-target-attached-left .shepherd-content:before,
2
- .shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top.shepherd-target-attached-right .shepherd-content:before,
3
- .shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom.shepherd-target-attached-left .shepherd-content:before,
4
- .shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom.shepherd-target-attached-right .shepherd-content:before {
5
- display: none; }
6
-
7
- .shepherd-element, .shepherd-element:after, .shepherd-element:before, .shepherd-element *, .shepherd-element *:after, .shepherd-element *:before {
8
- box-sizing: border-box; }
9
-
10
- .shepherd-element {
11
- position: absolute;
12
- display: none; }
13
- .shepherd-element.shepherd-open {
14
- display: block; }
15
-
16
- .shepherd-element.shepherd-theme-dark {
17
- max-width: 100%;
18
- max-height: 100%; }
19
- .shepherd-element.shepherd-theme-dark .shepherd-content {
20
- border-radius: 5px;
21
- position: relative;
22
- font-family: inherit;
23
- background: #232323;
24
- color: #eee;
25
- padding: 1em;
26
- font-size: 1.1em;
27
- line-height: 1.5em; }
28
- .shepherd-element.shepherd-theme-dark .shepherd-content:before {
29
- content: "";
30
- display: block;
31
- position: absolute;
32
- width: 0;
33
- height: 0;
34
- border-color: transparent;
35
- border-width: 16px;
36
- border-style: solid;
37
- pointer-events: none; }
38
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content {
1
+ /**
2
+ * Styles to support usage of Tippy.js tooltips (https://atomiks.github.io/tippyjs)
3
+ */
4
+ /**
5
+ * Tippy tooltips have the following base structure:
6
+ *
7
+ * <div class="tippy-popper" x-placement="top">
8
+ * <div class="tippy-tooltip">
9
+ * <div class="tippy-content">
10
+ * [[ Content Here ]]
11
+ * </div>
12
+ * </div>
13
+ * </div>
14
+ */
15
+ .tippy-popper {
16
+ z-index: 9999; }
17
+ .tippy-popper .tippy-arrow {
18
+ border: 16px solid transparent;
19
+ content: '';
20
+ display: block;
21
+ height: 0;
22
+ pointer-events: none;
23
+ position: absolute;
24
+ width: 0; }
25
+ .tippy-popper[x-placement^='top'] {
39
26
  margin-bottom: 16px; }
40
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content:before {
41
- top: 100%;
42
- left: 50%;
43
- margin-left: -16px;
44
- border-top-color: #232323; }
45
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content {
27
+ .tippy-popper[x-placement^='top'] .tippy-arrow {
28
+ border-bottom: 0;
29
+ border-top-color: #232323;
30
+ left: calc(50% - 16px); }
31
+ .tippy-popper[x-placement^='bottom'] {
46
32
  margin-top: 16px; }
47
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content:before {
48
- bottom: 100%;
49
- left: 50%;
50
- margin-left: -16px;
51
- border-bottom-color: #232323; }
52
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content {
33
+ .tippy-popper[x-placement^='bottom'] .tippy-arrow {
34
+ border-bottom-color: #303030;
35
+ border-top: 0;
36
+ left: calc(50% - 16px); }
37
+ .tippy-popper[x-placement^='left'] {
53
38
  margin-right: 16px; }
54
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content:before {
55
- left: 100%;
56
- top: 50%;
57
- margin-top: -16px;
58
- border-left-color: #232323; }
59
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content {
60
- margin-left: 16px; }
61
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content:before {
62
- right: 100%;
63
- top: 50%;
39
+ .tippy-popper[x-placement^='left'] .tippy-arrow {
40
+ border-left-color: #232323;
41
+ border-right: 0;
64
42
  margin-top: -16px;
65
- border-right-color: #232323; }
66
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-left.shepherd-target-attached-center .shepherd-content {
67
- left: -32px; }
68
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-right.shepherd-target-attached-center .shepherd-content {
69
- left: 32px; }
70
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-middle .shepherd-content {
71
- margin-top: 16px; }
72
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-middle .shepherd-content:before {
73
- bottom: 100%;
74
- left: 16px;
75
- border-bottom-color: #232323; }
76
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-middle .shepherd-content {
77
- margin-top: 16px; }
78
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-middle .shepherd-content:before {
79
- bottom: 100%;
80
- right: 16px;
81
- border-bottom-color: #232323; }
82
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-middle .shepherd-content {
83
- margin-bottom: 16px; }
84
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-middle .shepherd-content:before {
85
- top: 100%;
86
- left: 16px;
87
- border-top-color: #232323; }
88
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-middle .shepherd-content {
89
- margin-bottom: 16px; }
90
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-middle .shepherd-content:before {
91
- top: 100%;
92
- right: 16px;
93
- border-top-color: #232323; }
94
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content {
95
- margin-top: 16px; }
96
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content:before {
97
- bottom: 100%;
98
- left: 16px;
99
- border-bottom-color: #232323; }
100
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content {
101
- margin-top: 16px; }
102
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content:before {
103
- bottom: 100%;
104
- right: 16px;
105
- border-bottom-color: #232323; }
106
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content {
107
- margin-bottom: 16px; }
108
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content:before {
109
- top: 100%;
110
- left: 16px;
111
- border-top-color: #232323; }
112
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content {
113
- margin-bottom: 16px; }
114
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content:before {
115
- top: 100%;
116
- right: 16px;
117
- border-top-color: #232323; }
118
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
119
- margin-right: 16px; }
120
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
121
- top: 16px;
122
- left: 100%;
123
- border-left-color: #232323; }
124
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
43
+ top: calc(50% - 16px); }
44
+ .tippy-popper[x-placement^='right'] {
125
45
  margin-left: 16px; }
126
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
127
- top: 16px;
128
- right: 100%;
129
- border-right-color: #232323; }
130
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
131
- margin-right: 16px; }
132
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
133
- bottom: 16px;
134
- left: 100%;
135
- border-left-color: #232323; }
136
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
137
- margin-left: 16px; }
138
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
139
- bottom: 16px;
140
- right: 100%;
141
- border-right-color: #232323; }
46
+ .tippy-popper[x-placement^='right'] .tippy-arrow {
47
+ border-left: 0;
48
+ border-right-color: #232323;
49
+ top: calc(50% - 16px); }
50
+ .tippy-popper .tippy-tooltip {
51
+ background-color: rgba(0, 0, 0, 0);
52
+ max-height: 100%;
53
+ max-width: 100%;
54
+ padding: 0;
55
+ width: 400px; }
56
+
57
+ .shepherd-element, .shepherd-element:after, .shepherd-element:before,
58
+ .shepherd-element *,
59
+ .shepherd-element *:after,
60
+ .shepherd-element *:before {
61
+ box-sizing: border-box; }
142
62
 
143
- .shepherd-element.shepherd-theme-dark {
144
- z-index: 9999;
145
- max-width: 24em;
146
- font-size: 1em; }
147
- .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-dark.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before {
148
- border-bottom-color: #303030; }
149
- .shepherd-element.shepherd-theme-dark.shepherd-has-title .shepherd-content header {
63
+ .shepherd-element {
64
+ filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); }
65
+ .shepherd-element.shepherd-has-title .shepherd-content header {
150
66
  background: #303030;
151
67
  padding: 1em; }
152
- .shepherd-element.shepherd-theme-dark.shepherd-has-title .shepherd-content header a.shepherd-cancel-link {
153
- padding: 0;
154
- margin-bottom: 0; }
155
- .shepherd-element.shepherd-theme-dark.shepherd-has-cancel-link .shepherd-content header h3 {
156
- float: left; }
157
- .shepherd-element.shepherd-theme-dark .shepherd-content {
158
- box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
68
+ .shepherd-element .shepherd-content {
69
+ background: #232323;
70
+ font-size: inherit;
159
71
  padding: 0; }
160
- .shepherd-element.shepherd-theme-dark .shepherd-content * {
161
- font-size: inherit; }
162
- .shepherd-element.shepherd-theme-dark .shepherd-content header {
72
+ .shepherd-element .shepherd-content header {
163
73
  *zoom: 1;
164
- border-radius: 5px 5px 0 0; }
165
- .shepherd-element.shepherd-theme-dark .shepherd-content header:after {
166
- content: "";
167
- display: table;
168
- clear: both; }
169
- .shepherd-element.shepherd-theme-dark .shepherd-content header h3 {
170
- margin: 0;
171
- line-height: 1;
172
- font-weight: normal; }
173
- .shepherd-element.shepherd-theme-dark .shepherd-content header a.shepherd-cancel-link {
174
- float: right;
175
- text-decoration: none;
176
- font-size: 1.25em;
177
- line-height: .8em;
74
+ -ms-flex-align: center;
75
+ align-items: center;
76
+ border-top-left-radius: 5px;
77
+ border-top-right-radius: 5px;
78
+ display: -ms-flexbox;
79
+ display: flex;
80
+ -ms-flex-pack: center;
81
+ justify-content: center;
82
+ line-height: 2em;
83
+ padding: 0.75em 0.75em 0; }
84
+ .shepherd-element .shepherd-content header:after {
85
+ clear: both;
86
+ content: '';
87
+ display: table; }
88
+ .shepherd-element .shepherd-content header .shepherd-title,
89
+ .shepherd-element .shepherd-content header .shepherd-cancel-link {
178
90
  font-weight: normal;
179
- color: rgba(0, 0, 0, 0.5);
180
- opacity: 0.25;
91
+ margin: 0;
92
+ padding: 0;
181
93
  position: relative;
182
- top: .1em;
183
- padding: .8em;
184
- margin-bottom: -.8em; }
185
- .shepherd-element.shepherd-theme-dark .shepherd-content header a.shepherd-cancel-link:hover {
186
- opacity: 1; }
187
- .shepherd-element.shepherd-theme-dark .shepherd-content .shepherd-text {
188
- padding: 1em; }
189
- .shepherd-element.shepherd-theme-dark .shepherd-content .shepherd-text p {
190
- margin: 0 0 .5em 0;
191
- line-height: 1.3em; }
192
- .shepherd-element.shepherd-theme-dark .shepherd-content .shepherd-text p:last-child {
94
+ vertical-align: middle; }
95
+ .shepherd-element .shepherd-content header .shepherd-title {
96
+ color: rgba(255, 255, 255, 0.75);
97
+ display: -ms-flexbox;
98
+ display: flex;
99
+ -ms-flex: 1 0 auto;
100
+ flex: 1 0 auto;
101
+ font-size: 1.1em; }
102
+ .shepherd-element .shepherd-content header .shepherd-cancel-link {
103
+ color: rgba(255, 255, 255, 0.75);
104
+ font-size: 2em;
105
+ margin-left: auto;
106
+ text-decoration: none;
107
+ transition: color 0.5s ease; }
108
+ .shepherd-element .shepherd-content header .shepherd-cancel-link:before {
109
+ content: '\D7'; }
110
+ .shepherd-element .shepherd-content header .shepherd-cancel-link:hover {
111
+ color: rgba(255, 255, 255, 0.75); }
112
+ .shepherd-element .shepherd-content .shepherd-text {
113
+ color: rgba(255, 255, 255, 0.75);
114
+ line-height: 1.3em;
115
+ padding: 0.75em; }
116
+ .shepherd-element .shepherd-content .shepherd-text a,
117
+ .shepherd-element .shepherd-content .shepherd-text a:visited,
118
+ .shepherd-element .shepherd-content .shepherd-text a:active {
119
+ border-bottom: 1px dotted;
120
+ border-bottom-color: rgba(255, 255, 255, 0.75);
121
+ color: rgba(255, 255, 255, 0.75);
122
+ text-decoration: none; }
123
+ .shepherd-element .shepherd-content .shepherd-text a:hover,
124
+ .shepherd-element .shepherd-content .shepherd-text a:visited:hover,
125
+ .shepherd-element .shepherd-content .shepherd-text a:active:hover {
126
+ border-bottom-style: solid; }
127
+ .shepherd-element .shepherd-content .shepherd-text p {
128
+ margin-top: 0; }
129
+ .shepherd-element .shepherd-content .shepherd-text p:last-child {
193
130
  margin-bottom: 0; }
194
- .shepherd-element.shepherd-theme-dark .shepherd-content footer {
195
- padding: 0 1em 1em; }
196
- .shepherd-element.shepherd-theme-dark .shepherd-content footer .shepherd-buttons {
197
- text-align: right;
131
+ .shepherd-element .shepherd-content footer {
132
+ border-bottom-left-radius: 5px;
133
+ border-bottom-right-radius: 5px;
134
+ padding: 0 0.75em 0.75em; }
135
+ .shepherd-element .shepherd-content footer .shepherd-buttons {
198
136
  list-style: none;
137
+ margin: 0;
199
138
  padding: 0;
200
- margin: 0; }
201
- .shepherd-element.shepherd-theme-dark .shepherd-content footer .shepherd-buttons li {
139
+ text-align: right; }
140
+ .shepherd-element .shepherd-content footer .shepherd-buttons li {
202
141
  display: inline;
203
- padding: 0;
204
- margin: 0; }
205
- .shepherd-element.shepherd-theme-dark .shepherd-content footer .shepherd-buttons li .shepherd-button {
142
+ margin: 0 0.5em 0 0; }
143
+ .shepherd-element .shepherd-content footer .shepherd-buttons li:last-child {
144
+ margin-right: 0; }
145
+ .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button {
206
146
  display: inline-block;
147
+ *display: inline;
207
148
  vertical-align: middle;
208
149
  *vertical-align: auto;
209
150
  *zoom: 1;
210
- *display: inline;
151
+ background: #3288e6;
152
+ border: 0;
211
153
  border-radius: 3px;
154
+ color: rgba(255, 255, 255, 0.75);
212
155
  cursor: pointer;
213
- border: 0;
214
- margin: 0 .5em 0 0;
215
156
  font-family: inherit;
216
- text-transform: uppercase;
217
- letter-spacing: .1em;
218
- font-size: .8em;
157
+ font-size: 0.8em;
158
+ letter-spacing: 0.1em;
219
159
  line-height: 1em;
220
- padding: .75em 2em;
221
- background: #3288e6;
222
- color: #fff; }
223
- .shepherd-element.shepherd-theme-dark .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary {
224
- background: #eee;
225
- color: #888; }
226
- .shepherd-element.shepherd-theme-dark .shepherd-content footer .shepherd-buttons li:last-child .shepherd-button {
227
- margin-right: 0; }
228
-
229
- .shepherd-start-tour-button.shepherd-theme-dark {
230
- display: inline-block;
231
- vertical-align: middle;
232
- *vertical-align: auto;
233
- *zoom: 1;
234
- *display: inline;
235
- border-radius: 3px;
236
- cursor: pointer;
237
- border: 0;
238
- margin: 0 .5em 0 0;
239
- font-family: inherit;
240
- text-transform: uppercase;
241
- letter-spacing: .1em;
242
- font-size: .8em;
243
- line-height: 1em;
244
- padding: .75em 2em;
245
- background: #3288e6;
246
- color: #fff; }
160
+ padding: 0.75em 2em;
161
+ text-transform: uppercase;
162
+ transition: all 0.5s ease; }
163
+ .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button:hover {
164
+ background: #196fcc; }
165
+ .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary {
166
+ background: #f1f2f3;
167
+ color: rgba(0, 0, 0, 0.75); }
168
+ .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary:hover {
169
+ background: #d5d8dc;
170
+ color: rgba(0, 0, 0, 0.75); }