1 files changed, 162 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/splitter.css b/comm/mail/themes/shared/mail/splitter.css
new file mode 100644
index 0000000000..efc1902691
--- /dev/null
+++ b/comm/mail/themes/shared/mail/splitter.css
@@ -0,0 +1,162 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* PaneSplitter / pane-splitter elements */
+
+hr[is="pane-splitter"] {
+  margin: 0;
+  --splitter-z-index: 1;
+  z-index: var(--splitter-z-index);
+  /* Make sure border-box's height and width remain the same when we grow or
+   * shrink the border width. */
+  box-sizing: border-box;
+  /* We use a default border-style of none so we can set a border width and
+   * color without it producing a border on all sides. */
+  border-style: none;
+  /* The defining sizes of the splitter:
+   * + content-size: The dimension for the clickable area of the splitter.
+   * + occupy-size: The amount of space the splitter should occupy in the
+   *   layout.
+   */
+  --splitter-content-size: 5px;
+  --splitter-occupy-size: 1px;
+  --splitter-margin-size: calc(var(--splitter-occupy-size) - var(--splitter-content-size));
+  border-width: var(--splitter-occupy-size);
+  border-color: var(--splitter-color);
+}
+
+hr[is="pane-splitter"]:not([resize-direction="horizontal"]):not(.splitter-before) {
+  height: var(--splitter-content-size);
+  border-block-start-style: solid;
+  margin-block-end: var(--splitter-margin-size);
+}
+
+hr[is="pane-splitter"]:not([resize-direction="horizontal"]).splitter-before {
+  height: var(--splitter-content-size);
+  border-block-end-style: solid;
+  margin-block-start: var(--splitter-margin-size);
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:not(.splitter-before) {
+  width: var(--splitter-content-size);
+  border-inline-start-style: solid;
+  margin-inline-end: var(--splitter-margin-size);
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"].splitter-before {
+  width: var(--splitter-content-size);
+  border-inline-end-style: solid;
+  margin-inline-start: var(--splitter-margin-size);
+}
+
+/* Collapsed splitters. */
+
+hr[is="pane-splitter"].splitter-collapsed {
+  /* Occupy zero space. */
+  --splitter-occupy-size: 0px;
+  /* Make sure we appear above other splitters. */
+  z-index: calc(var(--splitter-z-index) + 1);
+}
+
+hr[is="pane-splitter"]::after {
+  /* We create a pseudo-element that occupies the splitter content. We will only
+   * show this when the splitter is collapsed and being resized or hovered. */
+  background-color: var(--selected-item-color);
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  /* We hide this element with scaleY(0) or scaleX(0) so we can smoothly
+   * grow the element between the hidden and full-height or full-width
+   * states. */
+  transform: scaleY(0);
+}
+
+hr[is="pane-splitter"]:not(.splitter-before)::after {
+  /* Grow top-to-bottom. */
+  transform-origin: top;
+}
+
+hr[is="pane-splitter"].splitter-before::after {
+  transform-origin: bottom;
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]::after {
+  /* Grow left-to-right or right-to-left instead. */
+  transform: scaleX(0);
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:is(
+  :not(.splitter-before):dir(ltr),
+  .splitter-before:dir(rtl)
+)::after {
+  transform-origin: left;
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:is(
+  .splitter-before:dir(ltr),
+  :not(.splitter-before):dir(rtl)
+)::after {
+  transform-origin: right;
+}
+
+hr[is="pane-splitter"]:not([disabled]).splitter-collapsed:is(
+  :hover,
+  .splitter-resizing
+)::after {
+  /* Grow to full height. */
+  transform: scaleY(1);
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:not([disabled]).splitter-collapsed:is(
+  :hover,
+  .splitter-resizing
+)::after {
+  /* Grow to full width. */
+  transform: scaleX(1);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  /* NOTE: We only show a smooth transition from scale 0 to scale 1, or
+   * vice versa, whilst the splitter is collapsed. In particular, we do *not*
+   * want a smooth transition when we switch from collapsed to not collapsed: in
+   * this case we want to immediately shrink back to zero size. In contrast, the
+   * switch from not collapsed to collapsed whilst dragging *is* a smooth
+   * transition. */
+  hr[is="pane-splitter"].splitter-collapsed::after {
+    transition: transform 200ms ease;
+  }
+}
+
+/* Splitter cursors. */
+
+hr[is="pane-splitter"]:not([disabled]) {
+  cursor: ns-resize;
+}
+
+hr[is="pane-splitter"]:not([disabled]).splitter-collapsed:not(.splitter-before) {
+  cursor: s-resize;
+}
+
+hr[is="pane-splitter"]:not([disabled]).splitter-collapsed.splitter-before {
+  cursor: n-resize;
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:not([disabled]) {
+  cursor: ew-resize;
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:not([disabled]).splitter-collapsed:is(
+  .splitter-before:dir(ltr),
+  :not(.splitter-before):dir(rtl)
+) {
+  cursor: w-resize;
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:not([disabled]).splitter-collapsed:is(
+  :not(.splitter-before):dir(ltr),
+  .splitter-before:dir(rtl)
+) {
+  cursor: e-resize;
+}