← Back to branch summary

~rvb/maas/parent-child-relationship

« back to all changes in this revision

Viewing changes to src/maasserver/static/scss/ubuntu/patterns/_inline-logos.scss

  • Committer: MaaS Lander
  • Author(s): ricgard
  • Date: 2015-01-13 16:03:47 UTC
  • mfrom: (3437.3.7 guidelines)
  • Revision ID: maas_lander-20150113160347-cxygyp6f6kfyo1az
[r=blake-rouse][bug=][author=ricgard] Apply the Ubuntu CSS guidelines and amending the base.html template to incorporate the Ubuntu styles structure.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/scss/ubuntu/patterns/_inline-logos.scss
 
1
@charset 'UTF-8';
 
2
 
 
3
ul.inline-logos {
 
4
  float: left;
 
5
  margin-left: 0;
 
6
  padding: 0;
 
7
  text-align: center;
 
8
  width: 100%;
 
9
 
 
10
  li {
 
11
          clear: none;
 
12
          display: inline-block;
 
13
          float: none;
 
14
          margin: 10px 20px;
 
15
          padding: 0;
 
16
 
 
17
          &.clear-row { clear: left; }
 
18
 
 
19
          &.last-item { border: 0; }
 
20
        }
 
21
        img {
 
22
                @include transition;
 
23
                vertical-align: middle;
 
24
          max-width: 115px;
 
25
          max-height: 32px;
 
26
        }
 
27
}
 
28
 
 
29
.inline-icons {
 
30
        margin: 0 0 $gutter-width;
 
31
 
 
32
        li {
 
33
                margin-right: 20px;
 
34
                margin-bottom: 20px;
 
35
                text-align: left;
 
36
                display: inline-block;
 
37
 
 
38
                &.last-item { margin-right: 0; }
 
39
        }
 
40
 
 
41
        &.no-margin-bottom li { margin-bottom: 0; }
 
42
 
 
43
        img {
 
44
                vertical-align: middle;
 
45
          max-width: 115px;
 
46
          max-height: 32px;
 
47
        }
 
48
}
 
49
 
 
50
@media only screen and (max-width : 768px) {
 
51
        ul.inline-logos {
 
52
                img {
 
53
                  max-width: 172px;
 
54
                  max-height: 48px;
 
55
                }
 
56
        }
 
57
 
 
58
} // end @media only screen and (max-width : 768px)
 
59
 
 
60
@media only screen and (min-width : 769px) {
 
61
 
 
62
  ul.inline-logos {
 
63
                li {
 
64
                        clear: none;
 
65
                        display: inline-block;
 
66
                        height: auto;
 
67
                        margin: 20px 0;
 
68
                        line-height: 60px;
 
69
                        padding: 0 40px;
 
70
 
 
71
                        img {
 
72
                                float: none;
 
73
                                vertical-align: middle;
 
74
                                max-width: 200px;
 
75
                                max-height: 45px;
 
76
                        }
 
77
                }
 
78
        }
 
79
 
 
80
} //@media only screen and (min-width : 769px)
 
81
 
 
82
@media only screen and (min-width: 984px) {
 
83
 
 
84
        .inline-icons {
 
85
    text-align: left;
 
86
    margin-bottom: 20px;
 
87
  }
 
88
 
 
89
} // end @media only screen and (min-width: 984px)