Merge pull request #2894 from ellisonbg/collapser-design-nyc

Collapser re-style

packages/cells/src/collapser.tsx

@@ -26,11 +26,6 @@ const COLLAPSER_CLASS = 'jp-Collapser';
  */
 const COLLAPSER_CHILD_CLASS = 'jp-Collapser-child';
 
-/**
- * The CSS class added to the collapser icon.
- */
-const COLLAPSER_ICON_CLASS = 'jp-Collapser-icon';
-
 /**
  * The CSS class added to input collapsers.
  */
@@ -41,16 +36,6 @@ const INPUT_COLLAPSER = 'jp-InputCollapser';
  */
 const OUTPUT_COLLAPSER = 'jp-OutputCollapser';
 
-/**
- * The CSS class added the collapser icon in the collapsed state.
- */
-const COLLAPSED_ICON_CLASS = 'jp-ExpandMoreIcon';
-
-/**
- * The CSS class added the collapser icon in the expanded state.
- */
-const EXPANDED_ICON_CLASS = 'jp-ExpandLessIcon';
-
 /**
  * The CSS class added the collapser child when collapsed.
  */
@@ -87,16 +72,11 @@ abstract class Collapser extends VDomRenderer<null> {
    */
   protected render(): VirtualNode | ReadonlyArray<VirtualNode> {
     let childClass = COLLAPSER_CHILD_CLASS;
-    let iconClass = COLLAPSER_ICON_CLASS;
     if (this.collapsed) {
       childClass += ` ${MOD_COLLAPSED_CLASS}`;
-      iconClass += ` ${COLLAPSED_ICON_CLASS}`;
-    } else {
-      iconClass += ` ${EXPANDED_ICON_CLASS}`;
     }
     return (
       <div className={childClass}  onclick={ (e) => this.handleClick(e) } >
-        <div className={iconClass} />
       </div>
     );
   }

packages/notebook/style/index.css

@@ -54,7 +54,7 @@
 
 
 .jp-Notebook .jp-Cell {
-  overflow: visible
+  overflow: visible;
 }
 
 
@@ -105,13 +105,15 @@
   color: var(--jp-cell-prompt-font-color-not-active);
 }
 
-.jp-Notebook .jp-Cell.jp-mod-active .jp-Cell-inputCollapser,
-.jp-Notebook .jp-Cell.jp-mod-active .jp-Cell-outputCollapser {
-  border-left: 2px solid var(--jp-brand-color1);
-  border-top: 2px solid var(--jp-brand-color1);
-  border-bottom: 2px solid var(--jp-brand-color1);
+.jp-Notebook .jp-Cell.jp-mod-active .jp-Cell-inputCollapser .jp-Collapser-child,
+.jp-Notebook .jp-Cell.jp-mod-active .jp-Cell-outputCollapser .jp-Collapser-child {
+  border-left: 4px solid var(--jp-brand-color1);
 }
 
+.jp-Notebook .jp-Cell .jp-Cell-inputCollapser:hover .jp-Collapser-child,
+.jp-Notebook .jp-Cell .jp-Cell-outputCollapser:hover .jp-Collapser-child {
+  border-left: 20px solid var(--jp-brand-color1);
+}
 
 /* Command mode */