Commit e6b76d1e authored by Vasily Belolapotkov's avatar Vasily Belolapotkov

refactor: reorganize styles

parent 67541ec4
import './chart.scss';
import { makeHtmlElement } from './ui-utils';
import { makeChartPreview } from './chart-preview';
import {
......
import './styles/index.scss';
import chartsData from './data/chart_data.json';
import { makeChart } from './chart';
import { IChartData, ChartType } from './chart/chart-state';
......
@import 'common';
body,
h1 {
font-family: Helvetica, sans-serif;
margin: 0;
}
body {
color: $fontMainLight;
background-color: $bodyBgLight;
}
body.dark {
color: $fontMainDark;
background-color: $bodyBgDark;
}
a {
text-decoration: none;
@include linkColor($linkColor);
}
body.dark a {
@include linkColor($darkLinkColor);
}
#root {
max-width: 600px;
padding: 10px 10px 75px;
position: relative;
margin: 0 auto;
@include tablet {
padding-bottom: 10px;
}
}
$bodyBgLight: #fff;
$bodyBgDark: rgb(36, 47, 61);
$grey: rgb(165, 175, 182);
$lightgrey: rgb(221, 234, 242);
$darkgrey: rgb(51, 64, 79);
$fontMainLight: rgb(67, 72, 75);
$fontMainDark: #fff;
$linkColor: rgb(41, 145, 225);
$darkLinkColor: rgb(62, 171, 241);
body,
h1 {
font-family: Helvetica, sans-serif;
margin: 0;
}
body {
color: $fontMainLight;
background-color: $bodyBgLight;
}
body.dark {
color: $fontMainDark;
background-color: $bodyBgDark;
}
@mixin linkColor($color) {
color: $color;
&:hover,
&:active,
&:focus {
color: darken($color, 15);
}
}
$tablet-width: 768px;
@mixin mobile {
@media (max-width: #{$tablet-width - 1}) {
@content;
}
}
@mixin tablet {
@media (min-width: #{$tablet-width}) {
@content;
}
}
a {
text-decoration: none;
@include linkColor($linkColor);
}
body.dark a {
@include linkColor($darkLinkColor);
}
#root {
max-width: 600px;
padding: 10px 10px 75px;
position: relative;
margin: 0 auto;
@include tablet {
padding-bottom: 10px;
}
}
.theme-switcher {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px 10px 40px;
background-color: $bodyBgLight;
z-index: 1;
text-align: center;
font-size: 1.25rem;
@include tablet {
position: absolute;
top: 10px;
right: 0;
bottom: auto;
left: auto;
padding: 15px 10px;
text-align: left;
font-size: 1rem;
}
}
body.dark .theme-switcher {
background-color: $bodyBgDark;
}
@import 'common';
.chart-container {
margin-top: 1rem;
......
$bodyBgLight: #fff;
$bodyBgDark: rgb(36, 47, 61);
$grey: rgb(165, 175, 182);
$lightgrey: rgb(221, 234, 242);
$darkgrey: rgb(51, 64, 79);
$fontMainLight: rgb(67, 72, 75);
$fontMainDark: #fff;
$linkColor: rgb(41, 145, 225);
$darkLinkColor: rgb(62, 171, 241);
$tablet-width: 768px;
@mixin linkColor($color) {
color: $color;
&:hover,
&:active,
&:focus {
color: darken($color, 15);
}
}
@mixin mobile {
@media (max-width: #{$tablet-width - 1}) {
@content;
}
}
@mixin tablet {
@media (min-width: #{$tablet-width}) {
@content;
}
}
@import 'app';
@import 'theme-switcher';
@import 'chart';
@import 'common';
.theme-switcher {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px 10px 40px;
background-color: $bodyBgLight;
z-index: 1;
text-align: center;
font-size: 1.25rem;
@include tablet {
position: absolute;
top: 10px;
right: 0;
bottom: auto;
left: auto;
padding: 15px 10px;
text-align: left;
font-size: 1rem;
}
}
body.dark .theme-switcher {
background-color: $bodyBgDark;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment