116 lines
1.7 KiB
SCSS
116 lines
1.7 KiB
SCSS
// Logo
|
|
// - Different ways to show CartoDB logo
|
|
// --------------------------------------------------
|
|
|
|
@import "compass/css3/images";
|
|
|
|
$size: 36px;
|
|
|
|
.Logo {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.Logo--avatar {
|
|
display: inline-block;
|
|
width: $size;
|
|
height: $size;
|
|
transition: border-radius 0.2s linear;
|
|
border-radius: 4px;
|
|
background: #FFF;
|
|
line-height: $size + 10;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
|
|
i {
|
|
color: #3C93D8;
|
|
font-size: $size - 14;
|
|
|
|
&.Logo-icon--dark {
|
|
color: #2E3C43;
|
|
}
|
|
}
|
|
}
|
|
|
|
.Logo--footer {
|
|
margin-right: 20px;
|
|
background: #2E3C43;
|
|
|
|
i {
|
|
color: #FFF;
|
|
}
|
|
}
|
|
|
|
.Logo--grey {
|
|
width: $size;
|
|
min-width: $size;
|
|
height: $size;
|
|
border-radius: 3px;
|
|
background-color: #CCC;
|
|
line-height: 48px;
|
|
text-align: center;
|
|
|
|
.CDB-IconFont {
|
|
color: #FFF;
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
.Logo-sub {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: -8px;
|
|
right: -8px;
|
|
width: 24px;
|
|
height: 24px;
|
|
animation: fade-and-bounce-up 0.6s 350ms ease-in-out backwards;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.Logo-sub--google {
|
|
@include background(image-url('layout/google-platform-logo.png') no-repeat center center #FFFFFF);
|
|
}
|
|
|
|
.Logo.is-loading {
|
|
.Logo--avatar {
|
|
border-radius: $size + 1;
|
|
}
|
|
|
|
&::after {
|
|
animation: spin 0.7s linear infinite;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-and-bounce-up {
|
|
0% {
|
|
transform: translateY(6px);
|
|
opacity: 0;
|
|
}
|
|
|
|
15% {
|
|
transform: translateY(-3px);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
45% {
|
|
transform: translateY(2px);
|
|
opacity: 1;
|
|
}
|
|
|
|
70% {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|