/* 3.1 Member Tiles
-------------------------------------------------------------------*/
// General style
.@{p}tiles { //
position: relative;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
border: none;
visibility: hidden;
list-style: none !important;
} // .tiles
.@{p}tiles__item { // -
position: relative;
float: left;
width: 250px;
overflow: hidden;
padding: 0 !important;
margin: 0 !important;
border: none !important;
list-style: none !important;
// fix for some themes
&:before {
display: none;
}
> a {
outline: none !important;
border: none !important;
}
img {
box-shadow: none !important;
}
.amoteam-member-img {
width: 100%;
margin: 0 !important;
display: block;
}
&:hover {
.@{p}member-hover-icon {
opacity: 1;
}
} // :hover
} // .tiles__item
-
.@{p}member {
margin: 0 !important;
padding: 0 !important;
&:before {
transition: opacity .4s ease-in-out;
.pseudo-content();
background: @color-main-dark;
opacity: 0;
}
&:hover {
&:before {
opacity: 0.8;
}
} // :hover
.@{p}member-custom-hover-icon {
width: inherit;
height: auto;
background: inherit;
img {
transform: rotate(-45deg);
}
} // .member-hover-icon
} // .member
.@{p}member-img-wrap{
line-height: 0 !important;
}
.@{p}member-hover-icon {
.center-translate(vh);
transform: translate(-50%, -50%) rotate(45deg);
transition: all 0.8s ease-in-out;
transform-style: preserve-3d;
opacity: 0;
i {
.center-translate(vh);
transform: translate(-50%, -50%) rotate(-45deg);
}
} // .member-hover-icon
.@{p}member-info {
position: absolute;
bottom: 3.8%;
right: 0;
z-index: 10;
text-align: right;
overflow: hidden;
.@{p}member-info__item {
line-height: 1;
font-weight: 400;
padding: 8px 15px;
}
.@{p}member-name {
}
.@{p}member-subtitle {
float: right;
font-weight: 300;
text-align: center;
letter-spacing: 0.01em;
}
} //.member-info
/* No subtitle */
.@{p}member-info--ns {
bottom: 10%;
}
/* GENERAL ALIGNMENT | Title & Subtitle | LEFT
----------------------------------*/
.@{p}member-info.@{p}member-info--al-left {
right: auto;
left: 0;
text-align: left;
.@{p}member-subtitle {
float: left;
}
} //.member-info--al-left
/* BG Hover Off | When Panel Off
----------------------------------*/
.@{p}tile-bg-hover-off, .@{p}tiles-hover-off {
.@{p}member {
&:before {
background: transparent !important;
}
} // member
} //.tile-bg-hover-off
/* Hover Off | Option
----------------------------------*/
.@{p}tiles-hover-off {
.@{p}member {
.@{p}member-hover-icon {
display: none;
}
.@{p}member-info > div {
transform: none !important;
opacity: 1 !important;
}
} // member
} //.tile-bg-hover-off
/* Tile Style 1
----------------------------------*/
.@{p}tile-style-1 {
.@{p}tiles__item { //
-
.@{p}member-name {
transition: all .7s ease-in-out;
transition-property: opacity, transform;
}
.@{p}member-subtitle {
transition: all 1s ease-in-out;
transition-property: opacity, transform;
}
&:hover {
.@{p}member-info > div {
opacity: 0;
transform: translateX(100%);
}
} //:hover
} // .tiles__item
-
// MEMBER INFO | LEFT ALIGNMENT
.@{p}tiles__item:hover {
.@{p}member-info--al-left > div {
transform: translateX(-100%);
}
}
.@{p}member-info {
width: 100%;
} //.member-info
.@{p}member {
&:hover {
.@{p}member-hover-icon {
transform: translate(-50%, -50%) rotate3d(0, 1, 0, 0deg) rotate(45deg);
}
} // :hover
.@{p}member-hover-icon {
transform: translate(-50%, -50%) rotate3d(0, 1, 0, -180deg);
} // .member-hover-icon
} // member
} // .tile-style-1
/* Tile Style 2.1
----------------------------------*/
.@{p}tile-style-1_1 {
.@{p}tiles__item { //
-
.@{p}member-name {
float: right;
}
.@{p}member-info__item {
clear: both;
}
} // .tiles__item
-
.@{p}member-info.@{p}member-info--al-left {
.@{p}member-name {
float: left;
}
}
} // .tile-style-1-1
/* Tile Style 2
----------------------------------*/
.@{p}tile-style-2 {
.@{p}tiles__item { //
-
.amoteam-member-img {
border-radius: 50%;
border: 4px solid transparent;
}
.@{p}member-info {
transition: all 0.4s ease-in-out;
}
&:hover {
.@{p}member-info {
opacity: 0;
}
} //:hover
} // .tiles__item
-
.@{p}member {
&:before {
transition: opacity .7s ease-in-out;
border-radius: 50%;
top: 4px;
bottom: 4px;
left: 4px;
right: 4px;
width: auto;
height: auto;
}
} // member
.@{p}member-img-wrap {
&:before {
transition: all 0.7s ease-in-out;
.pseudo-content();
box-sizing: border-box;
border-radius: 50%;
border: 5px solid transparent;
border-right-color: rgba(0,0,0,0.05);
border-bottom-color: rgba(0,0,0,0.05);
} //:before
&:hover, &:focus {
&:before {
transform: rotate(180deg);
}
}
} // .member-img-wrap
.@{p}member-hover-icon {
transition: all 0.7s ease-in-out;
}
} // .tile-style-2
/* Tile Style 2.1
----------------------------------*/
.@{p}tile-style-2_1 {
.@{p}tiles__item { //
-
.@{p}member-img-wrap {
&:before {
border-width: 4px;
}
} // .member-img-wrap
.amoteam-member-img {
border: 10px solid transparent;
}
} // .tiles__item
-
.@{p}member {
&:before {
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
} // member
} // .tile-style-2-2