From 781bf6846b4f37de39f7f66ee9db2f8c53e333a4 Mon Sep 17 00:00:00 2001 From: Herculino Trotta Date: Sun, 17 Nov 2024 21:46:15 -0300 Subject: [PATCH] refactor: fix eslint rules --- frontend/src/styles/_animations.scss | 67 ++++++---------------- frontend/src/styles/_bootstrap.scss | 83 ++++++---------------------- frontend/src/styles/_tom-select.scss | 29 ++++++---- frontend/src/styles/_variables.scss | 43 +++++++------- frontend/src/styles/style.scss | 13 ++--- 5 files changed, 79 insertions(+), 156 deletions(-) diff --git a/frontend/src/styles/_animations.scss b/frontend/src/styles/_animations.scss index b1aa4d3..5fa1a42 100644 --- a/frontend/src/styles/_animations.scss +++ b/frontend/src/styles/_animations.scss @@ -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; diff --git a/frontend/src/styles/_bootstrap.scss b/frontend/src/styles/_bootstrap.scss index 7c90efc..7e71354 100644 --- a/frontend/src/styles/_bootstrap.scss +++ b/frontend/src/styles/_bootstrap.scss @@ -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; } diff --git a/frontend/src/styles/_tom-select.scss b/frontend/src/styles/_tom-select.scss index 6a1791a..0de30df 100644 --- a/frontend/src/styles/_tom-select.scss +++ b/frontend/src/styles/_tom-select.scss @@ -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 { diff --git a/frontend/src/styles/_variables.scss b/frontend/src/styles/_variables.scss index 980a039..592a695 100644 --- a/frontend/src/styles/_variables.scss +++ b/frontend/src/styles/_variables.scss @@ -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; diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss index 177b005..3f0d423 100644 --- a/frontend/src/styles/style.scss +++ b/frontend/src/styles/style.scss @@ -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; }