Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
<x-banner data-dismiss-scheme="none" data-view-component="true">
<div data-view-component="true" class="Banner flash">
<div class="Banner-visual">
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell">
<path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path>
</svg>
</div>
<div data-view-component="true" class="Banner-message">
<p class="Banner-title" data-target="x-banner.titleText">This is a banner.</p>
</div>
</div>
</x-banner>
1
render(Primer::Alpha::Banner.new) { "This is a banner." }

app/components/primer/alpha/banner.css

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
129
130
131
/* Banner alert */
.Banner {
position: relative;
display: grid;
padding: var(--base-size-8,0.5rem);
color: var(--fgColor-default,var(--color-fg-default));
background-image: linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)), var(--bgColor-accent-muted,var(--color-accent-subtle)));
border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-accent-muted,var(--color-accent-muted));
border-radius: var(--borderRadius-medium,0.375rem);
grid-auto-flow: column;
grid-template-areas: 'visual message actions close';
grid-template-columns: min-content 1fr minmax(0, auto) min-content;
grid-template-rows: min-content;
/* `sm` breakpoint variantion */
}
@media (max-width: 543.98px) {
.Banner {
grid-template-areas:
'visual message close'
'. actions actions';
grid-template-columns: min-content 1fr min-content;
grid-template-rows: min-content min-content;
}
.Banner .Banner-actions {
margin: var(--base-size-8,0.5rem) 0 0 var(--base-size-8,0.5rem);
}
}
/* Elements */
.Banner .Banner-visual {
display: grid;
padding: 0.375rem var(--base-size-8,0.5rem);
grid-area: visual;
align-self: start;
}
.Banner .Banner-visual > .octicon {
margin-block: calc(var(--base-size-4,0.25rem) / 2);
}
.Banner .Banner-visual > * {
align-self: center;
}
.Banner .Banner-message {
padding: 0.375rem var(--base-size-8,0.5rem);
grid-area: message;
align-self: center;
}
.Banner .Banner-message p:last-child {
margin-bottom: 0;
}
.Banner .Banner-message .Banner-title:not(:only-child) {
margin-bottom: 0;
font-weight: var(--base-text-weight-semibold,600);
}
.Banner .Banner-actions {
grid-area: actions;
}
.Banner .Banner-actions:last-child {
align-self: center;
}
/* is this used anywhere? could not find any use, but unsure */
.Banner .Banner-close {
grid-area: close;
margin-left: var(--controlStack-medium-gap-condensed,0.5rem);
}
.Banner .Banner-visual .octicon {
color: var(--fgColor-accent,var(--color-accent-fg));
}
.Banner.Banner--warning {
color: var(--fgColor-default,var(--color-fg-default));
background-image: linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)), var(--bgColor-attention-muted,var(--color-attention-subtle)));
border-color: var(--borderColor-attention-muted,var(--color-attention-muted));
}
.Banner.Banner--warning .Banner-visual .octicon {
color: var(--fgColor-attention,var(--color-attention-fg));
}
.Banner.Banner--error {
color: var(--fgColor-default,var(--color-fg-default));
background-image: linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)), var(--bgColor-danger-muted,var(--color-danger-subtle)));
border-color: var(--borderColor-danger-muted,var(--color-danger-muted));
}
.Banner.Banner--error .Banner-visual .octicon {
color: var(--fgColor-danger,var(--color-danger-fg));
}
.Banner.Banner--success {
color: var(--fgColor-default,var(--color-fg-default));
background-image: linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)), var(--bgColor-success-muted,var(--color-success-subtle)));
border-color: var(--borderColor-success-muted,var(--color-success-muted));
}
.Banner.Banner--success .Banner-visual .octicon {
color: var(--fgColor-success,var(--color-success-fg));
}
/* Full-width */
.Banner.Banner--full {
margin-top: calc(var(--borderWidth-thin,max(1px, 0.0625rem)) * -1);
border-right: 0;
border-left: 0;
border-radius: 0;
}
@media (max-width: 767.98px) {
.Banner.Banner--full-whenNarrow {
margin-top: calc(var(--borderWidth-thin,max(1px, 0.0625rem)) * -1);
border-right: 0;
border-left: 0;
border-radius: 0;
}
}