@primer/css 0.0.0-20220310073406 → 0.0.0-20220314222455

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.
Files changed (26) hide show
  1. package/CHANGELOG.md +1 -3
  2. package/alerts/banner.scss +142 -0
  3. package/alerts/index.scss +1 -0
  4. package/dist/alerts.css +1 -1
  5. package/dist/alerts.css.map +1 -1
  6. package/dist/core.css +1 -1
  7. package/dist/core.css.map +1 -1
  8. package/dist/labels.css +1 -1
  9. package/dist/labels.css.map +1 -1
  10. package/dist/layout.css +1 -1
  11. package/dist/layout.css.map +1 -1
  12. package/dist/meta.json +102 -102
  13. package/dist/primer.css +2 -2
  14. package/dist/primer.css.map +1 -1
  15. package/dist/product.css +1 -1
  16. package/dist/product.css.map +1 -1
  17. package/dist/stats/alerts.json +1 -1
  18. package/dist/stats/core.json +1 -1
  19. package/dist/stats/labels.json +1 -1
  20. package/dist/stats/layout.json +1 -1
  21. package/dist/stats/primer.json +1 -1
  22. package/dist/stats/product.json +1 -1
  23. package/labels/mixins.scss +0 -1
  24. package/layout/index.scss +0 -1
  25. package/package.json +1 -1
  26. package/layout/page-header.scss +0 -116
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @primer/css
2
2
 
3
- ## 0.0.0-20220310073406
3
+ ## 0.0.0-20220314222455
4
4
 
5
5
  ### Minor Changes
6
6
 
@@ -24,8 +24,6 @@
24
24
 
