480 lines
11 KiB
Sass
480 lines
11 KiB
Sass
/*******************************************************/
|
|
/****************** ## Common Classes *****************/
|
|
/*******************************************************/
|
|
.page-wrapper
|
|
position: relative
|
|
z-index: 9
|
|
width: 100%
|
|
margin: 0 auto
|
|
overflow: hidden
|
|
min-width: 300px
|
|
|
|
.container
|
|
+res-ab(xl)
|
|
max-width: $container
|
|
padding-left: $gutter/2
|
|
padding-right: $gutter/2
|
|
&.container-1520
|
|
max-width: 1550px
|
|
&.container-1200
|
|
max-width: 1230px
|
|
&.container-1290
|
|
max-width: 1320px
|
|
&.container-1050
|
|
max-width: 1080px
|
|
|
|
.container-fluid
|
|
+res-ab(sm)
|
|
+gapLR(padding, 25px)
|
|
+res-ab(lb)
|
|
+gapLR(padding, 70px)
|
|
|
|
.row
|
|
--bs-gutter-x: 30px
|
|
|
|
.no-gap
|
|
--bs-gutter-x: 0
|
|
|
|
.col-small
|
|
+res-bl(xs)
|
|
width: 100%
|
|
|
|
@for $i from 1 through 15
|
|
.gap-#{10 * $i}
|
|
+res-ab(xxl)
|
|
--bs-gutter-x: #{10px * $i}
|
|
|
|
.row-cols-xl-7
|
|
> *
|
|
+res-ab(xl)
|
|
width: 14.2857%
|
|
flex: 0 0 auto
|
|
|
|
/** Section Title style **/
|
|
.section-title
|
|
margin-top: -8px
|
|
position: relative
|
|
.sub-title
|
|
font-size: 20px
|
|
display: inline-block
|
|
color: $primary-color
|
|
text-transform: uppercase
|
|
font-family: $heading-font
|
|
h2
|
|
text-transform: capitalize
|
|
+res-bl(lg)
|
|
font-size: 45px
|
|
+res-bl(md)
|
|
font-size: 40px
|
|
+res-bl(sm)
|
|
font-size: 35px
|
|
+res-bl(xs)
|
|
font-size: 30px
|
|
|
|
/** Button style **/
|
|
.theme-btn,
|
|
a.theme-btn
|
|
color: white
|
|
cursor: pointer
|
|
font-size: 18px
|
|
transition: 0.5s
|
|
text-align: center
|
|
padding: 11px 36px
|
|
align-items: center
|
|
display: inline-flex
|
|
justify-content: center
|
|
font-family: $heading-font
|
|
text-transform: uppercase
|
|
background: $primary-color
|
|
i
|
|
font-size: 14px
|
|
margin-left: 7px
|
|
margin-top: -2px
|
|
&:hover
|
|
color: $heading-color
|
|
background: $secondary-color
|
|
+res-bl(sm)
|
|
padding: 10px 25px
|
|
&.style-two
|
|
color: $heading-color
|
|
background: $secondary-color
|
|
&:hover
|
|
color: white
|
|
background: $primary-color
|
|
&.style-three
|
|
color: white
|
|
border: 1px solid
|
|
background: transparent
|
|
&:hover
|
|
background: $primary-color
|
|
border-color: $primary-color
|
|
|
|
/* Read More */
|
|
.read-more
|
|
align-items: center
|
|
display: inline-flex
|
|
color: $primary-color
|
|
font-family: $heading-font
|
|
text-transform: capitalize
|
|
text-decoration: underline
|
|
i
|
|
transition: 0.5s
|
|
margin-top: -3px
|
|
margin-left: 8px
|
|
font-size: 0.8em
|
|
&:hover
|
|
color: $primary-color
|
|
|
|
/* More Btn */
|
|
.more-btn
|
|
+size(50px)
|
|
color: white
|
|
line-height: 50px
|
|
text-align: center
|
|
display: inline-block
|
|
background: $primary-color
|
|
&:hover
|
|
color: white
|
|
|
|
/* List style One */
|
|
.list-style-one
|
|
li
|
|
display: flex
|
|
&:not(:last-child)
|
|
margin-bottom: 6px
|
|
&:before
|
|
flex: none
|
|
+size(16px)
|
|
color: white
|
|
font-size: 8px
|
|
margin-top: 6px
|
|
content: "\f00c"
|
|
line-height: 16px
|
|
text-align: center
|
|
margin-right: 12px
|
|
border-radius: 50%
|
|
background: $primary-color
|
|
font-family: 'Font Awesome 5 Pro'
|
|
|
|
/** Social Link One **/
|
|
.social-style-one
|
|
flex-wrap: wrap
|
|
display: inline-flex
|
|
+gapLR(margin, -5px)
|
|
a
|
|
+gapLR(margin, 5px)
|
|
color: $base-color
|
|
border: 1px solid rgba(255, 255, 255, 0.1)
|
|
+circle(transparent, 45px)
|
|
&:hover
|
|
color: white
|
|
background: $primary-color
|
|
border-color: $primary-color
|
|
|
|
/** Social Link Three **/
|
|
.social-style-three
|
|
flex-wrap: wrap
|
|
display: inline-flex
|
|
+gapLR(margin, -7.5px)
|
|
a
|
|
+gapLR(margin, 7.5px)
|
|
&:hover
|
|
color: $primary-color
|
|
|
|
/** Social Link Four **/
|
|
.social-style-four
|
|
flex-wrap: wrap
|
|
display: inline-flex
|
|
+gapLR(margin, -35px)
|
|
a
|
|
+gapLR(margin, 35px)
|
|
i
|
|
margin-right: 10px
|
|
color: $primary-color
|
|
|
|
/* Tab Style One */
|
|
.tab-style-one
|
|
border-bottom: 1px solid $border-color
|
|
li
|
|
margin-right: 30px
|
|
a
|
|
@extend %h4
|
|
margin-bottom: -1px
|
|
padding: 0 20px 16px
|
|
display: inline-block
|
|
border-bottom: 2px solid transparent
|
|
+res-bl(md)
|
|
padding-bottom: 10px
|
|
font-size: 20px !important
|
|
&:first-child
|
|
padding-left: 0
|
|
&.active
|
|
color: $primary-color
|
|
border-bottom-color: $primary-color
|
|
+res-bl(sm)
|
|
border-bottom-color: transparent
|
|
|
|
/** Food Menu Tab **/
|
|
.food-menu-tab
|
|
+gapLR(margin, -15px)
|
|
justify-content: center
|
|
+res-bl(md)
|
|
+gapLR(margin, -7.5px)
|
|
li
|
|
margin: 0 15px 30px
|
|
+res-bl(md)
|
|
margin: 0 7.5px 15px
|
|
.nav-link
|
|
+flexcenter(center)
|
|
flex-direction: column
|
|
padding: 22px 33px 18px
|
|
background: transparent
|
|
border: 1px solid $border-color
|
|
+res-bl(lg)
|
|
padding: 17px 20px 13px
|
|
+res-bl(md)
|
|
+gapLR(padding, 15px)
|
|
+res-bl(sm)
|
|
padding-top: 12px
|
|
padding-bottom: 8px
|
|
i
|
|
line-height: 1
|
|
font-size: 45px
|
|
color: $primary-color
|
|
+res-bl(lg)
|
|
font-size: 30px
|
|
+res-bl(sm)
|
|
display: none
|
|
span
|
|
@extend %heading
|
|
font-size: 24px
|
|
margin-top: 10px
|
|
+res-bl(lg)
|
|
font-size: 20px
|
|
+res-bl(sm)
|
|
margin-top: 0
|
|
font-size: 16px
|
|
&.active
|
|
border-color: $primary-color
|
|
|
|
/*** Preloader style ** */
|
|
.preloader
|
|
position: fixed
|
|
left: 0
|
|
top: 0
|
|
width: 100%
|
|
height: 100%
|
|
z-index: 9999999
|
|
+flexcenter(center)
|
|
background-color: white
|
|
background-repeat: no-repeat
|
|
background-position: center center
|
|
.custom-loader
|
|
width: 75px
|
|
height: 75px
|
|
border-radius: 50%
|
|
background-color: transparent
|
|
border: 2px solid $heading-color
|
|
border-top: 2px solid $primary-color
|
|
border-bottom: 2px solid $primary-color
|
|
-webkit-animation: 1s preloader linear infinite
|
|
animation: 1s preloader linear infinite
|
|
|
|
/* Pagination */
|
|
.pagination
|
|
align-items: center
|
|
+gapLR(margin, -5px)
|
|
li
|
|
margin: 10px 5px 0
|
|
text-align: center
|
|
+res-ab(sm)
|
|
font-size: 24px
|
|
a,
|
|
.page-link
|
|
padding: 0
|
|
+size(60px)
|
|
box-shadow: none
|
|
line-height: 58px
|
|
color: $base-color
|
|
border: 1px solid $border-color
|
|
+res-bl(sm)
|
|
+size(45px)
|
|
line-height: 43px
|
|
&.disabled,
|
|
&:last-child
|
|
.page-link
|
|
color: white
|
|
border-radius: 0
|
|
background: $heading-color
|
|
border-color: $heading-color
|
|
&.active,
|
|
&:hover:not(.disabled)
|
|
.page-link
|
|
color: white
|
|
background: $primary-color
|
|
border-color: $primary-color
|
|
|
|
/* Rating */
|
|
.ratting
|
|
line-height: 1
|
|
align-items: center
|
|
display: inline-flex
|
|
i
|
|
margin: 3px
|
|
color: $secondary-color
|
|
font-size: 13px
|
|
span
|
|
margin-left: 7px
|
|
&.style-two
|
|
i
|
|
margin: 6px
|
|
font-size: 18px
|
|
color: $primary-color
|
|
|
|
|
|
/* Slick Arrows */
|
|
.slick-arrow
|
|
font-size: 20px
|
|
transition: 0.5s
|
|
padding-top: 2px
|
|
+circle(white, 65px)
|
|
color: $heading-color
|
|
box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.15)
|
|
&:focus,
|
|
&:hover
|
|
background: $primary-color
|
|
|
|
/*** Slick Dots ***/
|
|
.slick-dots
|
|
display : flex !important
|
|
flex-wrap: wrap
|
|
+flexcenter(center)
|
|
li
|
|
cursor: pointer
|
|
+size(10px)
|
|
margin: 0 7px
|
|
transition: 0.5s
|
|
border-radius: 5px
|
|
background: $primary-color
|
|
button
|
|
opacity: 0
|
|
&.slick-active
|
|
width: 30px
|
|
|
|
/*** Scroll Top style ***/
|
|
.scroll-top
|
|
+size(80px)
|
|
z-index: 99
|
|
color: white
|
|
font-size: 24px
|
|
cursor: pointer
|
|
text-align: center
|
|
line-height: 80px
|
|
border-radius: 50%
|
|
background-color: transparent
|
|
background-image: url(../images/shapes/scroll-top-bg.png)
|
|
background-repeat: no-repeat
|
|
background-size: cover
|
|
animation: pulse 2s infinite
|
|
+res-bl(lg)
|
|
+size(60px)
|
|
line-height: 60px
|
|
|
|
/* Text White */
|
|
.text-white
|
|
*, a,
|
|
.read-more,
|
|
.counter-text-wrap .count-text
|
|
color: white
|
|
.sub-title
|
|
color: $secondary-color
|
|
|
|
/* Wave Shapes */
|
|
.wave-shapes
|
|
position: absolute
|
|
z-index: -1
|
|
top: 0
|
|
left: -100px
|
|
+size(calc(100% + 100px), 100%)
|
|
.shape
|
|
position: absolute
|
|
bottom: 0
|
|
left: 0
|
|
width: 100%
|
|
animation: leftRightOne 6s infinite
|
|
&.two
|
|
animation-delay: 3s
|
|
|
|
/*Project Filter*/
|
|
.filter-btns-one
|
|
display: flex
|
|
flex-wrap: wrap
|
|
+gapLR(margin, -5px)
|
|
li
|
|
cursor: pointer
|
|
transition: 0.5s
|
|
font-weight: 500
|
|
padding: 5px 20px
|
|
margin: 0 5px 10px
|
|
color: $heading-color
|
|
border: 1px solid $border-color
|
|
+res-ab(ms)
|
|
font-size: 18px
|
|
+res-bl(xs)
|
|
+gapLR(padding, 15px)
|
|
&.active
|
|
background: $secondary-color
|
|
border-color: $secondary-color
|
|
|
|
/* Before After None */
|
|
.before-after-none
|
|
&:after,
|
|
&:before
|
|
display: none
|
|
|
|
/* Position */
|
|
.rel
|
|
position: relative
|
|
|
|
@for $i from 0 through 5
|
|
.z-#{0 + $i}
|
|
z-index: 0 + $i
|
|
|
|
.overlay
|
|
+overlay($heading-color, 0.75)
|
|
&:before
|
|
mix-blend-mode: multiply
|
|
|
|
/* Backgruond Size */
|
|
.bgs-cover
|
|
background-size: cover
|
|
background-position: center
|
|
.bgp-top
|
|
background-repeat: no-repeat
|
|
background-position: top center
|
|
|
|
/* Color + Background */
|
|
.bg-black
|
|
background-color: black
|
|
.bgc-black
|
|
background-color: $heading-color
|
|
.bgc-lighter
|
|
background-color: $lighter-color
|
|
.bgc-primary
|
|
background-color: $primary-color
|
|
.bgc-secondary
|
|
background-color: $secondary-color
|
|
.bgc-dark-green
|
|
background-color: #1E3233
|
|
|
|
/* Border Radius */
|
|
@for $i from 1 through 6
|
|
.br-#{5 * $i}
|
|
border-radius: 5px * $i
|
|
|
|
|
|
/* Color Two */
|
|
.color-two
|
|
--primary-color: #E65A11
|
|
.theme-btn
|
|
color: white |