-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy pathAlert.scss
More file actions
executable file
·87 lines (85 loc) · 2.53 KB
/
Alert.scss
File metadata and controls
executable file
·87 lines (85 loc) · 2.53 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
///
/// Punica CSS Framework
/// Module : Alert
///
@use "../../Core/Global/Getters" as *;
@use "../../Core/Global/Options" as *;
@use "../../Core/Global/Sass" as *;
@use "../../Core/Theme/Getters" as *;
@use "../../Core/Theme/Setters" as *;
@if enabled('alert') {
.#{class('alert', 'name')} {
@include set-style(theme('color', 'background'), theme('color', 'text')) {
display : module('alert', 'display');
padding : module('alert', 'padding');
margin : module('alert', 'margin');
width : module('alert', 'width');
font-size : module('alert', 'font-size');
font-family : module('alert', 'font-family');
font-weight : module('alert', 'font-weight');
border : module('alert', 'border');
border-radius: module('alert', 'border-radius');
line-height : module('alert', 'line-height');
text-align : module('alert', 'text-align');
a {
color : module('alert', 'href', 'color');
text-decoration: module('alert', 'href', 'text-decoration');
&:focus,&:hover,&:active,&.#{class('alert', 'active')} {
opacity: .75;
}
}
p {
&:last-child {
margin-bottom: 0;
}
}
>i {
vertical-align: module('alert', 'icon', 'vertical-align');
}
}
&.#{class('alert', 'closable')} {
position: relative;
&::after {
position : absolute;
content : module('alert', 'closable', 'content');
font-size : module('alert', 'closable', 'font-size');
right : module('alert', 'closable', 'right');
top : module('alert', 'closable', 'top');
transform : module('alert', 'closable', 'transform');
cursor : module('alert', 'closable', 'cursor');
opacity : module('alert', 'closable', 'opacity');
}
}
///
/// STYLES
///
@if features('alert', 'styles') {
@each $style-name, $color, $bg-color in module('alert', 'styles') {
@include set-style($bg-color, $color, $style-name) {
border-color: darken($bg-color, 3%);
a {
color: $color;
}
};
@if features('alert', 'outlined') {
&.#{$style-name}.#{class('alert', 'outlined')} {
color : $bg-color;
border-color : darken($bg-color, 3%);
background-color: transparent;
a {
color: $bg-color;
}
}
}
}
}
///
/// SIZES
///
@if features('alert', 'sizes') {
@each $size-name, $font-size, $padding in module('alert', 'sizes') {
@include set-size($font-size, $padding, $size-name);
}
}
}
}