Files
Globaly-CSS-Practice/style/_nav.scss
2024-06-12 15:26:27 +02:00

229 lines
3.6 KiB
SCSS

@import '_variables';
.form-search{
width: 380px;
height: 40px ;
}
.socials-ul{
display: none;
}
nav {
color: white;
font-family: MerriweatherSans;
background-color: #4a4e55;
}
.navbar {
padding: 0 !important;
height: 40px ;
}
.form-container {
padding: 0;
}
.btn span {
padding-top: 10px;
color: $lightblue;
width: 30px;
height: 30px;
}
.btn span:hover {
color: white;
transition: 0.5s;
}
.contact span {
color: $lightblue;
}
input {
color: white !important;
}
#src-input {
background-color: #4a4e55;
padding-left: 20px;
}
input::placeholder {
color: white !important;
}
.phone{
color: #333333;
font-family: $numberfont;
font-weight: 900;
font-size: 15px;
letter-spacing: .04em;
font-style: normal;
cursor: pointer;
text-decoration: none;
}
.phone:hover{
color: $lightblue;
transition: 0.5s;
text-decoration: none;
}
#phone-img{
width: 22px;
height: 33px;
}
#mail:hover {
color: #333333;
transition: 0.5s;
}
#mail {
font-family: MerriweatherSans;
color: $lightblue;
text-decoration: underline;
font-size: 14px;
}
.logo-img{
cursor:pointer;
}
.register{
.register-link{
color: #15c1c6;
cursor: pointer;
margin-right: 10px;
}
.register-link:hover{
color:#333333;
transition: 0.3s;
}
}
@media only screen and (min-width: 768px) {
.register{
position: absolute;
top: 15px;
left: 20px;
.register-link:hover{
color:#efefef;
transition: 0.3s;
}
}
.form-search{
width: 229px !important;
background-color: #4a4e55;
padding-left: 34px;
padding-right: 15px;
}
.form-container{
padding-left: 0 !important;
padding-right: 15px !important;
}
.navbar{
background-color: #30343c;
height: 50px;
}
#src-input {
padding-left: 0px;
}
#socials{
height: 28px !important;
width: 28px !important;
margin-top: 0 !important;
padding-bottom: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
.horizontal-menu{
border-top: 1px solid #efefef;
}
.nav-ul-hor{
width: 100%;
cursor: pointer;
color: #333333;
font-family: Lato, sans-serif;
font-weight: 900;
font-style: normal;
text-transform: uppercase;
list-style-type: none;
padding-left: 16px !important;
.navs{
padding: 1rem;
color: #333333 ;
// .hor-navs-a{
// color: #333333;
// }
// .hor-navs-a:hover{
// color:white !important;
// }
}
.navs:hover {
background-color: $lightblue;
color: white;
transition: 0.3s;
}
}
}
@media only screen and (min-width: 992px) {
.register{
position: absolute;
left: 5%;
top: 2%;
.register-link:hover{
color:#efefef;
transition: 0.3s;
}
}
.navbar{
height: 60px;
}
.form-search{
margin-left: 55px;
margin-right: 72px;
}
.horizontal-menu{
border-top: none !important;
}
.navs{
padding: 45px 22px !important;
}
header{
padding: 0 96px !important;
}
.logo-img{
width: 174px;
height: 39px;
cursor:pointer;
}
}