Update
This commit is contained in:
@@ -15,5 +15,6 @@ return [
|
||||
"bundle_css" => "ui_notification",
|
||||
"rel" => [
|
||||
"ui.design-tokens",
|
||||
"ui.design-tokens.air",
|
||||
],
|
||||
];
|
||||
@@ -35,6 +35,7 @@
|
||||
* @property {number} [width=400]
|
||||
* @property {object} [data]
|
||||
* @property {?object.<string, function>} [events]
|
||||
* @property {boolean} [useAirDesign=false]
|
||||
*/
|
||||
|
||||
/**
|
||||
@@ -67,8 +68,14 @@
|
||||
this.autoHideDelay = 8000;
|
||||
this.autoHideTimeout = null;
|
||||
|
||||
this.useAirDesign = options.useAirDesign === true;
|
||||
|
||||
this.data = {};
|
||||
this.width = 400;
|
||||
if (this.useAirDesign === true)
|
||||
{
|
||||
this.width = 339;
|
||||
}
|
||||
|
||||
this.closeButton = null;
|
||||
this.closeButtonVisibility = true;
|
||||
@@ -667,6 +674,11 @@
|
||||
});
|
||||
|
||||
this.getContainer().classList.add(this.getAnimationClassName());
|
||||
|
||||
if (this.useAirDesign === true)
|
||||
{
|
||||
BX.Dom.addClass(this.getContainer(), ['--air', '—ui-context-content-dark']);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -7,10 +7,22 @@
|
||||
transition: opacity .25s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
|
||||
}
|
||||
|
||||
.ui-notification-balloon.--air {
|
||||
box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.07);
|
||||
font-weight: var(--ui-font-weight-normal);
|
||||
font-size: var(--ui-font-size-xs);
|
||||
line-height: var(--ui-font-line-height-2xs);
|
||||
color: var(--ui-color-base-white-fixed);
|
||||
}
|
||||
|
||||
.ui-notification-balloon-animate {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ui-notification-balloon-animate.--air {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui-notification-balloon-content {
|
||||
display: flex;
|
||||
background: #000;
|
||||
@@ -18,12 +30,23 @@
|
||||
font: 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
|
||||
}
|
||||
|
||||
.ui-notification-balloon.--air .ui-notification-balloon-content {
|
||||
background: var(--ui-color-bg-content-inapp);
|
||||
border-radius: 18px;
|
||||
font-size: var(--ui-font-size-xs);
|
||||
font-family: var(--ui-font-family-primary, var(--ui-font-family-helvetica));
|
||||
}
|
||||
|
||||
.ui-notification-balloon-message {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
padding: 14px 16px 14px 25px;
|
||||
}
|
||||
|
||||
.ui-notification-balloon.--air .ui-notification-balloon-message {
|
||||
padding: 16px 18px 16px 18px;
|
||||
}
|
||||
|
||||
.ui-notification-balloon-message:empty:before {
|
||||
content: "\00a0";
|
||||
}
|
||||
@@ -108,4 +131,4 @@
|
||||
.ui-notification-balloon-close-btn:before {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
.ui-notification-balloon{display:block;position:fixed;opacity:0;z-index:3200;transform:translateZ(0);transition:opacity .25s linear,left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}.ui-notification-balloon-animate{opacity:.8}.ui-notification-balloon-content{display:flex;background:#000;border-radius:26px;font:13px var(--ui-font-family-primary,var(--ui-font-family-helvetica))}.ui-notification-balloon-message{flex:1;color:#fff;padding:14px 16px 14px 25px}.ui-notification-balloon-message:empty:before{content:"\00a0"}.ui-notification-balloon-message a,.ui-notification-balloon-message a:hover{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.4)}.ui-notification-balloon-message a:hover{border-bottom-color:#fff}.ui-notification-balloon-actions{display:flex;align-items:center;margin-right:38px}.ui-notification-balloon-action{color:#2fc6f6;cursor:pointer;text-decoration:none;padding:14px 9px;position:relative}.ui-notification-balloon-action:before{content:"";position:absolute;left:9px;top:30px;width:calc(100% - 18px);height:1px;background-color:#2fc6f6;opacity:.4;transition:opacity 180ms linear}.ui-notification-balloon-action:hover:before{opacity:1}.ui-notification-balloon-close-btn{position:absolute;top:0;right:2px;display:inline-block;width:33px;height:43px;opacity:.2;cursor:pointer;transition:180ms opacity linear}.ui-notification-balloon-close-btn:hover{opacity:.7}.ui-notification-balloon-close-btn:active{opacity:1}.ui-notification-balloon-close-btn:after,.ui-notification-balloon-close-btn:before{position:absolute;top:50%;left:50%;display:block;background:#fff;content:"";transform:translate(-50%,-50%) rotate(45deg)}.ui-notification-balloon-close-btn:after{width:2px;height:8px}.ui-notification-balloon-close-btn:before{width:8px;height:2px}
|
||||
.ui-notification-balloon{display:block;position:fixed;opacity:0;z-index:3200;transform:translateZ(0);transition:opacity .25s linear,left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}.ui-notification-balloon.--air{box-shadow:0 8px 18px 0 rgba(0,0,0,.07);font-weight:var(--ui-font-weight-normal);font-size:var(--ui-font-size-xs);line-height:var(--ui-font-line-height-2xs);color:var(--ui-color-base-white-fixed)}.ui-notification-balloon-animate{opacity:.8}.ui-notification-balloon-animate.--air{opacity:1}.ui-notification-balloon-content{display:flex;background:#000;border-radius:26px;font:13px var(--ui-font-family-primary,var(--ui-font-family-helvetica))}.ui-notification-balloon.--air .ui-notification-balloon-content{background:var(--ui-color-bg-content-inapp);border-radius:18px;font-size:var(--ui-font-size-xs);font-family:var(--ui-font-family-primary,var(--ui-font-family-helvetica))}.ui-notification-balloon-message{flex:1;color:#fff;padding:14px 16px 14px 25px}.ui-notification-balloon.--air .ui-notification-balloon-message{padding:16px 18px}.ui-notification-balloon-message:empty:before{content:"\00a0"}.ui-notification-balloon-message a,.ui-notification-balloon-message a:hover{color:#fff;text-decoration:none;border-bottom:1px solid hsla(0,0%,100%,.4)}.ui-notification-balloon-message a:hover{border-bottom-color:#fff}.ui-notification-balloon-actions{display:flex;align-items:center;margin-right:38px}.ui-notification-balloon-action{color:#2fc6f6;cursor:pointer;text-decoration:none;padding:14px 9px;position:relative}.ui-notification-balloon-action:before{content:"";position:absolute;left:9px;top:30px;width:calc(100% - 18px);height:1px;background-color:#2fc6f6;opacity:.4;transition:opacity .18s linear}.ui-notification-balloon-action:hover:before{opacity:1}.ui-notification-balloon-close-btn{position:absolute;top:0;right:2px;display:inline-block;width:33px;height:43px;opacity:.2;cursor:pointer;transition:opacity .18s linear}.ui-notification-balloon-close-btn:hover{opacity:.7}.ui-notification-balloon-close-btn:active{opacity:1}.ui-notification-balloon-close-btn:after,.ui-notification-balloon-close-btn:before{position:absolute;top:50%;left:50%;display:block;background:#fff;content:"";transform:translate(-50%,-50%) rotate(45deg)}.ui-notification-balloon-close-btn:after{width:2px;height:8px}.ui-notification-balloon-close-btn:before{width:8px;height:2px}
|
||||
Reference in New Issue
Block a user