Fix ACP alerts to use same system as client (#6396)
* Fix PostCSS warning message * Fix disconnect indicator styling Would increase size of quick actions when active * Use same alert system in ACP and client - Remove snackbar - Add styling and fix template for ACP (based on Persona)v1.18.x
Peter Jaszkowiak
7 years ago
committed by
Julian Lam
parent
dae6acda82
commit
dcf1865b54
@ -1,35 +1,95 @@
|
||||
.alert-window {
|
||||
position:fixed;
|
||||
width:300px;
|
||||
z-index:10;
|
||||
.toaster-alert {
|
||||
.pointer;
|
||||
}
|
||||
position: fixed;
|
||||
width: 300px;
|
||||
z-index: 10002;
|
||||
|
||||
right: 20px;
|
||||
bottom: 0px;
|
||||
|
||||
.alert {
|
||||
img {
|
||||
float:left;
|
||||
padding-right:10px;
|
||||
.close {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: relative;
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
display: block;
|
||||
height: 2px;
|
||||
width: 0;
|
||||
transition: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-left-top {
|
||||
left:20px;
|
||||
top:70px;
|
||||
}
|
||||
&.alert-info::before {
|
||||
background-color: @brand-info;
|
||||
}
|
||||
|
||||
.alert-left-bottom {
|
||||
left:20px;
|
||||
bottom:20px;
|
||||
}
|
||||
&.alert-warning::before {
|
||||
background-color: @brand-warning;
|
||||
}
|
||||
|
||||
.alert-right-top {
|
||||
right:20px;
|
||||
top:70px;
|
||||
}
|
||||
&.alert-success::before {
|
||||
background-color: @brand-success;
|
||||
}
|
||||
|
||||
&.alert-danger::before {
|
||||
background-color: @brand-danger;
|
||||
}
|
||||
|
||||
&.animate {
|
||||
&.alert-info::before {
|
||||
background-color: lighten(@brand-info, 25%);
|
||||
}
|
||||
|
||||
&.alert-warning::before {
|
||||
background-color: lighten(@brand-warning, 25%);
|
||||
}
|
||||
|
||||
&.alert-success::before {
|
||||
background-color: lighten(@brand-success, 25%);
|
||||
}
|
||||
|
||||
.alert-right-bottom {
|
||||
right:20px;
|
||||
bottom:20px;
|
||||
&.alert-danger::before {
|
||||
background-color: lighten(@brand-danger, 25%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: ~"calc(100% + 50px)";
|
||||
}
|
||||
}
|
||||
|
||||
background-color: white;
|
||||
border: 0;
|
||||
border-left: 5px solid !important;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25), 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
|
||||
|
||||
strong {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 10px 0px 0px;
|
||||
}
|
||||
|
||||
&.alert-info {
|
||||
color: @brand-info;
|
||||
border-color: @brand-info;
|
||||
}
|
||||
|
||||
&.alert-warning {
|
||||
color: @brand-warning;
|
||||
border-color: @brand-warning;
|
||||
}
|
||||
|
||||
&.alert-success {
|
||||
color: @brand-success;
|
||||
border-color: @brand-success;
|
||||
}
|
||||
|
||||
&.alert-danger {
|
||||
color: @brand-danger;
|
||||
border-color: @brand-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
#snackbar-container {
|
||||
position:fixed;
|
||||
left:20px;
|
||||
bottom:0;
|
||||
z-index:99999;
|
||||
|
||||
strong {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.snackbar {
|
||||
overflow:hidden;
|
||||
clear:both;
|
||||
min-width:288px;
|
||||
max-width:568px;
|
||||
cursor:pointer;
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.snackbar.snackbar-opened {
|
||||
height:auto;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
@media (max-width:767px) {
|
||||
#snackbar-container {
|
||||
left:0!important;
|
||||
right:0;
|
||||
width:100%;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#snackbar-container .snackbar {
|
||||
min-width:100%;
|
||||
}
|
||||
|
||||
#snackbar-container [class="snackbar snackbar-opened"]~.snackbar.toast {
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
#snackbar-container [class="snackbar snackbar-opened"] {
|
||||
border-radius:0;
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
.snackbar {
|
||||
background-color: #323232;
|
||||
color: #FFFFFF;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
height: 0;
|
||||
.transition(.25s ease-in-out opacity);
|
||||
}
|
||||
|
||||
.snackbar.snackbar-opened {
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 20px;
|
||||
height: auto;
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
/* SnackbarJS - MIT LICENSE (https://github.com/FezVrasta/snackbarjs/blob/master/LICENSE.md) */
|
||||
!function(t){"function"==typeof define&&define.amd&&t(jQuery)}(function(t){function a(t){return"undefined"!=typeof t&&null!==t?!0:!1}t(document).ready(function(){t("body").append("<div id=snackbar-container/>")}),t(document).on("click","[data-toggle=snackbar]",function(){t(this).snackbar("toggle")}).on("click","#snackbar-container .snackbar",function(){t(this).snackbar("hide")}),t.snackbar=function(n){if(a(n)&&n===Object(n)){var e,o=!1;a(n.id)?t("#"+n.id).length?e=t("#"+n.id):(e=t("<div/>").attr("id",""+n.id).attr("class","snackbar"),o=!0):(e=t("<div/>").attr("id","snackbar"+Date.now()).attr("class","snackbar"),o=!0);var i=e.hasClass("snackbar-opened");a(n.style)?(i?e.attr("class","snackbar snackbar-opened "+n.style):e.attr("class","snackbar "+n.style),e.attr("data-style",n.style)):i?e.attr("class","snackbar snackbar-opened"):e.attr("class","snackbar"),n.htmlAllowed=a(n.htmlAllowed)?n.htmlAllowed:!1,n.timeout=a(n.timeout)?n.timeout:3e3,e.attr("data-timeout",n.timeout),n.content=n.htmlAllowed?n.content:t("<p>"+n.content+"</p>").text(),a(n.htmlAllowed)&&e.attr("data-html-allowed",n.htmlAllowed),a(n.content)&&(e.find(".snackbar-content").length?e.find(".snackbar-content").html(n.content):e.prepend("<span class=snackbar-content>"+n.content+"</span>"),e.attr("data-content",n.content)),o?e.appendTo("#snackbar-container"):e.insertAfter("#snackbar-container .snackbar:last-child"),a(n.action)&&"toggle"==n.action&&(n.action=i?"hide":"show");var s=Date.now();e.data("animationId1",s),setTimeout(function(){e.data("animationId1")===s&&(a(n.action)&&"show"!=n.action?a(n.action)&&"hide"==n.action&&e.removeClass("snackbar-opened"):e.addClass("snackbar-opened"))},50);var c=Date.now();return e.data("animationId2",c),0!==n.timeout&&setTimeout(function(){e.data("animationId2")===c&&e.removeClass("snackbar-opened")},n.timeout),e}return!1},t.fn.snackbar=function(n){if("undefined"!=typeof n){var e={};if(this.hasClass("snackbar"))return e={id:this.attr("id"),content:t(this).attr("data-content"),style:t(this).attr("data-style"),timeout:t(this).attr("data-timeout"),htmlAllowed:t(this).attr("data-html-allowed")},("show"===n||"hide"===n||"toggle"==n)&&(e.action=n),t.snackbar(e);a(n)&&"show"!==n&&"hide"!==n&&"toggle"!=n||(e={content:t(this).attr("data-content"),style:t(this).attr("data-style"),timeout:t(this).attr("data-timeout"),htmlAllowed:t(this).attr("data-html-allowed")}),a(n)&&(e.id=this.attr("data-snackbar-id"),("show"===n||"hide"===n||"toggle"==n)&&(e.action=n));var o=t.snackbar(e);return this.attr("data-snackbar-id",o.attr("id")),o}}});
|
||||
Loading…
Reference in New Issue