Reviewers: mp+132365_code.launchpad.net, Message: Please take a look.
Description: 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) Please review this at https://codereview.appspot.com/6811062/ Affected files: A [revision details] M bin/lint-yuidoc M lib/views/stylesheet.less Index: [revision details] === added file '[revision details]' --- [revision details] 2012-01-01 00:00:00 +0000 +++ [revision details] 2012-01-01 00:00:00 +0000 @@ -0,0 +1,2 @@ +Old revision: [email protected] +New revision: [email protected] Index: bin/lint-yuidoc === modified file 'bin/lint-yuidoc' --- bin/lint-yuidoc 2012-10-29 11:20:31 +0000 +++ bin/lint-yuidoc 2012-10-31 16:12:25 +0000 @@ -28,7 +28,7 @@ # then there is none. in_comment = False for current_line_number in range(line_number-1, boundry, -1): - source_line = source[current_line_number] + source_line = source[current_line_number] if source_line.strip().startswith('*/'): in_comment = True elif source_line.strip().startswith('/*'): @@ -90,6 +90,7 @@ dirs[:] = remove('assets', dirs) # Ignore the template.js file. files[:] = remove('templates.js', files) + files = filter(lambda x: x.endswith('.js'), files) with open('undocumented') as f: undocumented = [tuple(line.split()) for line in f.readlines()] Index: lib/views/stylesheet.less === modified file 'lib/views/stylesheet.less' --- lib/views/stylesheet.less 2012-10-31 08:30:13 +0000 +++ lib/views/stylesheet.less 2012-10-31 14:55:50 +0000 @@ -7,7 +7,11 @@ @charm-panel-configure-title-color: #eee7d5; @charm-panel-configure-name-color: #8f8f88; @charm-panel-deploy-button-color: #dd4814; +@charm-panel-deploy-button-bottom-gradient: #e65c19; +@charm-panel-deploy-button-shadow: #8a2d0c; @charm-panel-cancel-button-color: #b8b8b8; +@charm-panel-cancel-button-bottom-gradient: #a3a39f; +@charm-panel-cancel-button-shadow: #515050; @charm-panel-separator-color: #aeaeae; @charm-panel-background-color: #eeeeee; @@ -17,6 +21,10 @@ font-family: @font-family; } +input, button, select, textarea { + font-family: @font-family; +} + i.sprite { display: inline-block; vertical-align: middle; @@ -93,7 +101,6 @@ margin: 0 10px; padding: 3px 3px 3px 26px; font-style: italic; - font-family: @font-family; font-size: 0.9em; &:focus { background: white; @@ -371,6 +378,7 @@ stroke-width: 2px; fill: none; } + g.service { fill: none; stroke: none; @@ -380,12 +388,10 @@ } .charm-label { - font-family: @font-family; font-style: italic; fill: #4c4c4c; } .name { - font-family: @font-family; fill: #4c4c4c; } @@ -394,7 +400,6 @@ text-anchor: middle; dominant-baseline: central; fill: rgba(0,0,0,0); - font-family: @font-family; &.show-count { fill: rgba(0,0,0,1);} @@ -406,7 +411,6 @@ text-anchor: middle; dominant_baseline: central; fill: #4f4f4f; - font-family: @font-family; font-size: 1.2em; } @@ -449,8 +453,8 @@ g.unit { stroke-width: 0; font-weight: bold; - font-family: @font-family; font-size: 1.2em; fill: #1626cf; - + font-size: 1.2em; + fill: #1626cf; .address { fill: #ffffff; font-size: 0.8em;} .unit-border { @@ -736,9 +740,11 @@ float: right; } - .button-colors(@color) { - @gradient-start: lighten(@color, 5%); - @gradient-end: darken(@color, 5%); + .button-colors(@top-color, @bottom-color, @shadow-color, @v-pos) { + //@shadow-color: blue; + @blur: 2px; + @gradient-start: @top-color; + @gradient-end: @bottom-color; background-image: -ms-linear-gradient(top, @gradient-start, @gradient-end); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@gradient-start), to(@gradient-end)); background-image: -webkit-linear-gradient(top, @gradient-start, @gradient-end); @@ -746,32 +752,42 @@ background-image: -moz-linear-gradient(top, @gradient-start, @gradient-end); background-image: linear-gradient(top, @gradient-start, @gradient-end); background-repeat: repeat-x; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + -moz-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; + -webkit-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; + 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; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + border: none; } + .btn.deploy { margin-top: 5px; margin-left: 5px; vertical-align: middle; background-position: 0 0; /* Needed to defeat bootstrap btn:hover 0 -15px*/ - .button-colors(@charm-panel-deploy-button-color); - &, &:hover, &:active, &.active, &.disabled, &[disabled] { - background-color: @charm-panel-deploy-button-color; - } + .button-colors(@charm-panel-deploy-button-color, @charm-panel-deploy-button-bottom-gradient, @charm-panel-deploy-button-shadow, 0px); + &:active { + .button-colors(@charm-panel-deploy-button-color, @charm-panel-deploy-button-color, #8a2d0c, 1px); + } } + .charm-description btn.deploy { float: right; } .btn.cancel { + color: white; + text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); margin-top: 5px; background-repeat: no-repeat; background-color: transparent; vertical-align: middle; background-position: 0 0; /* Needed to defeat bootstrap btn:hover 0 -15px*/ background-image: url(/juju-ui/assets/images/cancel-button.png); - .button-colors(@charm-panel-cancel-button-color); - &, &:hover, &:active, &.active, &.disabled, &[disabled] { - background-color: @charm-panel-cancel-button-color; - } + .button-colors(@charm-panel-cancel-button-color, @charm-panel-cancel-button-bottom-gradient, @charm-panel-cancel-button-shadow, 0px); + &:active { + .button-colors(@charm-panel-cancel-button-color, @charm-panel-cancel-button-color, @charm-panel-cancel-button-shadow, 1px); + } } .charm-panel-configure-buttons { border-bottom: 1px solid @charm-panel-separator-color; -- https://code.launchpad.net/~bac/juju-gui/css-buttons/+merge/132365 Your team Juju GUI Hackers is requested to review the proposed merge of lp:~bac/juju-gui/css-buttons into lp:juju-gui. -- Mailing list: https://launchpad.net/~yellow Post to : [email protected] Unsubscribe : https://launchpad.net/~yellow More help : https://help.launchpad.net/ListHelp
