src/_utils.scss


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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

@use 'iro-sass/src/index' as iro;
@use 'functions' as fn;
@use 'include-media/dist/include-media' as media;

$dirs: (
    '': '',
    't': '-top',
    'r': '-right',
    'b': '-bottom',
    'l': '-left',
);

@include iro.bem-utility('d-block') {
    display: block;
}

@include iro.bem-utility('d-contents') {
    display: contents;
}

@include iro.bem-utility('d-none') {
    display: none;

    @each $breakpoint in map-keys(media.$breakpoints) {
        @include media.media('<=#{$breakpoint}') {
            @include iro.bem-suffix('#{$breakpoint}-lo') {
                display: none;
            }
        }

        @include media.media('>#{$breakpoint}') {
            @include iro.bem-suffix('#{$breakpoint}-hi') {
                display: none;
            }
        }
    }
}

@include iro.bem-utility('ta-left') {
    text-align: left;
}

@include iro.bem-utility('ta-right') {
    text-align: right;
}

@include iro.bem-utility('ta-center') {
    text-align: center;
}

@include iro.bem-utility('c-muted') {
    color: fn.color(--fg-hi);
}

@include iro.bem-utility('w-100') {
    width: 100%;
}

@include iro.bem-utility('w-75') {
    width: 75%;
}

@include iro.bem-utility('w-50') {
    width: 50%;
}

@include iro.bem-utility('w-25') {
    width: 25%;
}

@include iro.bem-utility('w-1px') {
    width: 1px;
}

@include iro.bem-utility('w-0') {
    width: 0;
}

@include iro.bem-utility('elp') {
    overflow:      hidden;
    text-overflow: ellipsis;
}

@include iro.bem-utility('p-static') {
    position: static;
}

@include iro.bem-utility('p-relative') {
    position: relative;
}

@include iro.bem-utility('sticky-top') {
    position: sticky;
    top:      0;
}

@include iro.bem-utility('themed') {
    background-color: fn.global-color(--bg);
    color:            fn.global-color(--fg);
}

@each $dir, $suffix in $dirs {
    @include iro.bem-utility('m#{$dir}-auto') {
        margin#{$suffix}: auto;
    }
    
    @include iro.bem-utility('p#{$dir}-auto') {
        padding#{$suffix}: auto;
    }

    @each $size in (0 10 50 75 100 125 200 400 700) {
        @include iro.bem-utility('m#{$dir}-#{$size}') {
            margin#{$suffix}: fn.global-dim(--size --#{$size});
        }
        
        @include iro.bem-utility('p#{$dir}-#{$size}') {
            padding#{$suffix}: fn.global-dim(--size --#{$size});
        }
    }
    
    @include iro.bem-utility('b#{$dir}-0') {
        border#{$suffix}: 0;
    }
    
    @include iro.bem-utility('b#{$dir}-1') {
        border#{$suffix}: 1px solid fn.global-color(--border);
    }
}