Project-Pro/drmaterac.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Jacek Pyziak
2025-01-06 20:47:25 +01:00
commit 3bdbd78c2f
25591 changed files with 3586440 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
iadmin/themes/new-theme/scss/components/layout/_content_div.scss Normal file
View File

@@ -0,0 +1,30 @@
.content-div {
padding-left: $size-navbar-width + ($grid-gutter-width / 2);
padding-right: $grid-gutter-width / 2;
padding-top: $size-header-height + $size-header-toolbar-height + ($grid-gutter-width / 2);
padding-bottom: $grid-gutter-width / 2;
transition: padding .5s ease; // transition when collapsing the nav menu
.mobile & {
@include media-breakpoint-down(sm) {
padding-top: 10.4rem;
}
padding-left: 0;
padding-right: 0;
}
&.-notoolbar {
padding-top: $size-header-height + $grid-gutter-width / 2;
}
&.with-tabs {
padding-top: $size-header-height + $size-header-toolbar-height + $grid-gutter-width + 2.5rem;
}
}
.page-sidebar-closed:not(.mobile) {
.content-div {
padding-left: $size-navbar-width-mini + ($grid-gutter-width / 2);
}
}

104
iadmin/themes/new-theme/scss/components/layout/_header_toolbar.scss Normal file
View File

@@ -0,0 +1,104 @@
.header-toolbar {
position: fixed;
background: #ffffff;
top: $size-header-height;
left: $size-navbar-width;
right: 0;
z-index: 990; // popup menus' z-index is 1000, so it has to be just below that
border-bottom: 0.0625rem solid $color-separator;
transition: left .5s ease; // transition when collapsing the nav menu
.mobile & {
top: $size-header-height + ($header-mobile-padding-y * 2);
}
@include media-breakpoint-down(md) {
left: 0;
}
@include media-breakpoint-down(sm) {
padding-top: 0.3rem;
top: 3.5rem;
}
// page title
.title {
padding: 0.3125rem;
padding-left: 0;
font-size: 1.625rem;
font-weight: normal;
margin-bottom: 0;
float: left;
@include media-breakpoint-down(sm) {
float: none;
}
}
// breadcrumb
nav > ol {
padding-left: 0;
}
// toolbar buttons
.toolbar-icons {
@include media-breakpoint-down(sm) {
overflow-x: auto;
float: none;
}
> .wrapper {
display: flex;
justify-content: flex-end;
align-items: flex-start;
@include media-breakpoint-down(sm) {
justify-content: flex-start;
}
a + a {
margin-left: $grid-gutter-width / 2;
}
}
}
// bottom spacing for title & toolbar row
.title-row {
@include clearfix;
margin-bottom: $grid-gutter-width / 2;
}
}
.page-head-tabs {
background: #fff;
> ul {
border-bottom: 0;
}
.tab {
position: relative;
.notification-container {
@include notification_container(1.5rem)
position: absolute;
bottom: -5px;
right: 15px;
.notification-counter {
@include notification_counter();
top: -1.75rem;
right: -0.9375rem;
}
}
}
}
.page-sidebar-closed:not(.mobile) {
.header-toolbar {
left: $size-navbar-width-mini;
}
}

78
iadmin/themes/new-theme/scss/components/layout/_kpi.scss Normal file
View File

