-
Notifications
You must be signed in to change notification settings - Fork 66
/
Alert.scss
121 lines (100 loc) · 3.08 KB
/
Alert.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
//
// Override Bootstrap's alert definition.
// We do this to get more control over colors
// used in alerts.
//
//
// Base styles
//
.alert {
position: relative;
padding: var(--pgn-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x);
margin-bottom: var(--pgn-spacing-alert-margin-bottom);
border: var(--pgn-size-alert-border-width) solid var(--pgn-alert-border-color, transparent);
color: inherit;
background-color: var(--pgn-alert-bg, transparent);
@include border-radius(var(--pgn-size-alert-border-radius));
@include pgn-box-shadow(1, "down");
.alert-message-content > :last-child {
margin-bottom: 0;
}
.alert-icon {
color: var(--pgn-alert-icon-color, inherit);
float: left;
margin-inline-end: var(--pgn-spacing-alert-icon-space);
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
}
}
// Headings for larger alerts
.alert-heading {
// Specified to prevent conflicts of changing var(--pgn-color-headings-base)
color: var(--pgn-color-alert-title);
display: flex;
}
// added to align content and icon
.alert-content {
display: flex;
font-size: var(--pgn-typography-alert-font-size);
line-height: var(--pgn-typography-alert-line-height);
color: var(--pgn-color-alert-content);
text-align: start;
div {
flex-grow: 1;
}
}
// Provide class for links that match alerts
.alert-link {
font-weight: var(--pgn-typography-alert-font-weight-link);
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.
// Baking in $close-font-size: var(--pgn-typography-font-size-base) * 1.5 !default; to avoid any dependency
.alert-dismissible {
padding-right: calc((var(--pgn-typography-font-size-base) * 1.5) + (var(--pgn-spacing-alert-padding-x) * 2));
// Adjust close link position
.close {
position: absolute;
top: 0;
right: 0;
padding: var(--pgn-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x);
color: inherit;
}
}
.pgn__alert-message-wrapper {
display: flex;
align-items: center;
.pgn__alert-actions {
margin-inline-start: var(--pgn-spacing-alert-actions-gap);
}
}
.pgn__alert-message-wrapper-stacked .pgn__alert-actions {
margin-top: var(--pgn-spacing-alert-actions-gap);
}
// Alternate styles
.alert-success {
--pgn-alert-bg: var(--pgn-color-alert-bg-success);
--pgn-alert-border-color: var(--pgn-color-alert-border-success);
--pgn-alert-icon-color: var(--pgn-color-alert-icon-success);
}
.alert-info {
--pgn-alert-bg: var(--pgn-color-alert-bg-info);
--pgn-alert-border-color: var(--pgn-color-alert-border-info);
--pgn-alert-icon-color: var(--pgn-color-alert-icon-info);
}
.alert-danger {
--pgn-alert-bg: var(--pgn-color-alert-bg-danger);
--pgn-alert-border-color: var(--pgn-color-alert-border-danger);
--pgn-alert-icon-color: var(--pgn-color-alert-icon-danger);
}
.alert-warning {
--pgn-alert-bg: var(--pgn-color-alert-bg-warning);
--pgn-alert-border-color: var(--pgn-color-alert-border-warning);
--pgn-alert-icon-color: var(--pgn-color-alert-icon-warning);
}