1
0
mirror of https://github.com/sharkdp/bat.git synced 2025-09-02 03:12:25 +01:00

Replace SCSS example with unlicensed one

This commit is contained in:
Ethan P
2020-10-05 18:59:14 -07:00
committed by David Peter
parent 83d96e2bbb
commit 894d3f1722
3 changed files with 156 additions and 55 deletions

View File

@@ -1,19 +1,82 @@
@mixin button-base() {
 @include typography(button);
 @include ripple-surface;
 @include ripple-radius-bounded;
@import 'fonts';
 display: inline-flex;
 position: relative;
 height: $button-height;
 border: none;
 vertical-align: middle;
$theme_dark: (
 "background-color": null,
);
$theme_main: (
 "text-size": 3em,
 "text-color": black,
 "text-shadow": #36ad 0px 0px 3px,
 "card-background": #d6f,
 "card-shadow": #11121212 0px 0px 2px 1px,
 "card-padding": 1rem,
 "card-margin": 0.5in,
 "image-width": 600px,
 "image-height": 100vh,
 "background-color": #dedbef,
 "i-ran-out-of-placeholders-for-units": (1vw 100% 60pt),
);
 &:hover { cursor: pointer; }
$current_theme: $theme_main;
 &:disabled {
 color: $mdc-button-disabled-ink-color;
 cursor: default;
 pointer-events: none;
 }
}
@mixin themed() {
 $current_theme: $theme_main !global;
 @content;
 @media (prefers-color-scheme: dark) {
 $current_theme: $theme_dark !global;
 @content;
 }
 
 .#{"dark"} & {
 $current_theme: $theme_dark !global;
 @content;
 }
}
@function theme($variable) {
 @if map-has_key($current_theme, $variable) {
 @return map-get($current_theme, $variable);
 } @else {
 @error "Unknown theme variable: #{$variable}";
 }
}
body {
 @include themed {
 background-color: theme('background-color');
 background-image: url("https://github.com/sharkdp/bat/raw/master/doc/logo-header.svg");
 }
 
 header[data-selectable="false"] {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: /* CSS comment */ none;
 cursor: default !important; // SCSS comment
 }
 
 > div {
 border: #04f 1px solid;
 
 &::after {
 content: 'Pseudo';
 color: #2F5F7F;
 box-sizing: border-box;
 }
 }
}
@keyframes rotate {
 0% {
 transform: rotate(0deg);
 }
 50% {
 transform: rotate(180deg)}
 100% {transform: rotate(0rad);}
}
@font-face {
 font-family: 'Example Font';
 src: url(example.ttf) format('ttf');
 src: local('Comic Sans MS');
}