_progress-bar.scss 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. @mixin extjs-progress {
  2. .#{$prefix}progress {
  3. border-width: $progress-border-width;
  4. border-style: solid;
  5. @include border-radius($progress-border-radius);
  6. overflow: hidden;
  7. height: $progress-height;
  8. }
  9. .#{$prefix}progress-bar {
  10. height: $progress-height - ($progress-border-width * 2);
  11. overflow: hidden;
  12. position: absolute;
  13. width: 0;
  14. @include border-radius($progress-border-radius);
  15. border-right: 1px solid;
  16. border-top: 1px solid;
  17. }
  18. .#{$prefix}progress-text {
  19. overflow: hidden;
  20. position: absolute;
  21. padding: 0 5px;
  22. height: $progress-height - ($progress-border-width * 2);
  23. font-weight: $progress-text-font-weight;
  24. font-size: $progress-text-font-size;
  25. line-height: 16px;
  26. text-align: $progress-text-text-align;
  27. }
  28. .#{$prefix}progress-text-back {
  29. padding-top: 1px;
  30. }
  31. @if $include-ie or $compile-all {
  32. .#{$prefix}strict .#{$prefix}ie7m .#{$prefix}progress {
  33. height: $progress-height - ($progress-border-width * 2);
  34. }
  35. }
  36. @include extjs-progress-ui(
  37. 'default',
  38. $ui-background-color: $progress-background-color,
  39. $ui-border-color: $progress-border-color,
  40. $ui-bar-background-color: $progress-bar-background-color,
  41. $ui-color-front: $progress-text-color-front,
  42. $ui-color-back: $progress-text-color-back
  43. )
  44. }
  45. /**
  46. * @mixin extjs-progress-ui
  47. */
  48. @mixin extjs-progress-ui(
  49. $ui-label,
  50. $ui-base-color: null,
  51. $ui-border-color: null,
  52. $ui-background-color: null,
  53. $ui-bar-background-color: null,
  54. $ui-bar-background-gradient: glossy,
  55. $ui-color-front: null,
  56. $ui-color-back: null
  57. ){
  58. @if $ui-base-color != null {
  59. @if $ui-border-color == null { $ui-border-color: $ui-base-color; }
  60. @if $ui-bar-background-color == null { $ui-bar-background-color: $ui-base-color; }
  61. @if $ui-color-front == null { $ui-color-front: lighten($ui-base-color, 60); }
  62. @if $ui-color-back == null { $ui-color-back: darken($ui-base-color, 60); }
  63. }
  64. .#{$prefix}progress-#{$ui-label} {
  65. @if $ui-border-color != null { border-color: $ui-border-color; }
  66. .#{$prefix}progress-bar {
  67. @if $ui-border-color != null { border-right-color: $ui-border-color; }
  68. @if $ui-border-color != null { border-top-color: lighten($ui-border-color, 25); }
  69. @if $ui-bar-background-color != null { @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient); }
  70. }
  71. .#{$prefix}progress-text {
  72. @if $ui-color-front != null { color: $ui-color-front; }
  73. }
  74. .#{$prefix}progress-text-back {
  75. @if $ui-color-back != null { color: $ui-color-back; }
  76. }
  77. }
  78. @if $ui-background-color != null {
  79. @if not $supports-gradients or $compile-all {
  80. .#{$prefix}nlg {
  81. .#{$prefix}progress-#{$ui-label} {
  82. .#{$prefix}progress-bar {
  83. background: repeat-x;
  84. background-image: theme-background-image($theme-name, 'progress/progress-#{$ui-label}-bg.gif');
  85. }
  86. }
  87. }
  88. }
  89. }
  90. }