@m4l/styles 7.1.13 → 7.1.14-beta.4

package/theme/overrides/M4LExtendedComponents/M4LMap.js

@@ -1,283 +1,285 @@
-const o = (e) => ({
-  M4LMap: {
-    styleOverrides: {
-      "&.M4LMap-root": {
-        width: "100%",
-        height: "100%",
-        flexGrow: "1",
-        overflow: "hidden",
-        position: "relative",
-        /*
-         * Control superior izquierdo
-         */
-        "& .M4LMap-topLeftToolsRoot": {
-          display: "flex",
-          backgroundColor: "blue"
-          //Por cambiar
-        },
-        /**
-         * Control superior derecho
-         */
-        "& .M4LMap-topRigthToolsRoot": {
-          backgroundColor: "blue",
-          //Por cambiar
-          display: "flex",
-          right: 0,
-          position: "absolute",
+const M4LMap = (theme) => {
+  return {
+    M4LMap: {
+      styleOverrides: {
+        "&.M4LMap-root": {
+          width: "100%",
+          height: "100%",
+          flexGrow: "1",
+          overflow: "hidden",
+          position: "relative",
+          /*
+           * Control superior izquierdo
+           */
+          "& .M4LMap-topLeftToolsRoot": {
+            display: "flex",
+            backgroundColor: "blue"
+            //Por cambiar
+          },
           /**
-           * Zoom buttons
+           * Control superior derecho
            */
-          "& .M4LMap-zoomButtons": {
-            display: "flex"
-          }
-        },
-        /**
-         * Marcas
-         */
-        "& .M4LMap-markerLayerRoot": {},
-        "& .M4LMap-markerLayerIcon": {
-          transformOrigin: "center center",
-          justifyContent: "center",
-          top: 0,
-          left: 0,
-          filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.4))",
-          display: "flex",
-          alignItems: "center",
-          " > img ": {
+          "& .M4LMap-topRigthToolsRoot": {
+            backgroundColor: "blue",
+            //Por cambiar
+            display: "flex",
+            right: 0,
+            position: "absolute",
+            /**
+             * Zoom buttons
+             */
+            "& .M4LMap-zoomButtons": {
+              display: "flex"
+            }
+          },
+          /**
+           * Marcas
+           */
+          "& .M4LMap-markerLayerRoot": {},
+          "& .M4LMap-markerLayerIcon": {
+            transformOrigin: "center center",
+            justifyContent: "center",
+            top: 0,
+            left: 0,
+            filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.4))",
+            display: "flex",
+            alignItems: "center",
+            " > img ": {
+              height: "24px"
+            }
+          },
+          "& .M4LMap-featureLabel": {
+            position: "absolute",
+            display: "flex",
+            transformOrigin: "left center",
+            fontSize: "11px",
+            borderRadius: "4px",
+            maxWidth: "300px",
+            fontWeight: "bolder",
+            padding: "2px 8px",
+            opacity: ".85",
+            filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.3))",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          },
+          //Herramienta de medición Formulario
+          "& .M4LMap-meaureToolRoot": {
+            backgroundColor: "green",
+            //Por cambiar
+            height: "100%",
+            width: "100%"
+          },
+          "& .M4LMap-measureToolFormValue": {
+            justifyContent: "center"
+          },
+          "& .M4LMap-measureToolFormValueDistance": {
+            border: "1px solid white",
+            margin: "0 5px",
+            fontWeight: 800,
+            //Por cambiar
+            fontSize: "large"
+            //Por cambiar
+          },
+          //Marker measure Point Icon
+          "& .M4LMap-measureMarkerRoot": {
+            "--color": "green"
+          },
+          "& .M4LMap-measureMarkerContainer": {
+            position: "relative",
+            cursor: "pointer"
+          },
+          "& .M4LMap-measureMarkerContainerRhomb": {
+            position: "absolute",
+            filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.4))",
+            width: "31px",
+            height: "31px",
+            borderRadius: "50% 50% 50% 0",
+            border: "4px solid var(--color)",
+            backgroundColor: "var(--color)",
+            transform: "rotate(-45deg)"
+          },
+          "& .M4LMap-measureMarkerContainerSlot": {
+            position: "absolute",
+            background: "#fff",
+            borderRadius: "50%",
+            overflow: "hidden",
+            top: "3px",
+            left: "3px",
+            width: "25px",
             height: "24px"
+          },
+          "& .M4LMap-measureMarkerContainerSlotNumber": {
+            fontSize: "14px",
+            fontWeight: "600",
+            textAlign: "center",
+            marginTop: "1px",
+            color: "black"
+          },
+          //Marker Point Label
+          "& .M4LMap-measureLabelMarkerRoot": {
+            "--color": "yellow"
+          },
+          "& .M4LMap-measureLabelMarkerContainer": {
+            backgroundColor: "var(--color)",
+            border: "1px solid gray",
+            color: "#fff",
+            width: "80px",
+            marginLeft: "15px",
+            marginTop: "15px"
+          },
+          "& .M4LMap-measureLabelMarkerDistance": {
+            color: "gray"
+          },
+          "& .M4LMap-measureLabelMarkerRemove": {
+            color: "blue"
+          },
+          //Cluster Markers
+          //Animacion
+          "& .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow": {
+            "-webkit-transition": "-webkit-transform 0.3s ease-out, opacity 0.3s ease-in",
+            "-moz-transition": "-moz-transform 0.3s ease-out, opacity 0.3s ease-in",
+            "-o-transition": "-o-transform 0.3s ease-out, opacity 0.3s ease-in",
+            transition: "transform 0.3s ease-out, opacity 0.3s ease-in"
+          },
+          //Spider
+          "& .leaflet-cluster-spider-leg": {
+            "-webkit-transition": "-webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in",
+            "-moz-transition": "-moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in",
+            "-o-transition": "-o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in",
+            transition: "stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in"
+          },
+          //Colores de los clusters dependiendo de la cantidad de las marcas
+          "& .marker-cluster-small": {
+            backgroundColor: "rgba(181, 226, 140, 0.6)"
+          },
+          "& .marker-cluster-small div": {
+            backgroundColor: "rgba(110, 204, 57, 0.6)"
+          },
+          "& .marker-cluster-medium": {
+            backgroundColor: "rgba(241, 211, 87, 0.6)"
+          },
+          "& .marker-cluster-medium div": {
+            backgroundColor: "rgba(240, 194, 12, 0.6)"
+          },
+          "& .marker-cluster-large": {
+            backgroundColor: "rgba(253, 156, 115, 0.6)"
+          },
+          "& .marker-cluster-large div": {
+            backgroundColor: "rgba(241, 128, 23, 0.6)"
+          },
+          /* IE 6-8 fallback colors */
+          "& .leaflet-oldie .marker-cluster-small": {
+            backgroundColor: "rgb(181, 226, 140)"
+          },
+          "& .leaflet-oldie .marker-cluster-small div": {
+            backgroundColor: "rgb(110, 204, 57)"
+          },
+          "& .leaflet-oldie .marker-cluster-medium": {
+            backgroundColor: "rgb(241, 211, 87)"
+          },
+          "& .leaflet-oldie .marker-cluster-medium div": {
+            backgroundColor: "rgb(240, 194, 12)"
+          },
+          "& .leaflet-oldie .marker-cluster-large": {
+            backgroundColor: "rgb(253, 156, 115)"
+          },
+          "& .leaflet-oldie .marker-cluster-large div": {
+            backgroundColor: "rgb(241, 128, 23)"
+          },
+          //Cluster Markers
+          "& .marker-cluster": {
+            backgroundClip: "padding-box",
+            borderRadius: "20px"
+          },
+          "& .marker-cluster div": {
+            width: "30px",
+            height: "30px",
+            marginLeft: "5px",
+            marginTop: "5px",
+            textAlign: "center",
+            borderRadius: "15px",
+            font: '12px "Helvetica Neue", Arial, Helvetica, sans-serif'
+          },
+          //Cluster Markers
+          "& .marker-cluster span": {
+            lineHeight: "30px"
+          },
+          "& .xxxxx": {
+            color: theme.vars.palette.error.main,
+            "& .M4LIcon-root .M4LIcon-icon": {
+              backgroundColor: theme.vars.palette.error.main
+            }
+          },
+          "& .leaflet-control-scale-line": {
+            color: "red"
+            //Ejemplo de como estilar el control de scala
           }
-        },
-        "& .M4LMap-featureLabel": {
-          position: "absolute",
-          display: "flex",
-          transformOrigin: "left center",
-          fontSize: "11px",
-          borderRadius: "4px",
-          maxWidth: "300px",
-          fontWeight: "bolder",
-          padding: "2px 8px",
-          opacity: ".85",
-          filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.3))",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis"
-        },
-        //Herramienta de medición Formulario
-        "& .M4LMap-meaureToolRoot": {
-          backgroundColor: "green",
-          //Por cambiar
-          height: "100%",
-          width: "100%"
-        },
-        "& .M4LMap-measureToolFormValue": {
-          justifyContent: "center"
-        },
-        "& .M4LMap-measureToolFormValueDistance": {
-          border: "1px solid white",
-          margin: "0 5px",
-          fontWeight: 800,
-          //Por cambiar
-          fontSize: "large"
-          //Por cambiar
-        },
-        //Marker measure Point Icon
-        "& .M4LMap-measureMarkerRoot": {
-          "--color": "green"
-        },
-        "& .M4LMap-measureMarkerContainer": {
-          position: "relative",
-          cursor: "pointer"
-        },
-        "& .M4LMap-measureMarkerContainerRhomb": {
-          position: "absolute",
-          filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.4))",
-          width: "31px",
-          height: "31px",
-          borderRadius: "50% 50% 50% 0",
-          border: "4px solid var(--color)",
-          backgroundColor: "var(--color)",
-          transform: "rotate(-45deg)"
-        },
-        "& .M4LMap-measureMarkerContainerSlot": {
-          position: "absolute",
-          background: "#fff",
-          borderRadius: "50%",
-          overflow: "hidden",
-          top: "3px",
-          left: "3px",
-          width: "25px",
-          height: "24px"
-        },
-        "& .M4LMap-measureMarkerContainerSlotNumber": {
-          fontSize: "14px",
-          fontWeight: "600",
-          textAlign: "center",
-          marginTop: "1px",
-          color: "black"
-        },
-        //Marker Point Label
-        "& .M4LMap-measureLabelMarkerRoot": {
-          "--color": "yellow"
-        },
-        "& .M4LMap-measureLabelMarkerContainer": {
-          backgroundColor: "var(--color)",
-          border: "1px solid gray",
-          color: "#fff",
-          width: "80px",
-          marginLeft: "15px",
-          marginTop: "15px"
-        },
-        "& .M4LMap-measureLabelMarkerDistance": {
-          color: "gray"
-        },
-        "& .M4LMap-measureLabelMarkerRemove": {
-          color: "blue"
-        },
-        //Cluster Markers
-        //Animacion
-        "& .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow": {
-          "-webkit-transition": "-webkit-transform 0.3s ease-out, opacity 0.3s ease-in",
-          "-moz-transition": "-moz-transform 0.3s ease-out, opacity 0.3s ease-in",
-          "-o-transition": "-o-transform 0.3s ease-out, opacity 0.3s ease-in",
-          transition: "transform 0.3s ease-out, opacity 0.3s ease-in"
-        },
-        //Spider
-        "& .leaflet-cluster-spider-leg": {
-          "-webkit-transition": "-webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in",
-          "-moz-transition": "-moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in",
-          "-o-transition": "-o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in",
-          transition: "stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in"
-        },
-        //Colores de los clusters dependiendo de la cantidad de las marcas
-        "& .marker-cluster-small": {
-          backgroundColor: "rgba(181, 226, 140, 0.6)"
-        },
-        "& .marker-cluster-small div": {
-          backgroundColor: "rgba(110, 204, 57, 0.6)"
-        },
-        "& .marker-cluster-medium": {
-          backgroundColor: "rgba(241, 211, 87, 0.6)"
-        },
-        "& .marker-cluster-medium div": {
-          backgroundColor: "rgba(240, 194, 12, 0.6)"
-        },
-        "& .marker-cluster-large": {
-          backgroundColor: "rgba(253, 156, 115, 0.6)"
-        },
-        "& .marker-cluster-large div": {
-          backgroundColor: "rgba(241, 128, 23, 0.6)"
-        },
-        /* IE 6-8 fallback colors */
-        "& .leaflet-oldie .marker-cluster-small": {
-          backgroundColor: "rgb(181, 226, 140)"
-        },
-        "& .leaflet-oldie .marker-cluster-small div": {
-          backgroundColor: "rgb(110, 204, 57)"
-        },
-        "& .leaflet-oldie .marker-cluster-medium": {
-          backgroundColor: "rgb(241, 211, 87)"
-        },
-        "& .leaflet-oldie .marker-cluster-medium div": {
-          backgroundColor: "rgb(240, 194, 12)"
-        },
-        "& .leaflet-oldie .marker-cluster-large": {
-          backgroundColor: "rgb(253, 156, 115)"
-        },
-        "& .leaflet-oldie .marker-cluster-large div": {
-          backgroundColor: "rgb(241, 128, 23)"
-        },
-        //Cluster Markers
-        "& .marker-cluster": {
-          backgroundClip: "padding-box",
-          borderRadius: "20px"
-        },
-        "& .marker-cluster div": {
-          width: "30px",
-          height: "30px",
-          marginLeft: "5px",
-          marginTop: "5px",
-          textAlign: "center",
-          borderRadius: "15px",
-          font: '12px "Helvetica Neue", Arial, Helvetica, sans-serif'
-        },
-        //Cluster Markers
-        "& .marker-cluster span": {
-          lineHeight: "30px"
-        },
-        "& .xxxxx": {
-          color: e.vars.palette.error.main,
-          "& .M4LIcon-root .M4LIcon-icon": {
-            backgroundColor: e.vars.palette.error.main
-          }
-        },
-        "& .leaflet-control-scale-line": {
-          color: "red"
-          //Ejemplo de como estilar el control de scala
         }
       }