25
25
  * [#1949](https://github.com/primer/css/pull/1949) [`dab83198`](https://github.com/primer/css/commit/dab83198c3bf1c7e03826b8cd498b8c48c9a2869) Thanks [@heiskr](https://github.com/heiskr)! - Render headings inline when in a `<summary>`
26
26
 
27
- - [#1977](https://github.com/primer/css/pull/1977) [`80bf9d9d`](https://github.com/primer/css/commit/80bf9d9dea6fe7fbb0837fea265ec95cbbbd75d6) Thanks [@jonrohan](https://github.com/jonrohan)! - [Bug Fix] Adding white-space nowrap to Labels
28
-
29
27
  ## 19.4.0
30
28
 
31
29
  ### Minor Changes
package/alerts/banner.scss ADDED
@@ -0,0 +1,142 @@
1
+ // stylelint-disable selector-max-type
2
+
3
+ // Banner alert
4
+
5
+ .Banner {
6
+ position: relative;
7
+ display: grid;
8
+ padding: $spacer-2;
9
+ color: var(--color-fg-default);
10
+ background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
11
+ border: $border-width $border-style var(--color-accent-muted);
12
+ border-radius: $border-radius;
13
+ grid-auto-flow: column;
14
+ grid-template-areas: 'visual message actions close';
15
+ grid-template-columns: min-content 1fr min-content min-content;
16
+ grid-template-rows: min-content;
17
+
18
+ // `sm` breakpoint variantion
19
+ @media (max-width: #{map-get($breakpoints, 'sm') - 0.02px}) {
20
+ grid-template-areas:
21
+ 'visual message close'
22
+ ' . actions actions';
23
+ grid-template-columns: min-content 1fr min-content;
24
+ grid-template-rows: min-content min-content;
25
+
26
+ .Banner-actions {
27
+ margin: $spacer-2 0 0 $spacer-2;
28
+ }
29
+ }
30
+
31
+ // Elements
32
+
33
+ .Banner-visual {
34
+ display: grid;
35
+ // Migrate to design tokens when available
36
+ // calc((var(--gh-control-medium-size) - var(--gh-text-body-medium-lineBoxHeight)) / 2)
37
+ // stylelint-disable-next-line primer/spacing
38
+ padding: calc((#{$spacer-5} - 20px) / 2) $spacer-2;
39
+ grid-area: visual;
40
+ align-self: start;
41
+
42
+ > .octicon {
43
+ margin-block: calc((#{$spacer-1}) / 2);
44
+ }
45
+
46
+ > * {
47
+ align-self: center;
48
+ }
49
+ }
50
+
51
+ .Banner-message {
52
+ // Migrate to design tokens when available
53
+ // calc((var(--gh-control-medium-size) - var(--gh-text-body-medium-lineBoxHeight)) / 2)
54
+ // stylelint-disable-next-line primer/spacing
55
+ padding: calc((#{$spacer-5} - 20px) / 2) $spacer-2;
56
+ grid-area: message;
57
+ align-self: center;
58
+
59
+ p:last-child {
60
+ margin-bottom: 0;
61
+ }
62
+
63
+ .Banner-title:not(:only-child) {
64
+ font-weight: $font-weight-bold;
65
+ margin-bottom: 0;
66
+ }
67
+ }
68
+
69
+ .Banner-actions {
70
+ grid-area: actions;
71
+
72
+ &:last-child {
73
+ align-self: end;
74
+ }
75
+ }
76
+
77
+ .Banner-close {
78
+ grid-area: close;
79
+ margin: 0 0 0 $spacer-2;
80
+
81
+ button {
82
+ &:hover {
83
+ background-color: var(--color-action-list-item-default-hover-bg);
84
+ }
85
+ }
86
+ }
87
+
88
+ .Banner-visual .octicon {
89
+ color: var(--color-accent-fg);
90
+ }
91
+
92
+ &.Banner--warning {
93
+ color: var(--color-fg-default);
94
+ background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
95
+ border-color: var(--color-attention-muted);
96
+
97
+ .Banner-visual .octicon {
98
+ color: var(--color-attention-fg);
99
+ }
100
+ }
101
+
102
+ &.Banner--error {
103
+ color: var(--color-fg-default);
104
+ background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
105
+ border-color: var(--color-danger-muted);
106
+
107
+ .Banner-visual .octicon {
108
+ color: var(--color-danger-fg);
109
+ }
110
+ }
111
+
112
+ &.Banner--success {
113
+ color: var(--color-fg-default);
114
+ background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
115
+ border-color: var(--color-success-muted);
116
+
117
+ .Banner-visual .octicon {
118
+ color: var(--color-success-fg);
119
+ }
120
+ }
121
+
122
+ // Full-width
123
+
124
+ &.Banner--full {
125
+ // stylelint-disable-next-line primer/spacing
126
+ margin-top: ($border-width * -1);
127
+ border-right: 0;
128
+ border-left: 0;
129
+ border-radius: 0;
130
+ }
131
+
132
+ // Replace with Primitives' Narrow viewport range
133
+ @media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
134
+ &.Banner--full-whenNarrow {
135
+ // stylelint-disable-next-line primer/spacing
136
+ margin-top: ($border-width * -1);
137
+ border-right: 0;
138
+ border-left: 0;
139
+ border-radius: 0;
140
+ }
141
+ }
142
+ }
package/alerts/index.scss CHANGED
@@ -1,3 +1,4 @@
1
1
  // support files
2
2
  @import '../support/index.scss';
3
3
  @import './flash.scss';
4
+ @import './banner.scss';
package/dist/alerts.css CHANGED
@@ -1,2 +1,2 @@
1
- .flash{position:relative;padding:20px 16px;border-style:solid;border-width:1px;border-radius:6px}.flash p:last-child{margin-bottom:0}.flash .octicon{margin-right:12px}.flash-messages{margin-bottom:24px}.flash-close{float:right;padding:16px;margin:-16px;text-align:center;cursor:pointer;background:none;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.flash-close:hover{opacity:.7}.flash-close:active{opacity:.5}.flash-close .octicon{margin-right:0}.flash-action{float:right;margin-top:-3px;margin-left:24px;background-clip:padding-box}.flash-action.btn .octicon{margin-right:4px;color:var(--color-fg-muted)}.flash-action.btn-primary .octicon{color:inherit}.flash{color:var(--color-fg-default);background-image:linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));border-color:var(--color-accent-muted)}.flash .octicon{color:var(--color-accent-fg)}.flash-warn{color:var(--color-fg-default);background-image:linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));border-color:var(--color-attention-muted)}.flash-warn .octicon{color:var(--color-attention-fg)}.flash-error{color:var(--color-fg-default);background-image:linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));border-color:var(--color-danger-muted)}.flash-error .octicon{color:var(--color-danger-fg)}.flash-success{color:var(--color-fg-default);background-image:linear-gradient(var(--color-success-subtle), var(--color-success-subtle));border-color:var(--color-success-muted)}.flash-success .octicon{color:var(--color-success-fg)}.flash-full{margin-top:-1px;border-width:1px 0;border-radius:0}.flash-banner{position:fixed;top:0;z-index:90;width:100%;border-top:0;border-right:0;border-left:0;border-radius:0}.flash-full,.flash-banner{background-color:var(--color-canvas-default)}.warning{padding:.5em;margin-bottom:.8em;font-weight:600;background-color:var(--color-attention-subtle)}
1
+ .flash{position:relative;padding:20px 16px;border-style:solid;border-width:1px;border-radius:6px}.flash p:last-child{margin-bottom:0}.flash .octicon{margin-right:12px}.flash-messages{margin-bottom:24px}.flash-close{float:right;padding:16px;margin:-16px;text-align:center;cursor:pointer;background:none;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.flash-close:hover{opacity:.7}.flash-close:active{opacity:.5}.flash-close .octicon{margin-right:0}.flash-action{float:right;margin-top:-3px;margin-left:24px;background-clip:padding-box}.flash-action.btn .octicon{margin-right:4px;color:var(--color-fg-muted)}.flash-action.btn-primary .octicon{color:inherit}.flash{color:var(--color-fg-default);background-image:linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));border-color:var(--color-accent-muted)}.flash .octicon{color:var(--color-accent-fg)}.flash-warn{color:var(--color-fg-default);background-image:linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));border-color:var(--color-attention-muted)}.flash-warn .octicon{color:var(--color-attention-fg)}.flash-error{color:var(--color-fg-default);background-image:linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));border-color:var(--color-danger-muted)}.flash-error .octicon{color:var(--color-danger-fg)}.flash-success{color:var(--color-fg-default);background-image:linear-gradient(var(--color-success-subtle), var(--color-success-subtle));border-color:var(--color-success-muted)}.flash-success .octicon{color:var(--color-success-fg)}.flash-full{margin-top:-1px;border-width:1px 0;border-radius:0}.flash-banner{position:fixed;top:0;z-index:90;width:100%;border-top:0;border-right:0;border-left:0;border-radius:0}.flash-full,.flash-banner{background-color:var(--color-canvas-default)}.warning{padding:.5em;margin-bottom:.8em;font-weight:600;background-color:var(--color-attention-subtle)}.Banner{position:relative;display:grid;padding:8px;color:var(--color-fg-default);background-image:linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));border:1px solid var(--color-accent-muted);border-radius:6px;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr min-content min-content;grid-template-rows:min-content}@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:8px 0 0 8px}}.Banner .Banner-visual{display:grid;padding:calc((32px - 20px)/2) 8px;grid-area:visual;align-self:start}.Banner .Banner-visual>.octicon{margin-block:calc((4px)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{padding:calc((32px - 20px)/2) 8px;grid-area:message;align-self:center}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:600;margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:end}.Banner .Banner-close{grid-area:close;margin:0 0 0 8px}.Banner .Banner-close button:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Banner .Banner-visual .octicon{color:var(--color-accent-fg)}.Banner.Banner--warning{color:var(--color-fg-default);background-image:linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));border-color:var(--color-attention-muted)}.Banner.Banner--warning .Banner-visual .octicon{color:var(--color-attention-fg)}.Banner.Banner--error{color:var(--color-fg-default);background-image:linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));border-color:var(--color-danger-muted)}.Banner.Banner--error .Banner-visual .octicon{color:var(--color-danger-fg)}.Banner.Banner--success{color:var(--color-fg-default);background-image:linear-gradient(var(--color-success-subtle), var(--color-success-subtle));border-color:var(--color-success-muted)}.Banner.Banner--success .Banner-visual .octicon{color:var(--color-success-fg)}.Banner.Banner--full{margin-top:-1px;border-right:0;border-left:0;border-radius:0}@media(max-width: 767.98px){.Banner.Banner--full-whenNarrow{margin-top:-1px;border-right:0;border-left:0;border-radius:0}}
2
2
  /*# sourceMappingURL=alerts.css.map */
