sail 3.2.4 → 3.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/MIT-LICENSE +1 -1
  3. data/README.md +48 -7
  4. data/Rakefile +3 -3
  5. data/app/assets/images/sail/angle-left.svg +1 -1
  6. data/app/assets/images/sail/angle-right.svg +1 -1
  7. data/app/assets/images/sail/checkmark.svg +1 -0
  8. data/app/assets/images/sail/cog.svg +1 -1
  9. data/app/assets/images/sail/error.svg +1 -0
  10. data/app/assets/images/sail/reset.svg +1 -0
  11. data/app/assets/images/sail/sort.svg +1 -1
  12. data/app/assets/javascripts/sail/{application.js.erb → application.js} +1 -10
  13. data/app/assets/javascripts/{settings.js.erb → sail/settings.js} +81 -13
  14. data/app/assets/stylesheets/sail/application.css.erb +419 -0
  15. data/app/assets/stylesheets/sail/settings.css +559 -0
  16. data/app/controllers/sail/profiles_controller.rb +1 -1
  17. data/app/controllers/sail/settings_controller.rb +5 -15
  18. data/app/helpers/sail/application_helper.rb +4 -0
  19. data/app/models/sail/entry.rb +1 -1
  20. data/app/models/sail/setting.rb +4 -8
  21. data/app/views/layouts/sail/application.html.erb +2 -6
  22. data/app/views/sail/profiles/_profile.html.erb +29 -17
  23. data/app/views/sail/settings/_guide_modal.html.erb +2 -2
  24. data/app/views/sail/settings/_setting.html.erb +74 -52
  25. data/app/views/sail/settings/index.html.erb +21 -14
  26. data/app/views/sail/settings/update.js.erb +10 -4
  27. data/config/locales/en.yml +1 -4
  28. data/lib/generators/sail/install/install_generator.rb +5 -1
  29. data/lib/generators/sail/install/templates/sail.yml.tt +5 -0
  30. data/lib/generators/sail/update/update_generator.rb +1 -1
  31. data/lib/sail.rb +1 -0
  32. data/lib/sail/constant_collection.rb +2 -2
  33. data/lib/sail/engine.rb +7 -6
  34. data/lib/sail/graphql.rb +43 -0
  35. data/lib/sail/instrumenter.rb +6 -1
  36. data/lib/sail/mutations.rb +49 -0
  37. data/lib/sail/version.rb +1 -1
  38. metadata +25 -102
  39. data/app/assets/images/sail/refresh.svg +0 -1
  40. data/app/assets/stylesheets/sail/_colors.scss +0 -9
  41. data/app/assets/stylesheets/sail/_shared.scss +0 -52
  42. data/app/assets/stylesheets/sail/application.scss +0 -353
  43. data/app/assets/stylesheets/sail/settings.scss +0 -422
  44. data/app/views/sail/settings/_setting_minimal.html.erb +0 -6
