diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/launcher.scss | 162 |
1 files changed, 134 insertions, 28 deletions
diff --git a/scss/launcher.scss b/scss/launcher.scss index 139f3b8..5ca8ee0 100644 --- a/scss/launcher.scss +++ b/scss/launcher.scss @@ -13,29 +13,53 @@ background-color: color.change($colour, $alpha: 0.7); } - .search-bar { - .mode { - @include lib.border($colour, $width: 2); + .result:focus { + color: $colour; + + .sublabel { + color: color.mix(scheme.$subtext0, $colour, 60%); } + } - .entry { + &.lines { + .search-bar { + .mode { + @include lib.border($colour, $width: 2); + } + + .entry { + border-bottom: lib.s(2) solid $colour; + } + } + + .mode-switcher .mode { + &.selected { + border-top: lib.s(2) solid $colour; + } + + &:hover, + &:focus { + color: $colour; + } + + &:active { + color: color.mix($colour, scheme.$base, 80%); + } + } + + .result:focus { border-bottom: lib.s(2) solid $colour; } } - .mode-switcher .mode { - &.selected { - border-top: lib.s(2) solid $colour; + &.round { + .search-bar .mode { + background-color: $colour; } - &:hover, - &:focus { + .mode-switcher .mode.selected { color: $colour; } - - &:active { - color: color.mix($colour, scheme.$base, 80%); - } } } } @@ -65,14 +89,19 @@ @include lib.rounded(5); @include lib.element-decel; - padding: lib.s(5); + padding: lib.s(5) lib.s(10); + + @include lib.spacing(3); + + .icon { + font-size: lib.s(20); + } } } .mode-switcher .mode { @include lib.element-decel; - border-top: lib.s(2) solid transparent; padding-top: lib.s(10); .icon { @@ -87,7 +116,6 @@ .result { @include lib.element-decel; - border-bottom: lib.s(2) solid transparent; padding-left: lib.s(10); .icon { @@ -99,6 +127,8 @@ } .sublabel { + @include lib.element-decel; + color: scheme.$subtext0; font-size: lib.s(14); } @@ -115,17 +145,8 @@ background-color: scheme.$surface0; } - &:focus { - border-bottom: lib.s(2) solid scheme.$red; - color: scheme.$red; - - .sublabel { - color: color.mix(scheme.$red, scheme.$base, 70%); - } - } - &:active { - background-color: scheme.$surface1; + background-color: color.mix(scheme.$surface0, scheme.$surface1, 70%); } } @@ -140,6 +161,8 @@ } .swatches { + margin-bottom: lib.s(5); + @include lib.spacing(3); } @@ -168,8 +191,6 @@ } .wallpaper { - margin: lib.s(3) 0; - .thumbnail { background-size: cover; background-position: center; @@ -211,4 +232,89 @@ min-height: lib.s(160); } } + + &.lines { + .mode-switcher .mode { + border-top: lib.s(2) solid transparent; + } + + .result { + border-bottom: lib.s(2) solid transparent; + } + } + + &.round { + .search-bar { + .mode { + @include lib.rounded(10); + + color: color.change(scheme.$base, $alpha: 1); + + .icon { + color: color.change(scheme.$base, $alpha: 1); + } + } + + .entry { + @include lib.rounded(10); + + padding: lib.s(5) lib.s(10); + background-color: color.mix(scheme.$base, scheme.$surface0, 30%); + } + } + + .mode-switcher { + padding-top: lib.s(10); + + @include lib.spacing(10); + + .mode { + @include lib.rounded(10); + + padding: lib.s(5); + background-color: color.mix(scheme.$base, scheme.$surface0, 50%); + + &:not(.selected) .icon { + color: scheme.$text; + } + + &:hover, + &:focus { + background-color: scheme.$surface0; + } + + &:active { + background-color: color.mix(scheme.$surface0, scheme.$surface1, 70%); + } + } + } + + .result { + @include lib.rounded(10); + + padding-right: lib.s(10); + margin-bottom: lib.s(5); + margin-right: lib.s(5); + + &:focus { + background-color: scheme.$surface0; + } + } + + .math .preview .result { + @include lib.rounded(20); + + background-color: scheme.$surface0; + padding: lib.s(5) lib.s(10); + } + + .wallpaper-container { + padding-right: 0; + + .wallpaper:not(.compact) { + padding-top: lib.s(8); + padding-bottom: lib.s(3); + } + } + } } |