This commit is contained in:
root
2025-11-13 19:52:28 +03:00
parent 8aeeb05b7d
commit 807dec3b6c
4646 changed files with 163445 additions and 626017 deletions

View File

@@ -15,5 +15,6 @@ return [
"bundle_css" => "ui_notification",
"rel" => [
"ui.design-tokens",
"ui.design-tokens.air",
],
];

View File

@@ -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

View File

@@ -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;
}
}

View File

@@ -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}