1 | <template>
|
2 | <div class="heightFull paddingLeft20 paddingRight20 maxWidth900
|
3 | marginLeftAuto marginRightAuto">
|
4 | <site-header></site-header>
|
5 | <form-nav></form-nav>
|
6 | <router-view></router-view>
|
7 | <site-footer></site-footer>
|
8 | </div>
|
9 | </template>
|
10 |
|
11 | <script>
|
12 | import SiteHeader from './components/SiteHeader'
|
13 | import FormNav from './components/FormNav'
|
14 | import SiteFooter from './components/SiteFooter'
|
15 |
|
16 | export default {
|
17 | name: 'App',
|
18 | components: { SiteHeader, SiteFooter, FormNav }
|
19 | }
|
20 | </script>
|
21 |
|
22 | <style lang="scss">
|
23 | html {
|
24 | overflow: hidden;
|
25 | }
|
26 |
|
27 | html,
|
28 | body {
|
29 | height: 100%;
|
30 | padding: 0;
|
31 | margin: 0;
|
32 | }
|
33 |
|
34 | body {
|
35 | overflow: auto;
|
36 | color: rgba(100, 255, 200, .8);
|
37 | font-family: 'Montserrat', sans-serif;
|
38 | background: #136a8a;
|
39 | background: -webkit-linear-gradient(0, #267871 , #136a8a);
|
40 | background: linear-gradient(0deg, #267871 , #136a8a);
|
41 | background-repeat: no-repeat;
|
42 | background-attachment: fixed;
|
43 | }
|
44 |
|
45 | a.link,
|
46 | a:visited.link {
|
47 | color: rgba(100, 255, 200, .8);
|
48 | fill: rgba(100, 255, 200, .8);
|
49 | transition: color 0.5s ease-in-out,
|
50 | fill 0.5s ease-in-out;
|
51 | }
|
52 | a:hover.link {
|
53 | color: rgba(244, 245, 249, 1);
|
54 | fill: rgba(244, 245, 249, 1);
|
55 | }
|
56 | a.link.border {
|
57 | border-bottom: 1px solid rgba(100, 255, 200, .4);
|
58 | }
|
59 |
|
60 | footer::selection,
|
61 | h1::selection,
|
62 | div::selection,
|
63 | a::selection,
|
64 | code::selection {
|
65 | color: #ddd;
|
66 | background: #482292;
|
67 | }
|
68 |
|
69 | .bgWhisper {
|
70 | background-color: #f4f5f9;
|
71 | }
|
72 |
|
73 | .borderRadius25 {
|
74 | border-radius: 25px;
|
75 | }
|
76 |
|
77 | .button:focus {
|
78 | outline: 0;
|
79 | }
|
80 | .button.disabled,
|
81 | .button.disabled:hover {
|
82 | background-color: #999;
|
83 | }
|
84 | .button:not(.disabled) {
|
85 | box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.15);
|
86 |
|
87 | &:hover {
|
88 | box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.30);
|
89 | }
|
90 |
|
91 | &:active {
|
92 | transform: scale3d(0.96, 0.96, 1);
|
93 | box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
|
94 | }
|
95 | }
|
96 |
|
97 |
|
98 |
|
99 | .wasSubmitted :invalid:not(:focus),
|
100 | .wasFocused:invalid:not(:focus) {
|
101 | color: #ff4136;
|
102 | border-color: #ff4136;
|
103 | background-color: #FEE9E7;
|
104 | transition: all 0.2s;
|
105 | }
|
106 |
|
107 | .showUsageInstructionsButton {
|
108 | border-radius: 20px;
|
109 | padding: 12px 16px;
|
110 | background-color: #a873d1;
|
111 | transition: all 500ms ease-in-out;
|
112 | }
|
113 |
|
114 | form {
|
115 | box-shadow: 0 18px 24px rgba(0, 0, 0, 0.1);
|
116 | }
|
117 |
|
118 | textarea {
|
119 | max-width: 548px;
|
120 | }
|
121 |
|
122 | .fade-enter-active, .fade-leave-active {
|
123 | transition: opacity .5s
|
124 | }
|
125 | .fade-enter, .fade-leave-to {
|
126 | opacity: 0
|
127 | }
|
128 | </style>
|