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

     1  /*------------------------------
     2     	Layout
     3  --------------------------------*/
     4  .file-explorer {
     5  	background-color: @white;
     6  	position: relative;
     7  	height: 100%;
     8  
     9  	&.toggled {
    10  		height: 100vh;
    11  		overflow: hidden;
    12  	}
    13  }
    14  
    15  .fe-body {
    16  	@media(min-width: @screen-md-min) {
    17  		padding: 0 0 80px @fe-sidebar-width;
    18  	}
    19  
    20  	@media(max-width: @screen-sm-max) {
    21  		padding: 75px 0 80px;
    22  	}
    23    display: flex;
    24    flex-direction: column;
    25  	min-height:100vh;
    26  	overflow: auto;
    27  }
    28  
    29  
    30  /*------------------------------
    31      Create and Upload Button
    32  --------------------------------*/
    33  .feb-actions {
    34  	position: fixed;
    35  	bottom: 30px;
    36  	right: 30px;
    37  
    38  	.dropdown-menu {
    39  		min-width: 55px;
    40  		width: 55px;
    41  		text-align: center;
    42  		background: transparent;
    43  		box-shadow: none;
    44  		margin: 0;
    45  	}
    46  
    47  	&.open {
    48  		.feba-btn {
    49  			.scale(1);
    50  
    51  			&:first-child {
    52  				.animation-name(feba-btn-anim);
    53  				.animation-duration(300ms);
    54  			}
    55  
    56  			&:last-child {
    57  				.animation-name(feba-btn-anim);
    58  				.animation-duration(100ms);
    59  			}
    60  		}
    61  
    62  		.feba-toggle {
    63  			background: darken(@red, 10%);
    64  
    65  			& > span {
    66  				transform: translateZ(1px) rotate(135deg);
    67  			}
    68  		}
    69  	}
    70  }
    71  
    72  .feba-toggle {
    73  	width: 55px;
    74  	height: 55px;
    75  	line-height: 55px;
    76  	border-radius: 50%;
    77  	background: @red;
    78  	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
    79  	display: inline-block;
    80  	text-align: center;
    81  	border: 0;
    82  	padding: 0;
    83  
    84  	span {
    85  		display: inline-block;
    86  		height: 100%;
    87  		width: 100%;
    88  	}
    89  
    90  	i {
    91  		color: @white;
    92  		font-size: 17px;
    93  		line-height: 55px;
    94  	}
    95  }
    96  
    97  .feba-toggle,
    98  .feba-toggle > span {
    99  	.transition(all);
   100  	.transition-duration(250ms);
   101  	.backface-visibility(hidden);
   102  }
   103  
   104  .feba-btn {
   105  	width: 40px;
   106  	margin-top: 10px;
   107  	height: 40px;
   108  	border-radius: 50%;
   109  	text-align: center;
   110  	display: inline-block;
   111  	color: @white;
   112  	line-height: 40px;
   113  	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
   114  	-webkit-transform: scale(0);
   115  	transform: scale(0);
   116  	position: relative;
   117  
   118  	&:hover,
   119  	&:focus {
   120  		color: @white;
   121  	}
   122  
   123  	label {
   124  		width: 100%;
   125  		height: 100%;
   126  		position: absolute;
   127  		left: 0;
   128  		top: 0;
   129  		cursor: pointer;
   130  	}
   131  }
   132  
   133  .feba-bucket {
   134  	background: @orange;
   135  }
   136  
   137  .feba-upload {
   138  	background: @yellow;
   139  }
   140  
   141  @-webkit-keyframes feba-btn-anim {
   142  	from {
   143  		.scale(0);
   144  		.opacity(0);
   145  	}
   146  	to {
   147  		.scale(1);
   148  		.opacity(1);
   149  	}
   150  }
   151  
   152  @keyframes feba-btn-anim {
   153  	from {
   154  		.scale(0);
   155  		.opacity(0);
   156  	}
   157  	to {
   158  		.scale(1);
   159  		.opacity(1);
   160  	}
   161  }