275 lines
6.9 KiB
Sass
275 lines
6.9 KiB
Sass
/*******************************************************/
|
|
/***************** ## Popular Food Area *****************/
|
|
/*******************************************************/
|
|
.food-item
|
|
position: relative
|
|
padding: 25px 45px 8px
|
|
background-color: $lighter-color
|
|
border: 1px dashed $border-color
|
|
background-repeat: no-repeat
|
|
background-size: cover
|
|
transition: .3s
|
|
+res-bt(xl, lp)
|
|
+gapLR(padding, 30px)
|
|
+res-bl(xs)
|
|
+gapLR(padding, 25px)
|
|
.content
|
|
display: flex
|
|
justify-content: space-between
|
|
h5
|
|
margin-bottom: 4px
|
|
transition: .3s
|
|
.price
|
|
flex: none
|
|
width: 40px
|
|
text-align: right
|
|
span
|
|
@extend %h5
|
|
color: $primary-color
|
|
transition: .3s
|
|
.image
|
|
+poRB(0)
|
|
opacity: 0
|
|
visibility: hidden
|
|
transition: .3s
|
|
z-index: 2
|
|
img
|
|
max-width: 120px
|
|
border-radius: 50%
|
|
&:hover
|
|
color: white
|
|
background-color: $primary-color
|
|
background-image: url(../images/shapes/food-shape.png)
|
|
.content
|
|
h5,
|
|
.price span
|
|
color: white
|
|
.image
|
|
opacity: 1
|
|
visibility: visible
|
|
right: -25%
|
|
bottom: 36%
|
|
+res-bl(xl)
|
|
right: 0
|
|
bottom: 10%
|
|
|
|
/* Pizza Menu Item */
|
|
.food-menu-item
|
|
padding: 25px 25px 20px
|
|
display: flex
|
|
align-items: center
|
|
border: 1.2px dashed rgba(14, 19, 23, 0.1)
|
|
margin-bottom: 30px
|
|
+res-bl(lg)
|
|
+gapLR(padding, 15px)
|
|
+res-bl(xs)
|
|
flex-wrap: wrap
|
|
.image
|
|
flex: none
|
|
margin-right: 35px
|
|
+res-bl(lg)
|
|
margin-right: 15px
|
|
.content
|
|
margin-right: 10px
|
|
h5
|
|
margin-bottom: 0
|
|
line-height: 1
|
|
p
|
|
margin-bottom: 5px
|
|
.price
|
|
@extend %h5
|
|
line-height: 1
|
|
color: $primary-color
|
|
.details-btn
|
|
flex: none
|
|
text-align: center
|
|
line-height: 35px
|
|
font-size: 13px
|
|
color: $heading-color
|
|
margin-left: auto
|
|
+box($secondary-color, 35px)
|
|
|
|
&.style-two
|
|
padding: 0
|
|
border: none
|
|
align-items: center
|
|
.image
|
|
flex: none
|
|
width: 100px
|
|
margin-right: 20px
|
|
+res-bl(xs)
|
|
margin-bottom: 13px
|
|
.content
|
|
width: 100%
|
|
margin-right: 0
|
|
h5
|
|
margin-top: 8px
|
|
margin-bottom: 5px
|
|
display: flex
|
|
align-items: end
|
|
.title
|
|
flex: none
|
|
.dots
|
|
height: 2px
|
|
width: 100%
|
|
margin-left: 25px
|
|
margin-bottom: 10px
|
|
border-bottom: 2px dotted $base-color
|
|
.price
|
|
margin-left: 20px
|
|
p
|
|
margin-bottom: 0
|
|
&:last-child
|
|
margin-bottom: 0
|
|
|
|
.popular-menu-wrap
|
|
height: 100%
|
|
background: white
|
|
margin-top: -1px
|
|
margin-right: -1px
|
|
padding: 50px 60px
|
|
border: 1px solid $border-color
|
|
box-shadow: 0px 10px 60px rgba(220, 220, 220, 0.25)
|
|
+res-bl(md)
|
|
padding: 35px 25px
|
|
|
|
&.bgc-black
|
|
box-shadow: none
|
|
background-color: $heading-color
|
|
border: 1px solid rgba(255, 255, 255, 0.05)
|
|
.food-menu-item.style-two
|
|
.content
|
|
h5
|
|
color: white
|
|
p
|
|
color: #ACACAC
|
|
|
|
.menu-items-shape
|
|
.shape
|
|
top: 15%
|
|
z-index: -1
|
|
max-width: 15%
|
|
position: absolute
|
|
&.one
|
|
left: 3%
|
|
&.two
|
|
right: 3%
|
|
|
|
.special-pizza
|
|
position: relative
|
|
z-index: 1
|
|
padding: 30px 35px 35px
|
|
background-color: $primary-color
|
|
background-size: cover
|
|
background-repeat: no-repeat
|
|
overflow: hidden
|
|
margin-bottom: 30px
|
|
+res-bl(xs)
|
|
+gapLR(padding, 25px)
|
|
&:after
|
|
+poRB(0)
|
|
content: ''
|
|
width: 38%
|
|
height: 73%
|
|
background-image: url(../images/shapes/special-pizza-shape.png)
|
|
background-repeat: no-repeat
|
|
background-size: cover
|
|
z-index: -2
|
|
.image
|
|
z-index: -1
|
|
+poRT(0, 40px)
|
|
max-width: 52%
|
|
.price
|
|
font-size: 24px
|
|
font-family: $heading-font
|
|
color: $secondary-color
|
|
display: block
|
|
margin-bottom: 4px
|
|
h3
|
|
font-size: 50px
|
|
color: white
|
|
line-height: 1.05
|
|
+res-bl(ms)
|
|
font-size: 40px
|
|
.ratting
|
|
margin-left: -3px
|
|
span
|
|
color: white
|
|
margin-left: 10px
|
|
margin-bottom: -3px
|
|
font-family: $heading-font
|
|
.theme-btn.style-two
|
|
margin-top: 16px
|
|
font-size: 16px
|
|
padding: 6px 30px
|
|
border: 1px solid $secondary-color
|
|
|
|
.restaurant-menu-area
|
|
.shape
|
|
max-width: 10%
|
|
|
|
/* Food Menu Five */
|
|
.food-menu-five
|
|
.food-menu-item.style-two
|
|
padding: 25px 30px
|
|
border: 2px dashed $border-color
|
|
+res-bl(ms)
|
|
display: block
|
|
&:not(:last-child)
|
|
margin-bottom: 20px
|
|
.image
|
|
+res-bl(ms)
|
|
margin-bottom: 15px
|
|
img
|
|
+size(80px)
|
|
border-radius: 50%
|
|
border: 3px solid white
|
|
box-shadow: 0px 10px 30px rgba(150, 150, 150, 0.25)
|
|
|
|
/* Grill Menu */
|
|
.grill-menu-image
|
|
height: 100%
|
|
min-height: 500px
|
|
+res-ab(lg)
|
|
margin-right: -100px
|
|
|
|
.grill-menu-wrap
|
|
.popular-menu-wrap
|
|
margin-top: 60px
|
|
position: relative
|
|
margin-bottom: -60px
|
|
+res-bl(xl)
|
|
+gapLR(padding, 25px)
|
|
.food-menu-item.style-two
|
|
&:not(:last-child)
|
|
padding-bottom: 30px
|
|
border-bottom: 2px dotted $border-color
|
|
.image
|
|
width: 80px
|
|
.content
|
|
h5
|
|
font-size: 22px
|
|
+res-bl(xs)
|
|
font-size: 20px
|
|
.dots
|
|
margin-left: 15px
|
|
+res-bl(ms)
|
|
display: block
|
|
.image
|
|
margin-bottom: 15px
|
|
.vertical-text
|
|
height: 100%
|
|
color: white
|
|
padding: 5px
|
|
+poRT(100%, 0)
|
|
font-size: 24px
|
|
+flexcenter(center)
|
|
writing-mode: vertical-lr
|
|
transform: rotate(-180deg)
|
|
background: $primary-color
|
|
+res-bl(lg)
|
|
display: none
|
|
i
|
|
margin: 25px 0
|
|
transform: rotate(90deg)
|