index.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. @import "./../common/abstracts/_mixin.scss";
  2. @import "./../common/abstracts/variable.scss";
  3. .wot-theme-dark {
  4. @include b(progress) {
  5. @include e(label) {
  6. color: $-dark-color3;
  7. }
  8. }
  9. }
  10. @include b(progress) {
  11. width: 100%;
  12. height: $-progress-height;
  13. display: flex;
  14. align-items: center;
  15. padding: $-progress-padding;
  16. @include e(outer) {
  17. display: block;
  18. position: relative;
  19. flex: 1;
  20. height: $-progress-height;
  21. border-radius: calc($-progress-height / 2);
  22. background: $-progress-bg;
  23. }
  24. @include e(inner) {
  25. display: block;
  26. position: absolute;
  27. top: 0;
  28. left: 0;
  29. height: 100%;
  30. border-radius: calc($-progress-height / 2);
  31. background: $-progress-color;
  32. transition-property: width;
  33. transition-timing-function: linear;
  34. font-size: $-progress-icon-fs;
  35. @include when(danger) {
  36. background: $-progress-danger-color;
  37. }
  38. @include when(success) {
  39. background: $-progress-success-color;
  40. }
  41. @include when(warning) {
  42. background: $-progress-warning-color;
  43. }
  44. }
  45. @include edeep(label) {
  46. width: 30px;
  47. margin-left: 9px;
  48. color: $-progress-label-color;
  49. font-size: $-progress-label-fs;
  50. }
  51. @include edeep(icon) {
  52. font-size: $-progress-icon-fs;
  53. @include when(danger) {
  54. color: $-progress-danger-color;
  55. }
  56. @include when(success) {
  57. color: $-progress-success-color;
  58. }
  59. @include when(warning) {
  60. color: $-progress-warning-color;
  61. }
  62. }
  63. }