jupyterlab/packages/application/style/sidepanel.css

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Variables
|----------------------------------------------------------------------------*/

:root {
  --jp-private-sidebar-tab-width: 32px;
}

/*-----------------------------------------------------------------------------
| SideBar
|----------------------------------------------------------------------------*/

.jp-SideBar {
  /* This is needed so that all font sizing of children done in ems is
   * relative to this base size */
  font-size: var(--jp-ui-font-size1);
}

.jp-SideBar.lm-TabBar {
  color: #4a4a4a;
  background-color: white;
  font-size: var(--jp-ui-font-size1);
  min-width: 180px;
  max-width: 180px;
  display: block;
  height: 100%;
}

.jp-SideBar .lm-TabBar-content {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  list-style-type: none;
}

.jp-SideBar .lm-TabBar-tab {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 25px;
  border: none;
  color: #4a4a4a;
}

.jp-SideBar .lm-TabBar-tab.lm-mod-current {
  background-color: #147bd1;
  color: white;
}

.jp-SideBar .lm-TabBar-tab .jp-icon3[fill] {
  fill: #4a4a4a;
}

.jp-SideBar .lm-TabBar-tab.lm-mod-current .jp-icon3[fill] {
  fill: white;
}

.jp-SideBar .lm-TabBar-tabIcon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.jp-SideBar .lm-TabBar-tabIcon {
  margin-right: 16px;
}

.jp-SideBar .lm-TabBar-tab:hover:not(.lm-mod-current) {
  background-color: #eeeeee;
}

/* Borders */

.jp-SideBar.lm-TabBar.jp-mod-right {
  border-left: var(--jp-border-width) solid var(--jp-border-color0);
}

.jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab + .lm-TabBar-tab {
  border-left: var(--jp-border-width) solid var(--jp-layout-color2);
}

.jp-SideBar.lm-TabBar.jp-mod-right
  .lm-TabBar-tab.lm-mod-current
  + .lm-TabBar-tab {
  border-left: var(--jp-border-width) solid var(--jp-border-color0);
}

.jp-SideBar.lm-TabBar.jp-mod-right
  .lm-TabBar-tab
  + .lm-TabBar-tab.lm-mod-current {
  border-left: var(--jp-border-width) solid var(--jp-border-color0);
}

.jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab.lm-mod-current:last-child {
  border-right: var(--jp-border-width) solid var(--jp-border-color0);
}

/* Transforms */

.jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-content {
  flex-direction: row;
  transform: rotate(90deg) translateY(-100%);
}

.jp-SideBar.lm-TabBar.jp-mod-right
  .lm-TabBar-tab:not(.lm-mod-current)
  .lm-TabBar-tabIcon {
  transform: rotate(-90deg);
}

.jp-SideBar.lm-TabBar.jp-mod-right
  .lm-TabBar-tab.lm-mod-current
  .lm-TabBar-tabIcon {
  transform: rotate(-90deg)
    translate(
      calc(0.5 * var(--jp-border-width)),
      calc(-0.5 * var(--jp-border-width))
    );
}

/* Down */

/* Borders */

#jp-down-stack > .lm-TabBar {
  border-top: var(--jp-border-width) solid var(--jp-border-color0);
  border-bottom: var(--jp-border-width) solid var(--jp-border-color0);
}

#jp-down-stack > .lm-TabBar .lm-TabBar-tab {
  border-left: none;
  border-right: none;
}

#jp-down-stack > .lm-TabBar .lm-TabBar-tab.lm-mod-current {
  border: var(--jp-border-width) solid var(--jp-border-color1);
  border-bottom: none;
  transform: translateY(var(--jp-border-width));
}

#jp-down-stack > .lm-TabBar .lm-TabBar-tab.lm-mod-current:first-child {
  border: none;
  border-right: var(--jp-border-width) solid var(--jp-border-color1);
}

/* Stack panels */

#jp-left-stack > .lm-Widget,
#jp-right-stack > .lm-Widget {
  min-width: var(--jp-sidebar-min-width);
  background-color: #f8f8f9;
}

#jp-right-stack {
  border-left: var(--jp-border-width) solid var(--jp-border-color1);
}

#jp-left-stack {
  box-shadow: 1px 0px 6px 0px rgba(0, 0, 0, 0.12);
}

#jp-down-stack > .lm-TabPanel-stackedPanel {
  border: none;
}