_typography.scss 6.85 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
// Basic type related customisation


body, p {
    font-weight: 400;
}

h1 {
    @extend .page-header;
    .admin & {
11
        text-shadow: 1px 1px 0 rgba($text-shadow, 0.5);
12
13
        color: $gray-500;
        border-bottom-color: $list-group-border-color;
14
15
16
17
18
19
20
    }

    .page-header & {
        border-bottom:0;
    }
}

21
22
23
24
25
#notifications-page-header {
    @extend .page-header;
    clear: both;
}

26
27
// Add padding if there is no navigation
.header + .container h1 {
28
    padding-top: 10px;
29
30
}

31
// Page or collections page header title
32
33
34
35
36
37
38
39
40
41
.pageheader {
    h1 {
        margin: 40px 0 10px 0;
        padding: 0;
        border-bottom: 0;
        font-size: 36px;
        @include media-breakpoint-down(md) {
            font-size: 30px;
            margin-top: 20px;
        }
42
43
44
    }
}

45
.page-header {
46
    padding-bottom: $line-height-computed * 0.4525;
47
48
    margin-bottom: 20px;
    border-bottom: 1px solid $gray-200;
49
    ~ .with-heading {
50
        margin-top: -16px;
51
        @include media-breakpoint-down(sm) {
52
53
            margin-top: 0;
        }
Naomi Guyer's avatar
Naomi Guyer committed
54
    }
Naomi Guyer's avatar
Naomi Guyer committed
55
    ~ form.with-heading,
Robert Lyon's avatar
Robert Lyon committed
56
    ~ form .with-heading,
Naomi Guyer's avatar
Naomi Guyer committed
57
    ~ .form.with-heading {
58
        @include border-bottom-radius(3px);
59
        background-color: scale-color($gray-100, $lightness: 35%);
60
        padding: 20px 10px 10px 10px;
61
        margin-top: -20px;
62
        border-bottom: 1px solid $gray-100;
63
64
65
66
67
68
69
70
71
72
        &.invite-friend,
        &#addmember {
            @include border-radius(0);
            padding: 0;
            margin-top: 10px;
            border-bottom: 0;
            background: none;

            .input-group-append {
                margin-left: 0;
73
            }
74
        }
75
        @include media-breakpoint-down(sm) {
76
77
78
            margin-top: -20px;
        }
        @include media-breakpoint-down(xs) {
79
80
            margin-top: 5px;
        }
81
        @include media-breakpoint-down(md) {
82
83
            padding: 10px;
        }
84
        .admin & {
Liam's avatar
Liam committed
85
            background-color: scale-color($gray-100, $lightness: -2.4%);
86

87
88
89
            border-color: $list-group-border-color;
            border-left: 1px solid $gray-100;
            border-right: 1px solid $gray-100;
90
        }
Naomi Guyer's avatar
Naomi Guyer committed
91
92
93
94
95
        ~ form.with-heading {
            padding-top: 0;
            margin-top: -1px;
            max-width: 100%;
        }
96
97
98
99
100
        .form-group {
            .select2 {
                max-width: 100%;
            }
        }
Naomi Guyer's avatar
Naomi Guyer committed
101
    }
102
103
104
    ~ div.with-heading {
        padding-bottom: 10px;
        margin-bottom: 10px;
105
106
        @include media-breakpoint-down(sm) {
            border-bottom: 1px solid $gray-100;
107
108
109
110
        }
        a {
            margin-right: 5px;
        }
111
112
113
        .tags a {
            margin-right: 0;
        }
114
    }
115
116
117
118
119
120
121
122
123
124
125
}

.page-header,
h1, h2 {
    margin-top:0;
}

h4 {
    margin-bottom: 5px;
}

Naomi Guyer's avatar
Naomi Guyer committed
126
127
128
129
130
h2 {

    font-weight:300;
}

131
h2, h3, h4, h5, legend {
132
    &.card-header {
133
134
135
        margin: 0;
        font-size: 16px;
    }
136
137
138
    &.no-margin {
        margin: 0;
    }
139
140
}

141
.subsection-heading +  .section-heading {
142
    color: $section-heading-color;
143
144
}

145
146
147
148
149
150
151
152
153
154
strong i {
    font-style: normal; // #tasteful
}

a {
    &.link-block {
        display: block;
    }
    &:focus,
    &:hover {
155
        text-decoration-color: $link-hover-color;
156
        outline-color: $input-focus-border-color;
157
158
159
160
161
162
        .text-orange {
            color: $link-color;
        }
    }
}

163
164
165
166
167
168
.list-unstyled:not(.list-group) {
    li {
        padding-bottom: 5px;
    }
}

169
.link-unstyled {
170
    color: $gray-700;
171
172
173
174
175
176
    &:hover {
        text-decoration: none;
        color: inherit;
    }
}

