sail 3.2.3 → 3.5.1

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.
Files changed (43) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +48 -7
  3. data/Rakefile +3 -3
  4. data/app/assets/images/sail/angle-left.svg +1 -1
  5. data/app/assets/images/sail/angle-right.svg +1 -1
  6. data/app/assets/images/sail/checkmark.svg +1 -0
  7. data/app/assets/images/sail/cog.svg +1 -1
  8. data/app/assets/images/sail/error.svg +1 -0
  9. data/app/assets/images/sail/reset.svg +1 -0
  10. data/app/assets/images/sail/sort.svg +1 -1
  11. data/app/assets/javascripts/sail/{application.js.erb → application.js} +1 -10
  12. data/app/assets/javascripts/{settings.js.erb → sail/settings.js} +16 -3
  13. data/app/assets/stylesheets/sail/application.css.erb +419 -0
  14. data/app/assets/stylesheets/sail/settings.css +555 -0
  15. data/app/controllers/sail/settings_controller.rb +2 -13
  16. data/app/helpers/sail/application_helper.rb +4 -0
  17. data/app/models/sail/setting.rb +4 -8
  18. data/app/views/layouts/sail/application.html.erb +2 -6
  19. data/app/views/sail/profiles/_profile.html.erb +29 -17
  20. data/app/views/sail/settings/_guide_modal.html.erb +2 -2
  21. data/app/views/sail/settings/_setting.html.erb +80 -50
  22. data/app/views/sail/settings/index.html.erb +21 -17
  23. data/app/views/sail/settings/update.js.erb +6 -2
  24. data/config/locales/en.yml +1 -4
  25. data/lib/generators/sail/install/install_generator.rb +5 -1
  26. data/lib/generators/sail/install/templates/sail.yml.tt +5 -0
  27. data/lib/generators/sail/update/update_generator.rb +1 -1
  28. data/lib/sail.rb +3 -3
  29. data/lib/sail/constant_collection.rb +2 -2
  30. data/lib/sail/engine.rb +3 -3
  31. data/lib/sail/graphql.rb +43 -0
  32. data/lib/sail/instrumenter.rb +1 -1
  33. data/lib/sail/mutations.rb +49 -0
  34. data/lib/sail/types.rb +1 -0
  35. data/lib/sail/types/set.rb +20 -0
  36. data/lib/sail/version.rb +1 -1
  37. metadata +26 -102
  38. data/app/assets/images/sail/refresh.svg +0 -1
  39. data/app/assets/stylesheets/sail/_colors.scss +0 -9
  40. data/app/assets/stylesheets/sail/_shared.scss +0 -52
  41. data/app/assets/stylesheets/sail/application.scss +0 -351
  42. data/app/assets/stylesheets/sail/settings.scss +0 -422
  43. 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,351 +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
