-
Notifications
You must be signed in to change notification settings - Fork 207
Expand file tree
/
Copy pathindex.css
More file actions
128 lines (107 loc) · 6.61 KB
/
index.css
File metadata and controls
128 lines (107 loc) · 6.61 KB
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
/*!
* Copyright 2024 Adobe. All rights reserved.
*
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
.spectrum-AlertBanner {
--spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
--spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
--spectrum-alert-banner-inline-size: auto;
--spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
--spectrum-alert-banner-line-height: var(--spectrum-line-height-100);
--spectrum-alert-banner-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
/* spacing */
--spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
--spectrum-alert-banner-inline-start-to-content: var(--spectrum-spacing-300);
--spectrum-alert-banner-inline-end-to-content: var(--spectrum-spacing-300);
--spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
--spectrum-alert-banner-block-edge-to-button: var(--spectrum-spacing-200);
--spectrum-alert-banner-close-button-to-content: var(--spectrum-spacing-300);
--spectrum-alert-banner-close-button-to-inline-end: var(--spectrum-alert-banner-close-button-spacing);
/* Top and bottom margins for AlertBanner-text. Subtracts the vertical spacing that is already included in the
padding-block of its parent AlertBanner-body element. */
--spectrum-alert-banner-text-margin-block-start: max(0px, var(--mod-alert-banner-top-to-text, var(--spectrum-alert-banner-top-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
--spectrum-alert-banner-text-margin-block-end: max(0px, var(--mod-alert-banner-bottom-to-text, var(--spectrum-alert-banner-bottom-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
/* colors */
--spectrum-alert-banner-background: var(--mod-alert-banner-neutral-background, var(--spectrum-neutral-subdued-background-color-default));
--spectrum-alert-banner-font-color: var(--spectrum-white);
/* @passthrough -- settings for nested Close button */
--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-to-content, var(--spectrum-alert-banner-close-button-to-content)) var(--mod-alert-banner-close-button-to-inline-end, var(--spectrum-alert-banner-close-button-to-inline-end));
--mod-closebutton-margin-top: var(--mod-alert-banner-top-to-close-button, var(--spectrum-alert-banner-block-edge-to-button));
--mod-closebutton-align-self: flex-start;
&:lang(ja),
&:lang(zh),
&:lang(ko) {
--spectrum-alert-banner-line-height: var(--spectrum-cjk-line-height-100);
}
}
.spectrum-AlertBanner--info {
--spectrum-alert-banner-background: var(--mod-alert-banner-informative-background, var(--spectrum-informative-background-color-default));
}
.spectrum-AlertBanner--negative {
--spectrum-alert-banner-background: var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default));
}
.spectrum-AlertBanner {
display: none;
justify-content: space-between;
inline-size: var(--mod-alert-banner-inline-size, var(--spectrum-alert-banner-inline-size));
max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size));
min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
font-family: var(--mod-alert-banner-font-family, var(--spectrum-alert-banner-font-family));
line-height: var(--mod-alert-banner-line-height, var(--spectrum-alert-banner-line-height));
color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
background: var(--mod-alert-banner-background, var(--spectrum-alert-banner-background));
border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
&.is-open {
display: flex;
}
}
.spectrum-AlertBanner-body {
inline-size: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
/* Inline spacing between text and button, only when the button has not wrapped to the next line. */
column-gap: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));
/* Block spacing between text and button, when the button has wrapped to the next line. Takes into
account the existing margins on the text. */
row-gap: max(var(--mod-alert-banner-text-to-button-vertical, 0px), var(--spectrum-alert-banner-text-to-button-vertical) - var(--spectrum-alert-banner-text-margin-block-end));
padding-block: var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button));
margin-inline-start: var(--mod-alert-banner-inline-start-to-content, var(--spectrum-alert-banner-inline-start-to-content));
margin-inline-end: var(--mod-alert-banner-inline-end-to-content, var(--spectrum-alert-banner-inline-end-to-content));
/* When dismissible, this spacing is handled by the margin-inline-start on the close button instead. */
.spectrum-AlertBanner:has(.spectrum-CloseButton) & {
margin-inline-end: 0;
}
}
.spectrum-AlertBanner-content {
display: flex;
flex-grow: 1;
}
.spectrum-AlertBanner-icon {
/* @passthrough -- icon-size */
--spectrum-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
margin-block-start: calc(var(--mod-alert-banner-top-to-icon, var(--spectrum-alert-banner-top-to-workflow-icon)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text));
flex-shrink: 0;
}
.spectrum-AlertBanner-text {
margin-block-start: var(--mod-alert-banner-text-margin-block-start, var(--spectrum-alert-banner-text-margin-block-start));
margin-block-end: var(--mod-alert-banner-text-margin-block-end, var(--spectrum-alert-banner-text-margin-block-end));
}
@media (forced-colors: active) {
.spectrum-AlertBanner {
--highcontrast-alert-banner-border-color: CanvasText;
--highcontrast-alert-banner-border-width: var(--spectrum-border-width-100);
}
}