177
178
179
180
181
182
// Styles for links at the bottom of blocktype
// ie. add comment link and artefact detail link
.link-blocktype {
    .col-width-100 &,
    .col-width-50 & {
        padding: 5px 8px;
183
        @include media-breakpoint-up(md) {
184
185
186
            padding: 5px 20px;
        }
    }
187
    font-size: $font-size-base * 0.9285;
188
189
190
191
    float: left;
    margin: 10px 0;
    padding: 5px 7px;
    &:hover {
192
        background-color: $btn-secondary-bg;
193
194
195
196
        text-decoration: none;
    }
    .icon {
        display: none;
197
        @include media-breakpoint-up(sm) {
198
199
200
            display: inline-block;
        }
    }
201
202
203
    &.js-peerassessment-modal {
        float: none;
    }
204
}
205
206
207

img {
    max-width: 100%;
208
    height: auto;
209
210
211
212
213
214
    &.artefact-img {
        margin-right: 10px;
    }
    &.file-icon {
        margin-right: 5px;
    }
215
216
217
}

hr {
218
    margin-top: $line-height-base / 2;
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
}

ul {
    &.unstyled.unstyled { //increase the importance
        padding: 0;
        margin: 0;
        list-style-type: none;
    }
}

blockquote {
    margin-top: 20px;
    margin-bottom: 30px;
    &.small {
        font-size: $font-size-base;
    }
    .text-small &{
        font-size: $font-size-base;
    }
}

.lead,
.lead p {
242
    font-size: ($font-size-base * 1.10);
243
244
245
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 15px;
246

247
    @include media-breakpoint-up(md) {
248
249
        font-size: ($font-size-base * 1.2);
    }
250

251
252
253
254
255
    &.text-small {
        font-size: $font-size-base;
    }
    &.link {
        margin-bottom: 0;
256
    }
257
258
}

259
260
261
262
263
264
265
266
267
268
label.lead {
    margin-bottom: 0;
}

.content-text,
.postcontent {
    margin: 10px 0;
}


269
.metadata {
Naomi Guyer's avatar
Naomi Guyer committed
270
    font-family: $font-family-sans-serif;
271
    font-size: 0.8em;
272
    color: $gray-500;
273
274
275
276
277
278
279
280
281
282
    .title & {
        margin-left: 5px;
    }
}

.license {
    margin: 10px 0;
    .license-icon {
        padding-right: 10px;
    }
283
}
284
285
286

.licenseicon {
    padding: 0 10px 5px 0;
287
}
288
289

pre {
Liam's avatar
Liam committed
290
291
292
293
294
    padding: 10px;
    margin: 0 0 10.5px;
    word-break: break-all;
    word-wrap: break-word;
    background-color: $pre-bg;
295
    border: $border-width solid $card-border-color;
296
    border-radius: $border-radius-sm;
297
298
299
300
301
302
303
304
305
    span.wsname {
        font-weight: bold;
    }
    span.wsdescription {
        color: #2A33A6;
        padding-right: 10px;

        .wsrequired {
            font-weight: bold;
306
            color: theme-color("danger");
307
308
309
310
311
312
313
314
        }
        .wsoptional {
            font-weight: bold;
        }
        .wsdescriptiontext {
            font-style: italic;
        }
    }
315
}
316

317
318
319
320
.h2, .h3, h2, h3 {
    margin-top: 21px;
}

321
322
323
324
.h4, .h5, .h6, h4, h5, h6 {
    margin-top: 10.5px;
}

325
326
327
/* headings in html entered by user neutralised */
.myblogs,
.content-text,
328
.card-body,
329
330
331
332
333
334
335
336
337
#resumefieldform_coverletterdisplay_container,
#resumefieldform_interestdisplay_container,
.note-name div,
.view-description,
.forum-post .postedits,
.mce-content-body {
  h1, h2, h3, h4, h5, h6  {
    font-family: $font-family-base;
    font-weight: bold;
338
    color: $theme-text-color;
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355

    /* but not some titles */
    &.list-group-item-heading,
    &.title {
      font-family: $headings-font-family;
      font-weight: $headings-font-weight;
      color: $headings-color;
    }
  }

  /* remove border bottom, padding and margin for h1 */
  h1 {
    border-bottom: 0;
    padding: 0 !important;
    margin-bottom: 10px;
  }
}
356
357
358
359
360
361
362

// Matrix header, move small text under H1 back to original
.matrixheader {
    h1.page-header ~ div.with-heading {
        margin-top: 0;
    }
}
Liam's avatar
Liam committed
363
364
365
366
367

// Add margin to TinyMCE blocks
body#tinymce {
    margin: 8px;
}