@syncfusion/ej2-splitbuttons 33.2.3 → 33.2.6

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,6 +1,6 @@
1
1
  /*!
2
2
  * filename: ej2-splitbuttons.min.js
3
- * version : 33.2.3
3
+ * version : 33.2.6
4
4
  * Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: ej2-splitbuttons.umd.min.js
3
- * version : 33.2.3
3
+ * version : 33.2.6
4
4
  * Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: ej2-splitbuttons.min.js
3
- * version : 33.2.3
3
+ * version : 33.2.6
4
4
  * Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: index.d.ts
3
- * version : 33.2.3
3
+ * version : 33.2.6
4
4
  * Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@syncfusion/ej2-splitbuttons",
3
- "version": "33.2.3",
3
+ "version": "33.2.6",
4
4
  "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
5
5
  "author": "Syncfusion Inc.",
6
6
  "license": "SEE LICENSE IN license",
@@ -9,7 +9,7 @@
9
9
  "es2015": "./dist/es6/ej2-splitbuttons.es5.js",
10
10
  "dependencies": {
11
11
  "@syncfusion/ej2-base": "~33.2.3",
12
- "@syncfusion/ej2-popups": "~33.2.3"
12
+ "@syncfusion/ej2-popups": "~33.2.5"
13
13
  },
14
14
  "devDependencies": {},
15
15
  "keywords": [
@@ -2416,13 +2416,20 @@
2416
2416
  fill: var(--color-sf-utility-secondary-text-color);
2417
2417
  stroke: var(--color-sf-utility-secondary-text-color);
2418
2418
  }
2419
+ .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2420
+ stroke-width: 3px;
2421
+ }
2419
2422
  .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2420
2423
  stroke: var(--color-sf-utility-secondary-text-color);
2424
+ stroke-width: 3px;
2421
2425
  }
2422
2426
  .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
2423
2427
  fill: var(--color-sf-on-brand-solid-primary);
2424
2428
  stroke: var(--color-sf-on-brand-solid-primary);
2425
2429
  }
2430
+ .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2431
+ stroke: rgba(255, 255, 255, 0.2);
2432
+ }
2426
2433
  .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2427
2434
  stroke: var(--color-sf-on-brand-solid-primary);
2428
2435
  }
@@ -2430,20 +2437,19 @@
2430
2437
  fill: var(--color-sf-brand-solid-primary);
2431
2438
  stroke: var(--color-sf-brand-solid-primary);
2432
2439
  }
2433
- .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2434
- stroke: var(--color-sf-base-white);
2435
- }
2436
- .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
2437
- fill: var(--color-sf-brand-solid-primary);
2438
- stroke: var(--color-sf-brand-solid-primary);
2440
+ .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2441
+ stroke: rgba(255, 255, 255, 0.2);
2439
2442
  }
2440
- .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2441
- stroke: var(--color-sf-on-brand-solid-primary);
2443
+ .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2444
+ stroke: #fff;
2442
2445
  }
2443
2446
  .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
2444
2447
  fill: var(--color-sf-base-white);
2445
2448
  stroke: var(--color-sf-base-white);
2446
2449
  }
2450
+ .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2451
+ stroke: rgba(255, 255, 255, 0.2);
2452
+ }
2447
2453
  .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2448
2454
  stroke: var(--color-sf-base-white);
2449
2455
  }
@@ -2451,20 +2457,19 @@
2451
2457
  fill: #057647;
2452
2458
  stroke: #057647;
2453
2459
  }
2454
- .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2455
- stroke: #057647;
2456
- }
2457
- .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
2458
- fill: #057647;
2459
- stroke: #057647;
2460
+ .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2461
+ stroke: rgba(255, 255, 255, 0.2);
2460
2462
  }
2461
- .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2462
- stroke: var(--color-sf-base-white);
2463
+ .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2464
+ stroke: #fff;
2463
2465
  }
2464
2466
  .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
2465
2467
  fill: var(--color-sf-utility-info-text);
2466
2468
  stroke: var(--color-sf-utility-info-text);
2467
2469
  }
2470
+ .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2471
+ stroke: rgba(104, 64, 198, 0.2);
2472
+ }
2468
2473
  .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2469
2474
  stroke: var(--color-sf-utility-info-text);
2470
2475
  }
@@ -2472,20 +2477,19 @@
2472
2477
  fill: var(--color-sf-bg-primary);
2473
2478
  stroke: var(--color-sf-bg-primary);
2474
2479
  }
2475
- .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2476
- stroke: var(--color-sf-bg-primary);
2477
- }
2478
- .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
2479
- fill: var(--color-sf-bg-primary);
2480
- stroke: var(--color-sf-bg-primary);
2480
+ .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2481
+ stroke: rgba(255, 255, 255, 0.2);
2481
2482
  }
2482
- .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2483
- stroke: var(--color-sf-utility-info-text);
2483
+ .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2484
+ stroke: #fff;
2484
2485
  }
2485
2486
  .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
2486
2487
  fill: var(--color-sf-base-white);
2487
2488
  stroke: var(--color-sf-base-white);
2488
2489
  }
2490
+ .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2491
+ stroke: rgba(255, 255, 255, 0.2);
2492
+ }
2489
2493
  .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2490
2494
  stroke: var(--color-sf-base-white);
2491
2495
  }
@@ -2494,22 +2498,18 @@
2494
2498
  stroke: #b54707;
2495
2499
  }
2496
2500
  .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2497
- stroke: #b54707;
2501
+ stroke: rgba(255, 255, 255, 0.2);
2498
2502
  }
2499
2503
  .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2500
- stroke: #b54707;
2501
- }
2502
- .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
2503
- fill: #b54707;
2504
- stroke: #b54707;
2505
- }
2506
- .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2507
- stroke: var(--color-sf-base-white);
2504
+ stroke: #fff;
2508
2505
  }
2509
2506
  .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
2510
2507
  fill: var(--color-sf-base-white);
2511
2508
  stroke: var(--color-sf-base-white);
2512
2509
  }
2510
+ .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2511
+ stroke: rgba(255, 255, 255, 0.2);
2512
+ }
2513
2513
  .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2514
2514
  stroke: var(--color-sf-base-white);
2515
2515
  }
@@ -2517,20 +2517,19 @@
2517
2517
  fill: #d92c20;
2518
2518
  stroke: #d92c20;
2519
2519
  }
2520
- .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2521
- stroke: #d92c20;
2520
+ .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2521
+ stroke: rgba(255, 255, 255, 0.2);
2522
2522
  }
2523
- .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
2524
- fill: #d92c20;
2525
- stroke: #d92c20;
2526
- }
2527
- .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2528
- stroke: var(--color-sf-base-white);
2523
+ .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2524
+ stroke: #fff;
2529
2525
  }
2530
2526
  .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg {
2531
2527
  fill: var(--color-sf-brand-solid-primary);
2532
2528
  stroke: var(--color-sf-brand-solid-primary);
2533
2529
  }
2530
+ .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2531
+ stroke: rgba(126, 86, 216, 0.2);
2532
+ }
2534
2533
  .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2535
2534
  stroke: var(--color-sf-brand-solid-primary);
2536
2535
  }
@@ -2538,6 +2537,9 @@
2538
2537
  fill: #057647;
2539
2538
  stroke: #057647;
2540
2539
  }
2540
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2541
+ stroke: rgba(5, 118, 71, 0.2);
2542
+ }
2541
2543
  .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2542
2544
  stroke: #057647;
2543
2545
  }
@@ -2545,6 +2547,9 @@
2545
2547
  fill: var(--color-sf-bg-primary);
2546
2548
  stroke: var(--color-sf-bg-primary);
2547
2549
  }
2550
+ .e-progress-btn.e-outline.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2551
+ stroke: rgba(255, 255, 255, 0.2);
2552
+ }
2548
2553
  .e-progress-btn.e-outline.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2549
2554
  stroke: var(--color-sf-bg-primary);
2550
2555
  }
@@ -2552,6 +2557,9 @@
2552
2557
  fill: #b54707;
2553
2558
  stroke: #b54707;
2554
2559
  }
2560
+ .e-progress-btn.e-outline.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2561
+ stroke: rgba(181, 71, 7, 0.2);
2562
+ }
2555
2563
  .e-progress-btn.e-outline.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2556
2564
  stroke: #b54707;
2557
2565
  }
@@ -2559,6 +2567,9 @@
2559
2567
  fill: #d92c20;
2560
2568
  stroke: #d92c20;
2561
2569
  }
2570
+ .e-progress-btn.e-outline.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2571
+ stroke: rgba(217, 44, 32, 0.2);
2572
+ }
2562
2573
  .e-progress-btn.e-outline.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2563
2574
  stroke: #d92c20;
2564
2575
  }
@@ -2566,6 +2577,9 @@
2566
2577
  fill: var(--color-sf-brand-primary);
2567
2578
  stroke: var(--color-sf-brand-primary);
2568
2579
  }
2580
+ .e-progress-btn.e-link .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2581
+ stroke: rgba(126, 86, 216, 0.2);
2582
+ }
2569
2583
  .e-progress-btn.e-link .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2570
2584
  stroke: var(--color-sf-brand-primary);
2571
2585
  }
@@ -2584,25 +2598,52 @@
2584
2598
  background: rgba(var(--color-sf-fg-secondary), 0.2);
2585
2599
  }
2586
2600
 
2587
- *.e-flat.e-primary .e-progress,
2601
+ *.e-flat.e-primary .e-progress {
2602
+ background: rgba(255, 255, 255, 0.2);
2603
+ }
2604
+ *.e-flat.e-success .e-progress {
2605
+ background: rgba(255, 255, 255, 0.2);
2606
+ }
2607
+ *.e-flat.e-info .e-progress {
2608
+ background: rgba(104, 64, 198, 0.2);
2609
+ }
2610
+ *.e-flat.e-warning .e-progress {
2611
+ background: rgba(255, 255, 255, 0.2);
2612
+ }
2613
+ *.e-flat.e-danger .e-progress {
2614
+ background: rgba(255, 255, 255, 0.2);
2615
+ }
2616
+
2617
+ *.e-outline:not(:focus).e-primary .e-progress {
2618
+ background: rgba(126, 86, 216, 0.2);
2619
+ }
2620
+ *.e-outline:not(:focus).e-success .e-progress {
2621
+ background: rgba(5, 118, 71, 0.2);
2622
+ }
2623
+ *.e-outline:not(:focus).e-info .e-progress {
2624
+ background: rgba(255, 255, 255, 0.2);
2625
+ }
2626
+ *.e-outline:not(:focus).e-warning .e-progress {
2627
+ background: rgba(181, 71, 7, 0.2);
2628
+ }
2629
+ *.e-outline:not(:focus).e-danger .e-progress {
2630
+ background: rgba(217, 44, 32, 0.2);
2631
+ }
2632
+
2588
2633
  *.e-flat:not(:focus).e-primary .e-progress {
2589
- background: rgba(var(--color-sf-on-brand-solid-primary), 1);
2634
+ background: rgba(126, 86, 216, 0.2);
2590
2635
  }
2591
- *.e-flat.e-success .e-progress,
2592
2636
  *.e-flat:not(:focus).e-success .e-progress {
2593
- background: rgba(var(--color-sf-base-white), 1);
2637
+ background: rgba(5, 118, 71, 0.2);
2594
2638
  }
2595
- *.e-flat.e-info .e-progress,
2596
2639
  *.e-flat:not(:focus).e-info .e-progress {
2597
- background: rgba(var(--color-sf-utility-info-text), 1);
2640
+ background: rgba(255, 255, 255, 0.2);
2598
2641
  }
2599
- *.e-flat.e-warning .e-progress,
2600
2642
  *.e-flat:not(:focus).e-warning .e-progress {
2601
- background: rgba(var(--color-sf-base-white), 1);
2643
+ background: rgba(181, 71, 7, 0.2);
2602
2644
  }
2603
- *.e-flat.e-danger .e-progress,
2604
2645
  *.e-flat:not(:focus).e-danger .e-progress {
2605
- background: rgba(var(--color-sf-base-white), 1);
2646
+ background: rgba(217, 44, 32, 0.2);
2606
2647
  }
2607
2648
 
2608
2649
  .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
package/styles/bds.css CHANGED
@@ -2842,13 +2842,20 @@
2842
2842
  fill: var(--color-sf-utility-secondary-text-color);
2843
2843
  stroke: var(--color-sf-utility-secondary-text-color);
2844
2844
  }
2845
+ .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2846
+ stroke-width: 3px;
2847
+ }
2845
2848
  .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2846
2849
  stroke: var(--color-sf-utility-secondary-text-color);
2850
+ stroke-width: 3px;
2847
2851
  }
2848
2852
  .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
2849
2853
  fill: var(--color-sf-on-brand-solid-primary);
2850
2854
  stroke: var(--color-sf-on-brand-solid-primary);
2851
2855
  }
2856
+ .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2857
+ stroke: rgba(255, 255, 255, 0.2);
2858
+ }
2852
2859
  .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2853
2860
  stroke: var(--color-sf-on-brand-solid-primary);
2854
2861
  }
@@ -2856,20 +2863,19 @@
2856
2863
  fill: var(--color-sf-brand-solid-primary);
2857
2864
  stroke: var(--color-sf-brand-solid-primary);
2858
2865
  }
2859
- .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2860
- stroke: var(--color-sf-base-white);
2861
- }
2862
- .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
2863
- fill: var(--color-sf-brand-solid-primary);
2864
- stroke: var(--color-sf-brand-solid-primary);
2866
+ .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2867
+ stroke: rgba(255, 255, 255, 0.2);
2865
2868
  }
2866
- .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2867
- stroke: var(--color-sf-on-brand-solid-primary);
2869
+ .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2870
+ stroke: #fff;
2868
2871
  }
2869
2872
  .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
2870
2873
  fill: var(--color-sf-base-white);
2871
2874
  stroke: var(--color-sf-base-white);
2872
2875
  }
2876
+ .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2877
+ stroke: rgba(255, 255, 255, 0.2);
2878
+ }
2873
2879
  .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2874
2880
  stroke: var(--color-sf-base-white);
2875
2881
  }
@@ -2877,20 +2883,19 @@
2877
2883
  fill: #057647;
2878
2884
  stroke: #057647;
2879
2885
  }
2880
- .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2881
- stroke: #057647;
2882
- }
2883
- .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
2884
- fill: #057647;
2885
- stroke: #057647;
2886
+ .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2887
+ stroke: rgba(255, 255, 255, 0.2);
2886
2888
  }
2887
- .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2888
- stroke: var(--color-sf-base-white);
2889
+ .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2890
+ stroke: #fff;
2889
2891
  }
2890
2892
  .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
2891
2893
  fill: var(--color-sf-utility-info-text);
2892
2894
  stroke: var(--color-sf-utility-info-text);
2893
2895
  }
2896
+ .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2897
+ stroke: rgba(104, 64, 198, 0.2);
2898
+ }
2894
2899
  .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2895
2900
  stroke: var(--color-sf-utility-info-text);
2896
2901
  }
@@ -2898,20 +2903,19 @@
2898
2903
  fill: var(--color-sf-bg-primary);
2899
2904
  stroke: var(--color-sf-bg-primary);
2900
2905
  }
2901
- .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2902
- stroke: var(--color-sf-bg-primary);
2903
- }
2904
- .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
2905
- fill: var(--color-sf-bg-primary);
2906
- stroke: var(--color-sf-bg-primary);
2906
+ .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2907
+ stroke: rgba(255, 255, 255, 0.2);
2907
2908
  }
2908
- .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2909
- stroke: var(--color-sf-utility-info-text);
2909
+ .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2910
+ stroke: #fff;
2910
2911
  }
2911
2912
  .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
2912
2913
  fill: var(--color-sf-base-white);
2913
2914
  stroke: var(--color-sf-base-white);
2914
2915
  }
2916
+ .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2917
+ stroke: rgba(255, 255, 255, 0.2);
2918
+ }
2915
2919
  .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2916
2920
  stroke: var(--color-sf-base-white);
2917
2921
  }
@@ -2920,22 +2924,18 @@
2920
2924
  stroke: #b54707;
2921
2925
  }
2922
2926
  .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2923
- stroke: #b54707;
2927
+ stroke: rgba(255, 255, 255, 0.2);
2924
2928
  }
2925
2929
  .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2926
- stroke: #b54707;
2927
- }
2928
- .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
2929
- fill: #b54707;
2930
- stroke: #b54707;
2931
- }
2932
- .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2933
- stroke: var(--color-sf-base-white);
2930
+ stroke: #fff;
2934
2931
  }
2935
2932
  .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
2936
2933
  fill: var(--color-sf-base-white);
2937
2934
  stroke: var(--color-sf-base-white);
2938
2935
  }
2936
+ .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2937
+ stroke: rgba(255, 255, 255, 0.2);
2938
+ }
2939
2939
  .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2940
2940
  stroke: var(--color-sf-base-white);
2941
2941
  }
@@ -2943,20 +2943,19 @@
2943
2943
  fill: #d92c20;
2944
2944
  stroke: #d92c20;
2945
2945
  }
2946
- .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2947
- stroke: #d92c20;
2946
+ .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2947
+ stroke: rgba(255, 255, 255, 0.2);
2948
2948
  }
2949
- .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
2950
- fill: #d92c20;
2951
- stroke: #d92c20;
2952
- }
2953
- .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2954
- stroke: var(--color-sf-base-white);
2949
+ .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2950
+ stroke: #fff;
2955
2951
  }
2956
2952
  .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg {
2957
2953
  fill: var(--color-sf-brand-solid-primary);
2958
2954
  stroke: var(--color-sf-brand-solid-primary);
2959
2955
  }
2956
+ .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2957
+ stroke: rgba(126, 86, 216, 0.2);
2958
+ }
2960
2959
  .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2961
2960
  stroke: var(--color-sf-brand-solid-primary);
2962
2961
  }
@@ -2964,6 +2963,9 @@
2964
2963
  fill: #057647;
2965
2964
  stroke: #057647;
2966
2965
  }
2966
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2967
+ stroke: rgba(5, 118, 71, 0.2);
2968
+ }
2967
2969
  .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2968
2970
  stroke: #057647;
2969
2971
  }
@@ -2971,6 +2973,9 @@
2971
2973
  fill: var(--color-sf-bg-primary);
2972
2974
  stroke: var(--color-sf-bg-primary);
2973
2975
  }
2976
+ .e-progress-btn.e-outline.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2977
+ stroke: rgba(255, 255, 255, 0.2);
2978
+ }
2974
2979
  .e-progress-btn.e-outline.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2975
2980
  stroke: var(--color-sf-bg-primary);
2976
2981
  }
@@ -2978,6 +2983,9 @@
2978
2983
  fill: #b54707;
2979
2984
  stroke: #b54707;
2980
2985
  }
2986
+ .e-progress-btn.e-outline.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2987
+ stroke: rgba(181, 71, 7, 0.2);
2988
+ }
2981
2989
  .e-progress-btn.e-outline.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2982
2990
  stroke: #b54707;
2983
2991
  }
@@ -2985,6 +2993,9 @@
2985
2993
  fill: #d92c20;
2986
2994
  stroke: #d92c20;
2987
2995
  }
2996
+ .e-progress-btn.e-outline.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle {
2997
+ stroke: rgba(217, 44, 32, 0.2);
2998
+ }
2988
2999
  .e-progress-btn.e-outline.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2989
3000
  stroke: #d92c20;
2990
3001
  }
@@ -2992,6 +3003,9 @@
2992
3003
  fill: var(--color-sf-brand-primary);
2993
3004
  stroke: var(--color-sf-brand-primary);
2994
3005
  }
3006
+ .e-progress-btn.e-link .e-spinner-pane .e-spinner-inner svg .e-path-circle {
3007
+ stroke: rgba(126, 86, 216, 0.2);
3008
+ }
2995
3009
  .e-progress-btn.e-link .e-spinner-pane .e-spinner-inner svg .e-path-arc {
2996
3010
  stroke: var(--color-sf-brand-primary);
2997
3011
  }
@@ -3010,25 +3024,52 @@
3010
3024
  background: rgba(var(--color-sf-fg-secondary), 0.2);
3011
3025
  }
3012
3026
 
3013
- *.e-flat.e-primary .e-progress,
3027
+ *.e-flat.e-primary .e-progress {
3028
+ background: rgba(255, 255, 255, 0.2);
3029
+ }
3030
+ *.e-flat.e-success .e-progress {
3031
+ background: rgba(255, 255, 255, 0.2);
3032
+ }
3033
+ *.e-flat.e-info .e-progress {
3034
+ background: rgba(104, 64, 198, 0.2);
3035
+ }
3036
+ *.e-flat.e-warning .e-progress {
3037
+ background: rgba(255, 255, 255, 0.2);
3038
+ }
3039
+ *.e-flat.e-danger .e-progress {
3040
+ background: rgba(255, 255, 255, 0.2);
3041
+ }
3042
+
3043
+ *.e-outline:not(:focus).e-primary .e-progress {
3044
+ background: rgba(126, 86, 216, 0.2);
3045
+ }
3046
+ *.e-outline:not(:focus).e-success .e-progress {
3047
+ background: rgba(5, 118, 71, 0.2);
3048
+ }
3049
+ *.e-outline:not(:focus).e-info .e-progress {
3050
+ background: rgba(255, 255, 255, 0.2);
3051
+ }
3052
+ *.e-outline:not(:focus).e-warning .e-progress {
3053
+ background: rgba(181, 71, 7, 0.2);
3054
+ }
3055
+ *.e-outline:not(:focus).e-danger .e-progress {
3056
+ background: rgba(217, 44, 32, 0.2);
3057
+ }
3058
+
3014
3059
  *.e-flat:not(:focus).e-primary .e-progress {
3015
- background: rgba(var(--color-sf-on-brand-solid-primary), 1);
3060
+ background: rgba(126, 86, 216, 0.2);
3016
3061
  }
3017
- *.e-flat.e-success .e-progress,
3018
3062
  *.e-flat:not(:focus).e-success .e-progress {
3019
- background: rgba(var(--color-sf-base-white), 1);
3063
+ background: rgba(5, 118, 71, 0.2);
3020
3064
  }
3021
- *.e-flat.e-info .e-progress,
3022
3065
  *.e-flat:not(:focus).e-info .e-progress {
3023
- background: rgba(var(--color-sf-utility-info-text), 1);
3066
+ background: rgba(255, 255, 255, 0.2);
3024
3067
  }
3025
- *.e-flat.e-warning .e-progress,
3026
3068
  *.e-flat:not(:focus).e-warning .e-progress {
3027
- background: rgba(var(--color-sf-base-white), 1);
3069
+ background: rgba(181, 71, 7, 0.2);
3028
3070
  }
3029
- *.e-flat.e-danger .e-progress,
3030
3071
  *.e-flat:not(:focus).e-danger .e-progress {
3031
- background: rgba(var(--color-sf-base-white), 1);
3072
+ background: rgba(217, 44, 32, 0.2);
3032
3073
  }
3033
3074
 
3034
3075
  .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
@@ -1692,8 +1692,8 @@
1692
1692
  .e-btn-group input:disabled + label.e-btn.e-outline.e-success,
1693
1693
  .e-css.e-btn-group .e-btn:disabled.e-outline.e-success,
1694
1694
  .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-success {
1695
- background: rgba(var(--color-sf-success-bg-color), 0.65);
1696
- border-color: rgba(var(--color-sf-success-bg-color), 0.65);
1695
+ background: transparent;
1696
+ border-color: rgba(var(--color-sf-success-shadow), 0.65);
1697
1697
  -webkit-box-shadow: none;
1698
1698
  box-shadow: none;
1699
1699
  color: var(--color-sf-success-bg-color-disabled);
@@ -1703,8 +1703,8 @@
1703
1703
  .e-btn-group input:disabled + label.e-btn.e-outline.e-info,
1704
1704
  .e-css.e-btn-group .e-btn:disabled.e-outline.e-info,
1705
1705
  .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-info {
1706
- background: var(--color-sf-content-bg-color);
1707
- border-color: rgba(var(--color-sf-info-bg-color), 0.65);
1706
+ background: transparent;
1707
+ border-color: rgba(var(--color-sf-info-shadow), 0.65);
1708
1708
  -webkit-box-shadow: none;
1709
1709
  box-shadow: none;
1710
1710
  color: var(--color-sf-info-bg-color-disabled);
@@ -1714,8 +1714,8 @@
1714
1714
  .e-btn-group input:disabled + label.e-btn.e-outline.e-warning,
1715
1715
  .e-css.e-btn-group .e-btn:disabled.e-outline.e-warning,
1716
1716
  .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-warning {
1717
- background: rgba(var(--color-sf-warning-bg-color), 0.65);
1718
- border-color: rgba(var(--color-sf-warning-bg-color), 0.65);
1717
+ background: transparent;
1718
+ border-color: rgba(var(--color-sf-warning-shadow), 0.65);
1719
1719
  -webkit-box-shadow: none;
1720
1720
  box-shadow: none;
1721
1721
  color: var(--color-sf-warning-bg-color-disabled);
@@ -1725,8 +1725,8 @@
1725
1725
  .e-btn-group input:disabled + label.e-btn.e-outline.e-danger,
1726
1726
  .e-css.e-btn-group .e-btn:disabled.e-outline.e-danger,
1727
1727
  .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-danger {
1728
- background: rgba(var(--color-sf-danger-bg-color), 0.65);
1729
- border-color: rgba(var(--color-sf-danger-bg-color), 0.65);
1728
+ background: transparent;
1729
+ border-color: rgba(var(--color-sf-danger-shadow), 0.65);
1730
1730
  -webkit-box-shadow: none;
1731
1731
  box-shadow: none;
1732
1732
  color: var(--color-sf-danger-bg-color-disabled);
@@ -1997,8 +1997,8 @@
1997
1997
  .e-btn-group input:disabled + label.e-btn.e-outline.e-success,
1998
1998
  .e-css.e-btn-group .e-btn:disabled.e-outline.e-success,
1999
1999
  .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-success {
2000
- background: rgba(var(--color-sf-success-bg-color), 0.65);
2001
- border-color: rgba(var(--color-sf-success-bg-color), 0.65);
2000
+ background: transparent;
2001
+ border-color: rgba(var(--color-sf-success-shadow), 0.65);
2002
2002
  -webkit-box-shadow: none;
2003
2003
  box-shadow: none;
2004
2004
  color: var(--color-sf-success-bg-color-disabled);
@@ -2008,8 +2008,8 @@
2008
2008
  .e-btn-group input:disabled + label.e-btn.e-outline.e-info,
2009
2009
  .e-css.e-btn-group .e-btn:disabled.e-outline.e-info,
2010
2010
  .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-info {
2011
- background: var(--color-sf-content-bg-color);
2012
- border-color: rgba(var(--color-sf-info-bg-color), 0.65);
2011
+ background: transparent;
2012
+ border-color: rgba(var(--color-sf-info-shadow), 0.65);
2013
2013
  -webkit-box-shadow: none;
2014
2014
  box-shadow: none;
2015
2015
  color: var(--color-sf-info-bg-color-disabled);
@@ -2019,8 +2019,8 @@
2019
2019
  .e-btn-group input:disabled + label.e-btn.e-outline.e-warning,
2020
2020
  .e-css.e-btn-group .e-btn:disabled.e-outline.e-warning,
2021
2021
  .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-warning {
2022
- background: rgba(var(--color-sf-warning-bg-color), 0.65);
2023
- border-color: rgba(var(--color-sf-warning-bg-color), 0.65);
2022
+ background: transparent;
2023
+ border-color: rgba(var(--color-sf-warning-shadow), 0.65);
2024
2024
  -webkit-box-shadow: none;
2025
2025
  box-shadow: none;
2026
2026
  color: var(--color-sf-warning-bg-color-disabled);
@@ -2030,8 +2030,8 @@
2030
2030
  .e-btn-group input:disabled + label.e-btn.e-outline.e-danger,
2031
2031
  .e-css.e-btn-group .e-btn:disabled.e-outline.e-danger,
2032
2032
  .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-danger {
2033
- background: rgba(var(--color-sf-danger-bg-color), 0.65);
2034
- border-color: rgba(var(--color-sf-danger-bg-color), 0.65);
2033
+ background: transparent;
2034
+ border-color: rgba(var(--color-sf-danger-shadow), 0.65);
2035
2035
  -webkit-box-shadow: none;
2036
2036
  box-shadow: none;
2037
2037
  color: var(--color-sf-danger-bg-color-disabled);
@@ -885,8 +885,8 @@
885
885
  .e-btn-group input:disabled + label.e-btn.e-outline.e-success,
886
886
  .e-css.e-btn-group .e-btn:disabled.e-outline.e-success,
887
887
  .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-success {
888
- background: rgba(var(--color-sf-success-bg-color), 0.65);
889
- border-color: rgba(var(--color-sf-success-bg-color), 0.65);
888
+ background: transparent;
889
+ border-color: rgba(var(--color-sf-success-shadow), 0.65);
890
890
  -webkit-box-shadow: none;
891
891
  box-shadow: none;
892
892
  color: var(--color-sf-success-bg-color-disabled);
@@ -896,8 +896,8 @@
896
896
  .e-btn-group input:disabled + label.e-btn.e-outline.e-info,
897
897
  .e-css.e-btn-group .e-btn:disabled.e-outline.e-info,
898
898
  .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-info {
899
- background: var(--color-sf-content-bg-color);
900
- border-color: rgba(var(--color-sf-info-bg-color), 0.65);
899
+ background: transparent;
900
+ border-color: rgba(var(--color-sf-info-shadow), 0.65);
901
901
  -webkit-box-shadow: none;
902
902
  box-shadow: none;
903
903
  color: var(--color-sf-info-bg-color-disabled);
@@ -907,8 +907,8 @@
907
907
  .e-btn-group input:disabled + label.e-btn.e-outline.e-warning,
908
908
  .e-css.e-btn-group .e-btn:disabled.e-outline.e-warning,
909
909
  .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-warning {
910
- background: rgba(var(--color-sf-warning-bg-color), 0.65);
911
- border-color: rgba(var(--color-sf-warning-bg-color), 0.65);
910
+ background: transparent;
911
+ border-color: rgba(var(--color-sf-warning-shadow), 0.65);
912
912
  -webkit-box-shadow: none;
913
913
  box-shadow: none;
914
914
  color: var(--color-sf-warning-bg-color-disabled);
@@ -918,8 +918,8 @@
918
918
  .e-btn-group input:disabled + label.e-btn.e-outline.e-danger,
919
919
  .e-css.e-btn-group .e-btn:disabled.e-outline.e-danger,
920
920
  .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-danger {
921
- background: rgba(var(--color-sf-danger-bg-color), 0.65);
922
- border-color: rgba(var(--color-sf-danger-bg-color), 0.65);
921
+ background: transparent;
922
+ border-color: rgba(var(--color-sf-danger-shadow), 0.65);
923
923
  -webkit-box-shadow: none;
924
924
  box-shadow: none;
925
925
  color: var(--color-sf-danger-bg-color-disabled);
@@ -4,7 +4,6 @@
4
4
  @forward 'ej2-buttons/styles/button/bds-definition';
5
5
 
6
6
  //layout variables
7
- $skin-name :'Material3';
8
7
  $progress-btn-circle-opacity: .8 !default;
9
8
  $progress-btn-transition: all .3s linear !default;
10
9
  $progress-btn-spinner-padding: 12px !default;
@@ -19,12 +18,12 @@ $progress-btn-color: $secondary-text-color !default;
19
18
  $progress-btn-bgcolor: rgba($icon-color, .2) !default;
20
19
  $progress-btn-bgcolor-normal: rgba($icon-color, .2) !default;
21
20
  $progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
22
- $progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
23
- $progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
24
- $progress-btn-flat-info-progress-color: rgba($info-text, 1) !default;
25
- $progress-btn-flat-warning-progress-color: rgba($warning-text, 1) !default;
26
- $progress-btn-flat-danger-progress-color: rgba($danger-text, 1) !default;
27
- $btn-flat-primary-path-arc: $white;
21
+ $progress-btn-flat-primary-progress-color: rgba($progress-btn-white, 1) !default;
22
+ $progress-btn-flat-success-progress-color: rgba($progress-btn-white, 1) !default;
23
+ $progress-btn-flat-info-progress-color: rgba($progress-btn-info, 1) !default;
24
+ $progress-btn-flat-warning-progress-color: rgba($progress-btn-white, 1) !default;
25
+ $progress-btn-flat-danger-progress-color: rgba($progress-btn-white, 1) !default;
26
+ $btn-flat-primary-path-arc: $progress-btn-white !default;
28
27
  $fade-out: none !default;
29
28
  $progress-btn-zero-padding-margin: 0 !default;
30
29
  $progress-btn-line-height: 1 !default;
@@ -40,3 +39,11 @@ $progress-slidedown-to-top: 100px !default;
40
39
  $progress-slideup-to-top: -100px !default;
41
40
  $progress-zero-width: 0% !default;
42
41
  $progress-negative-full-width: -100% !default;
42
+ $progress-btn-primary-color: $progress-btn-white !default;
43
+ $progress-btn-success-color: $progress-btn-white !default;
44
+ $progress-btn-info-color: $progress-btn-info !default;
45
+ $progress-btn-warning-color: $progress-btn-white !default;
46
+ $progress-btn-danger-color: $progress-btn-white !default;
47
+ $progress-btn-primary-bgcolor: $progress-btn-primary-bg !default;
48
+ $progress-btn-info-bgcolor: $progress-btn-info-bg !default;
49
+ $progress-btn-link-color: $progress-btn-link !default;
@@ -36,3 +36,11 @@ $progress-slidedown-to-top: 100px !default;
36
36
  $progress-slideup-to-top: -100px !default;
37
37
  $progress-zero-width: 0% !default;
38
38
  $progress-negative-full-width: -100% !default;
39
+ $progress-btn-primary-color: $btn-primary-color !default;
40
+ $progress-btn-success-color: $btn-success-color !default;
41
+ $progress-btn-info-color: $btn-info-color !default;
42
+ $progress-btn-warning-color: $btn-warning-color !default;
43
+ $progress-btn-danger-color: $btn-danger-color !default;
44
+ $progress-btn-primary-bgcolor: $btn-primary-bgcolor !default;
45
+ $progress-btn-info-bgcolor: $btn-info-bgcolor !default;
46
+ $progress-btn-link-color: $btn-link-color !default;
@@ -36,3 +36,11 @@ $progress-slidedown-to-top: 100px !default;
36
36
  $progress-slideup-to-top: -100px !default;
37
37
  $progress-zero-width: 0% !default;
38
38
  $progress-negative-full-width: -100% !default;
39
+ $progress-btn-primary-color: $btn-primary-color !default;
40
+ $progress-btn-success-color: $btn-success-color !default;
41
+ $progress-btn-info-color: $btn-info-color !default;
42
+ $progress-btn-warning-color: $btn-warning-color !default;
43
+ $progress-btn-danger-color: $btn-danger-color !default;
44
+ $progress-btn-primary-bgcolor: $btn-primary-bgcolor !default;
45
+ $progress-btn-info-bgcolor: $btn-info-bgcolor !default;
46
+ $progress-btn-link-color: $btn-link-color !default;
@@ -36,9 +36,12 @@
36
36
  stroke: $btn-primary-color;
37
37
 
38
38
  .e-path-circle {
39
- @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
39
+ @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
40
40
  stroke: color.adjust($btn-primary-color, $alpha: -$progress-btn-circle-opacity);
41
41
  }
42
+ @else if $skin-name == 'tailwind' {
43
+ stroke: color.adjust($progress-btn-primary-color, $alpha: -$progress-btn-circle-opacity);
44
+ }
42
45
  }
43
46
 
44
47
  .e-path-arc {
@@ -102,9 +105,12 @@
102
105
  stroke: $btn-success-color;
103
106
 
104
107
  .e-path-circle {
105
- @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
108
+ @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
106
109
  stroke: color.adjust($btn-success-color, $alpha: -$progress-btn-circle-opacity);
107
110
  }
111
+ @else if $skin-name == 'tailwind' {
112
+ stroke: color.adjust($progress-btn-success-color, $alpha: -$progress-btn-circle-opacity);
113
+ }
108
114
  }
109
115
 
110
116
  .e-path-arc {
@@ -170,9 +176,12 @@
170
176
  stroke: $btn-info-color;
171
177
 
172
178
  .e-path-circle {
173
- @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
179
+ @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
174
180
  stroke: color.adjust($btn-info-color, $alpha: -$progress-btn-circle-opacity);
175
181
  }
182
+ @else if $skin-name == 'tailwind' {
183
+ stroke: color.adjust($progress-btn-info-color, $alpha: -$progress-btn-circle-opacity);
184
+ }
176
185
  @if $skin-name == 'fluent2' {
177
186
  stroke: color.adjust(#242424, $alpha: -$progress-btn-circle-opacity);
178
187
  }
@@ -239,9 +248,12 @@
239
248
  stroke: $btn-warning-color;
240
249
 
241
250
  .e-path-circle {
242
- @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
251
+ @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
243
252
  stroke: color.adjust($btn-warning-color, $alpha: -$progress-btn-circle-opacity);
244
253
  }
254
+ @else if $skin-name == 'tailwind' {
255
+ stroke: color.adjust($progress-btn-warning-color, $alpha: -$progress-btn-circle-opacity);
256
+ }
245
257
  }
246
258
 
247
259
  .e-path-arc {
@@ -305,9 +317,12 @@
305
317
  stroke: $btn-danger-color;
306
318
 
307
319
  .e-path-circle {
308
- @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
320
+ @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
309
321
  stroke: color.adjust($btn-danger-color, $alpha: -$progress-btn-circle-opacity);
310
322
  }
323
+ @else if $skin-name == 'tailwind' {
324
+ stroke: color.adjust($progress-btn-danger-color, $alpha: -$progress-btn-circle-opacity);
325
+ }
311
326
  }
312
327
 
313
328
  .e-path-arc {
@@ -369,9 +384,12 @@
369
384
  stroke: $btn-primary-bgcolor;
370
385
 
371
386
  .e-path-circle {
372
- @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
387
+ @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
373
388
  stroke: color.adjust($btn-primary-bgcolor, $alpha: -$progress-btn-circle-opacity);
374
389
  }
390
+ @else if $skin-name == 'tailwind' {
391
+ stroke: color.adjust($progress-btn-primary-bgcolor, $alpha: -$progress-btn-circle-opacity);
392
+ }
375
393
  }
376
394
 
377
395
  .e-path-arc {
@@ -402,9 +420,12 @@
402
420
  stroke: $btn-info-bgcolor;
403
421
 
404
422
  .e-path-circle {
405
- @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
423
+ @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
406
424
  stroke: color.adjust($btn-info-bgcolor, $alpha: -$progress-btn-circle-opacity);
407
425
  }
426
+ @else if $skin-name == 'tailwind' {
427
+ stroke: color.adjust($progress-btn-info-bgcolor, $alpha: -$progress-btn-circle-opacity);
428
+ }
408
429
  }
409
430
 
410
431
  .e-path-arc {
@@ -454,9 +475,12 @@
454
475
  stroke: $btn-link-color;
455
476
 
456
477
  .e-path-circle {
457
- @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
478
+ @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
458
479
  stroke: color.adjust($btn-link-color, $alpha: -$progress-btn-circle-opacity);
459
480
  }
481
+ @else if $skin-name == 'tailwind' {
482
+ stroke: color.adjust($progress-btn-link-color, $alpha: -$progress-btn-circle-opacity);
483
+ }
460
484
  }
461
485
 
462
486
  .e-path-arc {
@@ -544,9 +568,12 @@
544
568
  #{if(&, '&', '*')}.e-outline:not(:focus) {
545
569
  &.e-primary {
546
570
  .e-progress {
547
- @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
571
+ @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
548
572
  background: color.adjust($btn-primary-bgcolor, $alpha: -.8);
549
573
  }
574
+ @else if $skin-name == 'tailwind' {
575
+ background: color.adjust($progress-btn-primary-bgcolor, $alpha: -.8);
576
+ }
550
577
  }
551
578
  }
552
579
 
@@ -560,9 +587,12 @@
560
587
 
561
588
  &.e-info {
562
589
  .e-progress {
563
- @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
590
+ @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
564
591
  background: color.adjust($btn-info-bgcolor, $alpha: -.8);
565
592
  }
593
+ @else if $skin-name == 'tailwind' {
594
+ background: color.adjust($progress-btn-info-bgcolor, $alpha: -.8);
595
+ }
566
596
  }
567
597
  }
568
598
 
@@ -622,9 +652,12 @@
622
652
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
623
653
  &.e-primary {
624
654
  .e-progress {
625
- @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
655
+ @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
626
656
  background: color.adjust($btn-primary-bgcolor, $alpha: -.8);
627
657
  }
658
+ @else if $skin-name == 'tailwind' {
659
+ background: color.adjust($progress-btn-primary-bgcolor, $alpha: -.8);
660
+ }
628
661
  }
629
662
  }
630
663
 
@@ -638,9 +671,12 @@
638
671
 
639
672
  &.e-info {
640
673
  .e-progress {
641
- @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
674
+ @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
642
675
  background: color.adjust($btn-info-bgcolor, $alpha: -.8);
643
676
  }
677
+ @else if $skin-name == 'tailwind' {
678
+ background: color.adjust($progress-btn-info-bgcolor, $alpha: -.8);
679
+ }
644
680
  }
645
681
  }
646
682
 
@@ -532,13 +532,20 @@
532
532
  fill: var(--color-sf-utility-secondary-text-color);
533
533
  stroke: var(--color-sf-utility-secondary-text-color);
534
534
  }
535
+ .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle {
536
+ stroke-width: 3px;
537
+ }
535
538
  .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-arc {
536
539
  stroke: var(--color-sf-utility-secondary-text-color);
540
+ stroke-width: 3px;
537
541
  }
538
542
  .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
539
543
  fill: var(--color-sf-on-brand-solid-primary);
540
544
  stroke: var(--color-sf-on-brand-solid-primary);
541
545
  }
546
+ .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
547
+ stroke: rgba(255, 255, 255, 0.2);
548
+ }
542
549
  .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
543
550
  stroke: var(--color-sf-on-brand-solid-primary);
544
551
  }
@@ -546,20 +553,19 @@
546
553
  fill: var(--color-sf-brand-solid-primary);
547
554
  stroke: var(--color-sf-brand-solid-primary);
548
555
  }
549
- .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
550
- stroke: var(--color-sf-base-white);
551
- }
552
- .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
553
- fill: var(--color-sf-brand-solid-primary);
554
- stroke: var(--color-sf-brand-solid-primary);
556
+ .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
557
+ stroke: rgba(255, 255, 255, 0.2);
555
558
  }
556
- .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
557
- stroke: var(--color-sf-on-brand-solid-primary);
559
+ .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
560
+ stroke: #fff;
558
561
  }
559
562
  .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
560
563
  fill: var(--color-sf-base-white);
561
564
  stroke: var(--color-sf-base-white);
562
565
  }
566
+ .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
567
+ stroke: rgba(255, 255, 255, 0.2);
568
+ }
563
569
  .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
564
570
  stroke: var(--color-sf-base-white);
565
571
  }
@@ -567,20 +573,19 @@
567
573
  fill: #057647;
568
574
  stroke: #057647;
569
575
  }
570
- .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
571
- stroke: #057647;
572
- }
573
- .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
574
- fill: #057647;
575
- stroke: #057647;
576
+ .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
577
+ stroke: rgba(255, 255, 255, 0.2);
576
578
  }
577
- .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
578
- stroke: var(--color-sf-base-white);
579
+ .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
580
+ stroke: #fff;
579
581
  }
580
582
  .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
581
583
  fill: var(--color-sf-utility-info-text);
582
584
  stroke: var(--color-sf-utility-info-text);
583
585
  }
586
+ .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
587
+ stroke: rgba(104, 64, 198, 0.2);
588
+ }
584
589
  .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
585
590
  stroke: var(--color-sf-utility-info-text);
586
591
  }
@@ -588,20 +593,19 @@
588
593
  fill: var(--color-sf-bg-primary);
589
594
  stroke: var(--color-sf-bg-primary);
590
595
  }
591
- .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
592
- stroke: var(--color-sf-bg-primary);
593
- }
594
- .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
595
- fill: var(--color-sf-bg-primary);
596
- stroke: var(--color-sf-bg-primary);
596
+ .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
597
+ stroke: rgba(255, 255, 255, 0.2);
597
598
  }
598
- .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
599
- stroke: var(--color-sf-utility-info-text);
599
+ .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
600
+ stroke: #fff;
600
601
  }
601
602
  .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
602
603
  fill: var(--color-sf-base-white);
603
604
  stroke: var(--color-sf-base-white);
604
605
  }
606
+ .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
607
+ stroke: rgba(255, 255, 255, 0.2);
608
+ }
605
609
  .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
606
610
  stroke: var(--color-sf-base-white);
607
611
  }
@@ -610,22 +614,18 @@
610
614
  stroke: #b54707;
611
615
  }
612
616
  .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
613
- stroke: #b54707;
617
+ stroke: rgba(255, 255, 255, 0.2);
614
618
  }
615
619
  .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
616
- stroke: #b54707;
617
- }
618
- .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
619
- fill: #b54707;
620
- stroke: #b54707;
621
- }
622
- .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
623
- stroke: var(--color-sf-base-white);
620
+ stroke: #fff;
624
621
  }
625
622
  .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
626
623
  fill: var(--color-sf-base-white);
627
624
  stroke: var(--color-sf-base-white);
628
625
  }
626
+ .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
627
+ stroke: rgba(255, 255, 255, 0.2);
628
+ }
629
629
  .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
630
630
  stroke: var(--color-sf-base-white);
631
631
  }
@@ -633,20 +633,19 @@
633
633
  fill: #d92c20;
634
634
  stroke: #d92c20;
635
635
  }
636
- .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
637
- stroke: #d92c20;
636
+ .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
637
+ stroke: rgba(255, 255, 255, 0.2);
638
638
  }
639
- .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
640
- fill: #d92c20;
641
- stroke: #d92c20;
642
- }
643
- .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
644
- stroke: var(--color-sf-base-white);
639
+ .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
640
+ stroke: #fff;
645
641
  }
646
642
  .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg {
647
643
  fill: var(--color-sf-brand-solid-primary);
648
644
  stroke: var(--color-sf-brand-solid-primary);
649
645
  }
646
+ .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle {
647
+ stroke: rgba(126, 86, 216, 0.2);
648
+ }
650
649
  .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc {
651
650
  stroke: var(--color-sf-brand-solid-primary);
652
651
  }
@@ -654,6 +653,9 @@
654
653
  fill: #057647;
655
654
  stroke: #057647;
656
655
  }
656
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle {
657
+ stroke: rgba(5, 118, 71, 0.2);
658
+ }
657
659
  .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
658
660
  stroke: #057647;
659
661
  }
@@ -661,6 +663,9 @@
661
663
  fill: var(--color-sf-bg-primary);
662
664
  stroke: var(--color-sf-bg-primary);
663
665
  }
666
+ .e-progress-btn.e-outline.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle {
667
+ stroke: rgba(255, 255, 255, 0.2);
668
+ }
664
669
  .e-progress-btn.e-outline.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc {
665
670
  stroke: var(--color-sf-bg-primary);
666
671
  }
@@ -668,6 +673,9 @@
668
673
  fill: #b54707;
669
674
  stroke: #b54707;
670
675
  }
676
+ .e-progress-btn.e-outline.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle {
677
+ stroke: rgba(181, 71, 7, 0.2);
678
+ }
671
679
  .e-progress-btn.e-outline.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc {
672
680
  stroke: #b54707;
673
681
  }
@@ -675,6 +683,9 @@
675
683
  fill: #d92c20;
676
684
  stroke: #d92c20;
677
685
  }
686
+ .e-progress-btn.e-outline.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle {
687
+ stroke: rgba(217, 44, 32, 0.2);
688
+ }
678
689
  .e-progress-btn.e-outline.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc {
679
690
  stroke: #d92c20;
680
691
  }
@@ -682,6 +693,9 @@
682
693
  fill: var(--color-sf-brand-primary);
683
694
  stroke: var(--color-sf-brand-primary);
684
695
  }
696
+ .e-progress-btn.e-link .e-spinner-pane .e-spinner-inner svg .e-path-circle {
697
+ stroke: rgba(126, 86, 216, 0.2);
698
+ }
685
699
  .e-progress-btn.e-link .e-spinner-pane .e-spinner-inner svg .e-path-arc {
686
700
  stroke: var(--color-sf-brand-primary);
687
701
  }
@@ -700,25 +714,52 @@
700
714
  background: rgba(var(--color-sf-fg-secondary), 0.2);
701
715
  }
702
716
 
703
- *.e-flat.e-primary .e-progress,
717
+ *.e-flat.e-primary .e-progress {
718
+ background: rgba(255, 255, 255, 0.2);
719
+ }
720
+ *.e-flat.e-success .e-progress {
721
+ background: rgba(255, 255, 255, 0.2);
722
+ }
723
+ *.e-flat.e-info .e-progress {
724
+ background: rgba(104, 64, 198, 0.2);
725
+ }
726
+ *.e-flat.e-warning .e-progress {
727
+ background: rgba(255, 255, 255, 0.2);
728
+ }
729
+ *.e-flat.e-danger .e-progress {
730
+ background: rgba(255, 255, 255, 0.2);
731
+ }
732
+
733
+ *.e-outline:not(:focus).e-primary .e-progress {
734
+ background: rgba(126, 86, 216, 0.2);
735
+ }
736
+ *.e-outline:not(:focus).e-success .e-progress {
737
+ background: rgba(5, 118, 71, 0.2);
738
+ }
739
+ *.e-outline:not(:focus).e-info .e-progress {
740
+ background: rgba(255, 255, 255, 0.2);
741
+ }
742
+ *.e-outline:not(:focus).e-warning .e-progress {
743
+ background: rgba(181, 71, 7, 0.2);
744
+ }
745
+ *.e-outline:not(:focus).e-danger .e-progress {
746
+ background: rgba(217, 44, 32, 0.2);
747
+ }
748
+
704
749
  *.e-flat:not(:focus).e-primary .e-progress {
705
- background: rgba(var(--color-sf-on-brand-solid-primary), 1);
750
+ background: rgba(126, 86, 216, 0.2);
706
751
  }
707
- *.e-flat.e-success .e-progress,
708
752
  *.e-flat:not(:focus).e-success .e-progress {
709
- background: rgba(var(--color-sf-base-white), 1);
753
+ background: rgba(5, 118, 71, 0.2);
710
754
  }
711
- *.e-flat.e-info .e-progress,
712
755
  *.e-flat:not(:focus).e-info .e-progress {
713
- background: rgba(var(--color-sf-utility-info-text), 1);
756
+ background: rgba(255, 255, 255, 0.2);
714
757
  }
715
- *.e-flat.e-warning .e-progress,
716
758
  *.e-flat:not(:focus).e-warning .e-progress {
717
- background: rgba(var(--color-sf-base-white), 1);
759
+ background: rgba(181, 71, 7, 0.2);
718
760
  }
719
- *.e-flat.e-danger .e-progress,
720
761
  *.e-flat:not(:focus).e-danger .e-progress {
721
- background: rgba(var(--color-sf-base-white), 1);
762
+ background: rgba(217, 44, 32, 0.2);
722
763
  }
723
764
 
724
765
  .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {