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

build: v1.1.2, chore: improved charts displaying by removing duplicated worldwide chart code; style: removed a lot of .scss files in favor off tailwind utilities; chore: removed some unused ids; style: improved feedback on section-tabs; chore: replaced css variable in primary color in tailwind config with the hsl color code

Browse Source
This commit is contained in:
Roberto Tonino
2020-10-14 22:18:13 +02:00
parent f600e8afad
commit c1bde5357d
35 changed files with 318 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/styles/css/components.css
View File

@@ -1,6 +1,7 @@
@layer components {
/* Button */
.btn {
@apply text-grayscale-900 relative border border-transparent border-solid rounded font-semibold text-sm py-0 px-2 h-8 uppercase;
@apply relative h-8 px-2 py-0 text-sm font-semibold uppercase border border-transparent border-solid rounded text-grayscale-900;
font-family: inherit;
transition: transform 50ms ease-in-out;
@@ -11,11 +12,11 @@
}
.btn[disabled] {
@apply bg-gray-600 text-gray-300 opacity-75 cursor-not-allowed;
@apply text-gray-300 bg-gray-600 opacity-75 cursor-not-allowed;
}
.btn-only-icon {
@apply w-12 py-0 px-1 flex justify-center items-center;
@apply flex items-center justify-center w-12 px-1 py-0;
min-width: 24px;
}
@@ -27,4 +28,22 @@
.btn-primary:hover {
@apply bg-blue-600 border-foreground;
}
/* Section tabs */
.section-tabs {
@apply flex mt-4 mb-6 list-none cursor-pointer;
}
.section-tabs__tab {
@apply flex-1 p-3 text-xl text-center capitalize border-t-4 rounded-b border-foreground bg-background-main;
}
.section-tabs__tab.active {
@apply text-primary border-primary bg-background-main;
}
.section-tabs__tab:hover {
@apply text-primary border-primary bg-background-secondary;
@apply bg-opacity-25;
}
}

22
src/styles/css/toasts.css Normal file
View File

@@ -0,0 +1,22 @@
.toast-icon {
@apply inline-block mr-2;
}
.circle-loader {
@apply inline-block w-4 h-4;
border: 2px solid var(--primary-color);
border-radius: 50%;
border-bottom: 2px solid var(--secondary-background);
animation: spin 1s linear infinite;
}
.toastify {
@apply flex items-center;
box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(0, 0, 0, 0.3);
background: var(--toast-background);
color: var(--toast-text);
}
.toastify .circle-loader {
border-bottom-color: var(--toast-secondary);
}