From bc7771540a2d15c7f90d5be672242c43d0e8047a Mon Sep 17 00:00:00 2001
From: Derek P Sifford <dereksifford@gmail.com>
Date: Thu, 3 Nov 2016 15:38:28 -0400
Subject: [PATCH] fix: wrap long URLs in the bibliography and tooltips

Closes #219
---
 src/lib/css/citations.styl             |  7 +++++--
 src/lib/css/collections/shared.styl    |  2 +-
 src/lib/css/collections/variables.styl | 14 ++++++++++++--
 src/lib/js/tinymce/views/styles.styl   |  2 +-
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/lib/css/citations.styl b/src/lib/css/citations.styl
index e7a230d8..4b5322ff 100644
--- a/src/lib/css/citations.styl
+++ b/src/lib/css/citations.styl
@@ -1,7 +1,8 @@
-@import 'collections/colors'
+@require 'collections/variables'
+@require 'collections/colors'
 
 .abt-citation
-    {$noselect}
+    noselect()
     display: inline-block;
     white-space: nowrap
     cursor: pointer
@@ -36,11 +37,13 @@
             display: table-cell
             text-align: right
         .csl-right-inline
+            word-wrap()
             display: table-cell
     &.margin
         display: flex
         justify-content: flex-end
         .csl-right-inline
+            word-wrap()
             min-width: 100%
     .csl-left-margin
         padding: 0 8px 0 0
diff --git a/src/lib/css/collections/shared.styl b/src/lib/css/collections/shared.styl
index 1b2403b3..f43df8e2 100644
--- a/src/lib/css/collections/shared.styl
+++ b/src/lib/css/collections/shared.styl
@@ -22,7 +22,7 @@
     animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards
 
 .abt-btn
-    {$noselect} // @stylint ignore
+    noselect()
     background: white
     color: $dark-gray
     background-image: none
diff --git a/src/lib/css/collections/variables.styl b/src/lib/css/collections/variables.styl
index 911bcb02..d18458c3 100644
--- a/src/lib/css/collections/variables.styl
+++ b/src/lib/css/collections/variables.styl
@@ -19,8 +19,8 @@ $animation-curve-default = $animation-curve-fast-out-slow-in
 
 $button-transition = box-shadow 0.2s $animation-curve-fast-out-linear-in, background-color 0.2s $animation-curve-default, color 0.2s $animation-curve-default
 
-// Misc
-$noselect =
+// Mixins
+noselect()
     -webkit-appearance: none
     -webkit-touch-callout: none
     -webkit-user-select: none
@@ -29,6 +29,16 @@ $noselect =
     -ms-user-select: none
     user-select: none
 
+word-wrap()
+    overflow-wrap: break-word
+    word-wrap: break-word
+    -ms-word-break: break-all
+    word-break: break-word
+    -ms-hyphens: auto
+    -moz-hyphens: auto
+    -webkit-hyphens: auto
+    hyphens: auto
+
 
 @keyframes colors
     0%
diff --git a/src/lib/js/tinymce/views/styles.styl b/src/lib/js/tinymce/views/styles.styl
index 2694c565..2f2dd5b8 100644
--- a/src/lib/js/tinymce/views/styles.styl
+++ b/src/lib/js/tinymce/views/styles.styl
@@ -69,7 +69,7 @@ select
     transition: none
 
 label
-    {$noselect} // @stylint ignore
+    noselect()
     white-space: nowrap
     cursor: pointer
     font-size: 0.9em