From eae59492c7bc2d175629c07df0829e0a0076434a Mon Sep 17 00:00:00 2001 From: lwazevedo Date: Fri, 30 Jun 2017 14:50:28 -0300 Subject: [PATCH] Create new css _login.scss for authSignIn and authSignUp and import _login.scss to file common.scss, and undo changes to files inject.js, index.html and auth.scss. --- gulp/inject.js | 5 +- src/index.html | 5 -- src/sass/auth.scss | 28 ++++---- src/sass/common.scss | 1 + src/sass/theme/_login.scss | 141 +++++++++++++++++++++++++++++++++++++ 5 files changed, 159 insertions(+), 21 deletions(-) create mode 100644 src/sass/theme/_login.scss diff --git a/gulp/inject.js b/gulp/inject.js index e61e738..6c849e7 100644 --- a/gulp/inject.js +++ b/gulp/inject.js @@ -18,7 +18,7 @@ gulp.task('inject-reload', ['inject'], function() { gulp.task('inject', ['scripts', 'styles', 'injectAuth', 'inject404', 'copyVendorImages'], function() { var injectStyles = gulp.src([ path.join(conf.paths.tmp, '/serve/app/main.css'), - path.join(conf.paths.tmp, '/serve/app/auth.css'), + //path.join(conf.paths.tmp, '/serve/app/auth.css'), path.join('!' + conf.paths.tmp, '/serve/app/vendor.css') ], { read: false }); @@ -47,7 +47,8 @@ gulp.task('inject', ['scripts', 'styles', 'injectAuth', 'inject404', 'copyVendor gulp.task('injectAuth', ['stylesAuth'], function() { return injectAlone({ css: [path.join('!' + conf.paths.tmp, '/serve/app/vendor.css'), path.join(conf.paths.tmp, '/serve/app/auth.css')], - paths: [path.join(conf.paths.src, '/auth.html'), path.join(conf.paths.src, '/reg.html'), path.join(conf.paths.src, '/app/pages/authSigIn/authSignIn.html'), path.join(conf.paths.src, '/app/pages/authSigIn/authSignUp.html')] + paths: [path.join(conf.paths.src, '/auth.html'), path.join(conf.paths.src, '/reg.html')] + // paths: [path.join(conf.paths.src, '/auth.html'), path.join(conf.paths.src, '/reg.html'), path.join(conf.paths.src, '/app/pages/authSigIn/authSignIn.html'), path.join(conf.paths.src, '/app/pages/authSigIn/authSignUp.html')] }) }); diff --git a/src/index.html b/src/index.html index 06c6fa1..e602006 100644 --- a/src/index.html +++ b/src/index.html @@ -25,11 +25,6 @@ - - - - - diff --git a/src/sass/auth.scss b/src/sass/auth.scss index ebde9ad..8d4f138 100644 --- a/src/sass/auth.scss +++ b/src/sass/auth.scss @@ -1,29 +1,29 @@ @import "common.scss"; -// @import "theme/_socicon.scss"; -// @import "theme/_layout.scss"; -// @import 'theme/buttons.scss'; -// @import 'app/form.scss'; -// html { -// min-height: 520px; -// height: 100%; -// } -.login { +@import "theme/_socicon.scss"; +@import "theme/_layout.scss"; +@import 'theme/buttons.scss'; +@import 'app/form.scss'; +html { min-height: 520px; + height: 100%; +} + +body { @include main-background(); height: 100%; } $text-color: #ffffff; -.login .form-control, -.login .form-control:focus { +.form-control, +.form-control:focus { @include placeholderStyle($text-color, 0.9); background-color: rgba(0, 0, 0, .4); border-radius: 5px; color: $text-color; } -.login .form-control[disabled], -.login .form-control[readonly], +.form-control[disabled], +.form-control[readonly], fieldset[disabled] .form-control { @include placeholderStyle($text-color, 0.6); } @@ -37,7 +37,7 @@ fieldset[disabled] .form-control { .auth-block { width: 540px; - margin: 150px auto; + margin: 0 auto; border-radius: 5px; @include bg-translucent-dark(0.55); color: #fff; diff --git a/src/sass/common.scss b/src/sass/common.scss index df04ce9..8794b01 100644 --- a/src/sass/common.scss +++ b/src/sass/common.scss @@ -1,3 +1,4 @@ @import 'theme/conf/mixins'; @import 'theme/conf/colorScheme/mint'; @import 'theme/conf/variables'; +@import 'theme/_login.scss'; \ No newline at end of file diff --git a/src/sass/theme/_login.scss b/src/sass/theme/_login.scss new file mode 100644 index 0000000..8c1b57b --- /dev/null +++ b/src/sass/theme/_login.scss @@ -0,0 +1,141 @@ +.login { + min-height: 520px; + @include main-background(); + height: 100%; +} + +$text-color: #ffffff; +.login .form-control, +.login .form-control:focus { + @include placeholderStyle($text-color, 0.9); + background-color: rgba(0, 0, 0, .4); + border-radius: 5px; + color: $text-color; +} + +.login .form-control[disabled], +.login .form-control[readonly], +fieldset[disabled] .form-control { + @include placeholderStyle($text-color, 0.6); +} + +.auth-main { + display: flex; + align-items: center; + height: 100%; + width: 100%; +} + +.login .auth-block { + width: 540px; + margin: 150px auto; + border-radius: 5px; + @include bg-translucent-dark(0.55); + color: #fff; + padding: 32px; + h1 { + font-weight: $font-light; + margin-bottom: 28px; + text-align: center; + } + p { + font-size: 16px; + } + a { + text-decoration: none; + outline: none; + transition: all 0.2s ease; + color: $primary; + &:hover { + color: $primary-dark; + } + } + .control-label { + padding-top: 11px; + color: $text-color; + } + .form-group { + margin-bottom: 12px; + } +} + +.login .auth-input { + width: 300px; + margin-bottom: 24px; + input { + display: block; + width: 100%; + border: none; + font-size: 16px; + padding: 4px 10px; + outline: none; + } +} + +.login a.forgot-pass { + display: block; + text-align: right; + margin-bottom: -20px; + float: right; + z-index: 2; + position: relative; +} + +.login .auth-link { + display: block; + font-size: 16px; + text-align: center; + margin-bottom: 33px; +} + +.login .auth-sep { + margin-top: 36px; + margin-bottom: 24px; + line-height: 20px; + font-size: 16px; + text-align: center; + display: block; + position: relative; + &>span { + display: table-cell; + width: 30%; + white-space: nowrap; + padding: 0 24px; + color: $text-color; + &>span { + margin-top: -12px; + display: block; + } + } + &:before, + &:after { + border-top: solid 1px $text-color; + content: ""; + height: 1px; + width: 35%; + display: table-cell; + } +} + +.login .al-share-auth { + text-align: center; + .al-share { + float: none; + margin: 0; + padding: 0; + display: inline-block; + li { + margin-left: 24px; + &:first-child { + margin-left: 0; + } + i { + font-size: 24px; + } + } + } +} + +.login .btn-auth { + color: #ffffff!important; +} \ No newline at end of file