@lets-events/react 12.1.10 → 12.1.12

package/dist/index.mjs

@@ -10891,7 +10891,6 @@ import { useEffect as useEffect7, useState as useState10 } from "react";
 // src/components/RichEditor/QuillComponent.tsx
 import { useState as useState9, useRef as useRef8, useEffect as useEffect6, useCallback as useCallback4 } from "react";
 import { useQuill } from "react-quilljs";
-import "quill/dist/quill.snow.css";
 
 // src/utils/uploadService.ts
 var generateUniqueFilename = (originalName) => {
@@ -11034,55 +11033,913 @@ var QuillContainer = styled("div", {
   flexDirection: "column"
 });
 var QuillEditor = styled("div", {
+  // Base container
+  "& .ql-container": {
+    boxSizing: "border-box",
+    fontFamily: "Helvetica, Arial, sans-serif",
+    fontSize: "13px",
+    height: "100%",
+    margin: 0,
+    position: "relative",
+    border: "1px solid $neutral300",
+    borderTop: "none",
+    borderBottomLeftRadius: "$sm",
+    borderBottomRightRadius: "$sm"
+  },
+  "& .ql-container.ql-disabled .ql-tooltip": {
+    visibility: "hidden"
+  },
+  "& .ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui, & .ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui": {
+    cursor: "pointer"
+  },
+  // Clipboard
+  "& .ql-clipboard": {
+    left: "-100000px",
+    height: "1px",
+    overflowY: "hidden",
+    position: "absolute",
+    top: "50%"
+  },
+  "& .ql-clipboard p": {
+    margin: 0,
+    padding: 0
+  },
+  // Editor
   "& .ql-editor": {
-    minHeight: "200px",
+    boxSizing: "border-box",
+    counterReset: "list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9",
+    lineHeight: "1.42",
+    height: "100%",
+    outline: "none",
+    overflowY: "auto",
     padding: "$12",
+    tabSize: 4,
+    MozTabSize: 4,
+    textAlign: "left",
+    whiteSpace: "pre-wrap",
+    wordWrap: "break-word",
+    minHeight: "200px",
     fontSize: "$14",
-    lineHeight: "$base",
     fontFamily: "$default",
     color: "$neutral900",
     backgroundColor: "$white",
     border: "none",
-    outline: "none",
     cursor: "text",
     caretColor: "$primary500",
+    "& > *": {
+      cursor: "text"
+    },
     "&:focus": {
       borderColor: "$primary500",
       boxShadow: "0 0 0 1px $primary500"
     },
+    "& p, & ol, & pre, & blockquote, & h1, & h2, & h3, & h4, & h5, & h6": {
+      margin: 0,
+      padding: 0
+    },
     "& p": {
       margin: "0 0 $8 0"
     },
+    "& p:last-child": {
+      marginBottom: 0
+    },
+    "& h1": {
+      fontSize: "2em"
+    },
+    "& h2": {
+      fontSize: "1.5em"
+    },
+    "& h3": {
+      fontSize: "1.17em"
+    },
+    "& h4": {
+      fontSize: "1em"
+    },
+    "& h5": {
+      fontSize: "0.83em"
+    },
+    "& h6": {
+      fontSize: "0.67em"
+    },
     "& h1 span, & h1, & h2, & h2 span": {
       lineHeight: "1.5rem"
     },
-    "& p:last-child": {
-      marginBottom: 0
+    "& table": {
+      borderCollapse: "collapse",
+      tableLayout: "fixed",
+      width: "100%"
+    },
+    "& td": {
+      border: "1px solid #000",
+      padding: "2px 5px",
+      outline: "none"
+    },
+    "& ol": {
+      paddingLeft: "1.5em"
+    },
+    "& li": {
+      listStyleType: "none",
+      paddingLeft: "1.5em",
+      position: "relative"
+    },
+    "& li > .ql-ui:before": {
+      display: "inline-block",
+      marginLeft: "-1.5em",
+      marginRight: "0.3em",
+      textAlign: "right",
+      whiteSpace: "nowrap",
+      width: "1.2em"
+    },
+    "& li[data-list=checked] > .ql-ui, & li[data-list=unchecked] > .ql-ui": {
+      color: "#777"
+    },
+    "& li[data-list=bullet] > .ql-ui:before": {
+      content: "'\\2022'"
+    },
+    "& li[data-list=checked] > .ql-ui:before": {
+      content: "'\\2611'"
+    },
+    "& li[data-list=unchecked] > .ql-ui:before": {
+      content: "'\\2610'"
+    },
+    "& li[data-list=ordered]": {
+      counterIncrement: "list-0"
+    },
+    "& li[data-list=ordered] > .ql-ui:before": {
+      content: "counter(list-0, decimal) '. '"
+    },
+    "& li[data-list=ordered].ql-indent-1": {
+      counterIncrement: "list-1"
+    },
+    "& li[data-list=ordered].ql-indent-1 > .ql-ui:before": {
+      content: "counter(list-1, lower-alpha) '. '"
+    },
+    "& li[data-list=ordered].ql-indent-2": {
+      counterIncrement: "list-2"
+    },
+    "& li[data-list=ordered].ql-indent-2 > .ql-ui:before": {
+      content: "counter(list-2, lower-roman) '. '"
+    },
+    "& li[data-list=ordered].ql-indent-3": {
+      counterIncrement: "list-3"
+    },
+    "& li[data-list=ordered].ql-indent-3 > .ql-ui:before": {
+      content: "counter(list-3, decimal) '. '"
+    },
+    "& li[data-list=ordered].ql-indent-4": {
+      counterIncrement: "list-4"
+    },
+    "& li[data-list=ordered].ql-indent-4 > .ql-ui:before": {
+      content: "counter(list-4, lower-alpha) '. '"
+    },
+    "& li[data-list=ordered].ql-indent-5": {
+      counterIncrement: "list-5"
+    },
+    "& li[data-list=ordered].ql-indent-5 > .ql-ui:before": {
+      content: "counter(list-5, lower-roman) '. '"
+    },
+    "& li[data-list=ordered].ql-indent-6": {
+      counterIncrement: "list-6"
+    },
+    "& li[data-list=ordered].ql-indent-6 > .ql-ui:before": {
+      content: "counter(list-6, decimal) '. '"
+    },
+    "& li[data-list=ordered].ql-indent-7": {
+      counterIncrement: "list-7"
+    },
+    "& li[data-list=ordered].ql-indent-7 > .ql-ui:before": {
+      content: "counter(list-7, lower-alpha) '. '"
+    },
+    "& li[data-list=ordered].ql-indent-8": {
+      counterIncrement: "list-8"
+    },
+    "& li[data-list=ordered].ql-indent-8 > .ql-ui:before": {
+      content: "counter(list-8, lower-roman) '. '"
+    },
+    "& li[data-list=ordered].ql-indent-9": {
+      counterIncrement: "list-9"
+    },
+    "& li[data-list=ordered].ql-indent-9 > .ql-ui:before": {
+      content: "counter(list-9, decimal) '. '"
+    },
+    // Indents
+    "& .ql-indent-1:not(.ql-direction-rtl)": {
+      paddingLeft: "3em"
+    },
+    "& li.ql-indent-1:not(.ql-direction-rtl)": {
+      paddingLeft: "4.5em"
+    },
+    "& .ql-indent-1.ql-direction-rtl.ql-align-right": {
+      paddingRight: "3em"
+    },
+    "& li.ql-indent-1.ql-direction-rtl.ql-align-right": {
+      paddingRight: "4.5em"
+    },
+    "& .ql-indent-2:not(.ql-direction-rtl)": {
+      paddingLeft: "6em"
+    },
+    "& li.ql-indent-2:not(.ql-direction-rtl)": {
+      paddingLeft: "7.5em"
+    },
+    "& .ql-indent-2.ql-direction-rtl.ql-align-right": {
+      paddingRight: "6em"
+    },
+    "& li.ql-indent-2.ql-direction-rtl.ql-align-right": {
+      paddingRight: "7.5em"
+    },
+    "& .ql-indent-3:not(.ql-direction-rtl)": {
+      paddingLeft: "9em"
+    },
+    "& li.ql-indent-3:not(.ql-direction-rtl)": {
+      paddingLeft: "10.5em"
+    },
+    "& .ql-indent-3.ql-direction-rtl.ql-align-right": {
+      paddingRight: "9em"
+    },
+    "& li.ql-indent-3.ql-direction-rtl.ql-align-right": {
+      paddingRight: "10.5em"
+    },
+    "& .ql-indent-4:not(.ql-direction-rtl)": {
+      paddingLeft: "12em"
+    },
+    "& li.ql-indent-4:not(.ql-direction-rtl)": {
+      paddingLeft: "13.5em"
+    },
+    "& .ql-indent-4.ql-direction-rtl.ql-align-right": {
+      paddingRight: "12em"
+    },
+    "& li.ql-indent-4.ql-direction-rtl.ql-align-right": {
+      paddingRight: "13.5em"
+    },
+    "& .ql-indent-5:not(.ql-direction-rtl)": {
+      paddingLeft: "15em"
+    },
+    "& li.ql-indent-5:not(.ql-direction-rtl)": {
+      paddingLeft: "16.5em"
+    },
+    "& .ql-indent-5.ql-direction-rtl.ql-align-right": {
+      paddingRight: "15em"
+    },
+    "& li.ql-indent-5.ql-direction-rtl.ql-align-right": {
+      paddingRight: "16.5em"
+    },
+    "& .ql-indent-6:not(.ql-direction-rtl)": {
+      paddingLeft: "18em"
+    },
+    "& li.ql-indent-6:not(.ql-direction-rtl)": {
+      paddingLeft: "19.5em"
+    },
+    "& .ql-indent-6.ql-direction-rtl.ql-align-right": {
+      paddingRight: "18em"
+    },
+    "& li.ql-indent-6.ql-direction-rtl.ql-align-right": {
+      paddingRight: "19.5em"
+    },
+    "& .ql-indent-7:not(.ql-direction-rtl)": {
+      paddingLeft: "21em"
+    },
+    "& li.ql-indent-7:not(.ql-direction-rtl)": {
+      paddingLeft: "22.5em"
+    },
+    "& .ql-indent-7.ql-direction-rtl.ql-align-right": {
+      paddingRight: "21em"
+    },
+    "& li.ql-indent-7.ql-direction-rtl.ql-align-right": {
+      paddingRight: "22.5em"
+    },
+    "& .ql-indent-8:not(.ql-direction-rtl)": {
+      paddingLeft: "24em"
+    },
+    "& li.ql-indent-8:not(.ql-direction-rtl)": {
+      paddingLeft: "25.5em"
+    },
+    "& .ql-indent-8.ql-direction-rtl.ql-align-right": {
+      paddingRight: "24em"
+    },
+    "& li.ql-indent-8.ql-direction-rtl.ql-align-right": {
+      paddingRight: "25.5em"
+    },
+    "& .ql-indent-9:not(.ql-direction-rtl)": {
+      paddingLeft: "27em"
+    },
+    "& li.ql-indent-9:not(.ql-direction-rtl)": {
+      paddingLeft: "28.5em"
+    },
+    "& .ql-indent-9.ql-direction-rtl.ql-align-right": {
+      paddingRight: "27em"
+    },
+    "& li.ql-indent-9.ql-direction-rtl.ql-align-right": {
+      paddingRight: "28.5em"
+    },
+    "& li.ql-direction-rtl": {
+      paddingRight: "1.5em"
+    },
+    "& li.ql-direction-rtl > .ql-ui:before": {
+      marginLeft: "0.3em",
+      marginRight: "-1.5em",
+      textAlign: "left"
+    },
+    // Code blocks
+    "& .ql-code-block-container": {
+      fontFamily: "monospace",
+      backgroundColor: "#23241f",
+      color: "#f8f8f2",
+      overflow: "visible",
+      marginBottom: "5px",
+      marginTop: "5px",
+      padding: "5px 10px"
+    },
+    // Video
+    "& .ql-video": {
+      display: "block",
+      maxWidth: "100%"
+    },
+    "& .ql-video.ql-align-center": {
+      margin: "0 auto"
+    },
+    "& .ql-video.ql-align-right": {
+      margin: "0 0 0 auto"
+    },
+    // Colors
+    "& .ql-bg-black": {
+      backgroundColor: "#000"
+    },
+    "& .ql-bg-red": {
+      backgroundColor: "#e60000"
+    },
+    "& .ql-bg-orange": {
+      backgroundColor: "#f90"
+    },
+    "& .ql-bg-yellow": {
+      backgroundColor: "#ff0"
+    },
+    "& .ql-bg-green": {
+      backgroundColor: "#008a00"
+    },
+    "& .ql-bg-blue": {
+      backgroundColor: "#06c"
+    },
+    "& .ql-bg-purple": {
+      backgroundColor: "#93f"
+    },
+    "& .ql-color-white": {
+      color: "#fff"
+    },
+    "& .ql-color-red": {
+      color: "#e60000"
+    },
+    "& .ql-color-orange": {
+      color: "#f90"
+    },
+    "& .ql-color-yellow": {
+      color: "#ff0"
+    },
+    "& .ql-color-green": {
+      color: "#008a00"
+    },
+    "& .ql-color-blue": {
+      color: "#06c"
+    },
+    "& .ql-color-purple": {
+      color: "#93f"
+    },
+    // Fonts
+    "& .ql-font-serif": {
+      fontFamily: "Georgia, Times New Roman, serif"
+    },
+    "& .ql-font-monospace": {
+      fontFamily: "Monaco, Courier New, monospace"
+    },
+    // Sizes
+    "& .ql-size-small": {
+      fontSize: "0.75em"
+    },
+    "& .ql-size-large": {
+      fontSize: "1.5em"
+    },
+    "& .ql-size-huge": {
+      fontSize: "2.5em"
+    },
+    // Direction
+    "& .ql-direction-rtl": {
+      direction: "rtl",
+      textAlign: "inherit"
+    },
+    // Alignment
+    "& .ql-align-center": {
+      textAlign: "center"
+    },
+    "& .ql-align-justify": {
+      textAlign: "justify"
+    },
+    "& .ql-align-right": {
+      textAlign: "right"
+    },
+    // UI
+    "& .ql-ui": {
+      position: "absolute"
+    },
+    // Formats
+    "& strong": {
+      fontWeight: "bold"
+    },
+    "& em": {
+      fontStyle: "italic"
+    },
+    "& u": {
+      textDecoration: "underline"
+    },
+    "& s": {
+      textDecoration: "line-through"
+    },
+    "& a": {
+      textDecoration: "underline",
+      color: "#06c"
+    },
+    "& blockquote": {
+      borderLeft: "4px solid #ccc",
+      marginBottom: "5px",
+      marginTop: "5px",
+      paddingLeft: "16px"
+    },
+    "& code": {
+      backgroundColor: "#f0f0f0",
+      borderRadius: "3px",
+      fontSize: "85%",
+      padding: "2px 4px"
+    },
+    "& pre": {
+      backgroundColor: "#f0f0f0",
+      borderRadius: "3px",
+      padding: "5px 10px",
+      whiteSpace: "pre-wrap"
+    },
+    "& img": {
+      maxWidth: "100%"
     },
     "& .ql-cursor": {
       borderLeft: "2px solid $primary500"
     }
   },
-  "& .ql-toolbar": {
+  "&.ql-blank::before": {
+    color: "rgba(0, 0, 0, 0.6)",
+    content: "attr(data-placeholder)",
+    fontStyle: "italic",
+    left: "15px",
+    pointerEvents: "none",
+    position: "absolute",
+    right: "15px"
+  },
+  // Toolbar
+  "& .ql-toolbar, &.ql-toolbar": {
     backgroundColor: "$grey100",
     border: "1px solid $neutral300",
     borderBottom: "none",
     borderTopLeftRadius: "$sm",
     borderTopRightRadius: "$sm",
-    padding: "$8 $12"
+    padding: "$8 $12",
+    boxSizing: "border-box",
+    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+    "&::after": {
+      clear: "both",
+      content: "''",
+      display: "table"
+    },
+    "& button": {
+      background: "none",
+      border: "none",
+      cursor: "pointer",
+      display: "inline-block",
+      float: "left",
+      height: "24px",
+      padding: "3px 5px",
+      width: "28px",
+      "& svg": {
+        float: "left",
+        height: "100%"
+      },
+      "&:active:hover": {
+        outline: "none"
+      },
+      "&:hover, &:focus, &.ql-active": {
+        color: "#06c",
+        "& .ql-fill, & .ql-stroke.ql-fill": {
+          fill: "#06c"
+        },
+        "& .ql-stroke, & .ql-stroke-miter": {
+          stroke: "#06c"
+        }
+      }
+    },
+    "& input.ql-image[type=file]": {
+      display: "none"
+    },
+    "& .ql-formats": {
+      display: "inline-block",
+      verticalAlign: "middle",
+      marginRight: "15px",
+      "&::after": {
+        clear: "both",
+        content: "''",
+        display: "table"
+      }
+    },
+    "& .ql-picker-label": {
+      border: "1px solid transparent",
+      "&:hover, &.ql-active": {
+        color: "#06c",
+        "& .ql-fill": {
+          fill: "#06c"
+        },
+        "& .ql-stroke": {
+          stroke: "#06c"
+        }
+      }
+    },
+    "& .ql-picker-options": {
+      border: "1px solid transparent",
+      boxShadow: "rgba(0, 0, 0, 0.2) 0 2px 8px"
+    },
+    "& .ql-picker.ql-expanded .ql-picker-label": {
+      borderColor: "#ccc",
+      "& .ql-fill": {
+        fill: "#ccc"
+      },
+      "& .ql-stroke": {
+        stroke: "#ccc"
+      }
+    },
+    "& .ql-picker.ql-expanded .ql-picker-options": {
+      borderColor: "#ccc"
+    },
+    "& .ql-picker-item": {
+      "&:hover, &.ql-selected": {
+        color: "#06c",
+        "& .ql-fill, & .ql-stroke.ql-fill": {
+          fill: "#06c"
+        },
+        "& .ql-stroke, & .ql-stroke-miter": {
+          stroke: "#06c"
+        }
+      }
+    },
+    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover": {
+      borderColor: "#000"
+    }
   },
-  "& .ql-container": {
-    border: "1px solid $neutral300",
-    borderTop: "none",
-    borderBottomLeftRadius: "$sm",
-    borderBottomRightRadius: "$sm",
-    fontFamily: "$default"
+  "@media (pointer: coarse)": {
+    "& .ql-toolbar button:hover:not(.ql-active)": {
+      color: "#444",
+      "& .ql-fill, & .ql-stroke.ql-fill": {
+        fill: "#444"
+      },
+      "& .ql-stroke, & .ql-stroke-miter": {
+        stroke: "#444"
+      }
+    }
+  },
+  // Snow theme
+  "&, & *": {
+    boxSizing: "border-box"
+  },
+  "& .ql-hidden": {
+    display: "none"
+  },
+  "& .ql-out-bottom, & .ql-out-top": {
+    visibility: "hidden"
+  },
+  "& .ql-tooltip": {
+    position: "absolute",
+    transform: "translateY(10px)",
+    backgroundColor: "#fff",
+    border: "1px solid #ccc",
+    boxShadow: "0 0 5px #ddd",
+    color: "#444",
+    padding: "5px 12px",
+    whiteSpace: "nowrap",
+    "& a": {
+      cursor: "pointer",
+      textDecoration: "none",
+      lineHeight: "26px",
+      color: "#06c"
+    },
+    "&.ql-flip": {
+      transform: "translateY(-10px)"
+    },
+    "&::before": {
+      content: "'Visit URL:'",
+      lineHeight: "26px",
+      marginRight: "8px"
+    },
+    "& input[type=text]": {
+      display: "none",
+      border: "1px solid #ccc",
+      fontSize: "13px",
+      height: "26px",
+      margin: 0,
+      padding: "3px 5px",
+      width: "170px"
+    },
+    "& a.ql-preview": {
+      display: "inline-block",
+      maxWidth: "200px",
+      overflowX: "hidden",
+      textOverflow: "ellipsis",
+      verticalAlign: "top"
+    },
+    "& a.ql-action::after": {
+      borderRight: "1px solid #ccc",
+      content: "'Edit'",
+      marginLeft: "16px",
+      paddingRight: "8px"
+    },
+    "& a.ql-remove::before": {
+      content: "'Remove'",
+      marginLeft: "8px"
+    },
+    "&.ql-editing a.ql-preview, &.ql-editing a.ql-remove": {
+      display: "none"
+    },
+    "&.ql-editing input[type=text]": {
+      display: "inline-block"
+    },
+    "&.ql-editing a.ql-action::after": {
+      borderRight: 0,
+      content: "'Save'",
+      paddingRight: 0
+    },
+    "&[data-mode=link]::before": {
+      content: "'Enter link:'"
+    },
+    "&[data-mode=formula]::before": {
+      content: "'Enter formula:'"
+    },
+    "&[data-mode=video]::before": {
+      content: "'Enter video:'"
+    }
+  },
+  // Stroke and fill
+  "& .ql-stroke": {
+    fill: "none",
+    stroke: "#444",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "2"
+  },
+  "& .ql-stroke-miter": {
+    fill: "none",
+    stroke: "#444",
+    strokeMiterlimit: "10",
+    strokeWidth: "2"
+  },
+  "& .ql-fill, & .ql-stroke.ql-fill": {
+    fill: "#444"
+  },
+  "& .ql-empty": {
+    fill: "none"
+  },
+  "& .ql-even": {
+    fillRule: "evenodd"
+  },
+  "& .ql-thin, & .ql-stroke.ql-thin": {
+    strokeWidth: "1"
+  },
+  "& .ql-transparent": {
+    opacity: 0.4
+  },
+  // Direction
+  "& .ql-direction svg:last-child": {
+    display: "none"
+  },
+  "& .ql-direction.ql-active svg:last-child": {
+    display: "inline"
+  },
+  "& .ql-direction.ql-active svg:first-child": {
+    display: "none"
+  },
+  // Picker
+  "& .ql-picker": {
+    color: "#444",
+    display: "inline-block",
+    float: "left",
+    fontSize: "14px",
+    fontWeight: "500",
+    height: "24px",
+    position: "relative",
+    verticalAlign: "middle"
+  },
+  "& .ql-picker-label": {
+    cursor: "pointer",
+    display: "inline-block",
+    height: "100%",
+    paddingLeft: "8px",
+    paddingRight: "2px",
+    position: "relative",
+    width: "100%",
+    "&::before": {
+      display: "inline-block",
+      lineHeight: "22px"
+    }
+  },
+  "& .ql-picker-options": {
+    backgroundColor: "#fff",
+    display: "none",
+    minWidth: "100%",
+    padding: "4px 8px",
+    position: "absolute",
+    whiteSpace: "nowrap",
+    "& .ql-picker-item": {
+      cursor: "pointer",
+      display: "block",
+      paddingBottom: "5px",
+      paddingTop: "5px"
+    }
+  },
+  "& .ql-picker.ql-expanded": {
+    "& .ql-picker-label": {
+      color: "#ccc",
+      zIndex: 2
+    },
+    "& .ql-picker-options": {
+      display: "block",
+      marginTop: "-1px",
+      top: "100%",
+      zIndex: 1
+    }
+  },
+  "& .ql-color-picker, & .ql-icon-picker": {
+    width: "28px",
+    "& .ql-picker-label": {
+      padding: "2px 4px",
+      "& svg": {
+        right: "4px"
+      }
+    }
+  },
+  "& .ql-icon-picker .ql-picker-options": {
+    padding: "4px 0"
+  },
+  "& .ql-icon-picker .ql-picker-item": {
+    height: "24px",
+    width: "24px",
+    padding: "2px 4px"
+  },
+  "& .ql-color-picker .ql-picker-options": {
+    padding: "3px 5px",
+    width: "152px"
+  },
+  "& .ql-color-picker .ql-picker-item": {
+    border: "1px solid transparent",
+    float: "left",
+    height: "16px",
+    margin: "2px",
+    padding: 0,
+    width: "16px"
+  },
+  "& .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg": {
+    position: "absolute",
+    marginTop: "-9px",
+    right: 0,
+    top: "50%",
+    width: "18px"
+  },
+  "& .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before": {
+    content: "attr(data-label)"
+  },
+  // Header picker
+  "& .ql-picker.ql-header": {
+    width: "98px",
+    "& .ql-picker-label::before, & .ql-picker-item::before": {
+      content: "'Normal'"
+    },
+    "& .ql-picker-label[data-value='1']::before, & .ql-picker-item[data-value='1']::before": {
+      content: "'T\xEDtulo 1'"
+    },
+    "& .ql-picker-label[data-value='2']::before, & .ql-picker-item[data-value='2']::before": {
+      content: "'T\xEDtulo 2'"
+    },
+    "& .ql-picker-label[data-value='3']::before, & .ql-picker-item[data-value='3']::before": {
+      content: "'Heading 3'"
+    },
+    "& .ql-picker-label[data-value='4']::before, & .ql-picker-item[data-value='4']::before": {
+      content: "'Heading 4'"
+    },
+    "& .ql-picker-label[data-value='5']::before, & .ql-picker-item[data-value='5']::before": {
+      content: "'Heading 5'"
+    },
+    "& .ql-picker-label[data-value='6']::before, & .ql-picker-item[data-value='6']::before": {
+      content: "'Heading 6'"
+    },
+    "& .ql-picker-item[data-value='1']::before": {
+      fontSize: "2em"
+    },
+    "& .ql-picker-item[data-value='2']::before": {
+      fontSize: "1.5em"
+    },
+    "& .ql-picker-item[data-value='3']::before": {
+      fontSize: "1.17em"
+    },
+    "& .ql-picker-item[data-value='4']::before": {
+      fontSize: "1em"
+    },
+    "& .ql-picker-item[data-value='5']::before": {
+      fontSize: "0.83em"
+    },
+    "& .ql-picker-item[data-value='6']::before": {
+      fontSize: "0.67em"
+    }
+  },
+  // Font picker
+  "& .ql-picker.ql-font": {
+    width: "108px",
+    "& .ql-picker-label::before, & .ql-picker-item::before": {
+      content: "'Sans Serif'"
+    },
+    "& .ql-picker-label[data-value=serif]::before, & .ql-picker-item[data-value=serif]::before": {
+      content: "'Serif'"
+    },
+    "& .ql-picker-label[data-value=monospace]::before, & .ql-picker-item[data-value=monospace]::before": {
+      content: "'Monospace'"
+    },
+    "& .ql-picker-item[data-value=serif]::before": {
+      fontFamily: "Georgia, Times New Roman, serif"
+    },
+    "& .ql-picker-item[data-value=monospace]::before": {
+      fontFamily: "Monaco, Courier New, monospace"
+    }
+  },
+  // Size picker
+  "& .ql-picker.ql-size": {
+    width: "98px",
+    "& .ql-picker-label::before, & .ql-picker-item::before": {
+      content: "'Normal'"
+    },
+    "& .ql-picker-label[data-value=small]::before, & .ql-picker-item[data-value=small]::before": {
+      content: "'Small'"
+    },
+    "& .ql-picker-label[data-value=large]::before, & .ql-picker-item[data-value=large]::before": {
+      content: "'Large'"
+    },
+    "& .ql-picker-label[data-value=huge]::before, & .ql-picker-item[data-value=huge]::before": {
+      content: "'Huge'"
+    },
+    "& .ql-picker-item[data-value=small]::before": {
+      fontSize: "10px"
+    },
+    "& .ql-picker-item[data-value=large]::before": {
+      fontSize: "18px"
+    },
+    "& .ql-picker-item[data-value=huge]::before": {
+      fontSize: "32px"
+    }
+  },
+  // Color picker items
+  "& .ql-color-picker.ql-background .ql-picker-item": {
+    backgroundColor: "#fff"
+  },
+  "& .ql-color-picker.ql-color .ql-picker-item": {
+    backgroundColor: "#000"
+  },
+  // Code block container
+  "& .ql-code-block-container": {
+    position: "relative",
+    "& .ql-ui": {
+      right: "5px",
+      top: "5px"
+    }
+  },
+  // Toolbar snow adjustments
+  "&.ql-toolbar, & .ql-toolbar.ql-snow": {
+    border: "1px solid #ccc",
+    boxSizing: "border-box",
+    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+    padding: "8px",
+    "& .ql-formats": {
+      marginRight: "15px"
+    },
+    "& .ql-picker-label": {
+      border: "1px solid transparent"
+    },
+    "& .ql-picker-options": {
+      border: "1px solid transparent",
+      boxShadow: "rgba(0, 0, 0, 0.2) 0 2px 8px"
+    },
+    "& .ql-picker.ql-expanded .ql-picker-label": {
+      borderColor: "#ccc"
+    },
+    "& .ql-picker.ql-expanded .ql-picker-options": {
+      borderColor: "#ccc"
+    },
+    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover": {
+      borderColor: "#000"
+    }
   },
-  "& .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before": {
-    content: "T\xEDtulo 1"
+  "& .ql-toolbar.ql-snow + .ql-container.ql-snow": {
+    borderTop: 0
   },
-  "& .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before": {
-    content: "T\xEDtulo 2"
+  // Container snow
+  "& .ql-container.ql-snow": {
+    border: "1px solid #ccc"
   }
 });