Further cleanup of SCSS

elastic · Sep 16, 2020 · e79be95 · e79be95
1 parent b6a46bd
commit e79be95
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 72 deletions.
diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss
@@ -109,14 +109,49 @@ discover-app {
   top: $euiSizeXS;
 }
 
-.dscFixedScroll {
+.dscTableFixedScroll {
   overflow-x: auto;
   padding-bottom: 0;
 
-  + .dscFixedScroll__scroller {
+  + .dscTableFixedScroll__scroller {
     position: fixed;
     bottom: 0;
     overflow-x: auto;
     overflow-y: hidden;
   }
 }
+
+.dscCollapsibleSidebar {
+  position: relative;
+  z-index: $euiZLevel1;
+
+  .dscCollapsibleSidebar__collapseButton {
+    position: absolute;
+    top: 0;
+    right: -20px;
+    cursor: pointer;
+    z-index: -1;
+    min-height: $euiSizeM;
+    min-width: $euiSizeM;
+    padding: $euiSizeXS * .5;
+  }
+
+  &.closed {
+    width: 0 !important;
+    border-right-width: 0;
+    border-left-width: 0;
+  }
+}
+
+@include euiBreakpoint('xs', 's', 'm') {
+  .dscCollapsibleSidebar {
+    &.closed {
+      display: none;
+    }
+
+    .dscCollapsibleSidebar__collapseButton {
+      display: none;
+    }
+  }
+}
+
diff --git a/src/plugins/discover/public/application/angular/directives/_index.scss b/src/plugins/discover/public/application/angular/directives/_index.scss
@@ -1,3 +1,2 @@
 @import 'no_results';
 @import 'histogram';
-@import './collapsible_sidebar/index';
diff --git a/...cover/public/application/angular/directives/collapsible_sidebar/_collapsible_sidebar.scss b/...cover/public/application/angular/directives/collapsible_sidebar/_collapsible_sidebar.scss
diff --git a/src/plugins/discover/public/application/angular/directives/collapsible_sidebar/_depth.scss b/src/plugins/discover/public/application/angular/directives/collapsible_sidebar/_depth.scss
diff --git a/src/plugins/discover/public/application/angular/directives/collapsible_sidebar/_index.scss b/src/plugins/discover/public/application/angular/directives/collapsible_sidebar/_index.scss
diff --git a/src/plugins/discover/public/application/angular/directives/fixed_scroll.js b/src/plugins/discover/public/application/angular/directives/fixed_scroll.js
@@ -42,7 +42,7 @@ export function createFixedScroll($scope, $timeout) {
   return function (el) {
     const $el = typeof el.css === 'function' ? el : $(el);
     let $window = $(window);
-    let $scroller = $('<div class="dscFixedScroll__scroller">').height(SCROLLER_HEIGHT);
+    let $scroller = $('<div class="dscTableFixedScroll__scroller">').height(SCROLLER_HEIGHT);
 
     /**
      * Remove the listeners bound in listen()

diff --git a/src/plugins/discover/public/application/angular/directives/fixed_scroll.test.js b/src/plugins/discover/public/application/angular/directives/fixed_scroll.test.js
@@ -122,7 +122,7 @@ describe('FixedScroll directive', function () {
         return {
           $container: $el,
           $content: $content,
-          $scroller: $parent.find('.dscFixedScroll__scroller'),
+          $scroller: $parent.find('.dscTableFixedScroll__scroller'),
         };
       };
     });

diff --git a/src/plugins/discover/public/application/components/discover_legacy.tsx b/src/plugins/discover/public/application/components/discover_legacy.tsx
@@ -175,7 +175,7 @@ export function DiscoverLegacy({
         <main className="container-fluid">
           <div className="row">
             <div
-              className={`col-md-2 dscSidebar__container collapsible-sidebar ${sidebarClassName}`}
+              className={`col-md-2 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
               id="discover-sidebar"
               data-test-subj="discover-sidebar"
             >
@@ -203,7 +203,7 @@ export function DiscoverLegacy({
                 aria-controls="discover-sidebar"
                 aria-expanded={isSidebarClosed ? 'false' : 'true'}
                 aria-label="Toggle sidebar"
-                className="kbnCollapsibleSidebar__collapseButton"
+                className="dscCollapsibleSidebar__collapseButton"
               />
             </div>
             <div className={`dscWrapper ${mainSectionClassName}`}>
@@ -260,7 +260,7 @@ export function DiscoverLegacy({
 
                   <div className="dscResults">
                     <section
-                      className="dscTable dscFixedScroll"
+                      className="dscTable dscTableFixedScroll"
                       aria-labelledby="documentsAriaLabel"
                       ref={fixedScrollRef}
                     >

diff --git a/x-pack/plugins/reporting/server/lib/layouts/preserve_layout.css b/x-pack/plugins/reporting/server/lib/layouts/preserve_layout.css
@@ -36,7 +36,7 @@ filter-bar,
 /* hide unusable controls */
 discover-app .dscTimechart,
 discover-app .dscSidebar__container,
-discover-app .kbnCollapsibleSidebar__collapseButton,
+discover-app .dscCollapsibleSidebar__collapseButton,
 discover-app .discover-table-footer {
   display: none;
 }

diff --git a/x-pack/plugins/reporting/server/lib/layouts/print.css b/x-pack/plugins/reporting/server/lib/layouts/print.css
@@ -35,7 +35,7 @@ filter-bar,
 /* hide unusable controls */
 discover-app .dscTimechart,
 discover-app .dscSidebar__container,
-discover-app .kbnCollapsibleSidebar__collapseButton,
+discover-app .dscCollapsibleSidebar__collapseButton,
 discover-app .discover-table-footer {
   display: none;
 }