Editing: _webinar.scss
.webinar-card { position: relative; border-radius: 15px; box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.1); background-color: #ffffff; transition: all 0.5s ease; .image-box { position: relative; width: 100%; height: 250px; img { border-radius: 15px 15px 0 0; } &::after { content: ''; position: absolute; left: 0; right: 0; top: 60%; bottom: 0; background-image: linear-gradient(to bottom, rgba(6, 6, 6, 0), rgba(0, 0, 0, 0.8)); z-index: 1; } .badges-lists { position: absolute; top: 0; left: 7px; display: flex; align-items: center; flex-wrap: wrap; .badge { font-size: 12px; font-weight: normal; line-height: 1.29; color: #ffffff; padding: 8px 15px; border-radius: 15px 3px 15px 3px; pointer-events: none; margin-top: 8px; margin-right: 8px; } .rtl & { left: auto; right: 7px; .badge { margin-right: 0; margin-left: 8px; } } } .progress { position: absolute; bottom: 12px; left: 18px; width: 75%; height: 7px; border-radius: 5px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); background-color: #ffffff; z-index: 2; .rtl & { left: auto; right: 18px; } .progress-bar { height: 5px; background-color: var(--primary); border-radius: 5px; margin-top: 1px; margin-left: 1px; } } .webinar-notify { width: 40px; height: 40px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); background-color: #ffffff; position: absolute; bottom: -20px; right: 18px; border-radius: 50%; z-index: 3; transition: all 0.3s ease; &:hover { background-color: var(--secondary); color: #ffffff; transition: all 0.3s ease; svg { stroke: #ffffff; } } .rtl & { right: auto; left: 18px; } } .progress-and-bell { position: absolute; bottom: 12px; padding: 0 12px; width: 100%; .progress { position: relative; left: 0 !important; right: 0 !important; bottom: 0 !important; width: calc(100% - 50px) !important; } .webinar-notify { position: relative; bottom: 0; right: 0; } } } .webinar-card-body { padding: 15px 10px 20px 15px; .rtl & { padding: 15px 15px 20px 10px; } .webinar-price-box { .real { font-size: 20px; font-weight: 800; line-height: 1.22; color: var(--primary); pointer-events: none; } .off { font-size: 14px; font-weight: normal; line-height: 1.29; color: $gray; text-decoration: line-through; } } .webinar-title { height: 48px; text-overflow: ellipsis; overflow: hidden; } } .duration, .date-published { font-weight: 500; line-height: 1.19; color: $dark-blue; pointer-events: none; } &.webinar-list { border-radius: 10px; box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1); background-color: #ffffff; .image-box { width: 300px; min-height: 200px; height: auto; max-height: 100%; border-radius: 10px 0 0 10px; &::after { border-radius: 10px 0 0 10px; } img { border-radius: 10px 0 0 10px; } .progress { width: auto; left: 25px; right: 25px; } .rtl & { border-radius: 0 10px 10px 0; img { border-radius: 0 10px 10px 0; } } } &.webinar-list-2 { .image-box { width: 370px; min-width: 300px; height: 250px; } } &.panel-product-card { .image-box { width: 300px; height: 200px; } } &.panel-installment-card { .image-box { width: 295px; height: 200px; &::after { display: none; } } } .webinar-card-body { padding: 12px 17px 12px 25px; .rtl & { padding: 15px 25px 20px 17px; } } .stat-title { font-size: 12px; font-weight: normal; line-height: 1.29; color: $gray; pointer-events: none; } .stat-value { font-size: 14px; font-weight: 500; line-height: 1.19; color: $dark-blue; pointer-events: none; } .webinar-actions { font-size: 14px; font-weight: normal; line-height: 1.29; color: $gray; &:hover { color: var(--primary); } } @media (max-width: $screen-xs-max) { flex-direction: column; .image-box { width: 100% !important; height: 54vw !important; border-radius: 10px 10px 0 0; img { border-radius: 10px 10px 0 0; } } .webinar-card-body { padding: 12px; } } } &.webinar-list-cart { box-shadow: none; .image-box { height: 150px; img { border-radius: 5px; } } .webinar-card-body { padding: 0 0 0 20px; .rtl & { padding: 0 20px 0 0; } } @media (max-width: $screen-xs-max) { .image-box { height: 25vw !important; } } } &:hover { transform: translateY(-15px); box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1); transition: all 0.5s ease; } .webinar-icon { color: var(--secondary); } .upcoming-bell { position: absolute; right: 20px; bottom: -20px; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); background-color: #fff; z-index: 9; .rtl & { right: auto; left: 20px; } } &.webinar-list { .upcoming-bell { bottom: auto; top: 20px; } } }
Save
Back