blob: 927647ee1689c0dc3eb4cb410cfcda2ef2d72398 [file] [log] [blame]
Matteo Scandolobf14f882016-06-02 10:01:34 -07001
2@import './vars.scss';
3@import '../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss';
4@import './bootstrap_overrides.scss';
5@import './loader.scss';
6
7/* Global styles
8-------------------------------------------------- */
9
10body {
11 background-color: #fafafa;
12 background-image: url('../imgs/content_inner_bg.png');
13}
14
15/* Navigation styles
16-------------------------------------------------- */
17nav {
18 .navbar-brand {
19 padding-top: 0;
20 img {
21 width: 130px;
22 }
23 }
24
25 @media (max-width: $screen-sm-min){
26 .navbar-nav.pull-right{
27 float: none !important;
28 }
29 }
30
31 li:hover,
32 li.active {
33 border-bottom: 2px solid $brand-primary;
34 }
35
36 li {
37 border-bottom: 2px solid transparent;
38
39 a {
40 padding-top: 10px !important;
41 padding-bottom: 10px !important;
42 margin-top: 5px;
43 }
44 }
45}
46
47body {
48 padding-top: 60px;
49}
50
51#icon-defs {
52 display: none;
53}
54
55/* Sticky footer styles
56-------------------------------------------------- */
57html {
58 margin: 0px;
59 padding: 0px;
60}
61
62html, body {
63 position: relative;
64 min-height: 100%;
65 height: 100%;
66}
67
68.app-wrapper {
69 position: relative;
70}
71
72[ng-view] {
73 position: absolute;
74 width: 100%;
75}
76
77[ng-view],
78.app-wrapper {
79 min-height: 100%;
80 height: 100%;
81}
82
83[ng-view] .container {
84 padding-bottom: 30px;
85}
86
87.footer {
88 position: fixed;
89 bottom: 0;
90 width: 100%;
91 /* Set the fixed height of the footer here */
92 height: 30px;
93 line-height: 30px;
94 background-color: #f5f5f5;
95 z-index: 100;
96 box-shadow: 0 10px 5px 10px gray;
97}
98
99/* Tables styles
100-------------------------------------------------- */
101.table {
102 .avatar > img {
103 max-width: 50px;
104 }
105
106 td {
107 vertical-align: middle !important;
108 }
109}
110
111/* Buttons addictional styles
112-------------------------------------------------- */
113.btn-primary-border {
114 @include button-variant($btn-primary-bg, $btn-primary-color, $btn-primary-border);
115}
116
117/* Login page styles
118-------------------------------------------------- */
119.login {
120 background: url('../imgs/login.jpg');
121 background-size: contain;
122 min-height: 100%;
123 background-repeat: no-repeat ;
124 background-position: center ;
125
126 display: flex;
127 align-items: center;
128 justify-content: center;
129
130 .login-wrapper {
131 background: rgba(255, 255, 255, 0.7);
132 box-shadow: 5px 5px 15px #666;
133 width: 260px;
134 padding: 20px;
135 }
136
137 @media (max-width: $screen-sm-min){
138 .login-wrapper{
139 width: 100%;
140 }
141 }
142}
143
144/* User page styles
145-------------------------------------------------- */
146user-updated-tick {
147 .icon-saved {
148 background-image: url('../../../imgs/icon-saved.gif');
149 display: inline-block;
150 width: 15px;
151 height: 15px;
152 background-size: cover;
153 }
154}
155
156 /* Bundle page styles
157 -------------------------------------------------- */
158 [bundle-available] {
159 margin-top: 20px;
160 }
161
162 img {
163 animation: fadein 2s ease-in-out;
164 }
165
166
167/* ng-view-animation
168-------------------------------------------------- */
169.fade {
170 opacity: 1;
171}
172.fade.ng-enter,
173.fade.ng-leave {
174 transition: all .5s ease-in-out;
175}
176.fade.ng-enter {
177 opacity: 0;
178}
179.fade.ng-enter-active {
180 opacity: 1;
181}
182.fade.ng-leave {
183 opacity: 1;
184}
185.fade.ng-leave-active {
186 opacity: 0;
187}
188
189 /* ng-show-animation
190 -------------------------------------------------- */
191
192 .animate.ng-hide-add {
193 animation:0.5s slideOutRight ease-in-out;
194 }
195 .animate.ng-hide-remove {
196 animation:0.5s slideInRight ease-in-out;
197 }
198
199 /* ng-repeat-animation
200 -------------------------------------------------- */
201 .animate-repeat.ng-move,
202 .animate-repeat.ng-enter,
203 .animate-repeat.ng-leave {
204 transition:all linear 0.5s;
205 }
206
207 .animate-repeat.ng-leave.ng-leave-active,
208 .animate-repeat.ng-move,
209 .animate-repeat.ng-enter {
210 opacity:0;
211 animation: 0.5s slideOutRight ease-in-out;
212 }
213
214 .animate-repeat.ng-leave,
215 .animate-repeat.ng-move.ng-move-active,
216 .animate-repeat.ng-enter.ng-enter-active {
217 opacity:1;
218 height:60px;
219 animation: 0.5s slideInRight ease-in-out;
220 }
221
222 .animate-repeat.ng-enter-stagger,
223 .animate-repeat.ng-leave-stagger{
224 transition-delay: 0.1s;
225 animation-delay: 0.1s;
226 }
227
228 /* animations
229 -------------------------------------------------- */
230
231 @keyframes slideOutRight {
232 from {
233 transform: translate3d(0, 0, 0);
234 opacity: 1;
235 }
236
237 to {
238 opacity: 0;
239 transform: translate3d(100%, 0, 0);
240 }
241 }
242
243 @keyframes slideInRight {
244 from {
245 transform: translate3d(100%, 0, 0);
246 opacity: 0;
247 }
248
249 to {
250 transform: translate3d(0, 0, 0);
251 opacity: 1;
252 }
253 }
254
255@keyframes fadein {
256 from {
257 opacity: 0;
258 transform: scale3d(.3, .3, .3);
259 }
260 50% {
261 transform: scale3d(1, 1, 1);
262 }
263 to { opacity: 1; }
264}
265