tracim_v2/src/css/Folder.styl

// -----------------------------------------------------
// border management for Workspace container
border-style = 1px solid secondColor
.folder__header
  border border-style
.folder + .file, .file + .file
  border-bottom 0
.folder__content > .file, .folder__content > .folder
  border-bottom 0
.folder:not(.active).item-last
  border-bottom border-style
.file
  border border-style
  &.item-last
    border-bottom border-style
// @Info: the very last line of file or folder has it's border bottom added in js
// -----------------------------------------------------

.folder.active > .folder__content > .file, .folder.active > .folder__content > .extandedaction
  padding-right 7px

folderclose()
  height 0
  visibility hidden
  opacity 0

folderopen()
  height 100%
  opacity 1
  visibility visible
  transition opacity 0.3s

.folder
  padding-left 30px
  & > .folder__header
    folderopen()
  & > .folder__content
    folderclose()
    & > .file, > .folder
      folderclose()
  &.active
    & > .folder__header
      .folder__header__triangleborder
        display block
        &__triangle
          display block
    & > .folder__content
      folderopen()
      & > .file, > .folder
        folderopen()
  &__header
    position relative
    display flex
    justify-content space-between
    margin-left -30px
    border-bottom 0
    padding 10px 0
    background-color lightGrey
    cursor pointer
    &:hover
      background-color fourthColor
      .folder__header__triangleborder__triangle
        border-color fourthColor transparent transparent transparent
    &__triangleborder
      display none
      position absolute
      bottom -25px
      left -1px
      border-style solid
      border-width 25px 30px 0 30px
      border-color secondColor transparent transparent transparent
      z-index 1
      &__triangle
        display none
        position absolute
        top -26px
        left -30px
        border-style solid
        border-width 25px 30px 0 30px
        border-color lightGrey transparent transparent transparent
    &__name
      display flex
      &__icon
        font-size 25px
        color darkGrey
        text-align center
      &__text
        margin 0 15px 0 0
        white-space nowrap
        text-overflow ellipsis
        overflow hidden
        width 400px
        font-size 17px
        color darkGrey
      &__button
        &__advancedbtn
          position relative
        &__addbtn
          margin auto 0
          cursor pointer
          &:hover > .folder__header__name__addbtn__text
            color white
          .addbtn
            &__text
              font-size 17px
              color thirdColor
              border-color thirdColor
              &:hover, &:focus, &:active
                color off-white
                border-color thirdColor
                background-color thirdColor
                box-shadow 0 0 1px 2px fifthColor
                outline fifthColor
              &::after
                margin-left 20px
            &__subdropdown
              padding 0
              .subdropdown__link
                padding 10px
    &__contenttype
      display flex
      justify-content flex-end
      &__text
        font-size 17px
        color darkBlue
      &__icon
        font-size 17px
        color darkBlue
        & > i
          margin-right 3px

@media (max-width: max-xs)
  .folder
    &__header
      &__name
        &__icon
          padding 14px 15px
          font-size 20px
        &__text
          font-size 15px