/var/www/vhosts/ihelp.ro/httpdocs/webroot.dev/scss/import/blocks
Edit: /var/www/vhosts/ihelp.ro/httpdocs/webroot.dev/scss/import/blocks/_block__header.scss (6888B)
.block__header {
padding: 5px 0px;
@media (min-width: 992px) {
padding: 10px 0px;
}
.upper {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
.logo {
a {
img {
width: 190px;
}
}
}
.links {
@media (max-width: 768px) {
font-size: 0;
}
.profile-menu-wrapper {
display: inline-block;
position: relative;
@media (max-width: 768px) {
padding-right: 10px;
}
.toggleProfileMenu {
span {
position: absolute;
border-radius: 0;
background: none;
color: #293b5c;
transform: translate(-50%, -50%);
top: 40%;
right: 5px;
width: auto;
height: auto;
svg {
position: absolute;
display: block;
width: 12px;
height: 12px;
transform: rotate(-90deg);
transform-origin: center;
transition: all 300ms ease;
@media (min-width: 768px) {
width: 14px;
height: 14px;
}
}
}
}
.profile-menu {
min-width: 170px;
position: absolute;
z-index: 102;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 0;
overflow: hidden;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
.list-group {
.list-group-item {
padding: 0;
display: block;
text-align: left;
&.list-group-title {
display: none;
}
a {
width: 100%;
height: auto;
font-size: 14px;
display: block;
white-space: nowrap;
padding: 0 15px;
transition: all 300ms ease;
}
}
}
}
}
a {
position: relative;
& > svg {
width: 32px;
height: 32px;
margin: 0px 7.5px;
top: -2px;
position: relative;
fill: $secondary;
}
&:not(.btn) {
color: $dark;
font-weight: 600;
font-size: 1.125rem;
@media (min-width: 992px) {
border-right: 1px solid $gray-400;
}
padding: 0px 15px;
letter-spacing: 0.2px;
span {
position: absolute;
top: -20px;
right: 13px;
font-size: 0.625rem;
display: inline-block;
width: 18px;
height: 18px;
line-height: 17px;
text-align: center;
border-radius: 21px;
background-color: $primary;
color: $white;
}
&:last-of-type {
border-right: 0;
}
}
&.btn {
margin-left: 15px;
padding: 0 15px;
line-height: 2;
b {
display: none;
}
}
}
}
}
.search {
border-radius: 4px;
border: 1px solid $gray-400;
background: $white;
.inner {
display: flex;
width: 100%;
.string,
.category,
.button {
position: relative;
padding-left: 48px;
svg {
width: 18px;
height: 18px;
fill: $gray-400;
position: absolute;
left: 15px;
top: 15px;
}
.form-group {
margin: 0px;
input,
select {
border: 0;
width: 100%;
display: block;
background: $white;
padding-left: 0px;
}
}
}
.string {
width: 50%;
}
.category {
border-left: 1px solid $gray-400;
width: 30%;
flex-grow: 1;
margin-right: 30px;
select {
padding-left: 0px;
}
}
.button {
width: 150px;
margin-left: auto;
border-left: 1px solid $gray-400;
text-align: center;
background: $gray-200;
padding-left: 0px;
svg {
right: 15px;
left: initial;
}
button {
font-size: 0.875rem;
height: 48px;
line-height: 48px;
border: 0;
color: $dark;
font-weight: 600;
display: block;
width: 100%;
background: $gray-200;
text-align: center;
transition: all 0.3s ease-in-out;
&:hover {
background-color: $secondary;
color: $white;
}
}
}
}
}
}
// Other
@include media-breakpoint-down(lg) {
.block__header {
}
}