merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'Prateek/admin-navbar-height'

This commit is contained in:
Sanjay 2022-02-28 10:38:26 +05:30
parent 4be22b4957 7fd00bbde8
commit 917f9db951
3 changed files with 278 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/Webkul/Admin/publishable/assets/css/admin.css vendored
View File

File diff suppressed because one or more lines are too long

2
packages/Webkul/Admin/publishable/assets/mix-manifest.json
View File

@ -1,4 +1,4 @@
{
"/js/admin.js": "/js/admin.js?id=e7804c84a3c923405168",
"/css/admin.css": "/css/admin.css?id=32c9e07bd1eec6058e1f"
"/css/admin.css": "/css/admin.css?id=2f1b3aea4447fd4b8eb1"
}

558
packages/Webkul/Admin/src/Resources/assets/sass/partials/_mobile.scss vendored
View File

@ -1,331 +1,325 @@
@import "colors";
@import 'colors';
$toggleSize: 31px;
$toggleMargin: -25px 10px;
$toggleLine: 2px;
$toggleColor: #3c41ff;
.nav-container {
position: relative;
display: none;
max-width: $toggleSize + $toggleMargin;
max-height: $toggleSize + $toggleMargin;
overflow: visible;
outline: none;
position: relative;
display: none;
max-width: $toggleSize + $toggleMargin;
max-height: $toggleSize + $toggleMargin;
overflow: visible;
outline: none;
&.is-active {
.nav-toggle {
&.is-active {
.nav-toggle {
&:before,
&:after {
box-shadow: none;
}
}
&:before,
&:after {
box-shadow: none;
}
}
.nav-items,
.nav-top {
transform: translate(0, 0);
}
.nav-items,
.nav-top {
transform: translate(0, 0);
.overlay {
display: block;
}
}
.overlay {
display: block;
}
}
.overlay {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vh;
display: none;
z-index: 1;
}
.nav-toggle {
background-image: url(./../images/hamburger.svg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: 8px;
width: $toggleSize;
height: $toggleSize;
margin: $toggleMargin;
z-index: 1;
&:hover {
cursor: pointer;
}
}
.close {
position: absolute;
right: 13px;
top: 15px;
width: 32px;
height: 32px;
&:hover {
opacity: 1;
}
&:before {
position: absolute;
left: 15px;
content: ' ';
height: 28px;
width: 2px;
background-color: #8184ab;
transform: rotate(45deg);
}
&:after {
position: absolute;
left: 15px;
content: ' ';
height: 28px;
width: 2px;
background-color: #8184ab;
transform: rotate(-45deg);
}
}
.nav-top {
position: fixed;
top: 0;
left: 0;
min-width: 300px;
max-width: 25vw;
width: 100vw;
height: 60px;
z-index: 1;
padding: 50px 0px 0px 0px;
transition: transform .3s ease;
transform: translate(calc(-100% - 50px), 0);
background: $white;
display: grid;
grid-template-columns: 1fr;
align-content: start;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
text-decoration: none;
.pro-info {
width: 100%;
padding: 15px;
position: absolute;
.profile-info-icon {
position: absolute;
display: inline-block;
background: #3c41ff;
height: 30px;
width: 30px;
text-align: center;
border-radius: 50%;
>span {
display: block;
margin: 6px;
font-size: 18px;
color: #fff;
}
}
.profile-info-desc {
display: inline-block;
margin-left: 40px;
.name {
font-size: 18px;
color: #000;
}
.role {
font-size: 10px;
color: #000;
}
}
}
}
.nav-items {
position: fixed;
top: 60px;
left: 0;
min-width: 300px;
max-width: 25vw;
width: 100vw;
height: 92vh;
z-index: 1;
padding-bottom: 10px;
transition: transform .3s ease;
transform: translate(calc(-100% - 50px), 0);
background: $white;
display: grid;
grid-template-columns: 1fr;
align-content: start;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
overflow-y: scroll;
text-decoration: none;
&::-webkit-scrollbar {
display: none;
}
.nav-item {
transition: background-color .3s ease;
font-size: 16px;
text-transform: capitalize;
text-decoration: none;
a {
color: #000;
display: block;
padding: 5px;
.arrow-icon {
position: absolute;
right: 0;
}
}
ul {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vh;
display: none;
.navbar-child {
text-transform: capitalize;
padding: 15px;
&.active,
&:hover {
background-color: #e6e6e6;
}
}
}
.display-block {
display: block !important;
}
&.active {
background-color: #e6e6e6;
>a {
background-color: #ddd;
}
}
&:hover {
>a {
background-color: #ddd;
}
}
z-index: 1;
}
}
}
.rtl {
.nav-container {
.nav-toggle {
background-image: url(./../images/hamburger.svg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: 8px;
width: $toggleSize;
height: $toggleSize;
margin: $toggleMargin;
z-index: 1;
&:hover {
cursor: pointer;
}
}
.close {
left: 13px;
right: auto !important;
}
position: absolute;
right: 13px;
top: 15px;
width: 32px;
height: 32px;
&.is-active {
.nav-toggle {
&:before,
&:after {
box-shadow: none;
&:hover {
opacity: 1;
}
}
.nav-items,
.nav-top {
transform: translate(0, 0);
}
&:before {
position: absolute;
left: 15px;
content: ' ';
height: 28px;
width: 2px;
background-color: #8184ab;
transform: rotate(45deg);
}
.overlay {
display: block;
}
&:after {
position: absolute;
left: 15px;
content: ' ';
height: 28px;
width: 2px;
background-color: #8184ab;
transform: rotate(-45deg);
}
}
.nav-top {
right: 0;
left: 100%;
transform: translate(calc(100% + 50px), 0);
position: fixed;
top: 0;
left: 0;
min-width: 300px;
max-width: 25vw;
width: 100vw;
height: 60px;
z-index: 1;
padding: 50px 0px 0px 0px;
transition: transform 0.3s ease;
transform: translate(calc(-100% - 50px), 0);
background: $white;
display: grid;
grid-template-columns: 1fr;
align-content: start;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
text-decoration: none;
.pro-info {
.profile-info-desc {
margin-left: 0px;
margin-right: 40px;
.pro-info {
width: 100%;
padding: 15px;
position: absolute;
.profile-info-icon {
position: absolute;
display: inline-block;
background: #3c41ff;
height: 30px;
width: 30px;
text-align: center;
border-radius: 50%;
> span {
display: block;
margin: 6px;
font-size: 18px;
color: #fff;
}
}
.profile-info-desc {
display: inline-block;
margin-left: 40px;
.name {
font-size: 18px;
color: #000;
}
.role {
font-size: 10px;
color: #000;
}
}
}
}
}
.nav-items {
right: 0;
left: 100%;
transform: translate(calc(100% + 50px), 0);
position: fixed;
top: 60px;
left: 0;
min-width: 300px;
max-width: 25vw;
width: 100vw;
height: 100vh;
z-index: 1;
padding-bottom: 10px;
transition: transform 0.3s ease;
transform: translate(calc(-100% - 50px), 0);
background: $white;
display: grid;
grid-template-columns: 1fr;
align-content: start;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
overflow-y: scroll;
text-decoration: none;
a {
.arrow-icon {
position: absolute;
right: auto;
left: 20px;
&::-webkit-scrollbar {
display: none;
}
.nav-item {
transition: background-color 0.3s ease;
font-size: 16px;
text-transform: capitalize;
text-decoration: none;
a {
color: #000;
display: block;
padding: 5px;
.arrow-icon {
position: absolute;
right: 0;
}
}
ul {
display: none;
.navbar-child {
text-transform: capitalize;
padding: 15px;
&.active,
&:hover {
background-color: #e6e6e6;
}
}
}
.display-block {
display: block !important;
}
&.active {
background-color: #e6e6e6;
> a {
background-color: #ddd;
}
}
&:hover {
> a {
background-color: #ddd;
}
}
}
}
}
.rtl {
.nav-container {
.close {
left: 13px;
right: auto !important;
}
&.is-active {
.nav-toggle {
&:before,
&:after {
box-shadow: none;
}
}
.nav-items,
.nav-top {
transform: translate(0, 0);
}
.overlay {
display: block;
}
}
.nav-top {
right: 0;
left: 100%;
transform: translate(calc(100% + 50px), 0);
.pro-info {
.profile-info-desc {
margin-left: 0px;
margin-right: 40px;
}
}
}
.nav-items {
right: 0;
left: 100%;
transform: translate(calc(100% + 50px), 0);
a {
.arrow-icon {
position: absolute;
right: auto;
left: 20px;
}
}
}
}
}
}
}
@media only screen and (max-width: 768px) {
.nav-container {
display: inline-block;
}
.nav-container {
display: inline-block;
}
.destop-logo {
display: none;
}
.destop-logo {
display: none;
}
.content-container {
padding-left: 0px !important;
}
.padding-container-navbar-not-expand {
padding-left: 0 !important;
}
.padding-container-navbar-expand {
padding-left: 0 !important;
}
.rtl {
.content-container {
padding-left: 0px !important;
padding-right: 0px !important;
padding-left: 0px !important;
}
.padding-container-navbar-not-expand {
padding-right: 0 !important;
padding-left: 0 !important;
}
.padding-container-navbar-expand {
padding-right: 0 !important;
padding-left: 0 !important;
}
}
.control-group {
.rtl {
.content-container {
padding-left: 0px !important;
padding-right: 0px !important;
}
&.date,
&.datetime {
.padding-container-navbar-not-expand {
padding-right: 0 !important;
}
&::after {
margin-right: -34px;
right: 100% !important;
}
.padding-container-navbar-expand {
padding-right: 0 !important;
}
}
}
}
.control-group {
&.date,
&.datetime {
&::after {
margin-right: -34px;
right: 100% !important;
}
}
}
}