diff --git a/.gitignore b/.gitignore index 5c909e4..1dbb472 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,4 @@ yarn-error.log resources/views/vendor/**/* resources/sass/apps/**/* +public/mix-manifest.json diff --git a/public/mix-manifest.json b/public/mix-manifest.json index 6d95a2f..fcde7a5 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,6 +1,6 @@ { - "/assets/js/app.js": "/assets/js/app.js?id=acfc5530fc22cd060d31143fdeef15fd", - "/assets/css/app.css": "/assets/css/app.css?id=9feb9be6506dcb3c7ae51e6e91733081", + "/assets/js/app.js": "/assets/js/app.js?id=2faffbf53ff019105607b2ab8529fe9d", + "/assets/css/app.css": "/assets/css/app.css?id=73088d6d1171a4680372164e1d3f1f50", "/assets/images/auth/bg-dark.jpg": "/assets/images/auth/bg-dark.jpg?id=974d7ad223344a8531cf721d6c038300", "/assets/images/auth/bg-light.jpg": "/assets/images/auth/bg-light.jpg?id=7b8dc9ee3f7049c0c7783f3ef077f7bf", "/assets/images/auth/milad-fakurian-2sICkGsJRQY-unsplash.jpg": "/assets/images/auth/milad-fakurian-2sICkGsJRQY-unsplash.jpg?id=974d7ad223344a8531cf721d6c038300", diff --git a/resources/sass/app.scss b/resources/sass/app.scss index 9fbd308..81ef468 100644 --- a/resources/sass/app.scss +++ b/resources/sass/app.scss @@ -1,13 +1,8 @@ // fonts -@import url("https://fonts.googleapis.com/css?family=Nunito"); - -// common variables -@import "variables"; - -body { - font-family: $font-family-sans-serif; -} +@import url('https://fonts.googleapis.com/css?family=Nunito'); // @import "./partials/base-bootstrap.scss"; +@import './partials/base-tailwind.scss'; -@import "./partials/base-tailwind.scss"; +@import './layouts/partials/navbar.scss'; +// @import './../vendor/fortify-ui/sass/starter/auth.scss'; diff --git a/resources/sass/apps/auth/auth.scss b/resources/sass/apps/auth/auth.scss index baffacf..e69de29 100644 --- a/resources/sass/apps/auth/auth.scss +++ b/resources/sass/apps/auth/auth.scss @@ -1,19 +0,0 @@ -// fonts -@import url("https://fonts.googleapis.com/css?family=Nunito"); - -// common variables -@import "./../../variables"; - -body { - font-family: $font-family-sans-serif; - height: 100%; - width: 100%; - - @apply bg-white backdrop-blur-md; -} - -@import "./../../partials/base-tailwind.scss"; - -@import "./layout/main.scss"; -@import "./dark.scss"; -@import "./components/inputs.scss"; diff --git a/resources/sass/apps/auth/components/inputs.scss b/resources/sass/apps/auth/components/inputs.scss deleted file mode 100644 index 8ed3fbe..0000000 --- a/resources/sass/apps/auth/components/inputs.scss +++ /dev/null @@ -1,55 +0,0 @@ -span[role="alert"] { - strong { - @apply text-sm text-red-400 mt-2; - } -} - -.input-container { - @apply relative; - - input { - @apply text-base w-full px-4 py-[0.5rem] rounded-md border border-blue-200 text-gray-900 - focus:border focus:border-blue-300 peer-focus:outline-none - focus:outline-none transition-colors duration-200 - dark:bg-gray-700 dark:border-gray-600 dark:focus:border-gray-500 - selection:bg-gray-500; - - &[name="password"] { - @apply pr-10 #{!important}; - } - } - - .eye-toggle { - @apply absolute right-3 top-[12px]; - - svg { - @apply h-[18px] fill-gray-500 transition-colors duration-150; - - &:hover { - @apply fill-gray-700; - } - - eye-close { - @apply fill-gray-800; - - &:hover { - @apply fill-gray-700; - } - } - } - } -} - -.submit-button-container { - @apply relative pt-4; - - button { - @apply bg-blue-500 text-base text-white rounded-[3px] px-4 py-1; - } - - .btn-link { - @apply text-sm ml-5 mt-[7px] hover:text-blue-500 transition-colors duration-200 - float-right cursor-default dark:text-gray-400 dark:hover:text-gray-300 - cursor-pointer; - } -} diff --git a/resources/sass/apps/auth/dark.scss b/resources/sass/apps/auth/dark.scss index 91c3afe..35caaed 100644 --- a/resources/sass/apps/auth/dark.scss +++ b/resources/sass/apps/auth/dark.scss @@ -1,13 +1,16 @@ @media (prefers-color-scheme: dark) { body { - font-family: $font-family-sans-serif; - background-image: url("/assets/images/auth/bg-dark.jpg"); - background-repeat: no-repeat; - background-size: cover; - background-position: center center; - background-attachment: fixed; + &.with-bg-image { + background-image: url("/assets/images/auth/bg-dark.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + background-attachment: fixed; + } + height: 100%; width: 100%; + font-family: $font-family-sans-serif; @apply dark:bg-gray-900; } diff --git a/resources/sass/apps/auth/layout/main.scss b/resources/sass/apps/auth/layout/main.scss deleted file mode 100644 index 43926b6..0000000 --- a/resources/sass/apps/auth/layout/main.scss +++ /dev/null @@ -1,47 +0,0 @@ -// @source: https://tailwindcomponents.com/component/login-form-with-floating-labels -.auth-card-container { - @apply flex flex-col justify-center min-h-screen py-6 sm:py-12; - - .auth-card { - @apply py-3 relative sm:max-w-xl sm:mx-auto; - - &:hover { - .backward-card { - @apply opacity-80; - } - - .front-card { - @apply shadow-2xl; - } - } - - .backward-card { - @apply -skew-y-6 absolute bg-gradient-to-r from-blue-300 inset-0 - shadow-lg sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl to-blue-600 transform - transition-all duration-150; - } - - .front-card { - @apply bg-white px-4 py-10 relative shadow-xl sm:rounded-3xl sm:px-12 sm:py-16 - dark:bg-gray-800 transition-all duration-150; - - .card-container { - @apply max-w-md mx-auto; - - .title { - @apply text-center text-gray-900 dark:text-gray-300; - - .form-title { - @apply font-semibold mb-2 text-2xl cursor-default; - } - } - - form { - @apply leading-6 py-8 sm:text-lg sm:leading-7 space-y-4 text-base text-gray-700; - - min-width: 300px; - } - } - } - } -} diff --git a/resources/sass/layouts/partials/navbar.scss b/resources/sass/layouts/partials/navbar.scss new file mode 100644 index 0000000..3c8bc52 --- /dev/null +++ b/resources/sass/layouts/partials/navbar.scss @@ -0,0 +1,47 @@ +.navbar { + @apply backdrop-blur-md bg-transparent fixed left-0 py-[5px] sm:px-4 top-0 w-full z-20 h-[60px]; + + .nav-container { + @apply container flex flex-wrap items-center justify-between mx-auto; + + .logo-link { + @apply flex items-center; + + .site-name { + @apply dark:text-gray-200 font-semibold self-center text-2xl text-blue-700 whitespace-nowrap; + } + } + + .hamburger-menu { + @apply dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-300 hover:text-gray-900 inline-flex items-center justify-center md:hidden ml-3 rounded-lg text-gray-400; + + span { + @apply sr-only; + } + + .class-svg-6 { + @apply h-6 w-6; + } + } + + .auth-links { + @apply hidden md:block md:w-auto w-full; + + .link-list { + @apply border border-gray-100 dark:border-gray-700 flex flex-col md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 mt-4 p-4 rounded-lg; + + .login { + a { + @apply block dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-white md:dark:hover:bg-transparent pl-3 pr-4 py-2 rounded text-gray-700; + } + } + + .register { + a { + @apply block dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-white md:dark:hover:bg-transparent pl-3 pr-4 py-2 rounded text-gray-700; + } + } + } + } + } +} diff --git a/resources/views/auth/layout/main.blade.php b/resources/views/auth/layout/main.blade.php deleted file mode 100644 index d615c30..0000000 --- a/resources/views/auth/layout/main.blade.php +++ /dev/null @@ -1,152 +0,0 @@ - - - -
- - - - - - - - - -