github.com/replicatedhq/ship@v0.55.0/web/init/src/scss/components/shared/Sidebar.scss (about)

     1  @import "../../variables/variables.scss";
     2  
     3  .Sidebar-wrapper {
     4    max-width: 240px;
     5  }
     6  .SidebarContent-wrapper {
     7    background-color: $sidebar-background;
     8    border-right: 1px solid #DFDFDF;
     9  }
    10  .SidebarElements-wrapper {
    11    padding-top: 30px;
    12  }
    13  
    14  /* Sidebar Items */
    15  .SidebarItem a {
    16    padding: 15px 20px 15px 30px;
    17    position: relative;
    18    cursor: pointer
    19  }
    20  .SidebarItem-wrapper.is-active .SidebarItem {
    21    background-color: rgba(255,255,255,0.3);
    22  }
    23  .SidebarItem-wrapper.is-active .SidebarItem::before {
    24    content: '';
    25    display: block;
    26    position: absolute;
    27    width: 3px;
    28    height: 100%;
    29    top: 0;
    30    left: 0;
    31    background-color: $highlight-color;
    32  }
    33  .SidebarItem-wrapper .SidebarItem a {
    34    font-size: 16px;
    35    line-height: 16px;
    36    font-weight: 500;
    37    color: rgba($sidebar-label-color ,0.8);
    38    transition: color .2s;
    39    display: block;
    40  }
    41  .SidebarItem-wrapper .SidebarItem:hover a {
    42    color: $sidebar-label-color;
    43    text-decoration: none;
    44  }
    45  .SidebarItem-wrapper.is-active .SidebarItem a,
    46  .SidebarItem-wrapper.is-active .SidebarItem:hover a {
    47    color: $sidebar-label-color;
    48    font-weight: 600;
    49  }
    50  
    51  
    52  /* Sidebar SubItems */
    53  .SidebarItem-wrapper.SubItem .SidebarItem .SubItem-label {
    54    padding: 15px 30px 15px 50px;
    55    cursor: pointer;
    56  }
    57  .SidebarItem-wrapper.SubItem.is-active .SidebarItem {
    58    background-color: transparent;
    59  }
    60  .SidebarItem-wrapper.SubItem.is-active .SidebarItem::before {
    61    content: '';
    62    display: block;
    63    position: absolute;
    64    width: 3px;
    65    height: 100%;
    66    top: 0;
    67    right: 0;
    68    left: auto;
    69    background-color: $highlight-color;
    70  }
    71  .SidebarItem-wrapper.SubItem .SidebarItem .SubItem-label {
    72    font-size: 14px;
    73    line-height: 20px;
    74    font-weight: 400;
    75    color: rgba($sidebar-label-color ,0.8);
    76    transition: color .2s;
    77    display: block;
    78  }
    79  .SidebarItem-wrapper.SubItem .SidebarItem:hover .SubItem-label {
    80    color: $sidebar-label-color;
    81    text-decoration: none;
    82  }
    83  .SidebarItem-wrapper.SubItem.is-active .SidebarItem .SubItem-label,
    84  .SidebarItem-wrapper.SubItem.is-active .SidebarItem:hover .SubItem-label {
    85    color: $sidebar-label-color;
    86    font-weight: 500;
    87  }
    88  
    89  /* Media Queries */
    90  @media screen and (min-width: 64em) {
    91    .SidebarItem a {
    92      padding-left: 30px;
    93      padding-right: 30px;
    94    }
    95  }
    96  
    97  /* ≥ 1280px */
    98  @media screen and (min-width: 80em) {
    99    .Sidebar-wrapper {
   100      max-width: 315px;
   101    }  
   102  }