amatriain/feedbunch

#sidebar-column {
  overflow-y: auto;
  padding-bottom: 10px;
  position: fixed;
  top:50px;
  bottom:0;
  background-color: #FFFFFF;
}

/* In smartphones the sidebar hides the entries below, unless moved out of the viewport */
@media (max-width: $screen-sm-min) {
  #sidebar-column {
    z-index: 1;
  }

  #entries-column {
    z-index: 0;
  }
}

/* In screens bigger than a smartphone the sidebar and entries list are always visible */
@media (min-width: $screen-sm-min) {
  #sidebar-column {
    z-index: auto;
  }

  /* Override via CSS the style="transform: translateX(-100%)" attribute that may have been added to the sidebar
  via javascript */
  #sidebar-column[style] {
    transform: translateX(0%) !important;
  }

  #entries-column {
    z-index: auto;
  }
}

/* Large, easily clickable feeds and folders in tablets and smartphones */
@media (max-width: $screen-md-min) {

  #sidebar-column {
    padding: {
      left: 5px;
      right:5px;
    }

    #sidebar {

      #folders-list {
        a[data-sidebar-feed],
        a[data-sidebar-folder] {
          padding: {
            top: 16px;
            bottom: 16px;
          }
        }
      }

      #start-page {
        padding: {
          top: 16px;
          bottom: 16px;
        }
      }
    }
  }
}

/* Smaller feed in larger screens */
@media (min-width: $screen-md-min) {

  #sidebar {

    #folders-list {
      a[data-sidebar-feed] {
        padding: {
          top: 5px;
          bottom: 5px;
        }
      }
    }

    #start-page {
      padding: {
        top: 5px;
        bottom: 5px;
      }
    }

    /* Highlight folder on hover in larger screens */
    #folders-list a.sidebar-folder:hover{
      background-color: #E8E8E8;
    }
  }
}

#sidebar {

  a:hover {
    background-color: transparent;
  }

  a.highlighted-link {
    background-color: #eee;
  }

  li.active > a#start-page,
  li.active > a#start-page.highlighted-link,
  li.active > a[data-sidebar-feed],
  li.active > a[data-sidebar-feed].highlighted-link {
    background-color: #337ab7;
    color: #fff;
  }

  .sidebar-spinner {
    margin-left: 45%;
  }

  #start-page {
    margin-top: 20px;
    padding: {
      left: 15px;
      right: 15px;
    }
  }

  hr {
    margin: {
      top: 8px;
      bottom: 8px;
    }
  }

  .nav-pills > .active > a .badge {
    background-color: #FFFFFF;
    color: #428BCA;
  }

  .badge {
    font-family: OpenSansBold;
  }

  #folders-list {
    margin-bottom: 1em;

    #folder-none {
      padding: {
        left: 8px;
        right:8px;
        bottom:8px;
      }
    }

    [data-folder-id] {
      .folder-content {
        height: 0;
        overflow:  hidden;
        padding: {
          left: 8px;
          right: 8px;
        }
      }

      .folder-content.open-folder {
        height: auto;
        padding: {
          top: 8px;
          bottom: 8px;
        }
      }
    }

    a[data-sidebar-feed] {
      padding: {
        left: 0;
        right:0;
      }
    }

    a[data-sidebar-feed],
    a[data-sidebar-folder] {

      .col-icon {
        padding: {
          left: 10px;
          right: 0;
        }
      }

      .col-title {
        padding: {
          left: 10px;
          right: 5px;
        }
      }

      .col-badge {
        padding: {
          left: 0;
          right: 0;
        }
        margin-right: 10px;
        text-align: right;
      }
    }

    .folder-arrow {
      margin-top: 4px;
      width: 13px;
    }

    .folder-arrow.down-arrow {
      -webkit-transform: rotateZ(90deg);
      transform: rotateZ(90deg);
    }

    .folder-unread-badge {
      margin: {
        top: 2px;
        right: 0;
      }
    }

    .folder-icon,
    .feed-icon {
      margin-top: 4px;
    }

    .sidebar-folder{
      background-color: #F5F5F5;
      border-radius: 0;
      padding: {
        top: 5px;
        bottom: 5px;
        left: 0;
        right: 0;
      }
    }

    .folder-panel{
      margin: {
        top: -1px;
        bottom: -1px;
      }
    }

    .sidebar-feed-title,
    .sidebar-folder-title{
      display:inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      padding-left: 5px;
      vertical-align: middle;
    }
  }
}