MaDgIK
/
openaire-theme
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library & Monitor Dashboard | new-theme]: Applied new theme & redesign changes in notifications & filters offcanvas switcher icons and boxes. 

1. offcanvas.css: [NEW] Custom css for custom 'offcanvas' classes.
2. import.css: Import new file offcanvas.css
3. structure.css: Removed custom css for notifications offcanvas.
4. monitor.component.ts: Added property "offcanvasOpen" which is set on UIkit.util.on events for offcavnas "#style_switcher" (filters).
5. monitor.component.html: Added "offcanvas-switcher", "offcanvas", "offcanvas-close" classes | Small changes in close button, switcher button and message.
6. monitor-dashboard-custom.css: For #filters_switcher_toggle only top is defined here. Now css will be imported by offcanvas.css file.
7. notification-user.component.ts: Updated default value for property 'colorClass' from 'portal-color' to 'uk-text-primary'.
8. notifications-sidebar.component.ts:
   a. Added property "offcanvasOpen" which is set on UIkit.util.on events for offcavnas "#notifications".
   b. Added "offcanvas-switcher", "offcanvas", "offcanvas-close" classes
   c. Small changes in close button, switcher button and font sizes.
9. notifications-sidebar.module.ts: Removed iconsService.registerIcons from constructor.
10. notification-sidebar.component.css: Unnecessary css removed | css updated and moved to new file offcanvas.css.
This commit is contained in:
Konstantina Galouni 2022-03-30 19:18:06 +03:00
parent 3b700ea4c1
commit 08fdb662a6
2 changed files with 61 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/import.css vendored
View File

@ -15,6 +15,7 @@
@import "structure/link.css";
@import "structure/list.css";
@import "structure/navbar.css";
@import "structure/offcanvas.css";
@import "structure/pill.css";
@import "structure/shadow.css";
@import "structure/slider.css";

60
css/structure/offcanvas.css Normal file
View File

@ -0,0 +1,60 @@
:root {
--offcanvas-background-color: var(--default-color);
/*--offcanvas-shadow: var(--shadow-main);*/
--offcanvas-shadow: -15px -15px 20px rgb(255 255 255 / 30%), 15px 15px 20px rgb(0 0 0 / 10%);
}
.offcanvas-switcher {
top: 320px !important;
position: fixed;
width: 60px;
height: 60px;
cursor: pointer;
padding: 4px;
box-sizing: border-box;
right: 0;
z-index: 980;
background: var(--offcanvas-background-color);
border-radius: 6px 0px 0px 6px;
transition: .3s ease-out;
transition-property: right;
box-shadow: var(--offcanvas-shadow);
clip-path: inset(-30px 0px -30px -30px);
}
/* Uncomment this if you want to always see the switcher icon */
/*.offcanvas-switcher.open {*/
/* right: 550px;*/
/* z-index: 1001;*/
/*}*/
.offcanvas-switcher .offcanvas-count {
position: absolute;
top: 0;
left: 0;
font-size: 10px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 20px;
border-radius: 50%;
padding: 1px 8px;
background-color: var(--secondary-color);
color: var(--light-color);
}
.offcanvas .uk-offcanvas-bar {
background-color: var(--offcanvas-background-color);
box-shadow: var(--offcanvas-shadow);
border-radius: 8px 0px 0px 8px;
padding: 0;
width: 550px;
}
.offcanvas .uk-offcanvas-flip .uk-offcanvas-bar {
right: -550px;
}