You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.3 KiB
142 lines
3.3 KiB
.navbar{
|
|
padding: 30px 0;
|
|
margin: 0 60px;
|
|
@media screen and(max-width:768px) {
|
|
margin: 0 20px;
|
|
}
|
|
|
|
.navbar-collapse{
|
|
transition: all 0.35s ease-out;
|
|
transform-origin: center left;
|
|
}
|
|
.navbar-nav{
|
|
margin-left: auto;
|
|
background: $color-white;
|
|
|
|
.nav-item{
|
|
padding: 0 15px;
|
|
text-align: center;
|
|
}
|
|
.nav-link{
|
|
color: black;
|
|
padding-left: 15px;
|
|
&:hover{
|
|
color: $color-whitesmoke;
|
|
}
|
|
img{
|
|
width: 100%;
|
|
max-width: 25px;
|
|
}
|
|
|
|
}
|
|
}
|
|
.nav-shop{
|
|
margin-left: auto;
|
|
.nav-link{
|
|
color: $color-black;
|
|
padding-left: 15px;
|
|
&:hover{
|
|
color: rgba(0, 0, 0, 0.747);
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.bg-light{
|
|
background-color:transparent !important;
|
|
|
|
}
|
|
.navbar-light {
|
|
|
|
.navbar-brand{
|
|
color: black !important;
|
|
font-size: 35px;
|
|
font-family: $font-offer;
|
|
|
|
@media screen and(max-width:768px) {
|
|
font-size: 25px;
|
|
}
|
|
}
|
|
|
|
.brand-shop{
|
|
color: $color-black !important;
|
|
}
|
|
}
|
|
.navbar-light .navbar-nav .active >
|
|
.nav-link, .navbar-light .navbar-nav
|
|
.nav-link.active, .navbar-light .navbar-nav
|
|
.nav-link.show, .navbar-light .navbar-nav .show > .nav-link{
|
|
|
|
color: rgb(255, 255, 255);
|
|
border:1px solid;
|
|
border-color: transparent;
|
|
background-image:linear-gradient(360deg, #fff 2%, #00000059 6%) !important;
|
|
padding-bottom: 10px;
|
|
|
|
}
|
|
|
|
.new{
|
|
fill: black;
|
|
&:hover{
|
|
fill:rgba(75, 75, 75, 0.747)!important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.navbar-toggler span {
|
|
display: block;
|
|
background-color: #4f4f4f;
|
|
height: 3px;
|
|
width: 25px;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
position: relative;
|
|
left: 0;
|
|
opacity: 1;
|
|
transition: all 0.35s ease-out;
|
|
transform-origin: center left;
|
|
}
|
|
|
|
|
|
/* top line needs a little padding */
|
|
.navbar-toggler span:nth-child(1) {
|
|
margin-top: 0.3em;
|
|
}
|
|
|
|
/**
|
|
* Animate collapse into X.
|
|
*/
|
|
|
|
/* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */
|
|
.navbar-toggler:not(.collapsed) span:nth-child(1) {
|
|
transform: translate(15%, -33%) rotate(45deg);
|
|
}
|
|
/* center line goes transparent */
|
|
.navbar-toggler:not(.collapsed) span:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button */
|
|
.navbar-toggler:not(.collapsed) span:nth-child(3) {
|
|
transform: translate(15%, 33%) rotate(-45deg) ;
|
|
}
|
|
|
|
|
|
/**
|
|
* Animate collapse open into hamburger menu
|
|
*/
|
|
|
|
/* top line moves back to initial position and rotates back to 0 degrees */
|
|
.navbar-toggler span:nth-child(1) {
|
|
transform: translate(0%, 0%) rotate(0deg) ;
|
|
}
|
|
/* middle line goes back to regular color and opacity */
|
|
.navbar-toggler span:nth-child(2) {
|
|
opacity: 1;
|
|
}
|
|
/* bottom line goes back to initial position and rotates back to 0 degrees */
|
|
.navbar-toggler span:nth-child(3) {
|
|
transform: translate(0%, 0%) rotate(0deg) ;
|
|
}
|