diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_lib.scss | 55 | ||||
| -rw-r--r-- | scss/notifications.scss | 49 | ||||
| -rw-r--r-- | scss/updates.scss | 43 |
3 files changed, 61 insertions, 86 deletions
diff --git a/scss/_lib.scss b/scss/_lib.scss index d2ad3d0..63bf618 100644 --- a/scss/_lib.scss +++ b/scss/_lib.scss @@ -1,5 +1,6 @@ @use "sass:color"; @use "scheme"; +@use "font"; $scale: 0.068rem; @function s($value: 1) { @@ -42,3 +43,57 @@ $scale: 0.068rem; @mixin ease-in-out { transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1); } + +@mixin popdown-window($colour) { + @include rounded(8); + @include border($colour, 0.4, 2); + @include shadow; + @include font.mono; + + background-color: scheme.$base; + color: $colour; + padding: s(10) s(12); + font-size: s(14); + + .header { + @include spacing(8); + + padding: 0 s(5); + margin-bottom: s(8); + font-size: s(15); + + button { + @include rounded(5); + @include element-decel; + + padding: s(3) s(8); + + &:hover, + &:focus { + background-color: scheme.$surface0; + } + + &:active { + background-color: scheme.$surface1; + } + + &.enabled { + background-color: $colour; + color: scheme.$base; + + &:hover, + &:focus { + background-color: color.mix($colour, scheme.$base, 80%); + } + + &:active { + background-color: color.mix($colour, scheme.$base, 70%); + } + } + } + } + + .icon { + font-size: s(32); + } +} diff --git a/scss/notifications.scss b/scss/notifications.scss index f9cb7ce..e955a4c 100644 --- a/scss/notifications.scss +++ b/scss/notifications.scss @@ -14,57 +14,10 @@ } .notifications { - @include lib.rounded(8); - @include lib.border(scheme.$mauve, 0.4, 2); - @include lib.shadow; - @include font.mono; + @include lib.popdown-window(scheme.$mauve); min-width: lib.s(400); min-height: lib.s(600); - background-color: scheme.$base; - color: scheme.$mauve; - padding: lib.s(10) lib.s(12); - - .header { - @include lib.spacing(8); - - padding: 0 lib.s(5); - margin-bottom: lib.s(8); - - button { - @include lib.rounded(5); - @include lib.element-decel; - - padding: lib.s(3) lib.s(8); - - &:hover, - &:focus { - background-color: scheme.$surface0; - } - - &:active { - background-color: scheme.$surface1; - } - - &.enabled { - background-color: scheme.$mauve; - color: scheme.$base; - - &:hover, - &:focus { - background-color: color.mix(scheme.$mauve, scheme.$base, 80%); - } - - &:active { - background-color: color.mix(scheme.$mauve, scheme.$base, 70%); - } - } - } - } - - .icon { - font-size: lib.s(32); - } .notification { .wrapper { diff --git a/scss/updates.scss b/scss/updates.scss index 11f9a3e..12da977 100644 --- a/scss/updates.scss +++ b/scss/updates.scss @@ -3,60 +3,27 @@ @use "lib"; @use "font"; +$accent: scheme.$blue; + .updates { - @include lib.rounded(8); - @include lib.border(scheme.$blue, 0.4, 2); - @include lib.shadow; - @include font.mono; + @include lib.popdown-window($accent); min-width: lib.s(600); min-height: lib.s(400); - background-color: scheme.$base; - color: scheme.$blue; - padding: lib.s(10) lib.s(12); - font-size: lib.s(14); .wrapper { @include lib.element-decel; &:hover, &:focus { - color: color.mix(scheme.$blue, scheme.$base, 80%); + color: color.mix($accent, scheme.$base, 80%); } &:active { - color: color.mix(scheme.$blue, scheme.$base, 60%); + color: color.mix($accent, scheme.$base, 60%); } } - .header { - @include lib.spacing(8); - - padding: 0 lib.s(5); - margin-bottom: lib.s(8); - font-size: lib.s(15); - - button { - @include lib.rounded(5); - @include lib.element-decel; - - padding: lib.s(3) lib.s(8); - - &:hover, - &:focus { - background-color: scheme.$surface0; - } - - &:active { - background-color: scheme.$surface1; - } - } - } - - .icon { - font-size: lib.s(32); - } - .repos { @include lib.spacing($vertical: true); |