workarea-admin 3.4.12

data/app/assets/javascripts/workarea/admin/templates/expandable_button.jst.ejs

@@ -0,0 +1,4 @@
+<button type='button' class='expandable__button'>
+    <%= I18n.t('workarea.admin.actions.expand') %>
+</button>
+

data/app/assets/javascripts/workarea/admin/templates/help_helper.jst.ejs

@@ -0,0 +1,97 @@
+<div class="help-helper">
+    <div class="help-helper__body">
+        <div class="help-helper__leg help-helper__leg--left">
+            <svg class="help-helper__svg" width="35" height="56" viewBox="0 0 35 56" xmlns="http://www.w3.org/2000/svg">
+                <path d="M34.557.393h-5.97v49.294H.458v5.759h34.098z" fill="#2C3036" fill-rule="evenodd"/>
+            </svg>
+        </div>
+        <div class="help-helper__leg help-helper__leg--right">
+            <svg class="help-helper__svg" width="35" height="56" viewBox="0 0 35 56" xmlns="http://www.w3.org/2000/svg">
+                <path d="M.295.393h5.971v49.294h28.127v5.759H.295z" fill="#2C3036" fill-rule="evenodd"/>
+            </svg>
+        </div>
+
+        <div class="help-helper__head">
+            <div class="help-helper__face help-helper__face--background">
+                <svg class="help-helper__svg" width="133" height="41" viewBox="0 0 133 41" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M131.687 41.007l-.005-.164C136.103 15.968 107.786.831 71.337.855 34.841.89 1.462 16.14.043 39.96l-.014.034h.01c-.003.004-.003.004 0 0-.003.004-.003.004 0 0l.304-.003s.307-.804.917-1.657c7.98-9.583 36.393-26.077 68.49-26.105 32.816-.023 54.994 13.808 61.305 27.392a6.27 6.27 0 0 1 .324 1.384h.267c.007.004.008.013.014.017-.002-.01-.002-.01.003-.02l.024.005" fill="#C1C9CA" fill-rule="evenodd"/>
+                </svg>
+            </div>
+            <div class="help-helper__face help-helper__face--inside">
+                <svg class="help-helper__svg" width="95" height="128" viewBox="0 0 95 128" xmlns="http://www.w3.org/2000/svg">
+                    <g fill="none" fill-rule="evenodd">
+                        <path d="M13.454 7.163l.142-.079c19.006-16.5 46.368.333 64.905 31.943 18.556 31.645 22.517 68.347 2.881 81.71l-.025.021v-.009l-.156-.25s.534-.683.954-1.652c4.12-11.79 3.756-44.816-12.564-72.659C52.898 17.727 29.787 5.56 14.96 7.003c-.77.152-1.343.415-1.343.415l-.137-.224c-.01 0-.018.005-.027.005l.016-.012-.016-.024" fill="#DA2B3B"/>
+                        <path d="M13.393 7.231l.06-.068.02.018c.109-.077.057-.04 0 0l.145.237s-.486.607-.914 1.484C8.494 20.5 8.771 53.764 25.191 81.774c16.62 28.33 39.602 40.527 54.44 39.205.888-.153 1.57-.48 1.57-.48l.149.246c.01 0 .016-.012.019-.016-.006.009-.01.016-.02.016l.008.013-.081.047c-19.013 16.627-46.429-.213-64.991-31.868-18.558-31.646-22.52-68.342-2.892-81.706" fill="#A2282B"/>
+                    </g>
+                </svg>
+            </div>
+            <div class="help-helper__face help-helper__face--foreground">
+                <svg class="help-helper__svg" width="133" height="41" viewBox="0 0 133 41" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M132.658 1.093l.03-.086-.025-.005-.284.003s-.264.72-.796 1.536c-7.768 9.553-36.338 26.256-68.632 26.274-2.515.008-4.96-.08-7.34-.237-9.225-.973-15.3-2.145-19.022-3.062C18.439 20.65 6.23 11.087 1.733 1.597a6.515 6.515 0 0 1-.39-1.606L1.05 0l-.021-.007.007.092c-3.51 19.317 12.698 32.779 37.142 37.86 2.08.535 4.707.949 7.489 1.255 4.994.651 10.25.994 15.7.991.555-.004 1.116-.017 1.675-.024.31.009.483.007.483.007l-.01-.015c35.649-.614 67.75-15.723 69.143-39.067" fill="#2C3036" fill-rule="evenodd"/>
+                </svg>
+            </div>
+        </div>
+
+        <div class="help-helper__features">
+            <div class="help-helper__eye help-helper__eye--left">
+                <svg class="help-helper__svg" width="36" height="28" viewBox="0 0 36 28" xmlns="http://www.w3.org/2000/svg">
+                    <ellipse cx="98.22" cy="44.925" rx="17.255" ry="12.941" transform="translate(-80 -31)" stroke="#2C3036" fill="#FFF" fill-rule="evenodd"/>
+                </svg>
+                <div class="help-helper__pupil">
+                    <svg class="help-helper__svg" width="16" height="17" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg">
+                        <ellipse cx="103.918" cy="44.213" rx="7.869" ry="7.869" transform="translate(-96 -36)" fill="#2C3036" fill-rule="evenodd"/>
+                    </svg>
+                </div>
+            </div>
+            <div class="help-helper__eye help-helper__eye--right">
+                <svg class="help-helper__svg" width="36" height="28" viewBox="0 0 36 28" xmlns="http://www.w3.org/2000/svg">
+                    <ellipse cx="98.22" cy="44.925" rx="17.255" ry="12.941" transform="translate(-80 -31)" stroke="#2C3036" fill="#FFF" fill-rule="evenodd"/>
+                </svg>
+                <div class="help-helper__pupil">
+                    <svg class="help-helper__svg" width="16" height="17" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg">
+                        <ellipse cx="103.918" cy="44.213" rx="7.869" ry="7.869" transform="translate(-96 -36)" fill="#2C3036" fill-rule="evenodd"/>
+                    </svg>
+                </div>
+            </div>
+
+            <div class="help-helper__eyebrow help-helper__eyebrow--left">
+                <svg class="help-helper__svg" width="39" height="22" viewBox="0 0 39 22" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M21.698 9.854C13.2 13.362.256 21.765.256 21.765s6.69-8.76 14.028-13.579C19.332 4.87 31.756.402 31.756.402s6.137.042 6.847 1.107c.87 1.304-2.107 6-2.107 6s-9.33.087-14.798 2.345z" fill="#2C3036" fill-rule="evenodd"/>
+                </svg>
+            </div>
+            <div class="help-helper__eyebrow help-helper__eyebrow--right">
+                <svg class="help-helper__svg" width="41" height="18" viewBox="0 0 41 18" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M17.922 8.363c8.863 2.447 22.734 9.21 22.734 9.21s-7.707-7.88-15.578-11.769C19.663 3.128 6.788.207 6.788.207S.7.997.125 2.14c-.705 1.402 2.822 5.7 2.822 5.7s9.272-1.051 14.974.523z" fill="#2C3036" fill-rule="evenodd"/>
+                </svg>
+            </div>
+        </div>
+    </div>
+    <div class="help-helper__burger">
+        <svg class="help-helper__burger-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 200">
+            <path d="M272,40V64h-8V56c-3,0-5.5,0-8,.2V64H128V56c-3,0-5.5,0-8,.2V64H0V32H16V16H32V0h8V8c3,0,5.5,0,8-.2V0H160V8c3,0,5.5,0,8-.2V0h40V8c3,0,5.5,0,8-.2V0h24V16h16V32h8v8h8ZM120,16.2l8-.6v-7a1,1,0,0,0-.4-0.4H120v8Zm80.2-.3-0.5-8h-7a1,1,0,0,0-.5,0v8h8ZM88,16H80v7.6h8V16ZM64,32l-0.6-8h-7a1,1,0,0,0-.4.4V32h8Zm88-8h-8v7.6h8V24Zm72.2,0v8c2.7-.4,5.3,0,7.6-0.4V24h-7.6Zm8,31.6h7.6V48H232v7.6h0.2ZM168,48h-8v7.6h8V48ZM79.7,56V48c-2.7.2-5.3-.3-7.6,0.2V56h7.6ZM16,55.7h8V48H16v7.7ZM96.3,40v8h7.6V40H96.3Zm88-8v8h7.6V32h-7.6Zm-56,8.2,7.7-.6c-0.2-2.3,0-4.6,0-7a1,1,0,0,0-.4-0.4H128v8h0.3Zm-96-.4H40V32.2H32v7.6h0.3ZM272,160v24h-8v8h-8v8H16v-8H8v-8H0V160H272Z" style="fill:#ce9f34"/>
+            <path d="M264,160H8v-8H0V120H16v7.8H128.2V120h104v8l24-.2V120H272v32h-8v8Z" style="fill:#6d3f21"/>
+            <path d="M272,120H256.2v7.8h-24V120h-104v8L16,127.6V120H0V104H8.2V96.2H24v8a66.8,66.8,0,0,0,0,7.6h8V104h8V96H72v7.8H88V96h56v8h16v7.8h8v-8h16V96h48v8h8V96h24.2v8H272v16Z" style="fill:#58ae30"/>
+            <path d="M240,96v8h-8V96h-8V80.2H112V88h-8.2A69.6,69.6,0,0,0,96,88v8H88v7.8H72v-16H63.8V80H7.8v8H0V72H8V64H264v8h8v8H240V96Z" style="fill:#e1d639"/>
+            <path d="M0,88H7.8V80.2h56v7.6H72V96H40v8H32v8H24a66.8,66.8,0,0,1,0-7.7v-8H8.2V104H0V88Zm240,8V80h32v24h-7.8V96H240Z" style="fill:#c01b1b"/>
+            <path d="M48,0V8c-2.5.2-5,0-8,0V0h8ZM168,0V8c-2.5.2-5,0-8,0V0h8Zm48,0V8c-2.5.2-5,0-8,0V0h8Zm48,32h8v8h-8V32ZM120,16.2v-8h7.6a1,1,0,0,1,.4.6v7Zm80.2-.2h-8V8.3a1,1,0,0,1,.6-0.4h6.8ZM88,16.2v7.6H80c-0.2-2.3,0-5,0-7.6h8ZM64.2,32h-8V24.4a1,1,0,0,1,.5-0.4h7ZM152,24.2v7.6h-8V24.2h8Zm72.2-.2h7.6v8c-2.3.5-5,0-7.6,0.3V24ZM264,64h-8V56h8v8ZM128,64h-8V56h8v8Zm104-8.2V48.2h7.8v7.6H232Zm-64-7.6v7.6h-8V48.2h8ZM79.8,56H72.2V48c2.3-.5,5,0,7.6-0.3V56ZM16,55.8V48.2h8c0.2,2.3,0,5,0,7.6H16ZM96.2,40h7.6v8c-2.3.2-5,0-7.6,0V40Zm88-8h7.6v8c-2.3.2-5,0-7.6,0V32ZM128,40.2v-8h7.6a1,1,0,0,1,.4.6v7Zm-96-.4V32.2h8v7.6H32Z" style="fill:#efca76"/><path d="M96,96V88.2a69.6,69.6,0,0,1,7.8-.2h8V80.2H224V96H184v7.8H168.2v8h-8V104h-16V96H96Z" style="fill:#c01b1b"/>
+        </svg>
+    </div>
+
+    <div class="help-helper__mini-helper">
+        <svg class="help-helper__mini-helper-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.39 81.51">
+            <path d="M12.3,81A11.7,11.7,0,0,1,9,80.6C1.6,79.2.8,72,.8,71c-2-11,6.5-15,9.4-16-1-5.5,0-10,2.4-13.3a12,12,0,0,1,6.5-4.3,9.7,9.7,0,0,1-1-7.4c1.7-5.6,7.7-9.5,10-11-2-3.8,2.5-10.4,4.3-12.7A4.8,4.8,0,0,1,30.5,3a3,3,0,0,1,1-2.2A0.8,0.8,0,0,1,32,.6c7.4-1.2,17.7,8.5,18,9,7.5,6.2,7,12,6.5,14.3,4.2,1,7,2.6,8.4,5.4a10,10,0,0,1,0,7.6q7.3,2.4,9.6,7.6c1.8,4.2.4,8.6-.4,10.6,4,1.5,7,3.8,8.5,6.8a13,13,0,0,1,.8,9.2c-6.6,15.2-48,8-51.5,7.2-10.8,2-16.8,2.5-20,2.5Z" transform="translate(0 0)" style="fill:#6d4021;stroke:#000;stroke-miterlimit:10"/>
+
+            <g class="help-helper__mini-helper-eye">
+                <path d="M30.5,57c-5,0-9-5.4-9-12s4-12,9-12,9,5.4,9,12S35.5,57,30.5,57Z" transform="translate(0 0)" style="fill:#fff;stroke:#000;stroke-miterlimit:10"/>
+                <ellipse cx="30.5" cy="45" rx="4" ry="6.1" style="fill:#1d1d1b"/>
+            </g>
+            <g class="help-helper__mini-helper-eye">
+                <path d="M53.8,57c-5,0-9-5.4-9-12s4-12,9-12,9,5.4,9,12S58.8,57,53.8,57Z" transform="translate(0 0)" style="fill:#fff;stroke:#000;stroke-miterlimit:10"/>
+                <ellipse cx="53.8" cy="45" rx="4" ry="6.1" style="fill:#1d1d1b"/>
+            </g>
+        </svg>
+    </div>
+    <div class="help-helper__takeover"></div>
+
+</div>
+

