Browse Source

Adds progress bar sizes

pull/1378/head
jlukic 10 years ago
parent
commit
97dcc76a00
3 changed files with 45 additions and 7 deletions
  1. 4
      src/definitions/modules/progress.js
  2. 34
      src/definitions/modules/progress.less
  3. 14
      src/themes/default/modules/progress.variables

4
src/definitions/modules/progress.js

@ -19,13 +19,13 @@ $.fn.progress = function(parameters) {
moduleSelector = $allModules.selector || '', moduleSelector = $allModules.selector || '',
hasTouch = ('ontouchstart' in document.documentElement),
time = new Date().getTime(), time = new Date().getTime(),
performance = [], performance = [],
query = arguments[0], query = arguments[0],
methodInvoked = (typeof query == 'string'), methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1), queryArguments = [].slice.call(arguments, 1),
returnedValue returnedValue
; ;
@ -584,7 +584,7 @@ $.fn.progress.settings = {
name : 'Progress', name : 'Progress',
namespace : 'progress', namespace : 'progress',
debug : false,
debug : true,
verbose : true, verbose : true,
performance : true, performance : true,

34
src/definitions/modules/progress.less

@ -123,7 +123,6 @@
position: @barPosition; position: @barPosition;
width: @barInitialWidth; width: @barInitialWidth;
min-width: @barMinWidth; min-width: @barMinWidth;
height: @barHeight;
background: @barBackground; background: @barBackground;
border-radius: @barBorderRadius; border-radius: @barBorderRadius;
transition: @barTransition; transition: @barTransition;
@ -393,6 +392,37 @@
Sizes Sizes
---------------*/ ---------------*/
.ui.tiny.progress {
font-size: @tiny;
}
.ui.tiny.progress .bar {
height: @tinyBarHeight;
}
.ui.small.progress {
font-size: @small;
}
.ui.small.progress .bar { .ui.small.progress .bar {
height: 14px;
height: @smallBarHeight;
}
.ui.progress {
font-size: @medium;
}
.ui.progress .bar {
height: @barHeight;
}
.ui.large.progress {
font-size: @large;
}
.ui.large.progress .bar {
height: @largeBarHeight;
}
.ui.big.progress {
font-size: @big;
}
.ui.big.progress .bar {
height: @bigBarHeight;
} }

14
src/themes/default/modules/progress.variables

@ -22,9 +22,11 @@
@barHeight: 1.75em; @barHeight: 1.75em;
@barBackground: #888888; @barBackground: #888888;
@barBorderRadius: @borderRadius; @barBorderRadius: @borderRadius;
@barTransitionEasing: linear;
@barTransitionDuration: 0.2s;
@barTransition: @barTransition:
width 0.5s @defaultEasing,
background-color 0.4s @defaultEasing
width @barTransitionDuration @barTransitionEasing,
background-color @barTransitionDuration @barTransitionEasing
; ;
@barInitialWidth: 0%; @barInitialWidth: 0%;
@barMinWidth: 2em; @barMinWidth: 2em;
@ -83,7 +85,7 @@
/*------------------- /*-------------------
Types
Variations
--------------------*/ --------------------*/
/* Attached */ /* Attached */
@ -97,3 +99,9 @@
@invertedBarBackground: @barBackground; @invertedBarBackground: @barBackground;
@invertedProgressColor: @offWhite; @invertedProgressColor: @offWhite;
@invertedLabelColor: @white; @invertedLabelColor: @white;
/* Sizing */
@tinyBarHeight: 0.5em;
@smallBarHeight: 1em;
@largeBarHeight: 2.5em;
@bigBarHeight: 3.5em;
Loading…
Cancel
Save