diff options
| -rw-r--r-- | examples/js/notifications/notifications/Notification.scss | 178 |
1 files changed, 89 insertions, 89 deletions
diff --git a/examples/js/notifications/notifications/Notification.scss b/examples/js/notifications/notifications/Notification.scss index c902939..a32f08b 100644 --- a/examples/js/notifications/notifications/Notification.scss +++ b/examples/js/notifications/notifications/Notification.scss @@ -1,7 +1,7 @@ @use "sass:string"; @function gtkalpha($c, $a) { - @return string.unquote("alpha(#{$c},#{$a})"); + @return string.unquote("alpha(#{$c},#{$a})"); } // https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss @@ -10,116 +10,116 @@ $bg-color: #{"@theme_bg_color"}; $error: red; window.NotificationPopups { - all: unset; + all: unset; } eventbox.Notification { - &:first-child>box { - margin-top: 1rem; - } - - &:last-child>box { - margin-bottom: 1rem; - } - - // eventboxes can not take margins so we style its inner box instead - >box { - min-width: 400px; - border-radius: 13px; - background-color: $bg-color; - margin: .5rem 1rem .5rem 1rem; - box-shadow: 2px 3px 8px 0 gtkalpha(black, .4); - border: 1pt solid gtkalpha($fg-color, .03); - } - - &.critical>box { - border: 1pt solid gtkalpha($error, .4); - - .header { - - .app-name { - color: gtkalpha($error, .8); - - } - - .app-icon { - color: gtkalpha($error, .6); - } + &:first-child>box { + margin-top: 1rem; } - } - .header { - padding: .5rem; - color: gtkalpha($fg-color, 0.5); - - .app-icon { - margin: 0 .4rem; + &:last-child>box { + margin-bottom: 1rem; } - .app-name { - margin-right: .3rem; - font-weight: bold; - - &:first-child { - margin-left: .4rem; - } + // eventboxes can not take margins so we style its inner box instead + >box { + min-width: 400px; + border-radius: 13px; + background-color: $bg-color; + margin: .5rem 1rem .5rem 1rem; + box-shadow: 2px 3px 8px 0 gtkalpha(black, .4); + border: 1pt solid gtkalpha($fg-color, .03); } - .time { - margin: 0 .4rem; - } + &.critical>box { + border: 1pt solid gtkalpha($error, .4); - button { - padding: .2rem; - min-width: 0; - min-height: 0; - } - } + .header { - separator { - margin: 0 .4rem; - background-color: gtkalpha($fg-color, .1); - } + .app-name { + color: gtkalpha($error, .8); - .content { - margin: 1rem; - margin-top: .5rem; + } - .summary { - font-size: 1.2em; - color: $fg-color; + .app-icon { + color: gtkalpha($error, .6); + } + } + } + + .header { + padding: .5rem; + color: gtkalpha($fg-color, 0.5); + + .app-icon { + margin: 0 .4rem; + } + + .app-name { + margin-right: .3rem; + font-weight: bold; + + &:first-child { + margin-left: .4rem; + } + } + + .time { + margin: 0 .4rem; + } + + button { + padding: .2rem; + min-width: 0; + min-height: 0; + } } - .body { - color: gtkalpha($fg-color, 0.8); + separator { + margin: 0 .4rem; + background-color: gtkalpha($fg-color, .1); } - .image { - border: 1px solid gtkalpha($fg-color, .02); - margin-right: .5rem; - border-radius: 9px; - min-width: 100px; - min-height: 100px; - background-size: cover; - background-position: center; + .content { + margin: 1rem; + margin-top: .5rem; + + .summary { + font-size: 1.2em; + color: $fg-color; + } + + .body { + color: gtkalpha($fg-color, 0.8); + } + + .image { + border: 1px solid gtkalpha($fg-color, .02); + margin-right: .5rem; + border-radius: 9px; + min-width: 100px; + min-height: 100px; + background-size: cover; + background-position: center; + } } - } - .actions { - margin: 1rem; - margin-top: 0; + .actions { + margin: 1rem; + margin-top: 0; - button { - margin: 0 .3rem; + button { + margin: 0 .3rem; - &:first-child { - margin-left: 0; - } + &:first-child { + margin-left: 0; + } - &:last-child { - margin-right: 0; - } + &:last-child { + margin-right: 0; + } + } } - } } |