]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_text.scss
Found the source of the issue, not sure how to fix
[bookstack] / resources / assets / sass / _text.scss
1 /*
2  * Header Styles
3  */
4
5 h1 {
6   font-size: 3.625em;
7   line-height: 1.22222222em;
8   margin-top: 0.48888889em;
9   margin-bottom: 0.48888889em;
10 }
11 h2 {
12   font-size: 2.8275em;
13   line-height: 1.294117647em;
14   margin-top: 0.8627451em;
15   margin-bottom: 0.43137255em;
16 }
17 h3 {
18   font-size: 1.75em;
19   line-height: 1.571428572em;
20   margin-top: 0.78571429em;
21   margin-bottom: 0.43137255em;
22 }
23 h4 {
24   font-size: 1em;
25   line-height: 1.375em;
26   margin-top: 0.78571429em;
27   margin-bottom: 0.43137255em;
28 }
29
30 h1, h2, h3, h4 {
31   font-weight: 400;
32   position: relative;
33   display: block;
34   color: #555;
35   .subheader {
36     display: block;
37     font-size: 0.5em;
38     line-height: 1em;
39     color: lighten($text-dark, 16%);
40   }
41 }
42
43 /*
44  * Link styling
45  */
46 a, .link {
47   color: $primary;
48   cursor: pointer;
49   text-decoration: none;
50   transition: color ease-in-out 80ms;
51   font-family: $text;
52   line-height: 1.6;
53   &:hover {
54     text-decoration: underline;
55     color: darken($primary, 20%);
56   }
57   i {
58     padding-right: $-s;
59   }
60   i.zmdi-hc-flip-horizontal {
61     padding-right: 0;
62     padding-left: $-s;
63   }
64 }
65
66 /*
67  * Other HTML Text Elements
68  */
69 p, ul, ol, pre, table, blockquote {
70   margin-top: 0.3em;
71   margin-bottom: 1.375em;
72 }
73
74 hr {
75   border: 0;
76   height: 1px;
77   border: 0;
78   background: #EAEAEA;
79   margin-bottom: $-l;
80   &.faded {
81     background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
82   }
83   &.margin-top, &.even {
84     margin-top: $-l;
85   }
86 }
87
88 strong, b, .bold, .strong {
89   font-weight: bold;
90   > strong, > b, > .bold, > .strong {
91     font-weight: bolder;
92   }
93 }
94
95 em, i, .italic {
96   font-style: italic;
97 }
98
99 small, p.small, span.small, .text-small {
100   font-size: 0.8em;
101   color: lighten($text-dark, 20%);
102 }
103
104 sup, .superscript {
105   vertical-align: super;
106   font-size: 0.8em;
107 }
108
109 pre {
110   font-family: monospace;
111   white-space:pre;
112   font-size: 0.8em;
113   overflow: hidden;
114   border-radius: 4px;
115   box-shadow: 0 1px 2px 0px rgba(10, 10, 10, 0.06);
116   border: 1px solid rgba(221, 221, 221, 0.66);
117   background-color: #fdf6e3;
118   padding: $-s;
119   overflow-x: scroll;
120 }
121
122 blockquote {
123   display: block;
124   position: relative;
125   border-left: 4px solid $primary;
126   background-color: #F8F8F8;
127   padding: $-s $-m $-s $-xl;
128   &:before {
129     content: "\201C";
130     font-size: 2em;
131     font-weight: bold;
132     position: absolute;
133     top: $-s;
134     left: $-s;
135     color: lighten($text-dark, 20%);
136   }
137 }
138
139 .code-base {
140     background-color: #F8F8F8;
141     font-family: monospace;
142     font-size: 0.80em;
143     border: 1px solid #DDD;
144     border-radius: 3px;
145 }
146
147 code {
148   @extend .code-base;
149   display: inline;
150   padding: 1px 3px;
151   white-space:pre;
152   line-height: 1.2em;
153   margin-bottom: 1.2em;
154 }
155
156 span.code {
157   @extend .code-base;
158   padding: 1px $-xs;
159 }
160 /*
161  * Text colors
162  */
163 p.pos, p .pos, span.pos, .text-pos {
164   color: $positive;
165   &:hover {
166     color: $positive;
167   }
168 }
169
170 p.neg, p .neg, span.neg, .text-neg {
171   color: $negative;
172   &:hover {
173     color: $negative;
174   }
175 }
176
177 p.muted, p .muted, span.muted, .text-muted {
178         color: lighten($text-dark, 26%);
179     &.small, .small {
180       color: lighten($text-dark, 42%);
181     }
182 }
183
184 p.primary, p .primary, span.primary, .text-primary {
185         color: $primary;
186   &:hover {
187     color: $primary;
188   }
189 }
190
191 p.secondary, p .secondary, span.secondary, .text-secondary {
192         color: $secondary;
193   &:hover {
194     color: $secondary;
195   }
196 }
197
198 .text-book {
199   color: $color-book;
200   &:hover {
201     color: $color-book;
202   }
203 }
204 .text-page {
205   color: $color-page;
206   &:hover {
207     color: $color-page;
208   }
209 }
210 .text-chapter {
211   color: $color-chapter;
212   &:hover {
213     color: $color-chapter;
214   }
215 }
216
217 span.highlight {
218   //background-color: rgba($primary, 0.2);
219   font-weight: bold;
220   //padding: 2px 4px;
221 }
222
223 /*
224  * Lists
225  */
226 ul {
227   padding-left: $-m * 1.5;
228   list-style: disc inside;
229 }
230
231 ol {
232   list-style: decimal inside;
233   padding-left: $-m * 1.5;
234 }
235
236 /*
237  * Generic text styling classes
238  */
239 .underlined {
240   text-decoration: underline;
241 }
242
243 .text-center {
244   text-align: center;
245 }
246
247 .text-left {
248   text-align: left;
249 }
250
251 .text-right {
252   text-align: right;
253 }
254
255 .text-bigger {
256   font-size: 1.1em;
257 }
258
259 .text-large {
260   font-size: 1.6666em;
261 }
262
263 .no-color {
264   color: inherit;
265 }
266
267 /**
268  * Grouping
269  */
270 .header-group {
271   margin: $-m 0;
272   h1, h2, h3, h4, h5, h6 {
273     margin: 0;
274   }
275 }
276
277 span.sep {
278   color: #BBB;
279   padding: 0 $-xs;
280 }
281
282 .list > * {
283   display: block;
284 }
285
286 /**
287   * Icons
288   */
289 i {
290   padding-right: $-xs;
291 }
292