data/app/assets/javascripts/workarea/admin/templates/help_helper_text.jst.ejs

@@ -0,0 +1,6 @@
+<div class="help-helper-text">
+    <p class="help-helper-text__intro"><%= intro %></p>
+    <% if ( ! _.isNull(message)) { %>
+        <p class="help-helper-text__message"><%= message %></p>
+    <% } %>
+</div>

data/app/assets/javascripts/workarea/admin/templates/inactive_blocks_toggle.jst.ejs

@@ -0,0 +1 @@
+<button type="button" class="button"><%= toggleText %> <%= I18n.t('workarea.admin.js.inactive_blocks.button') %></button>

data/app/assets/javascripts/workarea/admin/templates/inline_datepicker.jst.ejs

@@ -0,0 +1 @@
+<div class="datepicker datepicker--inline" id="<%= id %>_picker" placeholder='YYYY-MM-DD'></div>

data/app/assets/javascripts/workarea/admin/templates/loading.jst.ejs

@@ -0,0 +1 @@
+<div class="loading <%= cssModifiers %>"><%= I18n.t('workarea.messages.loading')%></div>

data/app/assets/javascripts/workarea/admin/templates/message.jst.ejs

@@ -0,0 +1,10 @@
+<div class="message message--<%= messageModifier %>">
+    <p class="message__type">
+        <span class="message__icon">
+            <%= messageType %>
+        </span>
+    </p>
+    <p class="message__text">
+        <%= messageText %>
+    </p>
+</div>

