istio.io/_sass/modules/_footer.scss

93 lines
2.2 KiB
SCSS

g.icon {
fill: red;
}
div.footer {
padding-top: 4em;
footer {
background-image: linear-gradient(to right, $mainBrandColor, $secondBrandColor);
color: $textBrandColor;
padding: 1.5rem 0 1rem 0;
position: absolute;
bottom: 0;
width: 100%;
height: $footerHeight;
overflow: hidden;
@media (max-width: $bp-sm) {
padding: 1rem 0 1.5rem;
text-align: center;
}
div.icon {
position: relative;
display: inline-flex;
padding: 4px;
border-width: 2px;
border-color: rgba(0, 0, 0, 0);
border-style: solid;
border-radius: 2px;
color: $textBrandColor;
a {
&:hover {
text-decoration: none;
}
}
svg {
width: 35px;
height: 35px;
fill: $textBrandColor;
}
&:hover {
border-color: white;
border-radius: 25px;
box-shadow: 0 0 2px 2px $textBrandColor;
transition: border-radius 1s, border-color 1s ease;
}
}
p.copyright {
padding: 0;
margin: 0;
color: $textBrandColorLight;
line-height: 1.6em;
font-size: 0.7em;
@media (max-width: $bp-lg) {
text-align: right!important;
}
}
p.tag {
padding: 0;
font-style: italic;
margin: 0;
line-height: 1.6em;
font-size: 0.8em;
}
.icon .tip {
opacity: 0;
background-color: transparent;
color: $textBrandColor;
text-align: center;
position: absolute;
z-index: 1;
width: 200px;
left: -78px;
top: -23px;
font-size: 75%;
}
/* Show the tooltip text when you mouse over the tooltip container */
.icon:hover .tip {
opacity: 1;
transition: opacity .5s;
}
}
}