_progress-bar.scss2.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-ProgressBar-css_mixin-extjs-progress'>/**
  19. </span> * Creates the base structure of an Ext.ProgressBar
  20. * @member Ext.ProgressBar
  21. */
  22. @mixin extjs-progress {
  23. .#{$prefix}progress {
  24. position: relative;
  25. border-width: $progress-border-width;
  26. border-style: solid;
  27. @include border-radius($progress-border-radius);
  28. overflow: hidden;
  29. height: $progress-height;
  30. }
  31. .#{$prefix}progress-bar {
  32. height: $progress-height - ($progress-border-width * 2);
  33. overflow: hidden;
  34. position: absolute;
  35. width: 0;
  36. @include border-radius($progress-border-radius);
  37. border-right: 1px solid;
  38. border-top: 1px solid;
  39. }
  40. .#{$prefix}progress-text {
  41. overflow: hidden;
  42. position: absolute;
  43. padding: 0 5px;
  44. height: $progress-height - ($progress-border-width * 2);
  45. font-weight: $progress-text-font-weight;
  46. font-size: $progress-text-font-size;
  47. line-height: 16px;
  48. text-align: $progress-text-text-align;
  49. }
  50. .#{$prefix}progress-text-back {
  51. padding-top: 1px;
  52. }
  53. @if $include-ie or $compile-all {
  54. .#{$prefix}strict .#{$prefix}ie7m .#{$prefix}progress {
  55. height: $progress-height - ($progress-border-width * 2);
  56. }
  57. }
  58. @include extjs-progress-ui(
  59. 'default',
  60. $ui-background-color: $progress-background-color,
  61. $ui-border-color: $progress-border-color,
  62. $ui-bar-background-color: $progress-bar-background-color,
  63. $ui-color-front: $progress-text-color-front,
  64. $ui-color-back: $progress-text-color-back
  65. )
  66. }
  67. <span id='Ext-ProgressBar-css_mixin-extjs-progress-ui'>/**
  68. </span> * Creates a visual theme for an Ext.ProgressBar
  69. * @member Ext.ProgressBar
  70. */
  71. @mixin extjs-progress-ui(
  72. $ui-label,
  73. $ui-base-color: null,
  74. $ui-border-color: null,
  75. $ui-background-color: null,
  76. $ui-bar-background-color: null,
  77. $ui-bar-background-gradient: glossy,
  78. $ui-color-front: null,
  79. $ui-color-back: null
  80. ){
  81. @if $ui-base-color != null {
  82. @if $ui-border-color == null { $ui-border-color: $ui-base-color; }
  83. @if $ui-bar-background-color == null { $ui-bar-background-color: $ui-base-color; }
  84. @if $ui-color-front == null { $ui-color-front: lighten($ui-base-color, 60); }
  85. @if $ui-color-back == null { $ui-color-back: darken($ui-base-color, 60); }
  86. }
  87. .#{$prefix}progress-#{$ui-label} {
  88. @if $ui-border-color != null { border-color: $ui-border-color; }
  89. .#{$prefix}progress-bar {
  90. @if $ui-border-color != null { border-right-color: $ui-border-color; }
  91. @if $ui-border-color != null { border-top-color: lighten($ui-border-color, 25); }
  92. @if $ui-bar-background-color != null { @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient); }
  93. }
  94. .#{$prefix}progress-text {
  95. @if $ui-color-front != null { color: $ui-color-front; }
  96. }
  97. .#{$prefix}progress-text-back {
  98. @if $ui-color-back != null { color: $ui-color-back; }
  99. }
  100. }
  101. @if $ui-background-color != null {
  102. @if not $supports-gradients or $compile-all {
  103. .#{$prefix}nlg {
  104. .#{$prefix}progress-#{$ui-label} {
  105. .#{$prefix}progress-bar {
  106. background: repeat-x;
  107. background-image: theme-background-image($theme-name, 'progress/progress-#{$ui-label}-bg.gif');
  108. }
  109. }
  110. }
  111. }
  112. }
  113. }</pre>
  114. </body>
  115. </html>