enhance style + menu script
This commit is contained in:
BlasenhauerJ
parent
461789aed6
commit
217d1aa502
|
|
@ -815,14 +815,14 @@ h6 {
|
|||
right: 1.25rem;
|
||||
}
|
||||
|
||||
.right-2 {
|
||||
right: 0.5rem;
|
||||
}
|
||||
|
||||
.top-16 {
|
||||
top: 4rem;
|
||||
}
|
||||
|
||||
.right-2 {
|
||||
right: 0.5rem;
|
||||
}
|
||||
|
||||
.top-\[60px\] {
|
||||
top: 60px;
|
||||
}
|
||||
|
|
@ -982,6 +982,11 @@ h6 {
|
|||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.mx-2\.5 {
|
||||
margin-left: 0.625rem;
|
||||
margin-right: 0.625rem;
|
||||
|
|
@ -992,16 +997,6 @@ h6 {
|
|||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.my-1\.5 {
|
||||
margin-top: 0.375rem;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -1130,10 +1125,6 @@ h6 {
|
|||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.mb-1\.5 {
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1473,6 +1464,16 @@ h6 {
|
|||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-y-0\.5 {
|
||||
--tw-translate-y: 0.125rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-y-0 {
|
||||
--tw-translate-y: 0px;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-x-1 {
|
||||
--tw-translate-x: 0.25rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
|
|
@ -1498,16 +1499,6 @@ h6 {
|
|||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-y-0\.5 {
|
||||
--tw-translate-y: 0.125rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-y-0 {
|
||||
--tw-translate-y: 0px;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.rotate-12 {
|
||||
--tw-rotate: 12deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
|
|
@ -1547,16 +1538,6 @@ h6 {
|
|||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.scale-y-110 {
|
||||
--tw-scale-y: 1.1;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.scale-y-125 {
|
||||
--tw-scale-y: 1.25;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.transform {
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
|
@ -1796,10 +1777,6 @@ h6 {
|
|||
border-style: solid;
|
||||
}
|
||||
|
||||
.\!border-solid {
|
||||
border-style: solid !important;
|
||||
}
|
||||
|
||||
.border-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
|
@ -1895,10 +1872,6 @@ h6 {
|
|||
background-color: rgb(58 65 111 / 0.1);
|
||||
}
|
||||
|
||||
.bg-slate-700\/50 {
|
||||
background-color: rgb(52 71 103 / 0.5);
|
||||
}
|
||||
|
||||
.bg-none {
|
||||
background-image: none;
|
||||
}
|
||||
|
|
@ -2751,11 +2724,6 @@ h6 {
|
|||
background-color: rgb(8 85 119 / 0.05);
|
||||
}
|
||||
|
||||
.hover\:bg-gray-200:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(233 236 239 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-blue-500\/80:hover {
|
||||
background-color: rgb(94 114 228 / 0.8);
|
||||
}
|
||||
|
|
@ -2947,15 +2915,15 @@ h6 {
|
|||
background-color: rgb(5 17 57 / 0.3);
|
||||
}
|
||||
|
||||
.dark .dark\:bg-slate-700\/50 {
|
||||
background-color: rgb(52 71 103 / 0.5);
|
||||
}
|
||||
|
||||
.dark .dark\:bg-gray-800 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(37 47 64 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:bg-slate-700\/50 {
|
||||
background-color: rgb(52 71 103 / 0.5);
|
||||
}
|
||||
|
||||
.dark .dark\:bg-gradient-to-r {
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
}
|
||||
|
|
@ -2987,22 +2955,6 @@ h6 {
|
|||
fill: #495057;
|
||||
}
|
||||
|
||||
.dark .dark\:stroke-slate-700 {
|
||||
stroke: #344767;
|
||||
}
|
||||
|
||||
.dark .dark\:stroke-gray-400 {
|
||||
stroke: #ced4da;
|
||||
}
|
||||
|
||||
.dark .dark\:stroke-gray-700 {
|
||||
stroke: #495057;
|
||||
}
|
||||
|
||||
.dark .dark\:stroke-gray-500 {
|
||||
stroke: #adb5bd;
|
||||
}
|
||||
|
||||
.dark .dark\:stroke-gray-600 {
|
||||
stroke: #6c757d;
|
||||
}
|
||||
|
|
@ -3117,11 +3069,6 @@ h6 {
|
|||
background-color: rgb(8 85 119 / 0.2);
|
||||
}
|
||||
|
||||
.dark .dark\:hover\:bg-slate-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(52 71 103 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:hover\:bg-slate-700\/50:hover {
|
||||
background-color: rgb(52 71 103 / 0.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,20 @@ class Menu {
|
|||
|
||||
this.toggleBtn.addEventListener("click", this.toggle.bind(this));
|
||||
this.closeBtn.addEventListener("click", this.close.bind(this));
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
window.addEventListener("click", (e) => {
|
||||
try {
|
||||
if (
|
||||
e.target.closest("aside").hasAttribute("sidebar-menu") &&
|
||||
e.target.closest("button").getAttribute("role") === "tab"
|
||||
) {
|
||||
this.close();
|
||||
}
|
||||
} catch (err) {}
|
||||
});
|
||||
}
|
||||
|
||||
toggle() {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
<main class="grid grid-cols-2 align-middle items-center min-h-screen">
|
||||
<!--form -->
|
||||
<div
|
||||
class="col-span-2 lg:col-span-1 bg-none lg:bg-gray-50 h-full flex flex-col items-center justify-center"
|
||||
class="mx-4 col-span-2 lg:col-span-1 bg-none lg:bg-gray-50 h-full flex flex-col items-center justify-center"
|
||||
>
|
||||
<div class="bg-gray-50 rounded px-12 py-16 w-full max-w-[400px]">
|
||||
<div class="flex justify-center">
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<!-- close btn-->
|
||||
<svg
|
||||
sidebar-menu-close
|
||||
class="sm:hidden cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-2 right-2"
|
||||
class="sm:hidden cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-6 w-6 top-4 right-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in New Issue