]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_blocks.scss
Found the source of the issue, not sure how to fix
[bookstack] / resources / assets / sass / _blocks.scss
1
2 /*
3 * This file container all block styling including background shading,
4 * margins, paddings & borders.
5 */
6
7
8 /*
9 * Background Shading
10 */
11 .shaded {
12   background-color: #f1f1f1;
13   &.pos {
14     background-color: lighten($positive, 40%);
15   }
16   &.neg {
17     background-color: lighten($negative, 20%);
18   }
19   &.primary {
20     background-color: lighten($primary, 40%);
21   }
22   &.secondary {
23     background-color: lighten($secondary, 30%);
24   }
25 }
26
27 /*
28 * Bordering
29 */
30 .bordered {
31   border: 1px solid #BBB;
32   &.pos {
33     border-color: $positive;
34   }
35   &.neg {
36     border-color: $negative;
37   }
38   &.primary {
39     border-color: $primary;
40   }
41   &.secondary {
42     border-color: $secondary;
43   }
44   &.thick {
45     border-width: 2px;
46   }
47 }
48 .rounded {
49   border-radius: 3px;
50 }
51
52 /*
53 * Padding
54 */
55 .nopadding {
56   padding: 0;
57 }
58 .padded {
59   padding: $-l;
60   &.large {
61     padding: $-xl;
62   }
63   >h1, >h2, >h3, >h4 {
64     &:first-child {
65       margin-top: 0.1em;
66     }
67   }
68 }
69 .padded-vertical, .padded-top {
70   padding-top: $-m;
71   &.large {
72     padding-top: $-xl;
73   }
74 }
75
76 .padded-vertical, .padded-bottom {
77   padding-bottom: $-m;
78   &.large {
79     padding-bottom: $-xl;
80   }
81 }
82 .padded-horizontal, .padded-left {
83   padding-left: $-m;
84   &.large {
85     padding-left: $-xl;
86   }
87 }
88 .padded-horizontal, .padded-right {
89   padding-right: $-m;
90   &.large {
91     padding-right: $-xl;
92   }
93 }
94
95 /*
96 * Margins
97 */
98 .margins {
99   margin: $-l;
100   &.large {
101     margin: $-xl;
102   }
103 }
104 .margins-vertical, .margin-top {
105   margin-top: $-m;
106   &.large {
107     margin-top: $-xl;
108   }
109 }
110 .margins-vertical, .margin-bottom {
111   margin-bottom: $-m;
112   &.large {
113     margin-bottom: $-xl;
114   }
115 }
116 .margins-horizontal, .margin-left {
117   margin-left: $-m;
118   &.large {
119     margin-left: $-xl;
120   }
121 }
122 .margins-horizontal, .margin-right {
123   margin-right: $-m;
124   &.large {
125     margin-right: $-xl;
126   }
127 }