From 1cb52b7c8a3b5d5d2dae596ca0b7e73d63122fdc Mon Sep 17 00:00:00 2001 From: Yuriy Dybskiy Date: Wed, 10 Oct 2012 04:10:30 -0700 Subject: [PATCH] CSS refactoring: Nesting - first step This is the first pass on refactoring. Lossless so far. --- packages/accounts-ui/login_buttons.less | 268 +++++++++--------------- 1 file changed, 99 insertions(+), 169 deletions(-) diff --git a/packages/accounts-ui/login_buttons.less b/packages/accounts-ui/login_buttons.less index 3d271625d0..640e9e11d1 100644 --- a/packages/accounts-ui/login_buttons.less +++ b/packages/accounts-ui/login_buttons.less @@ -74,23 +74,21 @@ //////////////////// LOGIN BUTTONS -#login-buttons .login-header { +@login-buttons-accounts-dialog-width: 178px; +#login-buttons { + .display-inline-block(); + + .login-header { float: left; padding-right: 2px; line-height: 1.5; font-family: 'Helvetica Neue', Helvetica, Arial, default; -} - -#login-buttons .loading { + } + .loading { width: 24px; height: 24px; background-image: url(data:image/gif;base64,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); -} - -@login-buttons-accounts-dialog-width: 178px; - -#login-buttons { - .display-inline-block(); + } } #login-buttons .login-button, .accounts-dialog .login-button { @@ -113,21 +111,11 @@ .border-radius(3px); } -#login-buttons .login-header { - margin-right: 4px; -} #login-buttons .login-button-disabled, .accounts-dialog .login-button-disabled { color: #ccc; } -#login-buttons .configure-button { - background: red; -} - -#login-buttons .login-link-text { - margin-left: 5px; /* so that other elements aren't too close */ -} .accounts-dialog * { /* precendence of this selector is significant */ /* @@ -155,20 +143,40 @@ out-of-the-box in more apps. margin-bottom: 4px; } -#login-buttons .login-image { +#login-buttons { + .login-header { margin-right: 4px; } + .configure-button { background: red; } + .login-link-text { margin-left: 5px; /* so that other elements aren't too close */ } + + .login-image { float: left; margin: 2px 5px 2px 0px; width: 16px; height: 16px; -} + } -#login-buttons .no-services { - color: red; -} + .no-services { color: red; } -#login-buttons .login-link-and-dropdown-list { + .login-link-and-dropdown-list { right: 5px; position: relative; + } + .login-close-text { + float: left; + position: relative; + left: 1px; /* = #login-buttons.border-width */ + padding-bottom: 3px; + } + + .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 { float: left; } + #back-to-login-link { float: right; } } #login-buttons a, .accounts-dialog a { @@ -176,51 +184,65 @@ out-of-the-box in more apps. text-decoration: underline; } -#login-buttons .login-close-text { - float: left; - position: relative; - left: 1px; /* = #login-buttons.border-width */ - padding-bottom: 3px; -} - .login-buttons-dropdown-hangs-left #login-buttons .login-close-text { float: right; } -#login-buttons .login-close-text-clear { - clear: both; -} - @login-buttons-accounts-dialog-padding-left: 8px; .accounts-dialog { - border: 1px solid #666; - z-index: 1000; - background: white; + border: 1px solid #666; + z-index: 1000; + background: white; - -moz-box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.3); - -webkit-box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.3); - .border-radius(3px); + .border-radius(3px); - margin-top: -5px; - padding-top: 4px; /* = border-width - margin-top */ + margin-top: -5px; + padding-top: 4px; /* = border-width - margin-top */ - margin-right: -8px; - padding-right: 8px; /* = -margin-right */ + margin-right: -8px; + padding-right: 8px; /* = -margin-right */ - padding-left: @login-buttons-accounts-dialog-padding-left; - padding-bottom: 8px; + padding-left: @login-buttons-accounts-dialog-padding-left; + padding-bottom: 8px; - margin-left: 0; - margin-bottom: 0; + margin-left: 0; + margin-bottom: 0; - width: @login-buttons-accounts-dialog-width + 9; /* not sure what this 9 is */ + width: @login-buttons-accounts-dialog-width + 9; /* not sure what this 9 is */ - font-size: 16px; - color: #333; - line-height: 1.6; + font-size: 16px; + color: #333; + line-height: 1.6; + + label, .title { + font-weight: bold; + font-size: 80%; + } + input { + // Be compatible with Bootstrap and apps that customize padding + // and border on inputs. Be pixel-accurate in IE 8+. + .box-sizing-by-border(); + width: 100%; + // Given that any `height` declaration will describe the total + // height including padding, prop the text field open a little + // bit if there is a small specified height. + // This plays nice with Bootstrap. + min-height: 30px; + } + + .login-button-form-submit { margin-top: 8px; } + .message { font-size: 80%; margin-top: 2px; } + .error-message { color: red; } + .info-message { color: green; } + .additional-link { font-size: 60%; } + + #login-buttons-cancel-reset-password { float: right; } + #login-buttons-cancel-enroll-account { float: right; } } #login-dropdown-list { @@ -232,85 +254,11 @@ out-of-the-box in more apps. right: 0px; } -#login-buttons .hline { - text-decoration: line-through; -} - -#login-buttons .or { - text-align: center; -} - -#login-buttons .hline { - color: lightgrey; -} - -#login-buttons .or-text { - font-weight: bold; -} - -.accounts-dialog label, .accounts-dialog .title { - font-weight: bold; - font-size: 80%; -} - -.accounts-dialog input { - // Be compatible with Bootstrap and apps that customize padding - // and border on inputs. Be pixel-accurate in IE 8+. - .box-sizing-by-border(); - width: 100%; - // Given that any `height` declaration will describe the total - // height including padding, prop the text field open a little - // bit if there is a small specified height. - // This plays nice with Bootstrap. - min-height: 30px; -} - -.accounts-dialog .login-button-form-submit { - margin-top: 8px; -} - -.accounts-dialog .message { - font-size: 80%; - margin-top: 2px; -} - #login-buttons-message-dialog .message { /* we intentionally want it bigger on this dialog since it's the only thing displayed */ font-size: 100%; } -.accounts-dialog .error-message { - color: red; -} - -.accounts-dialog .info-message { - color: green; -} - -.accounts-dialog .additional-link { - font-size: 60%; -} - -.accounts-dialog #login-buttons-cancel-reset-password { - float: right; -} - -.accounts-dialog #login-buttons-cancel-enroll-account { - float: right; -} - -#login-buttons #signup-link { - float: right; -} - -#login-buttons #forgot-password-link { - float: left; -} - -#login-buttons #back-to-login-link { - float: right; -} - .accounts-centered-dialog { font-family: 'Helvetica Neue', Helvetica, Arial, default; @@ -326,11 +274,28 @@ out-of-the-box in more apps. } @configure-login-service-dialog-width: 530px; + #configure-login-service-dialog { - width: @configure-login-service-dialog-width; - margin-left: -(@configure-login-service-dialog-width - + @login-buttons-accounts-dialog-padding-left) / 2; - margin-top: -180px; /* = approximately -height/2, though height can change */ + width: @configure-login-service-dialog-width; + margin-left: -(@configure-login-service-dialog-width + + @login-buttons-accounts-dialog-padding-left) / 2; + margin-top: -180px; /* = approximately -height/2, though height can change */ + + table { width: 100%; } + input { + 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 { @@ -358,38 +323,3 @@ out-of-the-box in more apps. background-color: rgba(0, 0, 0, 0.7); } - -#configure-login-service-dialog table { - width: 100%; -} - -#configure-login-service-dialog .configuration_labels { - width: 30%; -} - -#configure-login-service-dialog .configuration_inputs { - width: 70%; -} - -#configure-login-service-dialog input { - width: 100%; - font-family: "Courier New", Courier, monospace; -} - -#configure-login-service-dialog ol { - margin-top: 10px; - margin-bottom: 10px; -} - -#configure-login-service-dialog .new-section { - margin-top: 10px; -} - -#configure-login-service-dialog ol li { - margin-left: 30px; -} - -#configure-login-service-dialog .url { - font-family: "Courier New", Courier, monospace; -} -