]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_text.scss
Update PageRepo.php
[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: 0.5em;
119 }
120
121 blockquote {
122   display: block;
123   position: relative;
124   border-left: 4px solid $primary;
125   background-color: #F8F8F8;
126   padding: $-s $-m $-s $-xl;
127   &:before {
128     content: "\201C";
129     font-size: 2em;
130     font-weight: bold;
131     position: absolute;
132     top: $-s;
133     left: $-s;
134     color: lighten($text-dark, 20%);
135   }
136 }
137
138 .code-base {
139     background-color: #F8F8F8;
140     font-family: monospace;
141     font-size: 0.80em;
142     border: 1px solid #DDD;
143     border-radius: 3px;
144 }
145
146 code {
147   @extend .code-base;
148   display: inline;
149   padding: 1px 3px;
150   white-space:pre;
151   line-height: 1.2em;
152   margin-bottom: 1.2em;
153 }
154
155 span.code {
156   @extend .code-base;
157   padding: 1px $-xs;
158 }
159 /*
160  * Text colors
161  */
162 p.pos, p .pos, span.pos, .text-pos {
163   color: $positive;
164   &:hover {
165     color: $positive;
166   }
167 }
168
169 p.neg, p .neg, span.neg, .text-neg {
170   color: $negative;
171   &:hover {
172     color: $negative;
173   }
174 }
175
176 p.muted, p .muted, span.muted, .text-muted {
177         color: lighten($text-dark, 26%);
178     &.small, .small {
179       color: lighten($text-dark, 42%);
180     }
181 }
182
183 p.primary, p .primary, span.primary, .text-primary {
184         color: $primary;
185   &:hover {
186     color: $primary;
187   }
188 }
189
190 p.secondary, p .secondary, span.secondary, .text-secondary {
191         color: $secondary;
192   &:hover {
193     color: $secondary;
194   }
195 }
196
197 .text-book {
198   color: $color-book;
199   &:hover {
200     color: $color-book;
201   }
202 }
203 .text-page {
204   color: $color-page;
205   &:hover {
206     color: $color-page;
207   }
208 }
209 .text-chapter {
210   color: $color-chapter;
211   &:hover {
212     color: $color-chapter;
213   }
214 }
215
216 span.highlight {
217   //background-color: rgba($primary, 0.2);
218   font-weight: bold;
219   //padding: 2px 4px;
220 }
221
222 /*
223  * Lists
224  */
225 ul {
226   padding-left: $-m * 1.5;
227   list-style: disc inside;
228 }
229
230 ol {
231   list-style: decimal inside;
232   padding-left: $-m * 1.5;
233 }
234
235 /*
236  * Generic text styling classes
237  */
238 .underlined {
239   text-decoration: underline;
240 }
241
242 .text-center {
243   text-align: center;
244 }
245
246 .text-left {
247   text-align: left;
248 }
249
250 .text-right {
251   text-align: right;
252 }
253
254 .text-bigger {
255   font-size: 1.1em;
256 }
257 .text-large {
258   font-size: 1.6666em;
259 }
260
261 /**
262  * Grouping
263  */
264 .header-group {
265   margin: $-m 0;
266   h1, h2, h3, h4, h5, h6 {
267     margin: 0;
268   }
269 }
270
271 span.sep {
272   color: #BBB;
273   padding: 0 $-xs;
274 }
275
276 .list > * {
277   display: block;
278 }
279
280 /**
281   * Icons
282   */
283 i {
284   padding-right: $-xs;
285 }
286