89 lines
1.2 KiB
SCSS
89 lines
1.2 KiB
SCSS
//
|
|
// Image (links and hover options)
|
|
// --------------------------------------------------
|
|
|
|
// Avatar
|
|
.img-avatar {
|
|
display: inline-block !important;
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
|
|
&.img-avatar16 {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
&.img-avatar20 {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
&.img-avatar32 {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
&.img-avatar48 {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
&.img-avatar96 {
|
|
width: 96px;
|
|
height: 96px;
|
|
}
|
|
|
|
&.img-avatar128 {
|
|
width: 128px;
|
|
height: 128px;
|
|
}
|
|
|
|
&-thumb {
|
|
margin: .25rem;
|
|
box-shadow: 0 0 0 .25rem rgba(255,255,255,.3);
|
|
}
|
|
|
|
&.img-avatar-rounded {
|
|
border-radius: .25rem;
|
|
}
|
|
}
|
|
|
|
// Image Thumb
|
|
.img-thumb {
|
|
padding: .375rem;
|
|
background-color: $white;
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
// Image Link
|
|
.img-link {
|
|
display: inline-block;
|
|
transition: transform .25s ease-out, opacity .25s ease-out;
|
|
|
|
&:hover {
|
|
transform: scale(1.02);
|
|
opacity: .75;
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
&.img-link-simple:hover {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.img-link-zoom-in {
|
|
cursor: -webkit-zoom-in;
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
// Responsive
|
|
.img-fluid.img-fluid-100,
|
|
.img-fluid-100 .img-fluid {
|
|
width: 100%;
|
|
}
|