mCSS/dist/css/component.banner.css at 071b00fdb796b2f3a01f2087b9bfb256200873de · minimaldesign/mCSS · 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
/*! mCSS v1.4.0 | MIT | https://mcss.dev */
/*
SETTINGS MEDIA QUERIES

https://github.com/argyleink/open-props/blob/main/src/props.media.css
https://open-props.style/#media-queries

Can't use var() inside media queries 🤦‍♂️
https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
so breakpoints are not in theme.default.tokens.css

xxs: 240px
xs: 360px
sm: 480px
md: 768px
lg: 1024px
xl: 1440px
xxl: 1920px
*/

/* https://github.com/postcss/postcss-mixins */

/* Example */

/* truncate single line of text and adds … */

@layer components {
/* BANNER */

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--xs3);
  padding: var(--xs2) var(--sm1);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--banner-color);
  background: var(--banner-background-color);

  a {
    color: inherit;
    font-weight: var(--semi-bold);
  }
}

.banner_content {
  p {
    margin-bottom: 0;
  }
}

.banner_close {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sm3);
  min-height: var(--sm3);
  padding: var(--xs1);
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;

  svg {
    width: var(--sm1);
    height: var(--sm1);
  }
}

}