-    }
-  },
-  M4LMapMapSources: {
-    styleOverrides: {
-      "&.M4LMap-mapSourcesPopoverRoot": {
-        mt: 1.5,
-        ml: 0.75,
-        "& .MuiPaper-root": {
-          backgroundColor: "gray",
-          //Por cambiar
-          width: "400px!important",
-          height: 400
-        },
-        "& .M4LMap-mapSourcesRoot": {
-          postion: "relative",
-          height: "100%",
-          "& .M4LMap-mapSourcesOption": {
-            display: "flex",
-            "& .M4LMap-mapSourcesOptionIconLabel": {
-              display: "flex"
-            },
-            "& .M4LMap-mapSourcesOptionRoadOptions": {
+    },
+    M4LMapMapSources: {
+      styleOverrides: {
+        "&.M4LMap-mapSourcesPopoverRoot": {
+          mt: 1.5,
+          ml: 0.75,
+          "& .MuiPaper-root": {
+            backgroundColor: "gray",
+            //Por cambiar
+            width: "400px!important",
+            height: 400
+          },
+          "& .M4LMap-mapSourcesRoot": {
+            postion: "relative",
+            height: "100%",
+            "& .M4LMap-mapSourcesOption": {
               display: "flex",
-              "& .M4LMap-mapSourcesOptionRoadOptionsCheck": {
+              "& .M4LMap-mapSourcesOptionIconLabel": {
                 display: "flex"
+              },
+              "& .M4LMap-mapSourcesOptionRoadOptions": {
+                display: "flex",
+                "& .M4LMap-mapSourcesOptionRoadOptionsCheck": {
+                  display: "flex"
+                }
               }
             }
           }
         }
       }
-    }
-  },
-  M4LMapLayers: {
-    styleOverrides: {
-      "&.M4LMap-layersPopoverRoot": {
-        mt: 1.5,
-        ml: 0.75,
-        "& .MuiPaper-root": {
-          backgroundColor: "gray",
-          //Por cambiar
-          width: "400px!important",
-          height: 400
-        },
-        "& .M4LMap-mapSourcesRoot": {
-          postion: "relative",
-          height: "100%",
-          "& .M4LMap-mapSourcesOption": {
-            display: "flex",
-            "& .M4LMap-mapSourcesOptionIconLabel": {
-              display: "flex"
-            },
-            "& .M4LMap-mapSourcesOptionRoadOptions": {
+    },
+    M4LMapLayers: {
+      styleOverrides: {
+        "&.M4LMap-layersPopoverRoot": {
+          mt: 1.5,
+          ml: 0.75,
+          "& .MuiPaper-root": {
+            backgroundColor: "gray",
+            //Por cambiar
+            width: "400px!important",
+            height: 400
+          },
+          "& .M4LMap-mapSourcesRoot": {
+            postion: "relative",
+            height: "100%",
+            "& .M4LMap-mapSourcesOption": {
               display: "flex",
-              "& .M4LMap-mapSourcesOptionRoadOptionsCheck": {
+              "& .M4LMap-mapSourcesOptionIconLabel": {
                 display: "flex"
+              },
+              "& .M4LMap-mapSourcesOptionRoadOptions": {
+                display: "flex",
+                "& .M4LMap-mapSourcesOptionRoadOptionsCheck": {
+                  display: "flex"
+                }
               }
             }
           }
         }
       }
     }
-  }
-});
+  };
+};
 export {
-  o as M
+  M4LMap as M
 };

package/theme/overrides/M4LExtendedComponents/M4LMapGpsTools.js

@@ -1,62 +1,64 @@
-const s = (o) => ({
-  M4LMapGpsTools: {
-    styleOverrides: {
-      "&.M4LMapGpsTools-gpsToolsRoot": {
-        position: "relative",
-        display: "flex",
-        flexDirection: "column",
-        flexGrow: 1,
-        width: "100%",
-        height: "100%",
-        "& .M4LMapGpsTools-gpsToolsTabContent.M4LMapGpsTools-hidden": {
-          display: "none"
+const M4LMapGpsTools = (_theme) => {
+  return {
+    M4LMapGpsTools: {
+      styleOverrides: {
+        "&.M4LMapGpsTools-gpsToolsRoot": {
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          flexGrow: 1,
+          width: "100%",
+          height: "100%",
+          "& .M4LMapGpsTools-gpsToolsTabContent.M4LMapGpsTools-hidden": {
+            display: "none"
+          }
         }
       }
-    }
-  },
-  M4LMapGpsToolsGeofencesList: {
-    styleOverrides: {
-      "&.M4LMapGpsTools-gpsToolsGeofencesList": {
-        padding: "12px",
-        position: "relative !important",
-        flexGrow: 1,
-        width: "100%",
-        "& .M4LDataGrid-root": {
-          height: "unset !important",
-          flexGrow: 1
+    },
+    M4LMapGpsToolsGeofencesList: {
+      styleOverrides: {
+        "&.M4LMapGpsTools-gpsToolsGeofencesList": {
+          padding: "12px",
+          position: "relative !important",
+          flexGrow: 1,
+          width: "100%",
+          "& .M4LDataGrid-root": {
+            height: "unset !important",
+            flexGrow: 1
+          }
         }
       }
-    }
-  },
-  M4LMapGpsToolsGeofencesAddEdit: {
-    styleOverrides: {
-      "&.M4LMapGpsTools-gpsToolsGeofencesAddEdit": {
-        height: "100% !important",
-        "& .M4LMapGpsTools-gpsToolsGeofencesAddEditContent": {
-          overflow: "hidden",
-          display: "flex",
-          flexDirection: "column",
-          flexGrow: 1,
-          // height: '100%',
-          "& .M4LMapGpsTools-gpsToolsTabContent": {
-            padding: "12px",
-            overflow: "auto"
-          },
-          "& .M4LMapGpsTools-gpsToolsGeofencesAddEditDrawFinishContainer": {
+    },
+    M4LMapGpsToolsGeofencesAddEdit: {
+      styleOverrides: {
+        "&.M4LMapGpsTools-gpsToolsGeofencesAddEdit": {
+          height: "100% !important",
+          "& .M4LMapGpsTools-gpsToolsGeofencesAddEditContent": {
+            overflow: "hidden",
             display: "flex",
-            minWidth: "60px",
-            marginTop: "14px"
-            // justifyContent: 'flex-end',
-            // padding: '12px',
+            flexDirection: "column",
+            flexGrow: 1,
+            // height: '100%',
+            "& .M4LMapGpsTools-gpsToolsTabContent": {
+              padding: "12px",
+              overflow: "auto"
+            },
+            "& .M4LMapGpsTools-gpsToolsGeofencesAddEditDrawFinishContainer": {
+              display: "flex",
+              minWidth: "60px",
+              marginTop: "14px"
+              // justifyContent: 'flex-end',
+              // padding: '12px',
+            }
+          },
+          "& .M4LMapGpsTools-gpsToolsTabContent.M4LMapGpsTools-hidden": {
+            display: "none"
           }
-        },
-        "& .M4LMapGpsTools-gpsToolsTabContent.M4LMapGpsTools-hidden": {
-          display: "none"
         }
       }
     }
-  }
-});
+  };
+};
 export {
-  s as M
+  M4LMapGpsTools as M
 };