yellow team mailing list archive
-
yellow team
-
Mailing list archive
-
Message #01379
CSS styling for buttons (issue 6811062)
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: gary.poster@xxxxxxxxxxxxx-20121031113030-u57s6x9yhnaju1n1
+New revision: bac@xxxxxxxxxxxxx-20121031161225-nasntmbgr1pddpab
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.
References
