super-productivity/src/_variables.scss
2018-11-23 00:14:13 +01:00

67 lines
1.7 KiB
SCSS

@import 'styles/config/shadows';
$s: 8px;
$card-border-radius: 4px;
// COLORS
// ------
$dark-theme-bg-darker: rgb(39, 39, 39);
$dark-theme-bg-lighter: rgb(70, 70, 70);
$dark-theme-bg: rgb(48, 48, 48);
$light-theme-bg: rgb(244, 244, 244);
$dark-theme-text-color: #bdbdbd;
$light-theme-text-color: #333333;
$dark-green: #30412d;
$green: #4fa758;
$light-green: #a9ed9f;
$red: #e15d63;
$red-danger: #e11826;
$yellow: #fff400; // for sun
$c-accent: #ff4081;
// LAYOUT
// ------
$layout-xs: 600px;
$layout-sm: 960px;
$layout-md: 1280px;
$layout-lg: 1920px;
$component-max-width: 900px;
$main-header-height: $s*7;
// COMPONENTS
// ----------
$standard-note-ng-light: #ffffff;
$standard-note-fg-light: #000000;
$standard-note-bg-dark: $dark-theme-bg-darker;
$standard-note-fg-dark: #eeeeee;
// ANIMATIONS
// ----------
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-animation/_variables.scss
$ani-standard-timing: cubic-bezier(.4, 0, .2, 1) !default;
$ani-enter-timing: cubic-bezier(0, 0, .2, 1) !default;
$ani-leave-timing: cubic-bezier(.4, 0, 1, 1) !default;
$ani-sharp-timing: cubic-bezier(.4, 0, .6, 1) !default;
$ease-in-out-quint: cubic-bezier(.38, .04, .35, .96);
$transition-duration-s: 150ms;
$transition-duration-m: 225ms;
$transition-duration-l: 375ms;
$transition-duration--enter: $transition-duration-m;
$transition-duration--leave: 195ms;
$transition-enter: $transition-duration--enter $ani-enter-timing;
$transition-leave: $transition-duration--leave $ani-leave-timing;
$transition-standard: $transition-duration-m $ani-standard-timing;
$transition-fast: $transition-duration-s $ani-standard-timing;
$page-transition-duration: $transition-duration-m;
@import 'styles/mixins/mixins';
@import 'styles/extends/extends';