PageRenderTime 31ms CodeModel.GetById 13ms app.highlight 13ms RepoModel.GetById 1ms app.codeStats 0ms

/style/app.scss

https://github.com/ajanthanm/cssfilterlab
Sass | 518 lines | 425 code | 77 blank | 16 comment | 0 complexity | a916300ca8e2541cfbcf72f4f09b09a8 MD5 | raw file
  1/*
  2 * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
  3 * 
  4 * Licensed under the Apache License, Version 2.0 (the "License");
  5 * you may not use this file except in compliance with the License.
  6 * You may obtain a copy of the License at
  7 * 
  8 *     http://www.apache.org/licenses/LICENSE-2.0
  9 * 
 10 * Unless required by applicable law or agreed to in writing, software
 11 * distributed under the License is distributed on an "AS IS" BASIS,
 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 * See the License for the specific language governing permissions and
 14 * limitations under the License.
 15 */
 16 
 17@import "src/_utils";
 18@import "src/_northstar";
 19@import "src/_styles";
 20@import "src/_dock";
 21@import "src/_params";
 22
 23body {
 24    font: 14px "Source Sans Pro", "source", helvetica, arial, sans-serif;
 25}
 26
 27h1,h2,h3,h4,h5,h6 {
 28	color: #000;
 29	font-family: "Source Sans Pro", "source-l", helvetica, arial, sans-serif;
 30	margin: 0;
 31	font-weight: 400;
 32    -webkit-font-smoothing: antialiased;
 33}
 34
 35@mixin proportions{
 36    height: 15px;
 37    padding: 15px;
 38}
 39
 40html,
 41body {
 42    width: 100%;
 43    height: 100%;
 44    overflow: hidden;
 45    margin: 0;
 46    padding: 0;
 47}
 48  
 49/* let link be links */
 50a:not([class~="button"]):hover {
 51    text-decoration: underline;
 52}
 53
 54#components, #main-view, .popup {
 55    display: none;
 56}
 57
 58#main-view, #loading {
 59    width: 100%;
 60    height: 100%;
 61}
 62
 63#loading > div {
 64    position: absolute;
 65    left: 40px;
 66    right: 40px;
 67    bottom: 45%;
 68    text-align: center;
 69    font-weight: bold;
 70    font-size: 2em;
 71    background: #ccc;
 72    border: 2px solid gray;
 73    border-radius: 20px;
 74}
 75
 76.popup {
 77    position: absolute;
 78    top: 0px;
 79    left: 0px;
 80    width: 100%;
 81    height: 100%;
 82    background: rgba(0, 0, 0, 0.3);
 83    z-index: 2000;
 84    
 85    p, li {
 86        line-height: 1.3em;
 87        padding-right: 15px;
 88        
 89        a{
 90            margin: 0; 
 91        }
 92    }
 93    
 94    ul{
 95        padding-left: 20px;
 96    }
 97    
 98    li + li{
 99        margin-top:5px;
100    }
101    
102    .icon-close{
103        float: right;
104        margin: -15px -20px 0 0;
105    }
106}
107
108.popup .popup-inner :last-child{
109    margin-bottom:0;
110}
111
112.popup .popup-inner {
113    margin-left: auto;
114    margin-right: auto;
115    width: 500px;
116    margin-top: -100px;
117    margin-left: -250px;
118    background: white;
119    border-radius: 4px;
120    border: none;
121    padding: 30px 35px;
122    box-shadow: 0 15px 36px rgba(0,0,0,0.6);
123    position: absolute;
124    top: 50%;
125    left: 50%;
126    z-index: 1999;
127}
128
129#logo, #animations-container {
130    @include flexbox;
131    @include valign;
132    padding: 5px 10px 0 15px;
133    box-sizing: border-box;
134    overflow: hidden;
135    
136    -webkit-justify-content: space-between;
137
138    h1, h2, h3 {
139        color: white;
140        font-size: 24px;
141        text-shadow: 0 -1px 0 black;
142    }
143
144    > .title.left { 
145        @include flex(1);
146        margin: -6px 0 0;
147    }
148
149    .experiment {
150        display: inline-block;
151        background: url(../img/stamp1.png) no-repeat;
152        position: relative;
153        left: 2px;
154        top: 2px;
155        width: 78px;
156        height: 27px;
157        text-indent: -9999px;
158    }
159    
160    .button.drop-down{
161        min-width: 50px;
162        text-indent: 2px;
163        overflow: ellipsis;
164    }
165    #active-animation {
166        min-width: 140px;
167    }
168}
169
170#logo {
171    border-bottom: 1px solid rgba(0, 0, 0, 0.36);
172    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.11);
173}
174
175#animations-container {
176    overflow: hidden;
177    background: #fff;
178    border-bottom: 1px solid #fff;
179    box-shadow: none;
180
181    h1, h2, h3 {
182        margin: 0 auto;
183    }
184}
185
186.container {
187    @include hbox;
188    height: 100%;
189
190    .content {
191        @include flex;
192    }
193
194    footer{
195        @include flexbox;
196        @include proportions;
197        height: auto;
198
199        margin: auto auto 0 auto;
200        border-top: 1px solid #d7d7d7;
201    }
202
203    aside {
204        width: 20%;
205        min-width: 200px;
206    }
207
208    section {
209        @include vbox;
210        @include flex;
211    }
212}
213
214.nav {
215    @include list-reset;
216    @include hbox;
217    margin: auto 0;
218
219    li + li{
220        margin-left: 15px;
221    }
222
223    &.left {
224        min-width: 320px;
225    }  
226}
227
228.panel-right {
229    position: absolute;
230    right: 15px;
231    top: 0px;
232    bottom: 0px;
233    left: 320px;
234    overflow: hidden;
235
236    .nav {
237        position: absolute;
238        right: 0px;
239        top: 13px;
240    }
241
242    body.hosted-version & {
243        right: 74px;
244    }
245}
246
247.modal {
248    @include box-shadow;
249    width: 50%;
250    height: 50%;
251    min-width: 600px;
252    position: absolute;
253    top: 25%;
254    left: 25%;
255
256    footer{
257        padding: 10px 15px;
258        -webkit-box-pack: end;
259        -webkit-justify-content: flex-end;
260    }
261}
262
263aside {
264    min-width: 250px;
265}
266
267#app {
268    @include user-select(none);
269}
270
271#filter-dock {
272    @include box-shadow;
273    width: 350px;
274    height: 70%;
275    top: 0;
276    position: absolute;
277    margin: 0 0 0 -43px;
278    z-index: 1000;
279    -webkit-touch-callout: none;
280    -webkit-user-select: none;
281    -khtml-user-select: none;
282    -moz-user-select: none;
283    -ms-user-select: none;
284    user-select: none;
285}
286
287#filter-dock.hidden {
288    display: none;
289}
290
291.clicks-catcher {
292    position: absolute;
293    top: 0;
294    left: 0;
295    width: 100%;
296    height: 100%;
297}
298
299#main {
300    box-sizing: border-box;
301    padding-top: 30px;
302    background: #f8f8f8;
303}
304
305#container { 
306    @include user-select(auto);
307    border-radius: 3px;
308    height: 290px;
309    width: 600px;
310    color: white;
311    position: absolute;
312    left: 50%;
313    top: 50%;
314    margin: -280px 0 0 -340px;
315    font-size: 16px;
316    padding: 40px;
317    border:none;
318    outline-offset:-15px;
319    background: #263F51;
320    background-image:url(../../images/bottomscene.png);
321    background-position: center bottom;
322    background-repeat: no-repeat;
323    padding-bottom: 200px; 
324
325    p{
326        line-height: 22px;
327    }
328
329    .content-link {
330        color: yellow;
331    }
332
333    #multi-col {
334        @include prefixProperty(column-count, 2);
335        @include prefixProperty(column-gap, 2em);
336        height: 400px;
337
338        h2{
339            color: #60C5DF;
340            font-size: 32px;
341            margin: 0px;
342            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
343        }
344    }   
345
346    #svg-img {
347        display: block;
348        position: absolute;
349        right: 20px;
350        top: 100px;
351    }
352
353    #png-img {
354        display: block; 
355        margin: auto;
356        margin-bottom: 2em;
357    }
358
359    #css3-img {
360        position: absolute;
361        display: block;
362        border: 6px solid #33ccff;
363        background: white;
364        border-radius: 45px;
365        padding: 10px;
366        width: 30px;
367        height: 30px;
368        bottom: -30px;
369        right: 20px;
370    }
371}
372
373.filters-not-supported {
374    margin: -1px 0 0;
375    padding: 10px;
376    background: #5b5e5f;
377    color: white;
378    font-size: 12px;
379    border-top: 1px solid rgba(255,255,255,.05);
380    border-bottom: 1px solid #444;
381
382    .filters-not-supported-help {
383        color: #4acdfd;
384    }
385}
386
387#github-popup {
388    .state, .gist-login-failed {
389        display: none;
390    }
391    &.info .state.gist-info,
392    &.login .state.gist-login, 
393    &.login-failed .gist-login-failed,
394    &.saving .state.gist-saving, 
395    &.saved .state.gist-result {
396        display: block;
397    }
398    
399    #gist-link{
400        display: block;
401        padding-top: 5px;
402    }
403    
404}
405 
406.drop-down, .drop-down:hover{
407    background-image: url(../img/drop-down-triangle.png), linear-gradient(top, #f5f8fa, #e3e5e5);
408    background-image: url(../img/drop-down-triangle.png), -webkit-gradient(linear, left top, left bottom, from(#f5f8fa), to(#e3e5e5));    
409    background-position: 96% 57%;
410    background-repeat: no-repeat;
411    cursor: pointer;
412}
413
414.drop-down:active {
415    background-image: url(../img/drop-down-triangle.png);
416    background-color: #D3D7D7;
417    box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
418}
419       
420#post-gist-button{
421    position: absolute;
422    right: 35px;
423    top: 6px;
424}
425
426.popup section{
427    float: left;
428    width: 44%;
429    border-right: 1px solid #ddd;
430    padding-right: 4%;
431    margin-right: 6%; 
432    margin-top: 10px;
433    
434    & + section{
435        margin-right: 0;
436        padding-right: 0;
437        border: none;
438    }
439    
440    strong{
441        font-family: source-sb;
442    }
443    
444    ol{
445        padding-left: 20px;
446    }
447    
448    h3{
449        font-size: 20px;
450        padding-left: 30px;
451    }
452}
453
454#browser-popup .popup-inner{
455    width: 700px;
456    margin-left: -350px;
457    margin-top: -200px;
458    
459    li{
460        padding-right: 0;
461    }
462    
463    section:after{
464        position: absolute;
465        top: 55%;  
466        left: 46.5%;
467        background: white;
468        padding: 7px 0;
469        font-style: italic; 
470        font-family: source-l;
471        -webkit-font-smoothing: antialiased;
472        content: "or";
473        text-align: center;
474        color: gray;
475        font-size: 2em;
476    }
477    
478    section + section:after{
479        content: none;
480    }
481} 
482
483#help-popup{
484    @include vbox;
485    -webkit-box-pack: center;
486    -webkit-box-align: center;
487
488    .popup-inner{
489        margin: 0;
490        height: 400px;
491        position: relative;
492        top: auto;
493        left: auto;
494        right: auto;
495        bottom: auto;
496    }
497    
498    article{
499        margin-top: 25px;
500        max-height: 250px;
501        overflow-y: auto;
502
503        .button {
504            vertical-align: middle;
505            margin-left: 5px;
506        }
507    }
508}
509
510#help-popup.hidden {
511    display: none;
512}
513
514#fork-github {
515    a.button {
516        margin: 5px;
517    }
518}