From 786655f89027392fa2db4722d0e9d91059527765 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 10 Jun 2014 16:35:14 -0400 Subject: [PATCH] correcting poorly scoped Sass variables set in xmodules' .scss files to adhere to Sass 3.3 scoping see http://blog.sass-lang.com/posts/184094-sass-33-is-released for more information on 3.3+ variable scoping --- .../xmodule/css/annotatable/display.scss | 26 +++++++++---------- .../lib/xmodule/xmodule/css/capa/display.scss | 9 ++++--- .../xmodule/xmodule/css/sequence/display.scss | 8 +++--- .../xmodule/css/video/accessible_menu.scss | 20 +++++++------- 4 files changed, 32 insertions(+), 31 deletions(-) diff --git a/common/lib/xmodule/xmodule/css/annotatable/display.scss b/common/lib/xmodule/xmodule/css/annotatable/display.scss index e2c095de2d..bf00d6544d 100644 --- a/common/lib/xmodule/xmodule/css/annotatable/display.scss +++ b/common/lib/xmodule/xmodule/css/annotatable/display.scss @@ -1,11 +1,11 @@ -/* TODO: move top-level variables to a common _variables.scss. +/* TODO: move top-level variables to a common _variables.scss. * NOTE: These variables were only added here because when this was integrated with the CMS, * SASS compilation errors were triggered because the CMS didn't have the same variables defined * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS. * -Abarrett and Vshnayder */ -$border-color: #C8C8C8; -$body-font-size: em(14); +$annotatable--border-color: #C8C8C8; +$annotatable--body-font-size: em(14); .annotatable-wrapper { position: relative; @@ -23,7 +23,7 @@ $body-font-size: em(14); .annotatable-section { position: relative; padding: .5em 1em; - border: 1px solid $border-color; + border: 1px solid $annotatable--border-color; border-radius: .5em; margin-bottom: .5em; @@ -34,7 +34,7 @@ $body-font-size: em(14); a { font-weight: normal; } } .annotatable-section-body { - border-top: 1px solid $border-color; + border-top: 1px solid $annotatable--border-color; margin-top: .5em; padding-top: .5em; @include clearfix; @@ -45,9 +45,9 @@ $body-font-size: em(14); margin-left: 4em; b { font-weight: bold; } i { font-style: italic; } - code { + code { display: inline; - white-space: pre; + white-space: pre; font-family: Courier New, monospace; } } @@ -105,7 +105,7 @@ $body-font-size: em(14); } .ui-tooltip.qtip.ui-tooltip { - font-size: $body-font-size; + font-size: $annotatable--body-font-size; border: 1px solid #333; border-radius: 1em; background-color: rgba(0,0,0,.85); @@ -123,7 +123,7 @@ $body-font-size: em(14); border-bottom: 2px solid #333; font-weight: bold; } - .ui-tooltip-icon { + .ui-tooltip-icon { right: 10px; background: #333; } @@ -140,16 +140,16 @@ $body-font-size: em(14); padding: 0 10px 10px 10px; background-color: transparent; border-color: transparent; - } - p { - color: inherit; + } + p { + color: inherit; line-height: normal; } } .ui-tooltip.qtip.ui-tooltip-annotatable { max-width: 375px; - .ui-tooltip-content { + .ui-tooltip-content { padding: 0 10px; .annotatable-comment { display: block; diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss index e81d0c68c2..bccf6bf001 100644 --- a/common/lib/xmodule/xmodule/css/capa/display.scss +++ b/common/lib/xmodule/xmodule/css/capa/display.scss @@ -1,3 +1,5 @@ +$annotation-yellow: rgba(255,255,10,0.3); + h2 { margin-top: 0; margin-bottom: 15px; @@ -929,7 +931,6 @@ div.problem { } .annotation-input { - $yellow: rgba(255,255,10,0.3); margin: 0 0 1em 0; border: 1px solid #ccc; border-radius: 1em; @@ -957,8 +958,8 @@ div.problem { .block-highlight { padding: .5em; - border: 1px solid darken($yellow, 10%); - background-color: $yellow; + border: 1px solid darken($annotation-yellow, 10%); + background-color: $annotation-yellow; color: #333; font-style: normal; } @@ -982,7 +983,7 @@ div.problem { cursor: pointer; &.selected { - background-color: $yellow; + background-color: $annotation-yellow; } } .tag-status { diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index 3e696b37e4..537461c264 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -1,8 +1,8 @@ -$border-color: #C8C8C8; +$sequence--border-color: #C8C8C8; // repeated extends - needed since LMS styling was referenced .block-link { - border-left: 1px solid lighten($border-color, 10%); + border-left: 1px solid lighten($sequence--border-color, 10%); display: block; &:hover, &:focus { @@ -12,7 +12,7 @@ $border-color: #C8C8C8; .topbar { @include clearfix(); - border-bottom: 1px solid $border-color; + border-bottom: 1px solid $sequence--border-color; @media print { display: none; @@ -20,7 +20,7 @@ $border-color: #C8C8C8; a { &.block-link { - border-left: 1px solid lighten($border-color, 10%); + border-left: 1px solid lighten($sequence--border-color, 10%); display: block; &:hover, &:focus { diff --git a/common/lib/xmodule/xmodule/css/video/accessible_menu.scss b/common/lib/xmodule/xmodule/css/video/accessible_menu.scss index b5e73a6215..f7b868b107 100644 --- a/common/lib/xmodule/xmodule/css/video/accessible_menu.scss +++ b/common/lib/xmodule/xmodule/css/video/accessible_menu.scss @@ -1,9 +1,9 @@ -$gray: rgb(127, 127, 127); -$blue: rgb(0, 159, 230); -$gray-d1: shade($gray,20%); -$gray-l2: tint($gray,40%); -$gray-l3: tint($gray,60%); -$blue-s1: saturate($blue,15%); +$a11y--gray: rgb(127, 127, 127); +$a11y--blue: rgb(0, 159, 230); +$a11y--gray-d1: shade($gray,20%); +$a11y--gray-l2: tint($gray,40%); +$a11y--gray-l3: tint($gray,60%); +$a11y--blue-s1: saturate($blue,15%); %use-font-awesome { font-family: FontAwesome; @@ -44,18 +44,18 @@ $blue-s1: saturate($blue,15%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: $gray-l2; + color: $a11y--gray-l2; font-size: 14px; line-height: 23px; &:hover, &:focus { - color: $gray-d1; + color: $a11y--gray-d1; } } &.active{ a { - color: $blue; + color: $a11y--blue; } } @@ -96,7 +96,7 @@ $blue-s1: saturate($blue,15%); border-radius: 0 3px 3px 0; background-color: $very-light-text; padding: ($baseline*.75 $baseline*1.25 $baseline*.75 $baseline*.75); - color: $gray-l2; + color: $a11y--gray-l2; min-width: 1.5em; line-height: 14px; text-align: center;