hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-18 15:33:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

bootstrap style notification

Browse Source
This commit is contained in:
Andrea Chiapparelli - 4Science
2018-03-02 19:39:56 +01:00
parent cc615ac0bf
commit 2b8df1cc9d
10 changed files with 210 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
src/app/shared/notifications/notification/notification.component.scss
View File

@@ -1,80 +1,80 @@
.simple-notification {
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
position: relative;
float: left;
margin-bottom: 10px;
color: #fff;
cursor: pointer;
transition: all 0.5s;
min-height: 70px;
}
.simple-notification .sn-title,
.simple-notification .sn-content,
.simple-notification .sn-html {
margin: 0;
}
.simple-notification .sn-title {
line-height: 30px;
font-size: 20px;
}
.simple-notification .sn-content {
font-size: 16px;
line-height: 20px;
}
.simple-notification.has-icon .sn-title,
.simple-notification.has-icon .sn-content,
.simple-notification.has-icon .sn-html {
padding: 0 50px 0 0;
}
.simple-notification .icon {
position: absolute;
box-sizing: border-box;
top: 0;
right: 0;
width: 70px;
height: 70px;
padding: 10px;
}
.simple-notification .icon.icon-hover:hover {
opacity: 0.5;
}
.simple-notification .icon svg {
fill: #fff;
width: 100%;
height: 100%;
}
.simple-notification .icon svg g {
fill: #fff;
}
.simple-notification.rtl-mode.has-icon .sn-title,
.simple-notification.rtl-mode.has-icon .sn-content,
.simple-notification.rtl-mode.has-icon .sn-html {
padding: 0 0 0 50px;
}
.simple-notification.rtl-mode {
direction: rtl;
}
.simple-notification.rtl-mode .sn-content {
padding: 0 0 0 50px;
}
.simple-notification.rtl-mode svg {
left: 0;
right: auto;
}
//.simple-notification {
// width: 100%;
// padding: 10px 20px;
// box-sizing: border-box;
// position: relative;
// float: left;
// margin-bottom: 10px;
// color: #fff;
// cursor: pointer;
// transition: all 0.5s;
// min-height: 70px;
//}
//
//.simple-notification .sn-title,
//.simple-notification .sn-content,
//.simple-notification .sn-html {
// margin: 0;
//}
//
//.simple-notification .sn-title {
// line-height: 30px;
// font-size: 20px;
//}
//
//.simple-notification .sn-content {
// font-size: 16px;
// line-height: 20px;
//}
//
//.simple-notification.has-icon .sn-title,
//.simple-notification.has-icon .sn-content,
//.simple-notification.has-icon .sn-html {
// padding: 0 50px 0 0;
//}
//
//.simple-notification {
// position: absolute;
// box-sizing: border-box;
// top: 0;
// right: 0;
// width: 70px;
// height: 70px;
// padding: 10px;
//}
//
//.simple-notification .icon.icon-hover:hover {
// opacity: 0.5;
//}
//
//.simple-notification .icon svg {
// fill: #fff;
// width: 100%;
// height: 100%;
//}
//
//.simple-notification .icon svg g {
// fill: #fff;
//}
//
//.simple-notification.rtl-mode.has-icon .sn-title,
//.simple-notification.rtl-mode.has-icon .sn-content,
//.simple-notification.rtl-mode.has-icon .sn-html {
// padding: 0 0 0 50px;
//}
//
//.simple-notification.rtl-mode {
// direction: rtl;
//}
//
//.simple-notification.rtl-mode .sn-content {
// padding: 0 0 0 50px;
//}
//
//.simple-notification.rtl-mode svg {
// left: 0;
// right: auto;
//}
.simple-notification.error { background: #F44336; }
.simple-notification.success { background: #8BC34A; }
@@ -82,18 +82,18 @@
.simple-notification.info { background: #03A9F4; }
.simple-notification.warn { background: #ffdb5b; }
.simple-notification .sn-progress-loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
}
.simple-notification .sn-progress-loader span {
float: left;
height: 100%;
}
//.simple-notification .sn-progress-loader {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 5px;
//}
//
//.simple-notification .sn-progress-loader span {
// float: left;
// height: 100%;
//}
.simple-notification.success .sn-progress-loader span { background: #689F38; }
.simple-notification.error .sn-progress-loader span { background: #D32F2F; }
@@ -102,6 +102,42 @@
.simple-notification.warn .sn-progress-loader span { background: #edc242; }
.simple-notification.bare .sn-progress-loader span { background: #ccc; }
.simple-notification.warn div .sn-title,
.simple-notification.warn div .sn-content,
.simple-notification.warn div .sn-html { color: #444; }
//.simple-notification.warn div .sn-title,
//.simple-notification.warn div .sn-content,
//.simple-notification.warn div .sn-html { color: #444; }
.close {
position: absolute;
top: 5px;
right: 5px;
}
.icon {
position: absolute;
top: 5px;
left: 5px;
color: black;
}
//
//.icon > fa-times-circle {
// color: red;
//}
//
//.icon > fa-exclamation-triangle {
// color: orange;
//}
//
//.icon > fa-info {
// color: white;
//}
//
//.icon > fa-check {
// color: forestgreen;
//}
.sn-title, .sn-content, .sn-html {
position: relative;
left: 20px;
}