You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
356 lines
8.5 KiB
356 lines
8.5 KiB
@import "../../base/bootstrap-extended/include"; // Bootstrap includes |
|
@import "../../base/components/include"; // Components includes |
|
|
|
.maps { |
|
.content-area-wrapper { |
|
// border: 1px solid black; |
|
height: calc(var(--vh, 1vh) * 100 - (calc(0rem * 1) + 4.45rem + 3.35rem + 0rem + 0rem)) !important; |
|
} |
|
padding-left: 0px !important; |
|
padding-right: 0px !important; |
|
padding-top: 4.45rem !important; |
|
padding-bottom: 0px !important; |
|
} |
|
html |
|
body |
|
div#root |
|
div.wrapper.vertical-layout.navbar-sticky.footer-static.vertical-overlay-menu.menu-hide |
|
div.app-content.content.overflow-hidden.maps |
|
div.content-area-wrapper { |
|
height: calc(var(--vh, 1vh) * 100 - (calc(0rem * 1) + 4.45rem + 3.35rem + 0rem + 0rem)) !important; |
|
// height: inherit !important; |
|
} |
|
.map-leaflet { |
|
width: 100%; |
|
height: 100%; |
|
z-index: 3; |
|
// .map-container { |
|
// width: 100%; |
|
// height: 100%; |
|
// } |
|
|
|
.leaflet-container { |
|
width: 100%; |
|
height: calc(100vh); |
|
font-family: inherit !important; |
|
// height: calc(100vh - 8rem); |
|
} |
|
} |
|
|
|
.leaflet-control-layers-base > label { |
|
font-size: larger; |
|
cursor: pointer; |
|
color: $primary; |
|
font-weight: bold; |
|
} |
|
|
|
.sidebarkiri { |
|
margin-left: 0rem; |
|
margin-top: 0rem; |
|
width: 400px; |
|
left: -400px; |
|
padding: 0; |
|
background-color: $white; |
|
z-index: 2; |
|
position: absolute; |
|
top: 0; |
|
bottom: 0; |
|
// height: calc(100vh - 8.5rem); |
|
// height: calc(var(--vh, 1vh) * 100 - (calc(0rem * 1) + 4.45rem + 3.35rem + 0rem + 0rem)) !important; |
|
transition: right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99); |
|
backface-visibility: hidden; |
|
border-right: 1px solid rgba($black, 0.05); |
|
|
|
&.open { |
|
box-shadow: 0 15px 30px 0 rgba($black, 0.11), 0 5px 15px 0 rgba($black, 0.08); |
|
left: 0; |
|
// right: 0; |
|
} |
|
|
|
// customizer content height |
|
.sidebarkiri-content { |
|
position: relative; |
|
height: 100%; |
|
} |
|
|
|
//customizer close button |
|
.sidebarkiri-close { |
|
position: absolute; |
|
left: 0.6rem; |
|
top: 0.6rem; |
|
padding: 7px; |
|
width: auto; |
|
z-index: 10; |
|
color: $headings-color; |
|
i, |
|
svg { |
|
font-size: 1.5rem; |
|
height: 1.5rem; |
|
width: 1.5rem; |
|
} |
|
} |
|
|
|
// customizer toggle icon |
|
.sidebarkiri-toggle { |
|
background: $white; |
|
color: $black !important; |
|
display: block; |
|
box-shadow: 3px 2px 2px 2px rgba($black, 0.1); |
|
border-top-right-radius: 6px; |
|
border-bottom-right-radius: 6px; |
|
border-color: $black; |
|
position: absolute; |
|
top: 50%; |
|
width: 24px; |
|
height: 38px; |
|
right: -24px; |
|
// left: 100; |
|
text-align: center; |
|
line-height: 40px; |
|
cursor: pointer; |
|
z-index: 20; |
|
} |
|
|
|
.leaflet-popup-content { |
|
margin: 0px; |
|
} |
|
|
|
// theme color box styles |
|
.color-box { |
|
height: 24px; |
|
width: 24px; |
|
margin: 0.5rem; |
|
border-radius: 0.5rem; |
|
cursor: pointer; |
|
position: relative; |
|
&.selected { |
|
&:after { |
|
content: ""; |
|
border: 1px solid $primary; |
|
height: 30px; |
|
width: 30px; |
|
top: -3px; |
|
left: -3px; |
|
position: absolute; |
|
border-radius: 0.5rem; |
|
} |
|
&.border { |
|
&:after { |
|
top: -4px; |
|
left: -4px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.leaflet-left { |
|
// z-index: 1002; |
|
} |
|
// .control-bawah[parent] { |
|
// cursor: pointer; |
|
// } |
|
|
|
html |
|
body |
|
div#root |
|
div.wrapper.vertical-layout.navbar-sticky.footer-static.vertical-overlay-menu.menu-hide |
|
div.app-content.content.overflow-hidden.maps |
|
div.content-area-wrapper |
|
div |
|
div.map-leaflet |
|
div#map-container.map-container.leaflet-container.leaflet-touch.leaflet-retina.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom |
|
div.leaflet-control-container |
|
div.leaflet-top.leaflet-left |
|
div.leaflet-control |
|
div#control-sidebar.control-sidebar |
|
div.sidebarkiri.w-full.d-sm-block.d-md-block.open |
|
div.p-scrollpanel.p-component.custombar1 |
|
div.p-scrollpanel-bar.p-scrollpanel-bar-y { |
|
background: #187cdf; |
|
border: 0 none; |
|
} |
|
|
|
.scrollpanel-demo .p-scrollpanel.custombar1 .p-scrollpanel-wrapper { |
|
border-right: 10px solid var(--surface-ground); |
|
} |
|
|
|
.scrollpanel-demo .p-scrollpanel.custombar1 .p-scrollpanel-bar { |
|
background-color: var(--primary-300); |
|
opacity: 1; |
|
transition: background-color 0.3s; |
|
} |
|
|
|
.scrollpanel-demo .p-scrollpanel.custombar1 .p-scrollpanel-bar:hover { |
|
background-color: var(--primary-400); |
|
} |
|
|
|
.scrollpanel-demo .p-scrollpanel.custombar2 .p-scrollpanel-wrapper { |
|
border-right: 10px solid var(--surface-50); |
|
border-bottom: 10px solid var(--surface-50); |
|
} |
|
|
|
.scrollpanel-demo .p-scrollpanel.custombar2 .p-scrollpanel-bar { |
|
background-color: var(--surface-300); |
|
border-radius: 0; |
|
opacity: 1; |
|
transition: background-color 0.3s; |
|
} |
|
|
|
.scrollpanel-demo .col-12 { |
|
padding: 2rem; |
|
} |
|
|
|
// div#control-sidebar.control-sidebar div.p-sidebar-mask.p-sidebar-visible.p-sidebar-left { |
|
// height: calc(var(--vh, 1vh) * 100 - (calc(0rem * 1) + 4.45rem + 3.35rem + 0rem + 0rem)) !important; |
|
// width: 100%; |
|
// } |
|
// .control-sidebar { |
|
// width: 400px; |
|
// } |
|
@include media-breakpoint-down(sm) { |
|
html body div#root div.wrapper.vertical-layout.navbar-sticky.footer-static.vertical-overlay-menu.menu-hide div.app-content.content.overflow-hidden.maps { |
|
padding-left: 0px !important; |
|
padding-right: 0px !important; |
|
padding-top: 4.45rem !important; |
|
padding-bottom: 0px !important; |
|
} |
|
} |
|
@include media-breakpoint-down(md) { |
|
html body div#root div.wrapper.vertical-layout.navbar-sticky.footer-static.vertical-overlay-menu.menu-hide div.app-content.content.overflow-hidden.maps { |
|
padding-left: 0px !important; |
|
padding-right: 0px !important; |
|
padding-top: 4.45rem !important; |
|
padding-bottom: 0px !important; |
|
} |
|
} |
|
@media (max-width: 767.98px) { |
|
html body div#root div.wrapper.vertical-layout.navbar-sticky.footer-static.vertical-overlay-menu.menu-hide div.app-content.content.overflow-hidden.maps { |
|
padding-left: 0px !important; |
|
padding-right: 0px !important; |
|
padding-top: 4.45rem !important; |
|
padding-bottom: 0px !important; |
|
} |
|
} |
|
|
|
@media (max-width: 767.98px) { |
|
html body .app-content { |
|
padding-left: 0px !important; |
|
padding-right: 0px !important; |
|
padding-top: 4.45rem !important; |
|
padding-bottom: 0px !important; |
|
} |
|
} |
|
|
|
.leaflet-left .leaflet-control { |
|
margin-left: 0; |
|
} |
|
.leaflet-control-attribution { |
|
margin-bottom: 50px !important; |
|
} |
|
|
|
div.leaflet-bottom.leaflet-left div.leaflet-control { |
|
margin-bottom: 0 !important; |
|
} |
|
.leaflet-control-locate { |
|
margin-bottom: 10px !important; |
|
} |
|
.p-listbox-list { |
|
padding-left: 0 !important; |
|
.p-listbox-item { |
|
padding: 0.5rem !important; |
|
} |
|
} |
|
.leaflet-left:has(> .center-map2) { |
|
top: 50% !important; |
|
left: 50% !important; |
|
margin-top: -25px; |
|
margin-left: -15px; |
|
} |
|
.MuiPaper-root:has(.boxxx) { |
|
height: calc(70% - 100px); |
|
overflow: visible; |
|
} |
|
|
|
.MuiPaper-root:has(.list-poi) { |
|
height: calc(100% - 46px); |
|
overflow: visible; |
|
} |
|
|
|
.MuiPaper-root[style*="transform: none"] .boxxx { |
|
top: -53px; |
|
} |
|
.MuiPaper-root[style*="transform: translate(0px)"] .boxxx { |
|
top: -53px; |
|
} |
|
.MuiBackdrop-root[style*="opacity: 0.*"] + .MuiPaper-root .boxxx { |
|
top: -100px; |
|
} |
|
|
|
.p-component.p-fluid.p-column-filter-overlay-menu.p-ripple-disabled.p-connected-overlay-enter-done { |
|
z-index: 3000 !important; |
|
} |
|
.PrivateSwipeArea-root { |
|
width: fit-content; |
|
} |
|
#reset-this-root { |
|
all: unset; |
|
} |
|
|
|
thead > tr > th { |
|
padding: 0.5rem 0.5rem !important; |
|
border-width: 1px 0 1px 1px !important; |
|
border: 1px solid #e5e7eb !important; |
|
} |
|
tbody.p-datatable-tbody tr td { |
|
padding: 0.5rem 0.5rem !important; |
|
border-width: 1px 0 1px 1px !important; |
|
border: 1px solid #e5e7eb !important; |
|
} |
|
.p-dropdown-panel, |
|
.p-treeselect-panel { |
|
z-index: 4102 !important; |
|
} |
|
// .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { |
|
// background-color: white; |
|
// } |
|
// .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { |
|
// background: #ecfeff !important; |
|
// } |
|
|
|
.svg-icon-blue svg path { |
|
fill: #187cdf; |
|
} |
|
|
|
.svg-icon-red svg path { |
|
fill: rgb(186, 4, 4); |
|
} |
|
.svg-icon-green svg path { |
|
fill: #094700; |
|
} |
|
|
|
.svg-icon-orange svg path { |
|
fill: #d8b106; |
|
} |
|
.svg-icon-purple svg path { |
|
fill: #b612e4; |
|
} |
|
.text-sd { |
|
text-shadow: -1px 0px 0px rgb(179, 164, 217), 1px 0px 0px rgb(179, 164, 217), 0px -1px 0px rgb(179, 164, 217), 0px 1px 0px rgb(179, 164, 217); |
|
color: blue; |
|
} |
|
|
|
// multiselect popUp |
|
.p-multiselect-panel { |
|
z-index: 2001 !important; |
|
} |
|
.styleLabelDesa { |
|
background: rgba(237, 233, 233, 0); |
|
border: 0; |
|
border-radius: 0px; |
|
box-shadow: 0 0px 0px; |
|
font-size: 8pt; |
|
color: rgb(11, 0, 0); |
|
border-color: #094700; |
|
text-shadow: 2px 2px 5px rgb(227, 220, 220); |
|
font-weight: bolder; |
|
}
|
|
|