Exporting base styles

This commit is contained in:
Fabian 2019-07-05 12:12:26 +02:00
parent 68284de6bf
commit 9de113f12c
19 changed files with 114 additions and 81 deletions

View File

View File

@ -1,18 +1,7 @@
@import "./_vals.scss"; @import "./_vals.scss";
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
$background:false !default; $background:false !default;
$on-background:false !default; $on-background:false !default;
$primary: var(--primary) !default;
$on-primary: var(--on-primary) !default;
$secondary: var(--secondary) !default;
$on-secondary: var(--on-secondary) !default;
$error: var(--error) !default;
$on-error: var(--on-error) !default;
$button-color: #CCCCCC !default; $button-color: #CCCCCC !default;
@if $background==false or $on-background==false { @if $background==false or $on-background==false {
@ -24,26 +13,10 @@ $button-color: #CCCCCC !default;
--on-background: #{$on-background}; --on-background: #{$on-background};
} }
$default-font-size: 1rem;
.background-default { .background-default {
background: $background; background: $background;
} }
* {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: $default-font-size;
}
html,
body {
background: $background;
color: $on-background;
margin: 0;
min-height: 100vh;
min-width: 100vw;
}
@each $dp in $elevations { @each $dp in $elevations {
.elv-#{$dp} { .elv-#{$dp} {
@ -51,17 +24,6 @@ body {
} }
} }
.margin {
margin-bottom: 1.5rem;
}
.container {
box-sizing: content-box;
padding-left: 1rem;
padding-right: 1rem;
margin: 0 auto;
max-width: 50rem;
}
@function darken-brighten-color($color, $val) { @function darken-brighten-color($color, $val) {
@if (lightness($color) > 50) { @if (lightness($color) > 50) {
@ -73,9 +35,10 @@ body {
} }
} }
@import "./_btn.scss"; @import "./theme/_global.scss";
@import "./_modal.scss"; @import "./theme/_btn.scss";
@import "./_input.scss"; @import "./theme/_modal.scss";
@import "./_list.scss"; @import "./theme/_input.scss";
@import "./_header.scss"; @import "./theme/_list.scss";
@import "./_card.scss"; @import "./theme/_header.scss";
@import "./theme/_card.scss";

View File

@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
:root { :root {
// --primary: #1e88e5; // --primary: #1e88e5;
--primary: #196eb9; --primary: #196eb9;
@ -6,4 +8,22 @@
--secondary: #d8701b; --secondary: #d8701b;
--on-secondary: black; --on-secondary: black;
--error: rgb(255, 0, 0); --error: rgb(255, 0, 0);
} }
$default-font-size: 1rem;
$primary: var(--primary) !default;
$on-primary: var(--on-primary) !default;
$secondary: var(--secondary) !default;
$on-secondary: var(--on-secondary) !default;
$error: var(--error) !default;
$on-error: var(--on-error) !default;
@import "./base/_global.scss";
@import "./base/_btn.scss";
@import "./base/_modal.scss";
@import "./base/_input.scss";
@import "./base/_list.scss";
@import "./base/_header.scss";
@import "./base/_card.scss";

View File

@ -1,7 +1,5 @@
.btn { .btn {
position: relative; position: relative;
@include Elevation(1);
background: $button-color;
color: black; color: black;
border: 0; border: 0;
margin: .3rem; margin: .3rem;
@ -9,14 +7,6 @@
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
transition: .05s background-color linear; transition: .05s background-color linear;
&:hover {
background: darken($button-color, 5%);
}
&:active {
background: lighten($button-color, 5%);
}
} }
.btn-primary { .btn-primary {
@ -33,6 +23,7 @@
} }
.btn-secondary { .btn-secondary {
background: $secondary !important; background: $secondary !important;
color: $on-primary !important; color: $on-primary !important;
@ -47,8 +38,6 @@
} }
.fab { .fab {
@include Elevation(6);
background: $button-color;
border-radius: 50%; border-radius: 50%;
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;

3
src/base/_card.scss Normal file
View File

@ -0,0 +1,3 @@
.card {
padding: 1rem;
}

25
src/base/_global.scss Normal file
View File

@ -0,0 +1,25 @@
* {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: $default-font-size;
}
html,
body {
margin: 0;
min-height: 100vh;
min-width: 100vw;
}
.margin {
margin-bottom: 1.5rem;
}
.container {
box-sizing: content-box;
padding-left: 1rem;
padding-right: 1rem;
margin: 0 auto;
max-width: 50rem;
}

View File

@ -1,7 +1,6 @@
.header { .header {
@include Elevation(3); background: $primary !important;
background: $primary; color: $on-primary !important;
color: $on-primary;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

View File

@ -1,7 +1,5 @@
.inp { .inp {
// background: $background;
background: unset; background: unset;
color: $on-background;
border: 1px grey solid; border: 1px grey solid;
padding: 0 .5rem; padding: 0 .5rem;
height: 2rem; height: 2rem;
@ -11,10 +9,6 @@
&:focus { &:focus {
border-color: $primary; border-color: $primary;
} }
// &disabled {
// background: darken-brighten-color($background, 10%)
// }
} }
textarea.inp { textarea.inp {

View File

@ -9,17 +9,13 @@
.list-divider { .list-divider {
li:nth-child(n+2) { li:nth-child(n+2) {
// margin-top: 10px;
// padding-top: 10px;
border-top: 1px solid rgb(128, 128, 128); border-top: 1px solid rgb(128, 128, 128);
} }
} }
// .list-clickable {
// // li:hover {
.list-clickable { // // background: darken-brighten-color($background, 5%);
li:hover { // // }
background: darken-brighten-color($background, 5%); // }
}
}

View File

@ -1,7 +1,4 @@
.modal { .modal {
background: $background;
// background: rgba(0, 0, 0, 0.04);
@include Elevation(24);
padding: 1rem; padding: 1rem;
margin: auto; margin: auto;

View File

@ -9,4 +9,4 @@ $disabled-brightness: 1.1;
z-index: $dp; z-index: $dp;
} }
@import "./maketheme.scss"; @import "./_maketheme.scss";

View File

@ -54,4 +54,4 @@ $disabled-brightness: .9;
z-index: $dp; z-index: $dp;
} }
@import "./maketheme.scss"; @import "./_maketheme.scss";

17
src/theme/_btn.scss Normal file
View File

@ -0,0 +1,17 @@
.btn {
@include Elevation(1);
background: $button-color;
&:hover {
background: darken($button-color, 5%);
}
&:active {
background: lighten($button-color, 5%);
}
}
.fab {
@include Elevation(8);
background: $button-color;
}

View File

@ -1,6 +1,5 @@
.card { .card {
@include Elevation(3); @include Elevation(3);
padding: 1rem;
} }
.card-elevated { .card-elevated {

5
src/theme/_global.scss Normal file
View File

@ -0,0 +1,5 @@
html,
body {
background: $background;
color: $on-background;
}

3
src/theme/_header.scss Normal file
View File

@ -0,0 +1,3 @@
.header {
@include Elevation(3);
}

8
src/theme/_input.scss Normal file
View File

@ -0,0 +1,8 @@
.inp {
color: $on-background;
option {
background: $background;
color: $on-background;
}
}

5
src/theme/_list.scss Normal file
View File

@ -0,0 +1,5 @@
.list-clickable {
li:hover {
background: darken-brighten-color($background, 5%);
}
}

10
src/theme/_modal.scss Normal file
View File

@ -0,0 +1,10 @@
.modal {
background: $background;
@include Elevation(24);
.modal-action {
button {
@extend .btn;
}
}
}