candidate/packages/components-css/icon-css/src/_mixin.scss at ee7b458d19ce7e367dbf0480ffb9b168fe845487 · nl-design-system/candidate · 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
@mixin nl-icon {
  // Default to 1em × 1em
  --_nl-icon-block-size: 1em;
  --_nl-icon-inline-size: 1em;

  align-items: center;
  block-size: var(--nl-icon-block-size, var(--_nl-icon-block-size));
  color: var(--nl-icon-color, currentcolor);
  display: inline-flex;
  font-size: var(--nl-icon-font-size, 1em);
  inline-size: var(--nl-icon-inline-size, var(--_nl-icon-inline-size));
  inset-block-start: var(--nl-icon-inset-block-start, 0);
  justify-content: center;
  min-block-size: var(--nl-icon-block-size, var(--_nl-icon-block-size));
  min-inline-size: var(--nl-icon-inline-size, var(--_nl-icon-inline-size));
  pointer-events: none;
  position: relative;
  vertical-align: middle;
}

@mixin nl-icon--forced-colors {
  color: currentColor;
}

// The icon takes on the size of capital letters of the current font-family
@mixin nl-icon--cap {
  --nl-icon-block-size: 1cap;
  --nl-icon-inline-size: 1cap;
  --nl-icon-inset-block-start: calc(-0.5 * (1cap - 1ex));
}

// The icon takes on the size of the current font-size
@mixin nl-icon--em {
  --nl-icon-block-size: 1em;
  --nl-icon-inline-size: 1em;
  --nl-icon-inset-block-start: calc(-0.5 * (1cap - 1ex));
}

// The icon takes on the size of the x-height of the current font-family
@mixin nl-icon--ex {
  --nl-icon-block-size: 1ex;
  --nl-icon-inline-size: 1ex;
  --nl-icon-inset-block-start: calc(-0.5 * (1cap - 1ex));
}

// The icon takes on the size of the current line-height
@mixin nl-icon--lh {
  --nl-icon-block-size: 1lh;
  --nl-icon-inline-size: 1lh;
  --nl-icon-inset-block-start: calc(-0.5 * (1cap - 1ex));
}

@mixin nl-icon--bidi-mirrored {
  transform: scaleX(-1);
}

@mixin nl-icon__svg {
  block-size: 100%;
  inline-size: 100%;
}