Remove !important from component CSS

primefaces · Oct 20, 2023 · 4b58468 · 4b58468
1 parent 0aca1e9
commit 4b58468
Show file tree

Hide file tree

Showing 15 changed files with 27 additions and 27 deletions.
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
@@ -233,7 +233,7 @@ export const CascadeSelect = React.memo(
     }
 
     .p-cascadeselect-panel[${selector}] .p-cascadeselect-item-active > .p-cascadeselect-sublist {
-        left: 0 !important;
+        left: 0;
         box-shadow: none;
         border-radius: 0;
         padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */

diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js
@@ -121,7 +121,7 @@ const styles = `
     }
     
     .p-cascadeselect-item-active {
-        overflow: visible !important;
+        overflow: visible;
     }
     
     .p-cascadeselect-item-active > .p-cascadeselect-sublist {

diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js
@@ -316,7 +316,7 @@ const commonStyle = `
     }
 
     .p-disabled, .p-disabled * {
-        cursor: default !important;
+        cursor: default;
         pointer-events: none;
         user-select: none;
     }
@@ -442,7 +442,7 @@ const commonStyle = `
         padding: 0;
         position: absolute;
         width: 1px;
-        word-wrap: normal !important;
+        word-wrap: normal;
     }
 
     /* @todo Refactor */

diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
@@ -78,7 +78,7 @@ export const ContextMenu = React.memo(
     }
 
     .p-contextmenu[${selector}] .p-menuitem-active > .p-submenu-list {
-        left: 0 !important;
+        left: 0;
         box-shadow: none;
         border-radius: 0;
         padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */

diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
@@ -387,7 +387,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         let selector = `.p-datatable[${attributeSelector.current}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
 
         widths.forEach((width, index) => {
-            let style = `width: ${width}px !important; max-width: ${width}px !important`;
+            let style = `width: ${width}px; max-width: ${width}px`;
 
             innerHTML += `
                 ${selector} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
@@ -599,7 +599,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
 
         widths.forEach((width, index) => {
             let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
-            let style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important`;
+            let style = `width: ${colWidth}px; max-width: ${colWidth}px`;
 
             innerHTML += `
                 ${selector} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
@@ -805,12 +805,12 @@ export const DataTable = React.forwardRef((inProps, ref) => {
 @media screen and (max-width: ${props.breakpoint}) {
     ${selector} > .p-datatable-thead > tr > th,
     ${selector} > .p-datatable-tfoot > tr > td {
-        display: none !important;
+        display: none;
     }
 
     ${selector} > .p-datatable-tbody > tr > td {
         display: flex;
-        width: 100% !important;
+        width: 100%;
         align-items: center;
         justify-content: space-between;
     }

diff --git a/components/lib/datatable/DataTableBase.js b/components/lib/datatable/DataTableBase.js
@@ -116,7 +116,7 @@ const styles = `
 
     .p-datatable .p-column-resizer {
         display: block;
-        position: absolute !important;
+        position: absolute;
         top: 0;
         right: 0;
         margin: 0;
@@ -254,7 +254,7 @@ const styles = `
     }
 
     .p-datatable .p-virtualscroller .p-virtualscroller-loading {
-        transform: none !important;
+        transform: none;
         min-height: 0;
         position: sticky;
         top: 0;

diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
@@ -397,7 +397,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
             innerHTML += `
                 @media screen and (max-width: ${breakpoint}) {
                     .p-dialog[${attributeSelector.current}] {
-                        width: ${props.breakpoints[breakpoint]} !important;
+                        width: ${props.breakpoints[breakpoint]};
                     }
                 }
             `;

diff --git a/components/lib/dialog/DialogBase.js b/components/lib/dialog/DialogBase.js
@@ -192,12 +192,12 @@ const styles = `
     .p-dialog-maximized {
         transition: none;
         transform: none;
-        margin: 0 !important;
-        width: 100vw !important;
-        height: 100vh !important;
+        margin: 0;
+        width: 100vw;
+        height: 100vh;
         max-height: 100%;
-        top: 0px !important;
-        left: 0px !important;
+        top: 0px;
+        left: 0px;
     }
     
     .p-dialog-maximized .p-dialog-content {

diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js
@@ -452,7 +452,7 @@ export const MegaMenu = React.memo(
 @media screen and (max-width: ${props.breakpoint}) {
     .p-megamenu[${selector}] > .p-megamenu-root-list .p-menuitem-active .p-megamenu-panel {
         position: relative;
-        left: 0 !important;
+        left: 0;
         box-shadow: none;
         border-radius: 0;
         background: inherit;

diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
@@ -181,7 +181,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
                 innerHTML += `
                     @media screen and (max-width: ${breakpoint}) {
                         .p-overlaypanel[${attributeSelector.current}] {
-                            width: ${props.breakpoints[breakpoint]} !important;
+                            width: ${props.breakpoints[breakpoint]};
                         }
                     }
                 `;

diff --git a/components/lib/ripple/RippleBase.js b/components/lib/ripple/RippleBase.js
@@ -20,7 +20,7 @@ const styles = `
     }
     
     .p-ripple-disabled .p-ink {
-        display: none !important;
+        display: none;
     }
 }
 

diff --git a/components/lib/scrolltop/ScrollTopBase.js b/components/lib/scrolltop/ScrollTopBase.js
@@ -30,7 +30,7 @@ const styles = `
     }
     
     .p-scrolltop-helper {
-        display: none !important;
+        display: none;
     }
     
     .p-scrolltop-enter {

diff --git a/components/lib/sidebar/SidebarBase.js b/components/lib/sidebar/SidebarBase.js
@@ -94,11 +94,11 @@ const styles = `
     .p-sidebar-full .p-sidebar {
         transition: none;
         transform: none;
-        width: 100vw !important;
-        height: 100vh !important;
+        width: 100vw;
+        height: 100vh;
         max-height: 100%;
-        top: 0px !important;
-        left: 0px !important;
+        top: 0px;
+        left: 0px;
     }
     
     /* Animation */

diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
@@ -94,7 +94,7 @@ export const TieredMenu = React.memo(
     }
 
     .p-tieredmenu[${selector}] .p-menuitem-active > .p-submenu-list {
-        left: 0 !important;
+        left: 0;
         box-shadow: none;
         border-radius: 0;
         padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */

diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js
@@ -69,7 +69,7 @@ const styles = `
     
     .p-treetable .p-column-resizer {
         display: block;
-        position: absolute !important;
+        position: absolute;
         top: 0;
         right: 0;
         margin: 0;
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,7 @@ const styles = ` @@
         }
         .p-ripple-disabled .p-ink {
-            display: none !important;
+            display: none;
         }
     }
@@ Expand Down @@