diff options
Diffstat (limited to 'scss/sidebar.scss')
| -rw-r--r-- | scss/sidebar.scss | 158 |
1 files changed, 107 insertions, 51 deletions
diff --git a/scss/sidebar.scss b/scss/sidebar.scss index 84d1d61..249f516 100644 --- a/scss/sidebar.scss +++ b/scss/sidebar.scss @@ -30,6 +30,49 @@ margin: 0 lib.s(10); } + .header-bar { + margin-bottom: lib.s(10); + + @include lib.spacing; + + & > :not(button) { + font-weight: bold; + font-size: lib.s(16); + } + + & > button { + @include lib.element-decel; + @include lib.rounded(10); + + padding: lib.s(3) lib.s(8); + + &:hover, + &:focus { + color: scheme.$subtext0; + } + + &:active { + color: scheme.$overlay2; + } + + &.enabled { + $-base: color.change(scheme.$base, $alpha: 1); + + background-color: scheme.$primary; + color: $-base; + + &:hover, + &:focus { + background-color: color.mix(scheme.$primary, $-base, 80%); + } + + &:active { + background-color: color.mix(scheme.$primary, $-base, 70%); + } + } + } + } + .user { @include lib.spacing(15); @@ -79,6 +122,7 @@ font-size: lib.s(64); font-weight: bold; background-color: scheme.$base; + color: scheme.$subtext0; } .details { @@ -133,86 +177,98 @@ } } - .notifications { - .header-bar { - margin-bottom: lib.s(10); - margin-right: lib.s(-10); + .notification { + .wrapper { + padding-bottom: lib.s(10); + } + + .inner { + @include lib.rounded(20); + + background-color: color.change(scheme.$surface1, $alpha: 0.4); + + &.low { + @include notification(if(scheme.$light, scheme.$surface1, scheme.$overlay0)); + } + + &.normal { + @include lib.border(scheme.$primary, if(scheme.$light, 0.5, 0.3)); + @include notification(scheme.$primary); + } + + &.critical { + @include lib.border(scheme.$error, 0.8); + @include notification(scheme.$error); + } + } + .actions { @include lib.spacing; & > button { - @include lib.element-decel; @include lib.rounded(10); + @include lib.element-decel; - padding: lib.s(3) lib.s(8); + padding: lib.s(5) lib.s(10); + background-color: color.change(scheme.$surface1, $alpha: 0.5); &:hover, &:focus { - color: scheme.$subtext0; + background-color: color.change(scheme.$surface2, $alpha: 0.5); } &:active { - color: scheme.$overlay2; + background-color: color.change(scheme.$overlay0, $alpha: 0.5); } + } + } + } - &.enabled { - background-color: scheme.$primary; - color: scheme.$base; + .upcoming { + .list { + min-height: lib.s(300); + } - &:hover, - &:focus { - background-color: color.mix(scheme.$primary, scheme.$base, 80%); - } + .day { + @include lib.spacing($vertical: true); - &:active { - background-color: color.mix(scheme.$primary, scheme.$base, 70%); - } - } + &:not(:first-child) { + margin-top: lib.s(20); } - } - .notification { - .wrapper { - padding-bottom: lib.s(10); + .date { + margin-left: lib.s(10); } - .inner { + .sublabel { + font-size: lib.s(14); + color: scheme.$subtext0; + } + + .events { @include lib.rounded(20); background-color: color.change(scheme.$surface1, $alpha: 0.4); + padding: lib.s(10) lib.s(15); - &.low { - @include notification(if(scheme.$light, scheme.$surface1, scheme.$overlay0)); - } - - &.normal { - @include lib.border(scheme.$primary, if(scheme.$light, 0.5, 0.3)); - @include notification(scheme.$primary); - } - - &.critical { - @include lib.border(scheme.$error, 0.8); - @include notification(scheme.$error); - } + @include lib.spacing(10, true); } - .actions { - @include lib.spacing; - - & > button { - @include lib.rounded(10); - @include lib.element-decel; + .event { + @include lib.spacing(8); + } - padding: lib.s(5) lib.s(10); - background-color: color.change(scheme.$surface1, $alpha: 0.5); + .calendar-indicator { + @include lib.rounded(5); - &:hover, - &:focus { - background-color: color.change(scheme.$surface2, $alpha: 0.5); - } + min-width: lib.s(1); - &:active { - background-color: color.change(scheme.$overlay0, $alpha: 0.5); + $-colours: scheme.$red, scheme.$sapphire, scheme.$flamingo, scheme.$maroon, scheme.$pink, scheme.$sky, + scheme.$peach, scheme.$yellow, scheme.$green, scheme.$rosewater, scheme.$mauve, scheme.$teal, + scheme.$blue; + @for $i from 1 through length($-colours) { + &.c#{$i} { + background-color: nth($-colours, $i); } } } |