@visns-studio/visns-components 5.8.5 → 5.8.6

package/package.json

@@ -82,7 +82,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.8.5",
+    "version": "5.8.6",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/styles/DataGrid.module.scss

@@ -44,119 +44,7 @@
     }
 }
 
-/* Toggle button styles */
-:global {
-    .react-toggle {
-        touch-action: pan-x;
-        display: inline-block;
-        position: relative;
-        cursor: pointer;
-        background-color: transparent;
-        border: 0;
-        padding: 0;
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-        -webkit-tap-highlight-color: transparent;
-    }
-
-    .react-toggle-screenreader-only {
-        border: 0;
-        clip: rect(0 0 0 0);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        width: 1px;
-    }
-
-    .react-toggle-track {
-        width: 50px;
-        height: 24px;
-        padding: 0;
-        border-radius: 30px;
-        background-color: #4d4d4d;
-        transition: all 0.2s ease;
-    }
-
-    .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-        background-color: #000000;
-    }
-
-    .react-toggle--checked:hover:not(.react-toggle--disabled)
-        .react-toggle-track {
-        opacity: 0.8;
-    }
-
-    .react-toggle-track-check {
-        position: absolute;
-        width: 14px;
-        height: 10px;
-        top: 0px;
-        bottom: 0px;
-        margin-top: auto;
-        margin-bottom: auto;
-        line-height: 0;
-        left: 8px;
-        opacity: 0;
-        transition: opacity 0.25s ease;
-    }
-
-    .react-toggle--checked .react-toggle-track-check {
-        opacity: 1;
-        transition: opacity 0.25s ease;
-    }
-
-    .react-toggle-track-x {
-        position: absolute;
-        width: 10px;
-        height: 10px;
-        top: 0px;
-        bottom: 0px;
-        margin-top: auto;
-        margin-bottom: auto;
-        line-height: 0;
-        right: 10px;
-        opacity: 1;
-        transition: opacity 0.25s ease;
-    }
-
-    .react-toggle--checked .react-toggle-track-x {
-        opacity: 0;
-    }
-
-    .react-toggle-thumb {
-        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-        position: absolute;
-        top: 1px;
-        left: 1px;
-        width: 22px;
-        height: 22px;
-        border: 1px solid #4d4d4d;
-        border-radius: 50%;
-        background-color: #fafafa;
-        box-sizing: border-box;
-        transition: all 0.25s ease;
-    }
-
-    .react-toggle--checked .react-toggle-thumb {
-        left: 27px;
-        border-color: var(--primary-color, #3b82f6);
-    }
-
-    .react-toggle--focus .react-toggle-thumb {
-        box-shadow: 0px 0px 3px 2px var(--primary-color, #3b82f6);
-    }
-
-    .react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
-        box-shadow: 0px 0px 5px 5px var(--primary-color, #3b82f6);
-    }
-}
+/* Toggle button styles are now in global.css */
 
 .vs-datagrid--row:hover {
     .InovuaReactDataGrid__row-cell-wrap {

package/src/components/styles/global.css

@@ -383,23 +383,8 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     z-index: -1 !important;
 }
 
-/* React Toggle Styling */
+/* React Toggle Custom Styling - Overrides for react-toggle/style.css */
 .react-toggle {
-    touch-action: pan-x;
-    display: inline-block;
-    position: relative;
-    cursor: pointer;
-    background-color: transparent;
-    border: 0;
-    padding: 0;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    -webkit-tap-highlight-color: transparent;
     z-index: 2; /* Ensure toggle is above checkbox */
 }
 
@@ -424,98 +409,6 @@ form div:has(.react-toggle) input[type='checkbox'] {
     height: 0 !important;
 }
 
-.react-toggle-screenreader-only {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-.react-toggle-track {
-    width: 50px;
-    height: 24px;
-    padding: 0;
-    border-radius: 30px;
-    background-color: #4d4d4d;
-    transition: all 0.2s ease;
-}
-
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-    background-color: #000000;
-}
-
-.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
-    opacity: 0.8;
-}
-
-.react-toggle-track-check {
-    position: absolute;
-    width: 14px;
-    height: 10px;
-    top: 0px;
-    bottom: 0px;
-    margin-top: auto;
-    margin-bottom: auto;
-    line-height: 0;
-    left: 8px;
-    opacity: 0;
-    transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-check {
-    opacity: 1;
-    transition: opacity 0.25s ease;
-}
-
-.react-toggle-track-x {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    top: 0px;
-    bottom: 0px;
-    margin-top: auto;
-    margin-bottom: auto;
-    line-height: 0;
-    right: 10px;
-    opacity: 1;
-    transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-x {
-    opacity: 0;
-}
-
-.react-toggle-thumb {
-    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    width: 22px;
-    height: 22px;
-    border: 1px solid #4d4d4d;
-    border-radius: 50%;
-    background-color: #fafafa;
-    box-sizing: border-box;
-    transition: all 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-thumb {
-    left: 27px;
-    border-color: var(--primary-color, #3b82f6);
-}
-
-.react-toggle--focus .react-toggle-thumb {
-    box-shadow: 0px 0px 3px 2px var(--primary-color, #3b82f6);
-}
-
-.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
-    box-shadow: 0px 0px 5px 5px var(--primary-color, #3b82f6);
-}
-
 /* Safari-specific fixes for form elements */
 @supports (-webkit-touch-callout: none) {
     /* Safari-specific styles */