This commit is contained in:
2025-04-23 10:45:21 +02:00
parent 8030ffb888
commit d17fb46943
716 changed files with 163468 additions and 0 deletions

View File

@@ -0,0 +1,190 @@
// Name: Notify
// Description: Defines styles for toggleable notifications
//
// Component: `uk-notify`
//
// Sub-objects: `uk-notify-message`
//
// Modifiers: `uk-notify-top-center`
// `uk-notify-top-right`
// `uk-notify-bottom-left`
// `uk-notify-bottom-center`
// `uk-notify-bottom-right`
// `uk-notify-message-primary`
// `uk-notify-message-success`
// `uk-notify-message-warning`
// `uk-notify-message-danger`
//
// Uses: Close: `uk-close`
//
// ========================================================================
// Variables
// ========================================================================
$notify-position: 10px !default;
$notify-z-index: 1040 !default;
$notify-width: 350px !default;
$notify-message-margin-bottom: 10px !default;
$notify-message-padding: 15px !default;
$notify-message-background: #444 !default;
$notify-message-color: #fff !default;
$notify-message-font-size: 16px !default;
$notify-message-line-height: 22px !default;
$notify-message-primary-background: #ebf7fd !default;
$notify-message-primary-color: #2d7091 !default;
$notify-message-success-background: #f2fae3 !default;
$notify-message-success-color: #659f13 !default;
$notify-message-warning-background: #fffceb !default;
$notify-message-warning-color: #e28327 !default;
$notify-message-danger-background: #fff1f0 !default;
$notify-message-danger-color: #d85030 !default;
/* ========================================================================
Component: Notify
========================================================================== */
/*
* Message container for positioning
*/
.uk-notify {
position: fixed;
top: $notify-position;
left: $notify-position;
z-index: $notify-z-index;
box-sizing: border-box;
width: $notify-width;
@include hook-notify();
}
/* Position modifiers
========================================================================== */
.uk-notify-top-right,
.uk-notify-bottom-right {
left: auto;
right: $notify-position;
}
.uk-notify-top-center,
.uk-notify-bottom-center {
left: 50%;
margin-left: ($notify-width / -2);
}
.uk-notify-bottom-left,
.uk-notify-bottom-right,
.uk-notify-bottom-center {
top: auto;
bottom: $notify-position;
}
/* Responsiveness
========================================================================== */
/* Phones portrait and smaller */
@media (max-width: $breakpoint-mini-max) {
/*
* Fit in small screen
*/
.uk-notify {
left: 10px;
right: 10px;
width: auto;
margin: 0;
}
}
/* Sub-object: `uk-notify-message`
========================================================================== */
.uk-notify-message {
position: relative;
margin-bottom: $notify-message-margin-bottom;
padding: $notify-message-padding;
background: $notify-message-background;
color: $notify-message-color;
font-size: $notify-message-font-size;
line-height: $notify-message-line-height;
cursor: pointer;
@include hook-notify-message();
}
/* Close in notify
========================================================================== */
.uk-notify-message > .uk-close {
visibility: hidden;
float: right;
}
.uk-notify-message:hover > .uk-close { visibility: visible; }
/* Modifier: `uk-notify-message-primary`
========================================================================== */
.uk-notify-message-primary {
background: $notify-message-primary-background;
color: $notify-message-primary-color;
@include hook-notify-message-primary();
}
/* Modifier: `uk-notify-message-success`
========================================================================== */
.uk-notify-message-success {
background: $notify-message-success-background;
color: $notify-message-success-color;
@include hook-notify-message-success();
}
/* Modifier: `uk-notify-message-warning`
========================================================================== */
.uk-notify-message-warning {
background: $notify-message-warning-background;
color: $notify-message-warning-color;
@include hook-notify-message-warning();
}
/* Modifier: `uk-notify-message-danger`
========================================================================== */
.uk-notify-message-danger {
background: $notify-message-danger-background;
color: $notify-message-danger-color;
@include hook-notify-message-danger();
}
// Hooks
// ========================================================================
@include hook-notify-misc();
// @mixin hook-notify(){}
// @mixin hook-notify-message(){}
// @mixin hook-notify-message-primary(){}
// @mixin hook-notify-message-success(){}
// @mixin hook-notify-message-warning(){}
// @mixin hook-notify-message-danger(){}
// @mixin hook-notify-misc(){}