@luizleon/sf.prefeiturasp.vuecomponents 0.0.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.
- package/dist/components/content/Content.d.ts +21 -0
- package/dist/components/icon/Icon.d.ts +39 -0
- package/dist/components/internal/LoadingCircle.d.ts +2 -0
- package/dist/components/internal/LogoutIcon.d.ts +2 -0
- package/dist/components/internal/MenuIcon.d.ts +2 -0
- package/dist/components/internal/ScrollToTop.d.ts +2 -0
- package/dist/components/internal/ThemeToggle.d.ts +2 -0
- package/dist/components/internal/cssClassBuilder.d.ts +29 -0
- package/dist/components/layout/Layout.d.ts +12 -0
- package/dist/components/navmenulink/NavMenuLink.d.ts +12 -0
- package/dist/enum/cor.d.ts +9 -0
- package/dist/enum/index.d.ts +2 -0
- package/dist/enum/tamanho.d.ts +5 -0
- package/dist/index.d.ts +9 -0
- package/dist/lib.es.js +2724 -0
- package/dist/lib.umd.js +79 -0
- package/dist/services/authService.d.ts +20 -0
- package/dist/services/dialogService.d.ts +12 -0
- package/dist/services/navMenuService.d.ts +9 -0
- package/dist/style.css +1 -0
- package/package.json +31 -0
- package/src/components/content/Content.d.ts +35 -0
- package/src/components/content/Content.vue +41 -0
- package/src/components/icon/Icon.d.ts +38 -0
- package/src/components/icon/Icon.vue +43 -0
- package/src/components/internal/LoadingCircle.vue +16 -0
- package/src/components/internal/LogoutIcon.vue +14 -0
- package/src/components/internal/MenuIcon.vue +13 -0
- package/src/components/internal/ScrollToTop.vue +26 -0
- package/src/components/internal/ThemeToggle.ts +41 -0
- package/src/components/internal/ThemeToggle.vue +23 -0
- package/src/components/internal/cssClassBuilder.ts +44 -0
- package/src/components/layout/Layout.d.ts +44 -0
- package/src/components/layout/Layout.vue +63 -0
- package/src/components/navmenulink/NavMenuLink.d.ts +34 -0
- package/src/components/navmenulink/NavMenuLink.vue +41 -0
- package/src/enum/cor.ts +9 -0
- package/src/enum/index.ts +2 -0
- package/src/enum/tamanho.ts +5 -0
- package/src/index.ts +56 -0
- package/src/services/authService.ts +69 -0
- package/src/services/dialogService.ts +35 -0
- package/src/services/navMenuService.ts +21 -0
- package/src/sf-oidc-state.html +15 -0
- package/src/style/componentes.scss +22 -0
- package/src/style/src/_animation.scss +441 -0
- package/src/style/src/_display.scss +10 -0
- package/src/style/src/_flexbox.scss +85 -0
- package/src/style/src/_functions.scss +171 -0
- package/src/style/src/_gap.scss +8 -0
- package/src/style/src/_grid.scss +100 -0
- package/src/style/src/_mixins.scss +633 -0
- package/src/style/src/_normalize.scss +351 -0
- package/src/style/src/_ripple.scss +30 -0
- package/src/style/src/_size.scss +98 -0
- package/src/style/src/_spacing.scss +42 -0
- package/src/style/src/_typography.scss +43 -0
- package/src/style/src/_variables.scss +87 -0
- package/src/style/src/components/_button.scss +110 -0
- package/src/style/src/components/_checkbox.scss +53 -0
- package/src/style/src/components/_content.scss +57 -0
- package/src/style/src/components/_datefield.scss +405 -0
- package/src/style/src/components/_drawer.scss +99 -0
- package/src/style/src/components/_icon.scss +120 -0
- package/src/style/src/components/_internal_icon_button.scss +5 -0
- package/src/style/src/components/_layout.scss +183 -0
- package/src/style/src/components/_loading-circle.scss +24 -0
- package/src/style/src/components/_mark.scss +9 -0
- package/src/style/src/components/_mask.scss +33 -0
- package/src/style/src/components/_navmenulink.scss +31 -0
- package/src/style/src/components/_numpad.scss +58 -0
- package/src/style/src/components/_progress-circular.scss +52 -0
- package/src/style/src/components/_scrollToTop.scss +28 -0
- package/src/style/src/components/_select.scss +60 -0
- package/src/style/src/components/_svg_icon.scss +5 -0
- package/src/style/src/components/_textfield.scss +186 -0
- package/src/style/src/components/_themetoggle.scss +25 -0
- package/src/style/src/components/_toast.scss +66 -0
- package/src/style/src/components/_tooltip.scss +55 -0
- package/src/style/src/sweetalert/_sweetalert.scss +9 -0
- package/src/style/src/sweetalert/scss/_animations.scss +197 -0
- package/src/style/src/sweetalert/scss/_body.scss +45 -0
- package/src/style/src/sweetalert/scss/_core.scss +863 -0
- package/src/style/src/sweetalert/scss/_mixins.scss +16 -0
- package/src/style/src/sweetalert/scss/_theming.scss +8 -0
- package/src/style/src/sweetalert/scss/_toasts-animations.scss +83 -0
- package/src/style/src/sweetalert/scss/_toasts-body.scss +85 -0
- package/src/style/src/sweetalert/scss/_toasts.scss +203 -0
- package/src/style/src/sweetalert/scss/_variables.scss +265 -0
- package/src/style/tema.scss +169 -0
- package/src/ts-helpers.d.ts +57 -0
- package/tsconfig.json +19 -0
- package/vite.config.js +25 -0
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
// @ts-ignore
|
|
2
|
+
import Keycloak from "keycloak-js";
|
|
3
|
+
|
|
4
|
+
interface User {
|
|
5
|
+
name: string;
|
|
6
|
+
email: string;
|
|
7
|
+
username: string;
|
|
8
|
+
roles: string[];
|
|
9
|
+
groups: string[];
|
|
10
|
+
emailVerified: boolean;
|
|
11
|
+
firstName: string;
|
|
12
|
+
lastName: string;
|
|
13
|
+
sub: string;
|
|
14
|
+
IsInRole: (role: string) => boolean;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const keycloakInstance = new Keycloak();
|
|
18
|
+
|
|
19
|
+
const Login = (
|
|
20
|
+
onSuccess: () => void,
|
|
21
|
+
onError: (error: any) => void
|
|
22
|
+
) => {
|
|
23
|
+
keycloakInstance
|
|
24
|
+
.init({ onLoad: "login-required" })
|
|
25
|
+
.then(async (authenticated) => {
|
|
26
|
+
if (authenticated) {
|
|
27
|
+
await FetchUserInfo();
|
|
28
|
+
}
|
|
29
|
+
onSuccess();
|
|
30
|
+
})
|
|
31
|
+
.catch((e: any) => {
|
|
32
|
+
onError(e);
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const FetchUserInfo = async () => {
|
|
37
|
+
const info: any = await keycloakInstance.loadUserInfo();
|
|
38
|
+
AuthService.User.email = info.email ?? "";
|
|
39
|
+
AuthService.User.emailVerified = info.email_verified === true;
|
|
40
|
+
AuthService.User.firstName = info.given_name ?? "";
|
|
41
|
+
AuthService.User.lastName = info.family_name ?? "";
|
|
42
|
+
AuthService.User.name = info.name ?? "";
|
|
43
|
+
AuthService.User.sub = info.sub ?? "";
|
|
44
|
+
AuthService.User.username = info.preferred_username ?? "";
|
|
45
|
+
AuthService.User.roles = [...(info.role ?? [])];
|
|
46
|
+
AuthService.User.groups = [...(info.group ?? [])];
|
|
47
|
+
AuthService.User.IsInRole = (role: string) => {
|
|
48
|
+
return AuthService.User.roles.includes(role);
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const Logout = () => {
|
|
53
|
+
keycloakInstance
|
|
54
|
+
.logout({
|
|
55
|
+
redirectUri: location.origin,
|
|
56
|
+
})
|
|
57
|
+
.then(() => {
|
|
58
|
+
sessionStorage.removeItem("user-info");
|
|
59
|
+
});
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const AuthService = {
|
|
63
|
+
Instance: keycloakInstance,
|
|
64
|
+
User: {} as User,
|
|
65
|
+
CallLogin: Login,
|
|
66
|
+
CallLogout: Logout,
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
export { AuthService };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
// @ts-ignore
|
|
2
|
+
import Swal from "sweetalert2/dist/sweetalert2.js";
|
|
3
|
+
|
|
4
|
+
interface ConfirmOptions {
|
|
5
|
+
message: string;
|
|
6
|
+
header?: string;
|
|
7
|
+
confirmLabel?: string;
|
|
8
|
+
rejectLabel?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
class DialogService {
|
|
12
|
+
get IsVisible(): boolean {
|
|
13
|
+
return Swal.isVisible();
|
|
14
|
+
}
|
|
15
|
+
async ConfirmAsync(options: ConfirmOptions): Promise<boolean> {
|
|
16
|
+
return new Promise((r) => {
|
|
17
|
+
Swal.fire({
|
|
18
|
+
showCancelButton: true,
|
|
19
|
+
allowEscapeKey: false,
|
|
20
|
+
allowOutsideClick: false,
|
|
21
|
+
icon: "question",
|
|
22
|
+
title: options.header,
|
|
23
|
+
text: options.message,
|
|
24
|
+
confirmButtonText: options.confirmLabel ?? "confirmar",
|
|
25
|
+
cancelButtonText: options.rejectLabel ?? "cancelar",
|
|
26
|
+
}).then((x: any) => {
|
|
27
|
+
r(x.isConfirmed === true);
|
|
28
|
+
});
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
const service = new DialogService();
|
|
34
|
+
|
|
35
|
+
export const UseDialogService = () => service;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { ref, Ref } from "vue";
|
|
2
|
+
|
|
3
|
+
class NavMenuService {
|
|
4
|
+
private _visible: Ref<boolean> = ref(false);
|
|
5
|
+
get IsVisible() {
|
|
6
|
+
return this._visible.value === true;
|
|
7
|
+
}
|
|
8
|
+
Toggle() {
|
|
9
|
+
this._visible.value = !this._visible.value;
|
|
10
|
+
}
|
|
11
|
+
Close() {
|
|
12
|
+
this._visible.value = false;
|
|
13
|
+
}
|
|
14
|
+
Open() {
|
|
15
|
+
this._visible.value = true;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const LkNavMenuService = new NavMenuService();
|
|
20
|
+
|
|
21
|
+
export const UseNavMenuService = () => LkNavMenuService;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<body>
|
|
4
|
+
<script>
|
|
5
|
+
const query = new URLSearchParams(location.href.split('#')[1]);
|
|
6
|
+
const state = query.get('state');
|
|
7
|
+
const code = query.get('code');
|
|
8
|
+
const error = query.get('error');
|
|
9
|
+
parent.postMessage(
|
|
10
|
+
{ action: 'sf-oidc-state', code, state, error },
|
|
11
|
+
location.origin
|
|
12
|
+
);
|
|
13
|
+
</script>
|
|
14
|
+
</body>
|
|
15
|
+
</html>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@import "./src/components/layout";
|
|
2
|
+
@import "./src/components/themetoggle";
|
|
3
|
+
@import "./src/components/internal_icon_button";
|
|
4
|
+
@import "./src/components/svg_icon";
|
|
5
|
+
@import "./src/components/loading-circle";
|
|
6
|
+
@import "./src/components/icon";
|
|
7
|
+
@import "./src/components/progress-circular";
|
|
8
|
+
@import "./src/components/tooltip";
|
|
9
|
+
@import "./src/components/toast";
|
|
10
|
+
@import "./src/components/drawer";
|
|
11
|
+
@import "./src/components/mask";
|
|
12
|
+
@import "./src/components/navmenulink";
|
|
13
|
+
@import "./src/components/button";
|
|
14
|
+
@import "./src/components/textfield";
|
|
15
|
+
@import "./src/components/numpad";
|
|
16
|
+
@import "./src/components/content";
|
|
17
|
+
@import "./src/components/scrollToTop";
|
|
18
|
+
@import "./src/components/datefield";
|
|
19
|
+
@import "./src/components/checkbox";
|
|
20
|
+
@import "./src/components/mark";
|
|
21
|
+
@import "./src/components/select";
|
|
22
|
+
@import "./src/sweetalert/sweetalert";
|
|
@@ -0,0 +1,441 @@
|
|
|
1
|
+
@keyframes fadein {
|
|
2
|
+
0% {
|
|
3
|
+
opacity: 0;
|
|
4
|
+
}
|
|
5
|
+
100% {
|
|
6
|
+
opacity: 1;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@keyframes fadeout {
|
|
11
|
+
0% {
|
|
12
|
+
opacity: 1;
|
|
13
|
+
}
|
|
14
|
+
100% {
|
|
15
|
+
opacity: 0;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@keyframes scalein {
|
|
20
|
+
0% {
|
|
21
|
+
opacity: 0;
|
|
22
|
+
transform: scaleY(0.8);
|
|
23
|
+
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
|
|
24
|
+
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
|
25
|
+
}
|
|
26
|
+
100% {
|
|
27
|
+
opacity: 1;
|
|
28
|
+
transform: scaleY(1);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@keyframes slidedown {
|
|
33
|
+
0% {
|
|
34
|
+
max-height: 0;
|
|
35
|
+
}
|
|
36
|
+
100% {
|
|
37
|
+
max-height: auto;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@keyframes slideup {
|
|
42
|
+
0% {
|
|
43
|
+
max-height: 1000px;
|
|
44
|
+
}
|
|
45
|
+
100% {
|
|
46
|
+
max-height: 0;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@keyframes fadeinleft {
|
|
51
|
+
0% {
|
|
52
|
+
opacity: 0;
|
|
53
|
+
transform: translateX(-100%);
|
|
54
|
+
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
|
|
55
|
+
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
|
56
|
+
}
|
|
57
|
+
100% {
|
|
58
|
+
opacity: 1;
|
|
59
|
+
transform: translateX(0%);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@keyframes fadeoutleft {
|
|
64
|
+
0% {
|
|
65
|
+
opacity: 1;
|
|
66
|
+
transform: translateX(0%);
|
|
67
|
+
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
|
|
68
|
+
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
|
69
|
+
}
|
|
70
|
+
100% {
|
|
71
|
+
opacity: 0;
|
|
72
|
+
transform: translateX(-100%);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@keyframes fadeinright {
|
|
77
|
+
0% {
|
|
78
|
+
opacity: 0;
|
|
79
|
+
transform: translateX(100%);
|
|
80
|
+
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
|
|
81
|
+
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
|
82
|
+
}
|
|
83
|
+
100% {
|
|
84
|
+
opacity: 1;
|
|
85
|
+
transform: translateX(0%);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@keyframes fadeoutright {
|
|
90
|
+
0% {
|
|
91
|
+
opacity: 1;
|
|
92
|
+
transform: translateX(0%);
|
|
93
|
+
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
|
|
94
|
+
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
|
95
|
+
}
|
|
96
|
+
100% {
|
|
97
|
+
opacity: 0;
|
|
98
|
+
transform: translateX(100%);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@keyframes fadeinup {
|
|
103
|
+
0% {
|
|
104
|
+
opacity: 0;
|
|
105
|
+
transform: translateY(-100%);
|
|
106
|
+
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
|
|
107
|
+
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
|
108
|
+
}
|
|
109
|
+
100% {
|
|
110
|
+
opacity: 1;
|
|
111
|
+
transform: translateY(0%);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
@keyframes fadeoutup {
|
|
116
|
+
0% {
|
|
117
|
+
opacity: 1;
|
|
118
|
+
transform: translateY(0%);
|
|
119
|
+
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
|
|
120
|
+
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
|
121
|
+
}
|
|
122
|
+
100% {
|
|
123
|
+
opacity: 0;
|
|
124
|
+
transform: translateY(-100%);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@keyframes fadeindown {
|
|
129
|
+
0% {
|
|
130
|
+
opacity: 0;
|
|
131
|
+
transform: translateY(100%);
|
|
132
|
+
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
|
|
133
|
+
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
|
134
|
+
}
|
|
135
|
+
100% {
|
|
136
|
+
opacity: 1;
|
|
137
|
+
transform: translateY(0%);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@keyframes fadeoutdown {
|
|
142
|
+
0% {
|
|
143
|
+
opacity: 1;
|
|
144
|
+
transform: translateY(0%);
|
|
145
|
+
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
|
|
146
|
+
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
|
147
|
+
}
|
|
148
|
+
100% {
|
|
149
|
+
opacity: 0;
|
|
150
|
+
transform: translateY(100%);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
@keyframes animate-width {
|
|
155
|
+
0% {
|
|
156
|
+
width: 0;
|
|
157
|
+
}
|
|
158
|
+
100% {
|
|
159
|
+
width: 100%;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.#{$prefix}fadein {
|
|
164
|
+
animation: fadein 0.15s linear;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.#{$prefix}fadeout {
|
|
168
|
+
animation: fadeout 0.15s linear;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.#{$prefix}slidedown {
|
|
172
|
+
animation: slidedown 0.45s ease-in-out;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.#{$prefix}slideup {
|
|
176
|
+
animation: slideup 0.45s cubic-bezier(0, 1, 0, 1);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.#{$prefix}scalein {
|
|
180
|
+
animation: scalein 0.15s linear;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.#{$prefix}fadeinleft {
|
|
184
|
+
animation: fadeinleft 0.15s linear;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.#{$prefix}fadeoutleft {
|
|
188
|
+
animation: fadeoutleft 0.15s linear;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.#{$prefix}fadeinright {
|
|
192
|
+
animation: fadeinright 0.15s linear;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.#{$prefix}fadeoutright {
|
|
196
|
+
animation: fadeoutright 0.15s linear;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.#{$prefix}fadeinup {
|
|
200
|
+
animation: fadeinup 0.15s linear;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.#{$prefix}fadeoutup {
|
|
204
|
+
animation: fadeoutup 0.15s linear;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.#{$prefix}fadeindown {
|
|
208
|
+
animation: fadeindown 0.15s linear;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.#{$prefix}fadeoutdown {
|
|
212
|
+
animation: fadeoutdown 0.15s linear;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.#{$prefix}animate-width {
|
|
216
|
+
animation: animate-width 1000ms linear;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.#{$prefix}spin {
|
|
220
|
+
animation: spin 2s linear infinite;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
$animation-duration-props: (
|
|
224
|
+
"animation-duration-100": "100ms",
|
|
225
|
+
"animation-duration-150": "150ms",
|
|
226
|
+
"animation-duration-200": "200ms",
|
|
227
|
+
"animation-duration-300": "300ms",
|
|
228
|
+
"animation-duration-400": "400ms",
|
|
229
|
+
"animation-duration-500": "500ms",
|
|
230
|
+
"animation-duration-1000": "1000ms",
|
|
231
|
+
"animation-duration-2000": "2000ms",
|
|
232
|
+
"animation-duration-3000": "3000ms",
|
|
233
|
+
);
|
|
234
|
+
|
|
235
|
+
$animation-delay-props: (
|
|
236
|
+
"animation-delay-100": "100ms",
|
|
237
|
+
"animation-delay-150": "150ms",
|
|
238
|
+
"animation-delay-200": "200ms",
|
|
239
|
+
"animation-delay-300": "300ms",
|
|
240
|
+
"animation-delay-400": "400ms",
|
|
241
|
+
"animation-delay-500": "500ms",
|
|
242
|
+
"animation-delay-1000": "1000ms",
|
|
243
|
+
);
|
|
244
|
+
|
|
245
|
+
$animation-iteration-props: (
|
|
246
|
+
"animation-iteration-1": "1",
|
|
247
|
+
"animation-iteration-2": "2",
|
|
248
|
+
"animation-iteration-infinite": "infinite",
|
|
249
|
+
);
|
|
250
|
+
|
|
251
|
+
$animation-timing-props: (
|
|
252
|
+
"animation-linear": "linear",
|
|
253
|
+
"animation-ease-in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
254
|
+
"animation-ease-out": "cubic-bezier(0, 0, 0.2, 1)",
|
|
255
|
+
"animation-ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
256
|
+
);
|
|
257
|
+
|
|
258
|
+
$animation-fill-props: (
|
|
259
|
+
"animation-fill-none": "none",
|
|
260
|
+
"animation-fill-forwards": "forwards",
|
|
261
|
+
"animation-fill-backwards": "backwards",
|
|
262
|
+
"animation-fill-both": "both",
|
|
263
|
+
);
|
|
264
|
+
|
|
265
|
+
@include style-class("animation-duration", $animation-duration-props);
|
|
266
|
+
@include style-class("animation-delay", $animation-delay-props);
|
|
267
|
+
@include style-class(
|
|
268
|
+
"animation-iteration-count",
|
|
269
|
+
$animation-iteration-props
|
|
270
|
+
);
|
|
271
|
+
@include style-class(
|
|
272
|
+
"animation-timing-function",
|
|
273
|
+
$animation-timing-props
|
|
274
|
+
);
|
|
275
|
+
@include style-class("animation-fill-mode", $animation-fill-props);
|
|
276
|
+
|
|
277
|
+
@keyframes spin {
|
|
278
|
+
0% {
|
|
279
|
+
transform: rotate(0deg);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
100% {
|
|
283
|
+
transform: rotate(360deg);
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
@keyframes sf-loading-circle-circle-dash {
|
|
288
|
+
0% {
|
|
289
|
+
stroke-dasharray: 1, 200;
|
|
290
|
+
stroke-dashoffset: 0;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
50% {
|
|
294
|
+
stroke-dasharray: 89, 200;
|
|
295
|
+
stroke-dashoffset: -35px;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
100% {
|
|
299
|
+
stroke-dasharray: 89, 200;
|
|
300
|
+
stroke-dashoffset: -124px;
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
@keyframes sf-progress-circular-keyframes-circular-rotate {
|
|
305
|
+
0% {
|
|
306
|
+
transform-origin: 50% 50%;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
100% {
|
|
310
|
+
transform: rotate(360deg);
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
@keyframes sf-progress-circular-keyframes-circular-dash {
|
|
315
|
+
0% {
|
|
316
|
+
stroke-dasharray: 1px, 200px;
|
|
317
|
+
stroke-dashoffset: 0px;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
50% {
|
|
321
|
+
stroke-dasharray: 100px, 200px;
|
|
322
|
+
stroke-dashoffset: -15px;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
100% {
|
|
326
|
+
stroke-dasharray: 100px, 200px;
|
|
327
|
+
stroke-dashoffset: -125px;
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
@keyframes sf-progress-linear-horizontal-keyframes-indeterminate1 {
|
|
332
|
+
0% {
|
|
333
|
+
left: -35%;
|
|
334
|
+
right: 100%;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
60% {
|
|
338
|
+
left: 100%;
|
|
339
|
+
right: -90%;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
100% {
|
|
343
|
+
left: 100%;
|
|
344
|
+
right: -90%;
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
@keyframes sf-progress-linear-horizontal-keyframes-indeterminate2 {
|
|
349
|
+
0% {
|
|
350
|
+
left: -200%;
|
|
351
|
+
right: 100%;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
60% {
|
|
355
|
+
left: 107%;
|
|
356
|
+
right: -8%;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
100% {
|
|
360
|
+
left: 107%;
|
|
361
|
+
right: -8%;
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
@keyframes sf-progress-linear-horizontal-keyframes-buffer {
|
|
366
|
+
0% {
|
|
367
|
+
opacity: 1;
|
|
368
|
+
background-position: 0 -23px;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
50% {
|
|
372
|
+
opacity: 0;
|
|
373
|
+
background-position: 0 -23px;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
100% {
|
|
377
|
+
opacity: 1;
|
|
378
|
+
background-position: -200px -23px;
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
@keyframes sf-progress-linear-vertical-keyframes-indeterminate1 {
|
|
383
|
+
0% {
|
|
384
|
+
bottom: -35%;
|
|
385
|
+
top: 100%;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
60% {
|
|
389
|
+
bottom: 100%;
|
|
390
|
+
top: -90%;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
100% {
|
|
394
|
+
bottom: 100%;
|
|
395
|
+
top: -90%;
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
@keyframes sf-progress-linear-vertical-keyframes-indeterminate2 {
|
|
400
|
+
0% {
|
|
401
|
+
bottom: -200%;
|
|
402
|
+
top: 100%;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
60% {
|
|
406
|
+
bottom: 107%;
|
|
407
|
+
top: -8%;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
100% {
|
|
411
|
+
bottom: 107%;
|
|
412
|
+
top: -8%;
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
@keyframes sf-progress-linear-vertical-keyframes-buffer {
|
|
417
|
+
0% {
|
|
418
|
+
opacity: 1;
|
|
419
|
+
background-position: -23px 0;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
50% {
|
|
423
|
+
opacity: 0;
|
|
424
|
+
background-position: -23px 0;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
100% {
|
|
428
|
+
opacity: 1;
|
|
429
|
+
background-position: -23px -200px;
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
@keyframes sf-progress-linear-striped-loading {
|
|
434
|
+
0% {
|
|
435
|
+
background-position: 0 0;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
100% {
|
|
439
|
+
background-position: 300px 0;
|
|
440
|
+
}
|
|
441
|
+
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
$flex-direction: (
|
|
2
|
+
"flex-row": row,
|
|
3
|
+
"flex-row-reverse": row-reverse,
|
|
4
|
+
"flex-column": column,
|
|
5
|
+
"flex-column-reverse": column-reverse,
|
|
6
|
+
);
|
|
7
|
+
|
|
8
|
+
$flex-wrap: (
|
|
9
|
+
"flex-wrap": wrap,
|
|
10
|
+
"flex-wrap-reverse": wrap-reverse,
|
|
11
|
+
"flex-nowrap": nowrap,
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
$flex-justify-content: (
|
|
15
|
+
"justify-content-start": "flex-start",
|
|
16
|
+
"justify-content-end": "flex-end",
|
|
17
|
+
"justify-content-center": "center",
|
|
18
|
+
"justify-content-between": "space-between",
|
|
19
|
+
"justify-content-around": "space-around",
|
|
20
|
+
"justify-content-evenly": "space-evenly",
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
$flex-align-content: (
|
|
24
|
+
"align-content-start": "flex-start",
|
|
25
|
+
"align-content-end": "flex-end",
|
|
26
|
+
"align-content-center": "center",
|
|
27
|
+
"align-content-between": "space-between",
|
|
28
|
+
"align-content-around": "space-around",
|
|
29
|
+
"align-content-evenly": "space-evenly",
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
$flex-align-items: (
|
|
33
|
+
"align-items-stretch": "stretch",
|
|
34
|
+
"align-items-start": "flex-start",
|
|
35
|
+
"align-items-center": "center",
|
|
36
|
+
"align-items-end": "flex-end",
|
|
37
|
+
"align-items-baseline": "baseline",
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
$flex-align-self: (
|
|
41
|
+
"align-self-auto": "auto",
|
|
42
|
+
"align-self-start": "flex-start",
|
|
43
|
+
"align-self-end": "flex-end",
|
|
44
|
+
"align-self-center": "center",
|
|
45
|
+
"align-self-stretch": "stretch",
|
|
46
|
+
"align-self-baseline": "baseline",
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
$flex-order: (
|
|
50
|
+
"flex-order-0": 0,
|
|
51
|
+
"flex-order-1": 1,
|
|
52
|
+
"flex-order-2": 2,
|
|
53
|
+
"flex-order-3": 3,
|
|
54
|
+
"flex-order-4": 4,
|
|
55
|
+
"flex-order-5": 5,
|
|
56
|
+
"flex-order-6": 6,
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
$flex-shorthand: (
|
|
60
|
+
"flex-1": 1 1 0%,
|
|
61
|
+
"flex-auto": 1 1 auto,
|
|
62
|
+
"flex-initial": 0 1 auto,
|
|
63
|
+
"flex-none": none,
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
$flex-grow: (
|
|
67
|
+
"flex-grow-0": 0,
|
|
68
|
+
"flex-grow-1": 1,
|
|
69
|
+
);
|
|
70
|
+
|
|
71
|
+
$flex-shrink: (
|
|
72
|
+
"flex-shrink-0": 0,
|
|
73
|
+
"flex-shrink-1": 1,
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
@include style-class("flex-direction", $flex-direction, true);
|
|
77
|
+
@include style-class("flex-wrap", $flex-wrap, true);
|
|
78
|
+
@include style-class("justify-content", $flex-justify-content, true);
|
|
79
|
+
@include style-class("align-content", $flex-align-content, true);
|
|
80
|
+
@include style-class("align-items", $flex-align-items, true);
|
|
81
|
+
@include style-class("align-self", $flex-align-self, true);
|
|
82
|
+
@include style-class("order", $flex-order, true);
|
|
83
|
+
@include style-class("flex", $flex-shorthand, true);
|
|
84
|
+
@include style-class("flex-grow", $flex-grow, true);
|
|
85
|
+
@include style-class("flex-shrink", $flex-shrink, true);
|