data/app/assets/javascripts/workarea/admin/templates/message_dismiss_action.jst.ejs

@@ -0,0 +1,5 @@
+<p class="message__dismiss-action">
+    <button type="button" class="message__dismiss-button">
+        <span class="message__dismiss-icon"><%= I18n.t('workarea.admin.js.message_dismiss_action.dismiss') %></span>
+    </button>
+</p>

data/app/assets/javascripts/workarea/admin/templates/new_release_option.jst.ejs

@@ -0,0 +1 @@
+<option data-new-release-option=""><%= I18n.t('workarea.admin.js.publish_with_release_menus.a_new_release') %></option>

data/app/assets/javascripts/workarea/admin/templates/release_select_form.jst.ejs

@@ -0,0 +1,5 @@
+<!-- TODO: v4 remove -->
+<form action="<%= url %>" method="post">
+    <input type="hidden" name="<%= csrfParam %>" value="<%= csrfToken %>" />
+    <input type="hidden" name="release_id" value="<%= releaseId %>" />
+</form>

data/app/assets/javascripts/workarea/admin/templates/remote_select.jst.ejs

@@ -0,0 +1 @@
+<select name="<%= name %>" data-remote-select='{ "source": "<%= source %>" }'<%= multiple ? ' multiple' : '' %>></select>

