_pace.scss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. //
  2. // Plugin: Pace
  3. //
  4. .pace {
  5. z-index: $zindex-main-sidebar + 10;
  6. .pace-progress {
  7. z-index: $zindex-main-sidebar + 11;
  8. }
  9. .pace-activity {
  10. z-index: $zindex-main-sidebar + 12;
  11. }
  12. }
  13. // Mixin
  14. @mixin pace-variant($name, $color) {
  15. .pace-#{$name} {
  16. .pace {
  17. .pace-progress {
  18. background: $color;
  19. }
  20. }
  21. }
  22. .pace-barber-shop-#{$name} {
  23. .pace {
  24. background: color-yiq($color);
  25. .pace-progress {
  26. background: $color;
  27. }
  28. .pace-activity {
  29. background-image: linear-gradient(45deg, rgba(color-yiq($color), 0.2) 25%, transparent 25%, transparent 50%, rgba(color-yiq($color), 0.2) 50%, rgba(color-yiq($color), 0.2) 75%, transparent 75%, transparent);
  30. }
  31. }
  32. }
  33. .pace-big-counter-#{$name} {
  34. .pace {
  35. .pace-progress::after {
  36. color: rgba($color, .19999999999999996);
  37. }
  38. }
  39. }
  40. .pace-bounce-#{$name} {
  41. .pace {
  42. .pace-activity {
  43. background: $color;
  44. }
  45. }
  46. }
  47. .pace-center-atom-#{$name} {
  48. .pace-progress {
  49. height: 100px;
  50. width: 80px;
  51. &::before {
  52. background: $color;
  53. color: color-yiq($color);
  54. font-size: .8rem;
  55. line-height: .7rem;
  56. padding-top: 17%;
  57. }
  58. }
  59. .pace-activity {
  60. border-color: $color;
  61. &::after,
  62. &::before {
  63. border-color: $color;
  64. }
  65. }
  66. }
  67. .pace-center-circle-#{$name} {
  68. .pace {
  69. .pace-progress {
  70. background: rgba($color, .8);
  71. color: color-yiq($color);
  72. }
  73. }
  74. }
  75. .pace-center-radar-#{$name} {
  76. .pace {
  77. .pace-activity {
  78. border-color: $color transparent transparent;
  79. }
  80. .pace-activity::before {
  81. border-color: $color transparent transparent;
  82. }
  83. }
  84. }
  85. .pace-center-simple-#{$name} {
  86. .pace {
  87. background: color-yiq($color);
  88. border-color: $color;
  89. .pace-progress {
  90. background: $color;
  91. }
  92. }
  93. }
  94. .pace-material-#{$name} {
  95. .pace {
  96. color: $color;
  97. }
  98. }
  99. .pace-corner-indicator-#{$name} {
  100. .pace {
  101. .pace-activity {
  102. background: $color;
  103. }
  104. .pace-activity::after,
  105. .pace-activity::before {
  106. border: 5px solid color-yiq($color);
  107. }
  108. .pace-activity::before {
  109. border-right-color: rgba($color, .2);
  110. border-left-color: rgba($color, .2);
  111. }
  112. .pace-activity::after {
  113. border-top-color: rgba($color, .2);
  114. border-bottom-color: rgba($color, .2);
  115. }
  116. }
  117. }
  118. .pace-fill-left-#{$name} {
  119. .pace {
  120. .pace-progress {
  121. background-color: rgba($color, 0.19999999999999996);
  122. }
  123. }
  124. }
  125. .pace-flash-#{$name} {
  126. .pace {
  127. .pace-progress {
  128. background: $color;
  129. }
  130. .pace-progress-inner {
  131. box-shadow: 0 0 10px $color, 0 0 5px $color;
  132. }
  133. .pace-activity {
  134. border-top-color: $color;
  135. border-left-color: $color;
  136. }
  137. }
  138. }
  139. .pace-loading-bar-#{$name} {
  140. .pace {
  141. .pace-progress {
  142. background: $color;
  143. color: $color;
  144. box-shadow: 120px 0 color-yiq($color), 240px 0 color-yiq($color);
  145. }
  146. .pace-activity {
  147. box-shadow: inset 0 0 0 2px $color, inset 0 0 0 7px color-yiq($color);
  148. }
  149. }
  150. }
  151. .pace-mac-osx-#{$name} {
  152. .pace {
  153. .pace-progress {
  154. background-color: $color;
  155. box-shadow: inset -1px 0 $color, inset 0 -1px $color, inset 0 2px rgba(color-yiq($color), 0.5), inset 0 6px rgba(color-yiq($color), .3);
  156. }
  157. .pace-activity {
  158. background-image: radial-gradient(rgba(color-yiq($color), .65) 0%, rgba(color-yiq($color), .15) 100%);
  159. height: 12px;
  160. }
  161. }
  162. }
  163. .pace-progress-color-#{$name} {
  164. .pace-progress {
  165. color: $color;
  166. }
  167. }
  168. }
  169. @each $name, $color in $theme-colors {
  170. @include pace-variant($name, $color);
  171. }
  172. @each $name, $color in $colors {
  173. @include pace-variant($name, $color);
  174. }