vgapp 0.3.9 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,26 +0,0 @@
1
- $toast-map: (
2
- indent: 1rem,
3
- height: auto,
4
- width: auto,
5
- z-index: $toast-index,
6
- transition: all .3s ease-in-out,
7
- padding: 8px 22px,
8
- font-size: 1.125rem,
9
- background-color: $bg-color,
10
- color: $color,
11
- border-width: $border-width,
12
- border-color: transparent,
13
- border-style: $border-style,
14
- border-radius: 20px,
15
- box-shadow: $box-shadow,
16
- header-font-weight: 500,
17
- header-font-size: .975rem,
18
- body-font-size: 1rem,
19
- body-font-weight: 400,
20
- );
21
-
22
- $toast-danger-map: $danger-map;
23
- $toast-success-map: $success-map;
24
- $toast-warning-map: $warning-map;
25
- $toast-info-map: $info-map;
26
- $toast-dark-map: $dark-map;
@@ -1,133 +0,0 @@
1
- @charset "UTF-8";
2
- /**
3
- *--------------------------------------------------------------------------
4
- * Модуль: VGToast
5
- * Автор: Vegas DEV
6
- * Лицензия: смотри LICENSE
7
- *--------------------------------------------------------------------------
8
- **/
9
- .vg-toast {
10
- --vg-toast-indent: 1rem ;
11
- --vg-toast-height: auto ;
12
- --vg-toast-width: auto ;
13
- --vg-toast-z-index: 1050 ;
14
- --vg-toast-transition: all 0.3s ease-in-out ;
15
- --vg-toast-padding: 8px 22px ;
16
- --vg-toast-font-size: 1.125rem ;
17
- --vg-toast-background-color: #fff ;
18
- --vg-toast-color: #000000 ;
19
- --vg-toast-border-width: 1px ;
20
- --vg-toast-border-color: transparent ;
21
- --vg-toast-border-style: solid ;
22
- --vg-toast-border-radius: 20px ;
23
- --vg-toast-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
24
- --vg-toast-header-font-weight: 500 ;
25
- --vg-toast-header-font-size: 0.975rem ;
26
- --vg-toast-body-font-size: 1rem ;
27
- --vg-toast-body-font-weight: 400 ;
28
- --vg-toast-danger-color: #58151c ;
29
- --vg-toast-danger-border-color: #f1aeb5 ;
30
- --vg-toast-danger-background-color: #f8d7da ;
31
- --vg-toast-success-color: #0a3622 ;
32
- --vg-toast-success-border-color: #a3cfbb ;
33
- --vg-toast-success-background-color: #d1e7dd ;
34
- --vg-toast-warning-color: #664d03 ;
35
- --vg-toast-warning-border-color: #ffe69c ;
36
- --vg-toast-warning-background-color: #fff3cd ;
37
- --vg-toast-info-color: #055160 ;
38
- --vg-toast-info-border-color: #9eeaf9 ;
39
- --vg-toast-info-background-color: #cff4fc ;
40
- --vg-toast-dark-color: #a7a7a7 ;
41
- --vg-toast-dark-border-color: #0e0e0e ;
42
- --vg-toast-dark-background-color: #070707 ;
43
- position: fixed;
44
- width: var(--vg-toast-width);
45
- height: var(--vg-toast-height);
46
- z-index: var(--vg-toast-z-index);
47
- padding: var(--vg-toast-indent);
48
- transition: var(--vg-toast-transition);
49
- }
50
- .vg-toast.bottom {
51
- padding-top: 0;
52
- }
53
- .vg-toast.top {
54
- padding-bottom: 0;
55
- }
56
- .vg-toast-danger {
57
- --vg-toast-color: var(--vg-toast-danger-color);
58
- --vg-toast-background-color: var(--vg-toast-danger-background-color);
59
- --vg-toast-border-color: var(--vg-toast-danger-border-color);
60
- }
61
- .vg-toast-success {
62
- --vg-toast-color: var(--vg-toast-success-color);
63
- --vg-toast-background-color: var(--vg-toast-success-background-color);
64
- --vg-toast-border-color: var(--vg-toast-success-border-color);
65
- }
66
- .vg-toast-warning {
67
- --vg-toast-color: var(--vg-toast-warning-color);
68
- --vg-toast-background-color: var(--vg-toast-warning-background-color);
69
- --vg-toast-border-color: var(--vg-toast-warning-border-color);
70
- }
71
- .vg-toast-info {
72
- --vg-toast-color: var(--vg-toast-info-color);
73
- --vg-toast-background-color: var(--vg-toast-info-background-color);
74
- --vg-toast-border-color: var(--vg-toast-info-border-color);
75
- }
76
- .vg-toast-dark {
77
- --vg-toast-color: var(--vg-toast-dark-color);
78
- --vg-toast-background-color: var(--vg-toast-dark-background-color);
79
- --vg-toast-border-color: var(--vg-toast-dark-border-color);
80
- }
81
- .vg-toast:not(.show) {
82
- display: none;
83
- }
84
- .vg-toast-wrapper {
85
- background-color: var(--vg-toast-background-color);
86
- padding: var(--vg-toast-padding);
87
- color: var(--vg-toast-color);
88
- border-width: var(--vg-toast-border-width);
89
- border-style: var(--vg-toast-border-style);
90
- border-color: var(--vg-toast-border-color);
91
- border-radius: var(--vg-toast-border-radius);
92
- box-shadow: var(--vg-toast-box-shadow);
93
- display: flex;
94
- align-items: center;
95
- gap: 8px;
96
- }
97
- .vg-toast-header {
98
- font-size: var(--vg-toast-header-font-size);
99
- font-weight: var(--vg-toast-header-font-weight);
100
- }
101
- .vg-toast-body {
102
- font-size: var(--vg-toast-body-font-size);
103
- font-weight: var(--vg-toast-body-font-weight);
104
- }
105
- .vg-toast-pointer {
106
- cursor: pointer;
107
- }
108
- .vg-toast-button {
109
- width: auto;
110
- height: 100%;
111
- display: flex;
112
- align-items: center;
113
- }
114
- .vg-toast-button .vg-btn-close {
115
- position: relative;
116
- left: unset;
117
- top: unset;
118
- right: unset;
119
- bottom: unset;
120
- height: 100%;
121
- display: flex;
122
- align-items: center;
123
- padding: 0;
124
- }
125
- .vg-toast-button .vg-btn-close svg {
126
- width: 14px;
127
- height: 14px;
128
- }
129
- .vg-toast-button .vg-btn-close svg polygon {
130
- fill: var(--vg-toast-color);
131
- }
132
-
133
- /*# sourceMappingURL=vgtoast.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["vgtoast.scss","../../../utils/scss/mixin.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA;ECNG;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EDaF;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC","file":"vgtoast.css"}
@@ -1,125 +0,0 @@
1
- /**
2
- *--------------------------------------------------------------------------
3
- * Модуль: VGToast
4
- * Автор: Vegas DEV
5
- * Лицензия: смотри LICENSE
6
- *--------------------------------------------------------------------------
7
- **/
8
-
9
- @import "../../../utils/scss/functions";
10
- @import "../../../utils/scss/mixin";
11
- @import "../../../utils/scss/variables";
12
- @import "variables";
13
-
14
- .vg-toast {
15
- @include mix-vars('toast', $toast-map);
16
- @include mix-vars('toast-danger', $toast-danger-map);
17
- @include mix-vars('toast-success', $toast-success-map);
18
- @include mix-vars('toast-warning', $toast-warning-map);
19
- @include mix-vars('toast-info', $toast-info-map);
20
- @include mix-vars('toast-dark', $toast-dark-map);
21
- position: fixed;
22
- width: var(--vg-toast-width);
23
- height: var(--vg-toast-height);
24
- z-index: var(--vg-toast-z-index);
25
- padding: var(--vg-toast-indent);
26
- transition: var(--vg-toast-transition);
27
-
28
- &.bottom {
29
- padding-top: 0;
30
- }
31
-
32
- &.top {
33
- padding-bottom: 0;
34
- }
35
-
36
- &-danger {
37
- --vg-toast-color: var(--vg-toast-danger-color);
38
- --vg-toast-background-color: var(--vg-toast-danger-background-color);
39
- --vg-toast-border-color: var(--vg-toast-danger-border-color);
40
- }
41
-
42
- &-success {
43
- --vg-toast-color: var(--vg-toast-success-color);
44
- --vg-toast-background-color: var(--vg-toast-success-background-color);
45
- --vg-toast-border-color: var(--vg-toast-success-border-color);
46
- }
47
-
48
- &-warning {
49
- --vg-toast-color: var(--vg-toast-warning-color);
50
- --vg-toast-background-color: var(--vg-toast-warning-background-color);
51
- --vg-toast-border-color: var(--vg-toast-warning-border-color);
52
- }
53
-
54
- &-info {
55
- --vg-toast-color: var(--vg-toast-info-color);
56
- --vg-toast-background-color: var(--vg-toast-info-background-color);
57
- --vg-toast-border-color: var(--vg-toast-info-border-color);
58
- }
59
-
60
- &-dark {
61
- --vg-toast-color: var(--vg-toast-dark-color);
62
- --vg-toast-background-color: var(--vg-toast-dark-background-color);
63
- --vg-toast-border-color: var(--vg-toast-dark-border-color);
64
- }
65
-
66
- &:not(.show) {
67
- display: none;
68
- }
69
-
70
- &-wrapper {
71
- background-color: var(--vg-toast-background-color);
72
- padding: var(--vg-toast-padding);
73
- color: var(--vg-toast-color);
74
- border-width: var(--vg-toast-border-width);
75
- border-style: var(--vg-toast-border-style);
76
- border-color: var(--vg-toast-border-color);
77
- border-radius: var(--vg-toast-border-radius);
78
- box-shadow: var(--vg-toast-box-shadow);
79
- display: flex;
80
- align-items: center;
81
- gap: 8px;
82
- }
83
-
84
- &-header {
85
- font-size: var(--vg-toast-header-font-size);
86
- font-weight: var(--vg-toast-header-font-weight);
87
- }
88
-
89
- &-body {
90
- font-size: var(--vg-toast-body-font-size);
91
- font-weight: var(--vg-toast-body-font-weight);
92
- }
93
-
94
- &-pointer {
95
- cursor: pointer;
96
- }
97
-
98
- &-button {
99
- width: auto;
100
- height: 100%;
101
- display: flex;
102
- align-items: center;
103
-
104
- .vg-btn-close {
105
- position: relative;
106
- left: unset;
107
- top: unset;
108
- right: unset;
109
- bottom: unset;
110
- height: 100%;
111
- display: flex;
112
- align-items: center;
113
- padding: 0;
114
-
115
- svg {
116
- width: 14px;
117
- height: 14px;
118
-
119
- polygon {
120
- fill: var(--vg-toast-color);
121
- }
122
- }
123
- }
124
- }
125
- }