Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Make default accounts-ui styling simpler/flatter

  • Loading branch information...
commit 45ccc12970d4ff8efe8c0042b5c4f255950f885b 1 parent 2a8105a
@stubailo stubailo authored
View
2  examples/unfinished/accounts-ui-viewer/accounts-ui-viewer.less
@@ -1,5 +1,3 @@
-
-* { padding: 0; margin: 0; }
html, body { height: 100%; }
#controlpane {
View
101 packages/accounts-ui/login_buttons.less
@@ -32,43 +32,6 @@
-webkit-box-shadow: @arguments; // For Android
}
-////////// Display: Inline-block
-
-.display-inline-block () {
- display: inline-block;
-
- // IE 7 hacks (disabled)
- //*display: inline;
- //*zoom: 1;
-}
-
-////////// Gradients
-
-.vertical-gradient (@topColor: #fff, @bottomColor: #000) {
- // Fallback in absence of gradients
- background-color: mix(@topColor, @bottomColor, 60%);
- // FF 3.6+
- background-image: -moz-linear-gradient(top, @topColor, @bottomColor);
- // Safari 4+, Chrome 2+
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@topColor), to(@bottomColor));
- // Safari 5.1+, Chrome 10+
- background-image: -webkit-linear-gradient(top, @topColor, @bottomColor);
- // Opera 11.10
- background-image: -o-linear-gradient(top, @topColor, @bottomColor);
- // Standard, IE10
- background-image: linear-gradient(to bottom, @topColor, @bottomColor);
- background-repeat: repeat-x;
- // IE9 and down
- // XXX This gradient hack causes gradients to overflow the rounded corners
- // in IE9. We make the same call as Bootstrap here: keep the rounded
- // corners and withhold the gradients.
- // filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@topColor),argb(@bottomColor)));
-}
-
-.reset-ie-gradient () {
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
-}
-
////////// Unselectable
.unselectable () {
@@ -86,9 +49,19 @@
//////////////////// LOGIN BUTTONS
@login-buttons-accounts-dialog-width: 198px;
+@login-buttons-color: #596595;
+@login-buttons-color-border: darken(@login-buttons-color, 10%);
+@login-buttons-color-active: lighten(@login-buttons-color, 10%);
+@login-buttons-color-active-border: darken(@login-buttons-color-active, 10%);
+
+@login-buttons-config-color: darken(#f53, 10%);
+@login-buttons-config-color-border: darken(@login-buttons-config-color, 10%);
+@login-buttons-config-color-active: lighten(@login-buttons-config-color, 10%);
+@login-buttons-config-color-active-border: darken(@login-buttons-config-color-active, 10%);
+
#login-buttons {
- .display-inline-block();
+ display: inline-block;
margin-right: 0.2px; // Fixes display on IE8: http://www.compsoft.co.uk/Blog/2009/11/inline-block-not-quite-inline-blocking.html
// This seems to keep the height of the line from
@@ -107,6 +80,7 @@
display: inline-block;
}
}
+
.login-display-name {
display: inline-block;
padding-right: 2px;
@@ -133,26 +107,25 @@
text-align: center;
color: #fff;
- text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5);
- @topColor: #a5acc9;
- @bottomColor: darken(@topColor, 25%);
+ background: @login-buttons-color;
+ border: 1px solid @login-buttons-color-border;
- .vertical-gradient(@topColor, @bottomColor);
border-radius: 4px;
- border: 1px solid mix(@bottomColor, #000, 30%);
- .box-shadow(0 1px 3px rgba(0,0,0,0.5));
+ &:hover {
+ background: @login-buttons-color-active;
+ }
&:active {
- .box-shadow(none);
- .vertical-gradient(mix(@bottomColor, @topColor, 30%),
- mix(@bottomColor, #000, 80%));
+ background: @login-buttons-color-active;
+ .box-shadow(0 2px 3px 0 rgba(0, 0, 0, 0.2) inset);
}
&.login-button-disabled, &.login-button-disabled:active {
color: #ddd;
+ background: #aaa;
+ border: 1px solid lighten(#aaa, 10%);
.box-shadow(none);
- background: #999;
}
}
@@ -173,6 +146,8 @@
line-height: inherit;
color: inherit;
font: inherit;
+
+ font-family: 'Helvetica Neue', Helvetica, Arial, default;
}
.accounts-dialog .login-button {
@@ -187,12 +162,15 @@
}
.login-display-name { margin-right: 4px; }
- .configure-button {
- .vertical-gradient(#f53, darken(#f53, 15%));
- .box-shadow(0 1px 3px rgba(0,0,0,0.5));
+ .configure-button {
+ background: @login-buttons-config-color;
+ border-color: @login-buttons-config-color-border;
- &:active { background: #b10; .box-shadow(0 1px 3px rgba(0,0,0,0.5) inset); }
+ &:active, &:hover {
+ background: @login-buttons-config-color-active;
+ border-color: @login-buttons-config-color-active-border;
+ }
}
.login-image {
@@ -254,11 +232,9 @@
@meteor-accounts-dialog-border-width: 1px;
.accounts-dialog {
- border: @meteor-accounts-dialog-border-width solid #777;
+ border: @meteor-accounts-dialog-border-width solid #ccc;
z-index: 1000;
background: white;
-
- .box-shadow(0 3px 6px 1px rgba(0, 0, 0, 0.3));
border-radius: 4px;
padding: 8px 12px;
@@ -266,6 +242,8 @@
width: @login-buttons-accounts-dialog-width;
+ .box-shadow(0 0 3px 0 rgba(0, 0, 0, 0.2));
+
// Labels and links inherit app's font with this line commented out:
//font-family: 'Helvetica Neue', Helvetica, Arial, default;
font-size: 16px;
@@ -276,11 +254,16 @@
// the "Close" link, which we want to have the same line-height
// as the "Sign in" link.
& > * { line-height: 1.6; }
- & > .login-close-text { line-height: inherit; }
+ & > .login-close-text {
+ line-height: inherit;
+ font-size: inherit;
+ font-family: inherit;
+ }
label, .title {
- font-weight: bold;
font-size: 80%;
+ margin-top: 7px;
+ margin-bottom: -2px;
}
input {
// Be pixel-accurate in IE 8+ regardless of our borders and
@@ -302,7 +285,7 @@
}
.login-button-form-submit { margin-top: 8px; }
- .message { font-size: 80%; margin-top: 2px; line-height: 1.3; }
+ .message { font-size: 80%; margin-top: 8px; line-height: 1.3; }
.error-message { color: red; }
.info-message { color: green; }
.additional-link { font-size: 75%; }
@@ -418,7 +401,7 @@
#login-buttons, .accounts-dialog {
input[type=text], input[type=email], input[type=password] {
padding: 4px;
- border: 1px solid #999;
+ border: 1px solid #aaa;
border-radius: 3px;
line-height: 1;
}
Please sign in to comment.
Something went wrong with that request. Please try again.