%PDF-
%PDF-
Mini Shell
Mini Shell
.schedule-info {
position: relative;
z-index: 1;
.hr {
height: 5px;
width: 30px;
background-color: $primary;
display: block;
margin-bottom: rem(11px);
}
.schedule-title {
font-size: rem(36px);
color: $primary;
margin-bottom: rem(15px);
}
.schedule-subtitle {
font-size: rem(24px);
margin-bottom: rem(14px);
}
.watermark-icon {
font-size: rem(190px);
color: #f0f0f0;
position: absolute;
top: -67px;
left: -67px;
z-index: -1;
}
}
.schedule-location-info {
.schedule-place {
display: block;
color: $titleColor;
}
}
.schedule-list {
.schedule-list-title {
text-transform: uppercase;
font-size: rem(24px);
}
> p {
margin-bottom: rem(11px);
}
&:not(:last-child) {
margin-bottom: rem(80px);
}
}
.schedule-meta-info {
margin-bottom: rem(11px);
> span {
font-size: rem(12px);
font-weight: 700;
font-family: $titleFont;
color: $titleColor;
display: inline-block;
line-height: 1;
&:not(:last-child) {
margin-right: rem(24px);
}
> i {
color: $primary;
font-size: rem(16px);
margin-right: rem(7px);
display: inline-block;
vertical-align: text-top;
}
}
}
.schedule-speaker-wraper {
.schedule-speaker {
display: inline-block;
&:not(:last-child) {
margin-right: rem(10px);
}
> img {
@include equal-size(36px);
border-radius: 50%;
}
}
}
.schedule-container {
&:not(:last-child) {
margin-bottom: rem(150px);
}
}
.schedule-nav-tab {
&-vertical {
.nav-item {
&:not(:last-child) {
margin-bottom: rem(25px);
}
}
.nav-link {
border: none;
border-radius: rem(5px);
background-color: $white;
box-shadow: 0 1px 50px 0 rgba(#000000, 0.06);
padding: {
top: 66px;
bottom: 66px;
left: 106px;
left: 66px;
}
&.active {
background-image: linear-gradient(138deg, $primary 0%, $secondary 100%);
box-shadow: 0 8px 25px 0 rgba($primary, 0.53);
.watermark-icon {
color: #972f28;
opacity: 0.28;
}
.schedule-title,
.schedule-subtitle,
.schedule-place,
.schedule-location {
color: $white;
}
}
}
}
&-horizontal {
border-bottom: none;
.nav-item {
margin-bottom: 0;
flex: auto;
&:not(:last-child) {
margin-right: rem(8px);
}
}
.schedule-title,
.schedule-subtitle {
color: $white;
}
.schedule-title {
font-size: rem(24px);
font-weight: 500;
margin-bottom: rem(7px);
line-height: 1;
}
.schedule-subtitle {
font-weight: 400;
font-size: rem(14px);
font-family: $bodyFont;
margin-bottom: 0px;
}
.nav-link {
background-color: #262eb5;
border-top-left-radius: 0.3125rem;
border-top-right-radius: 0.3125rem;
border: none;
padding: rem(44px) rem(10px);
position: relative;
&.active {
background-color: #ff4070;
@include potrait-tablet-upper {
&::before {
opacity: 1;
}
}
}
@include potrait-tablet-upper {
&::before {
position: absolute;
content: "";
bottom: -30px;
left: 0;
color: #fb265c;
border: {
top: 15px solid currentColor;
right: 17px solid currentColor;
bottom: 15px solid transparent;
left: 17px solid transparent;
}
z-index: 10;
opacity: 0;
@include transition;
}
}
}
}
}
.schedule-info-2 {
position: relative;
z-index: 1;
.schedule-title {
font-size: rem(30px);
font-weight: 600;
margin-bottom: 4px;
line-height: 1;
}
.schedule-subtitle {
font-weight: 600;
font-size: rem(18px);
}
.schedule-place {
font-weight: 500;
}
.schedule-location {
color: #999999;
}
.schedule-location-info {
margin-top: rem(15px);
}
.watermark-icon {
font-size: rem(70px);
color: #efefef;
position: absolute;
left: -34px;
top: -35px;
z-index: -1;
}
}
@include potrait-tablet-upper {
.schedule-tab-content {
padding-left: rem(125px);
}
}
.schedule-tab-content {
.schedule-list {
&:not(:last-child) {
border-bottom: 1px solid #f5f5f5;
margin-bottom: rem(24px);
padding-bottom: rem(33px);
}
}
}
.schedule-tab-content-horizontal {
.schedule-lists {
border: 1px dashed #e5e5e5;
border-top: none;
}
}
.speaker-name {
margin-bottom: rem(9px);
margin-bottom: 0px;
}
.speaker-designation {
font-size: rem(13px);
text-transform: uppercase;
margin-bottom: 0px;
}
.horizontal-schedule-list {
padding: rem(64px) 0;
.schedule-speaker-wraper {
&:not(:last-child) {
margin-bottom: rem(30px);
}
}
.schedule-speaker {
display: block;
> img {
margin-bottom: rem(13px);
@include equal-size(60px);
}
}
.speaker-name {
font-size: rem(24px);
}
.schedule-list-title {
font-size: rem(30px);
text-transform: none;
margin-bottom: rem(1px);
}
.schedule-meta-info {
> span {
font-size: rem(13px);
font-weight: 500;
> i {
color: #1016d7;
}
}
margin-bottom: rem(10px);
}
.schedule-list {
> p {
margin-bottom: 0;
}
@include potrait-tablet-upper {
padding: {
left: rem(65px);
right: rem(45px);
}
position: relative;
&::before {
content: "";
height: 87px;
border-left: 1px dashed #e5e5e5;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
}
}
&:not(:last-child) {
border-bottom: 1px dashed #e5e5e5;
}
}
/* Schedule tab with accordion */
.xs-schedule-accordion {
.schedule-accordion {
&-toggle-icon {
display: block;
@include equal-size(30px);
@include potrait-tablet-upper {
flex: 0 0 30px;
align-self: center;
margin-left: auto;
}
@include potrait-tablet {
display: none;
}
background-color: #041A57;
border-radius: 50%;
@include transition;
position: relative;
&::before {
height: 2px;
width: 12px;
top: 14px;
left: 9px;
}
&::after {
height: 12px;
width: 2px;
left: 14px;
top: 9px;
@include transition();
}
&::before ,
&::after {
position: absolute;
content: "";
background-color: $white;
display: block;
}
}
&-card-content {
max-height: 0px;
opacity: 0;
transition: opacity .4s ease 0s;
overflow-y: auto;
/* Let's get this party started */
&::-webkit-scrollbar {
width: 4px;
}
/* Track */
&::-webkit-scrollbar-track {
border: 1px solid #ecf1f9;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background-color: darken($color: #ecf1f9, $amount: 2);
}
&::-webkit-scrollbar-thumb:window-inactive {
background-color: darken($color: #ecf1f9, $amount: 2);
}
}
&-short-desc {
transition: opacity .2s ease 0s;
}
&-description {
margin-bottom: 13px;
}
&-short-desc {
margin-bottom: 0;
}
&-card {
cursor: pointer;
@include potrait-tablet-upper {
padding: 20px 50px;
}
@include potrait-tablet {
padding: 20px;
}
border: 2px solid #ECF1F9;
background-color: $white;
margin-bottom: -2px;
@include potrait-tablet-upper {
display: flex;
}
&.show {
.schedule-accordion-toggle-icon {
background-color: $primary;
transform: rotate(360deg);
&::after {
transform: scaleY(0);
transform-origin: top;
}
}
.schedule-accordion-short-desc {
max-height: 0px;
opacity: 0;
@include transition();
}
.schedule-accordion-card-content {
max-height: 1000px;
opacity: 1;
}
@include potrait-tablet-upper {
.schedule-room-text {
opacity: 1;
}
}
.schedule-time {
color: $primary;
}
}
.schedule-time {
color: #041A57;
@include potrait-tablet-upper {
font-size: rem(32px);
line-height: 1;
}
@include potrait-tablet {
font-size: rem(20px);
}
font-family: $titleFont;
font-weight: 600;
letter-spacing: -.32px;
display: block;
margin-bottom: 8px;
@include transition();
}
.schedule-list-title {
font-size: rem(23px);
font-weight: 600;
color: #041A57;
@include potrait-tablet-upper {
line-height: 1;
}
margin-bottom: 16px;
}
}
&-left-col {
@include potrait-tablet-upper {
flex: 0 0 340px;
max-width: 340px;
}
@include potrait-tablet {
padding-bottom: 10px;
}
}
&-right-col {
@include potrait-tablet-upper {
flex: 0 0 500px;
max-width: 500px;
}
}
}
.schedule-speaker-lists {
> li {
display: inline-block;
&:not(:last-child) {
margin-right: 8px;
}
> a {
display: block;
> img {
@include equal-size(40px);
border-radius: 50%;
}
}
}
}
.schedule-room-text {
color: $primary;
font-family: $bodyFont;
font-weight: 600;
@include potrait-tablet-upper {
opacity: 0;
transition: opacity .4s ease;
}
}
}
.schedule-nav-tab-horizontal-style-2 {
&-wraper {
text-align: center;
position: relative;
z-index: 2;
}
.schedule-title {
font-size: rem(18px);
font-family: $bodyFont;
margin-bottom: 0;
font-weight: 500;
color: #041A57;
}
display: inline-flex;
margin-bottom: 0;
> .nav-item {
> .nav-link {
padding: 26px 46px;
border: 2px solid #ECF1F9;
margin-left: -2px;
margin-bottom: -2px;
border-radius: 0;
position: relative;
&.active {
color: #041A57;
background-color: currentColor;
border-color: currentColor;
z-index: 2;
.schedule-title {
color: $white;
}
}
}
}
}
Zerion Mini Shell 1.0