~maas-committers/maas/trunk

« back to all changes in this revision

Viewing changes to src/maasserver/static/scss/_base.typography.scss

Adding all assets and new theme files

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
////
 
2
/// @author       Web Team at Canonical Ltd
 
3
/// @link         http://ubuntudesign.github.io/maas-gui-vanilla-theme/docs/#mixin-maas-typography
 
4
/// @since        0.0.1
 
5
////
 
6
 
 
7
/// MAAS Typographic element styles
 
8
/// @group MAAS Typography
 
9
@mixin maas-typography {
 
10
 
 
11
  @media only screen and (min-width: $breakpoint-large) {
 
12
 
 
13
    a {
 
14
      color: $cool-grey;
 
15
      text-decoration: none;
 
16
      border-bottom: 1px solid $link-border;
 
17
 
 
18
      &:hover {
 
19
        text-decoration: none;
 
20
        color: $link-hover;
 
21
      }
 
22
    }
 
23
 
 
24
    p,
 
25
    li,
 
26
    code,
 
27
    pre {
 
28
      @include font-size(16px);
 
29
      line-height: #{$line-height-ratio};
 
30
      margin-bottom: .75em;
 
31
    }
 
32
 
 
33
    hr {
 
34
      margin-bottom: 20px;
 
35
    }
 
36
 
 
37
    // Heading required classes and sizes
 
38
    $headings: h1, h2, h3, h4, h5;
 
39
    $size: $h1, $h2, $h3, $h4, $h5;
 
40
    $heading-size: zip($headings, $size);
 
41
 
 
42
    // Shared heading styles
 
43
    #{$headings()} {
 
44
      margin: 10px 0;
 
45
      font-weight: 300;
 
46
      line-height: #{$line-height-ratio};
 
47
      color: $headline-color;
 
48
    }
 
49
 
 
50
    // Create heading styles
 
51
    @each $h in $heading-size {
 
52
      #{nth($h, 1)} {
 
53
        font-size: #{(nth($h, 2)/16px)*1em};
 
54
 
 
55
        small {
 
56
          font-size: 75%;
 
57
        }
 
58
      }
 
59
    }
 
60
 
 
61
    // Additional font sizes
 
62
    .gigantic {
 
63
      @include font-size($gigantic);
 
64
    }
 
65
 
 
66
    .mega {
 
67
      @include font-size($mega);
 
68
    }
 
69
  }
 
70
}