remco/Epicnabbo-Catalogus-Updated-Daily
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🆙 Tailwind v4 100% 🆙

Browse Source
This commit is contained in:
Remco
2026-01-29 14:38:31 +01:00
parent d987de29b3
commit df765557f3
12 changed files with 164 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Updated_Cms/resources/css/global.scss
+30 -2
View File
@@ -6,11 +6,37 @@
@layer components {
.nav-item {
@apply flex h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase text-gray-700 transition duration-200 ease-in-out md:border-b-4 md:border-transparent md:hover:border-b-[#eeb425];
display: flex;
height: auto;
align-items: center;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
color: #374151;
transition: all 200ms ease-in-out;
border-bottom: 4px solid transparent;
@media (min-width: 768px) {
height: 60px;
border-bottom: 4px solid #eeb425;
}
&:hover {
@media (min-width: 768px) {
border-bottom: 4px solid #eeb425;
}
}
}
.dropdown-item {
@apply block py-2 px-4 font-semibold hover:bg-gray-100 text-gray-900;
display: block;
padding: 0.5rem 1rem;
font-weight: 600;
color: #111827;
&:hover {
background-color: #f3f4f6;
}
}
}
@@ -49,10 +75,12 @@ html {
.drop-shadow {
-webkit-filter: drop-shadow(2px 1px 0 #fff) drop-shadow(-2px 1px 0 #fff) drop-shadow(0 -2px 0 #fff);
filter: drop-shadow(2px 1px 0 #fff) drop-shadow(-2px 1px 0 #fff) drop-shadow(0 -2px 0 #fff);
}
.drop-shadow-thin {
-webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
.article-image {
Updated_Cms/resources/themes/atom/css/app.scss
+28 -2
View File
@@ -1,3 +1,4 @@
@reference;
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -6,11 +7,34 @@
@layer components {
.nav-item {
@apply flex h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase text-gray-700 transition duration-200 ease-in-out md:border-b-4 md:border-transparent md:hover:border-b-[#eeb425];
display: flex;
height: auto;
align-items: center;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
color: #374151;
transition: all 200ms ease-in-out;
@media (min-width: 768px) {
height: 60px;
border-bottom: 4px solid transparent;
&:hover {
border-bottom: 4px solid #eeb425;
}
}
}
.dropdown-item {
@apply block py-2 px-4 font-semibold hover:bg-gray-100 text-gray-900;
display: block;
padding: 0.5rem 1rem;
font-weight: 600;
color: #111827;
&:hover {
background-color: #f3f4f6;
}
}
}
@@ -49,10 +73,12 @@ html {
.drop-shadow {
-webkit-filter: drop-shadow(2px 1px 0 #fff) drop-shadow(-2px 1px 0 #fff) drop-shadow(0 -2px 0 #fff);
filter: drop-shadow(2px 1px 0 #fff) drop-shadow(-2px 1px 0 #fff) drop-shadow(0 -2px 0 #fff);
}
.drop-shadow-thin {
-webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
.article-image {
Updated_Cms/resources/themes/atom/tailwind.config.cjs
+1 -9
View File
@@ -1,5 +1,3 @@
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
darkMode: "class",
content: [
@@ -12,17 +10,11 @@ module.exports = {
theme: {
extend: {
fontFamily: {
sans: ["Nunito", ...defaultTheme.fontFamily.sans],
sans: ["Nunito", ...require("tailwindcss/defaultTheme").fontFamily.sans],
},
},
},
variants: {
extend: {
opacity: ["disabled"],
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
Updated_Cms/resources/themes/atom/vite.config.js
+1 -4
View File
@@ -1,10 +1,8 @@
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import path from "path";
import tailwindcss from "tailwindcss";
import tailwindcss from "@tailwindcss/postcss";
import postcssImport from "postcss-import";
import postcssNesting from "postcss-nesting";
import tailwindcssNesting from "tailwindcss/nesting";
import autoprefixer from "autoprefixer";
export default defineConfig({
@@ -38,7 +36,6 @@ export default defineConfig({
postcss: {
plugins: [
postcssImport(),
tailwindcssNesting(postcssNesting()),
tailwindcss({
config: path.resolve(__dirname, "tailwind.config.cjs"),
}),
Updated_Cms/resources/themes/dusk/css/app.scss
+15 -2
View File
@@ -1,10 +1,18 @@
@reference;
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.dropdown-item {
@apply w-full text-left px-2 py-1 transition duration-200 ease-in-out text-sm hover:bg-[#8770b2];
width: 100%;
text-align: left;
padding: 0.5rem 0.5rem;
transition: all 200ms ease-in-out;
font-size: 0.875rem;
&:hover {
background-color: #8770b2;
}
}
}
@@ -21,11 +29,16 @@ body {
}
img {
// stylelint-disable-next-line property-no-unknown
-webkit-user-drag: none;
// stylelint-disable-next-line property-no-unknown
-khtml-user-drag: none;
// stylelint-disable-next-line property-no-unknown
-moz-user-drag: none;
// stylelint-disable-next-line property-no-unknown
-o-user-drag: none;
user-drag: none;
// Prevent text selection (standard property)
user-select: none;
pointer-events: none;
}
Updated_Cms/resources/themes/dusk/tailwind.config.cjs
+1 -9
View File
@@ -1,5 +1,3 @@
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: [
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
@@ -11,17 +9,11 @@ module.exports = {
theme: {
extend: {
fontFamily: {
sans: ["Nunito", ...defaultTheme.fontFamily.sans],
sans: ["Nunito", ...require("tailwindcss/defaultTheme").fontFamily.sans],
},
},
},
variants: {
extend: {
opacity: ["disabled"],
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
Updated_Cms/resources/themes/dusk/vite.config.js
+1 -4
View File
@@ -1,10 +1,8 @@
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import path from "path";
import tailwindcss from "tailwindcss";
import tailwindcss from "@tailwindcss/postcss";
import postcssImport from "postcss-import";
import postcssNesting from "postcss-nesting";
import tailwindcssNesting from "tailwindcss/nesting";
import autoprefixer from "autoprefixer";
export default defineConfig({
@@ -39,7 +37,6 @@ export default defineConfig({
postcss: {
plugins: [
postcssImport(),
tailwindcssNesting(postcssNesting()),
tailwindcss({
config: path.resolve(__dirname, "tailwind.config.cjs"),
}),