data/app/assets/javascripts/workarea/admin/templates/remote_select_insight.jst.ejs.ruby

@@ -0,0 +1,25 @@
+%{
+    <span class="select2-results__option-content"<% if (title) { %> title="<%= title %>" <% } %>>
+        <% if (!_.isEmpty(sparkline_data)) { %>
+            <span class="select2-results__option-graph">
+                <span class='spark' title= "#{I18n.t('workarea.admin.catalog_products.index.sparkline_title')}">
+                  {<%= sparkline_data.join(',') %>}
+                </span>
+            </span>
+        <% } %>
+
+        <% if (top) { %>
+            <span class="select2-results__option-icon">
+                #{ inline_svg('workarea/admin/icons/star.svg', title: I18n.t('workarea.admin.insights.icons.top_selling'), class: 'svg-icon svg-icon--small') }
+            </span>
+        <% } %>
+
+        <% if (trending) { %>
+            <span class="select2-results__option-icon">
+                #{ inline_svg('workarea/admin/icons/fire.svg', title: I18n.t('workarea.admin.insights.icons.trending'), class: 'svg-icon svg-icon--small') }
+            </span>
+        <% } %>
+
+        <%= text %>
+    </span>
+}

data/app/assets/javascripts/workarea/admin/templates/remote_select_sparkline.jst.ejs

@@ -0,0 +1,8 @@
+<span class="select2-results__option-content"<% if (title) { %> title="<%= title %>" <% } %>>
+    <span class="select2-results__option-graph">
+        <span class='spark'>
+          {<%= sparkline_data.join(',') %>}
+        </span>
+    </span>
+    <%= text %>
+</span>

data/app/assets/javascripts/workarea/admin/templates/tabs_menu.jst.ejs

@@ -0,0 +1,7 @@
+<ul class="tabs__menu">
+    <% _.forEach(tabs, function(tab) { %>
+        <li class="tabs__menu-item">
+            <a class="tabs__menu-link" href="#<%= tab[1] %>-tab-panel-<%= tabIndex %>"><%= tab[0] %></a>
+        </li>
+    <% }); %>
+</ul>

