frostfs-s3-gw/browser/app/less/inc/misc.less

/*--------------------------
    Close
----------------------------*/
.close-variant(@color, @bg-color, @color-hover, @bg-color-hover) {
	span {
		background-color: @bg-color;
		color: @color;
	}

	&:hover,
	&:focus {
		span {
			background-color: @bg-color-hover;
			color: @color-hover;
		}
	}
}

.close {
	right: 15px;
	font-weight: normal;
	opacity: 1;
	font-size: 18px;
	position: absolute;
	text-align: center;
	top: 16px;
	z-index: 1;
	padding: 0;
	border: 0;
	background-color: transparent;

	span {
		width: 25px;
		height: 25px;
		display: block;
		border-radius: 50%;
		line-height: 24px;
		text-shadow: none;
	}
	
	&:not(.close-alt) {
		.close-variant(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1), @white, rgba(255, 255, 255, 0.2));
	}
}

.close-alt {
	.close-variant(#989898, #efefef, #7b7b7b, #e8e8e8);
}


/*--------------------------
    Hidden
----------------------------*/
.hidden {
	display: none !important;
}


/*--------------------------
    Copy text
----------------------------*/
.copy-text {
	input {
		width: 100%;
		border-radius: 1px;
		border: 1px solid @input-border;
		padding: 7px 12px;
		font-size: 13px;
		line-height: 100%;
		cursor: text;
		.transition(border-color);
		.transition-duration(300ms);
		
		&:hover {
			border-color: darken(@input-border, 5%);
		}
	}
}

/*--------------------------
    Sharing
----------------------------*/
.share-availability {
	margin-bottom: 40px;

	&:before,
	&:after {
		position: absolute;
		bottom: -30px;
		font-size: 10px;
	}

	&:before {
		content: '01 Sec';
		left: 0;
	}

	&:after {
		content: '7 days';
		right: 0;
	}
}


.modal-aheader {
	height: 100px;

	&:before {
		height: 0 !important;
	}

	.modal-dialog {
		margin: 0;
		vertical-align: top;
	}
}

.loading {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-top: 1px solid @loading-track-bg;
  border-right: 1px solid @loading-track-bg;
  border-bottom: 1px solid @loading-track-bg;
  border-left: 1px solid @loading-point-bg;
  transform: translateZ(0);
  animation: loading 1.1s infinite linear;
  border-radius: 50%;
	width: 35px;
	height: 35px;
	margin-top: 30px;
}

@-webkit-keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}