Adding shared mixins and variables

dist/less/_mixins.less

+// origin-web-common mixins
+
+// word-break and word-break-all test cases http://codepen.io/sg00dwin/pen/WwKMmP
+//
+// DESCRIPTION: Breaks long non-breaking strings within a div or a flexed item that is within a flex container
+// EXAMPLE:
+// <div style="display:flex">
+//   <div style="flex:1" class="word-break">...
+// </div>
+// An unbreakable "word" may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line.
+// (1) https://bugzilla.mozilla.org/show_bug.cgi?id=1136818#c2
+// USAGE:
+// - DO choose to use over word-break-all if at all possible
+.word-break {
+     word-wrap: break-word; // firefox, IE
+    word-break: break-word; // non-standard for webkit
+ overflow-wrap: break-word; // new name as per the CSS3 spec
+     min-width: 0;          // firefox (1)
+}
+// DESCRIPTION: Breaks long non-breaking strings under the following circumstances:
+// - if within a table not set to table-layout: fixed (but have a very good reason for doing so!  otherwise, see .table-layout-fixed)
+// - fieldset
+// - flex container
+// EXAMPLE:
+// <div style="display:flex">
+//   <div class="word-break-all">...
+// </div>
+// Guarantees the string will wrap. word-break: break-all; is used by firefox and IE to break in the usage cases.
+// https://bugzilla.mozilla.org/show_bug.cgi?id=587438, https://bugzilla.mozilla.org/show_bug.cgi?id=1136818
+// USAGE:
+// This class will break normal words in awkward places.  Therefore:
+// - DO use for shas or other long identifiers that are arbitrary
+// - DO NOT use in any other case such as paragraph text, descriptions, titles, project names, etc.
+//   opt for 'word-break' above
+.word-break-all {
+    word-break: break-all;  // firefox, IE
+    word-break: break-word; // non-standard for webkit
+ overflow-wrap: break-word; // new name as per the CSS3 spec
+}

dist/less/_variables.less

+// origin-web-common variables
+
+@panel-shaded: #f2f2f2;
+@screen-lg-max: (@screen-xl-min - 1);
+@screen-xl-min: 1600px;
+@screen-xs: 480px;
+@screen-xs-min: @screen-xs;
+@screen-xxs-max: (@screen-xs-min - 1);

dist/less/common.less

+// origin-web-common sans external dependency variables
+
+@import "_core.less";
+@import "_forms.less";
+@import "_guided-tour.less";
+@import "_messages.less";
+@import "_mixins.less";
+@import "_notifications.less";
+@import "_ui-select.less";
+@import "_variables.less";

dist/less/main.less

+// origin-web-common
+
 @bower-components-path: "bower_components";
 @pf-less-path: "@{bower-components-path}/patternfly/dist/less";
 @bootstrap-less-path: "@{pf-less-path}/dependencies/bootstrap";
@@ -10,9 +12,5 @@
 @import "@{pf-less-path}/color-variables.less";
 @import "@{pf-less-path}/variables.less";
 
-@import "_core.less";
-@import "_forms.less";
-@import "_guided-tour.less";
-@import "_messages.less";
-@import "_notifications.less";
-@import "_ui-select.less";
+// add partials to common.less
+@import "common.less";

dist/origin-web-common.css

@@ -341,6 +341,17 @@ ul.messenger-theme-flat .messenger-message.alert-info .messenger-message-inner:b
   display: inline-block;
   background-color: transparent;
 }
+.word-break {
+  word-wrap: break-word;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  min-width: 0;
+}
+.word-break-all {
+  word-break: break-all;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
 .toast-action-divider {
   color: #9c9c9c;
 }

src/styles/_mixins.less

+// origin-web-common mixins
+
+// word-break and word-break-all test cases http://codepen.io/sg00dwin/pen/WwKMmP
+//
+// DESCRIPTION: Breaks long non-breaking strings within a div or a flexed item that is within a flex container
+// EXAMPLE:
+// <div style="display:flex">
+//   <div style="flex:1" class="word-break">...
+// </div>
+// An unbreakable "word" may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line.
+// (1) https://bugzilla.mozilla.org/show_bug.cgi?id=1136818#c2
+// USAGE:
+// - DO choose to use over word-break-all if at all possible
+.word-break {
+     word-wrap: break-word; // firefox, IE
+    word-break: break-word; // non-standard for webkit
+ overflow-wrap: break-word; // new name as per the CSS3 spec
+     min-width: 0;          // firefox (1)
+}
+// DESCRIPTION: Breaks long non-breaking strings under the following circumstances:
+// - if within a table not set to table-layout: fixed (but have a very good reason for doing so!  otherwise, see .table-layout-fixed)
+// - fieldset
+// - flex container
+// EXAMPLE:
+// <div style="display:flex">
+//   <div class="word-break-all">...
+// </div>
+// Guarantees the string will wrap. word-break: break-all; is used by firefox and IE to break in the usage cases.
+// https://bugzilla.mozilla.org/show_bug.cgi?id=587438, https://bugzilla.mozilla.org/show_bug.cgi?id=1136818
+// USAGE:
+// This class will break normal words in awkward places.  Therefore:
+// - DO use for shas or other long identifiers that are arbitrary
+// - DO NOT use in any other case such as paragraph text, descriptions, titles, project names, etc.
+//   opt for 'word-break' above
+.word-break-all {
+    word-break: break-all;  // firefox, IE
+    word-break: break-word; // non-standard for webkit
+ overflow-wrap: break-word; // new name as per the CSS3 spec
+}

src/styles/_variables.less

+// origin-web-common variables
+
+@panel-shaded: #f2f2f2;
+@screen-lg-max: (@screen-xl-min - 1);
+@screen-xl-min: 1600px;
+@screen-xs: 480px;
+@screen-xs-min: @screen-xs;
+@screen-xxs-max: (@screen-xs-min - 1);

src/styles/common.less

+// origin-web-common sans external dependency variables
+
+@import "_core.less";
+@import "_forms.less";
+@import "_guided-tour.less";
+@import "_messages.less";
+@import "_mixins.less";
+@import "_notifications.less";
+@import "_ui-select.less";
+@import "_variables.less";

src/styles/main.less

+// origin-web-common
+
 @bower-components-path: "bower_components";
 @pf-less-path: "@{bower-components-path}/patternfly/dist/less";
 @bootstrap-less-path: "@{pf-less-path}/dependencies/bootstrap";
@@ -10,9 +12,5 @@
 @import "@{pf-less-path}/color-variables.less";
 @import "@{pf-less-path}/variables.less";
 
-@import "_core.less";
-@import "_forms.less";
-@import "_guided-tour.less";
-@import "_messages.less";
-@import "_notifications.less";
-@import "_ui-select.less";
+// add partials to common.less
+@import "common.less";