beapi-frontend-framework/src/scss/02-tools/_m-heading.scss at 6e4b987ea2a7daabf81cc5055a3500aec2e7540a · BeAPI/beapi-frontend-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
@use "../01-abstract/variables" as *;

/**
 * Heading - Used in src/scss/06-blocks/core/_heading.scss
 *
 * @author Milan Ricoul
 *
 * @param $name
 * @param $style
 *
 * Examples :
 *
 *      .my-heading {
 *          @include heading(h3);
 *      }
 *
 *
 * Examples for use heading style variation (depend of projects):
 * https://github.com/BeAPI/beapi-frontend-framework/pull/247
 *
 *      mixin :
 *      @if $name == h3 {
 *          font-size: var(--heading--font-size-h3);
 *          line-height: var(--heading--line-height-h3);
 *
 *          @if $style == uppercase {
 *              text-transform: uppercase;
 *          }
 *
 *          @if $style == bold {
 *              font-weight: 700;
 *          }
 *      }
 *
 *      scss :
 *      .my-heading-uppercase {
 *          @include heading(h3, "uppercase");
 *      }
 *
 *      .my-heading-bold {
 *          @include heading(h3, "bold");
 *      }
 *
 */

@mixin heading($name: h1, $style: default) {
    font-family: $font-family-primary;
    font-weight: 400;

    @if $name == h1 {
        font-size: var(--heading--font-size-h1);
        line-height: var(--heading--line-height-h1);
    }

    @if $name == h2 {
        font-size: var(--heading--font-size-h2);
        line-height: var(--heading--line-height-h2);
    }

    @if $name == h3 {
        font-size: var(--heading--font-size-h3);
        line-height: var(--heading--line-height-h3);
    }

    @if $name == h4 {
        font-size: var(--heading--font-size-h4);
        line-height: var(--heading--line-height-h4);
    }

    @if $name == h5 {
        font-size: var(--heading--font-size-h5);
        line-height: var(--heading--line-height-h5);
    }

    @if $name == h6 {
        font-size: var(--heading--font-size-h6);
        line-height: var(--heading--line-height-h6);
    }
}