diff --git a/assets/data/news.json b/assets/data/news.json
index 4f15ee406..65337897b 100644
--- a/assets/data/news.json
+++ b/assets/data/news.json
@@ -1,6 +1,6 @@
{
"id": 60,
- "content": "Introducing the new Styled Mode Theming",
+ "content": "Introducing the all-new Styled Mode",
"linkText": "Learn More",
- "linkHref": "http://primevue.org/theming"
+ "linkHref": "http://primevue.org/theming/styled"
}
diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index 360dc56cc..ebc369ad1 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -47,10 +47,6 @@
{
"name": "Auto Import",
"to": "/autoimport"
- },
- {
- "name": "CSS Layer",
- "to": "/csslayer"
}
]
},
diff --git a/doc/csslayer/BootstrapDoc.vue b/doc/csslayer/BootstrapDoc.vue
deleted file mode 100644
index 792b3f45e..000000000
--- a/doc/csslayer/BootstrapDoc.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-
- Bootstrap has a reboot utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it. Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primevue coming after the normalized layer.
- Tailwind CSS includes a reset utility in base called preflight. If you are using this feature, wrap the base and utilities in separate layers
- and make sure primevue layer comes after the base.
- CSS Layer.
Example layer configuration for the popular CSS libraries.
+Bootstrap has a reboot utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.
++ Tailwind CSS includes a reset utility in base called preflight. If you are using this feature, wrap the base and utilities in + separate layers and make sure primevue layer comes after the base. +
+Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primevue coming after the normalized layer.
+A CSS layer is utilized in styled mode only, in unstyled mode the built-in CSS classes are not included and as a result no layer is defined. This documentation only applies to styled mode.
The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at - MDN to begin with. In styled mode, PrimeVue wraps the built-in style classes under the primevue cascade layer to make the library styles easy to override. CSS in - your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written. + MDN to begin with. In styled mode, when the cssLayer option is enabled at theme configuration, PrimeVue wraps the built-in style classes under + the primevue cascade layer to make the library styles easy to override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is + written. The cssLayer is disabled by default to avoid compatibility issues with 3rd party CSS libraries which requires a layer configuration for compatibility that is discussed in the next reset section.
For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, .p-inputswitch .p-inputswitch-slider selector needs to be overriden. Without the
@@ -15,7 +15,7 @@
Layers also make it possible to use CSS Modules, view the
Layers also make it easier to use CSS Modules, view the CSS Modules guide for examples.
diff --git a/pages/csslayer/index.vue b/pages/csslayer/index.vue deleted file mode 100644 index 57c258f98..000000000 --- a/pages/csslayer/index.vue +++ /dev/null @@ -1,68 +0,0 @@ - -Best practices for the PrimeVue cascade layer in styled mode.
-