@@ -0,0 +1,78 @@
.kpi-container {
position: relative;
text-decoration: none;
background: $gray-soft;
padding-top: .9375rem;
padding-bottom: .9375rem;
text-align: center;
display: block;
&:hover {
text-decoration: none;
}
}
.kpi-refresh {
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
.kpi-content {
position: relative;
text-align: left;
padding-left: 40px;
> .material-icons {
position: absolute;
top: 0;
left: 0;
font-size: 2.25rem;
color: $primary;
}
&.-color2 {
> .value,
> .material-icons {
color: $danger;
}
}
&.-color3 {
> .value,
> .material-icons {
color: $success;
}
}
> .title,
> .subtitle,
> .value {
font-size: 0.75rem;
padding-left: .125rem;
color: $gray-dark;
}
> .title {
display: inline-block;
}
> .subtitle {
text-transform: uppercase;
color: $gray-medium;
display: block;
}
> .value {
font-size: 1.25rem;
color: $primary;
display: block;
}
}
.container-fluid {
> .kpi-container {
padding-left: 1rem;
padding-right: 1rem;
}
}

561
iadmin/themes/new-theme/scss/components/layout/_main_header.scss Normal file
View File

@@ -0,0 +1,561 @@
$header-text-color: #4e6167;
.main-header {
position: fixed;
z-index: 1040; // modal backdrop's z-index is 1050, so this must be just below that
background: #ffffff;
height: $size-header-height;
width: 100%;
display: flex;
align-items: stretch;
color: $header-text-color;
font-size: 0.8125rem;
.material-icons {
position: relative;
}
.mobile & {
padding: $header-mobile-padding-y 0;
height: $size-header-height + ($header-mobile-padding-y * 2);
> .component {
margin-right: 0;
}
.notification-center .dropdown-menu {
margin-top: 0.3125rem;
}
> .material-icons:not(.js-mobile-menu) {
padding-top: 0.625rem;
font-size: 1.313rem;
}
}
> .logo {
height: 100%;
background: url(img/logo.png) no-repeat center left;
width: 13.13rem;
.mobile & {
margin-left: -15px;
min-width: 172px;
width: 0;
flex-grow: 1;
}
}
#shop_version {
font-size: 0.625rem;
position: absolute;
left: 11.25rem;
top: 0.9375rem;
// hide if viewport <= tablet portrait size
@include media-breakpoint-down('md') {
display: none;
}
}
.ajax-spinner {
position: absolute;
left: 0;
margin-left: 0;
top: 5px;
width: 30px;
height: 30px;
}
#quick-access-container {
height: 100%; // needed to make the drop-down appear at the correct position
// hide if viewport <= tablet portrait size
@include media-breakpoint-down('md') {
display: none;
}
#quick_select {
color: $header-text-color;
height: 100%;
font: {
weight: normal;
size: 0.8125rem;
}
text-decoration: none;
letter-spacing: normal;
&:hover {
@extend #quick_select;
color: $primary;
}
&:after {
margin-left: -0.313rem;
}
}
}
#header-search-container {
padding-left: 0;
flex-grow: 1;
// hide on very small screens
@include media-breakpoint-down('sm') {
display: none;
}
form {
height: 1.875rem; // necessary because of elements stretching vertically
width: 100%; // needed for transition
transition: width 0.5s ease-in-out;
.btn {
opacity: 1;
transition: all 0.5s;
}
// behavior when the search form is collapsed
&.collapsed {
width: 15.625rem;
input#bo_query {
border-radius: 0.983rem;
padding-left: 2rem; // leave out space for the loupe
}
.input-group {
// loupe icon
&:before {
opacity: 1;
font-size: 1.250rem;
margin-top: -(1.250rem/2);
}
}
.btn {
// we can't use display:none or else the transition doesn't work
opacity: 0;
padding: 0;
border: 0;
width: 0;
overflow: hidden;
}
}
}
// search input
input#bo_query {
font-size: 0.75rem;
border: 1px solid #bbcdd2 {
top-left-radius: 0.983rem;
bottom-left-radius: 0.983rem;
};
padding: {
top: 0.375rem;
bottom: 0.375rem;
}
transition: padding-left .5s;
&::placeholder {
font-style: italic;
color: $medium-gray !important;
}
}
.input-group {
// loupe icon (hidden by default)
&:before {
@extend .material-icons;
font-size: 0;
opacity: 0;
content: 'search';
position: absolute;
z-index: 5;
top: 50%;
left: 0.563rem;
transition: all .5s;
}
button:not(:first-of-type) {
margin-left: -1px; // collapse borders
}
}
.btn,
.btn-primary {
font: {
size: 0.75rem;
weight: normal;
}
color: #6c868e;
background-color: #fafbfc;
border: 1px solid #bbcdd2;
text-transform: none;
letter-spacing: normal;
padding: 0.313rem 0.625rem;
&:hover {
background-color: #eff1f2
}
&:active,
&:focus {
box-shadow: none;
}
}
// search button
.btn-primary {
border: {
top-right-radius: 0.983rem;
bottom-right-radius: 0.983rem;
}
padding: {
left: 1rem;
right: 1rem;
}
}
.show > .btn-outline-secondary.dropdown-toggle {
box-shadow: none;
}
}
#quick-access-container,
#header-search-container {
.dropdown-toggle {
&:after {
content: 'arrow_drop_down';
font-size: 1.6em; // use of em so that the size is relative to the component's font size
}
}
.dropdown-menu {
font: {
size: 0.75rem;
}
color: $gray-dark;
padding: 0.313rem 0;
min-width: 15.625rem;
.material-icons {
color: $medium-gray;
vertical-align: text-bottom;
padding-right: 0.5rem;
}
> a {
color: inherit;
border-bottom: 0;
padding: 0.438rem 0.938rem {
right: 1.5rem;
};
&:hover {
color: #fff;
background-color: $primary;
.material-icons {
color: #fff;
}
}
}
> .dropdown-divider {
margin: 0.313rem 0;
}
}
}
> .component {
display: flex;
align-items: center;
margin: {
left: 0.5rem;
right: 0.5rem;
}
// hide on very small screens
&.hide-mobile-sm {
@media (max-width: breakpoint-max('sm')) {
display: none;
}
}
&.header-right-component,
&.gamification-component {
margin: {
left: 0.3125rem;
right: 0.3125rem;
}
}
> .stores .ps-dropdown-menu {
left: auto;
right: 0;
}
}
// Shop state / Maintenance / Debug / View my shop
.shop-state,
.shop-list > .link {
height: 100%;
display: flex;
align-items: center;
color: $header-text-color;
font-size: 0.8125rem;
white-space: nowrap;
&:hover {
text-decoration: none;
color: $primary;
}
}
.shop-state {
.material-icons {
color: $medium-gray;
font-size: 1.25rem;
padding: {
right: .3125rem;
}
}
// hide label if width <= tablet landscape size
@media (max-width: breakpoint-max('lg')) {
span {
display: none;
}
}
}
.shop-list {
> .link {
> .material-icons {
color: $primary;
font-size: 1.25rem;
padding-right: .3125rem;
}
}
}
#header-employee-container {
margin-right: .3125rem;
.mobile & {
display: none;
}
}
#header-notification-container {
min-width: $size-header-height;
}
}
// multishop
#shop-list {
> .btn {
color: $header-text-color;
padding: 0;
font-weight: 400;
text-decoration: none !important;
&:hover {
color: $primary;
}
.selected-item {
font-size: .8125rem;
line-height: 17px;
.material-icons {
font-size: 1.25rem;
top: -1px;
&.visibility {
color: $primary;
}
}
}
}
&.show {
.selected-item {
color: $primary;
}
}
.dropdown-menu {
margin: 0;
padding: 0;
border-radius: 0;
min-width: 17.75rem !important;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
border: 1px solid #bbcdd2;
font-size: 13px;
.items-list {
list-style: none;
padding-left: 0;
overflow-y: auto;
max-height: 500px;
margin: 20px;
a {
color: $header-text-color;
}
li:first-child a {
color: $brand-info !important;
font-size: 0.875rem !important;
font-weight: bold;
padding-left: 0;
&:hover {
cursor: pointer;
}
}
li:not(:first-child) {
line-height: 32px;
a:not(.link-shop) {
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
display: inline-block;
width: inherit;
}
}
.group {
a {
padding-left: 0.625rem;
}
}
.shop {
display: flex;
a {
padding-left: 1.5625rem;
justify-content: space-between;
font-weight: 600;
}
a.disabled {
cursor: not-allowed;
}
a.link-shop {
text-decoration: none;
float: right;
margin-left: auto;
padding-left: inherit;
padding-right: 10px;
padding-top: 3px;
i.material-icons {
cursor: pointer;
color: $gray-medium;
border: solid 1px $gray-light;
border-radius: 0.0625rem;
padding: 0.125rem 0.625em;
font-size: 1.25rem;
width: inherit;
height: inherit;
}
}
}
.material-icons {
vertical-align: middle;
margin-right: 0.625rem;
}
li {
&.active, &:hover {
a {
color: $header-text-color !important;
background: none !important;
}
i.material-icons {
color: $brand-info !important;
border: solid 1px $brand-info !important;
}
}
}
}
}
.selected-item {
cursor: pointer;
.material-icons {
vertical-align: middle;
}
.arrow-down {
top: 0;
left: 0;
font-size: 1.25rem;
}
vertical-align: middle;
}
.dropdown-item {
margin: 0;
justify-content: flex-start;
}
}
.employee-dropdown {
> .person {
margin-right: 0.625rem;
cursor: pointer;
.material-icons {
font-size: 1.5rem;
color: $gray-medium;
vertical-align: bottom;
}
}
.dropdown-menu {
top: 0.5rem !important;
left: 0.3rem !important;
margin: 0;
min-width: 10.625rem;
hr {
border-top-width: 2px;
}
.employee_avatar {
text-align: center;
border-bottom: 1px solid $color-separator;
padding: 0.687rem 0 1rem;
margin-bottom: 0.46875rem;
font-weight: 600;
img {
display: none;
}
}
&::after {
position: absolute;
top: -6px;
right: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
&::before {
position: absolute;
top: -7px;
right: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.avatar {
cursor: pointer;
width: 5rem;
height: 5rem;
margin-bottom: 0.3125rem;
}
.material-icons {
color: $gray-medium;
font-size: 1.5rem;
vertical-align: middle;
}
.employee-link {
color: $gray-dark;
&:hover {
color: $gray-dark-text-hover !important;
.material-icons {
color: $gray-dark-text-hover !important;
}
}
}
}
}

520
iadmin/themes/new-theme/scss/components/layout/_nav_bar.scss Normal file
View File

@@ -0,0 +1,520 @@
.js-mobile-menu {
display: none;
float: left;
cursor: pointer;
padding-top: 0;
margin-left: 0.6rem;
margin-right: 0.6rem;
font-size: 1.8rem;
flex-direction: column;
justify-content: center;
@include media-breakpoint-down(md) {
display: inline-flex;
}
}
.nav-bar {
position: fixed;
top: 0;
bottom: 0;
z-index: 502;
background: $gray-dark;
width: $size-navbar-width;
margin-top: $size-header-height;
height: 100%;
overflow-y: auto;
transition: all .5s ease-out;
.material-icons {
color: white;
font-size: 1.188rem;
line-height: inherit;
}
&.mobile-nav {
margin-left: -100%;
margin-top: $size-header-height + ($header-mobile-padding-y * 2);
width: 70%;
@include media-breakpoint-only(sm) {
width: 60%;
}
@include media-breakpoint-only(md) {
width: 40%;
}
&.expanded {
display: block;
margin-left: 0;
overflow-y: scroll;
}
.onboarding-navbar {
display: none;
}
.panel-collapse {
padding-left: 0;
.link-leveltwo .link {
padding-left: 0.75rem;
}
}
.employee_avatar {
text-decoration: none;
text-align: center;
padding-top: 1rem;
.material-icons {
line-height: 3.75rem;
font-size: 3.75rem;
@include media-breakpoint-down(md) {
line-height: 4.6875rem;
font-size: 4.6875rem;
}
}
span {
color: white;
display: block;
margin-bottom: 0.625rem;
@include media-breakpoint-down(md) {
font-size: 1.09375rem;
}
}
img {
width: 3.75rem;
height: 3.75rem;
margin-bottom: .625rem;
&.img-thumbnail {
border-radius: 36px;
}
}
}
.shop-list {
padding-bottom: 1rem;
text-align: center;
font-weight: bold;
a {
@include media-breakpoint-down(md) {
font-size: 1.09375rem;
}
}
}
.main-menu {
margin-top: 0.625rem;
& > li:first-child {
padding-bottom: 1rem;
}
}
.shop-list-title {
color: $brand-primary;
text-transform: uppercase;
font-size: 1rem;
text-align: center;
margin-bottom: 0.9375rem;
&::after {
font-family: 'Material Icons';
content: "\E313";
font-size: 1.25rem;
line-height: 1.375rem;
margin-left: 0.625rem;
vertical-align: bottom;
}
}
.items-list {
padding-left: 0;
a:focus {
background-color: transparent;
}
li {
background-color: white;
border-bottom: $gray-light 1px solid;
&.group a{
padding: 0.9375rem 2.5rem;
font-weight: bold;
}
&.shop {
padding: 0.9375rem 0.9375rem 0.9375rem 2.5rem;
a {
display: inline-block;
width: auto;
&.link-shop {
float: right;
.material-icons {
font-size: 1.25rem;
color: $gray-medium;
}
}
}
}
}
li:first-child a {
color: $brand-primary;
text-transform: uppercase;
font-size: 0.9375rem;
padding: 0.9375rem 1.25rem;
}
}
}
}
.main-menu {
padding: 0 0 5.313rem 0;
margin: 0;
.category-title > .title {
text-transform: uppercase;
}
.link-levelone {
$padding-size: 1.25rem;
display: block;
&[data-submenu] {
@include media-breakpoint-down(md) {
a.link {
font-size: 1.25rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
line-height: inherit;
.material-icons {
font-size: 2rem;
line-height: 2rem;
&.sub-tabs-arrow {
padding-right: 1.2rem;
}
}
}
}
&.has_submenu {
@include media-breakpoint-down(md) {
.sub-tabs-arrow {
visibility: visible;
}
}
}
}
&.-active {
@include media-breakpoint-down(md) {
border-right: none;
}
> .link {
border-left: .25rem solid #25b9d7;
padding-left: .638rem;
.material-icons {
&:first-child {
color: #25b9d7;
}
}
}
}
&:not(#subtab-AdminParentModulesSf) {
i.material-icons.mi-extension {
color: #6c868e;
}
}
> .link {
font-size: .75rem;
display: flex;
height: initial;
line-height: 1rem;
align-items: end;
color: $gray-dark-text;
text-decoration: none;
padding: 0.5rem .3125rem 0.5rem .938rem;
word-break: break-word;
white-space: initial;
text-overflow: initial;
overflow: hidden;
@include media-breakpoint-down(md) {
font-size: 1rem;
}
span {
padding-left: .625rem;
}
.sub-tabs-arrow {
margin-left: auto;
visibility: hidden;
color: #6c868e;
vertical-align: middle;
line-height: inherit;
}
}
&.ul-open,
&.-active,
&.-hover {
& > .link {
background: #202226;
color: white;
transition: background 300ms ease;
@include media-breakpoint-down(md) {
background: $gray-dark;
}
}
&.has_submenu {
.link {
.sub-tabs-arrow {
visibility: visible;
}
}
}
}
> .submenu {
list-style: none;
background: #202226;
display: none;
white-space: nowrap;
padding-left: 2.75rem;
& > li {
@include media-breakpoint-down(md) {
a.link {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
}
&:first-of-type {
padding-top: .625rem;
@include media-breakpoint-down(md) {
padding-top: 0;
}
}
&:last-of-type {
padding-bottom: .750rem;
@include media-breakpoint-down(md) {
padding-bottom: 0;
a.link {
padding-bottom: 1.5rem;
}
}
}
}
}
&.ul-open,
&.-active {
.link {
background: #202226;
}
}
&.open {
> .submenu {
display: block;
}
}
}
.link-leveltwo {
@extend .link-levelone;
&.-active {
> .link {
padding-left: 0;
border-left: none;
color: white;
}
}
> .link {
height: initial;
line-height: 0.9rem;
padding: 0.3125rem 0.3rem 0.3125rem 0;
@include media-breakpoint-down(md) {
padding-top: 1.4rem;
padding-bottom: 1.4rem;
line-height: 1.6rem;
}
}
> .link:hover {
color: $gray-dark-text-hover;
}
}
}
.category-title {
display: block;
font-weight: bold;
font-size: 0.75rem;
border-top: 1px solid #bbcdd2;
margin: 1.813rem 0 0 .938rem;
padding: .875rem 0 .750rem 0;
@include media-breakpoint-down(md) {
display: none;
}
& > .title {
color: white;
background: $gray-dark;
}
}
.menu-collapse {
height: .813rem;
font-size: 2rem;
display: block;
cursor: pointer;
text-align: right;
padding: .688rem .938rem 2.188rem 0;
line-height: .813rem;
color: $gray-dark-text;
@include media-breakpoint-down(md) {
display: none;
padding-bottom: 1rem;
}
.material-icons {
color: #BEBEBE;
&:last-child {
margin-left: -1.313rem;
}
}
}
.page-sidebar-closed:not(.mobile) {
.menu-collapse {
transform: rotate(180deg);
padding-right: .8rem;
}
.nav-bar {
overflow: visible;
width: $size-navbar-width-mini;
.main-menu {
.category-title > .title,
.link-levelone span {
display: none;
}
.sub-tabs-arrow {
display: none !important;
}
.category-title {
margin-top: 0.8rem;
padding-bottom: 0;
}
.link-levelone {
position: relative;
.link {
line-height: initial;
}
&:first-of-type {
margin-bottom: 0;
}
&.-hover {
> .link {
transition: all 0s ease 0s;
width: 250px;
> span {
display: inline-block;
padding-left: 1.563rem;
}
}
ul.submenu {
position: absolute !important;
display: block !important;
top: 34px !important;
width: 200px !important;
left: 50px;
padding-left: 5px;
}
}
.link-leveltwo {
&:first-of-type {
padding-top: 0 !important;
margin-top: .2rem;
}
&:last-of-type {
padding-bottom: 0 !important;
margin-bottom: 1rem;
}
.link {
padding-left: 1.5rem;
}
}
}
}
@media (max-height: 870px) {
// this two tabs need to be flipped, otherwise
// css issue with bottom of the page
#subtab-ShopParameters:hover,
#subtab-AdminAdvancedParameters:hover {
ul.submenu {
display: flex !important;
flex-direction: column-reverse;
top: 0 !important;
transform: rotate(180deg);
transform-origin: top;
li {
transform: rotate(180deg);
&:last-of-type {
margin-bottom: 0;
}
}
}
}
}
}
}
.mobile-layer {
display: none;
transition: all 0.2s ease-in-out;
position: fixed;
background: rgba(0,0,0,.7);
width: 100%;
height: 100%;
z-index: 501;
top: 0;
left: 0;
&.expanded {
display: block;
}
}

18
iadmin/themes/new-theme/scss/components/layout/_non_responsive.scss Normal file
View File

@@ -0,0 +1,18 @@
#non-responsive {
display: none;
position: fixed;
background: $gray-dark;
width: 100%;
height: 100%;
z-index: 501;
top: 3.438rem;
left: 0.125rem;
color: #ffffff;
padding: 4.375rem 2.5rem 0 2.5rem;
font-size: 1.063rem;
h1 {
color: #ffffff;
font-size: 1.875rem;
font-weight: 400;
}
}