app/components/yattho/alpha/banner.css in yattho_view_components-0.0.1 vs app/components/yattho/alpha/banner.css in yattho_view_components-0.1.1
- old
+ new
@@ -1,131 +2 @@
-/* Banner alert */
-
-.Banner {
- position: relative;
- display: grid;
- padding: var(--base-size-8, 8px);
- color: var(--color-fg-default);
- background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
- border: var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);
- border-radius: var(--yattho-borderRadius-medium, 6px);
- 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, 8px) 0 0 var(--base-size-8, 8px);
- }
- }
-
-/* Elements */
-
-.Banner .Banner-visual {
- display: grid;
- padding: var(--base-size-6, 6px) var(--base-size-8, 8px);
- grid-area: visual;
- align-self: start;
- }
-
-.Banner .Banner-visual > .octicon {
- margin-block: calc(var(--base-size-4, 4px) / 2);
- }
-
-.Banner .Banner-visual > * {
- align-self: center;
- }
-
-.Banner .Banner-message {
- padding: var(--base-size-6, 6px) var(--base-size-8, 8px);
- 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(--yattho-controlStack-medium-gap-condensed, 8px);
- }
-
-.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);
- }
-
-/* Full-width */
-
-.Banner.Banner--full {
- margin-top: calc(var(--yattho-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(--yattho-borderWidth-thin, max(1px, 0.0625rem)) * -1);
- border-right: 0;
- border-left: 0;
- border-radius: 0;
- }
- }
+.Banner{background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border:var(--yattho-borderWidth-thin,max(1px,.0625rem)) solid var(--color-accent-muted);border-radius:var(--yattho-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;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;padding:var(--base-size-8,8px);position:relative}@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,8px) 0 0 var(--base-size-8,8px)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.Banner .Banner-visual>.octicon{margin-block:calc(var(--base-size-4, 4px)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold,600);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--yattho-controlStack-medium-gap-condensed,8px)}.Banner .Banner-visual .octicon{color:var(--color-accent-fg)}.Banner.Banner--warning{background-image:linear-gradient(var(--color-attention-subtle),var(--color-attention-subtle));border-color:var(--color-attention-muted);color:var(--color-fg-default)}.Banner.Banner--warning .Banner-visual .octicon{color:var(--color-attention-fg)}.Banner.Banner--error{background-image:linear-gradient(var(--color-danger-subtle),var(--color-danger-subtle));border-color:var(--color-danger-muted);color:var(--color-fg-default)}.Banner.Banner--error .Banner-visual .octicon{color:var(--color-danger-fg)}.Banner.Banner--success{background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));border-color:var(--color-success-muted);color:var(--color-fg-default)}.Banner.Banner--success .Banner-visual .octicon{color:var(--color-success-fg)}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--yattho-borderWidth-thin, max(1px, .0625rem))*-1)}@media (max-width:767.98px){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--yattho-borderWidth-thin, max(1px, .0625rem))*-1)}}
\ No newline at end of file