DS-4540 by maikelkoopman: new css files for preview with prefix

color/color.inc

@@ -50,29 +50,9 @@ $info = [
     'logo.svg',
   ],
 
-  /**
-   * Gradient definitions.
-   *
-   * Example:
-   *
-   *  'gradients' => array(
-   *    array(
-   *      // (x, y, width, height).
-   *      'dimension' => array(0, 0, 0, 0),
-   *      // Direction of gradient ('vertical' or 'horizontal').
-   *      'direction' => 'vertical',
-   *      // Keys of colors to use for the gradient.
-   *      'colors' => array('top', 'bottom'),
-   *    ),
-   *  ),
-   *
-   * Preview files
-   *
-   * @todo Make sure we update the preview it will help
-   * Distro users / SaaS users a lot!
-   * 'preview_library' => 'socialbase/color.preview'.
-   */
-  'preview_html' => '',
+  // Preview files.
+  'preview_library' => 'socialblue/color.preview',
+  'preview_html' => 'color/preview.html',
 
   // Attachments.
   '#attached' => [

color/preview.html

-<div class="color-preview">
+<div class="preview">
 
   <div class="color-preview-header">
     <nav class="navbar navbar-default" role="banner">
@@ -7,38 +7,17 @@
         <div class="block-system-branding-block navbar-header">
 
           <a class="navbar-brand" href="/" title="Home" rel="home">
-            <img src="/sites/themes/files/color/socialblue-85f09485/logo.svg" alt="Open Social">
+            <img src="/profiles/contrib/social/themes/socialblue/logo.svg" alt="Open Social" />
           </a>
 
-          <button href="#" data-toggle="collapse" data-target="#main-navigation" type="button" aria-expanded="false" class="navbar-toggle collapsed">
+          <a href="#" data-toggle="collapse" data-target="#main-navigation" type="button" aria-expanded="false" class="navbar-toggle collapsed">
             <span>Menu</span>
-            <span class="sr-only">
-      Toggle navigation    </span>
-
-          </button>
+          </a>
 
         </div>
 
 
         <div id="main-navigation" class="collapse navbar-collapse">
-          <div class="navbar-search">
-
-            <form class="search-content-form clearfix search-take-over" data-drupal-selector="search-content-form" novalidate="novalidate" role="search" action="/" method="post" id="search-content-form" accept-charset="UTF-8" data-drupal-form-fields="edit-search-input-content,edit-submit">
-              <div class="form-group">
-                <button class="btn--close-search-take-over" type="button">
-                  <svg class="icon-search-form-close">
-                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close"></use>
-                  </svg>
-                </button>
-
-                <input data-drupal-selector="edit-search-input-content" class="form-text form-control" placeholder="What are you looking for ?" autocomplete="off" type="text" id="edit-search-input-content" name="search_input_content" value="" size="60" maxlength="128">
-
-                <button data-drupal-selector="edit-submit" class="button js-form-submit form-submit btn js-form-submit" type="submit" id="edit-submit" name="op" value="Search Content">Search Content</button>
-
-              </div>
-            </form>
-
-          </div>
 
           <ul class="menu nav navbar-nav">
             <li>
@@ -46,88 +25,16 @@
             </li>
             <li class="expanded dropdown">
               <a href="" class="dropdown-toggle" data-toggle="dropdown">Explore <span class="caret"></span></a>
-              <ul class="menu dropdown-menu">
-                <li>
-                  <a href="#">Community</a>
-                </li>
-                <li>
-                  <a href="#">All groups</a>
-                </li>
-                <li>
-                  <a href="#">All events</a>
-                </li>
-                <li>
-                  <a href="#">All topics</a>
-                </li>
-                <li>
-                  <a href="#">All members</a>
-                </li>
-              </ul>
-
             </li>
           </ul>
 
-          <div class="navbar__open-search-control">
-            <button class="navbar__open-search-block" rel="search" title="Click to open search box">
-            </button>
-            <svg class="navbar-nav__icon navbar-nav__icon--search">
-              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
-            </svg>
-          </div>
         </div>
 
       </div>
-    </nav>
-  </div>
 
-  <div class="color-preview-main clearfix">
-    <div class="color-preview-sidebar">
-      <div class="color-preview-block preview-block">
-        <h2>Etiam est risus</h2>
-        <div class="preview-content">
-          Maecenas id porttitor Ut enim ad minim veniam, quis nostrudfelis.
-          Laboris nisi ut aliquip ex ea.
-        </div>
-      </div>
-    </div>
-    <div class="color-preview-content">
-      <h1 class="color-preview-page-title">Lorem ipsum dolor</h1>
-      <div class="color-preview-node">
-        <div class="preview-content">
-          Sit amet, <a>consectetur adipisicing elit</a>, sed do eiusmod tempor
-          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-          nostrud <a>exercitation ullamco</a> laboris nisi ut aliquip ex ea
-          commodo consequat. Maecenas id porttitor Ut enim ad minim veniam, quis nostr udfelis.
-        </div>
-      </div>
-    </div>
-  </div>
+    </nav>
 
-  <div class="color-preview-footer-wrapper">
-    <div class="color-preview-footer-columns clearfix">
-      <div class="preview-footer-column">
-        <div class="preview-block">
-          <h2>Etiam est risus</h2>
-          <div class="content">
-            Maecenas id porttitor Ut enim ad minim veniam, quis nostrudfelis.
-            Laboris nisi ut aliquip ex ea.
-          </div>
-        </div>
-      </div>
-      <div class="preview-footer-column">
-        <div class="preview-block preview-block-menu">
-          <h2>Erisus dolor</h2>
-          <div class="preview-content">
-            <ul>
-              <li><a>Donec placerat</a></li>
-              <li><a>Nullam nibh dolor</a></li>
-              <li><a>Blandit sed</a></li>
-              <li><a>Fermentum id</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 
 </div>
+