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
|
@font-face {
font-family: 'Plex';
src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff') format('woff');
font-weight: 200;
}
@font-face {
font-family: 'Plex';
src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff') format('woff');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'Plex';
src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff') format('woff');
font-weight: 400;
}
@font-face {
font-family: 'Plex';
src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Plex';
src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff') format('woff');
font-weight: 700;
}
@font-face {
font-family: 'Plex';
src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff') format('woff');
font-weight: 700;
font-style: italic;
}
// IBM Plex with Bootstrap default as fallbacks
// https://getbootstrap.com/docs/4.4/content/reboot/#native-font-stack
$font-family-base: 'Plex', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
// IBM theme colors
$blue: #0F62FE;
$red: #DA1E28;
$green: #24A146;
$yellow: #F1C21B;
$primary: $blue;
$danger: $red;
$success: $green;
$warning: $yellow;
// Validation icons
$enable-validation-icons: true;
$form-feedback-icon-valid: none;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$danger}' width='32' height='32' viewbox='0 0 32 32'><path fill='none' d='M0 0h32v32H0z'/><path d='M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14 14-6.3 14-14S23.7 2 16 2zm5.4 21L16 17.6 10.6 23 9 21.4l5.4-5.4L9 10.6 10.6 9l5.4 5.4L21.4 9l1.6 1.6-5.4 5.4 5.4 5.4-1.6 1.6z'/></svg>");
// Progress loading bar variables
$loading-color-0: #552de5;
$loading-color-50: $primary;
$loading-color-100: #2dbde5;
// Progress loading bar gradient
.progress {
height: 0.8rem!important;
}
.progress-bar {
background: linear-gradient(
90deg,
$loading-color-0,
$loading-color-50,
$loading-color-100
);
background-size: 200% 200%;
animation: gradient 3s $standard-easing--productive infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
|
