CSS styling for buttons

CSS styling for buttons

* Apply CSS styling to buttons to get them closer to the visual design
  assets.

* Add a top-level rule to specify font-family which is needed to
  override the bootstrap setting rule.

* Drive-by: remove redundant 'font-family' rules.

* Drive-by: fix lint-yuidoc.

https://code.launchpad.net/~bac/juju-gui/css-buttons/+merge/132365

(do not edit description out of merge proposal)

[bac, 2012-10-31 16:15:05]

Please take a look.

[thiago, 2012-10-31 16:36:02]

https://codereview.appspot.com/6811062/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6811062/diff/1/lib/views/stylesheet.less#newco...
lib/views/stylesheet.less:744: //@shadow-color: blue;
There are some tabs in this file.

[bac, 2012-10-31 16:40:01]

Please take a look.

[thiago, 2012-11-01 12:03:35]

Thanks, Brad.

Seems good to me. 
I have only two silly comments.

[]s,
Thiago.

https://codereview.appspot.com/6811062/diff/5001/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6811062/diff/5001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:744: //@shadow-color: blue;
This line is commented out. Probably you can remove it.

https://codereview.appspot.com/6811062/diff/5001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:746: @gradient-start: @top-color;
You could use the top-color and botton-color instead of the new pointers, right?
If you want less code changes, you can change the parameter names to
gradient-start and gradient-end.

[gary.poster, 2012-11-01 15:06:30]

Hi Brad.  Thanks for this branch.  It is cool to have the 3d buttons done in
CSS.

I have a number of suggestions for you to consider, but in general I
automatically approve it once you consider them.

Gary

https://codereview.appspot.com/6811062/diff/5001/bin/lint-yuidoc
File bin/lint-yuidoc (right):

https://codereview.appspot.com/6811062/diff/5001/bin/lint-yuidoc#newcode90
bin/lint-yuidoc:90: dirs[:] = remove('assets', dirs)
I'd remove the function call and do it locally, once you remove the other use of
the function below.  (I'd also switch to "try: dirs.remove('assets') except
ValueError: pass" but that's just me).

If you like it, do it.

https://codereview.appspot.com/6811062/diff/5001/bin/lint-yuidoc#newcode93
bin/lint-yuidoc:93: files = filter(lambda x: x.endswith('.js'), files)
Without much excitement, I suggest you remove the "remove" function and
consolidate this into one pass through the names.  I'd lean towards the list
comprehension, so I'd replace lines 92 and 93 with

files = [i for i in files if i.endswith('.js') and i != 'templates.js']

As you wish.

https://codereview.appspot.com/6811062/diff/5001/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6811062/diff/5001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:743: .button-colors(@top-color, @bottom-color,
@shadow-color, @v-pos) {
What do you think about defining this function at the top level, and thus making
it available generally?  I think that's what we will want.

https://codereview.appspot.com/6811062/diff/5001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:757: box-shadow: 0 (@v-pos + 3) @blur -@blur
@shadow-color inset, 2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px
@shadow-color inset;
I *thought* you could use "box-shadow" in LESS and it would populate the other
two proprietary versions.  Could you double check and simplify if I am right? 
If I'm wrong, please let me know also. :-)

https://codereview.appspot.com/6811062/diff/5001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:789: .button-colors(@charm-panel-cancel-button-color,
@charm-panel-cancel-button-color, @charm-panel-cancel-button-shadow, 1px);
We generally are using four space indents in this file.

[bac, 2012-11-02 09:06:56]

*** Submitted:

CSS styling for buttons

* Apply CSS styling to buttons to get them closer to the visual design
  assets.

* Add a top-level rule to specify font-family which is needed to
  override the bootstrap setting rule.

* Drive-by: remove redundant 'font-family' rules.

* Drive-by: fix lint-yuidoc.

R=thiago, gary.poster
CC=
https://codereview.appspot.com/6811062

https://codereview.appspot.com/6811062/diff/5001/bin/lint-yuidoc
File bin/lint-yuidoc (right):

https://codereview.appspot.com/6811062/diff/5001/bin/lint-yuidoc#newcode90
bin/lint-yuidoc:90: dirs[:] = remove('assets', dirs)
On 2012/11/01 15:06:30, gary.poster wrote:
> I'd remove the function call and do it locally, once you remove the other use
of
> the function below.  (I'd also switch to "try: dirs.remove('assets') except
> ValueError: pass" but that's just me).
> 
> If you like it, do it.

Done.

https://codereview.appspot.com/6811062/diff/5001/bin/lint-yuidoc#newcode93
bin/lint-yuidoc:93: files = filter(lambda x: x.endswith('.js'), files)
On 2012/11/01 15:06:30, gary.poster wrote:
> Without much excitement, I suggest you remove the "remove" function and
> consolidate this into one pass through the names.  I'd lean towards the list
> comprehension, so I'd replace lines 92 and 93 with
> 
> files = [i for i in files if i.endswith('.js') and i != 'templates.js']
> 
> As you wish.

Done.

https://codereview.appspot.com/6811062/diff/5001/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6811062/diff/5001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:743: .button-colors(@top-color, @bottom-color,
@shadow-color, @v-pos) {
On 2012/11/01 15:06:30, gary.poster wrote:
> What do you think about defining this function at the top level, and thus
making
> it available generally?  I think that's what we will want.

Done.

https://codereview.appspot.com/6811062/diff/5001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:744: //@shadow-color: blue;
On 2012/11/01 12:03:35, thiago wrote:
> This line is commented out. Probably you can remove it.

Done.

https://codereview.appspot.com/6811062/diff/5001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:746: @gradient-start: @top-color;
On 2012/11/01 12:03:35, thiago wrote:
> You could use the top-color and botton-color instead of the new pointers,
right?
> If you want less code changes, you can change the parameter names to
> gradient-start and gradient-end.

Done.

https://codereview.appspot.com/6811062/diff/5001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:757: box-shadow: 0 (@v-pos + 3) @blur -@blur
@shadow-color inset, 2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px
@shadow-color inset;
I removed the browser-specific entries and regenerated the CSS.  LESS did not
put in those browser-specific rules so I have left them in stylesheet.less.

https://codereview.appspot.com/6811062/diff/5001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:789: .button-colors(@charm-panel-cancel-button-color,
@charm-panel-cancel-button-color, @charm-panel-cancel-button-shadow, 1px);
On 2012/11/01 15:06:30, gary.poster wrote:
> We generally are using four space indents in this file.

Done.