- }
23
-
24
- .title {
25
- font-family: 'Montserrat', sans-serif;
26
- }
27
-
28
- html, body {
29
- height: 100vh;
30
- margin: 0;
31
- padding: 0;
32
- background-color: $cerulean;
33
- }
34
-
35
- .clearfix {
36
- clear: both;
37
- }
38
-
39
- .clear-xs {
40
- @media (max-width: 413px) {
41
- clear: both;
42
- margin-top: 8px;
43
- }
44
- }
45
-
46
- #nav-bar {
47
- background-color: $lead;
48
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15), 0 5px 12px rgba(0, 0, 0, 0.1);
49
-
50
- .home-link {
51
- @extend .color-transition;
52
-
53
- .title {
54
- margin: 0;
55
- text-align: center;
56
- font-size: 3rem;
57
- padding: .75rem 0;
58
- }
59
- }
60
-
61
- .nav-button {
62
- float: right;
63
- position: relative;
64
- bottom: 50px;
65
- font-size: 20px;
66
- outline: none;
67
- background: transparent;
68
- border: none;
69
- @extend .color-transition;
70
-
71
- &:hover {
72
- cursor: pointer;
73
- }
74
-
75
- @media (max-width: 991px) { display: none; }
76
- }
77
-
78
- #btn-guide {
79
- right: 70px;
80
- padding: 0;
81
- margin: 0;
82
- @media (min-width: 1200px) { right: 110px; }
83
- }
84
-
85
- #btn-monitor-mode,
86
- #btn-regular-mode {
87
- right: 80px;
88
- padding: 1px 7px 2px 7px;
89
-
90
- @media (min-width: 1200px) { right: 120px; }
91
- }
92
- }
93
-
94
- #pagination {
95
- text-align: center;
96
- margin-top: 2rem;
97
-
98
- a {
99
- color: $main_black;
100
- text-decoration: none;
101
- background-color: white;
102
- padding: 20px;
103
- @extend .rounded;
104
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
105
- font-weight: bold;
106
-
107
- &.active {
108
- background-color: $tangerine;
109
- color: white;
110
- }
111
- }
112
-
113
- .page-links {
114
- a {
115
- font-size: 1.2rem;
116
- margin: 0 2px 0 2px;
117
- }
118
-
119
- #angle-left-link {
120
- background: white image-url("sail/angle-left.svg") center no-repeat;
121
- margin-right: 6px;
122
- padding: 20px 24px 20px 24px;
123
- }
124
-
125
- #angle-right-link {
126
- background: white image-url("sail/angle-right.svg") center no-repeat;
127
- padding: 20px 24px 20px 24px;
128
- }
129
- }
130
- }
131
-
132
- .modal {
133
- position: fixed;
134
- height: 70%;
135
- width: 70%;
136
- top: 15%;
137
- left: 15%;
138
- background-color: white;
139
- z-index: 1;
140
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
141
- @extend .rounded;
142
- @extend .fade-in;
143
- padding: 15px;
144
- overflow: scroll;
145
-
146
- @media (max-width: 1200px) {
147
- width: 90%;
148
- left: 3%;
149
- }
150
-
151
- @media (max-width: 767px) {
152
- width: 90%;
153
- left: 1%;
154
- }
155
- }
156
-
157
- #profiles-modal {
158
- @extend .modal;
159
- text-align: center;
160
-
161
- h1 {
162
- margin-left: 35px;
163
-
164
- #response-message {
165
- float: right;
166
- font-size: 18px;
167
- margin-right: 3px;
168
- position: relative;
169
- top: 5px;
170
- min-width: 50px;
171
- min-height: 20px;
172
- color: $dark_green;
173
- }
174
- }
175
-
176
- .profile-entry {
177
- padding: 10px;
178
- font-size: 20px;
179
- border-bottom: 2px solid transparent;
180
- margin-bottom: 15px;
181
- @extend .border-transition;
182
-
183
- .inline-form {
184
- float: right;
185
- }
186
-
187
- button {
188
- float: right;
189
- margin-left: 5px;
190
- padding: 10px;
191
- }
192
-
193
- .inline-form {
194
- @media (max-width: 767px) {
195
- margin-right: 3%;
196
- }
197
-
198
- &:first-child {
199
- @media (max-width: 767px) {
200
- clear: both;
201
- }
202
- }
203
- }
204
-
205
- .entry-name {
206
- position: relative;
207
- top: 10px;
208
-
209
- @media (max-width: 767px) {
210
- width: 90%;
211
- margin-bottom: 15px;
212
- }
213
-
214
- @media (max-width: 1199px) { float: left; }
215
- @media (min-width: 1200px) { margin-left: 250px; }
216
- }
217
-
218
- .active-indicator {
219
- float: left;
220
- position: relative;
221
- top: 7px;
222
-
223
- &.yellow {
224
- color: $light_yellow;
225
- }
226
-
227
- &.green {
228
- color: $light_green;
229
- }
230
- }
231
-
232
- .errors-indicator {
233
- float: left;
234
- position: relative;
235
- top: 9px;
236
- left: 15px;
237
- font-style: italic;
238
- color: darken($aluminium, 30%);
239
- }
240
- }
241
-
242
- #new-profile-input {
243
- height: 100%;
244
- border: none;
245
- font-size: 20px;
246
- width: 90%;
247
- position: relative;
248
- top: 10px;
249
- text-overflow: ellipsis;
250
-
251
- &:focus {
252
- outline: none;
253
- }
254
-
255
- @media (max-width: 1200px) { width: 88%; }
256
- @media (max-width: 767px) { width: 70%; }
257
- }
258
- }
259
-
260
- #guide-modal {
261
- @extend .modal;
262
-
263
- h1 {
264
- text-align: center;
265
- }
266
-
267
- details {
268
- padding: 15px;
269
-
270
- summary {
271
- font-size: 20px;
272
- outline: none;
273
- border-bottom: 1px solid transparent;
274
- @extend .border-transition;
275
-
276
- div {
277
- padding-bottom: 10px;
278
- }
279
-
280
- label {
281
- color: darken($aluminium, 30%);
282
- font-size: 18px;
283
- float: right;
284
- }
285
-
286
- img {
287
- display: none;
288
- }
289
-
290
- &::-webkit-details-marker {
291
- display: none;
292
- }
293
-
294
- &:hover {
295
- cursor: pointer;
296
- }
297
-
298
- &:focus {
299
- border-color: transparent;
300
- }
301
- }
302
-
303
- p, .items-container {
304
- text-align: center;
305
- font-size: 20px;
306
-
307
- ul {
308
- list-style-type: none;
309
-
310
- li {
311
- padding: 10px;
312
- }
313
- }
314
- }
315
- }
316
-
317
- details[open] {
318
- summary {
319
- border-bottom: 1px solid $tangerine;
320
-
321
- div {
322
- font-size: 28px;
323
- text-align: center;
324
- }
325
-
326
- label {
327
- display: none;
328
- }
329
-
330
- img {
331
- display: block;
332
- height: 20px;
333
- width: 20px;
334
- float: left;
335
- position: relative;
336
- top: 10px;
337
- }
338
- }
339
-
340
- p, p ~ * {
341
- @extend .fade-in;
342
- }
343
- }
344
- }
345
-
346
- hr {
347
- border: 0;
348
- height: 1px;
349
- border-top: 1px solid rgba(0, 0, 0, 0.1);
350
- border-bottom: 1px solid rgba(255, 255, 255, 0.3);
351
- }
@@ -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 19px 38px rgba(0, 0, 0, 0.15), 0 15px 12px rgba(0, 0, 0, 0.1);
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
- font-weight: bold;
53
- @extend .rounded;
54
- padding: 10px;
55
- color: $main_black;
56
- font-size: 14px;
57
- margin-left: 5px;
58
- text-decoration: none;
59
-
60
- &.type-label {
61
- background-color: $light_yellow;
62
- }
63
-
64
- &.group-label {
65
- background-color: $cerulean;
66
- }
67
-
68
- &.stale-label {
69
- background-color: $bright_red;
70
- }
71
- }
72
-
73
- .label-container {
74
- float: right;
75
- margin-top: 5px;
76
- }
77
-
78
- .setting-description {
79
- clear: both;
80
- padding: 25px 15px 15px 15px;
81
- text-overflow: ellipsis;
82
- white-space: nowrap;
83
- overflow: hidden;
84
- color: darken($aluminium, 45%);
85
- }
86
-
87
- .value-input {
88
- width: 98%;
89
- margin-bottom: 10px;
90
- font-size: 22px;
91
- text-align: center;
92
- border: none;
93
- border-bottom: 2px solid $aluminium;
94
- -webkit-border-radius: 0;
95
- -moz-border-radius: 0;
96
- border-radius: 0;
97
- padding: 0;
98
- @extend .border-transition;
99
- }
100
-
101
- .date-picker {
102
- position: relative;
103
- bottom: 10px;
104
- border: none;
105
- border-bottom: 2px solid $aluminium;
106
- -webkit-border-radius: 0;
107
- -moz-border-radius: 0;
108
- border-radius: 0;
109
- width: 100%;
110
- text-align: center;
111
- font-size: 22px;
112
- padding: 0;
113
- @extend .border-transition;
114
- }
115
-
116
- .value-slider {
117
- -webkit-appearance: none;
118
- width: 100%;
119
- height: 15px;
120
- border-radius: 5px;
121
- background: #d3d3d3;
122
- outline: none;
123
- opacity: 0.7;
124
- -webkit-transition: .2s;
125
- transition: opacity .2s;
126
- margin: 0 0 10px 0;
127
-
128
- &::-webkit-slider-thumb {
129
- -webkit-appearance: none;
130
- appearance: none;
131
- width: 25px;
132
- height: 25px;
133
- border-radius: 50%;
134
- background: $tangerine;
135
- cursor: pointer;
136
- }
137
-
138
- &::-moz-range-thumb {
139
- width: 25px;
140
- height: 25px;
141
- border-radius: 50%;
142
- background: $tangerine;
143
- cursor: pointer;
144
- }
145
- }
146
-
147
- .btn-value-submit {
148
- @extend .btn-sail;
149
- width: 100%;
150
- height: 35px;
151
- }
152
-
153
- .switch {
154
- position: relative;
155
- display: inline-block;
156
- width: 60px;
157
- height: 34px;
158
- margin-bottom: 10px;
159
- float: right;
160
- }
161
-
162
- .switch input {display:none;}
163
-
164
- .slider {
165
- position: absolute;
166
- cursor: pointer;
167
- top: 0;
168
- left: 0;
169
- right: 0;
170
- bottom: 0;
171
- background-color: #ccc;
172
- -webkit-transition: .4s;
173
- transition: .4s;
174
-
175
- &:before {
176
- position: absolute;
177
- content: "";
178
- height: 26px;
179
- width: 26px;
180
- left: 4px;
181
- bottom: 4px;
182
- background-color: white;
183
- -webkit-transition: .4s;
184
- transition: .4s;
185
- }
186
- }
187
-
188
- input:checked + .slider {
189
- background-color: $tangerine;
190
- }
191
-
192
- input:focus + .slider {
193
- box-shadow: 0 0 1px $tangerine;
194
- }
195
-
196
- input:checked + .slider:before {
197
- -webkit-transform: translateX(26px);
198
- -ms-transform: translateX(26px);
199
- transform: translateX(26px);
200
- }
201
-
202
- .slider.round {
203
- border-radius: 34px;
204
- }
205
-
206
- .slider.round:before {
207
- border-radius: 50%;
208
- }
209
-
210
- .refresh-button {
211
- border: none;
212
- outline: none;
213
- float: left;
214
- background: transparent;
215
-
216
- img {
217
- height: 30px;
218
- }
219
-
220
- &:hover {
221
- cursor: pointer;
222
- }
223
-
224
- &.active {
225
- img {
226
- -webkit-animation:spin 1s linear infinite;
227
- -moz-animation:spin 1s linear infinite;
228
- animation:spin 1s linear infinite;
229
- }
230
- }
231
-
232
- @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
233
- @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
234
- @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
235
- }
236
-
237
- &.minimal {
238
- min-height: 50px;
239
- padding-top: 0;
240
-
241
- label {
242
- font-size: 22px;
243
- }
244
- }
245
- }
246
-
247
- #search-container {
248
- @media (max-width: 991px) { margin-top: 10px; }
249
-
250
- #search-form {
251
- text-align: center;
252
-
253
- #query {
254
- height: 50px;
255
- width: 100%;
256
- border: 3px solid transparent;
257
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
258
- font-size: 18px;
259
- text-align: center;
260
- text-overflow: ellipsis;
261
- @extend .rounded;
262
- @extend .border-transition;
263
- }
264
- }
265
-
266
- .offset-container {
267
- float: left;
268
- width: 3.5%;
269
- height: 50px;
270
-
271
- @media (min-width: 992px) { width: 25%; }
272
- }
273
-
274
- .inner-container {
275
- width: 90%;
276
- float: left;
277
-
278
- @media (min-width: 992px) { width: 50%; }
279
- }
280
-
281
- .search-button {
282
- float: left;
283
- border: 3px solid transparent;
284
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
285
- @extend .rounded;
286
- @extend .border-transition;
287
- background: white;
288
-
289
- img {
290
- height: 100%;
291
- }
292
-
293
- @media (max-width: 991px) {
294
- position: relative;
295
- top: 10px;
296
- left: 33vw;
297
- }
298
-
299
- @media (max-width: 767px) { left: 20vw; }
300
- @media (max-width: 413px) { left: 16vw; }
301
- }
302
-
303
- #btn-order {
304
- margin: 0 0 0 15px;
305
- height: 58px;
306
- }
307
-
308
- #sort-menu {
309
- background: white;
310
- position: absolute;
311
- right: 30%;
312
- top: 165px;
313
- z-index: 2;
314
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
315
- @extend .rounded;
316
- @extend .fade-in;
317
- padding: 10px;
318
-
319
- @media (min-width: 768px) { right: 41%; }
320
- @media (min-width: 1024px) { right: 18%; }
321
- @media (min-width: 1200px) { right: 22%; }
322
-
323
- button {
324
- outline: none;
325
- border: none;
326
- width: 100%;
327
- font-size: 20px;
328
- background: transparent;
329
- padding: 5px;
330
- @extend .rounded;
331
-
332
- &:hover {
333
- background-color: $tangerine;
334
- }
335
- }
336
- }
337
-
338
- #main-app-link {
339
- margin: 0 0 0 8px;
340
- height: 53px;
341
- }
342
-
343
- #btn-profiles {
344
- height: 58px;
345
- margin: 0 0 0 8px;
346
- }
347
- }
348
-
349
- .notice {
350
- background-color: white;
351
- font-size: 24px;
352
- position: fixed;
353
- left: 50px;
354
- top: 85px;
355
- padding: 25px;
356
- width: 150px;
357
- text-align: center;
358
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
359
- display: none;
360
- @extend .rounded;
361
- @extend .fade-in;
362
-
363
- &.success {
364
- color: $dark_green;
365
- }
366
-
367
- &.alert {
368
- color: $bright_red;
369
- }
370
-
371
- @media (max-width: 767px) {
372
- width: 85%;
373
- left: 1.5%;
374
- }
375
- }
376
-
377
- #progress-container {
378
- text-align: center;
379
-
380
- #search-submit-progress {
381
- display: none;
382
- width: 100%;
383
- -webkit-appearance: none;
384
- height: 3px;
385
- position: relative;
386
- bottom: 22px;
387
- left: 3px;
388
-
389
- &::-webkit-progress-bar {
390
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
391
- background-color: white;
392
- }
393
-
394
- &::-webkit-progress-value {
395
- background-color: $cerulean;
396
- }
397
- }
398
- }
399
- }
400
-
401
- .btn-sail {
402
- text-align: center;
403
- font-size: 18px;
404
- @extend .rounded;
405
- background-color: $tangerine;
406
- border: none;
407
- outline: none;
408
- -webkit-transition: background-color 0.5s;
409
- -moz-transition: background-color 0.5s;
410
- -ms-transition: background-color 0.5s;
411
- -o-transition: background-color 0.5s;
412
- transition: background-color 0.5s;
413
-
414
- &:active {
415
- color: $main_black;
416
- opacity: .8;
417
- }
418
-
419
- &:hover {
420
- background-color: darken($tangerine, 20%);
421
- }
422
- }