aboutsummaryrefslogtreecommitdiffhomepage
path: root/app.scss
diff options
context:
space:
mode:
Diffstat (limited to 'app.scss')
-rw-r--r--app.scss204
1 files changed, 204 insertions, 0 deletions
diff --git a/app.scss b/app.scss
new file mode 100644
index 0000000..6391c2d
--- /dev/null
+++ b/app.scss
@@ -0,0 +1,204 @@
1$primary-color: #3367d6;
2$secondary-color: #4285f4;
3
4body {
5 font-family: 'Raleway', sans-serif;
6 background-color: #F5F5F5;
7 height: 100%;
8
9 h1, h2, h3, h4, h5, h6 {
10 font-family: 'Lato', sans-serif;
11 }
12
13 h1 {
14 font-size: 2rem;
15 }
16
17 h2 {
18 font-size: 1.7rem;
19 margin-top: 3rem;
20 margin-bottom: 1rem;
21
22 .fa {
23 margin-right: 10px;
24 color: $secondary-color;
25 }
26
27 span {
28 font-weight: bold;
29 color: $secondary-color;
30 }
31 }
32
33 [v-cloak] {
34 display: none
35 }
36
37 #bighead {
38 color: #ffffff;
39
40 .dashboard-title {
41 padding: 6px 0 0 80px;
42 }
43
44 .first-line {
45 height: 100px;
46 vertical-align: center;
47 background-color: $primary-color;
48
49 h1 {
50 margin-top: -12px;
51 font-size: 2rem;
52 }
53
54 .headline {
55 margin-top: 5px;
56 font-size: 0.9rem;
57 }
58
59 .container {
60 height: 80px;
61 padding: 10px 0;
62 }
63
64 img {
65 float: left;
66 max-height: 70px;
67 max-width: 70px;
68 padding: 10px;
69 }
70 }
71 .navbar {
72 background-color: $secondary-color;
73
74 a {
75 color: #152138;
76
77 &:hover {
78 background-color: lighten( $secondary-color, 5% );
79 }
80 }
81 }
82 }
83
84 #main-section {
85 margin-bottom: 3rem;
86 padding: 0;
87
88 h2 {
89 border-bottom: 1px dashed #ccc;
90 padding-bottom: 10px;
91 }
92
93 .title {
94 font-size: 1.1em;
95 }
96
97 .subtitle {
98 font-size: .9em;
99 }
100
101 .column {
102 padding: 1.2rem .75rem;
103 }
104
105 .message {
106 margin-top: 45px;
107 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
108
109 .message-header {
110 font-weight: bold;
111 }
112
113 .message-body {
114 border: none;
115 }
116 }
117 }
118
119 .media-content {
120 overflow: inherit;
121 }
122
123 .tag {
124 color: $secondary-color;
125 background-color: $secondary-color;
126 position: absolute;
127 top: 1rem;
128 right: -0.3rem;
129 width: 3px;
130 overflow: hidden;
131 transition: all 0.2s ease-out;
132 padding: 0;
133 }
134
135 .card {
136 border-radius: 5px;
137 border: none;
138 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
139 transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms
140 }
141
142 .card:hover {
143 background-color: #FFFFFF;
144 transform: translate(0, -3px);
145
146 .tag {
147 width: auto;
148 color: #ffffff;
149 padding: 0 0.75em;
150 }
151 }
152
153 .card-content {
154 height: 110px;
155 }
156
157 .footer {
158 position: fixed;
159 left: 0;
160 right: 0;
161 bottom: 0;
162 padding: 1rem 0.5rem;
163 text-align: left;
164 background-color: #fafafa;
165 border-top: 1px solid #F5F5F5;
166 }
167
168 .search-bar {
169 position: relative;
170 #search {
171 border: none;
172 background-color: lighten( $secondary-color, 6% );
173 border-radius: 5px;
174 padding: 2px 12px 2px 30px;
175 margin: 10px 0;
176 transition: all 100ms linear;
177 color: #ffffff;
178 height: 30px;
179 width: 100px;
180
181
182 &:focus {
183 color: #000000;
184 width: 250px;
185 background-color: #ffffff;
186 }
187 }
188
189 .search-label::before {
190 font-family: 'FontAwesome';
191 position: absolute;
192 top: 12px;
193 left: 8px;
194 content: "\f002";
195 width: 20px;
196 height: 20px;
197 }
198
199 &:focus-within .search-label::before {
200 color: #4a4a4a;
201 }
202 }
203
204}