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

     1  .dirtree-wrapper {
     2    background-color: #124B71;
     3    padding-bottom: 80px;
     4  }
     5  
     6  .dirtree {
     7    padding: 16px 20px;
     8  }
     9  
    10  .FileTree-wrapper li .u-deleteOverlayIcon {
    11    position: absolute;
    12    right: 0;
    13    z-index: 4;
    14  }
    15  
    16  .FileTree-wrapper.has-border {
    17    position: relative;
    18  
    19    &::before {
    20      content: "";
    21      display: block;
    22      width: calc(100% - 40px);
    23      height: 1px;
    24      background-color: rgba(#ffffff, 0.4);
    25      left: 20px;
    26      top: 0;
    27      position: absolute;
    28    }
    29  }
    30  
    31  .file-contents-wrapper {
    32    margin: 20px;
    33    background-color: #ffffff;
    34    border-radius: 4px;
    35    border: 1px solid #C4C8CA;
    36  }
    37  
    38  .ace_editor {
    39    border-radius: 4px;
    40  }
    41  
    42  .FileTree-wrapper input[type=checkbox] {
    43    position: absolute;
    44    z-index: 1;
    45    opacity: 0;
    46    margin: 0;
    47    width: 100%;
    48    cursor: pointer;
    49    left: 0;
    50  
    51    &:hover + label {
    52      color: #ffffff;
    53    }
    54  }
    55  .FileTree-wrapper ul {
    56    padding-top: 4px;
    57  }
    58  .FileTree-wrapper label,
    59  .FileTree-wrapper li {
    60    color: rgba(255,255,255,0.8);
    61    font-weight: 500;
    62    transition: color .2s;
    63    font-size: 14px;
    64    position: relative;
    65    line-height: 14px;
    66    z-index: 2;
    67    padding: 8px 0 6px;
    68  
    69    &:hover {
    70      color: #ffffff;
    71      cursor: pointer;
    72    }
    73  }
    74  
    75  .FileTree-wrapper li.is-file.is-excluded {
    76    text-decoration: line-through;
    77  }
    78  
    79  .FileTree-wrapper li.is-file.is-base {
    80    span.u-deleteOverlayIcon {
    81      opacity: 0;
    82      pointer-events: none;
    83    }
    84    &:hover {
    85      span.u-deleteOverlayIcon {
    86        pointer-events: all;
    87        opacity: 1;
    88      }
    89    }
    90  }
    91  
    92  .FileTree-wrapper input[type=checkbox]:checked + label,
    93  .FileTree-wrapper li.is-selected {
    94    font-weight: 700;
    95    color: #ffffff;
    96  
    97    &.is-file:after {
    98      position: absolute;
    99      content: "";
   100      display: block;
   101      right: -20px;
   102      width: 240px;
   103      height: 100%;
   104      top: 1px;
   105      z-index: -1;
   106      background-color: #6F92A9;
   107    }
   108  }
   109  
   110  .FileTree-wrapper li.edited input[type=checkbox]:checked + label
   111  .FileTree-wrapper li.edited label,
   112  .FileTree-wrapper li.edited,
   113  .FileTree-wrapper li.selected.edited {
   114    color: #EBB55C;
   115  }
   116  
   117  .FileTree-wrapper label {
   118    &::before {
   119      margin-right: 8px;
   120      content: "";
   121      left: -1px;
   122      top: 0;
   123      position: relative;
   124      display: inline-block;
   125      pointer-events: none;
   126      background-image: url("../assets/images/main_spritesheet.svg");
   127      background-repeat: no-repeat;
   128      background-size: initial;
   129      background-position: 0 -16px;
   130      width: 7px;
   131      height: 11px;
   132      transition: transform .2s ease;
   133    }
   134  }
   135  .FileTree-wrapper input[type=checkbox]:checked + label::before {
   136    transform: rotate(90deg);
   137  }
   138  
   139  .FileTree-wrapper ul {
   140    display: none;
   141  }
   142  
   143  .FileTree-wrapper input[type=checkbox]:checked + label + ul,
   144  .FileTree-wrapper input[type=checkbox]:checked + label:nth-of-type(n) + ul {
   145    /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
   146    display: block;
   147  }
   148  
   149  
   150  @media screen and (min-width: 80em) {
   151  .FileTree-wrapper input[type=checkbox]:checked + label,
   152  .FileTree-wrapper li.is-selected {
   153    &.is-file:after {
   154      width: 320px;
   155    }
   156  }
   157  }