// Users // // //
.user {
@include border-radius; position: relative; overflow: hidden; &:hover { .user-caption { padding-top: 6rem; padding-bottom: 5.75rem; } .socials { @include translate(0, 0); } } &[class*="-circle"] { border-radius: 50%; overflow: hidden; text-align: center; .socials { left: 50%; @include translate(-50%, calc(100% + 2.5rem)); } &:hover { .socials { @include translate(-50%, 0); } } }
}
.gutter-0 {
.user { border-radius: 0; }
}
.user-photo {
display: block; overflow: hidden; margin: 0; img { max-width: 100%; }
}
.user-caption {
@extend %text-shadow; @include transition; position: absolute; bottom: 0; right: 0; left: 0; padding: 1.875rem; background: linear-gradient(to bottom, rgba($canalplus,0) 0%,rgba($canalplus,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); > * { display: block; } h4 { color: $text-white-primary; margin: 0; } span { color: $text-white-secondary; } .socials { @extend %socials-text-whiteed; @extend %bordered-text-whiteed; @include translate(0, calc(100% + 2.5rem)); position: absolute; bottom: 1.875rem; }
}
.expanded {
+ .user-panel { @include translate(0,0); visibility: visible; opacity: 1; padding: 15rem 0 5rem 0; > .container { opacity: 1; transition-delay: 0.2s; } }
}
.user-panel {
@extend %text-white; @extend %text-shadow; @include translate(0,100%); @include transition(0.2s); position: fixed; bottom: 0; left: 0; right: 0; display: block; padding: 0; opacity: 0; z-index: 100; visibility: hidden; opacity: 0; &::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; // background: -moz-linear-gradient(top, rgba($canalplus,0.0) 0%, rgba($canalplus,1) 100%); // background: -webkit-linear-gradient(top, rgba($canalplus,0.0) 0%, rgba($canalplus,1) 100%); background: linear-gradient(to bottom, rgba(52, 231, 154, 0) 0%, rgba(193, 193, 193, 0.6) 20%, rgba(171, 171, 171, 0.8) 40%, black 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); } > .container { @include transition(); opacity: 0; } .collapse { @include transition; @include translate(-50%,0); position: absolute; bottom: ($grid-gutter-width / 2); left: 50%; display: block; border-radius: 50%; text-align: center; width: 4.25rem; height: 4.25rem; line-height: 4.25rem; text-align: center; cursor: pointer; color: $canalplus; &::before { font-family: 'icomoon'; font-size: 1.875rem; content: "\ecce"; color: $white; } &:hover { background: rgba($white, .1); } }
}
// // Avatar // .avatar {
@include border-radius; width: 3.75rem; height: 3.75rem; &[class*="-sm"] { width: 2.5rem; height: auto; } &[class*="-lg"] { width: 5rem; height: auto; } &[class*="-xl"] { width: 10rem; height: auto; }
}
// // User Grid // .user-grid {
@include selection(none); @include clearfix; list-style: none; padding: 0; > li { float: left; } .user { overflow: visible; } .user-photo { @include transition; border-radius: 50%; cursor: pointer; &:hover { @include scale(1.1); -webkit-box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1); -moz-box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1); box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1); } &.expanded { @include scale(1.1); -webkit-box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1); -moz-box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1); box-shadow: 0px 10px 15px 0 rgba($canalplus,0.1); } img { @include transition; border-radius: 50%; } }
}
@include media-breakpoint-down(md) {
.user-grid { > li { width: 20%; &:nth-child(6) { margin-left: calc(20% / 2); } } }
}
@include media-breakpoint-up(lg) {
.user-grid { > li { width: 12.5%; &:nth-child(9) { margin-left: calc(12.5% / 2); } } }
}
// // User List // .user-list {
display: inline-block; margin: 0; padding: 0; > li { position: relative; display: inline-block; width: 3.125rem; border-radius: 50%; z-index: 10; overflow: hidden; @include transition; &:not(:first-child) { @include shadow(); border-radius: 50%; margin-left: -1rem; } &:hover { @include shadow; z-index: 20; } }
}
// // Speakers // .speakers {
margin-right: 1.25rem;
}
@include media-breakpoint-down(md) {
.speakers { display: none; }
}