/var/www/vhosts/ihelp.ro/httpdocs/webroot.dev/scss/import/blocks
Edit: /var/www/vhosts/ihelp.ro/httpdocs/webroot.dev/scss/import/blocks/_block__mobile.scss (8310B)
@media (max-width: 768px) {
.block__header {
padding: 10px 0;
@media (max-width: 600px) {
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
z-index: 100;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.logo {
width: 100px;
@media (max-width: 600px) {
margin-left: 36px;
}
a,
img {
display: block;
width: 100% !important;
}
}
.upper .links a:not(.btn) {
padding: 0;
display: inline-block;
position: relative;
width: 36px;
height: 36px;
vertical-align: middle;
border: none;
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
width: 24px;
height: 24px;
}
span {
top: 0;
right: 3px;
}
}
.upper .links a.btn {
@media (max-width: 500px) {
span {
display: none;
}
}
@media (max-width: 500px) {
padding: 2px;
margin: 0;
font-size: 20px;
b {
display: block;
svg {
width: 24px;
height: 24px;
margin: 0;
}
}
}
padding: 5px 10px;
line-height: 1.3;
font-size: 14px;
}
}
@media (max-width: 600px) {
.block__menu {
background-color: #fff;
.inner {
padding: 0;
height: 0;
overflow: hidden;
display: block;
transition: all 300ms ease;
.menu-activator {
display: none;
}
.menu {
display: block;
position: static;
box-shadow: none;
padding: 10px 0;
margin-bottom: 10px;
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
.left-links,
.right-links {
width: 100%;
text-align: left;
padding: 0;
a {
color: #232323;
margin: 0;
display: block;
svg {
fill: #232323;
}
}
}
.left-links {
padding: 0 0 10px 0;
margin-bottom: 10px;
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
}
}
}
}
.toggleMenu {
transition: 0.3s;
cursor: pointer;
user-select: none;
position: absolute;
z-index: 100;
width: 36px;
height: 36px;
left: -5px;
top: 50%;
transform: translateY(-50%);
@media (min-width: 601px) {
display: none;
}
}
.toggleMenu:hover,
.toggleMenu:focus {
opacity: 1;
text-decoration: none;
color: #fff;
}
.toggleMenu:hover span {
}
.toggleMenu:active {
transition: 0;
}
.icon-burger,
.icon-burger:before,
.icon-burger:after {
background: #232323;
}
.icon-burger {
width: 26px;
height: 2px;
background: #232323;
transition: 0.3s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icon-burger:before,
.icon-burger:after {
display: inline-block;
width: 26px;
height: 2px;
transition: 0.3s;
position: absolute;
left: 0;
content: "";
transform-origin: 0.28571rem center;
}
.icon-burger:before {
top: 8px;
}
.icon-burger:after {
top: -8px;
}
.toggleMenu.closed {
}
.menuOpen .toggleMenu .icon-burger {
background: transparent;
}
.menuOpen .toggleMenu .icon-burger:before,
.menuOpen .toggleMenu .icon-burger:after {
transform-origin: 50% 50%;
top: 0;
width: 26px;
background: #232323;
}
.menuOpen .toggleMenu .icon-burger:before {
transform: rotate3d(0, 0, 1, 45deg);
}
.menuOpen .toggleMenu .icon-burger:after {
transform: rotate3d(0, 0, 1, -45deg);
}
.addProductBtn {
&.mobile {
width: 100%;
@media (min-width: 500px) {
display: none;
}
}
&.desktop {
display: none;
@media (min-width: 500px) {
display: inline-block;
}
}
}
@media (max-width: 600px) {
html {
body {
padding-top: 60px;
}
&.layout-login {
body {
padding-top: 0;
}
}
}
.block__menu {
position: fixed;
top: 60px;
left: 0;
right: 0;
background: #fff;
overflow: hidden;
.container {
position: relative;
.inner {
padding: 0 15px;
}
}
}
.menuOpen {
overflow: hidden;
.block__header {
border-bottom: 1px solid #eee;
}
.block__menu {
bottom: 0;
overflow: auto;
.container {
.inner {
position: absolute;
top: 0;
left: 0;
right: 0;
height: auto;
padding: 10px 15px;
overflow: auto;
}
}
}
}
}
@media (max-width: 359px) {
.block__header {
.container {
padding: 0 5px;
.logo {
width: 80px;
}
}
}
}
@media (max-width: 992px) {
.block__header {
.container {
.profile-menu {
height: 0;
overflow: hidden;
margin-top: 0;
}
}
}
.profileMenuOpen {
.block__header {
.container {
.upper {
.links {
.profile-menu-wrapper {
.toggleProfileMenu {
span {
svg {
transform: rotate(90deg);
}
}
}
.profile-menu {
@media (max-width: 500px) {
position: fixed;
top: 60px;
left: 0;
right: 0;
transform: none;
margin-top: 0;
}
height: auto;
max-height: calc(100vh - 60px);
overflow: auto;
margin-top: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
.list-group {
.list-group-item {
a {
padding: 7px 15px;
}
@media (max-width: 500px) {
&:first-child,
&:last-child {
border-radius: 0;
}
}
}
}
}
}
}
}
}
}
}
}