starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-03-22 01:19:28 +01:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

refactor: fix eslint rules

Browse Source
This commit is contained in:
Herculino Trotta
2024-11-17 21:46:15 -03:00
parent 369b294ee5
commit 781bf6846b
5 changed files with 79 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/styles/_animations.scss
View File

@@ -10,42 +10,22 @@
* animation swing-in-top-fwd
* ----------------------------------------
*/
@-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
@keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
transform: rotateX(-100deg);
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
transform: rotateX(0deg);
transform-origin: top;
opacity: 1;
}
}
.swing-in-top-fwd {
-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
/* ----------------------------------------------
@@ -60,44 +40,29 @@
* animation slide-in-left
* ----------------------------------------
*/
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.slide-in-left {
-webkit-animation: slide-in-left 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
//HTMX Loading
// HTMX Loading
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes fadeIn {
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
@@ -107,7 +72,7 @@
top: 0;
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
@@ -115,13 +80,13 @@
bottom: 0;
backdrop-filter: blur(4px);
z-index: 100;
animation: fadeIn 0.1s ease-in forwards;
animation: fade-in 0.1s ease-in forwards;
animation-delay: 200ms;
opacity: 0;
}
&::after {
content: '';
content: "";
position: absolute;
top: 10%;
left: 50%;
@@ -130,7 +95,7 @@
border: 4px solid #f3f3f3;
border-top: 4px solid $primary;
border-radius: 50%;
animation: spin 1s linear infinite, fadeIn 0.1s ease-in forwards;
animation: spin 1s linear infinite, fade-in 0.1s ease-in forwards;
animation-delay: 200ms;
opacity: 0;
z-index: 101;

83
frontend/src/styles/_bootstrap.scss
View File

@@ -1,6 +1,7 @@
@import 'bootstrap/scss/functions';
@use "sass:map";
@import "bootstrap/scss/functions";
@import "variables";
@import "_variables";
// Import all of Bootstrap's CSS
@import "bootstrap/scss/bootstrap";
@@ -9,24 +10,23 @@
font-weight: bold;
}
$theme-colors: map-merge($theme-colors, (
"primary": $primary
));
$theme-colors: map.merge(
$theme-colors,
(
"primary": $primary
)
);
@media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu {
display: none;
margin-top: 0;
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
left: 0;
}
.navbar .nav-item .dropdown-menu {
margin-top: 0;
}
}
.table .col-auto {
@@ -35,66 +35,17 @@ $theme-colors: map-merge($theme-colors, (
}
.offcanvas-size-xl {
--#{$prefix}offcanvas-width: min(95vw, 700px) !important;
--#{$prefix}offcanvas-width: min(95vw, 700px) !important;
}
.offcanvas-size-xxl {
--#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
--#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
--#{$prefix}offcanvas-width: min(95vw, 400px) !important;
--#{$prefix}offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
--#{$prefix}offcanvas-width: min(95vw, 250px) !important;
}
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
.no-more-tables table,
.no-more-tables thead,
.no-more-tables tbody,
.no-more-tables th,
.no-more-tables td,
.no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.no-more-tables tr { border: 1px solid #ccc; }
.no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
.no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
.no-more-tables td:before {
content: attr(data-title);
}
--#{$prefix}offcanvas-width: min(95vw, 250px) !important;
}

29
frontend/src/styles/_tom-select.scss
View File

@@ -1,13 +1,19 @@
@import "tom-select/dist/css/tom-select.bootstrap5.min.css";
@import "_variables.scss";
@import "variables.scss";
/* FIX BOOTSTRAP STYLING FOR TOM SELECT */
.ts-dropdown, .ts-control, .ts-control input {
.ts-dropdown,
.ts-control,
.ts-control input {
color: var(--bs-body-color);
}
/* stylelint-disable-next-line selector-class-pattern */
.ts-wrapper.plugin-remove_button .item .remove {
color: $red;
}
/* stylelint-disable-next-line selector-class-pattern */
.plugin-clear_button .clear-button {
color: $red;
right: 60px;
@@ -16,15 +22,15 @@
.ts-wrapper.multi .ts-control > div.active {
background: $primary;
color: $body-color;
border: 0 solid rgba(0, 0, 0, 0);
border: 0 solid #0000;
}
.focus .ts-control {
color: $input-focus-color;
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
//border-color: $form-select-focus-border-color;
outline: 0;
@if $enable-shadows {
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
} @else {
@@ -35,13 +41,14 @@
.focus.ts-wrapper {
border-color: $form-select-focus-border-color;
outline: 0;
@if $enable-shadows {
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $form-select-focus-box-shadow;
}
outline: 0;
@if $enable-shadows {
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $form-select-focus-box-shadow;
}
}
.ts-control > .clear-button {

43
frontend/src/styles/_variables.scss
View File

@@ -1,4 +1,6 @@
$white: #fff !default;
/* stylelint-disable scss/dollar-variable-empty-line-before */
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #ebebeb !default;
$gray-300: #dee2e6 !default;
@@ -8,29 +10,28 @@ $gray-600: #888 !default;
$gray-700: #444 !default;
$gray-800: #303030 !default;
$gray-900: #222 !default;
$black: #000 !default;
$black: #000 !default;
$blue: #375a7f !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #e74c3c !default;
$orange: #fd7e14 !default;
$yellow: #fbb700 !default;
$green: #00bc8c !default;
$teal: #20c997 !default;
$cyan: #3498db !default;
$blue: #375a7f !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #e74c3c !default;
$orange: #fd7e14 !default;
$yellow: #fbb700 !default;
$green: #00bc8c !default;
$teal: #20c997 !default;
$cyan: #3498db !default;
$primary: $yellow !default;
$secondary: $gray-700 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
//$light: $gray-500 !default;
$dark: $gray-700 !default;
$primary: $yellow !default;
$secondary: $gray-700 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$dark: $gray-700 !default;
$min-contrast-ratio: 1.9 !default;
$min-contrast-ratio: 1.9 !default;
$nav-pills-link-active-color: $gray-900;
$dropdown-link-active-color: $gray-900;

13
frontend/src/styles/style.scss
View File

@@ -17,7 +17,7 @@ select[multiple] {
}
.ts-dropdown-content {
max-height: 50vh; /* change this */
max-height: 50vh;
}
.font-base {
@@ -30,15 +30,15 @@ select[multiple] {
}
.dotted-line {
border-bottom: 2px dotted $gray-700; /* Adjust color as needed */
margin: 0 5px;
position: relative;
border-bottom: 2px dotted $gray-700;
margin: 0 5px;
position: relative;
}
.hierarchy-line-icon {
width: 8px;
height: 10px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPjxwYXRoIHN0cm9rZT0iIzlCOUI5QiIgc3Ryb2tlLWRhc2hhcnJheT0iNCIgZD0iTS41IDQuNWgxMiIvPjxwYXRoIHN0cm9rZT0iIzk3OTc5NyIgZD0iTS41IDQuNXYtNCIvPjwvZz48L3N2Zz4=);
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPjxwYXRoIHN0cm9rZT0iIzlCOUI5QiIgc3Ryb2tlLWRhc2hhcnJheT0iNCIgZD0iTS41IDQuNWgxMiIvPjxwYXRoIHN0cm9rZT0iIzk3OTc5NyIgZD0iTS41IDQuNXYtNCIvPjwvZz48L3N2Zz4=");
background-size: contain;
background-repeat: no-repeat;
background-position: top;
@@ -49,7 +49,6 @@ select[multiple] {
padding: 0 8px !important;
}
.transaction:has(input[type="checkbox"]:checked) > .transaction-item {
background-color: $primary-bg-subtle-dark; /* Change this to your desired background color */
background-color: $primary-bg-subtle-dark;
}