1@font-face {
2  font-family: 'Plex';
3  src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff') format('woff');
4  font-weight: 200;
5}
6@font-face {
7  font-family: 'Plex';
8  src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff') format('woff');
9  font-weight: 200;
10  font-style: italic;
11}
12@font-face {
13  font-family: 'Plex';
14  src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff') format('woff');
15  font-weight: 400;
16}
17@font-face {
18  font-family: 'Plex';
19  src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff') format('woff');
20  font-weight: 400;
21  font-style: italic;
22}
23@font-face {
24  font-family: 'Plex';
25  src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff') format('woff');
26  font-weight: 700;
27}
28@font-face {
29  font-family: 'Plex';
30  src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff') format('woff');
31  font-weight: 700;
32  font-style: italic;
33}
34
35// IBM Plex with Bootstrap default as fallbacks
36// https://getbootstrap.com/docs/4.4/content/reboot/#native-font-stack
37
38$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";
39
40// IBM theme colors
41$blue: #0F62FE;
42$red: #DA1E28;
43$green: #24A146;
44$yellow: #F1C21B;
45
46$primary: $blue;
47$danger: $red;
48$success: $green;
49$warning: $yellow;
50
51// Validation icons
52$enable-validation-icons: true;
53$form-feedback-icon-valid: none;
54$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>");
55
56// Progress loading bar variables
57$loading-color-0: #552de5;
58$loading-color-50: $primary;
59$loading-color-100: #2dbde5;
60
61// Progress loading bar gradient
62.progress {
63  height: 0.8rem!important;
64}
65.progress-bar {
66  background: linear-gradient(
67    90deg,
68    $loading-color-0,
69    $loading-color-50,
70    $loading-color-100
71  );
72  background-size: 200% 200%;
73  animation: gradient 3s $standard-easing--productive infinite;
74}
75@keyframes gradient {
76  0% {
77    background-position: 0% 50%;
78  }
79  50% {
80    background-position: 100% 50%;
81  }
82  100% {
83    background-position: 0% 50%;
84  }
85}