package/dist/alerts.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["file:///home/runner/work/css/css/src/alerts/index.scss%23sass"],"names":[],"mappings":"AAsgBA,OAAA,iBACE,CAAA,iBAAA,CAAA,kBAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,oBAAA,eAAA,CAAA,gBAAA,iBAAA,CAAA,gBAAA,kBAAA,CAAA,aAAA,WAAA,CAAA,YAAA,CAAA,YAAA,CAAA,iBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,QAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,mBAAA,UAAA,CAAA,oBAAA,UAAA,CAAA,sBAAA,cAAA,CAAA,cAAA,WAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,2BAAA,gBAAA,CAAA,2BAAA,CAAA,mCAAA,aAAA,CAAA,OAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,gBAAA,4BAAA,CAAA,YAAA,6BAAA,CAAA,8FAAA,CAAA,yCAAA,CAAA,qBAAA,+BAAA,CAAA,aAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,sBAAA,4BAAA,CAAA,eAAA,6BAAA,CAAA,0FAAA,CAAA,uCAAA,CAAA,wBAAA,6BAAA,CAAA,YAAA,eAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,cAAA,cAAA,CAAA,KAAA,CAAA,UAAA,CAAA,UAAA,CAAA,YAAA,CAAA,cAAA,CAAA,aAAA,CAAA,eAAA,CAAA,0BAAA,4CAAA,CAAA,SAAA,YAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,8CAAA","file":"alerts.css"}
1
+ {"version":3,"sources":["file:///home/runner/work/css/css/src/alerts/index.scss%23sass"],"names":[],"mappings":"AAsgBA,OAAA,iBACE,CAAA,iBAAA,CAAA,kBAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,oBAAA,eAAA,CAAA,gBAAA,iBAAA,CAAA,gBAAA,kBAAA,CAAA,aAAA,WAAA,CAAA,YAAA,CAAA,YAAA,CAAA,iBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,QAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,mBAAA,UAAA,CAAA,oBAAA,UAAA,CAAA,sBAAA,cAAA,CAAA,cAAA,WAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,2BAAA,gBAAA,CAAA,2BAAA,CAAA,mCAAA,aAAA,CAAA,OAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,gBAAA,4BAAA,CAAA,YAAA,6BAAA,CAAA,8FAAA,CAAA,yCAAA,CAAA,qBAAA,+BAAA,CAAA,aAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,sBAAA,4BAAA,CAAA,eAAA,6BAAA,CAAA,0FAAA,CAAA,uCAAA,CAAA,wBAAA,6BAAA,CAAA,YAAA,eAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,cAAA,cAAA,CAAA,KAAA,CAAA,UAAA,CAAA,UAAA,CAAA,YAAA,CAAA,cAAA,CAAA,aAAA,CAAA,eAAA,CAAA,0BAAA,4CAAA,CAAA,SAAA,YAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,8CAAA,CAAA,QAAA,iBAAA,CAAA,YAAA,CAAA,WAAA,CAAA,6BAAA,CAAA,wFAAA,CAAA,0CAAA,CAAA,iBAAA,CAAA,qBAAA,CAAA,kDAAA,CAAA,6DAAA,CAAA,8BAAA,CAAA,4BAAA,QAAA,mEAAA,CAAA,iDAAA,CAAA,0CAAA,CAAA,wBAAA,kBAAA,CAAA,CAAA,uBAAA,YAAA,CAAA,iCAAA,CAAA,gBAAA,CAAA,gBAAA,CAAA,gCAAA,0BAAA,CAAA,yBAAA,iBAAA,CAAA,wBAAA,iCAAA,CAAA,iBAAA,CAAA,iBAAA,CAAA,qCAAA,eAAA,CAAA,uDAAA,eAAA,CAAA,eAAA,CAAA,wBAAA,iBAAA,CAAA,mCAAA,cAAA,CAAA,sBAAA,eAAA,CAAA,gBAAA,CAAA,mCAAA,+DAAA,CAAA,gCAAA,4BAAA,CAAA,wBAAA,6BAAA,CAAA,8FAAA,CAAA,yCAAA,CAAA,gDAAA,+BAAA,CAAA,sBAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,8CAAA,4BAAA,CAAA,wBAAA,6BAAA,CAAA,0FAAA,CAAA,uCAAA,CAAA,gDAAA,6BAAA,CAAA,qBAAA,eAAA,CAAA,cAAA,CAAA,aAAA,CAAA,eAAA,CAAA,4BAAA,gCAAA,eAAA,CAAA,cAAA,CAAA,aAAA,CAAA,eAAA,CAAA","file":"alerts.css"}