X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/resources/themes/stylesheets/ext4/default/widgets/_progress-bar.scss diff --git a/resources/themes/stylesheets/ext4/default/widgets/_progress-bar.scss b/resources/themes/stylesheets/ext4/default/widgets/_progress-bar.scss new file mode 100644 index 00000000..bbd41f64 --- /dev/null +++ b/resources/themes/stylesheets/ext4/default/widgets/_progress-bar.scss @@ -0,0 +1,117 @@ +@mixin extjs-progress { + .#{$prefix}progress { + border-width: $progress-border-width; + border-style: solid; + @include border-radius($progress-border-radius); + + overflow: hidden; + + height: $progress-height; + } + + .#{$prefix}progress-bar { + height: $progress-height - ($progress-border-width * 2); + + overflow: hidden; + position: absolute; + + width: 0; + + @include border-radius($progress-border-radius); + border-right: 1px solid; + border-top: 1px solid; + } + + .#{$prefix}progress-text { + overflow: hidden; + + position: absolute; + + padding: 0 5px; + + height: $progress-height - ($progress-border-width * 2); + + font-weight: $progress-text-font-weight; + font-size: $progress-text-font-size; + line-height: 16px; + text-align: $progress-text-text-align; + } + + .#{$prefix}progress-text-back { + padding-top: 1px; + } + + @if $include-ie or $compile-all { + .#{$prefix}strict .#{$prefix}progress { + height: $progress-height - ($progress-border-width * 2); + } + } + + @include extjs-progress-ui( + 'default', + + $ui-background-color: $progress-background-color, + $ui-border-color: $progress-border-color, + + $ui-bar-background-color: $progress-bar-background-color, + + $ui-color-front: $progress-text-color-front, + $ui-color-back: $progress-text-color-back + ) +} + +/** + * @mixin extjs-progress-ui + */ +@mixin extjs-progress-ui( + $ui-label, + + $ui-base-color: null, + + $ui-border-color: null, + $ui-background-color: null, + + $ui-bar-background-color: null, + $ui-bar-background-gradient: glossy, + + $ui-color-front: null, + $ui-color-back: null +){ + @if $ui-base-color != null { + @if $ui-border-color == null { $ui-border-color: $ui-base-color; } + @if $ui-bar-background-color == null { $ui-bar-background-color: $ui-base-color; } + @if $ui-color-front == null { $ui-color-front: lighten($ui-base-color, 60); } + @if $ui-color-back == null { $ui-color-back: darken($ui-base-color, 60); } + } + + .#{$prefix}progress-#{$ui-label} { + @if $ui-border-color != null { border-color: $ui-border-color; } + + .#{$prefix}progress-bar { + @if $ui-border-color != null { border-right-color: $ui-border-color; } + @if $ui-border-color != null { border-top-color: lighten($ui-border-color, 25); } + + @if $ui-bar-background-color != null { @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient); } + } + + .#{$prefix}progress-text { + @if $ui-color-front != null { color: $ui-color-front; } + } + + .#{$prefix}progress-text-back { + @if $ui-color-back != null { color: $ui-color-back; } + } + } + + @if $ui-background-color != null { + @if not $supports-gradients or $compile-all { + .#{$prefix}nlg { + .#{$prefix}progress-#{$ui-label} { + .#{$prefix}progress-bar { + background: theme-image($theme-name, 'progress/progress-#{$ui-label}-bg.gif') repeat-x; + } + } + } + } + } +} \ No newline at end of file