feat(via-ui): ✨ Implementacion via-ui
This commit is contained in:
parent
303857b1fd
commit
21735be347
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
// command yarn install
|
// command yarn install
|
||||||
|
|
||||||
// yarn add -D eslint eslint-plugin-react eslint-config-next eslint-config-standard eslint-plugin-tailwindcss eslint-plugin-n eslint-plugin-promise @typescript-eslint/parser
|
// yarn add -D eslint eslint-plugin-react eslint-config-next eslint-config-standard eslint-plugin-tailwindcss eslint-plugin-node eslint-plugin-promise
|
||||||
|
|
||||||
{
|
{
|
||||||
"env": {
|
"env": {
|
||||||
@ -25,17 +25,11 @@
|
|||||||
"plugin:tailwindcss/recommended"
|
"plugin:tailwindcss/recommended"
|
||||||
],
|
],
|
||||||
"overrides": [],
|
"overrides": [],
|
||||||
"parser": "@typescript-eslint/parser",
|
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
"ecmaVersion": "latest",
|
"ecmaVersion": "latest",
|
||||||
"sourceType": "module",
|
"sourceType": "module",
|
||||||
"project": "./tsconfig.json"
|
"project": "./tsconfig.json"
|
||||||
},
|
},
|
||||||
"settings": {
|
|
||||||
"react": {
|
|
||||||
"version": "detect"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"plugins": ["react", "tailwindcss"],
|
"plugins": ["react", "tailwindcss"],
|
||||||
"rules": {
|
"rules": {
|
||||||
"react-hooks/exhaustive-deps": "off",
|
"react-hooks/exhaustive-deps": "off",
|
||||||
|
|||||||
@ -43,7 +43,8 @@
|
|||||||
"react-simple-hook-store": "^0.0.6",
|
"react-simple-hook-store": "^0.0.6",
|
||||||
"react-toastify": "^9.1.3",
|
"react-toastify": "^9.1.3",
|
||||||
"rosetta": "^1.1.0",
|
"rosetta": "^1.1.0",
|
||||||
"vComponents": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/v-components.git"
|
"vComponents": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/v-components.git",
|
||||||
|
"via-ui": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/via-ui.git"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "20.11.10",
|
"@types/node": "20.11.10",
|
||||||
@ -60,6 +61,7 @@
|
|||||||
"eslint-plugin-tailwindcss": "^3.14.1",
|
"eslint-plugin-tailwindcss": "^3.14.1",
|
||||||
"postcss": "^8",
|
"postcss": "^8",
|
||||||
"tailwindcss": "^3.3.0",
|
"tailwindcss": "^3.3.0",
|
||||||
"typescript": "^5.3.3"
|
"typescript": "^5.3.3",
|
||||||
|
"via-tailwind": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/via-tailwind.git"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,7 +16,7 @@ import { useTheme } from 'next-themes'
|
|||||||
export const LayoutContext = createContext()
|
export const LayoutContext = createContext()
|
||||||
|
|
||||||
const Footer = dynamic(() => { return import('vComponents/Footer') }, { ssr: false })
|
const Footer = dynamic(() => { return import('vComponents/Footer') }, { ssr: false })
|
||||||
const Sidebar = dynamic(() => { return import('vComponents/Sidebar') }, { ssr: false })
|
const Sidebar = dynamic(() => { return import('via-ui/sidebar') }, { ssr: false })
|
||||||
const Navbar = dynamic(() => { return import('vComponents/Navbar') }, { ssr: false })
|
const Navbar = dynamic(() => { return import('vComponents/Navbar') }, { ssr: false })
|
||||||
|
|
||||||
const ResponsiveContainer = ({ children }) => {
|
const ResponsiveContainer = ({ children }) => {
|
||||||
@ -194,23 +194,15 @@ const ResponsiveContainer = ({ children }) => {
|
|||||||
<div className={'flex h-screen overflow-hidden text-theme-text-principal'}>
|
<div className={'flex h-screen overflow-hidden text-theme-text-principal'}>
|
||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
{userObj && userObj.nombre_usuario &&
|
{userObj && userObj.nombre_usuario &&
|
||||||
|
|
||||||
<Sidebar
|
<Sidebar
|
||||||
sidebarOpen={sidebarOpen}
|
sidebarOpen={sidebarOpen}
|
||||||
setSidebarOpen={setSidebarOpen}
|
setSidebarOpen={setSidebarOpen}
|
||||||
menu={menu}
|
menu={menu}
|
||||||
sidebarStyles={'via-bg-sidebar'}
|
presets={presets}
|
||||||
appTitleStyles='via-app-title-sidebar'
|
|
||||||
userInfoStyles='via-user-info-sidebar'
|
|
||||||
optionStyles={'via-options-sidebar'}
|
|
||||||
iconOptionStyles={'via-icons-sidebar'}
|
|
||||||
suboptionStyles={'via-sub-options-sidebar'}
|
|
||||||
iconSuboptionStyles={'via-icons-sub-sidebar'}
|
|
||||||
onClickLogout={() => doLogout()}
|
|
||||||
setTitle={setTitle}
|
|
||||||
userObj={userObj}
|
userObj={userObj}
|
||||||
environment={environment}
|
environment={environment}
|
||||||
presets={presets}
|
setTitle={setTitle}
|
||||||
|
onClickLogout={() => doLogout()}
|
||||||
router={router}
|
router={router}
|
||||||
i18n={i18n}
|
i18n={i18n}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -9,7 +9,9 @@ import Head from 'next/head'
|
|||||||
import '@/styles/globals.css'
|
import '@/styles/globals.css'
|
||||||
import 'vComponents/styles/generated/output.css'
|
import 'vComponents/styles/generated/output.css'
|
||||||
|
|
||||||
|
import { Portal } from '@headlessui/react'
|
||||||
import { ToastContainer } from 'react-toastify'
|
import { ToastContainer } from 'react-toastify'
|
||||||
|
import presets from '@/utils/globalPresets'
|
||||||
|
|
||||||
export default function App ({ Component, pageProps }) {
|
export default function App ({ Component, pageProps }) {
|
||||||
return (
|
return (
|
||||||
@ -23,11 +25,16 @@ export default function App ({ Component, pageProps }) {
|
|||||||
attribute="class"
|
attribute="class"
|
||||||
defaultTheme="system"
|
defaultTheme="system"
|
||||||
enableSystem
|
enableSystem
|
||||||
disableTransitionOnChange
|
|
||||||
>
|
>
|
||||||
<I18nProvider locale={'es'} dict={''}>
|
<I18nProvider locale={'es'} dict={''}>
|
||||||
<LoadingProvider>
|
<LoadingProvider>
|
||||||
<ToastContainer />
|
<Portal>
|
||||||
|
<ToastContainer
|
||||||
|
{...presets.toaster}
|
||||||
|
toastClassName={'rounded-lg bg-white text-black shadow-md dark:!bg-black dark:text-white'}
|
||||||
|
style={{ zIndex: 99999 }}
|
||||||
|
/>
|
||||||
|
</Portal>
|
||||||
<ResponsiveContainer>
|
<ResponsiveContainer>
|
||||||
<RouteProvider>
|
<RouteProvider>
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
|
|||||||
@ -1,13 +0,0 @@
|
|||||||
import { Html, Head, Main, NextScript } from 'next/document'
|
|
||||||
|
|
||||||
export default function Document () {
|
|
||||||
return (
|
|
||||||
<Html lang="es">
|
|
||||||
<Head />
|
|
||||||
<body>
|
|
||||||
<Main />
|
|
||||||
<NextScript />
|
|
||||||
</body>
|
|
||||||
</Html>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,19 +1,19 @@
|
|||||||
.via-navbar {
|
.via-navbar {
|
||||||
@apply bg-white dark:bg-[#222222] border-slate-200 text-theme-app-500 dark:text-theme-app-50 font-semibold transition-colors duration-350 ease-in-out !important;
|
@apply bg-white dark:bg-[#222222] border-slate-200 text-theme-app-500 dark:text-theme-app-50 font-semibold transition-colors duration-300 ease-in-out !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-menu-btn-navbar {
|
.via-menu-btn-navbar {
|
||||||
@apply text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200 transition-colors duration-350 ease-in-out !important;
|
@apply text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200 transition-colors duration-300 ease-in-out !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-user-menu-btn-navbar {
|
.via-user-menu-btn-navbar {
|
||||||
@apply bg-slate-700 text-white transition-colors duration-350 ease-in-out !important;
|
@apply bg-slate-700 text-white transition-colors duration-300 ease-in-out !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-user-options-navbar {
|
.via-user-options-navbar {
|
||||||
@apply text-gray-900 bg-transparent transition-colors duration-350 ease-in-out !important;
|
@apply text-gray-900 bg-transparent transition-colors duration-300 ease-in-out !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-user-options-selected-navbar {
|
.via-user-options-selected-navbar {
|
||||||
@apply bg-slate-700 dark:bg-slate-800 text-white transition-colors duration-350 ease-in-out !important;
|
@apply bg-slate-700 dark:bg-slate-800 text-white transition-colors duration-300 ease-in-out !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,39 +1,167 @@
|
|||||||
.via-bg-sidebar {
|
.via-bg-sidebar {
|
||||||
@apply bg-theme-app-500 border border-theme-app-300 rounded-t-lg md:rounded-t-none md:rounded-b-lg md:rounded-none dark:border-theme-app-800 dark:from-theme-app-700 dark:to-theme-app-800 transition-colors duration-350 ease-in-out !important;
|
/* Base */
|
||||||
|
@apply bg-theme-app-500 dark:bg-theme-app-900
|
||||||
|
/* Desktop */
|
||||||
|
md:rounded-none
|
||||||
|
/* Mobile */
|
||||||
|
rounded-t-lg !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.via-bg-popover-sidebar {
|
||||||
|
/* Base */
|
||||||
|
@apply bg-gray-100 dark:bg-gray-800
|
||||||
|
space-y-2 rounded-lg border p-1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* options-sidebar */
|
||||||
|
|
||||||
.via-options-sidebar {
|
.via-options-sidebar {
|
||||||
@apply text-theme-app-50 bg-transparent transition-colors duration-150 font-semibold hover:bg-theme-app-50 hover:text-gray-800 dark:text-theme-app-50 dark:hover:bg-theme-app-200 first-letter:uppercase !important;
|
/* Base */
|
||||||
|
@apply rounded-lg transition-colors duration-500 font-thin text-md shadow-md px-2 py-1.5 border text-left truncate
|
||||||
|
/* Light */
|
||||||
|
bg-white/10 hover:bg-white/30 text-white/85 hover:text-white border-white/30
|
||||||
|
/* Dark */
|
||||||
|
dark:bg-white/15 dark:hover:bg-white/20 dark:text-white/85 dark:hover:text-white
|
||||||
|
!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-sub-options-sidebar {
|
.via-options-sidebar-active {
|
||||||
@apply text-white hover:bg-theme-app-100 transition-colors duration-150 font-semibold gap-x-1 hover:text-gray-800 dark:text-theme-app-50 dark:hover:bg-theme-app-300 !important;
|
/* Base */
|
||||||
|
@apply rounded-lg transition-colors duration-500 font-thin text-md shadow-md px-2 py-1.5 border-l-4
|
||||||
|
/* Light */
|
||||||
|
bg-white/50 hover:bg-white/30 text-theme-app-800 hover:text-theme-app-900
|
||||||
|
/* Dark */
|
||||||
|
dark:bg-white/30 dark:hover:bg-white/40 dark:text-white/85 dark:hover:text-white
|
||||||
|
!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-drawer-count {
|
.via-options-sidebar-collapse {
|
||||||
@apply inline-flex items-center w-8 justify-center mr-1 px-2 py-2 text-sm font-semibold leading-none bg-teal-800 text-white rounded-full
|
/* Base */
|
||||||
|
@apply rounded-none transition-colors duration-500 font-thin text-md justify-center pb-0.5 pt-2 px-0.5 line-clamp-2 text-balance
|
||||||
|
/* Light */
|
||||||
|
hover:bg-white/30 text-white/85 hover:text-white
|
||||||
|
/* Dark */
|
||||||
|
dark:bg-white/15 dark:hover:bg-white/20 dark:text-white/85 dark:hover:text-white
|
||||||
|
|
||||||
|
!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-app-title-sidebar {
|
.via-options-sidebar-collapse-active {
|
||||||
@apply !text-theme-app-50 dark:text-theme-app-50 hover:bg-theme-app-800 dark:hover:bg-theme-app-950 !rounded-lg px-1 cursor-default !important;
|
/* Base */
|
||||||
}
|
@apply rounded-none transition-colors duration-500 font-thin text-md justify-center py-0.5 pt-2 px-0.5 border-l-4
|
||||||
|
/* Light */
|
||||||
.via-user-info-sidebar {
|
bg-white/50 hover:bg-white/30 text-theme-app-800 hover:text-theme-app-900
|
||||||
@apply !text-white bg-theme-app-700 dark:bg-theme-app-900 hover:bg-theme-app-800 dark:hover:bg-theme-app-950 !rounded-t-lg py-1 cursor-default;
|
/* Dark */
|
||||||
|
dark:bg-white/30 dark:hover:bg-white/40 dark:text-white/85 dark:hover:text-white
|
||||||
|
!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-icons-sidebar {
|
.via-icons-sidebar {
|
||||||
@apply !text-theme-app-950 bg-blue-100 rounded-md border p-[1px] drop-shadow-md !important;
|
@apply !text-theme-app-950 bg-blue-100 rounded-md border drop-shadow-md h-6 w-6 min-h-6 min-w-6 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.via-icons-sidebar-collapse {
|
||||||
|
@apply !text-theme-app-950 bg-blue-100 rounded-md border drop-shadow-md h-7 w-7 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-collapse-options-sidebar {
|
||||||
|
@apply relative duration-300 ease-in-out overflow-hidden rounded-bl-md border-l-2 border-b-2 space-y-2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* sub-options-sidebar */
|
||||||
|
.via-sub-options-sidebar {
|
||||||
|
/* Base */
|
||||||
|
@apply rounded-lg transition-colors duration-500 font-thin shadow-md justify-start items-center text-md px-1.5 py-1
|
||||||
|
/* Light */
|
||||||
|
bg-white/20 hover:bg-white/30 text-white/85 hover:text-white
|
||||||
|
/* Dark */
|
||||||
|
dark:bg-white/15 dark:hover:bg-white/20 dark:text-white/85 dark:hover:text-white
|
||||||
|
!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-sub-options-sidebar-active {
|
||||||
|
/* Base */
|
||||||
|
@apply rounded-lg transition-colors duration-500 font-thin shadow-md justify-start items-center text-md px-1.5 py-1 border-l-4
|
||||||
|
/* Light */
|
||||||
|
bg-white/50 hover:bg-white/30 text-theme-app-800 hover:text-theme-app-900
|
||||||
|
/* Dark */
|
||||||
|
dark:bg-white/30 dark:hover:bg-white/40 dark:text-white/85 dark:hover:text-white
|
||||||
|
!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-sub-options-sidebar-collapse {
|
||||||
|
/* Base */
|
||||||
|
@apply rounded-lg transition-colors duration-500 font-thin shadow-md justify-start items-center text-md py-0.5 px-1.5
|
||||||
|
/* Light */
|
||||||
|
bg-white hover:bg-gray-300 text-gray-700 hover:text-gray-800 border border-gray-300
|
||||||
|
/* Dark */
|
||||||
|
dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-gray-200 dark:hover:text-gray-300
|
||||||
|
!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-sub-options-sidebar-collapse-active {
|
||||||
|
/* Base */
|
||||||
|
@apply rounded-lg transition-colors duration-500 font-thin shadow-md justify-start items-center text-md py-0.5 px-1.5 border-l-4
|
||||||
|
/* Light */
|
||||||
|
bg-white/50 hover:bg-white/30 text-theme-app-800 hover:text-theme-app-900
|
||||||
|
/* Dark */
|
||||||
|
dark:bg-gray-900 dark:hover:bg-gray-950 dark:text-gray-300 dark:hover:text-gray-400 dark:border-gray-200
|
||||||
|
!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icons for sub-options-sidebar */
|
||||||
|
|
||||||
.via-icons-sub-sidebar {
|
.via-icons-sub-sidebar {
|
||||||
@apply !text-theme-app-950 bg-cyan-50 rounded-md h-6 w-6 p-[1px] drop-shadow-md !important;
|
@apply !text-theme-app-950 bg-cyan-50 rounded-md h-6 w-6 min-h-6 min-w-6 drop-shadow-md !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-icons-sub-sidebar-collapse {
|
||||||
|
@apply !text-theme-app-950 bg-cyan-50 rounded-md h-8 w-8 min-h-6 min-w-6 drop-shadow-md !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* sidebar */
|
||||||
|
.via-footer-options-sidebar {
|
||||||
|
/* Base */
|
||||||
|
@apply bg-white/10 hover:bg-white/30 text-white/85 hover:text-white border-white/30 border rounded-lg text-md space-x-2 px-2 py-1.5 dark:text-theme-app-50 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-separator-sidebar {
|
||||||
|
@apply h-[1.5px] bg-white/75 my-2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-drawer-count {
|
||||||
|
@apply inline-flex items-center w-8 justify-center mr-1 px-2 py-2 text-sm font-thin leading-none bg-teal-800 text-white rounded-full
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-app-title-sidebar {
|
||||||
|
/* Base */
|
||||||
|
@apply text-theme-app-50 dark:text-theme-app-50 hover:bg-theme-app-800 dark:hover:bg-theme-app-950 rounded-lg !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-user-info-sidebar {
|
||||||
|
@apply text-white text-base bg-theme-app-700 dark:bg-theme-app-900 hover:bg-theme-app-800 dark:hover:bg-theme-app-950 cursor-default !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-input-search-sidebar {
|
.via-input-search-sidebar {
|
||||||
@apply w-full rounded-l-lg shadow-lg !border-l-2 !border-y-2 border-r-0 border-[#7b1fa2] focus:border-blue-500 !important;
|
@apply rounded-lg h-8 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-button-search-sidebar {
|
.via-badge-sidebar {
|
||||||
@apply bg-theme-app-500 hover:bg-theme-app-600 text-white flex justify-center items-center p-2 rounded-r-lg cursor-pointer dark:!border-l-0 !important;
|
@apply bg-red-500 text-white rounded-full text-[10px] px-2 py-1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-badge-sidebar-collapse {
|
||||||
|
@apply absolute top-0 right-0 bg-red-500 text-white rounded-full text-[10px] px-1 py-0.5 border-2 border-white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-count-sidebar {
|
||||||
|
@apply bg-green-500 text-white rounded-full text-[10px] px-2 py-1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-count-sidebar-collapse {
|
||||||
|
@apply absolute top-0 right-3 bg-green-500 text-white rounded-full text-[10px] px-1.5 py-0.5 border-2 border-white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-drawer-button {
|
||||||
|
@apply bg-theme-app-600 hover:bg-theme-app-700 flex items-center justify-between rounded-lg border border-transparent p-2 font-thin leading-5 text-white transition-colors duration-150 focus:outline-none active:bg-purple-600 !important;
|
||||||
}
|
}
|
||||||
@ -1,47 +1,28 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback'); /* Inter */
|
@import url('https://fonts.googleapis.com/css2?family=Inter'); /* Inter */
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Round'); /* Material Icons */
|
@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Round'); /* Material Icons */
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Roboto'); /* Roboto */
|
||||||
|
@import url('https://www.via-asesores.com/fonts/din-webfont.css'); /* DIN Web */
|
||||||
|
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
/* ===== Scrollbar CSS ===== */
|
||||||
/* ===== Scrollbar CSS ===== */
|
@layer utilities {
|
||||||
@layer utilities {
|
/* Firefox */
|
||||||
/* Firefox */
|
* {
|
||||||
* {
|
scrollbar-width: thin;
|
||||||
scrollbar-width: auto;
|
scrollbar-color: theme('colors.theme-app.600') rgba(0, 0, 0, 0.2);
|
||||||
scrollbar-color: #1F92BF #e1e1e1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Chrome, Edge, and Safari */
|
|
||||||
*::-webkit-scrollbar {
|
|
||||||
@apply w-2 h-2 bg-gray-200 dark:bg-gray-800 rounded-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
*::-webkit-scrollbar-thumb {
|
|
||||||
@apply bg-theme-app-600 rounded-lg border-theme-app-400 dark:bg-theme-app-600 dark:border-theme-app-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
@apply bg-theme-app-700 border-theme-app-700 dark:bg-theme-app-900 dark:border-theme-app-900;
|
|
||||||
transition: 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Transition Classes for Theme Switching */
|
|
||||||
.transition-theme {
|
|
||||||
@apply transition-colors duration-[350ms] ease-in-out !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Additional Styles */
|
||||||
/* Additional Styles */
|
@import 'additional-styles/toastify.css';
|
||||||
@import 'additional-styles/toastify.css';
|
@import 'additional-styles/404.css';
|
||||||
@import 'additional-styles/404.css';
|
@import 'component-styles/loading.css';
|
||||||
@import 'component-styles/loading.css';
|
@import 'component-styles/sidebar.css';
|
||||||
@import 'component-styles/sidebar.css';
|
@import 'component-styles/navbar.css';
|
||||||
@import 'component-styles/navbar.css';
|
@import 'component-styles/datatable.css';
|
||||||
@import 'component-styles/datatable.css';
|
@import 'page-styles/common.css';
|
||||||
@import 'page-styles/common.css';
|
@import 'page-styles/login.css';
|
||||||
@import 'page-styles/login.css';
|
@import 'ui-styles/via-ui.css';
|
||||||
@import 'ui-styles/via-ui.css';
|
|
||||||
@ -7,7 +7,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.via-input {
|
.via-input {
|
||||||
@apply w-full text-sm text-gray-900 dark:text-neutral-900 rounded-lg border border-gray-300 focus:ring-stone-500 focus:border-stone-500 dark:border-stone-600 dark:placeholder-gray-400 dark:focus:border-stone-500 !important;
|
@apply w-full text-sm text-gray-900 dark:text-neutral-900 rounded-lg border-l-gray-100 border border-gray-300 focus:ring-stone-500 focus:border-stone-500 dark:border-stone-600 dark:placeholder-gray-400 dark:focus:border-stone-500 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-input:not(textarea) {
|
||||||
|
@apply h-7 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
select.via-input {
|
||||||
|
@apply py-0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invalid-feedback {
|
||||||
|
@apply h-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-input-prepend {
|
.via-input-prepend {
|
||||||
@ -15,11 +27,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.via-append-input {
|
.via-append-input {
|
||||||
@apply absolute top-0 -right-1 h-full p-1 text-sm font-medium text-white bg-theme-app-500 dark:bg-theme-app-900 rounded-r-lg border border-theme-app-900 hover:bg-theme-app-600 focus:ring-4 focus:outline-none focus:ring-theme-app-300 dark:hover:bg-theme-app-900 dark:focus:ring-theme-app-800;
|
@apply w-8 absolute top-0 -right-1 h-full text-sm font-medium text-white bg-theme-app-500 dark:bg-theme-app-900 rounded-r-lg border border-theme-app-900 hover:bg-theme-app-600 focus:ring-4 focus:outline-none focus:ring-theme-app-300 dark:hover:bg-theme-app-900 dark:focus:ring-theme-app-800;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.via-append-input svg, .via-append-input-extra svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateY(-50%) translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
.via-append-input-extra {
|
.via-append-input-extra {
|
||||||
@apply absolute top-0 right-0 h-full p-1 mr-6 text-sm font-medium text-white bg-theme-app-500 dark:bg-theme-app-900 border border-theme-app-900 hover:bg-theme-app-800 focus:ring-4 focus:outline-none focus:ring-theme-app-300 dark:hover:bg-theme-app-900 dark:focus:ring-theme-app-800;
|
@apply w-8 absolute top-0 -right-1 h-full mr-7 text-sm font-medium text-white bg-theme-app-700 rounded-r-lg border border-theme-app-700 hover:bg-theme-app-600 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-button {
|
.via-button {
|
||||||
@ -37,66 +56,6 @@
|
|||||||
@apply text-green-700 dark:text-green-600;
|
@apply text-green-700 dark:text-green-600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-default {
|
|
||||||
@apply text-theme-app-700 dark:text-theme-app-300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-default-bg {
|
|
||||||
@apply bg-theme-app-700 dark:bg-theme-app-300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-default-active {
|
|
||||||
@apply text-theme-app-500 dark:text-theme-app-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-yellow {
|
|
||||||
@apply text-amber-400 dark:text-amber-300 ;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-yellow-bg {
|
|
||||||
@apply bg-amber-500 dark:bg-amber-600 ;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-yellow-active {
|
|
||||||
@apply text-amber-500 dark:text-amber-600 ;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-green {
|
|
||||||
@apply text-green-400 dark:text-green-300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-green-bg {
|
|
||||||
@apply bg-green-500 dark:bg-green-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-green-active {
|
|
||||||
@apply text-green-600 dark:text-green-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-red {
|
|
||||||
@apply text-red-400 dark:text-red-300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-red-bg {
|
|
||||||
@apply bg-red-500 dark:bg-red-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-red-active {
|
|
||||||
@apply text-red-600 dark:text-red-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-blue {
|
|
||||||
@apply text-blue-400 dark:text-blue-300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-blue-bg {
|
|
||||||
@apply bg-blue-500 dark:bg-blue-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-blue-active {
|
|
||||||
@apply text-blue-600 dark:text-blue-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.via-translate {
|
.via-translate {
|
||||||
@apply -translate-x-1/2;
|
@apply -translate-x-1/2;
|
||||||
}
|
}
|
||||||
@ -110,7 +69,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.responsive-container {
|
.responsive-container {
|
||||||
@apply w-full h-auto min-h-[calc(100vh-60px)] mx-auto bg-[#ECEFF8] dark:bg-[#0f0f0f] items-center pb-10 p-2 transition-colors duration-350 ease-in-out !important;
|
@apply w-full h-auto min-h-[calc(100vh-60px)] mx-auto bg-[#ECEFF8] dark:bg-[#0f0f0f] items-center pb-10 p-2 transition-colors duration-300 ease-in-out !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.via-title {
|
.via-title {
|
||||||
@ -124,18 +83,3 @@
|
|||||||
.via-text {
|
.via-text {
|
||||||
@apply text-[#131313] dark:text-[#FFFFFF]
|
@apply text-[#131313] dark:text-[#FFFFFF]
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Clase para el color warning (azul) */
|
|
||||||
.via-warning {
|
|
||||||
@apply bg-blue-500 hover:bg-blue-600 dark:bg-warning-dark dark:hover:bg-warning-hover-dark text-white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Clase para el color danger (rojo) */
|
|
||||||
.via-danger {
|
|
||||||
@apply bg-danger hover:bg-danger-hover dark:bg-danger-dark dark:hover:bg-danger-hover-dark text-white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Clase para el color success (verde) */
|
|
||||||
.via-success {
|
|
||||||
@apply bg-success hover:bg-success-hover dark:bg-success-dark dark:hover:bg-success-hover-dark text-white !important;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,69 +1,16 @@
|
|||||||
import type { Config } from 'tailwindcss'
|
import type { Config } from 'tailwindcss'
|
||||||
|
import standard from 'via-tailwind'
|
||||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
|
||||||
|
|
||||||
const config: Config = {
|
const config: Config = {
|
||||||
mode: 'jit',
|
|
||||||
content: [
|
|
||||||
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
||||||
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
||||||
'./src/app/**/*.{js,ts,jsx,tsx,mdx}'
|
|
||||||
],
|
|
||||||
darkMode: 'class',
|
darkMode: 'class',
|
||||||
|
content: [
|
||||||
|
'./src/**/*.{js,ts,jsx,tsx,mdx}'
|
||||||
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', ...defaultTheme.fontFamily.sans],
|
|
||||||
inter: ['Inter', 'sans-serif', ...defaultTheme.fontFamily.sans]
|
|
||||||
},
|
|
||||||
fontSize: {
|
|
||||||
xs: ['0.75rem', { lineHeight: '1.25' }],
|
|
||||||
sm: ['0.875rem', { lineHeight: '1.25' }],
|
|
||||||
base: ['1rem', { lineHeight: '1.25', letterSpacing: '-0.01em' }],
|
|
||||||
lg: ['1.125rem', { lineHeight: '1.25', letterSpacing: '-0.01em' }],
|
|
||||||
xl: ['1.25rem', { lineHeight: '1.25', letterSpacing: '-0.01em' }],
|
|
||||||
'2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
|
|
||||||
'3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
|
|
||||||
'4xl': ['2.25rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
|
|
||||||
'5xl': ['3rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
|
|
||||||
'6xl': ['3.75rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }]
|
|
||||||
},
|
|
||||||
screens: {
|
|
||||||
xs: '480px'
|
|
||||||
},
|
|
||||||
borderWidth: {
|
|
||||||
3: '3px'
|
|
||||||
},
|
|
||||||
minWidth: {
|
|
||||||
36: '9rem',
|
|
||||||
44: '11rem',
|
|
||||||
56: '14rem',
|
|
||||||
60: '15rem',
|
|
||||||
72: '18rem',
|
|
||||||
80: '20rem'
|
|
||||||
},
|
|
||||||
maxWidth: {
|
|
||||||
'8xl': '88rem',
|
|
||||||
'9xl': '96rem'
|
|
||||||
},
|
|
||||||
zIndex: {
|
|
||||||
60: '60'
|
|
||||||
},
|
|
||||||
boxShadow: {
|
|
||||||
DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.02)',
|
|
||||||
md: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.02)',
|
|
||||||
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.01)',
|
|
||||||
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.01)'
|
|
||||||
},
|
|
||||||
outline: {
|
|
||||||
blue: '2px solid rgba(0, 112, 244, 0.5)'
|
|
||||||
},
|
|
||||||
transitionDuration: {
|
|
||||||
350: '350ms'
|
|
||||||
},
|
|
||||||
colors: {
|
colors: {
|
||||||
'theme-text': {
|
'theme-text': {
|
||||||
principal: '#323338',
|
principal: '#334155',
|
||||||
disabled: '#cbd5e1'
|
disabled: '#cbd5e1'
|
||||||
},
|
},
|
||||||
'theme-app': {
|
'theme-app': {
|
||||||
@ -78,22 +25,10 @@ const config: Config = {
|
|||||||
800: '#153758',
|
800: '#153758',
|
||||||
900: '#112F4D',
|
900: '#112F4D',
|
||||||
950: '#0E2741'
|
950: '#0E2741'
|
||||||
},
|
}
|
||||||
warning: '#3B82F6',
|
|
||||||
'warning-dark': '#1E40AF',
|
|
||||||
'warning-hover': '#60A5FA',
|
|
||||||
'warning-hover-dark': '#2563EB',
|
|
||||||
danger: '#EF4444',
|
|
||||||
'danger-dark': '#991B1B',
|
|
||||||
'danger-hover': '#F87171',
|
|
||||||
'danger-hover-dark': '#DC2626',
|
|
||||||
success: '#22C55E',
|
|
||||||
'success-dark': '#15803D',
|
|
||||||
'success-hover': '#34D399',
|
|
||||||
'success-hover-dark': '#22C55E'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
plugins: []
|
plugins: [standard]
|
||||||
}
|
}
|
||||||
export default config
|
export default config
|
||||||
|
|||||||
@ -1,6 +1,12 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"jsx": "preserve",
|
"jsx": "preserve",
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"],
|
||||||
|
"vComponents/*": ["./node_modules/vComponents/dist/components/*"],
|
||||||
|
"via-ui/*": ["./node_modules/via-ui/dist/components/*"]
|
||||||
|
},
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"strict": false,
|
"strict": false,
|
||||||
@ -8,37 +14,13 @@
|
|||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"incremental": true,
|
"incremental": true,
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"target": "esnext",
|
"target": "es5",
|
||||||
"module": "esnext",
|
"lib": ["dom", "dom.iterable", "esnext"]
|
||||||
"baseUrl": ".",
|
|
||||||
"paths": {
|
|
||||||
"@/*": [
|
|
||||||
"./src/*"
|
|
||||||
],
|
|
||||||
"vComponents/*": [
|
|
||||||
"./node_modules/vComponents/dist/components/*"
|
|
||||||
],
|
|
||||||
"via-ui/*": [
|
|
||||||
"./node_modules/via-ui/dist/components/*"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"lib": [
|
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"esnext"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"include": [
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
|
||||||
"next-env.d.ts",
|
"exclude": ["node_modules"]
|
||||||
"**/*.ts",
|
|
||||||
"**/*.tsx",
|
|
||||||
"**/*.js",
|
|
||||||
"**/*.jsx"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"node_modules"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user