@primer/css 0.0.0-20220208011941 → 0.0.0-20220208013302
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/dialog/dialog.scss +5 -113
- package/dist/core.css +1 -1
- package/dist/core.css.map +1 -1
- package/dist/dialog.css +1 -1
- package/dist/dialog.css.map +1 -1
- package/dist/meta.json +93 -93
- package/dist/primer.css +1 -1
- package/dist/primer.css.map +1 -1
- package/dist/stats/core.json +1 -1
- package/dist/stats/dialog.json +1 -1
- package/dist/stats/primer.json +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/dialog/dialog.scss
CHANGED
|
@@ -1,113 +1,10 @@
|
|
|
1
|
-
.
|
|
2
|
-
display: none !important;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.modal-dialog-backdrop {
|
|
6
|
-
position: fixed;
|
|
7
|
-
top: 0;
|
|
8
|
-
right: 0;
|
|
9
|
-
bottom: 0;
|
|
10
|
-
left: 0;
|
|
11
|
-
display: flex;
|
|
12
|
-
align-items: center;
|
|
13
|
-
justify-content: center;
|
|
14
|
-
background-color: var(--color-neutral-muted);
|
|
15
|
-
animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running dialog-backdrop-appear;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.modal-dialog {
|
|
19
|
-
display: flex;
|
|
20
|
-
width: 640px;
|
|
21
|
-
min-width: 296px;
|
|
22
|
-
max-width: calc(100vw - 64px);
|
|
23
|
-
height: auto;
|
|
24
|
-
max-height: calc(100vh - 64px);
|
|
25
|
-
flex-direction: column;
|
|
26
|
-
background-color: var(--color-canvas-default);
|
|
27
|
-
// stylelint-disable-next-line primer/borders
|
|
28
|
-
border-radius: $border-radius-5;
|
|
29
|
-
box-shadow: var(--color-shadow-extra-large);
|
|
30
|
-
opacity: 1;
|
|
1
|
+
.Dialog {
|
|
31
2
|
animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay--dialog-appear;
|
|
3
|
+
}
|
|
32
4
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
border-bottom: $border-width $border-style var(--color-border-default);
|
|
37
|
-
flex-shrink: 0;
|
|
38
|
-
|
|
39
|
-
.header-container {
|
|
40
|
-
display: flex;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.header-container-title {
|
|
45
|
-
display: flex;
|
|
46
|
-
padding: $spacer-2;
|
|
47
|
-
flex-direction: column;
|
|
48
|
-
-webkit-box-flex: 1;
|
|
49
|
-
flex-grow: 1;
|
|
50
|
-
|
|
51
|
-
.title {
|
|
52
|
-
margin: $spacer-0;
|
|
53
|
-
font-size: $body-font-size;
|
|
54
|
-
font-weight: $font-weight-bold;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.subtitle {
|
|
58
|
-
margin: $spacer-1 $spacer-0 $spacer-0;
|
|
59
|
-
font-size: $font-size-small;
|
|
60
|
-
color: var(--color-fg-muted);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.close-button {
|
|
65
|
-
position: relative;
|
|
66
|
-
display: inline-block;
|
|
67
|
-
padding: $spacer-2;
|
|
68
|
-
font-family: inherit;
|
|
69
|
-
font-size: $body-font-size;
|
|
70
|
-
font-weight: $font-weight-bold;
|
|
71
|
-
line-height: $lh-normal;
|
|
72
|
-
color: var(--color-fg-muted);
|
|
73
|
-
text-align: center;
|
|
74
|
-
text-decoration: none;
|
|
75
|
-
white-space: nowrap;
|
|
76
|
-
vertical-align: middle;
|
|
77
|
-
cursor: pointer;
|
|
78
|
-
user-select: none;
|
|
79
|
-
background: transparent;
|
|
80
|
-
border: $border-width $border-style transparent;
|
|
81
|
-
// stylelint-disable-next-line primer/borders
|
|
82
|
-
border-radius: $border-radius-1;
|
|
83
|
-
box-shadow: none;
|
|
84
|
-
appearance: none;
|
|
85
|
-
align-self: flex-start;
|
|
86
|
-
|
|
87
|
-
&:hover,
|
|
88
|
-
&:focus {
|
|
89
|
-
background-color: var(--color-canvas-inset);
|
|
90
|
-
border: $border-width $border-style var(--color-border-muted);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.dialog-body {
|
|
95
|
-
padding: $spacer-3;
|
|
96
|
-
-webkit-box-flex: 1;
|
|
97
|
-
flex-grow: 1;
|
|
98
|
-
overflow: auto;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.dialog-footer {
|
|
102
|
-
z-index: 1;
|
|
103
|
-
display: flex;
|
|
104
|
-
padding: $spacer-3;
|
|
105
|
-
border-top: $border-width $border-style var(--color-border-default);
|
|
106
|
-
flex-flow: wrap;
|
|
107
|
-
-webkit-box-pack: end;
|
|
108
|
-
justify-content: flex-end;
|
|
109
|
-
flex-shrink: 0;
|
|
110
|
-
}
|
|
5
|
+
.Dialog-footer {
|
|
6
|
+
justify-content: flex-end;
|
|
7
|
+
gap: 8px;
|
|
111
8
|
}
|
|
112
9
|
|
|
113
10
|
@keyframes overlay--dialog-appear {
|
|
@@ -120,8 +17,3 @@
|
|
|
120
17
|
transform: scale(1);
|
|
121
18
|
}
|
|
122
19
|
}
|
|
123
|
-
|
|
124
|
-
.Dialog-footer {
|
|
125
|
-
justify-content: flex-end;
|
|
126
|
-
gap: 8px;
|
|
127
|
-
}
|