@lets-events/react 12.1.11 → 12.1.12

package/src/components/RichEditor/styledComponents.ts

@@ -6,32 +6,570 @@ export const QuillContainer = styled("div", {
 });
 
 export const 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": {
@@ -39,26 +577,575 @@ export const QuillEditor = styled("div", {
     },
   },
 
-  "& .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",
+    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",
+      },
+    },
   },
-  "& .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before": {
-    content: "Título 1",
+
+  // Snow theme
+  "&, & *": {
+    boxSizing: "border-box",
   },
-  "& .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before": {
-    content: "Título 2",
+
+  "& .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ítulo 1'",
+    },
+
+    "& .ql-picker-label[data-value='2']::before, & .ql-picker-item[data-value='2']::before": {
+      content: "'Título 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-toolbar.ql-snow + .ql-container.ql-snow": {
+    borderTop: 0,
+  },
+
+  // Container snow
+  "& .ql-container.ql-snow": {
+    border: "1px solid #ccc",
+  },
+});