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

style: unified accent color and changed its name to primary-color; style: back button; style: added btn css component

Browse Source
This commit is contained in:
Roberto Tonino
2020-10-10 20:03:19 +02:00
parent 8d51cfa7f7
commit c1c585de3c
22 changed files with 156 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/styles/css/components.css Normal file
View File

@@ -0,0 +1,30 @@
@layer components {
.btn {
@apply text-grayscale-900 relative border border-transparent border-solid rounded font-semibold text-sm py-0 px-2 h-8 uppercase;
font-family: inherit;
transition: transform 50ms ease-in-out;
}
.btn:active {
transform: scale(0.98);
}
.btn[disabled] {
@apply bg-gray-600 text-gray-300 opacity-75 cursor-not-allowed;
}
.btn-only-icon {
@apply w-12 py-0 px-1 flex justify-center items-center;
min-width: 24px;
}
.btn-primary {
@apply bg-primary;
}
.btn-primary:hover {
@apply bg-blue-600 border-foreground;
}
}

4
src/styles/scss/_progressbar.scss
View File

@@ -13,7 +13,7 @@
top: 0;
left: 0;
bottom: 0;
background-color: var(--accent-color);
background-color: var(--primary-color);
transition: width 0.3s linear;
}
@@ -23,7 +23,7 @@
}
.indeterminate {
background-color: var(--accent-color);
background-color: var(--primary-color);
&::before {
content: '';

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

@@ -24,7 +24,7 @@ $sidebar-delay: 75ms;
color: inherit;
&.active {
background-color: var(--accent-color);
background-color: var(--primary-color);
}
&:not(#theme_selector) {
@@ -37,7 +37,7 @@ $sidebar-delay: 75ms;
background-color: var(--sidebar-link-bg);
.side_icon {
color: var(--accent-color);
color: var(--primary-color);
}
}
}

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

@@ -5,7 +5,7 @@
.circle-loader {
display: inline-block;
border: 2px solid var(--accent-color);
border: 2px solid var(--primary-color);
border-radius: 50%;
border-bottom: 2px solid var(--secondary-background);
width: 16px;

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

@@ -6,6 +6,10 @@
--toast-background: hsla(0, 0%, 0%, 0.85);
--toast-secondary: hsla(0, 0%, 100%, 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'] {
@@ -13,16 +17,13 @@
--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: theme('colors.white');
--accent-text: theme('colors.black');
--sidebar-link-bg: theme('colors.grayscale.240');
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--icon-hover: var(--accent-color);
--icon-hover: var(--primary-color);
--table-bg: theme('colors.white');
--table-zebra: theme('colors.grayscale.900');
@@ -34,16 +35,13 @@
--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: theme('colors.grayscale.100');
--panels-text: theme('colors.white');
--accent-text: theme('colors.grayscale.870');
--sidebar-link-bg: theme('colors.grayscale.240');
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--icon-hover: var(--accent-color);
--icon-hover: var(--primary-color);
--table-bg: theme('colors.grayscale.80');
--table-zebra: theme('colors.grayscale.140');
@@ -55,11 +53,8 @@
--secondary-background: hsl(257, 61%, 10%);
--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: 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);

18
src/styles/scss/base/_normalize.scss
View File

@@ -28,3 +28,21 @@ table {
border-collapse: collapse;
border-spacing: 0;
}
/* Taken from Tailwind Preflight */
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
button,
[role='button'] {
cursor: pointer;
}

90
src/styles/scss/globals/_globals.scss
View File

@@ -37,14 +37,14 @@ input[type='checkbox'] {
&:checked {
opacity: 1;
background-color: var(--accent-color);
background-color: var(--primary-color);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-position: center center;
border: 0px solid var(--accent-color);
border: 0px solid var(--primary-color);
border-radius: 2px;
padding: 9px;
margin: 3px;
color: var(--accent-text);
color: var(--primary-text);
}
}
@@ -70,86 +70,6 @@ p {
word-break: break-word;
}
button {
min-width: 64px;
color: var(--accent-text);
position: relative;
background-color: var(--accent-color);
border: 1px solid transparent;
border-radius: 4px;
font-family: inherit;
font-weight: 600;
font-size: 14px;
padding: 0px 8px;
margin-right: 8px;
height: 36px;
text-transform: uppercase;
cursor: pointer;
transition: transform 50ms ease-in-out, background-color 200ms ease;
&[disabled] {
background-color: var(--secondary-background);
color: var(--foreground);
opacity: 0.75;
}
&.btn-green {
background-color: green;
&:active {
background-color: green;
}
}
&.btn-red {
background-color: red;
&:active {
background-color: red;
}
}
&.selective {
background-color: var(--main-background);
color: var(--foreground);
&.active {
background-color: var(--accent-color);
color: var(--accent-text);
}
}
&.with_icon {
display: flex;
align-items: center;
i {
margin-left: 8px;
}
}
&.only_icon {
min-width: 24px;
width: 48px;
margin: 0px 0px 0px 8px;
padding: 0px 4px;
i {
padding: 6px 0px;
}
}
&:active {
background-color: var(--accent-color);
transform: scale(0.98);
}
&:not(.no-hover):hover {
background: none;
border: 1px solid var(--accent-color);
}
}
img {
&.rounded {
border-radius: 5px;
@@ -233,8 +153,8 @@ a {
height: 56px;
border-radius: 28px;
display: inline-block;
background-color: var(--accent-color);
color: var(--accent-text);
background-color: var(--primary-color);
color: var(--primary-text);
cursor: pointer;
i {

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

@@ -28,7 +28,7 @@
transition: color 200ms ease-in-out;
&:hover {
color: var(--accent-color);
color: var(--primary-color);
}
}
}

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

@@ -12,7 +12,7 @@
color: var(--foreground);
&.active {
background-color: var(--accent-color);
background-color: var(--primary-color);
}
}
}
@@ -43,8 +43,8 @@
text-transform: capitalize;
&.active {
color: var(--accent-color);
border-top: 3px solid var(--accent-color);
color: var(--primary-color);
border-top: 3px solid var(--primary-color);
}
}
}