data/app/assets/javascripts/workarea/admin/templates/takeover.jst.ejs

@@ -0,0 +1,3 @@
+<div class="takeover <%= takeoverClass %>" id="takeover">
+    <div class="takeover__content"><%= content %></div>
+</div>

data/app/assets/javascripts/workarea/admin/templates/ui_menu_heading.jst.ejs

@@ -0,0 +1 @@
+<li class="ui-menu-heading"><%= categoryName %></li>

data/app/assets/javascripts/workarea/admin/templates/ui_menu_item.jst.ejs

@@ -0,0 +1,8 @@
+<li class="ui-menu-item">
+    <span class="ui-menu-item-wrapper">
+        <% if (image) { %>
+            <img src="<%= image %>" alt="">
+        <% } %>
+        <%= label %>
+    </span
+</li>

data/app/assets/javascripts/workarea/admin/templates/wysiwyg_toolbar.jst.ejs.ruby

@@ -0,0 +1,59 @@
+%Q{
+  <div class="wysiwyg__toolbar" id="<%= id %>">
+      <div class='wysiwyg__toolbar-dropdown'>
+        <button type='button' class='wysiwyg__toolbar-dropdown-button'>
+          <%= I18n.t('workarea.admin.js.wysiwyg.style') %>
+          #{ inline_svg('workarea/admin/icons/expand_more.svg', class: 'svg-icon svg-icon--small', title: I18n.t('workarea.admin.js.wysiwyg.italic')) }
+        </button>
+        <div class='wysiwyg__toolbar-dropdown-content'>
+          <a class='wysiwyg__toolbar-dropdown-option' data-wysihtml-command='formatBlock' data-wysihtml-command-value='h2'>
+            <span><%= I18n.t('workarea.admin.js.wysiwyg.heading') %></span>
+          </a>
+          <a class='wysiwyg__toolbar-dropdown-option' data-wysihtml-command='formatBlock' data-wysihtml-command-value='h3'>
+            <span><%= I18n.t('workarea.admin.js.wysiwyg.sub_heading') %></span>
+          </a>
+          <a class='wysiwyg__toolbar-dropdown-option' data-wysihtml-command='formatBlock' data-wysihtml-command-blank-value='true'>
+            <span><%= I18n.t('workarea.admin.js.wysiwyg.plain_text') %></span>
+          </a>
+        </div>
+      </div>
+
+      <a class='wysiwyg__toolbar-button' data-wysihtml-command='bold'>
+        #{ inline_svg('workarea/admin/icons/wysiwyg/bold.svg', class: 'wysiwyg__toolbar-button-icon svg-icon', title: I18n.t('workarea.admin.js.wysiwyg.bold')) }
+      </a>
+      <a class='wysiwyg__toolbar-button' data-wysihtml-command='italic'>
+        #{ inline_svg('workarea/admin/icons/wysiwyg/italic.svg', class: 'wysiwyg__toolbar-button-icon svg-icon', title: I18n.t('workarea.admin.js.wysiwyg.italic')) }
+      </a>
+      <a class='wysiwyg__toolbar-button' data-wysihtml-command='underline'>
+        #{ inline_svg('workarea/admin/icons/wysiwyg/underline.svg', class: 'wysiwyg__toolbar-button-icon svg-icon', title: I18n.t('workarea.admin.js.wysiwyg.underline')) }
+      </a>
+
+      <a class='wysiwyg__toolbar-button' data-wysihtml-command='insertUnorderedList'>
+        #{ inline_svg('workarea/admin/icons/wysiwyg/bulleted_list.svg', class: 'wysiwyg__toolbar-button-icon svg-icon', title: I18n.t('workarea.admin.js.wysiwyg.bulleted_list')) }
+      </a>
+      <a class='wysiwyg__toolbar-button' data-wysihtml-command='insertOrderedList'>
+        #{ inline_svg('workarea/admin/icons/wysiwyg/numbered_list.svg', class: 'wysiwyg__toolbar-button-icon svg-icon', title: I18n.t('workarea.admin.js.wysiwyg.numbered_list')) }
+      </a>
+
+      <a class='wysiwyg__toolbar-button' data-wysihtml-action='change_view'>
+        #{ inline_svg('workarea/admin/icons/wysiwyg/html.svg', class: 'wysiwyg__toolbar-button-icon svg-icon', title: I18n.t('workarea.admin.js.wysiwyg.html')) }
+      </a>
+      <a class='wysiwyg__toolbar-button' data-wysihtml-command='createLink'>
+        #{ inline_svg('workarea/admin/icons/wysiwyg/link.svg', class: 'wysiwyg__toolbar-button-icon svg-icon', title: I18n.t('workarea.admin.js.wysiwyg.insert_link')) }
+      </a>
+
+      <div class='wysiwyg__dialog' data-wysihtml-dialog='createLink' style='display: none;'>
+        <div class='grid grid--bottom'>
+          <div class='grid__cell grid__cell--80'>
+            <div class='property property--inline-with-label'>
+              <label class='property__name'>#{ I18n.t('workarea.admin.js.wysiwyg.link') }</label>
+              <input class='text-box' data-wysihtml-dialog-field='href' value='http://'>
+            </div>
+          </div>
+          <div class='grid__cell grid__cell--20'>
+            <a class='button button--create' data-wysihtml-dialog-action='save'>#{ I18n.t('workarea.admin.js.wysiwyg.insert') }</a>
+          </div>
+        </div>
+      </div>
+  </div>
+}

