storj.io/minio@v0.0.0-20230509071714-0cbc90f649b1/browser/app/less/inc/list.less (about)

     1  /*--------------------------
     2      Row
     3  ----------------------------*/
     4  .fesl-row {
     5      position: relative;
     6  
     7      @media (min-width: (@screen-sm-min - 100px)) {
     8          padding: 5px 20px 5px 40px;
     9          display: flex;
    10          flex-flow: row nowrap;
    11          justify-content: space-between;
    12      }
    13  
    14      @media(max-width: (@screen-xs-max - 100px)) {
    15          padding: 5px 20px;
    16      }
    17  
    18      .clearfix();
    19  }
    20  
    21  header.fesl-row {
    22      @media (min-width:(@screen-sm-min - 100px)) {
    23          margin-bottom: 20px;
    24          border-bottom: 1px solid lighten(@text-muted-color, 20%);
    25          padding-left: 30px;
    26  
    27          .fesl-item,
    28          .fesli-sort {
    29              .transition(all);
    30              .transition-duration(300ms);
    31          }
    32  
    33          .fesl-item {
    34              cursor: pointer;
    35              color: @text-color;
    36              font-weight: 500;
    37              margin-bottom: -5px;
    38  
    39              & > .fesli-sort {
    40                  float: right;
    41                  margin: 4px 0 0;
    42                  .opacity(0);
    43                  color: @dark-gray;
    44                  font-size: 14px;
    45              }
    46              & > .fesli-sort--active {
    47                  .opacity(0.5);
    48              }
    49  
    50              &:hover:not(.fesl-item-actions) {
    51                  background: lighten(@text-muted-color, 22%);
    52                  color: @dark-gray;
    53  
    54                  & > .fesli-sort {
    55                      .opacity(0.5);
    56                  }
    57              }
    58          }
    59      }
    60  
    61      @media (max-width:(@screen-xs-max - 100px)) {
    62          display: none;
    63      }
    64  }
    65  
    66  .list-type(@background, @icon) {
    67      .fis-icon {
    68          background-color: @background;
    69  
    70          &:before {
    71              content: @icon;
    72          }
    73      }
    74  }
    75  
    76  div.fesl-row {
    77      border-bottom: 1px solid transparent;
    78      cursor: default;
    79      .transition(background-color);
    80      .transition-duration(500ms);
    81  
    82      @media (max-width: (@screen-xs-max - 100px)) {
    83          padding: 5px 20px;
    84      }
    85  
    86      &:not(.fesl-row-selected) {
    87          &:nth-child(even) {
    88              background-color: @list-row-even-bg;
    89          }
    90      }
    91  
    92      &:hover {
    93          .fis-icon {
    94              &:before {
    95                  .opacity(0)
    96              }
    97          }
    98  
    99          .fis-helper {
   100              &:before {
   101                  .opacity(1);
   102              }
   103          }
   104      }
   105  
   106      .fesl-item-name {
   107          a {
   108              cursor: pointer;
   109          }
   110      }
   111  
   112      /*--------------------------
   113          Icons
   114      ----------------------------*/
   115      &[data-type=folder] {
   116          .list-type(#a1d6dd, '\f07b');
   117      }
   118      &[data-type=pdf] {.list-type(#fa7775, '\f1c1'); }
   119      &[data-type=zip] { .list-type(#427089, '\f1c6'); }
   120      &[data-type=audio] { .list-type(#009688, '\f1c7'); }
   121      &[data-type=code] { .list-type(#997867, "\f1c9"); }
   122      &[data-type=excel] { .list-type(#64c866, '\f1c3'); }
   123      &[data-type=image] { .list-type(#f06292, '\f1c5'); }
   124      &[data-type=video] { .list-type(#f8c363, '\f1c8'); }
   125      &[data-type=other] { .list-type(#afafaf, '\f15b'); }
   126      &[data-type=text] { .list-type(#8a8a8a, '\f15c'); }
   127      &[data-type=doc] { .list-type(#2196f5, '\f1c2'); }
   128      &[data-type=presentation] { .list-type(#896ea6, '\f1c4'); }
   129  
   130      &.fesl-loading{
   131          &:before {
   132              content: '';
   133          }
   134  
   135          &:after {
   136              .list-loader(20px, 20px, rgba(255, 255, 255, 0.5), @white);
   137              left: 57px;
   138              top: 17px;
   139  
   140              @media (max-width: (@screen-xs-max - 100px)) {
   141                  left: 27px;
   142              }
   143          }
   144  
   145      }
   146  }
   147  
   148  .fesl-row-selected {
   149      background-color: @list-row-selected-bg;
   150  
   151      &, .fesl-item a {
   152          color: darken(@text-color, 10%);
   153      }
   154  }
   155  
   156  .fi-select {
   157      float: left;
   158      position: relative;
   159      width: 35px;
   160      height: 35px;
   161      margin: 3px 0;
   162  
   163      @media(max-width: (@screen-xs-max - 100px)) {
   164          margin-right: 15px;
   165      }
   166  
   167      input {
   168          position: absolute;
   169          left: 0;
   170          top: 0;
   171          width: 35px;
   172          height: 35px;
   173          z-index: 8;
   174          opacity: 0;
   175          cursor: pointer;
   176  
   177          &:checked {
   178              & ~ .fis-icon {
   179                  background-color: #32393F;
   180  
   181                  &:before {
   182                      opacity: 0;
   183                  }
   184              }
   185  
   186              & ~ .fis-helper {
   187                  &:before {
   188                      .scale(0);
   189                  }
   190  
   191                  &:after {
   192                      .scale(1);
   193                  }
   194              }
   195          }
   196      }
   197  }
   198  
   199  .fis-icon {
   200      display: inline-block;
   201      vertical-align: top;
   202      border-radius: 50%;
   203      width: 35px;
   204      height: 35px;
   205      .transition(background-color);
   206      .transition-duration(250ms);
   207  
   208      &:before {
   209          width: 100%;
   210          height: 100%;
   211          text-align: center;
   212          position: absolute;
   213          border-radius: 50%;
   214          font-family: @font-family-icon;
   215          line-height: 35px;
   216          font-size: 16px;
   217          color: @white;
   218          .transition(all);
   219          .transition-duration(300ms);
   220          font-style: normal;
   221      }
   222  }
   223  
   224  .fis-helper {
   225      &:before,
   226      &:after {
   227          position: absolute;
   228          .transition(all);
   229          .transition-duration(250ms);
   230      }
   231  
   232      &:before {
   233          content: '';
   234          width: 15px;
   235          height: 15px;
   236          border: 2px solid @white;
   237          z-index: 7;
   238          border-radius: 2px;
   239          top: 10px;
   240          left: 10px;
   241          opacity: 0;
   242      }
   243  
   244      &:after {
   245          font-family: @font-family-icon;
   246          font-weight: 900;
   247          content: '\f00c';
   248          top: 8px;
   249          left: 9px;
   250          color: @white;
   251          font-size: 14px;
   252          .scale(0);
   253      }
   254  }
   255  
   256  
   257  /*--------------------------
   258      Files and Folders
   259  ----------------------------*/
   260  .fesl-item {
   261      display: block;
   262  
   263      a {
   264          color: darken(@text-color, 5%);
   265      }
   266  
   267      @media(min-width: (@screen-sm-min - 100px)) {
   268          &:not(.fesl-item-actions):not(.fesl-item-icon) {
   269              text-overflow: ellipsis;
   270              padding: 10px 15px;
   271              white-space: nowrap;
   272              overflow: hidden;
   273          }
   274  
   275          &.fesl-item-name {
   276              flex: 3;
   277          }
   278  
   279          &.fesl-item-size {
   280              width: 140px;
   281          }
   282  
   283          &.fesl-item-modified {
   284              width: 190px;
   285          }
   286  
   287          &.fesl-item-actions {
   288              width: 40px;
   289          }
   290      }
   291  
   292      @media(max-width: (@screen-xs-max - 100px)) {
   293          padding: 0;
   294  
   295          &.fesl-item-name {
   296              width: 100%;
   297              margin-bottom: 3px;
   298          }
   299  
   300          &.fesl-item-size,
   301          &.fesl-item-modified {
   302              font-size: 12px;
   303              color: #B5B5B5;
   304              float: left;
   305          }
   306  
   307          &.fesl-item-modified {
   308              max-width: 72px;
   309              white-space: nowrap;
   310              overflow: hidden;
   311          }
   312  
   313          &.fesl-item-size {
   314              margin-right: 10px;
   315          }
   316  
   317          &.fesl-item-actions {
   318              position: absolute;
   319              top: 5px;
   320              right: 10px;
   321          }
   322      }
   323  }
   324  
   325  
   326  /*--------------------------
   327      Action buttons
   328  ----------------------------*/
   329  .fia-toggle {
   330      height: 36px;
   331      width: 36px;
   332      background: transparent url(../../img/more-h.svg) no-repeat center;
   333      position: relative;
   334      top: 3px;
   335      .opacity(0.4);
   336  
   337      &:hover {
   338          .opacity(0.7);
   339      }
   340  }
   341  
   342  .fesl-item-actions {
   343      .dropdown-menu {
   344          background-color: transparent;
   345          box-shadow: none;
   346          padding: 0;
   347          right: 38px;
   348          left: auto;
   349          margin: 0;
   350          height: 100%;
   351          text-align: right;
   352          white-space: nowrap;
   353      }
   354  
   355      .dropdown {
   356          &.open {
   357              .dropdown-menu {
   358                  .fiad-action {
   359                      right: 0;
   360                  }
   361              }
   362          }
   363      }
   364  }
   365  
   366  .fiad-action {
   367      height: 35px;
   368      width: 35px;
   369      background: @amber;
   370      display: inline-block;
   371      border-radius: 50%;
   372      text-align: center;
   373      line-height: 35px;
   374      font-weight: normal;
   375      position: relative;
   376      top: 4px;
   377      margin-left: 5px;
   378      .animation-name(fiad-action-anim);
   379      .transform-origin(center center);
   380      .backface-visibility(none);
   381      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   382  
   383      &:nth-child(2) {
   384          .animation-duration(100ms);
   385      }
   386  
   387      &:nth-child(1) {
   388          .animation-duration(250ms);
   389      }
   390  
   391      & > i {
   392          font-size: 14px;
   393          color: @white;
   394      }
   395  
   396      &:hover {
   397          background-color: darken(@amber, 3%);
   398      }
   399  }
   400  
   401  .list-actions {
   402      position: fixed;
   403      .translate3d(0, -100%, 0);
   404      .opacity(0);
   405      .transition(all);
   406      .transition-duration(200ms);
   407      padding: 20px 70px 20px 25px;
   408      top: 0;
   409      left: 0;
   410      width: 100%;
   411      background-color: @brand-primary;
   412      z-index: 20;
   413      box-shadow: 0 0 10px rgba(0,0,0,0.3);
   414      text-align: center;
   415  
   416      &.list-actions-toggled {
   417          .translate3d(0, 0, 0);
   418          .opacity(1);
   419      }
   420  }
   421  
   422  .la-close {
   423      position: absolute;
   424      right: 20px;
   425      top: 0;
   426      color: #fff;
   427      width: 30px;
   428      height: 30px;
   429      border-radius: 50%;
   430      text-align: center;
   431      line-height: 30px !important;
   432      background: rgba(255, 255, 255, 0.1);
   433      font-weight: normal;
   434      bottom: 0;
   435      margin: auto;
   436      cursor: pointer;
   437  
   438      &:hover {
   439          background-color: rgba(255, 255, 255, 0.2);
   440      }
   441  }
   442  
   443  .la-label {
   444      color: @white;
   445      float: left;
   446      padding: 4px 0;
   447  
   448      .fas {
   449          font-size: 22px;
   450          vertical-align: top;
   451          margin-right: 10px;
   452          margin-top: -1px;
   453      }
   454  }
   455  
   456  .la-actions {
   457      button {
   458          background-color: transparent;
   459          border: 2px solid rgba(255,255,255,0.9);
   460          color: @white;
   461          border-radius: 2px;
   462          padding: 5px 10px;
   463          font-size: 13px;
   464          .transition(all);
   465          .transition-duration(300ms);
   466          margin-left: 10px;
   467          
   468          &:hover {
   469              background-color: @white;
   470              color: @brand-primary;
   471          }
   472      }
   473  }
   474  
   475  @-webkit-keyframes fiad-action-anim {
   476      from {
   477          .scale(0);
   478          .opacity(0);
   479          right: -20px;
   480      }
   481      to {
   482          .scale(1);
   483          .opacity(1);
   484          right: 0;
   485      }
   486  }
   487  
   488  @keyframes fiad-action-anim {
   489      from {
   490          .scale(0);
   491          .opacity(0);
   492          right: -20px;
   493      }
   494      to {
   495          .scale(1);
   496          .opacity(1);
   497          right: 0;
   498      }
   499  }