penpot/frontend/resources/styles/main/partials/sidebar.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>

$width-settings-bar: 15rem;
  // This width is also used in update-viewport-size at frontend/src/app/main/data/workspace.cljs

.settings-bar {
  background-color: $color-gray-50;
  border-left: 1px solid $color-gray-60;
  bottom: 0;
  height: 100%;
  position: fixed;
  right: 0;
  width: $width-settings-bar;
  z-index: 10;
  overflow-y: auto;

  &.settings-bar-left {
    border-left: none;
    border-right: 1px solid $color-gray-60;
    left: 40px;
  }

  .settings-bar-inside {
    align-items: flex-start;
    display: grid;
    grid-template-columns: 100%;

    &[data-layout*='sitemap-pages'] {
        grid-template-rows: auto;
    }

    &[data-layout*='layers'] {
        grid-template-rows: auto 1fr;
    }

    &[data-layout*='libraries'] {
        grid-template-rows: auto 1fr;
    }

    &[data-layout*='layers'][data-layout*='sitemap-pages'] {
        grid-template-rows: 11.5rem 1fr;
    }

    &[data-layout*='libraries'][data-layout*='sitemap-pages'] {
        grid-template-rows: 11.5rem 1fr;
    }

    &[data-layout*='layers'][data-layout*='libraries'] {
        grid-template-rows: auto 30% 1fr;
    }

    &[data-layout*='layers'][data-layout*='libraries'][data-layout*='sitemap-pages'] {
        grid-template-rows: 11.5rem 25% 1fr;
    }


    flex-direction: column;
    padding-top: 40px;
    height: 100%;

    .tool-window {
      border-bottom: 1px solid $color-gray-60;
      display: flex;
      flex-direction: column;
      flex: 1;
      width: 100%;
      height: 100%;
      overflow: hidden;

      .tool-window-bar {
        align-items: center;
        display: flex;
        flex-shrink: 0;
        padding: $small;
        overflow: hidden;

        svg {
          fill: $color-gray-20;
          height: 12px;
          width: 12px;
        }

        span {
          color: $color-gray-10;
          font-size: $fs13;
        }

        span.tool-badge {
          border: 1px solid $color-primary;
          border-radius: 2px;
          font-size: $fs10;
          color: $color-primary;
          padding: 2px 4px;
          margin-left: auto;
        }

        span.tool-link {
          margin-left: auto;

          svg {
            fill: $color-gray-30;
            height: 16px;
            width: 16px;
          }

          &:hover {
            svg {
              fill: $color-primary;
            }
          }
        }

        .tool-window-icon {
          margin-right: $small;
          display: none;
        }

        .tool-window-close {
          cursor: pointer;
          margin-left: auto;
          transform: rotate(45deg);

          &:hover {

            svg {
              fill: $color-danger;
            }

          }

        }

      }



    }
  }
}

.tool-window-content {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}

.element-list {
  margin: 0;
  width: 100%;

  ul {
    border-left: 9px solid $color-gray-50;
    margin: 0;

    li {
      border-left: 1px solid $color-gray-40;
    }
  }

  li {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;


    &.open {

      ul {

        li {

          .element-list-body {
            border-style: dashed;
          }
        }
      }
    }
  }
}