data/app/assets/stylesheets/dropzonejs/admin/_dropzone.scss

@@ -0,0 +1,126 @@
+/*------------------------------------*\
+    #DROPZONE
+\*------------------------------------*/
+
+$dropzone-color:          $gray !default;
+$dropzone-bg-color:       $white !default;
+$dropzone-border-color:   $border-color !default;
+$dropzone-error-color:    $red !default;
+$dropzone-success-color:  $green !default;
+
+$dropzone-indicator-size:  24px !default;
+
+
+/**
+ * This is a port of the basic styles found in the `dropzonejs-rails` gem.
+ */
+
+.dropzone {
+    position: relative;
+    margin-bottom: $vertical-margin;
+    padding: 32px 16px;
+    color: $dropzone-color;
+    background: $dropzone-bg-color;
+    border: 1px solid $dropzone-border-color;
+    border-radius: $global-border-radius;
+}
+
+.dz-started {}
+
+    .dz-message {
+        padding: 0 0 16px;
+        text-align: center;
+
+        .dz-started & {
+            display: none;
+        }
+    }
+
+        .dz-message-text {
+            display: block;
+            margin: 16px 0;
+            font-size: $font-size + 10px;
+        }
+
+        .dz-file-sizes-text {
+            margin: 16px 0 24px;
+        }
+
+    .dz-preview {
+        display: inline-block;
+        position: relative;
+        margin: 0 1% 24px;
+        width: 23%;
+        vertical-align: top;
+    }
+
+    .dz-error {}
+    .dz-success {}
+
+        /**
+         * 1. height of the image (set in JS) plus the top and bottom padding
+         */
+
+        .dz-image {
+            margin:  0 0 8px;
+            padding: 16px;
+            height:  160px + 16px + 16px; /* [1] */
+            text-align: center;
+            border: 1px solid $dropzone-border-color;
+        }
+
+        .dz-details {}
+
+            .dz-filename {
+                word-wrap: break-word;
+            }
+
+            .dz-error-message {
+                display: none;
+                color: $dropzone-error-color;
+
+                .dz-error & {
+                    display: block;
+                }
+            }
+
+                .dz-error-mark {
+                    @include svg('invalid.svg', $dropzone-indicator-size);
+                }
+
+        .dz-indicators {
+            position: absolute;
+            top:  8px;
+            left: 8px;
+            width:  $dropzone-indicator-size;
+            height: $dropzone-indicator-size;
+            background: $dropzone-bg-color;
+            border-radius: 50%;
+            box-shadow: 0 0 0 1px $dropzone-bg-color;
+
+            .dz-error & {
+                display: none;
+            }
+        }
+
+            .dz-progress {
+                .dz-error &,
+                .dz-success & {
+                    display: none;
+                }
+            }
+
+                /**
+                 * 1. hack specificity to trump `.loading` component styles.
+                 */
+                .dz-upload.dz-upload { /* [1] */
+                    margin: 0;
+                }
+
+            .dz-success-mark {
+                display: none;
+
+                .dz-success & {
+                    @include svg('valid.svg', $dropzone-indicator-size);
+                }
+            }

data/app/assets/stylesheets/jquery_select2/admin/theme/_workarea.scss

