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

style: integrated base variables into Taiwlind

Browse Source
This commit is contained in:
Roberto Tonino
2020-10-10 17:35:04 +02:00
parent d9435d019b
commit 685c637d3d
10 changed files with 116 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/TheContent.vue
View File

@@ -43,21 +43,21 @@ main {
height: calc(100vh - 93px);
overflow-y: scroll;
overflow-x: hidden;
}
&::-webkit-scrollbar {
width: 10px;
}
main::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: var(--main-background);
}
main::-webkit-scrollbar-track {
background: var(--main-background);
}
&::-webkit-scrollbar-thumb {
background: var(--main-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
}
main::-webkit-scrollbar-thumb {
background: var(--main-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
}
</style>

2
src/styles/scss/_sidebar.scss
View File

@@ -119,7 +119,7 @@ $sidebar-delay: 75ms;
width: 25px;
height: 25px;
border-radius: 1000px;
border: 1px solid var(--separator);
border: 1px solid theme('colors.grayscale.500');
cursor: pointer;
transition: border 200ms ease-in-out;

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

@@ -1,66 +1,65 @@
html {
--main-scroll: hsl(0, 0%, 33%);
:root {
--main-scroll: theme('colors.grayscale.300');
--panels-scroll: hsl(180, 2%, 17%);
--tag-background: hsl(210, 100%, 38%);
--tag-text: hsl(0, 0%, 100%);
--toast-background: hsla(0, 0%, 0%, 0.867);
--toast-secondary: hsla(0, 0%, 100%, 0.133);
--toast-text: hsla(0, 0%, 100%, 0.871);
--separator: hsl(0, 0%, 50%);
--tag-text: theme('colors.white');
--toast-background: hsla(0, 0%, 0%, 0.85);
--toast-secondary: hsla(0, 0%, 100%, 0.15);
--toast-text: hsla(0, 0%, 100%, 0.85);
}
html[data-theme='light'] {
--main-background: hsl(0, 0%, 100%);
--secondary-background: hsl(0, 0%, 93%);
--foreground: hsl(0, 0%, 20%);
--foreground-inverted: hsl(0, 0%, 93%);
:root[data-theme='light'] {
--main-background: theme('colors.white');
--secondary-background: theme('colors.grayscale.930');
--foreground: theme('colors.grayscale.200');
--foreground-inverted: theme('colors.grayscale.930');
--accent-color: hsl(210, 100%, 52%);
--secondary-color: hsl(46, 100%, 57%);
--panels-background: hsl(210, 3%, 14%);
--panels-text: hsl(0, 0%, 100%);
--accent-text: hsl(0, 0%, 0%);
--panels-text: theme('colors.white');
--accent-text: theme('colors.black');
--sidebar-link-bg: hsl(0, 0%, 24%);
--sidebar-link-bg: theme('colors.grayscale.240');
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--icon-hover: var(--accent-color);
--table-bg: hsl(0, 0%, 100%);
--table-zebra: hsl(0, 0%, 90%);
--table-highlight: hsl(0, 0%, 84%);
--table-bg: theme('colors.white');
--table-zebra: theme('colors.grayscale.900');
--table-highlight: theme('colors.grayscale.840');
}
html[data-theme='dark'] {
--main-background: hsl(0, 0%, 8%);
--secondary-background: hsl(0, 0%, 14%);
--foreground: hsl(0, 0%, 93%);
--foreground-inverted: hsl(0, 0%, 20%);
:root[data-theme='dark'] {
--main-background: theme('colors.grayscale.80');
--secondary-background: theme('colors.grayscale.140');
--foreground: theme('colors.grayscale.930');
--foreground-inverted: theme('colors.grayscale.200');
--accent-color: hsl(210, 100%, 52%);
--secondary-color: hsl(46, 100%, 57%);
--panels-background: hsl(0, 0%, 10%);
--panels-text: hsl(0, 0%, 100%);
--accent-text: hsl(0, 0%, 87%);
--panels-background: theme('colors.grayscale.100');
--panels-text: theme('colors.white');
--accent-text: theme('colors.grayscale.870');
--sidebar-link-bg: hsl(0, 0%, 24%);
--sidebar-link-bg: theme('colors.grayscale.240');
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--icon-hover: var(--accent-color);
--table-bg: hsl(0, 0%, 8%);
--table-zebra: hsl(0, 0%, 14%);
--table-highlight: hsl(0, 0%, 20%);
--table-bg: theme('colors.grayscale.80');
--table-zebra: theme('colors.grayscale.140');
--table-highlight: theme('colors.grayscale.200');
}
html[data-theme='purple'] {
:root[data-theme='purple'] {
--main-background: hsl(261, 74%, 6%);
--secondary-background: hsl(257, 61%, 10%);
--foreground: hsl(0, 0%, 93%);
--foreground: theme('colors.grayscale.930');
--foreground-inverted: hsl(258, 62%, 8%);
--accent-color: hsl(261, 85%, 37%);
--secondary-color: hsl(46, 100%, 57%);
--panels-background: hsl(257, 70%, 9%);
--panels-text: hsl(0, 0%, 100%);
--accent-text: hsl(0, 0%, 87%);
--panels-text: theme('colors.white');
--accent-text: theme('colors.grayscale.870');
--sidebar-link-bg: hsl(257, 70%, 17%);
--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);
@@ -71,17 +70,3 @@ html[data-theme='purple'] {
--table-zebra: hsl(257, 61%, 10%);
--table-highlight: hsl(257, 66%, 27%);
}
html {
height: 100vh;
}
body {
margin: 0px;
width: 100%;
height: 100%;
font-family: 'Open Sans', 'sans-serif';
overflow: hidden;
background: var(--main-background);
color: var(--foreground);
}

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

@@ -1,11 +1,25 @@
@import './base/base';
@import '~tailwindcss/base';
@import '~tailwindcss/components';
@import '~tailwindcss/utilities';
// SASS only
@import './base/variables';
@import './base/base';
html {
height: 100vh;
}
body {
margin: 0px;
width: 100%;
height: 100%;
font-family: 'Open Sans', 'sans-serif';
overflow: hidden;
background: var(--main-background);
color: var(--foreground);
}
@import './base/normalize';
@import './base/mixins';
@import './base/animations';

2
src/styles/scss/tabs/_home-tab.scss
View File

@@ -3,7 +3,7 @@
}
.home_section {
border-top: 1px solid var(--separator);
border-top: 1px solid theme('colors.grayscale.500');
padding-top: 25px;
padding-bottom: 25px;
}

2
src/styles/scss/tabs/_search-tab.scss
View File

@@ -5,7 +5,7 @@
padding-bottom: 20px;
&:not(:first-child) {
border-top: 1px solid var(--separator);
border-top: 1px solid theme('colors.grayscale.500');
}
}

2
src/styles/scss/tabs/_settings-tab.scss
View File

@@ -29,7 +29,7 @@
display: flex;
flex-direction: column;
justify-content: center;
border-top: 1px solid var(--separator); /* Need less opacity */
border-top: 1px solid theme('colors.grayscale.500'); /* Need less opacity */
padding-top: 20px;
padding-bottom: 20px;