Project

General

Profile

1
//
2
// Component: Base
3
//
4
// ========================================================================
5

    
6

    
7
// Variables
8
// ========================================================================
9

    
10
//
11
// New
12
//
13

    
14
@base-code-padding-horizontal:                  6px;
15
@base-code-padding-vertical:                    2px;
16
@base-code-background:                          @global-muted-background;
17

    
18
@base-blockquote-color:                         @global-emphasis-color;
19

    
20
@base-blockquote-footer-color:                  @global-color;
21

    
22
@base-pre-padding:                              10px;
23
@base-pre-background:                           @global-background;
24
@base-pre-border-width:                         @global-border-width;
25
@base-pre-border:                               @global-border;
26
@base-pre-border-radius:                        3px;
27

    
28

    
29
// Body
30
// ========================================================================
31

    
32
.hook-base-body() {}
33

    
34

    
35
// Links
36
// ========================================================================
37

    
38
.hook-base-link() {}
39

    
40
.hook-base-link-hover() {}
41

    
42

    
43
// Text-level semantics
44
// ========================================================================
45

    
46
.hook-base-code() {
47
    padding: @base-code-padding-vertical @base-code-padding-horizontal;
48
    background: @base-code-background;
49
}
50

    
51

    
52
// Headings
53
// ========================================================================
54

    
55
.hook-base-heading() {}
56

    
57
.hook-base-h1() {}
58

    
59
.hook-base-h2() {}
60

    
61
.hook-base-h3() {}
62

    
63
.hook-base-h4() {}
64

    
65
.hook-base-h5() {}
66

    
67
.hook-base-h6() {}
68

    
69

    
70
// Horizontal rules
71
// ========================================================================
72

    
73
.hook-base-hr() {}
74

    
75

    
76
// Blockquotes
77
// ========================================================================
78

    
79
.hook-base-blockquote() {
80
    color: @base-blockquote-color;
81
}
82

    
83
.hook-base-blockquote-footer() {
84

    
85
    color: @base-blockquote-footer-color;
86

    
87
    &::before { content: "— "; }
88

    
89
}
90

    
91

    
92
// Preformatted text
93
// ========================================================================
94

    
95
.hook-base-pre() {
96
    padding: @base-pre-padding;
97
    border: @base-pre-border-width solid @base-pre-border;
98
    border-radius: @base-pre-border-radius;
99
    background: @base-pre-background;
100
}
101

    
102

    
103
// Miscellaneous
104
// ========================================================================
105

    
106
.hook-base-misc() {}
107

    
108

    
109
// Inverse
110
// ========================================================================
111

    
112
@inverse-base-blockquote-color:                @inverse-global-emphasis-color;
113
@inverse-base-blockquote-footer-color:         @inverse-global-color;
114

    
115
.hook-inverse-base-link() {}
116
.hook-inverse-base-link-hover() {}
117

    
118
.hook-inverse-base-code() {
119
    background: @inverse-global-muted-background;
120
}
121

    
122
.hook-inverse-base-heading() {}
123

    
124
.hook-inverse-base-h1() {}
125
.hook-inverse-base-h2() {}
126
.hook-inverse-base-h3() {}
127
.hook-inverse-base-h4() {}
128
.hook-inverse-base-h5() {}
129
.hook-inverse-base-h6() {}
130

    
131
.hook-inverse-base-blockquote() { color: @inverse-base-blockquote-color; }
132
.hook-inverse-base-blockquote-footer() { color: @inverse-base-blockquote-footer-color; }
133

    
134
.hook-inverse-base-hr() {}
(9-9/59)