@@ -1 +0,0 @@
1
- <svg aria-hidden="true" data-prefix="fas" data-icon="sync" class="svg-inline--fa fa-sync fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M440.935 12.574l3.966 82.766C399.416 41.904 331.674 8 256 8 134.813 8 33.933 94.924 12.296 209.824 10.908 217.193 16.604 224 24.103 224h49.084c5.57 0 10.377-3.842 11.676-9.259C103.407 137.408 172.931 80 256 80c60.893 0 114.512 30.856 146.104 77.801l-101.53-4.865c-6.845-.328-12.574 5.133-12.574 11.986v47.411c0 6.627 5.373 12 12 12h200.333c6.627 0 12-5.373 12-12V12c0-6.627-5.373-12-12-12h-47.411c-6.853 0-12.315 5.729-11.987 12.574zM256 432c-60.895 0-114.517-30.858-146.109-77.805l101.868 4.871c6.845.327 12.573-5.134 12.573-11.986v-47.412c0-6.627-5.373-12-12-12H12c-6.627 0-12 5.373-12 12V500c0 6.627 5.373 12 12 12h47.385c6.863 0 12.328-5.745 11.985-12.599l-4.129-82.575C112.725 470.166 180.405 504 256 504c121.187 0 222.067-86.924 243.704-201.824 1.388-7.369-4.308-14.176-11.807-14.176h-49.084c-5.57 0-10.377 3.842-11.676 9.259C408.593 374.592 339.069 432 256 432z"></path></svg>
@@ -1,9 +0,0 @@
1
- $main_black: #0B0C10;
2
- $dark_green: #306B34;
3
- $light_green: #44AF69;
4
- $cerulean: #4484CE;
5
- $aluminium: #D9D9D9;
6
- $light_yellow: #F9CF00;
7
- $tangerine: #F19F4D;
8
- $lead: #003049;
9
- $bright_red: #E63946;
@@ -1,52 +0,0 @@
1
- @import "colors";
2
-
3
- .rounded {
4
- -webkit-border-radius: 5px;
5
- -moz-border-radius: 5px;
6
- border-radius: 5px;
7
- }
8
-
9
- .border-transition {
10
- -webkit-transition : border .25s ease-in;
11
- -moz-transition : border .25s ease-in;
12
- -o-transition : border .25s ease-in;
13
- transition : border .25s ease-in;
14
- outline: none;
15
-
16
- &:focus,
17
- &:hover {
18
- border-color: $tangerine;
19
- outline: none;
20
- }
21
- }
22
-
23
- .color-transition {
24
- -webkit-transition : color .25s ease-in;
25
- -moz-transition : color .25s ease-in;
26
- -o-transition : color .25s ease-in;
27
- transition : color .25s ease-in;
28
- color: white;
29
- text-decoration: none;
30
-
31
- &:visited {
32
- color: white;
33
- }
34
-
35
- &:hover {
36
- color: $tangerine;
37
- }
38
- }
39
-
40
- @-webkit-keyframes fadeIn {
41
- from { opacity: 0; }
42
- to { opacity: 1; }
43
- }
44
- @keyframes fadeIn {
45
- from { opacity: 0; }
46
- to { opacity: 1; }
47
- }
48
-
49
- .fade-in {
50
- -webkit-animation: fadeIn 0.5s;
51
- animation: fadeIn 0.5s;
52
- }
@@ -1,353 +0,0 @@
1
- /*
2
- * This is a manifest file that'll be compiled into application.css, which will include all the files
3
- * listed below.
4
- *
5
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
6
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
7
- *
8
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
9
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
10
- * files in this directory. Styles in this file should be added after the last require_* statement.
11
- * It is generally better to create a new file per style scope.
12
- *
13
- *= require_tree .
14
- *= require_self
15
- */
16
-
17
- @import "colors";
18
- @import "shared";
19
-
20
- * {
21
- font-family: 'Open Sans', sans-serif;
22
- -webkit-font-smoothing: antialiased;
23
- }
24
-
25
- .title {
26
- font-family: 'Montserrat', sans-serif;
27
- }
28
-
29
- html, body {
30
- height: 100vh;
31
- margin: 0;
32
- padding: 0;
33
- background-color: $cerulean;
34
- }
35
-
36
- .clearfix {
37
- clear: both;
38
- }
39
-
40
- .clear-xs {
41
- @media (max-width: 413px) {
42
- clear: both;
43
- margin-top: 8px;
44
- }
45
- }
46
-
47
- #nav-bar {
48
- background-color: $lead;
49
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15), 0 5px 12px rgba(0, 0, 0, 0.1);
50
-
51
- .home-link {
52
- @extend .color-transition;
53
-
54
- .title {
55
- margin: 0;
56
- text-align: center;
57
- font-size: 3rem;
58
- padding: .75rem 0;
59
- }
60
- }
61
-
62
- .nav-button {
63
- float: right;
64
- position: relative;
65
- bottom: 50px;
66
- font-size: 20px;
67
- outline: none;
68
- background: transparent;
69
- border: none;
70
- @extend .color-transition;
71
-
72
- &:hover {
73
- cursor: pointer;
74
- }
75
-
76
- @media (max-width: 991px) { display: none; }
77
- }
78
-
79
- #btn-guide {
80
- right: 70px;
81
- padding: 0;
82
- margin: 0;
83
- @media (min-width: 1200px) { right: 110px; }
84
- }
85
-
86
- #btn-monitor-mode,
87
- #btn-regular-mode {
88
- right: 80px;
89
- padding: 1px 7px 2px 7px;
90
-
91
- @media (min-width: 1200px) { right: 120px; }
92
- }
93
- }
94
-
95
- #pagination {
96
- text-align: center;
97
- margin-top: 2rem;
98
-
99
- a {
100
- color: $main_black;
101
- text-decoration: none;
102
- background-color: white;
103
- padding: 20px;
104
- @extend .rounded;
105
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
106
- font-weight: bold;
107
-
108
- &.active {
109
- background-color: $tangerine;
110
- color: white;
111
- }
112
- }
113
-
114
- .page-links {
115
- a {
116
- font-size: 1.2rem;
117
- margin: 0 2px 0 2px;
118
- }
119
-
120
- #angle-left-link {
121
- background: white image-url("sail/angle-left.svg") center no-repeat;
122
- margin-right: 6px;
123
- padding: 20px 24px 20px 24px;
124
- }
125
-
126
- #angle-right-link {
127
- background: white image-url("sail/angle-right.svg") center no-repeat;
128
- margin-left: 6px;
129
- padding: 20px 24px 20px 24px;
130
- }
131
- }
132
- }
133
-
134
- .modal {
135
- position: fixed;
136
- height: 70%;
137
- width: 70%;
138
- top: 15%;
139
- left: 15%;
140
- background-color: white;
141
- z-index: 1;
142
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
143
- @extend .rounded;
144
- @extend .fade-in;
145
- padding: 15px;
146
- overflow: scroll;
147
-
148
- @media (max-width: 1200px) {
149
- width: 90%;
150
- left: 3%;
151
- }
152
-
153
- @media (max-width: 767px) {
154
- width: 90%;
155
- left: 1%;
156
- }
157
- }
158
-
159
- #profiles-modal {
160
- @extend .modal;
161
- text-align: center;
162
-
163
- h1 {
164
- margin-left: 35px;
165
-
166
- #response-message {
167
- float: right;
168
- font-size: 18px;
169
- margin-right: 3px;
170
- position: relative;
171
- top: 5px;
172
- min-width: 50px;
173
- min-height: 20px;
174
- color: $dark_green;
175
- }
176
- }
177
-
178
- .profile-entry {
179
- padding: 10px;
180
- font-size: 20px;
181
- border-bottom: 2px solid transparent;
182
- margin-bottom: 15px;
183
- @extend .border-transition;
184
-
185
- .inline-form {
186
- float: right;
187
- }
188
-
189
- button {
190
- float: right;
191
- margin-left: 5px;
192
- padding: 10px;
193
- }
194
-
195
- .inline-form {
196
- @media (max-width: 767px) {
197
- margin-right: 3%;
198
- }
199
-
200
- &:first-child {
201
- @media (max-width: 767px) {
202
- clear: both;
203
- }
204
- }
205
- }
206
-
207
- .entry-name {
208
- position: relative;
209
- top: 10px;
210
-
211
- @media (max-width: 767px) {
212
- width: 90%;
213
- margin-bottom: 15px;
214
- }
215
-
216
- @media (max-width: 1199px) { float: left; }
217
- @media (min-width: 1200px) { margin-left: 250px; }
218
- }
219
-
220
- .active-indicator {
221
- float: left;
222
- position: relative;
223
- top: 7px;
224
-
225
- &.yellow {
226
- color: $light_yellow;
227
- }
228
-
229
- &.green {
230
- color: $light_green;
231
- }
232
- }
233
-
234
- .errors-indicator {
235
- float: left;
236
- position: relative;
237
- top: 9px;
238
- left: 15px;
239
- font-style: italic;
240
- color: darken($aluminium, 30%);
241
- }
242
- }
243
-
244
- #new-profile-input {
245
- height: 100%;
246
- border: none;
247
- font-size: 20px;
248
- width: 90%;
249
- position: relative;
250
- top: 10px;
251
- text-overflow: ellipsis;
252
-
253
- &:focus {
254
- outline: none;
255
- }
256
-
257
- @media (max-width: 1200px) { width: 88%; }
258
- @media (max-width: 767px) { width: 70%; }
259
- }
260
- }
261
-
262
- #guide-modal {
263
- @extend .modal;
264
-
265
- h1 {
266
- text-align: center;
267
- }
268
-
269
- details {
270
- padding: 15px;
271
-
272
- summary {
273
- font-size: 20px;
274
- outline: none;
275
- border-bottom: 1px solid transparent;
276
- @extend .border-transition;
277
-
278
- div {
279
- padding-bottom: 10px;
280
- }
281
-
282
- label {
283
- color: darken($aluminium, 30%);
284
- font-size: 18px;
285
- float: right;
286
- }
287
-
288
- img {
289
- display: none;
290
- }
291
-
292
- &::-webkit-details-marker {
293
- display: none;
294
- }
295
-
296
- &:hover {
297
- cursor: pointer;
298
- }
299
-
300
- &:focus {
301
- border-color: transparent;
302
- }
303
- }
304
-
305
- p, .items-container {
306
- text-align: center;
307
- font-size: 20px;
308
-
309
- ul {
310
- list-style-type: none;
311
-
312
- li {
313
- padding: 10px;
314
- }
315
- }
316
- }
317
- }
318
-
319
- details[open] {
320
- summary {
321
- border-bottom: 1px solid $tangerine;
322
-
323
- div {
324
- font-size: 28px;
325
- text-align: center;
326
- }
327
-
328
- label {
329
- display: none;
330
- }
331
-
332
- img {
333
- display: block;
334
- height: 20px;
335
- width: 20px;
336
- float: left;
337
- position: relative;
338
- top: 10px;
339
- }
340
- }
341
-
342
- p, p ~ * {
343
- @extend .fade-in;
344
- }
345
- }
346
- }
347
-
348
- hr {
349
- border: 0;
350
- height: 1px;
351
- border-top: 1px solid rgba(0, 0, 0, 0.1);
352
- border-bottom: 1px solid rgba(255, 255, 255, 0.3);
353
- }
@@ -1,422 +0,0 @@
1
- @import "colors";
2
- @import "shared";
3
-
4
- #settings-dashboard {
5
- max-height: 100vh;
6
- color: $main_black;
7
-
8
- #settings-container {
9
- margin-top: 1rem;
10
- text-align: center;
11
- }
12
-
13
- .card {
14
- min-height: 230px;
15
- background-color: white;
16
- margin: 1rem .75rem;
17
- display: inline-block;
18
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
19
- padding: 10px;
20
- z-index: 2;
21
- width: 90%;
22
- -webkit-box-sizing: border-box;
23
- -moz-box-sizing: border-box;
24
- box-sizing: border-box;
25
- @extend .rounded;
26
-
27
- @media (min-width: 768px) { width: 44%; }
28
- @media (min-width: 1200px) { width: 21%; }
29
-
30
- h3 {
31
- margin-left: 25px;
32
-
33
- .relevancy-score {
34
- float: right;
35
- color: darken($aluminium, 30%);
36
- }
37
- }
38
-
39
- .card-body-container {
40
- display: table;
41
- width: 100%;
42
- }
43
-
44
- .card-body {
45
- height: 80px;
46
- width: 100%;
47
- display: table-cell;
48
- vertical-align: bottom;
49
- }
50
-
51
- .tag {
52
- @extend .rounded;
53
- padding: 10px;
54
- color: $main_black;
55
- font-size: 14px;
56
- margin-left: 5px;
57
- text-decoration: none;
58
- font-weight: bold;
59
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
60
-
61
- &.type-label {
62
- background-color: $light_yellow;
63
- }
64
-
65
- &.group-label {
66
- background-color: $cerulean;
67
- }
68
-
69
- &.stale-label {
70
- background-color: $bright_red;
71
-
72
- @media (max-width: 413px) {
73
- position: relative;
74
- top: 8px;
75
- }
76
- }
77
- }
78
-
79
- .label-container {
80
- float: right;
81
- margin-top: 5px;
82
- }
83
-
84
- .setting-description {
85
- clear: both;
86
- padding: 25px 15px 15px 15px;
87
- text-overflow: ellipsis;
88
- white-space: nowrap;
89
- overflow: hidden;
90
- @extend .fade-in;
91
- color: darken($aluminium, 45%);
92
- }
93
-
94
- .value-input {
95
- width: 98%;
96
- margin-bottom: 10px;
97
- font-size: 22px;
98
- text-align: center;
99
- border: none;
100
- border-bottom: 2px solid $aluminium;
101
- -webkit-border-radius: 0;
102
- -moz-border-radius: 0;
103
- border-radius: 0;
104
- padding: 0;
105
- @extend .border-transition;
106
- }
107
-
108
- .date-picker {
109
- position: relative;
110
- bottom: 10px;
111
- border: none;
112
- border-bottom: 2px solid $aluminium;
113
- -webkit-border-radius: 0;
114
- -moz-border-radius: 0;
115
- border-radius: 0;
116
- width: 100%;
117
- text-align: center;
118
- font-size: 22px;
119
- padding: 0;
120
- @extend .border-transition;
121
- }
122
-
123
- .value-slider {
124
- -webkit-appearance: none;
125
- width: 100%;
126
- height: 15px;
127
- border-radius: 5px;
128
- background: #d3d3d3;
129
- outline: none;
130
- opacity: 0.7;
131
- -webkit-transition: .2s;
132
- transition: opacity .2s;
133
- margin: 0 0 10px 0;
134
-
135
- &::-webkit-slider-thumb {
136
- -webkit-appearance: none;
137
- appearance: none;
138
- width: 25px;
139
- height: 25px;
140
- border-radius: 50%;
141
- background: $tangerine;
142
- cursor: pointer;
143
- }
144
-
145
- &::-moz-range-thumb {
146
- width: 25px;
147
- height: 25px;
148
- border-radius: 50%;
149
- background: $tangerine;
150
- cursor: pointer;
151
- }
152
- }
153
-
154
- .btn-value-submit {
155
- @extend .btn-sail;
156
- width: 100%;
157
- height: 35px;
158
- }
159
-
160
- .switch {
161
- position: relative;
162
- display: inline-block;
163
- width: 60px;
164
- height: 34px;
165
- margin-bottom: 10px;
166
- float: right;
167
- }
168
-
169
- .switch input {display:none;}
170
-
171
- .slider {
172
- position: absolute;
173
- cursor: pointer;
174
- top: 0;
175
- left: 0;
176
- right: 0;
177
- bottom: 0;
178
- background-color: #ccc;
179
- -webkit-transition: .4s;
180
- transition: .4s;
181
-
182
- &:before {
183
- position: absolute;
184
- content: "";
185
- height: 26px;
186
- width: 26px;
187
- left: 4px;
188
- bottom: 4px;
189
- background-color: white;
190
- -webkit-transition: .4s;
191
- transition: .4s;
192
- }
193
- }
194
-
195
- input:checked + .slider {
196
- background-color: $tangerine;
197
- }
198
-
199
- input:focus + .slider {
200
- box-shadow: 0 0 1px $tangerine;
201
- }
202
-
203
- input:checked + .slider:before {
204
- -webkit-transform: translateX(26px);
205
- -ms-transform: translateX(26px);
206
- transform: translateX(26px);
207
- }
208
-
209
- .slider.round {
210
- border-radius: 34px;
211
- }
212
-
213
- .slider.round:before {
214
- border-radius: 50%;
215
- }
216
-
217
- .refresh-button {
218
- border: none;
219
- outline: none;
220
- float: left;
221
- background: transparent;
222
-
223
- img {
224
- height: 30px;
225
- }
226
-
227
- &:hover {
228
- cursor: pointer;
229
- }
230
-
231
- &.active {
232
- img {
233
- -webkit-animation:spin 1s linear infinite;
234
- -moz-animation:spin 1s linear infinite;
235
- animation:spin 1s linear infinite;
236
- }
237
- }
238
-
239
- @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
240
- @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
241
- @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
242
- }
243
-
244
- &.minimal {
245
- min-height: 50px;
246
- padding-top: 0;
247
-
248
- label {
249
- font-size: 22px;
250
- }
251
- }
252
- }
253
-
254
- #search-container {
255
- @media (max-width: 991px) { margin-top: 10px; }
256
-
257
- #search-form {
258
- text-align: center;
259
-
260
- #query {
261
- height: 50px;
262
- width: 100%;
263
- border: 3px solid transparent;
264
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
265
- font-size: 18px;
266
- text-align: center;
267
- text-overflow: ellipsis;
268
- @extend .rounded;
269
- @extend .border-transition;
270
- }
271
- }
272
-
273
- .offset-container {
274
- float: left;
275
- width: 3.5%;
276
- height: 50px;
277
-
278
- @media (min-width: 992px) { width: 25%; }
279
- }
280
-
281
- .inner-container {
282
- width: 90%;
283
- float: left;
284
-
285
- @media (min-width: 992px) { width: 50%; }
286
- }
287
-
288
- .search-button {
289
- float: left;
290
- border: 3px solid transparent;
291
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
292
- @extend .rounded;
293
- @extend .border-transition;
294
- background: white;
295
-
296
- img {
297
- height: 100%;
298
- }
299
-
300
- @media (max-width: 991px) {
301
- position: relative;
302
- top: 10px;
303
- left: 33vw;
304
- }
305
-
306
- @media (max-width: 767px) { left: 20vw; }
307
- @media (max-width: 413px) { left: 16vw; }
308
- }
309
-
310
- #btn-order {
311
- margin: 0 0 0 15px;
312
- height: 58px;
313
- }
314
-
315
- #sort-menu {
316
- background: white;
317
- position: absolute;
318
- right: 30%;
319
- top: 165px;
320
- z-index: 2;
321
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
322
- @extend .rounded;
323
- @extend .fade-in;
324
- padding: 10px;
325
-
326
- @media (min-width: 768px) { right: 41%; }
327
- @media (min-width: 1024px) { right: 18%; }
328
- @media (min-width: 1200px) { right: 22%; }
329
-
330
- button {
331
- outline: none;
332
- border: none;
333
- width: 100%;
334
- font-size: 20px;
335
- background: transparent;
336
- padding: 5px;
337
- @extend .rounded;
338
-
339
- &:hover {
340
- background-color: $tangerine;
341
- }
342
- }
343
- }
344
-
345
- #main-app-link {
346
- margin: 0 0 0 8px;
347
- height: 53px;
348
- }
349
-
350
- #btn-profiles {
351
- height: 58px;
352
- margin: 0 0 0 8px;
353
- }
354
- }
355
-
356
- .notice {
357
- display: none;
358
- clear: both;
359
- padding: 25px 15px 15px 15px;
360
- text-overflow: ellipsis;
361
- white-space: nowrap;
362
- overflow: hidden;
363
- font-weight: bolder;
364
- text-align: center;
365
- @extend .fade-in;
366
-
367
- &.success {
368
- color: $dark_green;
369
- }
370
-
371
- &.alert {
372
- color: $bright_red;
373
- }
374
- }
375
-
376
- #progress-container {
377
- text-align: center;
378
-
379
- #search-submit-progress {
380
- display: none;
381
- width: 100%;
382
- -webkit-appearance: none;
383
- height: 3px;
384
- position: relative;
385
- bottom: 22px;
386
- left: 3px;
387
-
388
- &::-webkit-progress-bar {
389
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
390
- background-color: white;
391
- }
392
-
393
- &::-webkit-progress-value {
394
- background-color: $cerulean;
395
- }
396
- }
397
- }
398
- }
399
-
400
- .btn-sail {
401
- text-align: center;
402
- font-size: 18px;
403
- @extend .rounded;
404
- background-color: $tangerine;
405
- border: none;
406
- outline: none;
407
- -webkit-transition: background-color 0.5s;
408
- -moz-transition: background-color 0.5s;
409
- -ms-transition: background-color 0.5s;
410
- -o-transition: background-color 0.5s;
411
- transition: background-color 0.5s;
412
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
413
-
414
- &:active {
415
- color: $main_black;
416
- opacity: .8;
417
- }
418
-
419
- &:hover {
420
- background-color: darken($tangerine, 20%);
421
- }
422
- }