416 lines
14 KiB
SCSS
416 lines
14 KiB
SCSS
/* Team style 01 */
|
|
.team-style-01 {
|
|
figure {
|
|
figcaption {
|
|
position: absolute;
|
|
bottom: -1px;
|
|
.social-icon {
|
|
display: block !important;
|
|
height: auto !important;
|
|
margin-bottom: -50px !important;
|
|
overflow: visible !important;
|
|
@include prefix(transition, 0.4s, webkit);
|
|
a {
|
|
margin:0 10px;
|
|
&:last-child {
|
|
margin-right: 0
|
|
}
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.text-light-opacity {
|
|
&:hover {
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
&:hover {
|
|
figcaption {
|
|
.social-icon {
|
|
margin-bottom: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Team style 02 */
|
|
.team-style-02 {
|
|
figure {
|
|
figcaption {
|
|
position: absolute;
|
|
opacity: 0;
|
|
bottom: 0;
|
|
@include prefix(transition, all 0.5s cubic-bezier(0.12, 0, 0.39, 0), webkit);
|
|
.social-icon {
|
|
a {
|
|
margin:0 12px;
|
|
opacity: 0;
|
|
@include prefix(transition, 0.45s cubic-bezier(0.19, 1, 0.22, 1), webkit);
|
|
@include prefix(transform, translateY(-25px), webkit);
|
|
display: inline-block;
|
|
&:nth-child(1) {
|
|
@include prefix(transition, all 0.3s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
&:nth-child(2) {
|
|
@include prefix(transition, all 0.4s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
&:nth-child(3) {
|
|
@include prefix(transition, all 0.6s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
&:nth-child(4) {
|
|
@include prefix(transition, all 0.8s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
&:nth-child(5) {
|
|
@include prefix(transition, all 1s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
}
|
|
}
|
|
.team-member-name {
|
|
opacity: 0;
|
|
@include prefix(transform, translate3d(0, 15px, 0), webkit);
|
|
@include prefix(transition, all 1s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
.member-designation {
|
|
opacity: 0;
|
|
@include prefix(transform, translate3d(0, 15px, 0), webkit);
|
|
@include prefix(transition, all 0.7s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
|
|
}
|
|
}
|
|
&:hover {
|
|
figcaption {
|
|
opacity: 1;
|
|
.team-member-name {
|
|
opacity: 1;
|
|
@include prefix(transform, translate3d(0, 0, 0), webkit);
|
|
@include prefix(transition, all 0.4s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
.member-designation {
|
|
opacity: .7;
|
|
@include prefix(transform, translate3d(0, 0, 0), webkit);
|
|
@include prefix(transition, all 0.7s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
a {
|
|
opacity: 1;
|
|
@include prefix(transform, translateY(0), webkit);
|
|
&:nth-child(1) {
|
|
@include prefix(transition, all 0.3s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
&:nth-child(2) {
|
|
@include prefix(transition, all 0.4s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
&:nth-child(3) {
|
|
@include prefix(transition, all 0.6s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
&:nth-child(4) {
|
|
@include prefix(transition, all 0.8s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
&:nth-child(5) {
|
|
@include prefix(transition, all 1s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Team style 04 */
|
|
.team-style-04 {
|
|
.team-content {
|
|
position: absolute;
|
|
bottom: 0;
|
|
@include prefix(transition, all 0.5s cubic-bezier(0.37, 0.31, 0.2, 0.85), webkit);
|
|
}
|
|
|
|
figure {
|
|
figcaption {
|
|
position: absolute;
|
|
bottom: -20px;
|
|
@include prefix(transition, all 0.5s cubic-bezier(0.37, 0.31, 0.2, 0.85), webkit);
|
|
|
|
.social-icon {
|
|
@include prefix(transition, all 0s linear, webkit);
|
|
|
|
a {
|
|
margin: 0 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
figcaption {
|
|
bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Team style 05 */
|
|
.team-style-05 {
|
|
.team-content {
|
|
position: absolute;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
@include prefix(transition, all 0.4s cubic-bezier(0.12, 0, 0.39, 0), webkit);
|
|
p {
|
|
top: 55%;
|
|
@include prefix(transition, all 0.5s ease, webkit);
|
|
}
|
|
}
|
|
.social-icon {
|
|
a {
|
|
opacity: 0;
|
|
@include prefix(transition, 0.45s cubic-bezier(0.19, 1, 0.22, 1), webkit);
|
|
@include prefix(transform, translateY(25px), webkit);
|
|
margin: 0 10px;
|
|
display: inline-block;
|
|
&:nth-child(1) {
|
|
@include prefix(transition, all 0.3s ease, webkit);
|
|
}
|
|
&:nth-child(2) {
|
|
@include prefix(transition, all 0.4s ease, webkit);
|
|
}
|
|
&:nth-child(3) {
|
|
@include prefix(transition, all 0.6s ease, webkit);
|
|
}
|
|
&:nth-child(4) {
|
|
@include prefix(transition, all 0.8s ease, webkit);
|
|
}
|
|
&:nth-child(5) {
|
|
@include prefix(transition, all 1s ease, webkit);
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
.team-content {
|
|
opacity: 1;
|
|
p {
|
|
top: 50%;
|
|
}
|
|
}
|
|
.social-icon {
|
|
a {
|
|
opacity: 1;
|
|
@include prefix(transform, translateY(0), webkit);
|
|
&:nth-child(1) {
|
|
@include prefix(transition, all 0.3s ease, webkit);
|
|
}
|
|
&:nth-child(2) {
|
|
@include prefix(transition, all 0.6s ease, webkit);
|
|
}
|
|
&:nth-child(3) {
|
|
@include prefix(transition, all 0.9s ease, webkit);
|
|
}
|
|
&:nth-child(4) {
|
|
@include prefix(transition, all 1.1s ease, webkit);
|
|
}
|
|
&:nth-child(5) {
|
|
@include prefix(transition, all 1.4s ease, webkit);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Team style 08 */
|
|
.team-style-08 {
|
|
figure {
|
|
@include prefix(transform, translate3d(0, 0, 0), webkit);
|
|
@include prefix(transition, all 0.5s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
figcaption {
|
|
position: absolute;
|
|
opacity: 0;
|
|
bottom: 0;
|
|
@include prefix(transition, all 0.5s, webkit);
|
|
.social-icon {
|
|
a {
|
|
margin: 0 0 10px;
|
|
opacity: 0;
|
|
display: inline-block;
|
|
background-color: var(--dark-gray);
|
|
height: 50px;
|
|
width: 50px;
|
|
border-radius: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
@include prefix(transform, translate3d(0, 15px, 0), webkit);
|
|
@include prefix(transition, all 0.3s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
@include prefix(transform, scale(1), webkit);
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
.team-member-name {
|
|
opacity: 0;
|
|
@include prefix(transform, translate3d(0, 15px, 0), webkit);
|
|
@include prefix(transition, all 0.5s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
.member-designation {
|
|
opacity: 0;
|
|
@include prefix(transform, translate3d(0, 20px, 0), webkit);
|
|
@include prefix(transition, all 0.7s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
figure{
|
|
@include prefix(transform, translate3d(0, -8px, 0), webkit);
|
|
figcaption {
|
|
opacity: 1;
|
|
.social-icon {
|
|
a{
|
|
&:hover{
|
|
@include prefix(transform, scale(1.1), webkit);
|
|
}
|
|
}
|
|
}
|
|
.team-member-name {
|
|
opacity: 1;
|
|
@include prefix(transform, translate3d(0, 0, 0), webkit);
|
|
}
|
|
.member-designation {
|
|
opacity: .6;
|
|
@include prefix(transform, translate3d(0, 0, 0), webkit);
|
|
}
|
|
a {
|
|
@include prefix(transform, translate3d(0, 0, 0), webkit);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Team style 09 */
|
|
.team-style-09 {
|
|
.nav-tabs {
|
|
> li {
|
|
&.nav-item {
|
|
padding: 0;
|
|
.number {
|
|
color: var(--dark-gray);
|
|
@include prefix(transition, 0.4s cubic-bezier(0.12, 0, 0.39, 0), webkit);
|
|
}
|
|
&:last-child{
|
|
.nav-link {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.nav-link {
|
|
border: 0;
|
|
display: flex;
|
|
border-bottom: 1px solid var(--extra-medium-gray);
|
|
padding: 20px 0;
|
|
margin-bottom: 0;
|
|
background-color: transparent;
|
|
@include prefix(border-radius, 0, webkit);
|
|
@include prefix(transition, 0.3s cubic-bezier(0.12, 0, 0.39, 0), webkit);
|
|
&:hover{
|
|
@include prefix(transform, translate3d(10px, 0, 0), webkit);
|
|
}
|
|
&.active, &:hover {
|
|
border-bottom: 1px solid var(--dark-gray);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Team style 10 */
|
|
.team-style-10 {
|
|
figure {
|
|
@include prefix(transform, translate3d(0, 0, 0), webkit);
|
|
@include prefix(transition, all 0.5s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
.hover-switch-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
@include prefix(transition, all 0.2s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
figcaption {
|
|
position: absolute;
|
|
opacity: 0;
|
|
bottom: 0;
|
|
@include prefix(transition, all 0.5s, webkit);
|
|
.social-icon {
|
|
a {
|
|
margin: 0 0 10px;
|
|
opacity: 0;
|
|
display: inline-block;
|
|
background-color: var(--dark-gray);
|
|
height: 50px;
|
|
width: 50px;
|
|
border-radius: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
will-change: transform;
|
|
@include prefix(transition, all 0.3s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
@include prefix(transform, scale(1.1), webkit);
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
.team-member-strip {
|
|
@include prefix(transform, translate3d(0, 20px, 0), webkit);
|
|
@include prefix(transition, all 0.3s cubic-bezier(0.2, 0, 0.8, 1), webkit);
|
|
.team-member-name {
|
|
opacity: 0;
|
|
@include prefix(transform, translate3d(0, 15px, 0), webkit);
|
|
@include prefix(transition, all 0.5s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
}
|
|
.member-designation {
|
|
opacity: 0;
|
|
@include prefix(transform, translate3d(0, 20px, 0), webkit);
|
|
@include prefix(transition, all 0.7s cubic-bezier(0.2, 0, 0.3, 1), webkit);
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
figure{
|
|
.hover-switch-image {
|
|
left: 0;
|
|
opacity: 1;
|
|
}
|
|
figcaption {
|
|
opacity: 1;
|
|
.social-icon {
|
|
a{
|
|
@include prefix(transform, scale(1), webkit);
|
|
&:hover{
|
|
@include prefix(transform, scale(1.1), webkit);
|
|
}
|
|
}
|
|
}
|
|
.team-member-strip {
|
|
@include prefix(transform, translate3d(0, 0, 0), webkit);
|
|
.team-member-name {
|
|
opacity: 1;
|
|
@include prefix(transform, translate3d(0, 0, 0), webkit);
|
|
}
|
|
.member-designation {
|
|
opacity: 1;
|
|
@include prefix(transform, translate3d(0, 0, 0), webkit);
|
|
}
|
|
}
|
|
a {
|
|
@include prefix(transform, translate3d(0, 0, 0), webkit);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |