From f2abc3c3e5a1adfdef2435585fe3a46ba0169fa1 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 20 Feb 2013 09:15:27 -0500 Subject: [PATCH] lms - revised classes and styling mechanics for login/register forms and added necessary screen-reader mixin for other visually hidden text in those pages --- lms/static/sass/base/_base.scss | 5 +++-- lms/static/sass/base/_mixins.scss | 19 ++++++++++++++++--- lms/static/sass/multicourse/_account.scss | 15 ++++++++------- lms/templates/login.html | 14 +++++++------- lms/templates/register.html | 20 ++++++++++---------- 5 files changed, 44 insertions(+), 29 deletions(-) diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index 4ed2b56534..653e7c4759 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -204,5 +204,6 @@ mark { } } - - +.sr { + @include text-sr(); +} \ No newline at end of file diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss index 58a92d1ee6..1189e02748 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/lms/static/sass/base/_mixins.scss @@ -7,10 +7,23 @@ @return $body-line-height * $amount; } -@mixin hide-text(){ - text-indent: -9999px; +// image-replacement hidden text +@mixin text-hide() { + text-indent: 100%; + white-space: nowrap; overflow: hidden; - display: block; +} + +// hidden elems - screenreaders +@mixin text-sr() { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } @mixin vertically-and-horizontally-centered ( $height, $width ) { diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index 8a088c9d6b..2be5f4ad45 100644 --- a/lms/static/sass/multicourse/_account.scss +++ b/lms/static/sass/multicourse/_account.scss @@ -13,14 +13,15 @@ // js-enabled .js { - // utility - .is-shown { - display: block; - } + #register-form, #login-form { - // hidden - .is-hidden { - display: none; + .status.message { + display: none; + + &.is-shown { + display: block; + } + } } } diff --git a/lms/templates/login.html b/lms/templates/login.html index a5ffab8582..3be504d9fa 100644 --- a/lms/templates/login.html +++ b/lms/templates/login.html @@ -61,30 +61,30 @@
- +

Login Form

-