assets/css/scss/partials/_single-templates.scss
// Single Recipe
.single-recipe,
.single-exercise {
#primary.content-area {
margin-top: $lsx-large-gap;
}
}
#single-recipe,
#single-exercise {
margin-bottom: -8.4rem;
> .row {
margin-right: 0;
margin-left: 0;
}
.title-lined {
display: flex;
justify-content: space-between;
font-weight: 700;
@include media('<=phone') {
flex-direction: column-reverse;
}
.lsx-sharing-content {
@include media('<=phone') {
margin-bottom: 1rem;
}
p {
margin: 0;
}
}
}
#hp-connected-members {
p {
@include media('<=tablet') {
margin-bottom: 2rem;
}
}
}
.recipe-image,
.exercise-image {
width: 100%;
padding: 0;
margin-bottom: 4.25rem;
@include media('<=tablet') {
max-width: 490px;
}
img {
width: 100%;
}
@media (min-width: 992px) {
max-width: 440px;
}
@media (min-width: 1200px) {
max-width: 490px;
}
.recipe-table,
.exercise-table {
margin-bottom: 0;
thead {
th {
color: #434343;
}
}
tbody {
margin-top: 1rem;
display: grid;
td {
&:first-child {
color: #919191;
}
}
tr {
display: grid;
grid-template-columns: 60% 40%;
}
@media (max-width: 600px) {
display: block;
}
}
}
}
.recipe-content,
.exercise-content {
margin-bottom: 60px;
float: right;
@include media('<=tablet') {
padding-left: 0;
padding-right: 0;
}
@include media('>=tablet') {
margin-right: 2rem;
}
@media (max-width: 600px) {
.back-plan-btn {
margin-top: 4.25rem;
.btn {
width: 100%;
}
}
}
.back-plan-btn {
@include media('>=tablet') {
width: 380px;
a {
width: 100%;
}
}
}
}
}
#single-recipe {
.recipe-image {
.recipe-data {
background: white;
padding: 2.4rem 1.4rem;
@media (min-width: 600px) {
display: flex;
}
.recipe-table {
width: 50%;
&:first-child {
&:last-child {
width: 100%;
}
}
&:only-child {
tbody {
tr {
grid-template-columns: 40% 60%;
}
}
}
&:nth-child(2) {
margin-top: 2rem;
}
@include media('>=custom') {
&:nth-child(2) {
margin-top: 0;
border-left: 1px solid #dddddd;
margin-left: -10px;
th,
td {
padding-left: 10px;
}
}
}
}
}
}
.bottom-single-recipe {
margin-top: 4.25rem;
p {
font-size: 24px;
}
}
}
#single-exercise {
.exercise-title-section {
padding-bottom: 0;
margin-bottom: 2.4rem;
&.sharing-enabled {
display: flex;
flex-direction: column;
justify-content: space-between;
@include media('>=tablet') {
flex-direction: row-reverse;
align-items: center;
}
}
h2 {
margin-bottom: 10px;
font-weight: 700;
}
}
.exercise-image {
.exercise-data {
background: white;
padding: 2.4rem 1.4rem;
.exercise-table {
margin: 0;
tbody {
text-transform: capitalize;
tr {
grid-template-columns: 30% 70%;
}
}
}
}
}
.lsx-hp-widget-items.slick-slider {
+ .exercise-data {
padding-top: 0;
}
}
}