From ef2218296f767d7228591d6987e45284a65d0a59 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 2 Oct 2013 16:51:04 -0400 Subject: [PATCH 1/5] LMS: revises CSS reference/pipeline architecture to handle IE9 selector limits --- .gitignore | 2 + lms/envs/common.py | 46 +- lms/static/sass/application-extend1.scss.mako | 62 + lms/static/sass/application-extend2.scss.mako | 54 + lms/static/sass/application.scss.mako | 38 +- lms/static/sass/elements/_typography.scss | 89 ++ lms/static/sass/ie.scss | 300 ++-- lms/static/sass/vendor/_font-awesome.scss | 1268 ----------------- lms/static/sass/views/_verification.scss | 90 +- .../courseware/courseware-error.html | 3 +- lms/templates/courseware/courseware.html | 7 +- lms/templates/courseware/gradebook.html | 3 +- lms/templates/courseware/info.html | 3 +- .../courseware/instructor_dashboard.html | 4 +- lms/templates/courseware/news.html | 3 +- lms/templates/courseware/progress.html | 3 +- lms/templates/courseware/static_tab.html | 3 +- lms/templates/courseware/syllabus.html | 3 +- lms/templates/discussion/index.html | 8 +- lms/templates/discussion/single_thread.html | 4 +- lms/templates/discussion/user_profile.html | 4 +- lms/templates/instructor/hint_manager.html | 28 +- .../instructor_dashboard_2.html | 3 +- lms/templates/instructor/staff_grading.html | 3 +- lms/templates/main.html | 16 +- lms/templates/mktg_iframe.html | 4 +- lms/templates/notes.html | 6 +- .../combined_notifications.html | 3 +- .../open_ended_flagged_problems.html | 3 +- .../open_ended_problems.html | 3 +- lms/templates/static_htmlbook.html | 3 +- lms/templates/static_pdfbook.html | 3 +- lms/templates/staticbook.html | 4 +- lms/templates/stripped-main.html | 3 +- 34 files changed, 483 insertions(+), 1596 deletions(-) create mode 100644 lms/static/sass/application-extend1.scss.mako create mode 100644 lms/static/sass/application-extend2.scss.mako delete mode 100644 lms/static/sass/vendor/_font-awesome.scss diff --git a/.gitignore b/.gitignore index e92d49a0f2..4df5d79916 100644 --- a/.gitignore +++ b/.gitignore @@ -51,6 +51,8 @@ node_modules *.scssc lms/static/sass/*.css lms/static/sass/application.scss +lms/static/sass/application-extend1.scss +lms/static/sass/application-extend2.scss lms/static/sass/course.scss cms/static/sass/*.css diff --git a/lms/envs/common.py b/lms/envs/common.py index 96b304294d..72e4a118e1 100644 --- a/lms/envs/common.py +++ b/lms/envs/common.py @@ -587,7 +587,7 @@ MIDDLEWARE_CLASSES = ( # catches any uncaught RateLimitExceptions and returns a 403 instead of a 500 'ratelimitbackend.middleware.RateLimitMiddleware', - + # For A/B testing 'waffle.middleware.WaffleMiddleware', ) @@ -628,25 +628,49 @@ open_ended_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/open_end notes_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/notes/**/*.coffee')) PIPELINE_CSS = { - 'application': { - 'source_filenames': ['sass/application.css'], - 'output_filename': 'css/lms-application.css', + 'style-vendor': { + 'source_filenames': [ + 'css/vendor/font-awesome.css', + 'css/vendor/jquery.qtip.min.css', + 'css/vendor/responsive-carousel/responsive-carousel', + 'css/vendor/responsive-carousel/responsive-carousel.slide', + ], + 'output_filename': 'css/lms-style-vendor.css', }, - 'course': { + 'style-app': { + 'source_filenames': [ + 'sass/application.css', + 'sass/ie.css' + ], + 'output_filename': 'css/lms-style-app.css', + }, + 'style-app-extend1': { + 'source_filenames': [ + 'sass/application-extend1.css', + ], + 'output_filename': 'css/lms-style-app-extend1.css', + }, + 'style-app-extend2': { + 'source_filenames': [ + 'sass/application-extend2.css', + ], + 'output_filename': 'css/lms-style-app-extend2.css', + }, + 'style-course-vendor': { 'source_filenames': [ 'js/vendor/CodeMirror/codemirror.css', 'css/vendor/jquery.treeview.css', 'css/vendor/ui-lightness/jquery-ui-1.8.22.custom.css', - 'css/vendor/jquery.qtip.min.css', 'css/vendor/annotator.min.css', + ], + 'output_filename': 'css/lms-style-course-vendor.css', + }, + 'style-course': { + 'source_filenames': [ 'sass/course.css', 'xmodule/modules.css', ], - 'output_filename': 'css/lms-course.css', - }, - 'ie-fixes': { - 'source_filenames': ['sass/ie.css'], - 'output_filename': 'css/lms-ie.css', + 'output_filename': 'css/lms-style-course.css', }, } diff --git a/lms/static/sass/application-extend1.scss.mako b/lms/static/sass/application-extend1.scss.mako new file mode 100644 index 0000000000..86a442301d --- /dev/null +++ b/lms/static/sass/application-extend1.scss.mako @@ -0,0 +1,62 @@ +## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx + + +// lms - css application architecture (platform) +// ==================== + +// libs and resets *do not edit* +@import 'bourbon/bourbon'; // lib - bourbon + +// BASE *default edX offerings* +// ==================== + +// base - utilities +@import 'base/reset'; +@import 'base/mixins'; +@import 'base/variables'; + +## THEMING +## ------- +## Set up this file to import an edX theme library if the environment +## indicates that a theme should be used. The assumption is that the +## theme resides outside of this main edX repository, in a directory +## called themes//, with its base Sass file in +## themes//static/sass/_.scss. That one entry +## point can be used to @import in as many other things as needed. +% if env.get('THEME_NAME') is not None: + // import theme's Sass overrides + @import '${env.get('THEME_NAME')}'; +% endif + +@import 'base/base'; + +// base - assets +@import 'base/font_face'; +@import 'base/extends'; +@import 'base/animations'; + +// base - starter +@import 'base/base'; + +// base - elements +@import 'elements/typography'; +@import 'elements/controls'; + +// shared - platform +@import 'multicourse/home'; +@import 'multicourse/dashboard'; +@import 'multicourse/account'; +@import 'multicourse/testcenter-register'; +@import 'multicourse/courses'; +@import 'multicourse/course_about'; +@import 'multicourse/jobs'; +@import 'multicourse/media-kit'; +@import 'multicourse/about_pages'; +@import 'multicourse/press_release'; +@import 'multicourse/password_reset'; +@import 'multicourse/error-pages'; +@import 'multicourse/help'; +@import 'multicourse/edge'; + +## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution +@import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/) diff --git a/lms/static/sass/application-extend2.scss.mako b/lms/static/sass/application-extend2.scss.mako new file mode 100644 index 0000000000..32c32e9d2f --- /dev/null +++ b/lms/static/sass/application-extend2.scss.mako @@ -0,0 +1,54 @@ +## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx + + +// lms - css application architecture (platform) +// ==================== + +// libs and resets *do not edit* +@import 'bourbon/bourbon'; // lib - bourbon + +// BASE *default edX offerings* +// ==================== + +// base - utilities +@import 'base/reset'; +@import 'base/mixins'; +@import 'base/variables'; + +## THEMING +## ------- +## Set up this file to import an edX theme library if the environment +## indicates that a theme should be used. The assumption is that the +## theme resides outside of this main edX repository, in a directory +## called themes//, with its base Sass file in +## themes//static/sass/_.scss. That one entry +## point can be used to @import in as many other things as needed. +% if env.get('THEME_NAME') is not None: + // import theme's Sass overrides + @import '${env.get('THEME_NAME')}'; +% endif + +@import 'base/base'; + +// base - assets +@import 'base/font_face'; +@import 'base/extends'; +@import 'base/animations'; + +// base - starter +@import 'base/base'; + +// base - elements +@import 'elements/typography'; +@import 'elements/controls'; + +// base - specific views +@import 'views/verification'; +@import 'views/shoppingcart'; + +// applications +@import 'discussion'; +@import 'news'; + +## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution +@import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/) diff --git a/lms/static/sass/application.scss.mako b/lms/static/sass/application.scss.mako index a500748121..16688d5368 100644 --- a/lms/static/sass/application.scss.mako +++ b/lms/static/sass/application.scss.mako @@ -1,21 +1,16 @@ +## Note: This Sass infrastructure is repeated in application-extend1 and application-extend2, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx + // lms - css application architecture // ==================== // libs and resets *do not edit* @import 'bourbon/bourbon'; // lib - bourbon -// VENDOR + REBASE *referenced/used vendor presentation and reset* -// ==================== - -@import 'base/reset'; -@import 'vendor/font-awesome'; -@import 'vendor/responsive-carousel/responsive-carousel'; -@import 'vendor/responsive-carousel/responsive-carousel.slide'; - // BASE *default edX offerings* // ==================== -// base - utilities +// base - utilities +@import 'base/reset'; @import 'base/mixins'; @import 'base/variables'; @@ -46,10 +41,6 @@ @import 'elements/typography'; @import 'elements/controls'; -// base - specific views -@import 'views/verification'; -@import 'views/shoppingcart'; - // shared - course @import 'shared/forms'; @import 'shared/footer'; @@ -60,24 +51,5 @@ @import 'shared/activation_messages'; @import 'shared/unsubscribe'; -// shared - platform -@import 'multicourse/home'; -@import 'multicourse/dashboard'; -@import 'multicourse/account'; -@import 'multicourse/testcenter-register'; -@import 'multicourse/courses'; -@import 'multicourse/course_about'; -@import 'multicourse/jobs'; -@import 'multicourse/media-kit'; -@import 'multicourse/about_pages'; -@import 'multicourse/press_release'; -@import 'multicourse/password_reset'; -@import 'multicourse/error-pages'; -@import 'multicourse/help'; -@import 'multicourse/edge'; - -// applications -@import 'discussion'; -@import 'news'; - +## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution @import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/) diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss index 043a205278..2cf11ce79b 100644 --- a/lms/static/sass/elements/_typography.scss +++ b/lms/static/sass/elements/_typography.scss @@ -194,3 +194,92 @@ %t-weight5 { font-weight: 700; } + +// ==================== + +// MISC: extends - type +// application: canned headings +%hd-lv1 { + @extend %t-title1; + @extend %t-weight1; + color: $m-gray-d4; + margin: 0 0 ($baseline*2) 0; +} + +%hd-lv2 { + @extend %t-title4; + @extend %t-weight1; + margin: 0 0 ($baseline*0.75) 0; + border-bottom: 1px solid $m-gray-l3; + padding-bottom: ($baseline/2); + color: $m-gray-d4; +} + +%hd-lv3 { + @extend %t-title6; + @extend %t-weight4; + margin: 0 0 ($baseline/4) 0; + color: $m-gray-d4; +} + +%hd-lv4 { + @extend %t-title6; + @extend %t-weight2; + margin: 0 0 $baseline 0; + color: $m-gray-d4; +} + +%hd-lv5 { + @extend %t-title7; + @extend %t-weight4; + margin: 0 0 ($baseline/4) 0; + color: $m-gray-d4; +} + +// application: canned copy +%copy-base { + @extend %t-copy-base; + color: $m-gray-d2; +} + +%copy-lead1 { + @extend %t-copy-lead2; + color: $m-gray; +} + +%copy-detail { + @extend %t-copy-sub1; + @extend %t-weight3; + color: $m-gray-d1; +} + +%copy-metadata { + @extend %t-copy-sub2; + color: $m-gray-d1; + + + %copy-metadata-value { + @extend %t-weight2; + } + + %copy-metadata-value { + @extend %t-weight4; + } +} + +// application: canned links +%copy-link { + border-bottom: 1px dotted transparent; + + &:hover, &:active { + border-color: $link-color-d1; + } +} + +%copy-badge { + @extend %t-title8; + @extend %t-weight5; + border-radius: ($baseline/5); + padding: ($baseline/2) $baseline; + text-transform: uppercase; +} diff --git a/lms/static/sass/ie.scss b/lms/static/sass/ie.scss index 87a8b07fe6..9ba7e612c1 100644 --- a/lms/static/sass/ie.scss +++ b/lms/static/sass/ie.scss @@ -2,184 +2,188 @@ @import "base/variables"; // These are all quick solutions for IE please rewrite -//Make overlay white because ie doesn't like rgba -.highlighted-courses .courses .course header.course-preview, .find-courses .courses .course header.course-preview, -.home .highlighted-courses > h2, .home .highlighted-courses > section.outside-app h1, section.outside-app .home .highlighted-courses > h1, -header.global { - background: #FFF; -} +.ie { -// hide all actions -.home > header .title .actions, -.home > header .title:hover .actions { - display: none; - height: auto; -} + //Make overlay white because ie doesn't like rgba + .highlighted-courses .courses .course header.course-preview, .find-courses .courses .course header.course-preview, + .home .highlighted-courses > h2, .home .highlighted-courses > section.outside-app h1, section.outside-app .home .highlighted-courses > h1, + header.global { + background: #FFF; + } -.home > header .title { - &:hover { + // hide all actions + .home > header .title .actions, + .home > header .title:hover .actions { + display: none; + height: auto; + } - > hgroup { - h1 { - border-bottom: 0; - padding-bottom: 0; + .home > header .title { + &:hover { + + > hgroup { + h1 { + border-bottom: 0; + padding-bottom: 0; + } + + h2 { + opacity: 1.0; + } } - h2 { + .actions { + opacity: 0; + } + } + } + + // because ie doesn't like :last + .last { + margin-right: 0 !important; + } + + // make partners not animate + .home .university-partners .partners a { + .name { + position: static; + } + + &:hover { + text-decoration: none; + + &::before { opacity: 1.0; } + + .name { + bottom: 0px; + } + + img { + top: 0px; + } } - .actions { - opacity: 0; - } - } -} - -// because ie doesn't like :last -.last { - margin-right: 0 !important; -} - -// make partners not animate -.home .university-partners .partners a { - .name { - position: static; } - &:hover { - text-decoration: none; + .home .university-partners .partners { + width: 660px; - &::before { - opacity: 1.0; + li.partner { + float: left; + display: block; + padding: 0; + width: 220px; + overflow: hidden; + } + } + + // make animations on homepage not animate and show everything + .highlighted-courses .courses .course, .find-courses .courses .course { + .meta-info { + display: none; } - .name { - bottom: 0px; + .inner-wrapper { + height: 100%; + overflow: visible; + position: relative; } - img { + header.course-preview { + left: 0px; + position: relative; top: 0px; + width: 100%; + z-index: 3; + height: auto; + + hgroup { + position: relative; + right: 0; + top: 0; + } + + } + + .info { + height: auto; + position: static; + overflow: visible; + + .desc { + height: auto; + } + } + + &:hover { + background: rgb(245,245,245); + border-color: rgb(170,170,170); + box-shadow: 0 1px 16px 0 rgba($blue, 0.4); + + .info { + top: 0; + } + + .meta-info { + opacity: 0; + } } } -} - -.home .university-partners .partners { - width: 660px; - - li.partner { - float: left; - display: block; - padding: 0; - width: 220px; - overflow: hidden; + // make overlay flat black since IE cant handle rgba + #lean_overlay { + background: #000; } -} -// make animations on homepage not animate and show everything -.highlighted-courses .courses .course, .find-courses .courses .course { - .meta-info { + // active navigation + nav.course-material ol.course-tabs li a.active, nav.course-material .xmodule_SequenceModule nav.sequence-nav ol.course-tabs li a.seq_video.active, .xmodule_SequenceModule nav.sequence-nav nav.course-material ol.course-tabs li a.seq_video.active { + background-color: #333; + background-color: rgba(0, 0, 0, .4); + } + + // make dropdown user consistent size + header.global ol.user > li.primary a.dropdown { + padding-top: 6px; + padding-bottom: 6px; + } + + // always hide arrow in IE + .dashboard .my-courses .my-course .cover .arrow { display: none; } - .inner-wrapper { - height: 100%; - overflow: visible; - position: relative; - } - - header.course-preview { - left: 0px; - position: relative; - top: 0px; - width: 100%; - z-index: 3; - height: auto; - - hgroup { - position: relative; - right: 0; - top: 0; - } - - } - - .info { - height: auto; - position: static; - overflow: visible; - - .desc { - height: auto; - } - } - - &:hover { - background: rgb(245,245,245); - border-color: rgb(170,170,170); - box-shadow: 0 1px 16px 0 rgba($blue, 0.4); - - .info { - top: 0; - } - - .meta-info { - opacity: 0; - } - } -} - -// make overlay flat black since IE cant handle rgba -#lean_overlay { - background: #000; -} - -// active navigation -nav.course-material ol.course-tabs li a.active, nav.course-material .xmodule_SequenceModule nav.sequence-nav ol.course-tabs li a.seq_video.active, .xmodule_SequenceModule nav.sequence-nav nav.course-material ol.course-tabs li a.seq_video.active { - background-color: #333; - background-color: rgba(0, 0, 0, .4); -} - -// make dropdown user consistent size -header.global ol.user > li.primary a.dropdown { - padding-top: 6px; - padding-bottom: 6px; -} - -// always hide arrow in IE -.dashboard .my-courses .my-course .cover .arrow { - display: none; -} - -.ie-banner { - display: block !important; -} - -div.course-wrapper { - display: block !important; - - section.course-content, - section.course-index { + .ie-banner { display: block !important; - float: left; } - section.course-content { - width: 71.27%; + div.course-wrapper { + display: block !important; + + section.course-content, + section.course-index { + display: block !important; + float: left; + } + + section.course-content { + width: 71.27%; + } } -} -.sidebar { - float: left !important; - display: block !important; -} - -.sequence-nav ol { - display: block !important; - - li { + .sidebar { float: left !important; - width: 50px; + display: block !important; } + + .sequence-nav ol { + display: block !important; + + li { + float: left !important; + width: 50px; + } + } + } diff --git a/lms/static/sass/vendor/_font-awesome.scss b/lms/static/sass/vendor/_font-awesome.scss deleted file mode 100644 index 035ca8c750..0000000000 --- a/lms/static/sass/vendor/_font-awesome.scss +++ /dev/null @@ -1,1268 +0,0 @@ -/*! - * Font Awesome 3.1.0 - * the iconic font designed for Bootstrap - * ------------------------------------------------------- - * The full suite of pictographic icons, examples, and documentation - * can be found at: http://fontawesome.io - * - * License - * ------------------------------------------------------- - * - The Font Awesome font is licensed under the SIL Open Font License v1.1 - - * http://scripts.sil.org/OFL - * - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License - - * http://opensource.org/licenses/mit-license.html - * - Font Awesome documentation licensed under CC BY 3.0 License - - * http://creativecommons.org/licenses/by/3.0/ - * - Attribution is no longer required in Font Awesome 3.0, but much appreciated: - * "Font Awesome by Dave Gandy - http://fontawesome.io" - - * Contact - * ------------------------------------------------------- - * Email: dave@fontawesome.io - * Twitter: http://twitter.com/fortaweso_me - * Work: Lead Product Designer @ http://kyruus.com - */ -/* FONT PATH - * -------------------------- */ -@font-face { - font-family: 'FontAwesome'; - src: url('../fonts/vendor/fontawesome-webfont.eot?v=3.1.0'); - src: url('../fonts/vendor/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), url('../fonts/vendor/fontawesome-webfont.woff?v=3.1.0') format('woff'), url('../fonts/vendor/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), url('../fonts/vendor/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg'); - font-weight: normal; - font-style: normal; -} -/* FONT AWESOME CORE - * -------------------------- */ -[class^="icon-"], -[class*=" icon-"] { - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - text-decoration: inherit; - -webkit-font-smoothing: antialiased; - *margin-right: .3em; -} -[class^="icon-"]:before, -[class*=" icon-"]:before { - text-decoration: inherit; - display: inline-block; - speak: none; -} -/* makes the font 33% larger relative to the icon container */ -.icon-large:before { - vertical-align: -10%; - font-size: 1.3333333333333333em; -} -/* makes sure icons active on rollover in links */ -a [class^="icon-"], -a [class*=" icon-"], -a [class^="icon-"]:before, -a [class*=" icon-"]:before { - display: inline; -} -/* increased font size for icon-large */ -[class^="icon-"].icon-fixed-width, -[class*=" icon-"].icon-fixed-width { - display: inline-block; - width: 1.2857142857142858em; - text-align: center; -} -[class^="icon-"].icon-fixed-width.icon-large, -[class*=" icon-"].icon-fixed-width.icon-large { - width: 1.5714285714285714em; -} -ul.icons-ul { - list-style-type: none; - text-indent: -0.7142857142857143em; - margin-left: 2.142857142857143em; -} -ul.icons-ul > li .icon-li { - width: 0.7142857142857143em; - display: inline-block; - text-align: center; -} -[class^="icon-"].hide, -[class*=" icon-"].hide { - display: none; -} -.icon-muted { - color: #eeeeee; -} -.icon-light { - color: #ffffff; -} -.icon-dark { - color: #333333; -} -.icon-border { - border: solid 1px #eeeeee; - padding: .2em .25em .15em; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.icon-2x { - font-size: 2em; -} -.icon-2x.icon-border { - border-width: 2px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.icon-3x { - font-size: 3em; -} -.icon-3x.icon-border { - border-width: 3px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} -.icon-4x { - font-size: 4em; -} -.icon-4x.icon-border { - border-width: 4px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; -} -.icon-5x { - font-size: 5em; -} -.icon-5x.icon-border { - border-width: 5px; - -webkit-border-radius: 7px; - -moz-border-radius: 7px; - border-radius: 7px; -} -.pull-right { - float: right; -} -.pull-left { - float: left; -} -[class^="icon-"].pull-left, -[class*=" icon-"].pull-left { - margin-right: .3em; -} -[class^="icon-"].pull-right, -[class*=" icon-"].pull-right { - margin-left: .3em; -} -/* BOOTSTRAP SPECIFIC CLASSES - * -------------------------- */ -/* Bootstrap 2.0 sprites.less reset */ -[class^="icon-"], -[class*=" icon-"] { - display: inline; - width: auto; - height: auto; - line-height: normal; - vertical-align: baseline; - background-image: none; - background-position: 0% 0%; - background-repeat: repeat; - margin-top: 0; -} -/* more sprites.less reset */ -.icon-white, -.nav-pills > .active > a > [class^="icon-"], -.nav-pills > .active > a > [class*=" icon-"], -.nav-list > .active > a > [class^="icon-"], -.nav-list > .active > a > [class*=" icon-"], -.navbar-inverse .nav > .active > a > [class^="icon-"], -.navbar-inverse .nav > .active > a > [class*=" icon-"], -.dropdown-menu > li > a:hover > [class^="icon-"], -.dropdown-menu > li > a:hover > [class*=" icon-"], -.dropdown-menu > .active > a > [class^="icon-"], -.dropdown-menu > .active > a > [class*=" icon-"], -.dropdown-submenu:hover > a > [class^="icon-"], -.dropdown-submenu:hover > a > [class*=" icon-"] { - background-image: none; -} -/* keeps Bootstrap styles with and without icons the same */ -.btn [class^="icon-"].icon-large, -.nav [class^="icon-"].icon-large, -.btn [class*=" icon-"].icon-large, -.nav [class*=" icon-"].icon-large { - line-height: .9em; -} -.btn [class^="icon-"].icon-spin, -.nav [class^="icon-"].icon-spin, -.btn [class*=" icon-"].icon-spin, -.nav [class*=" icon-"].icon-spin { - display: inline-block; -} -.nav-tabs [class^="icon-"], -.nav-pills [class^="icon-"], -.nav-tabs [class*=" icon-"], -.nav-pills [class*=" icon-"], -.nav-tabs [class^="icon-"].icon-large, -.nav-pills [class^="icon-"].icon-large, -.nav-tabs [class*=" icon-"].icon-large, -.nav-pills [class*=" icon-"].icon-large { - line-height: .9em; -} -.btn [class^="icon-"].pull-left.icon-2x, -.btn [class*=" icon-"].pull-left.icon-2x, -.btn [class^="icon-"].pull-right.icon-2x, -.btn [class*=" icon-"].pull-right.icon-2x { - margin-top: .18em; -} -.btn [class^="icon-"].icon-spin.icon-large, -.btn [class*=" icon-"].icon-spin.icon-large { - line-height: .8em; -} -.btn.btn-small [class^="icon-"].pull-left.icon-2x, -.btn.btn-small [class*=" icon-"].pull-left.icon-2x, -.btn.btn-small [class^="icon-"].pull-right.icon-2x, -.btn.btn-small [class*=" icon-"].pull-right.icon-2x { - margin-top: .25em; -} -.btn.btn-large [class^="icon-"], -.btn.btn-large [class*=" icon-"] { - margin-top: 0; -} -.btn.btn-large [class^="icon-"].pull-left.icon-2x, -.btn.btn-large [class*=" icon-"].pull-left.icon-2x, -.btn.btn-large [class^="icon-"].pull-right.icon-2x, -.btn.btn-large [class*=" icon-"].pull-right.icon-2x { - margin-top: .05em; -} -.btn.btn-large [class^="icon-"].pull-left.icon-2x, -.btn.btn-large [class*=" icon-"].pull-left.icon-2x { - margin-right: .2em; -} -.btn.btn-large [class^="icon-"].pull-right.icon-2x, -.btn.btn-large [class*=" icon-"].pull-right.icon-2x { - margin-left: .2em; -} -/* EXTRAS - * -------------------------- */ -/* Stacked and layered icon */ -.icon-stack { - position: relative; - display: inline-block; - width: 2em; - height: 2em; - line-height: 2em; - vertical-align: -35%; -} -.icon-stack [class^="icon-"], -.icon-stack [class*=" icon-"] { - display: block; - text-align: center; - position: absolute; - width: 100%; - height: 100%; - font-size: 1em; - line-height: inherit; - *line-height: 2em; -} -.icon-stack .icon-stack-base { - font-size: 2em; - *line-height: 1em; -} -/* Animated rotating icon */ -.icon-spin { - display: inline-block; - -moz-animation: spin 2s infinite linear; - -o-animation: spin 2s infinite linear; - -webkit-animation: spin 2s infinite linear; - animation: spin 2s infinite linear; -} -@-moz-keyframes spin { - 0% { - -moz-transform: rotate(0deg); - } - 100% { - -moz-transform: rotate(359deg); - } -} -@-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - } -} -@-o-keyframes spin { - 0% { - -o-transform: rotate(0deg); - } - 100% { - -o-transform: rotate(359deg); - } -} -@-ms-keyframes spin { - 0% { - -ms-transform: rotate(0deg); - } - 100% { - -ms-transform: rotate(359deg); - } -} -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(359deg); - } -} -/* Icon rotations and mirroring */ -.icon-rotate-90:before { - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -ms-transform: rotate(90deg); - -o-transform: rotate(90deg); - transform: rotate(90deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -} -.icon-rotate-180:before { - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - -o-transform: rotate(180deg); - transform: rotate(180deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -} -.icon-rotate-270:before { - -webkit-transform: rotate(270deg); - -moz-transform: rotate(270deg); - -ms-transform: rotate(270deg); - -o-transform: rotate(270deg); - transform: rotate(270deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -} -.icon-flip-horizontal:before { - -webkit-transform: scale(-1, 1); - -moz-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - -o-transform: scale(-1, 1); - transform: scale(-1, 1); -} -.icon-flip-vertical:before { - -webkit-transform: scale(1, -1); - -moz-transform: scale(1, -1); - -ms-transform: scale(1, -1); - -o-transform: scale(1, -1); - transform: scale(1, -1); -} -/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen - readers do not read off random characters that represent icons */ -.icon-glass:before { - content: "\f000"; -} -.icon-music:before { - content: "\f001"; -} -.icon-search:before { - content: "\f002"; -} -.icon-envelope:before { - content: "\f003"; -} -.icon-heart:before { - content: "\f004"; -} -.icon-star:before { - content: "\f005"; -} -.icon-star-empty:before { - content: "\f006"; -} -.icon-user:before { - content: "\f007"; -} -.icon-film:before { - content: "\f008"; -} -.icon-th-large:before { - content: "\f009"; -} -.icon-th:before { - content: "\f00a"; -} -.icon-th-list:before { - content: "\f00b"; -} -.icon-ok:before { - content: "\f00c"; -} -.icon-remove:before { - content: "\f00d"; -} -.icon-zoom-in:before { - content: "\f00e"; -} -.icon-zoom-out:before { - content: "\f010"; -} -.icon-off:before { - content: "\f011"; -} -.icon-signal:before { - content: "\f012"; -} -.icon-cog:before { - content: "\f013"; -} -.icon-trash:before { - content: "\f014"; -} -.icon-home:before { - content: "\f015"; -} -.icon-file:before { - content: "\f016"; -} -.icon-time:before { - content: "\f017"; -} -.icon-road:before { - content: "\f018"; -} -.icon-download-alt:before { - content: "\f019"; -} -.icon-download:before { - content: "\f01a"; -} -.icon-upload:before { - content: "\f01b"; -} -.icon-inbox:before { - content: "\f01c"; -} -.icon-play-circle:before { - content: "\f01d"; -} -.icon-repeat:before, -.icon-rotate-right:before { - content: "\f01e"; -} -/* F020 doesn't work in Safari. all shifted one down */ -.icon-refresh:before { - content: "\f021"; -} -.icon-list-alt:before { - content: "\f022"; -} -.icon-lock:before { - content: "\f023"; -} -.icon-flag:before { - content: "\f024"; -} -.icon-headphones:before { - content: "\f025"; -} -.icon-volume-off:before { - content: "\f026"; -} -.icon-volume-down:before { - content: "\f027"; -} -.icon-volume-up:before { - content: "\f028"; -} -.icon-qrcode:before { - content: "\f029"; -} -.icon-barcode:before { - content: "\f02a"; -} -.icon-tag:before { - content: "\f02b"; -} -.icon-tags:before { - content: "\f02c"; -} -.icon-book:before { - content: "\f02d"; -} -.icon-bookmark:before { - content: "\f02e"; -} -.icon-print:before { - content: "\f02f"; -} -.icon-camera:before { - content: "\f030"; -} -.icon-font:before { - content: "\f031"; -} -.icon-bold:before { - content: "\f032"; -} -.icon-italic:before { - content: "\f033"; -} -.icon-text-height:before { - content: "\f034"; -} -.icon-text-width:before { - content: "\f035"; -} -.icon-align-left:before { - content: "\f036"; -} -.icon-align-center:before { - content: "\f037"; -} -.icon-align-right:before { - content: "\f038"; -} -.icon-align-justify:before { - content: "\f039"; -} -.icon-list:before { - content: "\f03a"; -} -.icon-indent-left:before { - content: "\f03b"; -} -.icon-indent-right:before { - content: "\f03c"; -} -.icon-facetime-video:before { - content: "\f03d"; -} -.icon-picture:before { - content: "\f03e"; -} -.icon-pencil:before { - content: "\f040"; -} -.icon-map-marker:before { - content: "\f041"; -} -.icon-adjust:before { - content: "\f042"; -} -.icon-tint:before { - content: "\f043"; -} -.icon-edit:before { - content: "\f044"; -} -.icon-share:before { - content: "\f045"; -} -.icon-check:before { - content: "\f046"; -} -.icon-move:before { - content: "\f047"; -} -.icon-step-backward:before { - content: "\f048"; -} -.icon-fast-backward:before { - content: "\f049"; -} -.icon-backward:before { - content: "\f04a"; -} -.icon-play:before { - content: "\f04b"; -} -.icon-pause:before { - content: "\f04c"; -} -.icon-stop:before { - content: "\f04d"; -} -.icon-forward:before { - content: "\f04e"; -} -.icon-fast-forward:before { - content: "\f050"; -} -.icon-step-forward:before { - content: "\f051"; -} -.icon-eject:before { - content: "\f052"; -} -.icon-chevron-left:before { - content: "\f053"; -} -.icon-chevron-right:before { - content: "\f054"; -} -.icon-plus-sign:before { - content: "\f055"; -} -.icon-minus-sign:before { - content: "\f056"; -} -.icon-remove-sign:before { - content: "\f057"; -} -.icon-ok-sign:before { - content: "\f058"; -} -.icon-question-sign:before { - content: "\f059"; -} -.icon-info-sign:before { - content: "\f05a"; -} -.icon-screenshot:before { - content: "\f05b"; -} -.icon-remove-circle:before { - content: "\f05c"; -} -.icon-ok-circle:before { - content: "\f05d"; -} -.icon-ban-circle:before { - content: "\f05e"; -} -.icon-arrow-left:before { - content: "\f060"; -} -.icon-arrow-right:before { - content: "\f061"; -} -.icon-arrow-up:before { - content: "\f062"; -} -.icon-arrow-down:before { - content: "\f063"; -} -.icon-share-alt:before, -.icon-mail-forward:before { - content: "\f064"; -} -.icon-resize-full:before { - content: "\f065"; -} -.icon-resize-small:before { - content: "\f066"; -} -.icon-plus:before { - content: "\f067"; -} -.icon-minus:before { - content: "\f068"; -} -.icon-asterisk:before { - content: "\f069"; -} -.icon-exclamation-sign:before { - content: "\f06a"; -} -.icon-gift:before { - content: "\f06b"; -} -.icon-leaf:before { - content: "\f06c"; -} -.icon-fire:before { - content: "\f06d"; -} -.icon-eye-open:before { - content: "\f06e"; -} -.icon-eye-close:before { - content: "\f070"; -} -.icon-warning-sign:before { - content: "\f071"; -} -.icon-plane:before { - content: "\f072"; -} -.icon-calendar:before { - content: "\f073"; -} -.icon-random:before { - content: "\f074"; -} -.icon-comment:before { - content: "\f075"; -} -.icon-magnet:before { - content: "\f076"; -} -.icon-chevron-up:before { - content: "\f077"; -} -.icon-chevron-down:before { - content: "\f078"; -} -.icon-retweet:before { - content: "\f079"; -} -.icon-shopping-cart:before { - content: "\f07a"; -} -.icon-folder-close:before { - content: "\f07b"; -} -.icon-folder-open:before { - content: "\f07c"; -} -.icon-resize-vertical:before { - content: "\f07d"; -} -.icon-resize-horizontal:before { - content: "\f07e"; -} -.icon-bar-chart:before { - content: "\f080"; -} -.icon-twitter-sign:before { - content: "\f081"; -} -.icon-facebook-sign:before { - content: "\f082"; -} -.icon-camera-retro:before { - content: "\f083"; -} -.icon-key:before { - content: "\f084"; -} -.icon-cogs:before { - content: "\f085"; -} -.icon-comments:before { - content: "\f086"; -} -.icon-thumbs-up:before { - content: "\f087"; -} -.icon-thumbs-down:before { - content: "\f088"; -} -.icon-star-half:before { - content: "\f089"; -} -.icon-heart-empty:before { - content: "\f08a"; -} -.icon-signout:before { - content: "\f08b"; -} -.icon-linkedin-sign:before { - content: "\f08c"; -} -.icon-pushpin:before { - content: "\f08d"; -} -.icon-external-link:before { - content: "\f08e"; -} -.icon-signin:before { - content: "\f090"; -} -.icon-trophy:before { - content: "\f091"; -} -.icon-github-sign:before { - content: "\f092"; -} -.icon-upload-alt:before { - content: "\f093"; -} -.icon-lemon:before { - content: "\f094"; -} -.icon-phone:before { - content: "\f095"; -} -.icon-check-empty:before { - content: "\f096"; -} -.icon-bookmark-empty:before { - content: "\f097"; -} -.icon-phone-sign:before { - content: "\f098"; -} -.icon-twitter:before { - content: "\f099"; -} -.icon-facebook:before { - content: "\f09a"; -} -.icon-github:before { - content: "\f09b"; -} -.icon-unlock:before { - content: "\f09c"; -} -.icon-credit-card:before { - content: "\f09d"; -} -.icon-rss:before { - content: "\f09e"; -} -.icon-hdd:before { - content: "\f0a0"; -} -.icon-bullhorn:before { - content: "\f0a1"; -} -.icon-bell:before { - content: "\f0a2"; -} -.icon-certificate:before { - content: "\f0a3"; -} -.icon-hand-right:before { - content: "\f0a4"; -} -.icon-hand-left:before { - content: "\f0a5"; -} -.icon-hand-up:before { - content: "\f0a6"; -} -.icon-hand-down:before { - content: "\f0a7"; -} -.icon-circle-arrow-left:before { - content: "\f0a8"; -} -.icon-circle-arrow-right:before { - content: "\f0a9"; -} -.icon-circle-arrow-up:before { - content: "\f0aa"; -} -.icon-circle-arrow-down:before { - content: "\f0ab"; -} -.icon-globe:before { - content: "\f0ac"; -} -.icon-wrench:before { - content: "\f0ad"; -} -.icon-tasks:before { - content: "\f0ae"; -} -.icon-filter:before { - content: "\f0b0"; -} -.icon-briefcase:before { - content: "\f0b1"; -} -.icon-fullscreen:before { - content: "\f0b2"; -} -.icon-group:before { - content: "\f0c0"; -} -.icon-link:before { - content: "\f0c1"; -} -.icon-cloud:before { - content: "\f0c2"; -} -.icon-beaker:before { - content: "\f0c3"; -} -.icon-cut:before { - content: "\f0c4"; -} -.icon-copy:before { - content: "\f0c5"; -} -.icon-paper-clip:before { - content: "\f0c6"; -} -.icon-save:before { - content: "\f0c7"; -} -.icon-sign-blank:before { - content: "\f0c8"; -} -.icon-reorder:before { - content: "\f0c9"; -} -.icon-list-ul:before { - content: "\f0ca"; -} -.icon-list-ol:before { - content: "\f0cb"; -} -.icon-strikethrough:before { - content: "\f0cc"; -} -.icon-underline:before { - content: "\f0cd"; -} -.icon-table:before { - content: "\f0ce"; -} -.icon-magic:before { - content: "\f0d0"; -} -.icon-truck:before { - content: "\f0d1"; -} -.icon-pinterest:before { - content: "\f0d2"; -} -.icon-pinterest-sign:before { - content: "\f0d3"; -} -.icon-google-plus-sign:before { - content: "\f0d4"; -} -.icon-google-plus:before { - content: "\f0d5"; -} -.icon-money:before { - content: "\f0d6"; -} -.icon-caret-down:before { - content: "\f0d7"; -} -.icon-caret-up:before { - content: "\f0d8"; -} -.icon-caret-left:before { - content: "\f0d9"; -} -.icon-caret-right:before { - content: "\f0da"; -} -.icon-columns:before { - content: "\f0db"; -} -.icon-sort:before { - content: "\f0dc"; -} -.icon-sort-down:before { - content: "\f0dd"; -} -.icon-sort-up:before { - content: "\f0de"; -} -.icon-envelope-alt:before { - content: "\f0e0"; -} -.icon-linkedin:before { - content: "\f0e1"; -} -.icon-undo:before, -.icon-rotate-left:before { - content: "\f0e2"; -} -.icon-legal:before { - content: "\f0e3"; -} -.icon-dashboard:before { - content: "\f0e4"; -} -.icon-comment-alt:before { - content: "\f0e5"; -} -.icon-comments-alt:before { - content: "\f0e6"; -} -.icon-bolt:before { - content: "\f0e7"; -} -.icon-sitemap:before { - content: "\f0e8"; -} -.icon-umbrella:before { - content: "\f0e9"; -} -.icon-paste:before { - content: "\f0ea"; -} -.icon-lightbulb:before { - content: "\f0eb"; -} -.icon-exchange:before { - content: "\f0ec"; -} -.icon-cloud-download:before { - content: "\f0ed"; -} -.icon-cloud-upload:before { - content: "\f0ee"; -} -.icon-user-md:before { - content: "\f0f0"; -} -.icon-stethoscope:before { - content: "\f0f1"; -} -.icon-suitcase:before { - content: "\f0f2"; -} -.icon-bell-alt:before { - content: "\f0f3"; -} -.icon-coffee:before { - content: "\f0f4"; -} -.icon-food:before { - content: "\f0f5"; -} -.icon-file-alt:before { - content: "\f0f6"; -} -.icon-building:before { - content: "\f0f7"; -} -.icon-hospital:before { - content: "\f0f8"; -} -.icon-ambulance:before { - content: "\f0f9"; -} -.icon-medkit:before { - content: "\f0fa"; -} -.icon-fighter-jet:before { - content: "\f0fb"; -} -.icon-beer:before { - content: "\f0fc"; -} -.icon-h-sign:before { - content: "\f0fd"; -} -.icon-plus-sign-alt:before { - content: "\f0fe"; -} -.icon-double-angle-left:before { - content: "\f100"; -} -.icon-double-angle-right:before { - content: "\f101"; -} -.icon-double-angle-up:before { - content: "\f102"; -} -.icon-double-angle-down:before { - content: "\f103"; -} -.icon-angle-left:before { - content: "\f104"; -} -.icon-angle-right:before { - content: "\f105"; -} -.icon-angle-up:before { - content: "\f106"; -} -.icon-angle-down:before { - content: "\f107"; -} -.icon-desktop:before { - content: "\f108"; -} -.icon-laptop:before { - content: "\f109"; -} -.icon-tablet:before { - content: "\f10a"; -} -.icon-mobile-phone:before { - content: "\f10b"; -} -.icon-circle-blank:before { - content: "\f10c"; -} -.icon-quote-left:before { - content: "\f10d"; -} -.icon-quote-right:before { - content: "\f10e"; -} -.icon-spinner:before { - content: "\f110"; -} -.icon-circle:before { - content: "\f111"; -} -.icon-reply:before, -.icon-mail-reply:before { - content: "\f112"; -} -.icon-folder-close-alt:before { - content: "\f114"; -} -.icon-folder-open-alt:before { - content: "\f115"; -} -.icon-expand-alt:before { - content: "\f116"; -} -.icon-collapse-alt:before { - content: "\f117"; -} -.icon-smile:before { - content: "\f118"; -} -.icon-frown:before { - content: "\f119"; -} -.icon-meh:before { - content: "\f11a"; -} -.icon-gamepad:before { - content: "\f11b"; -} -.icon-keyboard:before { - content: "\f11c"; -} -.icon-flag-alt:before { - content: "\f11d"; -} -.icon-flag-checkered:before { - content: "\f11e"; -} -.icon-terminal:before { - content: "\f120"; -} -.icon-code:before { - content: "\f121"; -} -.icon-reply-all:before { - content: "\f122"; -} -.icon-mail-reply-all:before { - content: "\f122"; -} -.icon-star-half-full:before, -.icon-star-half-empty:before { - content: "\f123"; -} -.icon-location-arrow:before { - content: "\f124"; -} -.icon-crop:before { - content: "\f125"; -} -.icon-code-fork:before { - content: "\f126"; -} -.icon-unlink:before { - content: "\f127"; -} -.icon-question:before { - content: "\f128"; -} -.icon-info:before { - content: "\f129"; -} -.icon-exclamation:before { - content: "\f12a"; -} -.icon-superscript:before { - content: "\f12b"; -} -.icon-subscript:before { - content: "\f12c"; -} -.icon-eraser:before { - content: "\f12d"; -} -.icon-puzzle-piece:before { - content: "\f12e"; -} -.icon-microphone:before { - content: "\f130"; -} -.icon-microphone-off:before { - content: "\f131"; -} -.icon-shield:before { - content: "\f132"; -} -.icon-calendar-empty:before { - content: "\f133"; -} -.icon-fire-extinguisher:before { - content: "\f134"; -} -.icon-rocket:before { - content: "\f135"; -} -.icon-maxcdn:before { - content: "\f136"; -} -.icon-chevron-sign-left:before { - content: "\f137"; -} -.icon-chevron-sign-right:before { - content: "\f138"; -} -.icon-chevron-sign-up:before { - content: "\f139"; -} -.icon-chevron-sign-down:before { - content: "\f13a"; -} -.icon-html5:before { - content: "\f13b"; -} -.icon-css3:before { - content: "\f13c"; -} -.icon-anchor:before { - content: "\f13d"; -} -.icon-unlock-alt:before { - content: "\f13e"; -} -.icon-bullseye:before { - content: "\f140"; -} -.icon-ellipsis-horizontal:before { - content: "\f141"; -} -.icon-ellipsis-vertical:before { - content: "\f142"; -} -.icon-rss-sign:before { - content: "\f143"; -} -.icon-play-sign:before { - content: "\f144"; -} -.icon-ticket:before { - content: "\f145"; -} -.icon-minus-sign-alt:before { - content: "\f146"; -} -.icon-check-minus:before { - content: "\f147"; -} -.icon-level-up:before { - content: "\f148"; -} -.icon-level-down:before { - content: "\f149"; -} -.icon-check-sign:before { - content: "\f14a"; -} -.icon-edit-sign:before { - content: "\f14b"; -} -.icon-external-link-sign:before { - content: "\f14c"; -} -.icon-share-sign:before { - content: "\f14d"; -} diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index 4aa5f88e8b..8d0ea210ca 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -1,95 +1,7 @@ // lms - views - verification flow // ==================== -// MISC: extends - type -// application: canned headings -%hd-lv1 { - @extend %t-title1; - @extend %t-weight1; - color: $m-gray-d4; - margin: 0 0 ($baseline*2) 0; -} - -%hd-lv2 { - @extend %t-title4; - @extend %t-weight1; - margin: 0 0 ($baseline*0.75) 0; - border-bottom: 1px solid $m-gray-l3; - padding-bottom: ($baseline/2); - color: $m-gray-d4; -} - -%hd-lv3 { - @extend %t-title6; - @extend %t-weight4; - margin: 0 0 ($baseline/4) 0; - color: $m-gray-d4; -} - -%hd-lv4 { - @extend %t-title6; - @extend %t-weight2; - margin: 0 0 $baseline 0; - color: $m-gray-d4; -} - -%hd-lv5 { - @extend %t-title7; - @extend %t-weight4; - margin: 0 0 ($baseline/4) 0; - color: $m-gray-d4; -} - -// application: canned copy -%copy-base { - @extend %t-copy-base; - color: $m-gray-d2; -} - -%copy-lead1 { - @extend %t-copy-lead2; - color: $m-gray; -} - -%copy-detail { - @extend %t-copy-sub1; - @extend %t-weight3; - color: $m-gray-d1; -} - -%copy-metadata { - @extend %t-copy-sub2; - color: $m-gray-d1; - - - %copy-metadata-value { - @extend %t-weight2; - } - - %copy-metadata-value { - @extend %t-weight4; - } -} - -// application: canned links -%copy-link { - border-bottom: 1px dotted transparent; - - &:hover, &:active { - border-color: $link-color-d1; - } -} - -%copy-badge { - @extend %t-title8; - @extend %t-weight5; - border-radius: ($baseline/5); - padding: ($baseline/2) $baseline; - text-transform: uppercase; -} - -// ==================== - +// MISC: extends - button %btn-verify-primary { @extend %btn-primary-green; } diff --git a/lms/templates/courseware/courseware-error.html b/lms/templates/courseware/courseware-error.html index f0f7969026..9018495bff 100644 --- a/lms/templates/courseware/courseware-error.html +++ b/lms/templates/courseware/courseware-error.html @@ -6,7 +6,8 @@ <%block name="title">${_("Courseware")} - ${settings.PLATFORM_NAME} <%block name="headextra"> - <%static:css group='course'/> +<%static:css group='style-course-vendor'/> +<%static:css group='style-course'/> <%include file="/courseware/course_navigation.html" args="active_page='courseware'" /> diff --git a/lms/templates/courseware/courseware.html b/lms/templates/courseware/courseware.html index 2a52b50b09..3f5c1d8c00 100644 --- a/lms/templates/courseware/courseware.html +++ b/lms/templates/courseware/courseware.html @@ -5,8 +5,11 @@ <%block name="title">${_("{course_number} Courseware").format(course_number=course.display_number_with_default) | h} <%block name="headextra"> - <%static:css group='course'/> - <%include file="../discussion/_js_head_dependencies.html" /> +<%static:css group='style-course-vendor'/> +<%static:css group='style-course'/> + +<%include file="../discussion/_js_head_dependencies.html" /> + % if show_chat: ## It'd be better to have this in a place like lms/css/vendor/candy, diff --git a/lms/templates/courseware/gradebook.html b/lms/templates/courseware/gradebook.html index 2c9f3e8474..8828721555 100644 --- a/lms/templates/courseware/gradebook.html +++ b/lms/templates/courseware/gradebook.html @@ -11,7 +11,8 @@ <%block name="headextra"> - <%static:css group='course'/> +<%static:css group='style-course-vendor'/> +<%static:css group='style-course'/>