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 }