diff options
Diffstat (limited to 'scss/launcher.scss')
| -rw-r--r-- | scss/launcher.scss | 332 |
1 files changed, 0 insertions, 332 deletions
diff --git a/scss/launcher.scss b/scss/launcher.scss deleted file mode 100644 index ff2c422..0000000 --- a/scss/launcher.scss +++ /dev/null @@ -1,332 +0,0 @@ -@use "sass:color"; -@use "scheme"; -@use "lib"; -@use "font"; - -@mixin launcher($mode, $colour) { - &.#{$mode} { - @include lib.border($colour, 0.7, 2); - - label.icon { - color: $colour; - } - - .separator { - background-color: color.change($colour, $alpha: 0.7); - } - - .result:focus { - color: $colour; - - .sublabel { - color: color.mix(scheme.$subtext0, $colour, 60%); - } - } - - &.lines { - .search-bar { - .mode { - @include lib.border($colour, $width: 2, $force: true); - } - - .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; - } - } - - &.round { - .search-bar .mode { - background-color: $colour; - } - - .mode-switcher .mode.selected { - color: $colour; - } - } - } -} - -.launcher { - @include lib.rounded(10); - @include lib.element-decel; - @include lib.shadow; - @include font.mono; - - background-color: scheme.$base; - color: scheme.$text; - padding: lib.s(14); - font-size: lib.s(16); - min-width: lib.s(700); - min-height: lib.s(420); - - @include launcher(apps, scheme.$primary); - @include launcher(files, scheme.$secondary); - @include launcher(math, scheme.$tertiary); - - .search-bar { - margin-bottom: lib.s(15); - - @include lib.spacing(10); - - .mode { - @include lib.rounded(5); - @include lib.element-decel; - - padding: lib.s(5) lib.s(10); - - @include lib.spacing(3); - - .icon { - font-size: lib.s(20); - } - } - } - - .mode-switcher .mode { - @include lib.element-decel; - - padding-top: lib.s(10); - - .icon { - font-size: lib.s(24); - } - - & > box { - @include lib.spacing(10); - } - } - - .result { - @include lib.element-decel; - - padding-left: lib.s(10); - - .icon { - font-size: lib.s(32); - } - - .has-sublabel { - padding: lib.s(3) 0; - } - - .sublabel { - @include lib.element-decel; - - color: scheme.$subtext0; - font-size: lib.s(14); - } - - & > box { - @include lib.spacing(10); - } - - &.italic { - font-style: italic; - } - - &:hover { - background-color: scheme.$surface0; - } - - &:active { - background-color: color.mix(scheme.$surface0, scheme.$surface1, 70%); - } - } - - .math { - .preview > * { - margin-bottom: lib.s(10); - } - - .result { - @include lib.spacing(10); - } - } - - .swatches { - margin-bottom: lib.s(5); - - @include lib.spacing(3); - } - - .swatch { - @include lib.rounded(100); - - min-width: lib.s(16); - min-height: lib.s(16); - - &.big { - min-height: lib.s(32); - - &.left { - @include lib.border(scheme.$overlay0, 0.3, $force: true); - - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - &.right { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - } - - .wallpaper { - .thumbnail { - background-size: cover; - background-position: center; - } - - &.compact .thumbnail { - @include lib.rounded(100); - - min-width: lib.s(32); - min-height: lib.s(32); - } - - &:not(.compact) { - @include lib.spacing(3, true); - - .thumbnail { - @include lib.rounded(10); - - & > * { - background-size: cover; - background-position: center; - - &:first-child { - @include lib.rounded(10, $tr: 0, $br: 0); - } - - &:last-child { - @include lib.rounded(10, $tl: 0, $bl: 0); - } - } - } - } - - &.medium .thumbnail { - min-height: lib.s(96); - } - - &.large .thumbnail { - min-height: lib.s(160); - } - } - - &.lines { - .mode-switcher .mode { - border-top: lib.s(2) solid transparent; - } - - .result { - border-bottom: lib.s(2) solid transparent; - } - - .wallpaper { - padding-top: lib.s(5); - - &.compact { - padding-top: lib.s(3); - padding-bottom: lib.s(3); - } - } - } - - &.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); - } - } - } -} |