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

153 lines
No EOL
2.3 KiB
Text

/*--------------------------
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);
}
}