Render syntax examples using adjacent tabs if they're narrow enough

Closes #311

helpers/sass_helpers.rb

@@ -200,8 +200,12 @@ module SassHelpers
         _syntax_div("CSS Output", "css", css_sections, css_paddings, id)
     end
 
+    max_source_width = (scss_sections + sass_sections).map {|s| s.split("\n")}.flatten.map(&:size).max
+    max_css_width = css_sections.map {|s| s.split("\n")}.flatten.map(&:size).max
+    can_split = max_css_width && max_source_width < 55 && max_css_width < 55
+
     text = content_tag(:div, contents,
-      class: "code-example",
+      class: "code-example #{'can-split' if can_split}",
       "data-unique-id": @unique_id)
 
     # Newlines between tags cause Markdown to parse these blocks incorrectly.

source/assets/css/components/_sass-syntax-switcher.scss

@@ -1,5 +1,40 @@
 .ui-helper-reset { line-height: inherit; }
 
+@mixin -active-tab {
+  margin: 0;
+
+  a {
+    color: $sl-color--regent-grey;
+    cursor: text;
+  }
+
+  &:after,
+  &:before {
+    bottom: -3px;
+    left: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  &:after {
+    border-color: transparent;
+    border-bottom-color: #f8f8f8;
+    border-width: 10px;
+    margin-left: -10px;
+  }
+
+  &:before {
+    border-color: transparent;
+    border-bottom-color: #ebebeb;
+    border-width: 11px;
+    margin-left: -11px;
+  }
+}
+
 .ui-tabs {
 
   &,
@@ -7,6 +42,8 @@
   .ui-tabs-nav li.ui-tabs-active,
   .ui-tabs-panel { padding: 0; }
 
+  .ui-tabs-panel-inactive { display: none; }
+
   .ui-tabs-nav {
     margin-top: -1rem;
     margin-left: -1em;
@@ -19,41 +56,11 @@
       box-shadow:none !important;
     }
 
-    .ui-tabs-active {
-
-      &:after,
-      &:before {
-        bottom: -3px;
-        left: 50%;
-        border: solid transparent;
-        content: " ";
-        height: 0;
-        width: 0;
-        position: absolute;
-        pointer-events: none;
-      }
-
-      &:after {
-        border-color: transparent;
-        border-bottom-color: #f8f8f8;
-        border-width: 10px;
-        margin-left: -10px;
-      }
-
-      &:before {
-        border-color: transparent;
-        border-bottom-color: #ebebeb;
-        border-width: 11px;
-        margin-left: -11px;
-      }
-    }
+    .ui-tabs-active { @include -active-tab; }
 
     li {
       float: left;
-
-      &,
-      &.ui-tabs-active { margin: 0; }
-
+      margin: 0;
 
       &.css-tab {
 
@@ -72,8 +79,6 @@
       }
     }
 
-    .ui-tabs-active a { color: $sl-color--regent-grey; }
-
     .ui-tabs-anchor { padding: .75rem 1rem; }
   }
 
@@ -138,3 +143,47 @@ html .ui-button.ui-state-disabled:active { background: none; }
   &,
   * { font-size: 1rem; }
 }
+
+@mixin -split-css-tabs {
+  .ui-tabs.can-split {
+    .ui-tabs-panel {
+      width: calc(50% - 5px);
+
+      &.scss, &.sass {
+        display: inline-block;
+        &.ui-tabs-panel-inactive { display: none; }
+      }
+
+      &.css {
+        float: right;
+        &.ui-tabs-panel-inactive { display: block; }
+      }
+    }
+
+
+    &.ui-tabs-panel-css-is-active {
+      .scss, .sass {
+        &.ui-tabs-panel.ui-tabs-panel-previously-active { display: inline-block; }
+      }
+    }
+
+    .css-tab {
+      position: absolute;
+      left: 49%;
+      @include -active-tab;
+
+      &,
+      &.ui-tabs-active { margin-left: 0; }
+
+      ::before {content: none}
+    }
+  }
+}
+
+@media screen and (min-width: sl-px-to-rem(1500px)) {
+  body.documentation { @include -split-css-tabs }
+}
+
+@media screen and (min-width: sl-px-to-rem(1000px)) {
+  body.guide { @include -split-css-tabs }
+}

source/assets/js/sass.js

@@ -47,7 +47,32 @@ $(function() {
                 .prepend("<a href='#example-" + id + "-css'>CSS</a>"));
     }
 
-    figure.prepend(ul).tabs({active: 0});
+    figure.prepend(ul).tabs({
+      active: 0,
+      beforeActivate: function(event, ui) {
+        // If multiple panels are visible, the CSS tab shouldn't be clickable.
+        if (ui.newPanel.hasClass('css') &&
+            allPanels.filter(":visible").length > 1) {
+          return false;
+        }
+      },
+      activate: function(event, ui) {
+        if (ui.newPanel.hasClass('css')) {
+          figure.addClass('ui-tabs-panel-css-is-active');
+        } else {
+          figure.removeClass('ui-tabs-panel-css-is-active');
+        }
+
+        allPanels.removeClass('ui-tabs-panel-previously-active');
+        ui.oldPanel.addClass('ui-tabs-panel-inactive').addClass('ui-tabs-panel-previously-active');
+        ui.newPanel.removeClass('ui-tabs-panel-inactive');
+        allPanels.css('display', '');
+      }
+    });
+    var allPanels = figure.find(".ui-tabs-panel");
+
+    allPanels.slice(1).addClass('ui-tabs-panel-inactive');
+    allPanels.css('display', '');
   });
 
   // Switch ALL the tabs (Sass/SCSS) together