fluentui-blazor/src/Core/Components/MessageBar/FluentMessageBar.razor.css at 6878cdec8611b8263eebf7d56faf0dffa0abebff · MarvinKlein1508/fluentui-blazor · 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
fluent-message-bar[layout="notification"] {
  display: grid;
  grid-template-areas:
    "icon title dismiss"
    "body body body"
    "actions actions actions"
    "footer footer footer";
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto auto;
  padding-block: var(--spacingVerticalMNudge);
  padding-inline: var(--spacingHorizontalM);
}

fluent-message-bar .notification-title {
  display: flex;
  flex-direction: row;
  column-gap: var(--spacingHorizontalM);
}

fluent-message-bar .title {
  font-weight: 600;
  padding: 0 4px 0 0;
}

fluent-message-bar .actions {
  display: flex;
  column-gap: var(--spacingHorizontalM);
}

fluent-message-bar[animation="fade-in"] {
  animation: message-bar-fadein 1.5s;
}

@keyframes message-bar-fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}