mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-30 20:14:49 +00:00
0469aab433
* wip * update marketplace categories styling * update logo icons * add sort pipe * update search component styling * clean up categories component * cleanup and remove unnecessary sort pipe * query packages in selected category * fix search styling * add reg icon and font, adjust category styles * fix build from rebasing integration/refactors * adjust marketplace types for icon with store data, plus formatting * formatting * update categories and search * hover styling for categories * category styling * refactor for category as a behavior subject * more category styling * base functionality with new marketplace components * styling cleanup * misc style fixes and fix category selection from package page * fixes from review feedback * add and style additional details * implement release notes modal * fix menu when on service show page mobile to display change marketplace * style and responsiveness fixes * rename header to sidebar * input icon config to sidebar * add mime type pipe and type fn * review feedback fixes * skeleton text, more abstraction * reorder categories, clean up a little * audit sidebar, categories, store-icon, marketplace-sidebar, search * finish code cleanup and fix few bugs * misc fixes and cleanup * fix broken styles and markdown * bump shared marketplace version * more cleanup * sync package lock * rename sidebar component to menu * wip preview sidebar * sync package lock * breakout package show elements into components * link to brochure in preview; custom taiga button styles * move marketplace preview component into ui; open preview when viewing service in marketplace * sync changes post file struture rename * further cleanup * create service for sidebar toggle and cleanup marketplace components * bump shared marketplace version * bump shared for new images needed for brochure marketplace * cleanup --------- Co-authored-by: Matt Hill <mattnine@protonmail.com>
127 lines
1.8 KiB
SCSS
127 lines
1.8 KiB
SCSS
:host {
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
|
|
tui-root {
|
|
height: 100%;
|
|
}
|
|
|
|
.left-menu {
|
|
--side-max-width: 280px;
|
|
}
|
|
|
|
.menu {
|
|
:host-context(body[data-theme='Light']) & {
|
|
--ion-color-base: #F4F4F5 !important;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
max-width: 100%;
|
|
transition: filter 0.3s;
|
|
|
|
&_offline {
|
|
filter: saturate(0.75) contrast(0.85);
|
|
}
|
|
|
|
@media screen and (max-width: 991.499px) {
|
|
--widgets-width: 0px;
|
|
}
|
|
}
|
|
|
|
.right-menu {
|
|
--side-max-width: 600px;
|
|
|
|
position: fixed;
|
|
z-index: 1000;
|
|
right: 0;
|
|
left: auto;
|
|
top: 74px;
|
|
|
|
// For some reason *ngIf is broken upon first login
|
|
&_hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
height: 100%;
|
|
width: 10px;
|
|
pointer-events: none;
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
|
|
background: #e2e2e2;
|
|
|
|
z-index: 10;
|
|
opacity: 0.2;
|
|
transition: opacity 0.3s;
|
|
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: -78px;
|
|
left: 10px;
|
|
width: 60px;
|
|
height: 50px;
|
|
border-bottom-left-radius: 14px;
|
|
box-shadow: -14px 0 0 -1px #e2e2e2;
|
|
}
|
|
|
|
&:after {
|
|
margin-top: 28px;
|
|
border-radius: 0;
|
|
border-top-left-radius: 14px;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
.widgets-button {
|
|
position: absolute;
|
|
top: 50%;
|
|
font-size: 0;
|
|
left: 100%;
|
|
width: 16px;
|
|
height: 60px;
|
|
margin-top: -30px;
|
|
border-top-right-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
background: inherit;
|
|
pointer-events: auto;
|
|
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 3px;
|
|
width: 2px;
|
|
height: 8px;
|
|
background: black;
|
|
transform: rotate(-45deg);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
&:before {
|
|
margin-top: -5px;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
&_collapse:before {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
&_collapse:after {
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|