Files
Globaly-CSS-Practice/style/_nav.scss
2024-05-31 16:34:01 +02:00

158 lines
2.4 KiB
SCSS

@import '_variables';
form{
width: 336px;
}
.socials-ul{
display: none;
}
nav {
color: white;
font-family: MerriweatherSans;
background-color: #4a4e55;
}
.navbar {
padding: 0 !important;
}
.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: 0;
}
input::placeholder {
color: white !important;
}
.number {
font-family: $numberfont;
font-weight: 900;
font-style: normal;
cursor: pointer;
}
.number:hover {
color: $lightblue;
transition: 0.5s;
}
#mail:hover {
color: #333333;
transition: 0.5s;
}
#mail {
font-family: MerriweatherSans;
color: $lightblue;
text-decoration: underline;
font-size: 14px;
}
@media only screen and (min-width: 768px) {
form {
width: 250px !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: 60px;
}
#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{
cursor: pointer;
color: #333333;
font-family: Lato, sans-serif;
font-weight: 900;
font-style: normal;
text-transform: uppercase;
list-style-type: none;
.navs{
padding: 1rem;
}
.navs:hover {
background-color: $lightblue;
color: white;
transition: 0.3s;
}
}
}
@media only screen and (min-width: 992px) {
form{
margin-left: 55px;
margin-right: 72px;
}
.horizontal-menu{
border-top: none !important;
}
.navs{
padding: 45px 22px !important;
}
header{
padding: 0 96px !important;
}
}