@@ -0,0 +1,413 @@
+/*------------------------------------*\
+    #SELECT2-CONTAINER--WORKAREA
+\*------------------------------------*/
+
+/* stylelint-disable no-duplicate-selectors */
+
+$select2-min-width:                 300px !default;
+$select2-color:                     $off-black !default;
+$select2-placeholder-color:         $gray !default;
+$select2-bg-color:                  $white !default;
+$select2-border-color:              $border-color !default;
+$select2-dropdown-bg-color:         $white !default;
+$select2-option-disabled-color:     $light-gray !default;
+$select2-option-hilite-color:       $white !default;
+$select2-option-hilite-bg-color:    $blue !default;
+$select2-option-selected-color:     $white !default;
+$select2-option-selected-bg-color:  $blue !default;
+$select2-focus-border-color:        $blue !default;
+$select2-multiple-choice-bg-color:  $light-gray !default;
+$select2-remove-color:              $blue !default;
+$select2-remove-bg-color:           $white !default;
+
+
+/**
+ * This is the "workarea" theme for select2. It's added as part of the theme
+ * layer on top of the default settings for the library. Everything in this
+ * file should be wrapped inside a `.select2-container--workarea` modifier to
+ * ensure proper themeing.
+ *
+ * This first section handles the global theming.
+ */
+
+.select2-container--workarea {
+    min-width: $select2-min-width;
+
+    table & {
+        width: auto;
+    }
+
+
+    .product-rules & {
+        vertical-align: bottom;
+    }
+
+
+    /**
+     * Search field styling
+     *
+     * 1. required to display placeholder correctly
+     * 2. fix for multiselect placeholder bug
+     */
+
+    .select2-search--dropdown {
+        .select2-search__field {
+            border: 1px solid $select2-border-color;
+            box-shadow: none;
+            outline: 0;
+        }
+    }
+
+    .select2-search--inline {
+        .select2-search__field {
+            margin-top: $spacing-unit;
+            max-width: 188px; /* [2] */
+            min-width: 188px; /* [2] */
+            box-shadow: none;
+            outline: 0;
+            line-height: 1.2;
+        }
+    }
+
+    .select2-selection__choice ~ .select2-search--inline .select2-search__field {
+        max-width: none; /* [2] */
+        min-width: 0; /* [2] */
+    }
+
+    /**
+     * Dropdown styling
+     */
+
+    .select2-dropdown {
+        background-color: $select2-dropdown-bg-color;
+        border: 1px solid transparent;
+    }
+
+    .select2-dropdown--above {
+        border-bottom: 0;
+    }
+
+    .select2-dropdown--below {
+        border-top: 0;
+    }
+
+    /**
+     * Dropdown result styling
+     *
+     * 1. grouped options
+     * 2. disabled options
+     * 3. highlighted option state
+     * 4. focused option state
+     */
+
+    .select2-results > .select2-results__options {
+        max-height: 200px;
+        overflow-y: auto;
+    }
+
+    .select2-results__group { /* [1] */
+        display: block;
+        padding: 6px;
+        cursor: default;
+    }
+
+    .select2-results__option {
+        &[role=group] { /* [1] */
+            padding: 0;
+        }
+
+        &[aria-disabled=true] { /* [2] */
+            color: $select2-option-disabled-color;
+            fill: $select2-option-disabled-color;
+        }
+
+        &[aria-selected=true] {
+            color: $select2-option-selected-color;
+            background-color: $select2-option-selected-bg-color;
+            fill: $select2-option-selected-color;
+        }
+    }
+
+    .select2-results__option--highlighted[aria-selected] { /* [3] */
+        color: $select2-option-hilite-color;
+        background-color: $select2-option-hilite-bg-color;
+        fill: $select2-option-hilite-color;
+    }
+
+    &.select2-container--open .select2-dropdown { /* [4] */
+        border-color: $select2-focus-border-color;
+    }
+
+    .select2-results__option-content {
+        @extend %clearfix;
+        display: block;
+    }
+
+    .select2-results__option-graph {
+        float: right;
+    }
+
+    .select2-results__option-icon {
+        float: right;
+    }
+
+
+
+
+
+    /**
+     * This section handles styling of single select boxes.
+     *
+     * Default, closed state
+     *
+     * 1. focused state
+     * 2. container for chosen text
+     * 3. placeholder text
+     * 4. icon container
+     * 5. icon
+     * 6. close icon for the `allowClear: true` option
+     */
+
+    .select2-selection--single {
+        height: 31px;
+        background: $select2-bg-color;
+        border: 1px solid $select2-border-color;
+        border-radius: $global-border-radius;
+        outline: 0;
+
+        &:focus { /* [1] */
+            border: 1px solid $select2-focus-border-color;
+        }
+
+        .select2-selection__rendered { /* [2] */
+            padding-right: 41px;
+            color: $select2-color;
+            line-height: 29px;
+        }
+
+        .select2-selection__placeholder { /* [3] */
+            color: $select2-placeholder-color;
+        }
+
+        .select2-selection__arrow { /* [4] */
+            position: absolute;
+            top:   1px;
+            right: 1px;
+            width:  32px;
+            height: 29px;
+            background-color: $select2-bg-color;
+            border: 0;
+            border-left: 1px solid $select2-border-color;
+            border-top-right-radius:    $global-border-radius;
+            border-bottom-right-radius: $global-border-radius;
+        }
+
+        .select2-selection__arrow b::after { /* [5] */
+            @include center;
+            content: '▼';
+        }
+
+        .select2-selection__clear { /* [6] */
+            float: right;
+            font-size: 0;
+            cursor: pointer;
+
+            &::after {
+                font-size: 1rem;
+                content: '✖';
+            }
+        }
+
+        .select2-selection__clear.select2-selection__clear {
+            color: $select2-remove-color;
+        }
+    }
+
+    /**
+     * Open state
+     *
+     * 1. icon
+     * 2. if the options appear above select
+     * 3. if the options appear below select
+     */
+
+    &.select2-container--open {
+        .select2-selection--single {
+            border: 1px solid $select2-focus-border-color;
+
+            .select2-selection__arrow b::after { /* [1] */
+                @include center;
+                content: '▲';
+            }
+        }
+
+        &.select2-container--above { /* [2] */
+            .select2-selection--single {
+                border-top-right-radius: 0;
+                border-top-left-radius:  0;
+            }
+        }
+
+        &.select2-container--below { /* [3] */
+            .select2-selection--single {
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius:  0;
+            }
+        }
+    }
+
+    /**
+     * RTL overrides
+     */
+
+    &[dir="rtl"] {
+        .select2-selection--single {
+            .select2-selection__clear {
+                float: left;
+            }
+
+            .select2-selection__arrow {
+                right: auto;
+                left:  1px;
+                border: 0;
+                border-right: 1px solid $select2-border-color;
+                border-radius: 0;
+                border-bottom-left-radius: $global-border-radius;
+                border-top-left-radius:    $global-border-radius;
+            }
+        }
+    }
+
+
+
+
+
+    /**
+     * This section handles styling of "multiple" select boxes.
+     *
+     * Default, closed state
+     *
+     * 1. focused state
+     * 2. container for chosen text
+     * 3. choice "pill" UI
+     * 4. icon
+     * 5. close icon for the `allowClear: true` option
+     */
+
+    .select2-selection {
+        background-color: $select2-bg-color;
+        border: 1px solid $select2-border-color;
+        border-radius: $global-border-radius;
+        cursor: text;
+        text-align: left;
+
+        &:focus { /* [1] */
+            @include focus-ring;
+        }
+    }
+
+    /**
+     * This section handles styling of "multiple" select boxes.
+     *
+     * Default, closed state
+     *
+     * 1. focused state
+     * 2. container for chosen text
+     * 3. choice "pill" UI
+     * 4. icon
+     * 5. close icon for the `allowClear: true` option
+     */
+
+    .select2-selection--multiple {
+
+        .select2-selection__rendered { /* [2] */
+            margin:  0;
+            padding: 0 5px;
+            font-weight: bold;
+            list-style: none;
+        }
+
+        .select2-selection__choice { /* [3] */
+            @extend %truncate;
+            position: relative;
+            margin-top:   8px;
+            margin-right: 8px;
+            padding: 2px 28px 0 12px;
+            height: 24px;
+            float: left;
+            background-color: $select2-multiple-choice-bg-color;
+            border-radius: 12px;
+            cursor: default;
+        }
+
+        .select2-selection__choice__remove { /* [4] */
+            font-size: 0;
+            cursor: pointer;
+
+            &::after {
+                font-size: 1rem;
+                content: '✖';
+            }
+        }
+
+        .select2-selection__choice__remove.select2-selection__choice__remove { /* [4] */
+            position: absolute;
+            top:   2px;
+            right: $spacing-unit;
+            color: $select2-remove-color;
+        }
+
+        .select2-selection__clear { /* [5] */
+            display: none;
+        }
+    }
+
+    /**
+     * Open state
+     *
+     * 1. if the options appear above select
+     * 2. if the options appear below select
+     */
+
+    &.select2-container--open {
+        .select2-selection {
+            @include focus-ring;
+        }
+
+        &.select2-container--above { /* [1] */
+            .select2-selection--multiple {
+                border-top-right-radius: 0;
+                border-top-left-radius:  0;
+            }
+        }
+
+        &.select2-container--below { /* [2] */
+            .select2-selection--multiple {
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius:  0;
+            }
+        }
+    }
+
+    /**
+     * RTL overrides
+     */
+
+    &[dir="rtl"] {
+        .select2-selection--multiple {
+            .select2-selection__choice {
+                float: right;
+            }
+
+            .select2-selection__choice {
+                margin-right: auto;
+                margin-left:  5px;
+            }
+
+            .select2-selection__choice__remove {
+                margin-right: auto;
+                margin-left:  2px;
+            }
+        }
+    }
+}