evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: moved all styles in .css files except for tables.scss

Browse Source
This commit is contained in:
Roberto Tonino 2020-11-10 20:14:03 +01:00
parent b2cee2bf3c
commit 333af201e0
10 changed files with 69 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

5
src/app.js
View File

@ -8,13 +8,16 @@ window.vol = {
import '@/styles/vendor/material-icons.css'
import '@/styles/vendor/OpenSans.css'
import '@/styles/scss/style.scss'
import '@/styles/css/tailwind.css'
import '@/styles/css/normalize.css'
import '@/styles/css/base.css'
import '@/styles/css/components.css'
import '@/styles/css/helpers.css'
import '@/styles/css/typography.css'
import '@/styles/scss/tables.scss'
import App from '@/App.vue'
import i18n from '@/plugins/i18n'
import router from '@/router'

47
src/styles/css/base.css
View File

@ -1,3 +1,50 @@
:root {
font-size: 16px;
--main-scroll: theme('colors.grayscale.300');
--panels-scroll: hsl(180, 2%, 17%);
--toast-background: hsla(240, 12%, 16%, 0.85);
--toast-secondary: hsla(240, 12%, 16%, 0.15);
--toast-text: hsla(0, 0%, 100%, 0.85);
--primary-color: hsl(210, 100%, 52%); /* will remove variable */
--primary-text: theme('colors.grayscale.870'); /* will remove variable */
--secondary-color: hsl(46, 100%, 57%); /* will remove variable */
}
:root[data-theme='light'] {
--main-background: theme('colors.white');
--secondary-background: theme('colors.grayscale.930');
--foreground: theme('colors.grayscale.200');
--panels-background: hsl(216, 4%, 78%);
--table-bg: theme('colors.white');
--table-zebra: theme('colors.grayscale.900');
--table-highlight: theme('colors.grayscale.840');
}
:root[data-theme='dark'] {
--main-background: hsl(240, 10%, 8%);
--secondary-background: hsl(240, 12%, 16%); /* e.g. search bar bg */
--foreground: theme('colors.grayscale.930'); /* primary text + icons in main + search */
--panels-background: hsl(240, 15%, 12%); /* panel left + right bg */
--table-bg: hsl(240, 10%, 8%); /* e.g. results table bg 1st row */
--table-zebra: hsl(240, 15%, 11%); /* e.g. results table bg 2nd alternate */
--table-highlight: hsl(240, 10%, 22%); /* e.g. hover bg color on table selection */
}
:root[data-theme='purple'] {
--main-background: hsl(261, 74%, 6%);
--secondary-background: hsl(257, 61%, 10%);
--foreground: theme('colors.grayscale.930');
--panels-background: hsl(257, 70%, 9%);
--table-bg: hsl(261, 74%, 6%);
--table-zebra: hsl(257, 61%, 10%);
--table-highlight: hsl(257, 66%, 27%);
}
@layer base {
input[type='text'],
input[type='password'],

14
src/styles/css/helpers.css
View File

@ -16,3 +16,17 @@
/* ? Why? */
background-color: var(--secondary-background);
}
.release {
display: inline-block;
width: 156px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

3
src/styles/css/tailwind.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

8
src/styles/scss/base/_animations.scss
View File

@ -1,8 +0,0 @@
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

46
src/styles/scss/base/_base.scss
View File

@ -1,46 +0,0 @@
:root {
font-size: 16px;
--main-scroll: theme('colors.grayscale.300');
--panels-scroll: hsl(180, 2%, 17%);
--toast-background: hsla(240, 12%, 16%, 0.85);
--toast-secondary: hsla(240, 12%, 16%, 0.15);
--toast-text: hsla(0, 0%, 100%, 0.85);
--primary-color: hsl(210, 100%, 52%); // will remove variable
--primary-text: theme('colors.grayscale.870'); // will remove variable
--secondary-color: hsl(46, 100%, 57%); // will remove variable
}
:root[data-theme='light'] {
--main-background: theme('colors.white');
--secondary-background: theme('colors.grayscale.930');
--foreground: theme('colors.grayscale.200');
--panels-background: hsl(216, 4%, 78%);
--table-bg: theme('colors.white');
--table-zebra: theme('colors.grayscale.900');
--table-highlight: theme('colors.grayscale.840');
}
:root[data-theme='dark'] {
--main-background: hsl(240, 10%, 8%);
--secondary-background: hsl(240, 12%, 16%); // e.g. search bar bg
--foreground: theme('colors.grayscale.930'); // primary text + icons in main + search
--panels-background: hsl(240, 15%, 12%); // panel left + right bg
--table-bg: hsl(240, 10%, 8%); // e.g. results table bg 1st row
--table-zebra: hsl(240, 15%, 11%); // e.g. results table bg 2nd alternate
--table-highlight: hsl(240, 10%, 22%); // e.g. hover bg color on table selection
}
:root[data-theme='purple'] {
--main-background: hsl(261, 74%, 6%);
--secondary-background: hsl(257, 61%, 10%);
--foreground: theme('colors.grayscale.930');
--panels-background: hsl(257, 70%, 9%);
--table-bg: hsl(261, 74%, 6%);
--table-zebra: hsl(257, 61%, 10%);
--table-highlight: hsl(257, 66%, 27%);
}

10
src/styles/scss/style.scss
View File

@ -1,10 +0,0 @@
@import '~tailwindcss/base';
@import '~tailwindcss/components';
@import '~tailwindcss/utilities';
@import './base/base';
@import './base/animations';
@import './globals/tables';
@import './tabs/tabs';

0
src/styles/scss/globals/_tables.scss → src/styles/scss/tables.scss
View File

4
src/styles/scss/tabs/_tabs.scss
View File

@ -1,4 +0,0 @@
.release {
display: inline-block;
width: 156px;
}