packages/accounts-ui-unstyled/login_buttons.import.less
//////////////////// MIXINS
// Minimal, well-documented, general-purpose CSS mixins.
// (Some are same as Bootstrap.)
////////// Box-Sizing: Border-Box
// Setting `box-sizing: border-box` on an element causes the CSS
// layout algorithm to interpret `width` and `height` declarations
// as referring to the size of the border box (outside the border),
// not the content box as usual (inside the padding).
//
// This is especially useful for stretching a form element to the
// width of its container even if the form element has arbitrary
// padding and borders, which can be done using `width: 100%`.
//
// Browser support is IE 8+ and all modern browsers, with the caveat
// that `-moz-box-sizing` in Firefox is considered to have some
// buggy or non-compliant behavior. For example, min/max-width/height
// may not interact correctly. See
// https://bugzilla.mozilla.org/show_bug.cgi?id=243412.
.box-sizing-by-border () {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
////////// Box-Shadow
.box-shadow (...) {
box-shadow: @arguments;
-webkit-box-shadow: @arguments; // For Android
}
////////// Unselectable
.unselectable () {
-webkit-user-select: none; // Chrome/Safari
-moz-user-select: none; // Firefox
-ms-user-select: none; // IE10+
// These delarations not implemented in browsers yet:
-o-user-select: none;
user-select: none;
// In IE <= 9 and Opera, need unselectable="on" in the HTML.
}
//////////////////// LOGIN BUTTONS
@login-buttons-accounts-dialog-width: 250px;
@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;
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
// being sensitive to the presence of the unicode down arrow,
// which otherwise bumps the baseline down by 1px.
line-height: 1;
.login-button {
position: relative; // so that we can position the image absolutely within the button
}
button.login-button {
width: 100%;
}
.login-buttons-with-only-one-button {
display: inline-block;
.login-button { display: inline-block; }
.login-text-and-button {
display: inline-block;
}
}
.login-display-name {
display: inline-block;
padding-right: 2px;
line-height: 1.5;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.loading {
line-height: 1;
background-image: url(data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA);
width: 16px;
background-position: center center;
background-repeat: no-repeat;
}
}
#login-buttons .login-button, .accounts-dialog .login-button {
cursor: pointer;
.unselectable();
padding: 4px 8px;
font-size: 80%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.5;
text-align: center;
color: #fff;
background: @login-buttons-color;
border: 1px solid @login-buttons-color-border;
border-radius: 4px;
&:hover {
background: @login-buttons-color-active;
}
&:active {
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);
}
}
// precendence of this selector is significant
.accounts-dialog * {
// A base for our dialog CSS, to reset browser styles and protect against
// the app's CSS. Dialogs include the dropdown, config modals, and the
// reset password modal. We can't completely isolate the dialogs from
// the app's CSS, and that isn't the goal because the app can style them.
// This rule is a compromise that should take precedence over some very
// broad rules but be overridden by more specific ones.
// Add more declarations here if they help the dialogs look good
// out-of-the-box in more apps.
padding: 0;
margin: 0;
line-height: inherit;
color: inherit;
font: inherit;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.accounts-dialog .login-button {
width: auto;
margin-bottom: 4px;
}
#login-buttons {
.login-buttons-padding {
display: inline-block;
width: 30px;
}
.login-display-name { margin-right: 4px; }
.configure-button {
background: @login-buttons-config-color;
border-color: @login-buttons-config-color-border;
&:active, &:hover {
background: @login-buttons-config-color-active;
border-color: @login-buttons-config-color-active-border;
}
}
.login-image {
display: inline-block;
position: absolute;
left: 6px;
top: 6px;
width: 16px;
height: 16px;
}
.text-besides-image {
margin-left: 18px;
}
.no-services { color: red; }
.login-link-and-dropdown-list {
position: relative;
}
.login-close-text {
float: left;
position: relative;
padding-bottom: 8px;
}
.login-text-and-button .loading, .login-link-and-dropdown-list .loading {
display: inline-block;
}
&.login-buttons-dropdown-align-left #login-dropdown-list .loading {
float: right;
}
&.login-buttons-dropdown-align-right #login-dropdown-list .loading {
float: left;
}
.login-close-text-clear { clear: both; }
.or { text-align: center; }
.hline { text-decoration: line-through; color: lightgrey; }
.or-text { font-weight: bold; }
#signup-link { float: right; }
#forgot-password-link, #resend-passwordless-code { float: left; }
#back-to-login-link { float: right; }
}
#login-buttons a, .accounts-dialog a {
cursor: pointer;
text-decoration: underline;
}
#login-buttons.login-buttons-dropdown-align-right .login-close-text {
float: right;
}
@meteor-accounts-base-padding: 8px;
@meteor-accounts-dialog-border-width: 1px;
.accounts-dialog {
border: @meteor-accounts-dialog-border-width solid #ccc;
z-index: 1000;
background: white;
border-radius: 4px;
padding: 8px 12px;
margin: -8px -12px 0 -12px;
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, sans-serif;
font-size: 16px;
color: #333;
// XXX Make the dropdown and dialogs look good without a top-level
// line-height: 1.6. For now, we apply it to everything except
// 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;
font-size: inherit;
font-family: inherit;
}
label, .title {
font-size: 80%;
margin-top: 7px;
margin-bottom: -2px;
}
label {
// Bootstrap sets labels as 'display: block;'. Undo that.
display: inline;
}
input[type=text], input[type=email], input[type=password] {
// Be pixel-accurate in IE 8+ regardless of our borders and
// paddings, at the expense of IE 7.
// Any heights or widths applied to this element will set the
// size of the border box (including padding and borders)
// instead of the content box. This makes it possible to
// do width 100%.
.box-sizing-by-border();
width: 100%;
// A fix purely for the "meteor add bootstrap" experience.
// Bootstrap sets "height: 20px" on form fields, which is too
// small when applied to the border box. People have complained
// that Bootstrap takes this approach for the sake of IE 7:
// https://github.com/twitter/bootstrap/issues/2935
// Our work-around is to override Bootstrap's rule (with higher
// precedence).
&[type] { height: auto; }
}
.login-button-form-submit { margin-top: 8px; }
.message { font-size: 80%; margin-top: 8px; line-height: 1.3; }
.error-message { color: red; }
.info-message { color: green; }
.additional-link { font-size: 75%; }
.accounts-close {
position: absolute;
top: 0;
right: 5px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
text-decoration: none;
color: #000;
opacity: 0.4;
&:hover {
opacity: 0.8;
}
}
#login-buttons-cancel-reset-password { float: right; }
#login-buttons-cancel-enroll-account { float: right; }
}
#login-dropdown-list {
position: absolute;
// The top-left of the border-box of the dropdown is absolutely
// positioned within its container, so we need to compensate
// for the border. The padding is already compensated for by
// negative margins on the dropdown.
// XXX We could use negative margins to compensate for the
// border too.
top: -@meteor-accounts-dialog-border-width;
left: -@meteor-accounts-dialog-border-width;
}
#login-buttons.login-buttons-dropdown-align-right #login-dropdown-list {
left: auto;
right: -@meteor-accounts-dialog-border-width;
}
#login-buttons-message-dialog .message {
/* we intentionally want it bigger on this dialog since it's the only thing displayed */
font-size: 100%;
}
.accounts-centered-dialog {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
z-index: 1001;
position: fixed;
left: 50%;
margin-left: -(@login-buttons-accounts-dialog-width
+ @meteor-accounts-base-padding) / 2;
top: 50%;
margin-top: -40px; /* = approximately -height/2, though height can change */
}
@configure-login-service-dialog-width: 530px;
#configure-login-service-dialog {
width: @configure-login-service-dialog-width;
margin-left: -(@configure-login-service-dialog-width
+ @meteor-accounts-base-padding) / 2;
margin-top: -300px; /* = approximately -height/2, though height can change */
table { width: 100%; }
input[type=text] {
width: 100%;
font-family: "Courier New", Courier, monospace;
}
ol {
margin-top: 10px;
margin-bottom: 10px;
li { margin-left: 30px; }
}
.configuration_labels { width: 30%; }
.configuration_inputs { width: 70%; }
.new-section { margin-top: 10px; }
.url { font-family: "Courier New", Courier, monospace; }
}
#configure-login-service-dialog-save-configuration {
float: right;
}
.configure-login-service-dismiss-button {
float: left;
}
#just-verified-dismiss-button, #messages-dialog-dismiss-button {
margin-top: 8px;
}
.hide-background {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
/* XXX consider replacing with DXImageTransform */
background-color: rgb(0.2, 0.2, 0.2); /* fallback for IE7-8 */
background-color: rgba(0, 0, 0, 0.7);
}
#login-buttons, .accounts-dialog {
input[type=text], input[type=email], input[type=password] {
padding: 4px;
border: 1px solid #aaa;
border-radius: 3px;
line-height: 1;
}
}