Skip to content

Instantly share code, notes, and snippets.

@mrtuvn
Created December 10, 2020 03:22
Show Gist options
  • Save mrtuvn/488742ff7bb4cbd39075f45b6411c578 to your computer and use it in GitHub Desktop.
Save mrtuvn/488742ff7bb4cbd39075f45b6411c578 to your computer and use it in GitHub Desktop.
//Page identifier in config backend
@page-cms-wedding: wedding;
// Common styles for mobile and desktop
& when (@media-common = true) {
.cms-@{page-cms-wedding} {
.topblock__widget {
margin-bottom: 0;
}
// Hide service tab link
.widget__listtab {
.tab-link {
display: none;
}
}
.page-main {
width: 100%;
}
.packages-wrapper {
.flex-wrap();
justify-content: center;
.package-item {
&.mid {
.package-item__title.title {
width: 215px;
}
}
&.last {
.package-item__title.title {
width: 172px;
}
}
p {
width: 263px;
font-weight: @font-weight__light;
font-stretch: normal;
font-style: normal;
line-height: 1.71;
letter-spacing: normal;
text-align: center;
color: #000;
margin: 0 auto;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
.package-item__inner {
flex-direction: column;
border-radius: 50%;
display: block;
text-align: center;
max-width: 320px;
max-height: 320px;
margin: 0 auto;
position: relative;
overflow: hidden;
.image-overlay {
position: absolute;
box-shadow: -2.3px -1.9px 1px 0 rgba(10, 10, 10, 0.1);
background-image: linear-gradient(to top, rgba(95, 78, 32, 0.8), #8d7535);
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .5;
z-index: 1;
}
}
.package-item__title.title {
.use_second_font();
width: 211px;
text-shadow: 0 0 20px rgba(10, 10, 10, 0.1);
font-size: 1.8rem;
font-weight: @font-weight__bold;
font-stretch: normal;
font-style: normal;
line-height: 1.67;
letter-spacing: normal;
text-align: center;
text-transform: uppercase;
color: #ffffff;
margin: 0 auto;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.package-item__details {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
max-width: 210px;
z-index: 2;
&:after {
.bg-sprites;
content: "";
width: 52px;
height: 26px;
background-size: 500px 250px;
background-position: -152px -24px;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
}
}
}
.faq-container {
.faq-item {
&:first-child {
.faq-question.expanse {
border-radius: 10px 10px 0 0;
}
}
> .faq-question {
position: relative;
border-bottom: 1px solid #8d7535;
text-align: left;
padding: 15px 30px 15px 15px;
color: #8d7535;
line-height: 1.43;
max-width: 710px;
margin-bottom: 0;
&:hover {
cursor: pointer;
}
&.expanse {
padding: 15px 19px 11px 21px;
color: #fff;
background-color: #8d7535;
position: relative;
&:after {
content: '\f106';
color: #fff;
}
}
&:after {
content: '\f107';
position: absolute;
font-family: FontAwesome;
display: inline-block;
vertical-align: middle;
right: 19px;
top: 7px;
color: #8d7535;
font-size: 2.1rem;
}
}
.faq-answer {
line-height: 1.71;
font-weight: @font-weight__light;
border-radius: 0 0 10px 10px;
box-shadow: -2.3px -1.9px 20px 0 rgba(10, 10, 10, 0.1);
background-color: #ffffff;
padding: 19px 13px 27px 13px;
max-width: 710px;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
text-align: left;
color: #000000;
}
}
}
.faq-services {
display: flex;
flex-wrap: wrap;
flex-direction: column;
.faq-services__item {
max-width: 540px;
border-radius: 10px;
overflow: hidden;
position: relative;
max-height: 349px;
margin-bottom: 29px;
}
.faq-services__item-content {
position: absolute;
left: 37px;
bottom: 29px;
z-index: 10;
}
.faq-services__item-content__title {
font-weight: @font-weight__bold;
.use_second_font();
color: #fff;
text-transform: uppercase;
margin-bottom: 2px;
font-stretch: normal;
font-style: normal;
line-height: 0.67;
letter-spacing: normal;
text-align: left;
}
.faq-services__item-content__link {
font-weight: @font-weight__light;
font-stretch: normal;
font-style: italic;
line-height: 1.86;
letter-spacing: normal;
text-align: left;
color: #ffffff;
margin-top: 16px;
&:after {
content: '>';
display: inline-block;
vertical-align: middle;
margin-left: 5px;
}
}
}
}
}
// Mobile < 320
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xxs) {
}
// Mobile < 480
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
}
& when (@media-target = 'mobile'), (@media-target = 'all') {
@media only screen and (min-width: ~'481px') and (max-width: ~'767px') {
}
}
// Mobile < 767
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
.cms-@{page-cms-wedding} {
.faq-container {
margin-bottom: 20px;
}
.packages-wrapper {
.package-item {
&:not(:last-child) {
margin-bottom: 20px;
}
p {
padding-top: 15px;
}
}
}
.packages-wrapper {
align-items: center;
justify-content: center;
.package-item {
width: 100%;
margin-right: 0;
}
}
.faq-services {
.faq-services__item-content__title {
font-size: 1.8rem;
}
}
}
}
// Desktop > 768
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
.cms-@{page-cms-wedding} {
.topblock__widget {
margin-bottom: 0;
}
// Hide service tab link
.widget__listtab {
padding-top: 31px;
}
.packages-wedding .block-introduce {
margin-top: 12px;
}
.block-introduce .title {
line-height: 0.67;
}
.page-main {
max-width: 100%;
padding: 0;
.w-fullmain {
max-width: @layout__max-width;
padding: 0 @layout-indent__width;
margin: 0 auto;
}
}
.nav-main {
margin-top: 20px;
}
.packages-wedding {
.block-introduce {
margin-bottom: 19px;
}
}
.questions {
p.title {
margin-bottom: 40px;
}
}
.packages-wrapper {
align-items: flex-start;
margin-bottom: 60px;
.package-item {
width: calc(~'32% - 2%');
&:not(:last-child) {
margin-right: 2%;
}
p {
margin-top: 34px;
}
}
.package-item__image {
object-fit: cover;
height: 100%;
max-width: none;
width: 100%;
}
}
.faq-services {
.faq-services__item-content__title {
font-size: 3rem;
}
}
}
}
// ipad
& when (@media-target = 'desktop'), (@media-target = 'all') {
@media only screen and (min-width: @screen__m) and (max-width: ~'1200px') {
}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
.cms-@{page-cms-wedding} {
.packages-wrapper {
.package-item {
&.mid {
margin-top: 100px;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment