diff --git a/xblocks_contrib/discussion/discussion.py b/xblocks_contrib/discussion/discussion.py index ed945c64..88db1fe2 100644 --- a/xblocks_contrib/discussion/discussion.py +++ b/xblocks_contrib/discussion/discussion.py @@ -1,104 +1,319 @@ -"""TO-DO: Write a description of what this XBlock is.""" +""" +Discussion XBlock +""" -from importlib.resources import files +import logging +import urllib -from django.utils import translation +import markupsafe +from django.conf import settings +from django.template.loader import render_to_string +from django.urls import reverse +from django.utils.translation import get_language_bidi from web_fragments.fragment import Fragment +from xblock.completable import XBlockCompletionMode from xblock.core import XBlock -from xblock.fields import Integer, Scope +from xblock.fields import UNIQUE_ID, Scope, String from xblock.utils.resources import ResourceLoader +from xblock.utils.studio_editable import StudioEditableXBlockMixin -resource_loader = ResourceLoader(__name__) +from xblocks_contrib.common.xml_utils import LegacyXmlMixin +log = logging.getLogger(__name__) +loader = ResourceLoader(__name__) +Text = markupsafe.escape # pylint: disable=invalid-name -# This Xblock is just to test the strucutre of xblocks-contrib -@XBlock.needs("i18n") -class DiscussionXBlock(XBlock): + +def _(text): """ - TO-DO: document what your XBlock does. + A noop underscore function that marks strings for extraction. """ + return text - # Fields are defined on the class. You can access them in your code as - # self.. - # TO-DO: delete count, and define your own fields. - count = Integer( - default=0, - scope=Scope.user_state, - help="A simple counter, to show something happening", - ) +def HTML(html): # pylint: disable=invalid-name + """ + Mark a string as already HTML, so that it won't be escaped before output. + + Use this function when formatting HTML into other strings. It must be + used in conjunction with ``Text()``, and both ``HTML()`` and ``Text()`` + must be closed before any calls to ``format()``:: + + <%page expression_filter="h"/> + <%! + from django.utils.translation import gettext as _ + + from openedx.core.djangolib.markup import HTML, Text + %> + ${Text(_("Write & send {start}email{end}")).format( + start=HTML("").format(user.email), + end=HTML(""), + )} + + """ + return markupsafe.Markup(html) + + +def is_discussion_enabled(course_id): # pylint: disable=unused-argument + """ + Return True if discussions are enabled; else False + """ + return settings.FEATURES.get('ENABLE_DISCUSSION_SERVICE') + - # Indicates that this XBlock has been extracted from edx-platform. +@XBlock.needs("i18n") +@XBlock.wants("user") +# pylint: disable=abstract-method +class DiscussionXBlock(XBlock, StudioEditableXBlockMixin, LegacyXmlMixin): + """ + Provides a discussion forum that is inline with other content in the courseware. + """ is_extracted = True + completion_mode = XBlockCompletionMode.EXCLUDED + + discussion_id = String(scope=Scope.settings, default=UNIQUE_ID) + display_name = String( + display_name=_("Display Name"), + help=_("The display name for this component."), + default="Discussion", + scope=Scope.settings + ) + discussion_category = String( + display_name=_("Category"), + default=_("Week 1"), + help=_( + "A category name for the discussion. " + "This name appears in the left pane of the discussion forum for the course." + ), + scope=Scope.settings + ) + discussion_target = String( + display_name=_("Subcategory"), + default="Topic-Level Student-Visible Label", + help=_( + "A subcategory name for the discussion. " + "This name appears in the left pane of the discussion forum for the course." + ), + scope=Scope.settings + ) + sort_key = String(scope=Scope.settings) + + editable_fields = ["display_name", "discussion_category", "discussion_target"] + + has_author_view = True # Tells Studio to use author_view + + @property + def course_key(self): + return getattr(self.scope_ids.usage_id, 'course_key', None) - def resource_string(self, path): - """Handy helper for getting resources from our kit.""" - return files(__package__).joinpath(path).read_text(encoding="utf-8") + @property + def is_visible(self): + """ + Discussion Xblock does not support new OPEN_EDX provider + """ + # TO-DO: Need to fix import issues + # provider = DiscussionsConfiguration.get(self.course_key) + # return provider.provider_type == Provider.LEGACY + return True + + @property + def django_user(self): + """ + Returns django user associated with user currently interacting + with the XBlock. + """ + user_service = self.runtime.service(self, 'user') + if not user_service: + return None + return user_service._django_user # pylint: disable=protected-access + + def get_all_js_files(self): + """ + Returns list of all JS files in the correct dependency order. + """ + return [ + # Vendor files (load first as dependencies) + 'static/js/vendor/Markdown.Converter.js', + 'static/js/vendor/Markdown.Sanitizer.js', + 'static/js/vendor/Markdown.Editor.js', + 'static/js/vendor/jquery.ajaxfileupload.js', + 'static/js/vendor/jquery.timeago.js', + 'static/js/vendor/jquery.timeago.locale.js', + 'static/js/vendor/jquery.truncate.js', + 'static/js/vendor/split.js', + # MathJax utilities + 'static/js/mathjax_accessible.js', + 'static/js/mathjax_delay_renderer.js', + # Core utilities and models + 'static/js/common/utils.js', + 'static/js/common/models/discussion_course_settings.js', + 'static/js/common/models/discussion_user.js', + # Core discussion functionality + # content.js must come before discussion.js because discussion.js uses Thread + 'static/js/common/content.js', + 'static/js/common/discussion.js', + 'static/js/common/mathjax_include.js', + # Custom WMD editor + 'static/js/customwmd.js', + # Views (depend on core discussion and models) + 'static/js/common/views/discussion_content_view.js', + 'static/js/common/views/discussion_inline_view.js', + 'static/js/common/views/discussion_thread_edit_view.js', + 'static/js/common/views/discussion_thread_list_view.js', + 'static/js/common/views/discussion_thread_profile_view.js', + 'static/js/common/views/discussion_thread_show_view.js', + 'static/js/common/views/discussion_thread_view.js', + 'static/js/common/views/discussion_topic_menu_view.js', + 'static/js/common/views/new_post_view.js', + 'static/js/common/views/response_comment_edit_view.js', + 'static/js/common/views/response_comment_show_view.js', + 'static/js/common/views/response_comment_view.js', + 'static/js/common/views/thread_response_edit_view.js', + 'static/js/common/views/thread_response_show_view.js', + 'static/js/common/views/thread_response_view.js', + ] + + def add_resource_urls(self, fragment): + """ + Adds URLs for JS and CSS resources that this XBlock depends on to `fragment`. + """ + + css_file_path = ( + 'static/css/inline-discussion-rtl.css' + if get_language_bidi() + else 'static/css/inline-discussion.css' + ) + fragment.add_css(loader.load_unicode(css_file_path)) + + # Load all JS files individually in the correct order + for js_file in self.get_all_js_files(): + fragment.add_javascript(loader.load_unicode(js_file)) + + def has_permission(self, permission): # pylint: disable=unused-argument + """ + Encapsulates lms specific functionality, as `has_permission` is not + importable outside of lms context, namely in tests. + + :param user: + :param str permission: Permission + :rtype: bool + """ + # TO-DO: Need to fix import issues + # return has_permission(self.django_user, permission, self.course_key) + return True - # TO-DO: change this view to display your data your own way. def student_view(self, context=None): """ - Create primary view of the DiscussionXBlock, shown to students when viewing courses. + Renders student view for LMS. """ - if context: - pass # TO-DO: do something based on the context. - frag = Fragment() - frag.add_content( - resource_loader.render_django_template( - "templates/discussion.html", - { - "count": self.count, - }, - i18n_service=self.runtime.service(self, "i18n"), + fragment = Fragment() + + if not self.is_visible: + return fragment + + self.add_resource_urls(fragment) + login_msg = '' + + if not self.django_user.is_authenticated: + qs = urllib.parse.urlencode({ + 'course_id': self.course_key, + 'enrollment_action': 'enroll', + 'email_opt_in': False, + }) + login_msg = Text(_("You are not signed in. To view the discussion content, {sign_in_link} or " + "{register_link}, and enroll in this course.")).format( + sign_in_link=HTML('{sign_in_label}').format( + sign_in_label=_('sign in'), + url='{}?{}'.format(reverse('signin_user'), qs), + ), + register_link=HTML('{register_label}').format( + register_label=_('register'), + url='{}?{}'.format(reverse('register_user'), qs), + ), ) + + if is_discussion_enabled(self.course_key): + context = { + 'discussion_id': self.discussion_id, + 'display_name': self.display_name if self.display_name else _("Discussion"), + 'user': self.django_user, + 'course_id': self.course_key, + 'discussion_category': self.discussion_category, + 'discussion_target': self.discussion_target, + 'can_create_thread': self.has_permission("create_thread"), + 'can_create_comment': self.has_permission("create_comment"), + 'can_create_subcomment': self.has_permission("create_sub_comment"), + 'login_msg': login_msg, + } + fragment.add_content( + render_to_string('discussion/_discussion_inline.html', context) + ) + + fragment.initialize_js('DiscussionInlineBlock') + + return fragment + + def author_view(self, context=None): + """ + Renders author view for Studio. + """ + fragment = Fragment() + context = { + 'discussion_id': self.discussion_id, + 'is_visible': self.is_visible, + } + fragment.add_content( + loader.render_django_template('templates/_discussion_inline_studio.html', context) ) + return fragment - frag.add_css(self.resource_string("static/css/discussion.css")) - frag.add_javascript(self.resource_string("static/js/src/discussion.js")) - frag.initialize_js("DiscussionXBlock") - return frag + def student_view_data(self): + """ + Returns a JSON representation of the student_view of this XBlock. + """ + return {'topic_id': self.discussion_id} - # TO-DO: change this handler to perform your own actions. You may need more - # than one handler, or you may not need any handlers at all. - @XBlock.json_handler - def increment_count(self, data, suffix=""): + @classmethod + def parse_xml(cls, node, runtime, keys): """ - Increments data. An example handler. + Parses OLX into XBlock. + + This method is overridden here to allow parsing legacy OLX, coming from discussion XModule. + XBlock stores all the associated data, fields and children in a XML element inlined into vertical XML file + XModule stored only minimal data on the element included into vertical XML and used a dedicated "discussion" + folder in OLX to store fields and children. Also, some info was put into "policy.json" file. + + If no external data sources are found (file in "discussion" folder), it is exactly equivalent to base method + XBlock.parse_xml. Otherwise this method parses file in "discussion" folder (known as definition_xml), applies + policy.json and updates fields accordingly. """ - if suffix: - pass # TO-DO: Use the suffix when storing data. - # Just to show data coming in... - assert data["hello"] == "world" + block = super().parse_xml(node, runtime, keys) - self.count += 1 - return {"count": self.count} + cls._apply_metadata_and_policy(block, node, runtime) - # TO-DO: change this to create the scenarios you'd like to see in the - # workbench while developing your XBlock. - @staticmethod - def workbench_scenarios(): - """Create canned scenario for display in the workbench.""" - return [ - ( - "DiscussionXBlock", - """<_discussion_extracted/> - """, - ), - ( - "Multiple DiscussionXBlock", - """ - <_discussion_extracted/> - <_discussion_extracted/> - <_discussion_extracted/> - - """, - ), - ] + return block - @staticmethod - def get_dummy(): + @classmethod + def _apply_metadata_and_policy(cls, block, node, runtime): """ - Generate initial i18n with dummy method. + Attempt to load definition XML from "discussion" folder in OLX, than parse it and update block fields """ - return translation.gettext_noop("Dummy") + if node.get('url_name') is None: + return # Newer/XBlock XML format - no need to load an additional file. + try: + definition_xml, _ = cls.load_definition_xml(node, runtime, block.scope_ids.def_id) + except Exception as err: # pylint: disable=broad-except + log.info( + "Exception %s when trying to load definition xml for block %s - assuming XBlock export format", + err, + block + ) + return + + metadata = cls.load_metadata(definition_xml) + cls.apply_policy(metadata, runtime.get_policy(block.scope_ids.usage_id)) + + for field_name, value in metadata.items(): + if field_name in block.fields: + setattr(block, field_name, value) diff --git a/xblocks_contrib/discussion/static/css/inline-discussion-rtl.css b/xblocks_contrib/discussion/static/css/inline-discussion-rtl.css new file mode 100644 index 00000000..713be612 --- /dev/null +++ b/xblocks_contrib/discussion/static/css/inline-discussion-rtl.css @@ -0,0 +1,4572 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +.align-baseline { + vertical-align: baseline !important; } + +.align-top { + vertical-align: top !important; } + +.align-middle { + vertical-align: middle !important; } + +.align-bottom { + vertical-align: bottom !important; } + +.align-text-bottom { + vertical-align: text-bottom !important; } + +.align-text-top { + vertical-align: text-top !important; } + +.bg-primary { + background-color: #0075b4 !important; } + +a.bg-primary:hover, a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { + background-color: #005481 !important; } + +.bg-secondary { + background-color: #313131 !important; } + +a.bg-secondary:hover, a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { + background-color: #181818 !important; } + +.bg-success { + background-color: #008100 !important; } + +a.bg-success:hover, a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { + background-color: #004e00 !important; } + +.bg-info { + background-color: #17a2b8 !important; } + +a.bg-info:hover, a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { + background-color: #117a8b !important; } + +.bg-warning { + background-color: #e2c01f !important; } + +a.bg-warning:hover, a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { + background-color: #b69b18 !important; } + +.bg-danger { + background-color: #b20610 !important; } + +a.bg-danger:hover, a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { + background-color: #81040c !important; } + +.bg-light { + background-color: #e7e7e7 !important; } + +a.bg-light:hover, a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { + background-color: #cecece !important; } + +.bg-dark { + background-color: #313131 !important; } + +a.bg-dark:hover, a.bg-dark:focus, +button.bg-dark:hover, +button.bg-dark:focus { + background-color: #181818 !important; } + +.bg-inverse { + background-color: #fff !important; } + +a.bg-inverse:hover, a.bg-inverse:focus, +button.bg-inverse:hover, +button.bg-inverse:focus { + background-color: #e6e6e6 !important; } + +.bg-disabled { + background-color: #767676 !important; } + +a.bg-disabled:hover, a.bg-disabled:focus, +button.bg-disabled:hover, +button.bg-disabled:focus { + background-color: #5d5d5d !important; } + +.bg-purchase { + background-color: #008100 !important; } + +a.bg-purchase:hover, a.bg-purchase:focus, +button.bg-purchase:hover, +button.bg-purchase:focus { + background-color: #004e00 !important; } + +.bg-lightest { + background-color: #f5f5f5 !important; } + +a.bg-lightest:hover, a.bg-lightest:focus, +button.bg-lightest:hover, +button.bg-lightest:focus { + background-color: gainsboro !important; } + +.bg-darker { + background-color: #111 !important; } + +a.bg-darker:hover, a.bg-darker:focus, +button.bg-darker:hover, +button.bg-darker:focus { + background-color: black !important; } + +.bg-darkest { + background-color: #000 !important; } + +a.bg-darkest:hover, a.bg-darkest:focus, +button.bg-darkest:hover, +button.bg-darkest:focus { + background-color: black !important; } + +.bg-white { + background-color: #fff !important; } + +.bg-transparent { + background-color: transparent !important; } + +.border { + border: 1px solid #e7e7e7 !important; } + +.border-top { + border-top: 1px solid #e7e7e7 !important; } + +.border-right { + border-right: 1px solid #e7e7e7 !important; } + +.border-bottom { + border-bottom: 1px solid #e7e7e7 !important; } + +.border-left { + border-left: 1px solid #e7e7e7 !important; } + +.border-0 { + border: 0 !important; } + +.border-top-0 { + border-top: 0 !important; } + +.border-right-0 { + border-right: 0 !important; } + +.border-bottom-0 { + border-bottom: 0 !important; } + +.border-left-0 { + border-left: 0 !important; } + +.border-primary { + border-color: #0075b4 !important; } + +.border-secondary { + border-color: #313131 !important; } + +.border-success { + border-color: #008100 !important; } + +.border-info { + border-color: #17a2b8 !important; } + +.border-warning { + border-color: #e2c01f !important; } + +.border-danger { + border-color: #b20610 !important; } + +.border-light { + border-color: #e7e7e7 !important; } + +.border-dark { + border-color: #313131 !important; } + +.border-inverse { + border-color: #fff !important; } + +.border-disabled { + border-color: #767676 !important; } + +.border-purchase { + border-color: #008100 !important; } + +.border-lightest { + border-color: #f5f5f5 !important; } + +.border-darker { + border-color: #111 !important; } + +.border-darkest { + border-color: #000 !important; } + +.border-white { + border-color: #fff !important; } + +.rounded { + border-radius: 0.1875rem !important; } + +.rounded-top { + border-top-left-radius: 0.1875rem !important; + border-top-right-radius: 0.1875rem !important; } + +.rounded-right { + border-top-right-radius: 0.1875rem !important; + border-bottom-right-radius: 0.1875rem !important; } + +.rounded-bottom { + border-bottom-right-radius: 0.1875rem !important; + border-bottom-left-radius: 0.1875rem !important; } + +.rounded-left { + border-top-left-radius: 0.1875rem !important; + border-bottom-left-radius: 0.1875rem !important; } + +.rounded-circle { + border-radius: 50% !important; } + +.rounded-0 { + border-radius: 0 !important; } + +.clearfix:after { + content: ""; + display: table; + clear: both; } + +.d-none { + display: none !important; } + +.d-inline { + display: inline !important; } + +.d-inline-block { + display: inline-block !important; } + +.d-block { + display: block !important; } + +.d-table { + display: table !important; } + +.d-table-row { + display: table-row !important; } + +.d-table-cell { + display: table-cell !important; } + +.d-flex { + display: flex !important; } + +.d-inline-flex { + display: inline-flex !important; } + +@media (min-width: 576px) { + .d-sm-none { + display: none !important; } + .d-sm-inline { + display: inline !important; } + .d-sm-inline-block { + display: inline-block !important; } + .d-sm-block { + display: block !important; } + .d-sm-table { + display: table !important; } + .d-sm-table-row { + display: table-row !important; } + .d-sm-table-cell { + display: table-cell !important; } + .d-sm-flex { + display: flex !important; } + .d-sm-inline-flex { + display: inline-flex !important; } } + +@media (min-width: 768px) { + .d-md-none { + display: none !important; } + .d-md-inline { + display: inline !important; } + .d-md-inline-block { + display: inline-block !important; } + .d-md-block { + display: block !important; } + .d-md-table { + display: table !important; } + .d-md-table-row { + display: table-row !important; } + .d-md-table-cell { + display: table-cell !important; } + .d-md-flex { + display: flex !important; } + .d-md-inline-flex { + display: inline-flex !important; } } + +@media (min-width: 992px) { + .d-lg-none { + display: none !important; } + .d-lg-inline { + display: inline !important; } + .d-lg-inline-block { + display: inline-block !important; } + .d-lg-block { + display: block !important; } + .d-lg-table { + display: table !important; } + .d-lg-table-row { + display: table-row !important; } + .d-lg-table-cell { + display: table-cell !important; } + .d-lg-flex { + display: flex !important; } + .d-lg-inline-flex { + display: inline-flex !important; } } + +@media (min-width: 1200px) { + .d-xl-none { + display: none !important; } + .d-xl-inline { + display: inline !important; } + .d-xl-inline-block { + display: inline-block !important; } + .d-xl-block { + display: block !important; } + .d-xl-table { + display: table !important; } + .d-xl-table-row { + display: table-row !important; } + .d-xl-table-cell { + display: table-cell !important; } + .d-xl-flex { + display: flex !important; } + .d-xl-inline-flex { + display: inline-flex !important; } } + +@media print { + .d-print-none { + display: none !important; } + .d-print-inline { + display: inline !important; } + .d-print-inline-block { + display: inline-block !important; } + .d-print-block { + display: block !important; } + .d-print-table { + display: table !important; } + .d-print-table-row { + display: table-row !important; } + .d-print-table-cell { + display: table-cell !important; } + .d-print-flex { + display: flex !important; } + .d-print-inline-flex { + display: inline-flex !important; } } + +.embed-responsive { + position: relative; + display: block; + width: 100%; + padding: 0; + overflow: hidden; } + .embed-responsive::before { + display: block; + content: ""; } + .embed-responsive .embed-responsive-item, + .embed-responsive iframe, + .embed-responsive embed, + .embed-responsive object, + .embed-responsive video { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; } + +.embed-responsive-21by9::before { + padding-top: 42.85714%; } + +.embed-responsive-16by9::before { + padding-top: 56.25%; } + +.embed-responsive-4by3::before { + padding-top: 75%; } + +.embed-responsive-1by1::before { + padding-top: 100%; } + +.flex-row { + flex-direction: row !important; } + +.flex-column { + flex-direction: column !important; } + +.flex-row-reverse { + flex-direction: row-reverse !important; } + +.flex-column-reverse { + flex-direction: column-reverse !important; } + +.flex-wrap { + flex-wrap: wrap !important; } + +.flex-nowrap { + flex-wrap: nowrap !important; } + +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; } + +.justify-content-start { + justify-content: flex-start !important; } + +.justify-content-end { + justify-content: flex-end !important; } + +.justify-content-center { + justify-content: center !important; } + +.justify-content-between { + justify-content: space-between !important; } + +.justify-content-around { + justify-content: space-around !important; } + +.align-items-start { + align-items: flex-start !important; } + +.align-items-end { + align-items: flex-end !important; } + +.align-items-center { + align-items: center !important; } + +.align-items-baseline { + align-items: baseline !important; } + +.align-items-stretch { + align-items: stretch !important; } + +.align-content-start { + align-content: flex-start !important; } + +.align-content-end { + align-content: flex-end !important; } + +.align-content-center { + align-content: center !important; } + +.align-content-between { + align-content: space-between !important; } + +.align-content-around { + align-content: space-around !important; } + +.align-content-stretch { + align-content: stretch !important; } + +.align-self-auto { + align-self: auto !important; } + +.align-self-start { + align-self: flex-start !important; } + +.align-self-end { + align-self: flex-end !important; } + +.align-self-center { + align-self: center !important; } + +.align-self-baseline { + align-self: baseline !important; } + +.align-self-stretch { + align-self: stretch !important; } + +@media (min-width: 576px) { + .flex-sm-row { + flex-direction: row !important; } + .flex-sm-column { + flex-direction: column !important; } + .flex-sm-row-reverse { + flex-direction: row-reverse !important; } + .flex-sm-column-reverse { + flex-direction: column-reverse !important; } + .flex-sm-wrap { + flex-wrap: wrap !important; } + .flex-sm-nowrap { + flex-wrap: nowrap !important; } + .flex-sm-wrap-reverse { + flex-wrap: wrap-reverse !important; } + .justify-content-sm-start { + justify-content: flex-start !important; } + .justify-content-sm-end { + justify-content: flex-end !important; } + .justify-content-sm-center { + justify-content: center !important; } + .justify-content-sm-between { + justify-content: space-between !important; } + .justify-content-sm-around { + justify-content: space-around !important; } + .align-items-sm-start { + align-items: flex-start !important; } + .align-items-sm-end { + align-items: flex-end !important; } + .align-items-sm-center { + align-items: center !important; } + .align-items-sm-baseline { + align-items: baseline !important; } + .align-items-sm-stretch { + align-items: stretch !important; } + .align-content-sm-start { + align-content: flex-start !important; } + .align-content-sm-end { + align-content: flex-end !important; } + .align-content-sm-center { + align-content: center !important; } + .align-content-sm-between { + align-content: space-between !important; } + .align-content-sm-around { + align-content: space-around !important; } + .align-content-sm-stretch { + align-content: stretch !important; } + .align-self-sm-auto { + align-self: auto !important; } + .align-self-sm-start { + align-self: flex-start !important; } + .align-self-sm-end { + align-self: flex-end !important; } + .align-self-sm-center { + align-self: center !important; } + .align-self-sm-baseline { + align-self: baseline !important; } + .align-self-sm-stretch { + align-self: stretch !important; } } + +@media (min-width: 768px) { + .flex-md-row { + flex-direction: row !important; } + .flex-md-column { + flex-direction: column !important; } + .flex-md-row-reverse { + flex-direction: row-reverse !important; } + .flex-md-column-reverse { + flex-direction: column-reverse !important; } + .flex-md-wrap { + flex-wrap: wrap !important; } + .flex-md-nowrap { + flex-wrap: nowrap !important; } + .flex-md-wrap-reverse { + flex-wrap: wrap-reverse !important; } + .justify-content-md-start { + justify-content: flex-start !important; } + .justify-content-md-end { + justify-content: flex-end !important; } + .justify-content-md-center { + justify-content: center !important; } + .justify-content-md-between { + justify-content: space-between !important; } + .justify-content-md-around { + justify-content: space-around !important; } + .align-items-md-start { + align-items: flex-start !important; } + .align-items-md-end { + align-items: flex-end !important; } + .align-items-md-center { + align-items: center !important; } + .align-items-md-baseline { + align-items: baseline !important; } + .align-items-md-stretch { + align-items: stretch !important; } + .align-content-md-start { + align-content: flex-start !important; } + .align-content-md-end { + align-content: flex-end !important; } + .align-content-md-center { + align-content: center !important; } + .align-content-md-between { + align-content: space-between !important; } + .align-content-md-around { + align-content: space-around !important; } + .align-content-md-stretch { + align-content: stretch !important; } + .align-self-md-auto { + align-self: auto !important; } + .align-self-md-start { + align-self: flex-start !important; } + .align-self-md-end { + align-self: flex-end !important; } + .align-self-md-center { + align-self: center !important; } + .align-self-md-baseline { + align-self: baseline !important; } + .align-self-md-stretch { + align-self: stretch !important; } } + +@media (min-width: 992px) { + .flex-lg-row { + flex-direction: row !important; } + .flex-lg-column { + flex-direction: column !important; } + .flex-lg-row-reverse { + flex-direction: row-reverse !important; } + .flex-lg-column-reverse { + flex-direction: column-reverse !important; } + .flex-lg-wrap { + flex-wrap: wrap !important; } + .flex-lg-nowrap { + flex-wrap: nowrap !important; } + .flex-lg-wrap-reverse { + flex-wrap: wrap-reverse !important; } + .justify-content-lg-start { + justify-content: flex-start !important; } + .justify-content-lg-end { + justify-content: flex-end !important; } + .justify-content-lg-center { + justify-content: center !important; } + .justify-content-lg-between { + justify-content: space-between !important; } + .justify-content-lg-around { + justify-content: space-around !important; } + .align-items-lg-start { + align-items: flex-start !important; } + .align-items-lg-end { + align-items: flex-end !important; } + .align-items-lg-center { + align-items: center !important; } + .align-items-lg-baseline { + align-items: baseline !important; } + .align-items-lg-stretch { + align-items: stretch !important; } + .align-content-lg-start { + align-content: flex-start !important; } + .align-content-lg-end { + align-content: flex-end !important; } + .align-content-lg-center { + align-content: center !important; } + .align-content-lg-between { + align-content: space-between !important; } + .align-content-lg-around { + align-content: space-around !important; } + .align-content-lg-stretch { + align-content: stretch !important; } + .align-self-lg-auto { + align-self: auto !important; } + .align-self-lg-start { + align-self: flex-start !important; } + .align-self-lg-end { + align-self: flex-end !important; } + .align-self-lg-center { + align-self: center !important; } + .align-self-lg-baseline { + align-self: baseline !important; } + .align-self-lg-stretch { + align-self: stretch !important; } } + +@media (min-width: 1200px) { + .flex-xl-row { + flex-direction: row !important; } + .flex-xl-column { + flex-direction: column !important; } + .flex-xl-row-reverse { + flex-direction: row-reverse !important; } + .flex-xl-column-reverse { + flex-direction: column-reverse !important; } + .flex-xl-wrap { + flex-wrap: wrap !important; } + .flex-xl-nowrap { + flex-wrap: nowrap !important; } + .flex-xl-wrap-reverse { + flex-wrap: wrap-reverse !important; } + .justify-content-xl-start { + justify-content: flex-start !important; } + .justify-content-xl-end { + justify-content: flex-end !important; } + .justify-content-xl-center { + justify-content: center !important; } + .justify-content-xl-between { + justify-content: space-between !important; } + .justify-content-xl-around { + justify-content: space-around !important; } + .align-items-xl-start { + align-items: flex-start !important; } + .align-items-xl-end { + align-items: flex-end !important; } + .align-items-xl-center { + align-items: center !important; } + .align-items-xl-baseline { + align-items: baseline !important; } + .align-items-xl-stretch { + align-items: stretch !important; } + .align-content-xl-start { + align-content: flex-start !important; } + .align-content-xl-end { + align-content: flex-end !important; } + .align-content-xl-center { + align-content: center !important; } + .align-content-xl-between { + align-content: space-between !important; } + .align-content-xl-around { + align-content: space-around !important; } + .align-content-xl-stretch { + align-content: stretch !important; } + .align-self-xl-auto { + align-self: auto !important; } + .align-self-xl-start { + align-self: flex-start !important; } + .align-self-xl-end { + align-self: flex-end !important; } + .align-self-xl-center { + align-self: center !important; } + .align-self-xl-baseline { + align-self: baseline !important; } + .align-self-xl-stretch { + align-self: stretch !important; } } + +.float-left { + float: left !important; } + +.float-right { + float: right !important; } + +.float-none { + float: none !important; } + +@media (min-width: 576px) { + .float-sm-left { + float: left !important; } + .float-sm-right { + float: right !important; } + .float-sm-none { + float: none !important; } } + +@media (min-width: 768px) { + .float-md-left { + float: left !important; } + .float-md-right { + float: right !important; } + .float-md-none { + float: none !important; } } + +@media (min-width: 992px) { + .float-lg-left { + float: left !important; } + .float-lg-right { + float: right !important; } + .float-lg-none { + float: none !important; } } + +@media (min-width: 1200px) { + .float-xl-left { + float: left !important; } + .float-xl-right { + float: right !important; } + .float-xl-none { + float: none !important; } } + +.position-static { + position: static !important; } + +.position-relative { + position: relative !important; } + +.position-absolute { + position: absolute !important; } + +.position-fixed { + position: fixed !important; } + +.position-sticky { + position: sticky !important; } + +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; } + +.fixed-bottom { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: 1030; } + +@supports (position: sticky) { + .sticky-top { + position: sticky; + top: 0; + z-index: 1020; } } + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + clip-path: inset(50%); + border: 0; } + +.sr-only-focusable:active, .sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + overflow: visible; + clip: auto; + white-space: normal; + clip-path: none; } + +.w-25 { + width: 25% !important; } + +.w-50 { + width: 50% !important; } + +.w-75 { + width: 75% !important; } + +.w-100 { + width: 100% !important; } + +.h-25 { + height: 25% !important; } + +.h-50 { + height: 50% !important; } + +.h-75 { + height: 75% !important; } + +.h-100 { + height: 100% !important; } + +.mw-100 { + max-width: 100% !important; } + +.mh-100 { + max-height: 100% !important; } + +.m-0 { + margin: 0 !important; } + +.mt-0, +.my-0 { + margin-top: 0 !important; } + +.mr-0, +.mx-0 { + margin-right: 0 !important; } + +.mb-0, +.my-0 { + margin-bottom: 0 !important; } + +.ml-0, +.mx-0 { + margin-left: 0 !important; } + +.m-1 { + margin: 0.25rem !important; } + +.mt-1, +.my-1 { + margin-top: 0.25rem !important; } + +.mr-1, +.mx-1 { + margin-right: 0.25rem !important; } + +.mb-1, +.my-1 { + margin-bottom: 0.25rem !important; } + +.ml-1, +.mx-1 { + margin-left: 0.25rem !important; } + +.m-2 { + margin: 0.5rem !important; } + +.mt-2, +.my-2 { + margin-top: 0.5rem !important; } + +.mr-2, +.mx-2 { + margin-right: 0.5rem !important; } + +.mb-2, +.my-2 { + margin-bottom: 0.5rem !important; } + +.ml-2, +.mx-2 { + margin-left: 0.5rem !important; } + +.m-3 { + margin: 1rem !important; } + +.mt-3, +.my-3 { + margin-top: 1rem !important; } + +.mr-3, +.mx-3 { + margin-right: 1rem !important; } + +.mb-3, +.my-3 { + margin-bottom: 1rem !important; } + +.ml-3, +.mx-3 { + margin-left: 1rem !important; } + +.m-4 { + margin: 1.5rem !important; } + +.mt-4, +.my-4 { + margin-top: 1.5rem !important; } + +.mr-4, +.mx-4 { + margin-right: 1.5rem !important; } + +.mb-4, +.my-4 { + margin-bottom: 1.5rem !important; } + +.ml-4, +.mx-4 { + margin-left: 1.5rem !important; } + +.m-5 { + margin: 3rem !important; } + +.mt-5, +.my-5 { + margin-top: 3rem !important; } + +.mr-5, +.mx-5 { + margin-right: 3rem !important; } + +.mb-5, +.my-5 { + margin-bottom: 3rem !important; } + +.ml-5, +.mx-5 { + margin-left: 3rem !important; } + +.p-0 { + padding: 0 !important; } + +.pt-0, +.py-0 { + padding-top: 0 !important; } + +.pr-0, +.px-0 { + padding-right: 0 !important; } + +.pb-0, +.py-0 { + padding-bottom: 0 !important; } + +.pl-0, +.px-0 { + padding-left: 0 !important; } + +.p-1 { + padding: 0.25rem !important; } + +.pt-1, +.py-1 { + padding-top: 0.25rem !important; } + +.pr-1, +.px-1 { + padding-right: 0.25rem !important; } + +.pb-1, +.py-1 { + padding-bottom: 0.25rem !important; } + +.pl-1, +.px-1 { + padding-left: 0.25rem !important; } + +.p-2 { + padding: 0.5rem !important; } + +.pt-2, +.py-2 { + padding-top: 0.5rem !important; } + +.pr-2, +.px-2 { + padding-right: 0.5rem !important; } + +.pb-2, +.py-2 { + padding-bottom: 0.5rem !important; } + +.pl-2, +.px-2 { + padding-left: 0.5rem !important; } + +.p-3 { + padding: 1rem !important; } + +.pt-3, +.py-3 { + padding-top: 1rem !important; } + +.pr-3, +.px-3 { + padding-right: 1rem !important; } + +.pb-3, +.py-3 { + padding-bottom: 1rem !important; } + +.pl-3, +.px-3 { + padding-left: 1rem !important; } + +.p-4 { + padding: 1.5rem !important; } + +.pt-4, +.py-4 { + padding-top: 1.5rem !important; } + +.pr-4, +.px-4 { + padding-right: 1.5rem !important; } + +.pb-4, +.py-4 { + padding-bottom: 1.5rem !important; } + +.pl-4, +.px-4 { + padding-left: 1.5rem !important; } + +.p-5 { + padding: 3rem !important; } + +.pt-5, +.py-5 { + padding-top: 3rem !important; } + +.pr-5, +.px-5 { + padding-right: 3rem !important; } + +.pb-5, +.py-5 { + padding-bottom: 3rem !important; } + +.pl-5, +.px-5 { + padding-left: 3rem !important; } + +.m-auto { + margin: auto !important; } + +.mt-auto, +.my-auto { + margin-top: auto !important; } + +.mr-auto, +.mx-auto { + margin-right: auto !important; } + +.mb-auto, +.my-auto { + margin-bottom: auto !important; } + +.ml-auto, +.mx-auto { + margin-left: auto !important; } + +@media (min-width: 576px) { + .m-sm-0 { + margin: 0 !important; } + .mt-sm-0, + .my-sm-0 { + margin-top: 0 !important; } + .mr-sm-0, + .mx-sm-0 { + margin-right: 0 !important; } + .mb-sm-0, + .my-sm-0 { + margin-bottom: 0 !important; } + .ml-sm-0, + .mx-sm-0 { + margin-left: 0 !important; } + .m-sm-1 { + margin: 0.25rem !important; } + .mt-sm-1, + .my-sm-1 { + margin-top: 0.25rem !important; } + .mr-sm-1, + .mx-sm-1 { + margin-right: 0.25rem !important; } + .mb-sm-1, + .my-sm-1 { + margin-bottom: 0.25rem !important; } + .ml-sm-1, + .mx-sm-1 { + margin-left: 0.25rem !important; } + .m-sm-2 { + margin: 0.5rem !important; } + .mt-sm-2, + .my-sm-2 { + margin-top: 0.5rem !important; } + .mr-sm-2, + .mx-sm-2 { + margin-right: 0.5rem !important; } + .mb-sm-2, + .my-sm-2 { + margin-bottom: 0.5rem !important; } + .ml-sm-2, + .mx-sm-2 { + margin-left: 0.5rem !important; } + .m-sm-3 { + margin: 1rem !important; } + .mt-sm-3, + .my-sm-3 { + margin-top: 1rem !important; } + .mr-sm-3, + .mx-sm-3 { + margin-right: 1rem !important; } + .mb-sm-3, + .my-sm-3 { + margin-bottom: 1rem !important; } + .ml-sm-3, + .mx-sm-3 { + margin-left: 1rem !important; } + .m-sm-4 { + margin: 1.5rem !important; } + .mt-sm-4, + .my-sm-4 { + margin-top: 1.5rem !important; } + .mr-sm-4, + .mx-sm-4 { + margin-right: 1.5rem !important; } + .mb-sm-4, + .my-sm-4 { + margin-bottom: 1.5rem !important; } + .ml-sm-4, + .mx-sm-4 { + margin-left: 1.5rem !important; } + .m-sm-5 { + margin: 3rem !important; } + .mt-sm-5, + .my-sm-5 { + margin-top: 3rem !important; } + .mr-sm-5, + .mx-sm-5 { + margin-right: 3rem !important; } + .mb-sm-5, + .my-sm-5 { + margin-bottom: 3rem !important; } + .ml-sm-5, + .mx-sm-5 { + margin-left: 3rem !important; } + .p-sm-0 { + padding: 0 !important; } + .pt-sm-0, + .py-sm-0 { + padding-top: 0 !important; } + .pr-sm-0, + .px-sm-0 { + padding-right: 0 !important; } + .pb-sm-0, + .py-sm-0 { + padding-bottom: 0 !important; } + .pl-sm-0, + .px-sm-0 { + padding-left: 0 !important; } + .p-sm-1 { + padding: 0.25rem !important; } + .pt-sm-1, + .py-sm-1 { + padding-top: 0.25rem !important; } + .pr-sm-1, + .px-sm-1 { + padding-right: 0.25rem !important; } + .pb-sm-1, + .py-sm-1 { + padding-bottom: 0.25rem !important; } + .pl-sm-1, + .px-sm-1 { + padding-left: 0.25rem !important; } + .p-sm-2 { + padding: 0.5rem !important; } + .pt-sm-2, + .py-sm-2 { + padding-top: 0.5rem !important; } + .pr-sm-2, + .px-sm-2 { + padding-right: 0.5rem !important; } + .pb-sm-2, + .py-sm-2 { + padding-bottom: 0.5rem !important; } + .pl-sm-2, + .px-sm-2 { + padding-left: 0.5rem !important; } + .p-sm-3 { + padding: 1rem !important; } + .pt-sm-3, + .py-sm-3 { + padding-top: 1rem !important; } + .pr-sm-3, + .px-sm-3 { + padding-right: 1rem !important; } + .pb-sm-3, + .py-sm-3 { + padding-bottom: 1rem !important; } + .pl-sm-3, + .px-sm-3 { + padding-left: 1rem !important; } + .p-sm-4 { + padding: 1.5rem !important; } + .pt-sm-4, + .py-sm-4 { + padding-top: 1.5rem !important; } + .pr-sm-4, + .px-sm-4 { + padding-right: 1.5rem !important; } + .pb-sm-4, + .py-sm-4 { + padding-bottom: 1.5rem !important; } + .pl-sm-4, + .px-sm-4 { + padding-left: 1.5rem !important; } + .p-sm-5 { + padding: 3rem !important; } + .pt-sm-5, + .py-sm-5 { + padding-top: 3rem !important; } + .pr-sm-5, + .px-sm-5 { + padding-right: 3rem !important; } + .pb-sm-5, + .py-sm-5 { + padding-bottom: 3rem !important; } + .pl-sm-5, + .px-sm-5 { + padding-left: 3rem !important; } + .m-sm-auto { + margin: auto !important; } + .mt-sm-auto, + .my-sm-auto { + margin-top: auto !important; } + .mr-sm-auto, + .mx-sm-auto { + margin-right: auto !important; } + .mb-sm-auto, + .my-sm-auto { + margin-bottom: auto !important; } + .ml-sm-auto, + .mx-sm-auto { + margin-left: auto !important; } } + +@media (min-width: 768px) { + .m-md-0 { + margin: 0 !important; } + .mt-md-0, + .my-md-0 { + margin-top: 0 !important; } + .mr-md-0, + .mx-md-0 { + margin-right: 0 !important; } + .mb-md-0, + .my-md-0 { + margin-bottom: 0 !important; } + .ml-md-0, + .mx-md-0 { + margin-left: 0 !important; } + .m-md-1 { + margin: 0.25rem !important; } + .mt-md-1, + .my-md-1 { + margin-top: 0.25rem !important; } + .mr-md-1, + .mx-md-1 { + margin-right: 0.25rem !important; } + .mb-md-1, + .my-md-1 { + margin-bottom: 0.25rem !important; } + .ml-md-1, + .mx-md-1 { + margin-left: 0.25rem !important; } + .m-md-2 { + margin: 0.5rem !important; } + .mt-md-2, + .my-md-2 { + margin-top: 0.5rem !important; } + .mr-md-2, + .mx-md-2 { + margin-right: 0.5rem !important; } + .mb-md-2, + .my-md-2 { + margin-bottom: 0.5rem !important; } + .ml-md-2, + .mx-md-2 { + margin-left: 0.5rem !important; } + .m-md-3 { + margin: 1rem !important; } + .mt-md-3, + .my-md-3 { + margin-top: 1rem !important; } + .mr-md-3, + .mx-md-3 { + margin-right: 1rem !important; } + .mb-md-3, + .my-md-3 { + margin-bottom: 1rem !important; } + .ml-md-3, + .mx-md-3 { + margin-left: 1rem !important; } + .m-md-4 { + margin: 1.5rem !important; } + .mt-md-4, + .my-md-4 { + margin-top: 1.5rem !important; } + .mr-md-4, + .mx-md-4 { + margin-right: 1.5rem !important; } + .mb-md-4, + .my-md-4 { + margin-bottom: 1.5rem !important; } + .ml-md-4, + .mx-md-4 { + margin-left: 1.5rem !important; } + .m-md-5 { + margin: 3rem !important; } + .mt-md-5, + .my-md-5 { + margin-top: 3rem !important; } + .mr-md-5, + .mx-md-5 { + margin-right: 3rem !important; } + .mb-md-5, + .my-md-5 { + margin-bottom: 3rem !important; } + .ml-md-5, + .mx-md-5 { + margin-left: 3rem !important; } + .p-md-0 { + padding: 0 !important; } + .pt-md-0, + .py-md-0 { + padding-top: 0 !important; } + .pr-md-0, + .px-md-0 { + padding-right: 0 !important; } + .pb-md-0, + .py-md-0 { + padding-bottom: 0 !important; } + .pl-md-0, + .px-md-0 { + padding-left: 0 !important; } + .p-md-1 { + padding: 0.25rem !important; } + .pt-md-1, + .py-md-1 { + padding-top: 0.25rem !important; } + .pr-md-1, + .px-md-1 { + padding-right: 0.25rem !important; } + .pb-md-1, + .py-md-1 { + padding-bottom: 0.25rem !important; } + .pl-md-1, + .px-md-1 { + padding-left: 0.25rem !important; } + .p-md-2 { + padding: 0.5rem !important; } + .pt-md-2, + .py-md-2 { + padding-top: 0.5rem !important; } + .pr-md-2, + .px-md-2 { + padding-right: 0.5rem !important; } + .pb-md-2, + .py-md-2 { + padding-bottom: 0.5rem !important; } + .pl-md-2, + .px-md-2 { + padding-left: 0.5rem !important; } + .p-md-3 { + padding: 1rem !important; } + .pt-md-3, + .py-md-3 { + padding-top: 1rem !important; } + .pr-md-3, + .px-md-3 { + padding-right: 1rem !important; } + .pb-md-3, + .py-md-3 { + padding-bottom: 1rem !important; } + .pl-md-3, + .px-md-3 { + padding-left: 1rem !important; } + .p-md-4 { + padding: 1.5rem !important; } + .pt-md-4, + .py-md-4 { + padding-top: 1.5rem !important; } + .pr-md-4, + .px-md-4 { + padding-right: 1.5rem !important; } + .pb-md-4, + .py-md-4 { + padding-bottom: 1.5rem !important; } + .pl-md-4, + .px-md-4 { + padding-left: 1.5rem !important; } + .p-md-5 { + padding: 3rem !important; } + .pt-md-5, + .py-md-5 { + padding-top: 3rem !important; } + .pr-md-5, + .px-md-5 { + padding-right: 3rem !important; } + .pb-md-5, + .py-md-5 { + padding-bottom: 3rem !important; } + .pl-md-5, + .px-md-5 { + padding-left: 3rem !important; } + .m-md-auto { + margin: auto !important; } + .mt-md-auto, + .my-md-auto { + margin-top: auto !important; } + .mr-md-auto, + .mx-md-auto { + margin-right: auto !important; } + .mb-md-auto, + .my-md-auto { + margin-bottom: auto !important; } + .ml-md-auto, + .mx-md-auto { + margin-left: auto !important; } } + +@media (min-width: 992px) { + .m-lg-0 { + margin: 0 !important; } + .mt-lg-0, + .my-lg-0 { + margin-top: 0 !important; } + .mr-lg-0, + .mx-lg-0 { + margin-right: 0 !important; } + .mb-lg-0, + .my-lg-0 { + margin-bottom: 0 !important; } + .ml-lg-0, + .mx-lg-0 { + margin-left: 0 !important; } + .m-lg-1 { + margin: 0.25rem !important; } + .mt-lg-1, + .my-lg-1 { + margin-top: 0.25rem !important; } + .mr-lg-1, + .mx-lg-1 { + margin-right: 0.25rem !important; } + .mb-lg-1, + .my-lg-1 { + margin-bottom: 0.25rem !important; } + .ml-lg-1, + .mx-lg-1 { + margin-left: 0.25rem !important; } + .m-lg-2 { + margin: 0.5rem !important; } + .mt-lg-2, + .my-lg-2 { + margin-top: 0.5rem !important; } + .mr-lg-2, + .mx-lg-2 { + margin-right: 0.5rem !important; } + .mb-lg-2, + .my-lg-2 { + margin-bottom: 0.5rem !important; } + .ml-lg-2, + .mx-lg-2 { + margin-left: 0.5rem !important; } + .m-lg-3 { + margin: 1rem !important; } + .mt-lg-3, + .my-lg-3 { + margin-top: 1rem !important; } + .mr-lg-3, + .mx-lg-3 { + margin-right: 1rem !important; } + .mb-lg-3, + .my-lg-3 { + margin-bottom: 1rem !important; } + .ml-lg-3, + .mx-lg-3 { + margin-left: 1rem !important; } + .m-lg-4 { + margin: 1.5rem !important; } + .mt-lg-4, + .my-lg-4 { + margin-top: 1.5rem !important; } + .mr-lg-4, + .mx-lg-4 { + margin-right: 1.5rem !important; } + .mb-lg-4, + .my-lg-4 { + margin-bottom: 1.5rem !important; } + .ml-lg-4, + .mx-lg-4 { + margin-left: 1.5rem !important; } + .m-lg-5 { + margin: 3rem !important; } + .mt-lg-5, + .my-lg-5 { + margin-top: 3rem !important; } + .mr-lg-5, + .mx-lg-5 { + margin-right: 3rem !important; } + .mb-lg-5, + .my-lg-5 { + margin-bottom: 3rem !important; } + .ml-lg-5, + .mx-lg-5 { + margin-left: 3rem !important; } + .p-lg-0 { + padding: 0 !important; } + .pt-lg-0, + .py-lg-0 { + padding-top: 0 !important; } + .pr-lg-0, + .px-lg-0 { + padding-right: 0 !important; } + .pb-lg-0, + .py-lg-0 { + padding-bottom: 0 !important; } + .pl-lg-0, + .px-lg-0 { + padding-left: 0 !important; } + .p-lg-1 { + padding: 0.25rem !important; } + .pt-lg-1, + .py-lg-1 { + padding-top: 0.25rem !important; } + .pr-lg-1, + .px-lg-1 { + padding-right: 0.25rem !important; } + .pb-lg-1, + .py-lg-1 { + padding-bottom: 0.25rem !important; } + .pl-lg-1, + .px-lg-1 { + padding-left: 0.25rem !important; } + .p-lg-2 { + padding: 0.5rem !important; } + .pt-lg-2, + .py-lg-2 { + padding-top: 0.5rem !important; } + .pr-lg-2, + .px-lg-2 { + padding-right: 0.5rem !important; } + .pb-lg-2, + .py-lg-2 { + padding-bottom: 0.5rem !important; } + .pl-lg-2, + .px-lg-2 { + padding-left: 0.5rem !important; } + .p-lg-3 { + padding: 1rem !important; } + .pt-lg-3, + .py-lg-3 { + padding-top: 1rem !important; } + .pr-lg-3, + .px-lg-3 { + padding-right: 1rem !important; } + .pb-lg-3, + .py-lg-3 { + padding-bottom: 1rem !important; } + .pl-lg-3, + .px-lg-3 { + padding-left: 1rem !important; } + .p-lg-4 { + padding: 1.5rem !important; } + .pt-lg-4, + .py-lg-4 { + padding-top: 1.5rem !important; } + .pr-lg-4, + .px-lg-4 { + padding-right: 1.5rem !important; } + .pb-lg-4, + .py-lg-4 { + padding-bottom: 1.5rem !important; } + .pl-lg-4, + .px-lg-4 { + padding-left: 1.5rem !important; } + .p-lg-5 { + padding: 3rem !important; } + .pt-lg-5, + .py-lg-5 { + padding-top: 3rem !important; } + .pr-lg-5, + .px-lg-5 { + padding-right: 3rem !important; } + .pb-lg-5, + .py-lg-5 { + padding-bottom: 3rem !important; } + .pl-lg-5, + .px-lg-5 { + padding-left: 3rem !important; } + .m-lg-auto { + margin: auto !important; } + .mt-lg-auto, + .my-lg-auto { + margin-top: auto !important; } + .mr-lg-auto, + .mx-lg-auto { + margin-right: auto !important; } + .mb-lg-auto, + .my-lg-auto { + margin-bottom: auto !important; } + .ml-lg-auto, + .mx-lg-auto { + margin-left: auto !important; } } + +@media (min-width: 1200px) { + .m-xl-0 { + margin: 0 !important; } + .mt-xl-0, + .my-xl-0 { + margin-top: 0 !important; } + .mr-xl-0, + .mx-xl-0 { + margin-right: 0 !important; } + .mb-xl-0, + .my-xl-0 { + margin-bottom: 0 !important; } + .ml-xl-0, + .mx-xl-0 { + margin-left: 0 !important; } + .m-xl-1 { + margin: 0.25rem !important; } + .mt-xl-1, + .my-xl-1 { + margin-top: 0.25rem !important; } + .mr-xl-1, + .mx-xl-1 { + margin-right: 0.25rem !important; } + .mb-xl-1, + .my-xl-1 { + margin-bottom: 0.25rem !important; } + .ml-xl-1, + .mx-xl-1 { + margin-left: 0.25rem !important; } + .m-xl-2 { + margin: 0.5rem !important; } + .mt-xl-2, + .my-xl-2 { + margin-top: 0.5rem !important; } + .mr-xl-2, + .mx-xl-2 { + margin-right: 0.5rem !important; } + .mb-xl-2, + .my-xl-2 { + margin-bottom: 0.5rem !important; } + .ml-xl-2, + .mx-xl-2 { + margin-left: 0.5rem !important; } + .m-xl-3 { + margin: 1rem !important; } + .mt-xl-3, + .my-xl-3 { + margin-top: 1rem !important; } + .mr-xl-3, + .mx-xl-3 { + margin-right: 1rem !important; } + .mb-xl-3, + .my-xl-3 { + margin-bottom: 1rem !important; } + .ml-xl-3, + .mx-xl-3 { + margin-left: 1rem !important; } + .m-xl-4 { + margin: 1.5rem !important; } + .mt-xl-4, + .my-xl-4 { + margin-top: 1.5rem !important; } + .mr-xl-4, + .mx-xl-4 { + margin-right: 1.5rem !important; } + .mb-xl-4, + .my-xl-4 { + margin-bottom: 1.5rem !important; } + .ml-xl-4, + .mx-xl-4 { + margin-left: 1.5rem !important; } + .m-xl-5 { + margin: 3rem !important; } + .mt-xl-5, + .my-xl-5 { + margin-top: 3rem !important; } + .mr-xl-5, + .mx-xl-5 { + margin-right: 3rem !important; } + .mb-xl-5, + .my-xl-5 { + margin-bottom: 3rem !important; } + .ml-xl-5, + .mx-xl-5 { + margin-left: 3rem !important; } + .p-xl-0 { + padding: 0 !important; } + .pt-xl-0, + .py-xl-0 { + padding-top: 0 !important; } + .pr-xl-0, + .px-xl-0 { + padding-right: 0 !important; } + .pb-xl-0, + .py-xl-0 { + padding-bottom: 0 !important; } + .pl-xl-0, + .px-xl-0 { + padding-left: 0 !important; } + .p-xl-1 { + padding: 0.25rem !important; } + .pt-xl-1, + .py-xl-1 { + padding-top: 0.25rem !important; } + .pr-xl-1, + .px-xl-1 { + padding-right: 0.25rem !important; } + .pb-xl-1, + .py-xl-1 { + padding-bottom: 0.25rem !important; } + .pl-xl-1, + .px-xl-1 { + padding-left: 0.25rem !important; } + .p-xl-2 { + padding: 0.5rem !important; } + .pt-xl-2, + .py-xl-2 { + padding-top: 0.5rem !important; } + .pr-xl-2, + .px-xl-2 { + padding-right: 0.5rem !important; } + .pb-xl-2, + .py-xl-2 { + padding-bottom: 0.5rem !important; } + .pl-xl-2, + .px-xl-2 { + padding-left: 0.5rem !important; } + .p-xl-3 { + padding: 1rem !important; } + .pt-xl-3, + .py-xl-3 { + padding-top: 1rem !important; } + .pr-xl-3, + .px-xl-3 { + padding-right: 1rem !important; } + .pb-xl-3, + .py-xl-3 { + padding-bottom: 1rem !important; } + .pl-xl-3, + .px-xl-3 { + padding-left: 1rem !important; } + .p-xl-4 { + padding: 1.5rem !important; } + .pt-xl-4, + .py-xl-4 { + padding-top: 1.5rem !important; } + .pr-xl-4, + .px-xl-4 { + padding-right: 1.5rem !important; } + .pb-xl-4, + .py-xl-4 { + padding-bottom: 1.5rem !important; } + .pl-xl-4, + .px-xl-4 { + padding-left: 1.5rem !important; } + .p-xl-5 { + padding: 3rem !important; } + .pt-xl-5, + .py-xl-5 { + padding-top: 3rem !important; } + .pr-xl-5, + .px-xl-5 { + padding-right: 3rem !important; } + .pb-xl-5, + .py-xl-5 { + padding-bottom: 3rem !important; } + .pl-xl-5, + .px-xl-5 { + padding-left: 3rem !important; } + .m-xl-auto { + margin: auto !important; } + .mt-xl-auto, + .my-xl-auto { + margin-top: auto !important; } + .mr-xl-auto, + .mx-xl-auto { + margin-right: auto !important; } + .mb-xl-auto, + .my-xl-auto { + margin-bottom: auto !important; } + .ml-xl-auto, + .mx-xl-auto { + margin-left: auto !important; } } + +.text-justify { + text-align: justify !important; } + +.text-nowrap { + white-space: nowrap !important; } + +.text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + +.text-left { + text-align: left !important; } + +.text-right { + text-align: right !important; } + +.text-center { + text-align: center !important; } + +@media (min-width: 576px) { + .text-sm-left { + text-align: left !important; } + .text-sm-right { + text-align: right !important; } + .text-sm-center { + text-align: center !important; } } + +@media (min-width: 768px) { + .text-md-left { + text-align: left !important; } + .text-md-right { + text-align: right !important; } + .text-md-center { + text-align: center !important; } } + +@media (min-width: 992px) { + .text-lg-left { + text-align: left !important; } + .text-lg-right { + text-align: right !important; } + .text-lg-center { + text-align: center !important; } } + +@media (min-width: 1200px) { + .text-xl-left { + text-align: left !important; } + .text-xl-right { + text-align: right !important; } + .text-xl-center { + text-align: center !important; } } + +.text-lowercase { + text-transform: lowercase !important; } + +.text-uppercase { + text-transform: uppercase !important; } + +.text-capitalize { + text-transform: capitalize !important; } + +.font-weight-light { + font-weight: 300 !important; } + +.font-weight-normal { + font-weight: 400 !important; } + +.font-weight-bold { + font-weight: 700 !important; } + +.font-italic { + font-style: italic !important; } + +.text-white { + color: #fff !important; } + +.text-primary { + color: #0075b4 !important; } + +a.text-primary:hover, a.text-primary:focus { + color: #005481 !important; } + +.text-secondary { + color: #313131 !important; } + +a.text-secondary:hover, a.text-secondary:focus { + color: #181818 !important; } + +.text-success { + color: #008100 !important; } + +a.text-success:hover, a.text-success:focus { + color: #004e00 !important; } + +.text-info { + color: #17a2b8 !important; } + +a.text-info:hover, a.text-info:focus { + color: #117a8b !important; } + +.text-warning { + color: #e2c01f !important; } + +a.text-warning:hover, a.text-warning:focus { + color: #b69b18 !important; } + +.text-danger { + color: #b20610 !important; } + +a.text-danger:hover, a.text-danger:focus { + color: #81040c !important; } + +.text-light { + color: #e7e7e7 !important; } + +a.text-light:hover, a.text-light:focus { + color: #cecece !important; } + +.text-dark { + color: #313131 !important; } + +a.text-dark:hover, a.text-dark:focus { + color: #181818 !important; } + +.text-inverse { + color: #fff !important; } + +a.text-inverse:hover, a.text-inverse:focus { + color: #e6e6e6 !important; } + +.text-disabled { + color: #767676 !important; } + +a.text-disabled:hover, a.text-disabled:focus { + color: #5d5d5d !important; } + +.text-purchase { + color: #008100 !important; } + +a.text-purchase:hover, a.text-purchase:focus { + color: #004e00 !important; } + +.text-lightest { + color: #f5f5f5 !important; } + +a.text-lightest:hover, a.text-lightest:focus { + color: gainsboro !important; } + +.text-darker { + color: #111 !important; } + +a.text-darker:hover, a.text-darker:focus { + color: black !important; } + +.text-darkest { + color: #000 !important; } + +a.text-darkest:hover, a.text-darkest:focus { + color: black !important; } + +.text-muted { + color: #767676 !important; } + +.text-hide { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; } + +.visible { + visibility: visible !important; } + +.invisible { + visibility: hidden !important; } + +.badge { + display: inline-block; + padding: 0.25em 0.4em; + font-size: 75%; + font-weight: 700; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + -webkit-border-radius: 0.1875rem; + -moz-border-radius: 0.1875rem; + -ms-border-radius: 0.1875rem; + -o-border-radius: 0.1875rem; + border-radius: 0.1875rem; } + .badge:empty { + display: none; } + +.btn .badge { + position: relative; + top: -1px; } + +.badge-pill { + padding-right: 0.6em; + padding-left: 0.6em; + -webkit-border-radius: 10rem; + -moz-border-radius: 10rem; + -ms-border-radius: 10rem; + -o-border-radius: 10rem; + border-radius: 10rem; } + +.badge-primary { + color: #fff; + background-color: #0075b4; } + .badge-primary[href]:hover, .badge-primary[href]:focus { + color: #fff; + text-decoration: none; + background-color: #005481; } + +.badge-secondary { + color: #fff; + background-color: #313131; } + .badge-secondary[href]:hover, .badge-secondary[href]:focus { + color: #fff; + text-decoration: none; + background-color: #181818; } + +.badge-success { + color: #fff; + background-color: #008100; } + .badge-success[href]:hover, .badge-success[href]:focus { + color: #fff; + text-decoration: none; + background-color: #004e00; } + +.badge-info { + color: #fff; + background-color: #17a2b8; } + .badge-info[href]:hover, .badge-info[href]:focus { + color: #fff; + text-decoration: none; + background-color: #117a8b; } + +.badge-warning { + color: #111; + background-color: #e2c01f; } + .badge-warning[href]:hover, .badge-warning[href]:focus { + color: #111; + text-decoration: none; + background-color: #b69b18; } + +.badge-danger { + color: #fff; + background-color: #b20610; } + .badge-danger[href]:hover, .badge-danger[href]:focus { + color: #fff; + text-decoration: none; + background-color: #81040c; } + +.badge-light { + color: #111; + background-color: #e7e7e7; } + .badge-light[href]:hover, .badge-light[href]:focus { + color: #111; + text-decoration: none; + background-color: #cecece; } + +.badge-dark { + color: #fff; + background-color: #313131; } + .badge-dark[href]:hover, .badge-dark[href]:focus { + color: #fff; + text-decoration: none; + background-color: #181818; } + +.badge-inverse { + color: #111; + background-color: #fff; } + .badge-inverse[href]:hover, .badge-inverse[href]:focus { + color: #111; + text-decoration: none; + background-color: #e6e6e6; } + +.badge-disabled { + color: #fff; + background-color: #767676; } + .badge-disabled[href]:hover, .badge-disabled[href]:focus { + color: #fff; + text-decoration: none; + background-color: #5d5d5d; } + +.badge-purchase { + color: #fff; + background-color: #008100; } + .badge-purchase[href]:hover, .badge-purchase[href]:focus { + color: #fff; + text-decoration: none; + background-color: #004e00; } + +.badge-lightest { + color: #111; + background-color: #f5f5f5; } + .badge-lightest[href]:hover, .badge-lightest[href]:focus { + color: #111; + text-decoration: none; + background-color: gainsboro; } + +.badge-darker { + color: #fff; + background-color: #111; } + .badge-darker[href]:hover, .badge-darker[href]:focus { + color: #fff; + text-decoration: none; + background-color: black; } + +.badge-darkest { + color: #fff; + background-color: #000; } + .badge-darkest[href]:hover, .badge-darkest[href]:focus { + color: #fff; + text-decoration: none; + background-color: black; } + +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1060; + display: block; + max-width: 276px; + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-style: normal; + font-weight: 400; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + white-space: normal; + line-break: auto; + font-size: 0.875rem; + word-wrap: break-word; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-border-radius: 0.1875rem; + -moz-border-radius: 0.1875rem; + -ms-border-radius: 0.1875rem; + -o-border-radius: 0.1875rem; + border-radius: 0.1875rem; } + .popover .arrow { + position: absolute; + display: block; + width: 1rem; + height: 0.5rem; + margin: 0 0.1875rem; } + .popover .arrow::before, .popover .arrow::after { + position: absolute; + display: block; + content: ""; + border-color: transparent; + border-style: solid; } + +.bs-popover-top, .bs-popover-auto[x-placement^="top"] { + margin-bottom: 0.5rem; } + .bs-popover-top .arrow, .bs-popover-auto[x-placement^="top"] .arrow { + bottom: calc((0.5rem + 1px) * -1); } + .bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before, + .bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after { + border-width: 0.5rem 0.5rem 0; } + .bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before { + bottom: 0; + border-top-color: rgba(0, 0, 0, 0.25); } + .bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after { + bottom: 1px; + border-top-color: #fff; } + +.bs-popover-right, .bs-popover-auto[x-placement^="right"] { + margin-left: 0.5rem; } + .bs-popover-right .arrow, .bs-popover-auto[x-placement^="right"] .arrow { + left: calc((0.5rem + 1px) * -1); + width: 0.5rem; + height: 1rem; + margin: 0.1875rem 0; } + .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before, + .bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after { + border-width: 0.5rem 0.5rem 0.5rem 0; } + .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before { + left: 0; + border-right-color: rgba(0, 0, 0, 0.25); } + .bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after { + left: 1px; + border-right-color: #fff; } + +.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] { + margin-top: 0.5rem; } + .bs-popover-bottom .arrow, .bs-popover-auto[x-placement^="bottom"] .arrow { + top: calc((0.5rem + 1px) * -1); } + .bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before, + .bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after { + border-width: 0 0.5rem 0.5rem 0.5rem; } + .bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before { + top: 0; + border-bottom-color: rgba(0, 0, 0, 0.25); } + .bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after { + top: 1px; + border-bottom-color: #fff; } + .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: 1rem; + margin-left: -0.5rem; + content: ""; + border-bottom: 1px solid #f7f7f7; } + +.bs-popover-left, .bs-popover-auto[x-placement^="left"] { + margin-right: 0.5rem; } + .bs-popover-left .arrow, .bs-popover-auto[x-placement^="left"] .arrow { + right: calc((0.5rem + 1px) * -1); + width: 0.5rem; + height: 1rem; + margin: 0.1875rem 0; } + .bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before, + .bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after { + border-width: 0.5rem 0 0.5rem 0.5rem; } + .bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before { + right: 0; + border-left-color: rgba(0, 0, 0, 0.25); } + .bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after { + right: 1px; + border-left-color: #fff; } + +.popover-header { + padding: 0.5rem 0.75rem; + margin-bottom: 0; + font-size: 1rem; + color: inherit; + background-color: #f7f7f7; + border-bottom: 1px solid #ebebeb; + -webkit-border-top-right-radius: calc(0.1875rem - 1px); + -moz-border-topright-radius: calc(0.1875rem - 1px); + border-top-right-radius: calc(0.1875rem - 1px); + -webkit-border-top-left-radius: calc(0.1875rem - 1px); + -moz-border-topleft-radius: calc(0.1875rem - 1px); + border-top-left-radius: calc(0.1875rem - 1px); } + .popover-header:empty { + display: none; } + +.popover-body { + padding: 0.5rem 0.75rem; + color: #313131; } + +/* + * In pursuit of decoupling the built-in XBlocks from edx-platform's Sass build + * and ensuring comprehensive theming support in the extracted XBlocks, + * we need to expose Sass variables as CSS variables. + * + * Ticket/Issue: https://github.com/openedx/edx-platform/issues/35173 + */ +/* stylelint-disable-line */ +/* stylelint-disable-line */ +.btn-default:disabled, .btn-primary:disabled, .btn-brand:disabled, .btn-upgrade:disabled, .is-disabled.btn-default, .is-disabled.btn-primary, .is-disabled.btn-brand, .is-disabled.btn-upgrade { + pointer-events: none; + outline: none; + cursor: not-allowed; } + +.btn-small.btn-default, .btn-small.btn-primary, .btn-small.btn-brand, .btn-small.btn-upgrade { + padding: 0.625rem; + font-size: 14px; } + +:root { + --action-primary-active-bg: #0075b4; + --actions-dropdown-width: 145px; + --actions-dropdown-offset: 100px; + --base-font-size: 18px; + --base-line-height: 1.5em; + --baseline: 20px; + --black: #000; + --black-t2: rgba(0, 0, 0, 0.5); + --blue: #0075b4; + --blue-d1: #005e90; + --blue-d2: #00466c; + --blue-d4: #001724; + --blue-s1: #0075b4; + --body-color: #313131; + --border-color: #e7e7e7; + --border-color-4: #fcfcfc; + --bp-screen-lg: 1024px; + --btn-brand-focus-background: #065683; + --correct: #008100; + --comment-image-dimension: calc(var(--baseline) * 2); + --danger: #b20610; + --darkGrey: #8891a1; + --error-color: #cb0712; + --error-color-dark: #95050d; + --error-color-light: #f95861; + --font-bold: 700; + --font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + --forum-color-active-thread: var(--forum-color-primary); + --forum-color-hover: #065683; + --forum-color-active-text: var(--white); + --forum-color-background: #fff; + --forum-x-large-font-size: 21px; + --forum-color-copy-light: #414141; + --forum-large-font-size: 16px; + --forum-border-radius: 3px; + --forum-base-font-size: 14px; + --forum-small-font-size: 12px; + --forum-color-border: var(--gray-300); + --forum-color-background-light: whitesmoke; + --forum-color-editor-preview-label: var(--forum-color-copy-light); + --forum-color-following: var(--forum-color-primary); + --forum-color-error: #b20610; + --forum-color-pinned: #982c62; + --forum-color-reported: #982c62; + --forum-color-closed: var(--black); + --forum-color-staff: var(--forum-color-primary); + --forum-color-community-ta: var(--green); + --forum-color-response-count: var(--forum-color-copy-light); + --forum-color-read-post: var(--forum-color-copy-light); + --forum-color-hover-thread: var(--forum-color-background-light); + --forum-color-reading-thread: var(--forum-color-background-light); + --forum-color-never-read-post: var(--forum-color-primary); + --forum-color-navigation-bar: var(--forum-color-background-light); + --forum-color-primary: #0075b4; + --general-color-accent: #0075b4; + --green: #008100; + --gray: #767676; + --gray-300: #d9d9d9; + --gray-d1: #5e5e5e; + --gray-l2: #adadad; + --gray-l3: #c8c8c8; + --gray-l4: #e4e4e4; + --gray-l6: #f8f8f8; + --icon-correct: url("../images/correct-icon.png"); + --icon-incorrect: url("../images/incorrect-icon.png"); + --icon-info: url("../images/info-icon.png"); + --icon-partially-correct: url("../images/partially-correct-icon.png"); + --icon-spinner: url("../images/spinner.gif"); + --icon-unanswered: url("../images/unanswered-icon.png"); + --incorrect: #b20610; + --lightGrey: #edf1f5; + --lighter-base-font-color: #646464; + --link-color: #1b6d99; + --line-height-base: 1.5; + --medium-font-size: 0.9em; + --pink: #c2387d; + --partially-correct: #008100; + --primary: #0075b4; + --post-image-dimension: calc(var(--baseline) * 3); + --response-image-dimension: calc(var(--baseline) * 2.5); + --shadow: rgba(0, 0, 0, 0.2); + --shadow-l1: rgba(0, 0, 0, 0.1); + --sidebar-color: #f6f6f6; + --small-font-size: 80%; + --submitted: #0075b4; + --success: #008100; + --serif: Georgia, Cambria, "Times New Roman", Times, serif; + --tmg-f2: 0.25s; + --tmg-s2: 2s; + --transparent: transparent; + --uxpl-gray-background: #d9d9d9; + --uxpl-gray-base: #414141; + --uxpl-gray-dark: #111111; + --very-light-text: white; + --warning: #e2c01f; + --warning-color: #ffc01f; + --warning-color-accent: #fffcdd; + --white: #fff; + --yellow: #e2c01f; } + +/* stylelint-disable-line */ +/* stylelint-disable-line */ +/* HTML5 Boilerplate */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +nav, +section { + display: block; } + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; } + +audio:not([controls]) { + display: none; } + +[hidden] { + display: none; } + +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } + +html, +button, +input, +select, +textarea { + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #222; } + +body { + margin: 0; + font-size: 1em; + line-height: 1.4; } + +a:not(.btn) { + color: #1b6d99; } + +a:visited:not(.btn) { + color: #003655; } + +a:hover:not(.btn), +a:focus:not(.btn) { + color: #0079bc; } + +abbr[title] { + border-bottom: 1px dotted; } + +b, +strong { + font-weight: bold; } + +blockquote { + margin: 1em 40px; } + +dfn { + font-style: italic; } + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; } + +ins { + background: #ff9; + color: #000; + text-decoration: none; } + +mark { + background: #ff0; + color: #000; + font-style: italic; + font-weight: bold; } + +pre, +code, +kbd, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; } + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; } + +q { + quotes: none; } + +q::before, +q::after { + content: ""; + content: none; } + +small { + font-size: 85%; } + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +ul, +ol { + padding: 0 0 0 40px; + margin: 1em 0; } + +dd { + margin: 0 0 0 40px; } + +nav ul, +nav ol { + list-style: none; + margin: 0; + padding: 0; } + +img { + border: 0; + -ms-interpolation-mode: bicubic; + vertical-align: middle; } + +svg:not(:root) { + overflow: hidden; } + +figure { + margin: 0; } + +form { + margin: 0; } + +fieldset { + border: 0; + margin: 0; + padding: 0; } + +label { + cursor: pointer; } + +legend { + border: 0; + *margin-left: -7px; + padding: 0; + white-space: normal; } + +button, +input, +select, +textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; } + +button, +input { + line-height: normal; } + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; + *overflow: visible; } + +button[disabled], +input[disabled] { + cursor: default; } + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; + *width: 13px; + *height: 13px; } + +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; } + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; } + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +button:-moz-focusring { + outline: 1px dotted black; } + +textarea { + overflow: auto; + vertical-align: top; + resize: vertical; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +td { + vertical-align: top; } + +.chromeframe { + margin: 0.2em 0; + background: #ccc; + color: black; + padding: 0.2em 0; } + +.ir { + display: block; + border: 0; + text-indent: -999em; + overflow: hidden; + background-color: transparent; + background-repeat: no-repeat; + text-align: left; + direction: ltr; + *line-height: 0; } + +.ir br { + display: none; } + +.hidden { + display: none !important; + visibility: hidden; } + +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } + +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; } + +.invisible { + visibility: hidden; } + +.clearfix::before, +.clearfix::after { + content: ""; + display: table; } + +.clearfix::after { + clear: both; } + +.clearfix { + *zoom: 1; } + +@media print { + * { + background: transparent; + color: black !important; + box-shadow: none !important; + text-shadow: none !important; + filter: none !important; + -ms-filter: none !important; } + html, + body { + background: transparent !important; } + a, + a:visited { + text-decoration: underline; } + abbr[title]::after { + content: " (" attr(title) ")"; } + .ir a::after { + content: ""; } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; } + thead { + display: table-header-group; } + tr, + img { + page-break-inside: avoid; } + img { + max-width: 100% !important; } + @page { + margin: 1cm 1.2cm 2cm; } + p, + h2, + h3 { + orphans: 3; + widows: 3; } + h2, + h3 { + page-break-after: avoid; } } + +/* stylelint-disable-line */ +/* stylelint-disable-line */ +.discussion .actions-dropdown { + z-index: 10; } + +.discussion-thread .discussion-article .thread-wrapper .discussion-post .inline-comment-count { + z-index: 100; } + +.discussion .post-actions-list, +.discussion .response-actions-list, +.discussion .comment-actions-list, .discussion .actions-dropdown, .discussion .responses, .discussion .comments { + list-style: none; + margin: 0; + padding: 0; + text-indent: 0; } + .discussion .post-actions-list li, + .discussion .response-actions-list li, + .discussion .comment-actions-list li, .discussion .actions-dropdown li, .discussion .responses li, .discussion .comments li, .discussion .post-actions-list dt, + .discussion .response-actions-list dt, + .discussion .comment-actions-list dt, .discussion .actions-dropdown dt, .discussion .responses dt, .discussion .comments dt, .discussion .post-actions-list dd, + .discussion .response-actions-list dd, + .discussion .comment-actions-list dd, .discussion .actions-dropdown dd, .discussion .responses dd, .discussion .comments dd { + margin: 0; + padding: 0; } + +.btn-default:disabled, .btn-primary:disabled, .btn-brand:disabled, .btn-upgrade:disabled, .is-disabled.btn-default, .is-disabled.btn-primary, .is-disabled.btn-brand, .is-disabled.btn-upgrade { + pointer-events: none; + outline: none; + cursor: not-allowed; } + +.btn-small.btn-default, .btn-small.btn-primary, .btn-small.btn-brand, .btn-small.btn-upgrade { + padding: 0.625rem; + font-size: 14px; } + +.breadcrumbs { + font-size: 0.875rem; + line-height: line-height(small); } + .breadcrumbs .nav-item { + margin-left: 5px; + display: inline-block; } + @media (max-width: 1199.98px) { + .breadcrumbs .nav-item { + max-width: 240px; } } + @media (max-width: 767.98px) { + .breadcrumbs .nav-item { + max-width: 140px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } } + @media (max-width: 575.98px) { + .breadcrumbs .nav-item:not(:first-child) { + max-width: 60px; } } + .breadcrumbs .nav-item.nav-item-course { + max-width: none; } + .breadcrumbs .nav-item a, + .breadcrumbs .nav-item a:visited { + color: #0075b4; } + .breadcrumbs .nav-item a:hover { + color: #065683; } + .breadcrumbs .fa-angle-right { + margin-left: 5px; + display: inline-block; + color: #313131; } + @media (max-width: 767.98px) { + .breadcrumbs .fa-angle-right { + position: relative; + top: -5px; } } + .breadcrumbs .fa-angle-right:last-child { + display: none; } + +.btn-default, .btn-primary, .btn-brand, .btn-upgrade { + display: inline-block; + background-color: transparent; + background-image: none; + border-style: solid; + border-radius: 0.1875rem; + border-width: 1px; + box-shadow: none; + padding: 0.625rem 1.25rem; + font-size: 16px; + font-weight: normal; + text-shadow: none; + text-transform: capitalize; } + .block.btn-default, .block.btn-primary, .block.btn-brand, .block.btn-upgrade { + display: block; + width: 100%; } + .btn-default .icon, .btn-primary .icon, .btn-brand .icon, .btn-upgrade .icon { + display: inline-block; + vertical-align: baseline; } + .btn-default .icon:only-child, .btn-primary .icon:only-child, .btn-brand .icon:only-child, .btn-upgrade .icon:only-child, + .sr-only + .btn-default .icon, + .sr-only + .btn-primary .icon, + .sr-only + .btn-brand .icon, + .sr-only + .btn-upgrade .icon { + margin-right: 0; } + +.btn-default { + border-color: transparent; + background: transparent; + color: #0075b4; } + .btn-default:hover, .btn-default.is-hovered, .btn-default:focus, .btn-default.is-focused { + border-color: #0075b4; + background-color: transparent; + color: #0075b4; } + .btn-default:active, .btn-default.is-pressed, .btn-default.is-active { + border-color: #0075b4; + color: #0075b4; } + .btn-default:disabled, .btn-default.is-disabled { + border-color: #d2d0d0; + color: #6b6969; } + +.btn-primary, .btn-brand { + border-color: #0075b4; + background: #0075b4; + color: #fcfcfc; } + .btn-primary:hover, .btn-brand:hover, .btn-primary.is-hovered, .is-hovered.btn-brand, .btn-primary:focus, .btn-brand:focus, .btn-primary.is-focused, .is-focused.btn-brand { + border-color: #065683; + background-color: #065683; + color: #fcfcfc; } + .btn-primary:active, .btn-brand:active, .btn-primary.is-pressed, .is-pressed.btn-brand, .btn-primary.is-active, .is-active.btn-brand { + border-color: #0075b4; + background: #0075b4; } + .btn-primary:disabled, .btn-brand:disabled, .btn-primary.is-disabled, .is-disabled.btn-brand { + border-color: #d2d0d0; + background: #f2f3f3; + color: #676666; } + +.btn-upgrade { + border-color: #008100; + background: #008100; + color: #fcfcfc; } + .btn-upgrade:hover, .btn-upgrade.is-hovered, .btn-upgrade:focus, .btn-upgrade.is-focused { + border-color: #009b00; + background-color: #009b00; + color: #fcfcfc; } + .btn-upgrade:disabled, .btn-upgrade.is-disabled { + border-color: #d2d0d0; + background: #f2f3f3; + color: #fcfcfc; } + +.edx-cookie-banner-wrapper { + background: #f2f8fd; + box-sizing: border-box; + /** Base Styles - start **/ + text-align: left; + line-height: 1.5; + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1rem; + font-weight: 400; + /** Base Styles - end **/ } + .edx-cookie-banner-wrapper .alert { + position: relative; + padding: 8px 20px; } + .edx-cookie-banner-wrapper .alert-dismissible .close { + position: absolute; + top: 0; + right: 0; + padding: 0.75rem 1.25rem; + background: transparent; + border: 0; + text-shadow: 0 1px 0 #fff; + opacity: 0.5; + float: right; + line-height: 1; + font-size: 1.5rem; + font-weight: 500; } + .edx-cookie-banner-wrapper .alert-dismissible .btn { + display: inline-block; + text-align: center; + white-space: nowrap; + vertical-align: middle; } + .edx-cookie-banner-wrapper .edx-cookie-banner { + box-sizing: border-box; + display: flex; + justify-content: space-between; + margin: 0 auto; + background: inherit; + border: none; } + .edx-cookie-banner-wrapper .edx-cookie-banner .policy-link { + color: #19291F; + text-decoration: underline; } + .edx-cookie-banner-wrapper .edx-cookie-banner .policy-link:focus, .edx-cookie-banner-wrapper .edx-cookie-banner .policy-link:hover { + color: #075683; + border: none; } + .edx-cookie-banner-wrapper .edx-cookie-banner .alert-dialog { + margin: auto; + color: #4e4e4e; + text-align: center; + max-width: 800px; + font-size: 14px; } + .edx-cookie-banner-wrapper .edx-cookie-banner .btn.close { + padding: 4px; + color: #19291F; } + .edx-cookie-banner-wrapper .edx-cookie-banner .btn.close:focus, .edx-cookie-banner-wrapper .edx-cookie-banner .btn.close:hover { + color: #075683; + cursor: pointer; } + +.discussion .responses .posted-by { + font-weight: 700; } + +.discussion-article .posted-details .username { + font-weight: 600; } + +.discussion .post-label, .discussion-article .posted-details, .discussion-post .post-context { + font-weight: 300; } + +.discussion-response .response-body, .discussion-post .post-body, .discussion .action-button .action-label, .discussion .actions-dropdown .action-list-item, .view-discussion-home .label, .view-discussion-home .home-description, .view-discussion-home .home-stats .stats-grouping .profile-stat, .discussion-article .posted-details, .discussion-comment .response-body, .discussion-post .post-context, .discussion .post-actions-list, +.discussion .response-actions-list, +.discussion .comment-actions-list { + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } + +.discussion-response .response-body, .discussion-post .post-body { + font-size: 14px; + line-height: 20.72px; } + +.discussion .action-button .action-label, .discussion .actions-dropdown .action-list-item, .view-discussion-home .label, .view-discussion-home .home-description, .view-discussion-home .home-stats .stats-grouping .profile-stat, .discussion-article .posted-details, .discussion-comment .response-body, .discussion-post .post-context, .discussion .post-actions-list, +.discussion .response-actions-list, +.discussion .comment-actions-list { + font-size: 12px; + line-height: 17.76px; } + +.forum-nav-thread-comments-count { + font-weight: 600; } + +.discussion-response .response-header-content .username, .forum-nav .search-alert-content .message em, .forum-nav .search-alert-content .link-jump, .forum-nav .search-alert-controls .control { + font-weight: 700; } + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +.discussion-body, .discussion-module { + width: 100%; + border: none; + background: transparent; + box-shadow: none; } + .discussion-body:after, .discussion-module:after { + content: ""; + display: table; + clear: both; } + @media (min-width: 768px) { + .discussion-body, .discussion-module { + display: flex; + flex-direction: row-reverse; } } + .discussion-body .bottom-post-status, .discussion-module .bottom-post-status { + padding: 30px; + font-size: var(--forum-x-large-font-size); + font-weight: 700; + color: var(--forum-color-copy-light); + text-align: center; } + .discussion-body .discussion-article, .discussion-module .discussion-article { + position: relative; } + .discussion-body .discussion-article a, .discussion-module .discussion-article a, + .discussion-body .discussion-article p, .discussion-module .discussion-article p { + word-wrap: break-word; } + .discussion-body .main-article.new, .discussion-module .main-article.new { + display: none; + padding: calc(var(--baseline) * 2.5); } + .discussion-body .discussion-reply-new, .discussion-module .discussion-reply-new { + transition: opacity 0.2s linear 0s; } + .discussion-body .discussion-reply-new:after, .discussion-module .discussion-reply-new:after { + content: ""; + display: table; + clear: both; } + .discussion-body .discussion-reply-new h4, .discussion-module .discussion-reply-new h4 { + font-size: var(--forum-large-font-size); + font-weight: 700; } + .discussion-body .reply-post-control, .discussion-module .reply-post-control { + margin-top: var(--baseline); } + +.discussion-module { + display: block; + position: relative; + border-radius: var(--forum-border-radius); } + .discussion-module header .anonymous { + font-size: var(--forum-base-font-size); } + .discussion-module .inline-discussion-topic { + width: 100%; + font-size: var(--forum-small-font-size); } + .discussion-module .inline-discussion-topic .inline-discussion-topic-title { + font-weight: bold; } + .discussion-module .discussion-module-header { + float: left; + width: 57.44681%; + margin-bottom: calc(var(--baseline) * 0.75); } + .discussion-module .add_post_btn_container { + text-align: right; + width: 100%; + height: calc(2 * var(--baseline)); } + .discussion-module div.add-response.post-extended-content { + margin-top: var(--baseline); + margin-bottom: var(--baseline); } + +.discussion-show { + float: right; + position: relative; + top: 3px; + font-size: var(--forum-base-font-size); + text-align: center; } + .discussion-show.shown { + background-color: #fff; + color: #0075b4; } + +section.discussion:after { + content: ""; + display: table; + clear: both; } + +.new-post-article .forum-new-post-form { + padding: var(--baseline); } + +.new-post-article .inner-wrapper { + max-width: 1920px; + min-width: 760px; + margin: auto; } + +.xblock-student_view-discussion { + padding-top: 15px !important; } + +section.discussion-pagination { + margin-top: calc(var(--baseline) * 1.5); } + section.discussion-pagination nav.discussion-paginator { + float: right; } + section.discussion-pagination nav.discussion-paginator ol li { + padding-right: calc(var(--baseline) / 2); + list-style: none; + display: inline-block; } + section.discussion-pagination nav.discussion-paginator ol li.current-page span { + display: inline-block; + height: 35px; + padding: 0 calc(var(--baseline) * 0.75); + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); + font-size: var(--forum-base-font-size); + font-weight: 700; + line-height: 32px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); } + +.discussion-module .btn, +.wmd-prompt-dialog .btn, .discussion-module .btn-brand, +.wmd-prompt-dialog .btn-brand { + transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s; + display: inline-block; + border: 1px solid var(--forum-color-active-thread); + border-radius: 3px; + margin: 0; + background-image: none; + box-shadow: none; + height: 40px; + text-shadow: none; + font-family: var(--font-family-sans-serif); + font-size: 14px; + font-weight: 600; + word-wrap: break-word; + white-space: nowrap; } + .discussion-module .block.btn, + .wmd-prompt-dialog .block.btn, .discussion-module .block.btn-brand, + .wmd-prompt-dialog .block.btn-brand { + display: block; + width: 100%; } + .discussion-module .btn:disabled, + .wmd-prompt-dialog .btn:disabled, .discussion-module .btn-brand:disabled, + .wmd-prompt-dialog .btn-brand:disabled, .discussion-module .is-disabled.btn, + .wmd-prompt-dialog .is-disabled.btn, .discussion-module .is-disabled.btn-brand, + .wmd-prompt-dialog .is-disabled.btn-brand { + pointer-events: none; + outline: none; + cursor: not-allowed; } + .discussion-module .btn:hover, + .wmd-prompt-dialog .btn:hover, .discussion-module .btn-brand:hover, + .wmd-prompt-dialog .btn-brand:hover, .discussion-module .btn:active, + .wmd-prompt-dialog .btn:active, .discussion-module .btn-brand:active, + .wmd-prompt-dialog .btn-brand:active, .discussion-module .btn:focus, + .wmd-prompt-dialog .btn:focus, .discussion-module .btn-brand:focus, + .wmd-prompt-dialog .btn-brand:focus { + border-color: var(--forum-color-hover) !important; + background-color: var(--forum-color-hover) !important; + background-image: none !important; + box-shadow: none !important; + color: var(--forum-color-active-text) !important; + text-decoration: none !important; } + +.discussion-module .btn, +.wmd-prompt-dialog .btn { + background-color: var(--forum-color-background); + color: var(--forum-color-active-thread); } + +.discussion-module .btn-brand, +.wmd-prompt-dialog .btn-brand { + background-color: var(--forum-color-active-thread); + color: var(--forum-color-active-text); } + +.discussion-module .discussion { + clear: both; } + +.discussion .post-actions-list, +.discussion .response-actions-list, +.discussion .comment-actions-list { + text-align: right; } + .discussion .post-actions-list .actions-item, + .discussion .response-actions-list .actions-item, + .discussion .comment-actions-list .actions-item { + box-sizing: border-box; + display: block; + margin: calc(var(--baseline) / 4) 0; } + .discussion .post-actions-list .actions-item.is-hidden, + .discussion .response-actions-list .actions-item.is-hidden, + .discussion .comment-actions-list .actions-item.is-hidden { + display: none; } + .discussion .post-actions-list .actions-item.is-disabled a, + .discussion .response-actions-list .actions-item.is-disabled a, + .discussion .comment-actions-list .actions-item.is-disabled a { + pointer-events: none; } + .discussion .post-actions-list .actions-item.is-disabled a .action-icon, + .discussion .response-actions-list .actions-item.is-disabled a .action-icon, + .discussion .comment-actions-list .actions-item.is-disabled a .action-icon { + display: none; } + .discussion .post-actions-list .actions-item.is-disabled a .action-label, + .discussion .response-actions-list .actions-item.is-disabled a .action-label, + .discussion .comment-actions-list .actions-item.is-disabled a .action-label { + padding-right: 0; } + .discussion .post-actions-list .actions-item.is-disabled a:hover, + .discussion .response-actions-list .actions-item.is-disabled a:hover, + .discussion .comment-actions-list .actions-item.is-disabled a:hover { + border-color: transparent; } + .discussion .post-actions-list .actions-item.is-disabled a:hover .action-label, + .discussion .response-actions-list .actions-item.is-disabled a:hover .action-label, + .discussion .comment-actions-list .actions-item.is-disabled a:hover .action-label { + color: var(--forum-color-active-text); } + .discussion .post-actions-list .more-wrapper, + .discussion .response-actions-list .more-wrapper, + .discussion .comment-actions-list .more-wrapper { + position: relative; } + +.discussion .actions-dropdown { + right: 0; + display: none; + position: absolute; + top: 100%; + pointer-events: none; + min-width: var(--actions-dropdown-width); } + .discussion .actions-dropdown.is-expanded { + display: block; + pointer-events: auto; } + .discussion .actions-dropdown .actions-dropdown-list { + box-sizing: border-box; + box-shadow: 0 1px 1px var(--shadow-l1); + position: relative; + width: 100%; + border-radius: var(--forum-border-radius); + margin: calc(var(--baseline) / 4) 0 0 0; + border: 1px solid var(--forum-color-border); + padding: calc(var(--baseline) / 2) calc(var(--baseline) * 0.75); + background: var(--forum-color-background); } + .discussion .actions-dropdown .actions-dropdown-list::after, .discussion .actions-dropdown .actions-dropdown-list::before { + right: 6px; + bottom: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; } + .discussion .actions-dropdown .actions-dropdown-list::after { + margin-right: 1px; + border-color: transparent; + border-bottom-color: var(--white); + border-width: 6px; } + .discussion .actions-dropdown .actions-dropdown-list::before { + border-color: transparent; + border-bottom-color: var(--forum-color-border); + border-width: 7px; } + .discussion .actions-dropdown .actions-item { + display: block; + margin: 0; } + .discussion .actions-dropdown .actions-item.is-hidden { + display: none; } + +.discussion .action-button { + transition: border 0.5s linear 0s; + box-sizing: border-box; + display: inline-block; + border: 1px solid transparent; + border-radius: var(--forum-border-radius); + color: #313131; } + .discussion .action-button .action-icon { + display: inline-block; + font-size: var(--forum-small-font-size); + height: var(--baseline); + width: var(--baseline); + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); + text-align: center; + color: #313131; } + .discussion .action-button .action-icon .icon { + margin-right: 0; + vertical-align: middle; } + .discussion .action-button .action-label { + display: none; + vertical-align: middle; + padding: 2px 8px; } + .discussion .action-button:hover .action-label, .discussion .action-button:focus .action-label { + display: inline-block; } + .discussion .action-button:hover .action-icon, .discussion .action-button:focus .action-icon { + -webkit-border-top-left-radius: 0; + -moz-border-topleft-radius: 0; + border-top-left-radius: 0; + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: var(--forum-border-radius); + -moz-border-bottomright-radius: var(--forum-border-radius); + border-bottom-right-radius: var(--forum-border-radius); + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; } + .discussion .action-button.action-follow .action-label { + color: #0075b4; } + .discussion .action-button.action-follow.is-checked .action-icon, .discussion .action-button.action-follow:hover .action-icon, .discussion .action-button.action-follow:focus .action-icon { + background-color: var(--forum-color-following); + border: 1px solid #0075b4; + color: var(--white); } + .discussion .action-button.action-follow:hover, .discussion .action-button.action-follow:focus { + border-color: var(--forum-color-following); } + .discussion .action-button.action-vote .action-label { + opacity: 1; } + .discussion .action-button.action-vote.is-checked .action-icon, .discussion .action-button.action-vote:hover .action-icon, .discussion .action-button.action-vote:focus .action-icon { + background-color: var(--green); + border: 1px solid var(--green); + color: var(--white); } + .discussion .action-button.action-vote:hover, .discussion .action-button.action-vote:focus { + border-color: var(--green); } + .discussion .action-button.action-vote:hover .action-label, .discussion .action-button.action-vote:focus .action-label { + color: var(--green); } + .discussion .action-button.action-endorse.is-checked .action-icon, .discussion .action-button.action-endorse:hover .action-icon, .discussion .action-button.action-endorse:focus .action-icon { + background-color: #0075b4; + border: 1px solid #0075b4; + color: var(--white); } + .discussion .action-button.action-endorse:hover, .discussion .action-button.action-endorse:focus { + border-color: #0075b4; + background-color: var(--forum-color-background); } + .discussion .action-button.action-endorse:hover .action-label, .discussion .action-button.action-endorse:focus .action-label { + color: #0075b4; } + .discussion .action-button.action-answer.is-checked .action-icon, .discussion .action-button.action-answer:hover .action-icon, .discussion .action-button.action-answer:focus .action-icon { + border: 1px solid var(--green); + background-color: var(--green); + color: var(--white); } + .discussion .action-button.action-answer:hover, .discussion .action-button.action-answer:focus { + border-color: var(--green); + background-color: var(--forum-color-background); } + .discussion .action-button.action-answer:hover .action-label, .discussion .action-button.action-answer:focus .action-label { + color: var(--green); } + .discussion .action-button.action-more { + position: relative; } + .discussion .action-button.action-more:hover, .discussion .action-button.action-more:focus { + border-color: #313131; + background-color: var(--forum-color-background); } + .discussion .action-button.action-more:hover .action-icon, .discussion .action-button.action-more:focus .action-icon { + border: 1px solid #313131; + background-color: #313131; + color: #fff; } + .discussion .action-button.action-more:hover .action-label, .discussion .action-button.action-more:focus .action-label { + opacity: 1; + color: var(--black); } + +.discussion .actions-dropdown .action-list-item { + text-align: right; + display: block; + width: 100%; + padding: calc(var(--baseline) / 10) 0; + white-space: nowrap; + color: #313131; } + .discussion .actions-dropdown .action-list-item:hover, .discussion .actions-dropdown .action-list-item:focus { + color: var(--link-color); } + .discussion .actions-dropdown .action-list-item .action-icon { + margin-left: calc(var(--baseline) / 4); + display: inline-block; + width: calc(var(--baseline) / 2); + color: inherit; } + .discussion .actions-dropdown .action-list-item .action-label { + display: inline-block; + color: inherit; } + .discussion .actions-dropdown .action-list-item.is-checked.action-pin { + color: var(--pink); } + .discussion .actions-dropdown .action-list-item.is-checked.action-report { + color: var(--pink); } + .discussion .actions-dropdown .action-list-item.is-checked:hover, .discussion .actions-dropdown .action-list-item.is-checked:focus { + color: var(--link-color); } + +.discussion .action-button .action-label, +.discussion .action-list-item .action-label { + float: left; } + .discussion .action-button .action-label .label-checked, + .discussion .action-list-item .action-label .label-checked { + display: none; } + +.discussion .action-button.is-checked .label-unchecked, +.discussion .action-list-item.is-checked .label-unchecked { + display: none; } + +.discussion .action-button.is-checked .label-checked, +.discussion .action-list-item.is-checked .label-checked { + display: inline; } + +.discussion .btn-primary:focus, .discussion .btn-brand:focus, +.discussion .btn-outline-primary:focus { + box-shadow: 0 0 0 2px #0078b4; } + +.forum-new-post-form .wmd-input { + box-sizing: border-box; + position: relative; + z-index: 1; } + +.wmd-preview-container { + -webkit-border-top-left-radius: 0; + -moz-border-topleft-radius: 0; + border-top-left-radius: 0; + -webkit-border-top-right-radius: 0; + -moz-border-topright-radius: 0; + border-top-right-radius: 0; + -webkit-border-bottom-right-radius: var(--forum-border-radius); + -moz-border-bottomright-radius: var(--forum-border-radius); + border-bottom-right-radius: var(--forum-border-radius); + -webkit-border-bottom-left-radius: var(--forum-border-radius); + -moz-border-bottomleft-radius: var(--forum-border-radius); + border-bottom-left-radius: var(--forum-border-radius); + box-sizing: border-box; + border: 1px solid var(--forum-color-border); + width: 100%; + background: var(--forum-color-background-light); + border-color: var(--forum-color-border); } + .discussion-board .wmd-preview-container, + .discussion-user-profile-board .wmd-preview-container { + margin-top: calc(-1 * var(--baseline) / 4); } + +.wmd-preview-label { + padding-left: calc(var(--baseline) / 4); + padding-top: 3px; + width: 100%; + color: var(--forum-color-editor-preview-label); + font-size: var(--forum-small-font-size); } + +.wmd-preview { + padding: calc(var(--baseline) / 2) var(--baseline); + width: auto; + background-color: var(--forum-color-background-light); } + .wmd-preview ol, + .wmd-preview ul { + padding-left: calc(var(--baseline) * 2); + padding-right: 0; } + .wmd-preview svg { + max-width: 100% !important; } + +.wmd-button { + background: none; } + +.wmd-button-bar { + width: 100%; } + +.wmd-button-row { + transition: all 0.2s ease-out 0s; + position: relative; + overflow: hidden; + margin: calc(var(--baseline) / 2) calc(var(--baseline) / 4) calc(var(--baseline) / 4) calc(var(--baseline) / 4); + padding: 0; + height: 30px; } + +.wmd-spacer { + margin-left: 14px; + position: absolute; + display: inline-block; + width: 1px; + height: 20px; + background-color: Silver; + list-style: none; } + +.wmd-button { + position: absolute; + display: inline-block; + width: 20px; + height: 20px; + border: none; + background: none; + list-style: none; + cursor: pointer; + padding: 0; } + +.wmd-button:hover { + background: none; + box-shadow: none; } + +.wmd-button > span { + display: inline-block; + width: 20px; + height: 20px; + background-image: url("var(--static-path)/images/wmd-buttons-transparent.png"); + background-position: 0 0; + background-repeat: no-repeat; } + +.wmd-spacer1 { + left: 50px; } + +.wmd-spacer2 { + left: 175px; } + +.wmd-spacer3 { + left: 300px; } + +.wmd-input { + -webkit-border-top-left-radius: var(--forum-border-radius); + -moz-border-topleft-radius: var(--forum-border-radius); + border-top-left-radius: var(--forum-border-radius); + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: 0; + -moz-border-bottomright-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; + box-sizing: border-box; + margin-top: 0; + border: 1px solid var(--forum-color-border); + padding: calc(var(--baseline) / 2); + width: 100%; + height: 125px; + background: var(--forum-color-background); + font-size: var(--forum-base-font-size); + font-family: var(--font-family-sans-serif); + line-height: 1.6; + box-sizing: border-box; + width: 100%; + background: var(--forum-color-background); } + +.wmd-prompt-background { + background-color: var(--black); } + +.wmd-prompt-dialog { + background: var(--forum-color-background); + padding: var(--baseline); } + .wmd-prompt-dialog > div { + font-size: var(--forum-base-font-size); + font-family: arial, helvetica, sans-serif; } + .wmd-prompt-dialog b { + font-size: var(--forum-large-font-size); } + .wmd-prompt-dialog > form > input[type="text"] { + border-radius: var(--forum-border-radius); + color: #333; } + .wmd-prompt-dialog > form > input[type="button"] { + border: 1px solid #888; + font-family: var(--font-family-sans-serif); + font-size: var(--forum-x-large-font-size); } + .wmd-prompt-dialog > form > input[type="file"] { + margin-bottom: 18px; } + .wmd-prompt-dialog .field-group .field .field-hint { + margin-left: 0; + width: 100%; } + .wmd-prompt-dialog .field-input-label { + font-size: var(--forum-base-font-size); } + .wmd-prompt-dialog .input-text { + width: calc(100% - 175px); + height: 40px; } + .wmd-prompt-dialog .input-text.has-error { + border-color: var(--forum-color-error); } + .wmd-prompt-dialog .field-message.has-error { + width: calc(100% - 175px); + background-color: var(--forum-color-error); + color: var(--white); + padding: calc(var(--baseline) / 2); + box-sizing: border-box; } + .wmd-prompt-dialog .field-label { + cursor: pointer; } + .wmd-prompt-dialog .input-checkbox { + margin-right: calc(var(--baseline) / 5); } + .wmd-prompt-dialog #new-url-input { + direction: ltr; } + +.wmd-button-row { + position: relative; + height: 25px; } + +.discussion .post-label { + margin: calc(var(--baseline)/4) calc(var(--baseline)/2) 0 0; + font-size: var(--forum-small-font-size); + display: inline; + white-space: nowrap; } + .discussion .post-label .icon { + margin-right: calc(var(--baseline) / 5); } + .discussion .post-label.is-hidden { + display: none; } + .discussion .post-label.post-label-pinned { + color: var(--forum-color-pinned); } + .discussion .post-label.post-label-following { + color: var(--forum-color-following); } + .discussion .post-label.post-label-reported { + color: var(--forum-color-reported); } + .discussion .post-label.post-label-closed { + color: var(--forum-color-closed); } + .discussion .post-label.post-label-by-staff { + color: var(--forum-color-staff); } + .discussion .post-label.post-label-by-community-ta { + color: var(--forum-color-community-ta); } + +.discussion .user-label-staff, +.discussion .user-label-community-ta { + color: var(--forum-color-copy-light); + font-size: var(--forum-small-font-size); + white-space: nowrap; } + +.forum-nav-thread-link .forum-nav-thread-labels .post-label .icon { + margin-right: 0; } + +.discussion-board > .page-header .has-breadcrumbs .breadcrumbs { + margin-bottom: calc(var(--baseline) / 2); + font-size: 1rem; + font-weight: 600; + line-height: var(--line-height-base); } + +.forum-nav-browse-menu-wrapper { + border-bottom: 1px solid var(--forum-color-border); + background: #e7e7e7; } + +.forum-nav-browse-filter { + position: relative; + border-bottom: 1px solid var(--forum-color-border); + padding: calc(var(--baseline) / 4); } + +.forum-nav-browse-filter .icon { + right: calc(var(--baseline)/4 + 1px + calc(var(--baseline) / 4)); + font-size: var(--forum-small-font-size); + position: absolute; + margin-top: -6px; + top: 75%; } + +.forum-nav-browse-filter-input { + width: 100%; } + +.forum-nav-browse-menu-following .icon { + float: left; + left: calc(var(--baseline) / 2); + position: relative; + top: 13px; } + +.forum-nav-browse-menu-following .forum-nav-browse-title { + padding-left: calc(var(--baseline) * 1.5); } + +.forum-nav-browse-menu-item { + margin-bottom: 0; } + +.forum-nav-browse-title { + text-align: left; + display: block; + width: 100%; + border: 0; + border-radius: 0; + border-bottom: 1px solid var(--forum-color-border); + padding: calc(var(--baseline) / 2); + background: transparent; + box-shadow: none; + background-image: none; + cursor: pointer; } + .forum-nav-browse-title:hover, .forum-nav-browse-title:focus, .forum-nav-browse-title.is-focused { + background-image: none !important; + box-shadow: none !important; + background: var(--forum-color-background) !important; + /* stylelint-disable-line */ } + +.forum-nav-browse-title .icon { + margin-right: calc(var(--baseline) / 2); } + +.forum-nav-browse-menu { + padding-left: 0; + margin: 0; + font-size: var(--forum-base-font-size); + overflow-y: scroll; + list-style: none; + max-height: 600px; } + +.forum-nav-browse-submenu { + list-style: none; + margin: 0; + padding: 0; } + .forum-nav-browse-submenu li .forum-nav-browse-title { + padding-left: var(--baseline); } + +.forum-nav-refine-bar { + -webkit-border-top-left-radius: var(--forum-border-radius); + -moz-border-topleft-radius: var(--forum-border-radius); + border-top-left-radius: var(--forum-border-radius); + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: 0; + -moz-border-bottomright-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; + font-size: var(--forum-small-font-size); + border-bottom: 1px solid var(--forum-color-border); + background-color: #e7e7e7; + padding: calc(var(--baseline) / 4) calc(var(--baseline) / 2); + color: var(--black); } + .forum-nav-refine-bar:after { + content: ""; + display: table; + clear: both; } + +.forum-nav-filter-main { + text-align: left; + float: left; + box-sizing: border-box; + width: 50%; } + +.forum-nav-filter-cohort, +.forum-nav-sort { + text-align: right; + box-sizing: border-box; } + +.discussion-board .forum-nav-filter-cohort { + float: right; + text-align: right; + width: 50%; } + +.forum-nav-sort { + float: right; } + +.forum-nav-filter-main-control, .forum-nav-filter-cohort-control, .forum-nav-sort-control { + border: none; + max-width: 100%; + background-color: transparent; } + +.forum-nav-filter-cohort-control { + max-width: 60%; } + +.forum-nav-thread-list { + padding-left: 0 !important; + min-height: 60px; + max-height: 800px; + border-bottom: 1px solid #e7e7e7; + margin: 0; + overflow-y: auto; + list-style: none; + border-radius: 0 0 3px 3px; } + .forum-nav-thread-list .forum-nav-thread-labels { + margin: 5px 0 0; + padding-left: 0 !important; } + .forum-nav-thread-list .thread-preview-body { + margin-top: calc(var(--baseline) / 4); + color: var(--forum-color-response-count); + font-size: var(--forum-small-font-size); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + +.course-wrapper .course-content .forum-nav-thread-list-wrapper .forum-nav-thread-list { + padding-left: 0; + list-style: none; } + .course-wrapper .course-content .forum-nav-thread-list-wrapper .forum-nav-thread-list .forum-nav-thread { + margin: 0; } + +.forum-nav-thread { + border-bottom: 1px solid var(--forum-color-border); + background-color: var(--forum-color-background); + margin-bottom: 0; } + .forum-nav-thread:last-child { + border-bottom: 1px solid var(--forum-color-border); } + .forum-nav-thread .forum-nav-thread-link { + border-left: 3px solid transparent; + display: flex; + padding: calc(var(--baseline) / 2); + transition: none; + align-items: center; + justify-content: space-between; + color: var(--forum-color-read-post); } + .forum-nav-thread .forum-nav-thread-link:hover, .forum-nav-thread .forum-nav-thread-link:active, .forum-nav-thread .forum-nav-thread-link:focus { + text-decoration: none; } + .forum-nav-thread .forum-nav-thread-link:hover { + background-color: var(--forum-color-hover-thread); } + .forum-nav-thread .forum-nav-thread-link.is-active { + background-color: var(--forum-color-reading-thread); } + .forum-nav-thread .forum-nav-thread-link .forum-nav-thread-unread-comments-count { + display: inline-block; + font-size: var(--forum-small-font-size); + white-space: nowrap; } + .forum-nav-thread.never-read .forum-nav-thread-link { + border-left: 3px solid var(--forum-color-never-read-post); + color: var(--forum-color-never-read-post); } + +.forum-nav-thread-wrapper-0, .forum-nav-thread-wrapper-1, .forum-nav-thread-wrapper-2 { + display: inline-block; + vertical-align: middle; } + +.forum-nav-thread-wrapper-0 { + margin-right: calc(var(--baseline) / 5); + align-self: flex-start; } + .forum-nav-thread-wrapper-0 .icon { + font-size: var(--forum-base-font-size); + width: 18px; + text-align: center; } + +.forum-nav-thread-wrapper-1 { + margin: 0 calc(var(--baseline) / 4); + max-width: calc(100% - 75px); + flex-grow: 1; } + +.forum-nav-thread-wrapper-2 { + text-align: right; + min-width: 40px; + white-space: nowrap; } + +.forum-nav-thread-title { + margin-left: 0; + font-size: var(--forum-base-font-size); + display: block; } + +.forum-nav-thread-votes-count, .forum-nav-thread-comments-count { + margin-right: calc(var(--baseline) / 4); + font-size: var(--forum-small-font-size); + display: inline-block; + text-align: center; + color: var(--black); } + .forum-nav-thread-votes-count:last-child, .forum-nav-thread-comments-count:last-child { + margin-right: 0; } + +.forum-nav-thread-comments-count { + position: relative; + margin-left: calc(var(--baseline) / 4); + margin-bottom: calc(var(--baseline) / 4); + border-radius: var(--forum-border-radius); + padding: calc(var(--baseline) / 10) calc(var(--baseline) / 5); + min-width: 2em; + background-color: #e7e7e7; } + .forum-nav-thread-comments-count::after { + content: ''; + display: block; + position: absolute; + bottom: calc(-1 * var(--baseline) / 4); + right: calc(var(--baseline) / 4); + width: 0; + height: 0; + border-style: solid; + border-width: 0 calc(var(--baseline) / 4) calc(var(--baseline) / 4) 0; + border-color: transparent var(--forum-color-border) transparent transparent; } + +.forum-nav-load-more { + border-bottom: 1px solid var(--forum-color-border); + background-color: #e7e7e7; } + +.forum-nav-load-more-link, .forum-nav-loading { + display: block; + padding: var(--baseline) 0; + text-align: center; } + +.forum-nav-load-more-link { + color: var(--link-color); + width: 100%; } + .forum-nav-load-more-link:hover, .forum-nav-load-more-link:focus { + color: var(--forum-color-active-text); + background-color: var(--forum-color-active-thread) !important; } + +.view-discussion-home { + padding-left: var(--baseline); + display: none; } + @media (min-width: 992px) { + .view-discussion-home { + display: block; } } + .view-discussion-home section { + border-bottom: 1px solid var(--forum-color-border); } + .view-discussion-home .label { + display: block; } + .view-discussion-home .label-settings { + padding-top: var(--baseline); + padding-bottom: calc(var(--baseline) / 2); } + .view-discussion-home .home-header { + margin: 0; } + .view-discussion-home .home-title { + font-size: var(--forum-large-font-size); + color: var(--black); + margin-bottom: calc(var(--baseline) / 4); } + .view-discussion-home .home-description { + margin-bottom: calc(var(--baseline) / 2); } + .view-discussion-home .home-stats { + padding: var(--baseline) 0; } + .view-discussion-home .home-stats .label-area { + display: inline-block; + min-width: calc(var(--baseline) * 5); + width: 25%; + vertical-align: middle; } + .view-discussion-home .home-stats .label-area .profile-link { + font-weight: 700; } + .view-discussion-home .home-stats .stats-grouping { + padding-left: var(--baseline); + display: inline-block; + width: 70%; } + .view-discussion-home .home-stats .stats-grouping .profile-stat { + display: inline-block; + width: 32.5%; + vertical-align: middle; } + .view-discussion-home .home-stats .stats-grouping .profile-stat .count { + font-size: var(--forum-x-large-font-size); + display: inline-block; + padding: 0 calc(var(--baseline) / 2); + vertical-align: middle; } + .view-discussion-home .home-stats .stats-grouping .profile-stat .profile-stat-label { + vertical-align: middle; } + .view-discussion-home .home-helpgrid { + border-bottom: none; + border-radius: var(--forum-border-radius); + border: 1px solid var(--forum-color-border); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } + .view-discussion-home .helpgrid-row { + border-bottom: 1px solid var(--forum-color-border); } + .view-discussion-home .helpgrid-row .row-title { + padding: calc(var(--baseline) * 1.5) var(--baseline); + background-color: #dedede; + font-size: var(--forum-small-font-size); } + .view-discussion-home .helpgrid-row .row-item-full, + .view-discussion-home .helpgrid-row .row-item { + font-size: var(--forum-small-font-size); + padding: 0 calc(var(--baseline) / 2); + width: 26%; + vertical-align: middle; } + .view-discussion-home .helpgrid-row .row-item-full .icon, + .view-discussion-home .helpgrid-row .row-item .icon { + padding: 0 calc(var(--baseline) / 2); + font-size: 24px; + vertical-align: middle; + display: table-cell; } + .view-discussion-home .helpgrid-row .row-item-full .fa-stack .icon, + .view-discussion-home .helpgrid-row .row-item .fa-stack .icon { + padding: 0 calc(var(--baseline) / 2); } + .view-discussion-home .helpgrid-row .row-item-full .row-description, + .view-discussion-home .helpgrid-row .row-item .row-description { + vertical-align: middle; + display: table-cell; } + .view-discussion-home .helpgrid-row .row-item-full .notification-checkbox { + margin-right: calc(var(--baseline) / 2); + display: inline-block; + padding: calc(var(--baseline)/4) 0 calc(var(--baseline)/2) 0; + border-radius: var(--forum-border-radius); + border: 1px solid gray; } + .view-discussion-home .helpgrid-row .row-item-full .notification-checkbox .email-setting { + display: inline-block; + text-align: center; + vertical-align: middle; + margin-left: calc(var(--baseline) / 2); } + .view-discussion-home .helpgrid-row .row-item-full .notification-checkbox .icon { + display: inline-block; } + .view-discussion-home .helpgrid-row .row-item-full .notification-checkbox .email-setting:checked ~ .icon { + color: var(--green); } + .view-discussion-home .helpgrid-row .row-item-full .row-description { + display: inline-block; + width: 80%; } + .view-discussion-home .helpgrid-row-navigation .fa-bars { + color: #e7e7e7; } + .view-discussion-home .helpgrid-row-navigation .fa-search { + color: var(--gray-300); } + .view-discussion-home .helpgrid-row-navigation .fa-sort { + color: var(--gray-300); } + .view-discussion-home .helpgrid-row-participation .fa-plus { + color: var(--green); } + .view-discussion-home .helpgrid-row-participation .fa-flag { + color: var(--pink); } + .view-discussion-home .helpgrid-row-participation .fa-star { + color: var(--blue); } + .view-discussion-home .helpgrid-row-notification .fa-square { + color: var(--green); } + .view-discussion-home .helpgrid-row-notification .fa-envelope { + color: var(--gray-300); } + +.discussion-post { + padding: 0 calc(var(--baseline) / 2); } + .discussion-post .post-header-actions { + float: right; } + +.discussion-article .posted-details { + margin: calc(var(--baseline) / 5) 0; + color: var(--forum-color-copy-light); } + .discussion-article .posted-details .username { + display: inline; } + .discussion-article .posted-details .timeago, + .discussion-article .posted-details .top-post-status { + color: inherit; } + +.thread-title { + display: block; + margin-bottom: var(--baseline); + font-size: var(--forum-x-large-font-size); + font-weight: 600; } + +.thread-responses-wrapper, +.post-extended-content { + padding: 0 calc(var(--baseline) / 2); } + +.discussion-response { + min-height: calc(var(--baseline) * 5); } + .discussion-response .response-header-content { + display: inline-block; + vertical-align: top; + width: 91.48936%; } + .discussion-response .response-header-actions { + float: right; + right: var(--baseline); + position: absolute; + top: calc(var(--baseline) / 2); } + +.discussion-comment .response-body { + padding: calc(var(--baseline) / 2) calc(var(--baseline) * 1.5) 0 0; + display: inline-block; + margin-top: calc(var(--baseline) / 2); + width: 82.97872%; } + .discussion-comment .response-body p + p { + margin-top: calc(var(--baseline) / 2); } + +.discussion-comment .comment-actions-list { + float: right; + right: calc(var(--baseline) / 2); + position: absolute; + top: 0; } + +.thread-wrapper .response-btn-count-wrapper { + margin: var(--baseline) 0; } + +.discussion-post:after, +.discussion-response:after, +.discussion-comment:after { + content: ""; + display: table; + clear: both; } + +.discussion-post .author-image, +.discussion-response .author-image, +.discussion-comment .author-image { + margin-right: calc(var(--baseline) / 2); + display: inline-block; + vertical-align: top; } + .discussion-post .author-image:empty, + .discussion-response .author-image:empty, + .discussion-comment .author-image:empty { + display: none; } + .discussion-post .author-image.level-post, + .discussion-response .author-image.level-post, + .discussion-comment .author-image.level-post { + height: var(--post-image-dimension); + width: var(--post-image-dimension); } + .discussion-post .author-image.level-response, + .discussion-response .author-image.level-response, + .discussion-comment .author-image.level-response { + height: var(--response-image-dimension); + width: var(--response-image-dimension); } + .discussion-post .author-image.level-comment, + .discussion-response .author-image.level-comment, + .discussion-comment .author-image.level-comment { + height: var(--comment-image-dimension); + width: var(--comment-image-dimension); } + .discussion-post .author-image img, + .discussion-response .author-image img, + .discussion-comment .author-image img { + border-radius: var(--forum-border-radius); } + +.discussion-response .response-body { + padding: calc(var(--baseline) / 2) calc(var(--baseline) * 1.5) 0 0; + margin-bottom: 0.2em; + font-size: var(--forum-base-font-size); } + +.discussion-post:after { + content: ""; + display: table; + clear: both; } + +.discussion-post .post-header-content { + max-width: calc(100% - var(--actions-dropdown-offset)); } + .discussion-post .post-header-content .post-title { + font-size: var(--forum-x-large-font-size); + margin-bottom: calc(var(--baseline) / 4); } + +.discussion-post .post-body { + padding: calc(var(--baseline) / 2) 0; + max-width: calc(100% - var(--actions-dropdown-offset)); } + +.discussion-post .post-context { + color: var(--forum-color-copy-light); } + .discussion-post .post-context:empty { + display: none; } + +.discussion-thread { + padding: 0; + margin-bottom: var(--baseline); + transition: all 0.25s linear 0s; } + .discussion-thread p { + margin-bottom: 0; } + .discussion-thread .discussion-article { + transition: all 0.2s linear 0s; + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); + min-height: 0; + background: var(--forum-color-background); + box-shadow: 0 1px 0 var(--shadow); + transition: all 0.2s linear 0s; } + .discussion-thread .discussion-article .thread-wrapper { + -webkit-border-top-left-radius: var(--forum-border-radius); + -moz-border-topleft-radius: var(--forum-border-radius); + border-top-left-radius: var(--forum-border-radius); + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: 0; + -moz-border-bottomright-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; + position: relative; + overflow-x: hidden; + overflow-y: auto; + max-height: 600px; + background-color: var(--forum-color-background); } + .discussion-thread .discussion-article .thread-wrapper .discussion-post .inline-comment-count { + margin-right: calc(var(--baseline) / 2); + float: right; + position: relative; + display: block; + height: 27px; + margin-top: 6px; + padding: 0 8px; + border-radius: var(--forum-border-radius); + font-size: var(--forum-small-font-size); + font-weight: 400; + line-height: 25px; + color: #888; } + .discussion-thread .discussion-article .thread-wrapper .responses header { + padding-bottom: 0; + margin-bottom: calc(var(--baseline) * 0.75); } + .discussion-thread .discussion-article .thread-wrapper .responses header .posted-by { + margin-right: calc(var(--baseline) / 4); + float: left; + font-size: var(--forum-large-font-size); } + .discussion-thread .discussion-article .thread-wrapper .discussion-reply-new .wmd-input { + height: 120px; } + .discussion-thread .discussion-article .thread-wrapper .post-extended-content { + display: none; } + .discussion-thread .discussion-article .post-tools { + box-shadow: 0 1px 1px var(--shadow) inset; + background: var(--white); } + .discussion-thread .discussion-article .post-tools:hover { + background: var(--forum-color-hover-thread); } + .discussion-thread .discussion-article .post-tools:hover .icon { + color: var(--link-hover); } + .discussion-thread .discussion-article .post-tools .btn-link { + display: block; + padding: calc(var(--baseline) * 0.25) var(--baseline); + font-size: var(--forum-small-font-size); + line-height: 30px; } + .discussion-thread .discussion-article .post-tools .btn-link .icon { + margin-right: calc(var(--baseline) * 0.25); + color: var(--link-color); } + +.thread-wrapper img, +.forum-new-post-form img { + max-width: 100%; } + +.forum-new-post-form, +.edit-post-form { + box-sizing: border-box; + margin: 0; + border-radius: var(--forum-border-radius); + max-width: 1920px; } + .forum-new-post-form:after, + .edit-post-form:after { + content: ""; + display: table; + clear: both; } + .forum-new-post-form label, + .forum-new-post-form .field-label-text, + .edit-post-form label, + .edit-post-form .field-label-text { + -webkit-font-smoothing: initial; } + .forum-new-post-form .post-type, + .edit-post-form .post-type { + text-shadow: none; } + .forum-new-post-form .post-type, + .edit-post-form .post-type { + margin-bottom: 0; } + .forum-new-post-form .post-errors, + .edit-post-form .post-errors { + margin: 0 0 var(--baseline); + padding: 0 !important; + list-style: none !important; } + .forum-new-post-form .post-field, + .edit-post-form .post-field { + margin-bottom: calc(var(--baseline) * 1.5); } + .forum-new-post-form .post-field .field-label, + .edit-post-form .post-field .field-label { + margin: 0; } + .forum-new-post-form .post-field .field-label .field-input, + .edit-post-form .post-field .field-label .field-input { + display: inline-block; + vertical-align: top; } + .forum-new-post-form .post-field .field-label .field-input:not([type="text"]), + .edit-post-form .post-field .field-label .field-input:not([type="text"]) { + border-width: 0; + padding: 0; } + .forum-new-post-form .post-field .field-label .field-label-text, + .edit-post-form .post-field .field-label .field-label-text { + display: block; } + .forum-new-post-form .post-field .field-label .field-label-text + .field-input, + .edit-post-form .post-field .field-label .field-label-text + .field-input { + width: 75%; } + .forum-new-post-form .post-field .field-label .js-post-title, + .edit-post-form .post-field .field-label .js-post-title { + width: 85%; } + .forum-new-post-form .post-field .field-help, + .edit-post-form .post-field .field-help { + margin: calc(var(--baseline) / 4) 0 calc(var(--baseline) / 4) 0; + font-size: var(--forum-small-font-size); + line-height: 1.5; } + .forum-new-post-form .post-field .field-help#field_help_post_type, + .edit-post-form .post-field .field-help#field_help_post_type { + margin: calc(var(--baseline) / 4) 0 calc(var(--baseline) * 0.75) 0; } + .forum-new-post-form .post-field .field-help#new-post-editor-description, + .edit-post-form .post-field .field-help#new-post-editor-description { + padding-left: 0; } + .forum-new-post-form .post-field .field-input, + .edit-post-form .post-field .field-input { + padding: 0; + border: none; } + .forum-new-post-form .post-options, + .edit-post-form .post-options { + margin: var(--baseline) 0; } + .forum-new-post-form .post-options .field-label, + .edit-post-form .post-options .field-label { + margin-right: var(--baseline); } + .forum-new-post-form .post-options .icon, + .edit-post-form .post-options .icon { + margin-right: calc(var(--baseline) / 4); } + +.edit-post-form { + box-sizing: border-box; + width: 100%; + padding-top: 0; } + .edit-post-form:after { + content: ""; + display: table; + clear: both; } + .edit-post-form h1 { + font-size: var(--forum-large-font-size); } + .edit-post-form .form-row { + margin-top: var(--baseline); } + .edit-post-form .post-cancel { + float: left; + margin: calc(var(--baseline)/2) 0 0 calc(var(--baseline)*0.75); } + .edit-post-form .post-update { + float: left; + margin-top: calc(var(--baseline) / 2); } + .edit-post-form .post-update:hover, .edit-post-form .post-update:focus { + border-color: #222; } + .edit-post-form .edit-post-title { + box-sizing: border-box; + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); + padding: 0 calc(var(--baseline) / 2); + width: 100%; + height: 40px; + box-shadow: 0 1px 3px var(--shadow-l1) inset; + font-size: var(--forum-large-font-size); + font-family: var(--font-family-sans-serif); } + +.discussion-module .forum-new-post-form { + background: var(--forum-color-background); } + +.forum-new-post-form .post-type-label, +.edit-post-form .post-type-label { + margin-right: var(--baseline); } + +.forum-new-post-form input[type=text].field-input, +.edit-post-form input[type=text].field-input { + box-sizing: border-box; + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); + padding: 0 calc(var(--baseline) / 2); + width: 70%; + height: 40px; + color: #333; + font-size: var(--forum-large-font-size); + font-family: 'Open Sans', sans-serif; } + +.forum-new-post-form select.field-input, +.edit-post-form select.field-input { + border: 1px solid var(--forum-color-border) !important; + height: 40px; } + +.forum-new-post-form .post-topic.field-input, +.edit-post-form .post-topic.field-input { + width: 100%; } + +.forum-new-post-form .post-option, +.edit-post-form .post-option { + box-sizing: border-box; + display: inline-block; + margin-right: var(--baseline); + border-radius: var(--forum-border-radius); + padding: calc(var(--baseline) / 2); + cursor: pointer; } + .forum-new-post-form .post-option:hover, + .edit-post-form .post-option:hover { + border-color: var(--forum-color-border); } + .forum-new-post-form .post-option .icon, + .edit-post-form .post-option .icon { + margin-right: calc(var(--baseline) / 4); } + +.discussion .responses:empty { + display: none; } + +.discussion .responses .forum-response { + animation: fadeIn 0.3s; + position: relative; + margin: var(--baseline) 0; + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); + box-shadow: 0 0 1px var(--shadow); } + +.discussion .responses .discussion-response { + box-sizing: border-box; + -webkit-border-top-left-radius: var(--forum-border-radius); + -moz-border-topleft-radius: var(--forum-border-radius); + border-top-left-radius: var(--forum-border-radius); + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: 0; + -moz-border-bottomright-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; + padding: var(--baseline); + background-color: var(--forum-color-background); } + +.discussion-response .response-header-content .username { + font-size: var(--forum-base-font-size); } + +.discussion-response .response-body ol, +.discussion-response .response-body ul { + padding-left: calc(var(--baseline) * 2); + padding-right: 0; } + +.discussion .add-response { + display: inline; + padding: calc(var(--baseline) / 2); } + +.forum-response .action-show-comments { + font-size: var(--forum-base-font-size); + box-sizing: border-box; + display: block; + padding: calc(var(--baseline) / 2) var(--baseline); + width: 100%; + background: #f5f5f5; + box-shadow: 0 1px 3px -1px var(--shadow) inset; } + +.discussion .responses .forum-response.staff { + padding-top: 38px; + border-color: #009fe2; } + +.discussion .responses .forum-response.community-ta { + padding-top: 38px; + border-color: var(--forum-color-community-ta); } + +.discussion .responses .forum-response .staff-banner { + -webkit-border-top-left-radius: var(--forum-border-radius); + -moz-border-topleft-radius: var(--forum-border-radius); + border-top-left-radius: var(--forum-border-radius); + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: 0; + -moz-border-bottomright-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; + left: 0; + position: absolute; + top: 0; + width: 100%; + height: 14px; + padding: 1px calc(var(--baseline) / 4); + box-sizing: border-box; + background: #009fe2; + font-size: var(--forum-small-font-size); + font-weight: 700; + color: var(--white); } + +.discussion .responses .forum-response .community-ta-banner { + -webkit-border-top-left-radius: var(--forum-border-radius); + -moz-border-topleft-radius: var(--forum-border-radius); + border-top-left-radius: var(--forum-border-radius); + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: 0; + -moz-border-bottomright-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; + left: 0; + position: absolute; + top: 0; + width: 100%; + height: 14px; + padding: 1px calc(var(--baseline) / 4); + box-sizing: border-box; + background: var(--forum-color-community-ta); + font-size: var(--forum-small-font-size); + font-weight: 700; + color: var(--white); } + +.discussion .responses .forum-response.loading { + height: 0; + margin: 0; + padding: 0; + border: none; + box-shadow: none; } + +.discussion .comments { + -webkit-border-top-left-radius: 0; + -moz-border-topleft-radius: 0; + border-top-left-radius: 0; + -webkit-border-top-right-radius: 0; + -moz-border-topright-radius: 0; + border-top-right-radius: 0; + -webkit-border-bottom-right-radius: var(--forum-border-radius); + -moz-border-bottomright-radius: var(--forum-border-radius); + border-bottom-right-radius: var(--forum-border-radius); + -webkit-border-bottom-left-radius: var(--forum-border-radius); + -moz-border-bottomleft-radius: var(--forum-border-radius); + border-bottom-left-radius: var(--forum-border-radius); + background: #f5f5f5; + box-shadow: 0 1px 3px -1px var(--shadow) inset; } + .discussion .comments > li { + border-top: 1px solid var(--forum-color-border); + padding: calc(var(--baseline) / 2) var(--baseline); + position: relative; } + .discussion .comments blockquote { + background: var(--forum-color-background-light); + border-radius: var(--forum-border-radius); + padding: calc(var(--baseline) / 4) calc(var(--baseline) / 2); + font-size: var(--forum-base-font-size); } + .discussion .comments .comment-form { + padding: calc(var(--baseline) / 2) 0; } + .discussion .comments .comment-form:after { + content: ""; + display: table; + clear: both; } + .discussion .comments .comment-form .comment-form-input { + padding: calc(var(--baseline) / 4) calc(var(--baseline) / 2); + background-color: var(--forum-color-background); + font-size: var(--forum-base-font-size); } + .discussion .comments .comment-form .discussion-submit-comment { + float: left; + margin-top: 8px; } + .discussion .comments .comment-form .wmd-input { + transition: all 0.2s linear 0s; + height: 40px; } + .discussion .comments .comment-form .discussion-errors { + margin: 0; } + +.response-count { + float: right; + margin-right: var(--baseline)/2; + color: var(--forum-color-copy-light); + font-size: var(--forum-base-font-size); } + +.response-pagination { + visibility: visible; + margin: calc(var(--baseline) / 2) 0; } + .response-pagination:empty { + visibility: hidden; } + .response-pagination .response-display-count { + display: block; + padding: calc(var(--baseline) / 2) 0; + color: var(--forum-color-response-count); + font-size: var(--forum-base-font-size); } + .response-pagination .load-response-button { + text-align: left; + position: relative; + margin: calc(var(--baseline) / 2) 0; + width: 100%; } + +.forum-nav .search-alert { + transition: none; + padding: calc(var(--baseline) / 2) 11px calc(var(--baseline) / 2) 18px; + background-color: var(--black); } + +.forum-nav .search-alert-content, +.forum-nav .search-alert-controls { + display: inline-block; + vertical-align: middle; } + +.forum-nav .search-alert-content { + width: 70%; } + .forum-nav .search-alert-content .message { + font-size: var(--forum-small-font-size); + color: var(--white); } + .forum-nav .search-alert-content .message em { + font-style: italic; } + .forum-nav .search-alert-content .link-jump { + transition: none; } + +.forum-nav .search-alert-controls { + text-align: right; + width: 28%; } + .forum-nav .search-alert-controls .control { + transition: none; + padding: calc(var(--baseline) / 4) calc(var(--baseline) / 2); + color: var(--white); + font-size: var(--forum-base-font-size); } + .forum-nav .search-alert-controls .control:hover, .forum-nav .search-alert-controls .control:focus { + color: var(--white); + text-decoration: none; } + +.has-breadcrumbs .breadcrumbs { + margin: 5px 0 0; } + .has-breadcrumbs .breadcrumbs .all-topics { + font-size: 14px; } + .has-breadcrumbs .breadcrumbs .all-topics .fa { + margin-right: 10px; } + +.forum-nav-browse-filter label { + margin-bottom: 0; + width: 100%; } + +.forum-nav-browse-filter-input { + padding-left: calc(var(--baseline) / 4); + padding-right: calc(var(--baseline) / 2)12px; + box-shadow: none !important; + border-radius: var(--forum-border-radius) !important; + height: auto !important; + font-size: var(--forum-small-font-size) !important; } + +.forum-nav-filter-main, +.forum-nav-filter-cohort, +.forum-nav-sort { + font: inherit; + line-height: 1em; + margin-bottom: 0; } + +.forum-nav-filter-main-control, +.forum-nav-filter-cohort-control, +.forum-nav-sort-control { + font: inherit; } + +li[class*=forum-nav-thread-label-] span { + color: inherit; } + +li[class*=forum-nav-thread-label-]::before, li[class*=forum-nav-thread-label-]::after { + display: none !important; } + +.discussion .action-label span, +.discussion .action-icon span { + color: inherit; } + +.discussion-module .post-header { + margin-bottom: 0 !important; + padding-bottom: 0 !important; } + .discussion-module .post-header .posted-details { + margin: calc(var(--baseline) / 5) 0 !important; } + .discussion-module .post-header .post-labels { + font-size: var(--forum-base-font-size); } + .discussion-module .post-header .post-title { + margin-bottom: 0 !important; } + +.discussion-article .response-header { + line-height: 1 !important; + font-size: var(--forum-base-font-size) !important; + margin-bottom: 0 !important; + padding-bottom: 0 !important; } + +/* + This file mirror UXPL Form field styles +*/ +.post-type-label { + margin-right: 20px; + display: inline-block; + line-height: 100%; } + +.post-options .field-label { + display: inline-block; } + +.field-label .field-input:checked + .field-input-label { + color: #0075b4; } + +.input-radio, +.input-checkbox { + margin-right: 10px; } + +.discussion.inline-discussion .inline-threads { + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); } + +.discussion.inline-discussion .inline-thread { + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); } + .discussion.inline-discussion .inline-thread .forum-nav-bar { + padding: calc(var(--baseline) / 2) calc(var(--baseline) / 4); + color: var(--forum-color-navigation-bar); + position: relative; } + .discussion.inline-discussion .inline-thread .forum-nav-bar .all-posts-btn { + color: var(--forum-color-primary); } + .discussion.inline-discussion .inline-thread .forum-nav-bar .all-posts-btn .icon { + margin-left: calc(var(--baseline) / 2); } + .discussion.inline-discussion .inline-thread .forum-content { + padding: calc(var(--baseline) / 2); + overflow-y: auto; } + +.discussion.inline-discussion .new-post-article { + position: relative; + border: 1px solid var(--forum-color-border); } + .discussion.inline-discussion .new-post-article .add-post-cancel { + right: calc(var(--baseline) / 2); + top: calc(var(--baseline) / 2); + position: absolute; + color: #0075b4; } + .discussion.inline-discussion .new-post-article .add-post-cancel:hover, .discussion.inline-discussion .new-post-article .add-post-cancel:focus { + border-color: transparent; + box-shadow: none; + background-color: transparent; + background-image: none; } diff --git a/xblocks_contrib/discussion/static/css/inline-discussion.css b/xblocks_contrib/discussion/static/css/inline-discussion.css new file mode 100644 index 00000000..0c808c5a --- /dev/null +++ b/xblocks_contrib/discussion/static/css/inline-discussion.css @@ -0,0 +1,4572 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +.align-baseline { + vertical-align: baseline !important; } + +.align-top { + vertical-align: top !important; } + +.align-middle { + vertical-align: middle !important; } + +.align-bottom { + vertical-align: bottom !important; } + +.align-text-bottom { + vertical-align: text-bottom !important; } + +.align-text-top { + vertical-align: text-top !important; } + +.bg-primary { + background-color: #0075b4 !important; } + +a.bg-primary:hover, a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { + background-color: #005481 !important; } + +.bg-secondary { + background-color: #313131 !important; } + +a.bg-secondary:hover, a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { + background-color: #181818 !important; } + +.bg-success { + background-color: #008100 !important; } + +a.bg-success:hover, a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { + background-color: #004e00 !important; } + +.bg-info { + background-color: #17a2b8 !important; } + +a.bg-info:hover, a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { + background-color: #117a8b !important; } + +.bg-warning { + background-color: #e2c01f !important; } + +a.bg-warning:hover, a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { + background-color: #b69b18 !important; } + +.bg-danger { + background-color: #b20610 !important; } + +a.bg-danger:hover, a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { + background-color: #81040c !important; } + +.bg-light { + background-color: #e7e7e7 !important; } + +a.bg-light:hover, a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { + background-color: #cecece !important; } + +.bg-dark { + background-color: #313131 !important; } + +a.bg-dark:hover, a.bg-dark:focus, +button.bg-dark:hover, +button.bg-dark:focus { + background-color: #181818 !important; } + +.bg-inverse { + background-color: #fff !important; } + +a.bg-inverse:hover, a.bg-inverse:focus, +button.bg-inverse:hover, +button.bg-inverse:focus { + background-color: #e6e6e6 !important; } + +.bg-disabled { + background-color: #767676 !important; } + +a.bg-disabled:hover, a.bg-disabled:focus, +button.bg-disabled:hover, +button.bg-disabled:focus { + background-color: #5d5d5d !important; } + +.bg-purchase { + background-color: #008100 !important; } + +a.bg-purchase:hover, a.bg-purchase:focus, +button.bg-purchase:hover, +button.bg-purchase:focus { + background-color: #004e00 !important; } + +.bg-lightest { + background-color: #f5f5f5 !important; } + +a.bg-lightest:hover, a.bg-lightest:focus, +button.bg-lightest:hover, +button.bg-lightest:focus { + background-color: gainsboro !important; } + +.bg-darker { + background-color: #111 !important; } + +a.bg-darker:hover, a.bg-darker:focus, +button.bg-darker:hover, +button.bg-darker:focus { + background-color: black !important; } + +.bg-darkest { + background-color: #000 !important; } + +a.bg-darkest:hover, a.bg-darkest:focus, +button.bg-darkest:hover, +button.bg-darkest:focus { + background-color: black !important; } + +.bg-white { + background-color: #fff !important; } + +.bg-transparent { + background-color: transparent !important; } + +.border { + border: 1px solid #e7e7e7 !important; } + +.border-top { + border-top: 1px solid #e7e7e7 !important; } + +.border-right { + border-right: 1px solid #e7e7e7 !important; } + +.border-bottom { + border-bottom: 1px solid #e7e7e7 !important; } + +.border-left { + border-left: 1px solid #e7e7e7 !important; } + +.border-0 { + border: 0 !important; } + +.border-top-0 { + border-top: 0 !important; } + +.border-right-0 { + border-right: 0 !important; } + +.border-bottom-0 { + border-bottom: 0 !important; } + +.border-left-0 { + border-left: 0 !important; } + +.border-primary { + border-color: #0075b4 !important; } + +.border-secondary { + border-color: #313131 !important; } + +.border-success { + border-color: #008100 !important; } + +.border-info { + border-color: #17a2b8 !important; } + +.border-warning { + border-color: #e2c01f !important; } + +.border-danger { + border-color: #b20610 !important; } + +.border-light { + border-color: #e7e7e7 !important; } + +.border-dark { + border-color: #313131 !important; } + +.border-inverse { + border-color: #fff !important; } + +.border-disabled { + border-color: #767676 !important; } + +.border-purchase { + border-color: #008100 !important; } + +.border-lightest { + border-color: #f5f5f5 !important; } + +.border-darker { + border-color: #111 !important; } + +.border-darkest { + border-color: #000 !important; } + +.border-white { + border-color: #fff !important; } + +.rounded { + border-radius: 0.1875rem !important; } + +.rounded-top { + border-top-left-radius: 0.1875rem !important; + border-top-right-radius: 0.1875rem !important; } + +.rounded-right { + border-top-right-radius: 0.1875rem !important; + border-bottom-right-radius: 0.1875rem !important; } + +.rounded-bottom { + border-bottom-right-radius: 0.1875rem !important; + border-bottom-left-radius: 0.1875rem !important; } + +.rounded-left { + border-top-left-radius: 0.1875rem !important; + border-bottom-left-radius: 0.1875rem !important; } + +.rounded-circle { + border-radius: 50% !important; } + +.rounded-0 { + border-radius: 0 !important; } + +.clearfix:after { + content: ""; + display: table; + clear: both; } + +.d-none { + display: none !important; } + +.d-inline { + display: inline !important; } + +.d-inline-block { + display: inline-block !important; } + +.d-block { + display: block !important; } + +.d-table { + display: table !important; } + +.d-table-row { + display: table-row !important; } + +.d-table-cell { + display: table-cell !important; } + +.d-flex { + display: flex !important; } + +.d-inline-flex { + display: inline-flex !important; } + +@media (min-width: 576px) { + .d-sm-none { + display: none !important; } + .d-sm-inline { + display: inline !important; } + .d-sm-inline-block { + display: inline-block !important; } + .d-sm-block { + display: block !important; } + .d-sm-table { + display: table !important; } + .d-sm-table-row { + display: table-row !important; } + .d-sm-table-cell { + display: table-cell !important; } + .d-sm-flex { + display: flex !important; } + .d-sm-inline-flex { + display: inline-flex !important; } } + +@media (min-width: 768px) { + .d-md-none { + display: none !important; } + .d-md-inline { + display: inline !important; } + .d-md-inline-block { + display: inline-block !important; } + .d-md-block { + display: block !important; } + .d-md-table { + display: table !important; } + .d-md-table-row { + display: table-row !important; } + .d-md-table-cell { + display: table-cell !important; } + .d-md-flex { + display: flex !important; } + .d-md-inline-flex { + display: inline-flex !important; } } + +@media (min-width: 992px) { + .d-lg-none { + display: none !important; } + .d-lg-inline { + display: inline !important; } + .d-lg-inline-block { + display: inline-block !important; } + .d-lg-block { + display: block !important; } + .d-lg-table { + display: table !important; } + .d-lg-table-row { + display: table-row !important; } + .d-lg-table-cell { + display: table-cell !important; } + .d-lg-flex { + display: flex !important; } + .d-lg-inline-flex { + display: inline-flex !important; } } + +@media (min-width: 1200px) { + .d-xl-none { + display: none !important; } + .d-xl-inline { + display: inline !important; } + .d-xl-inline-block { + display: inline-block !important; } + .d-xl-block { + display: block !important; } + .d-xl-table { + display: table !important; } + .d-xl-table-row { + display: table-row !important; } + .d-xl-table-cell { + display: table-cell !important; } + .d-xl-flex { + display: flex !important; } + .d-xl-inline-flex { + display: inline-flex !important; } } + +@media print { + .d-print-none { + display: none !important; } + .d-print-inline { + display: inline !important; } + .d-print-inline-block { + display: inline-block !important; } + .d-print-block { + display: block !important; } + .d-print-table { + display: table !important; } + .d-print-table-row { + display: table-row !important; } + .d-print-table-cell { + display: table-cell !important; } + .d-print-flex { + display: flex !important; } + .d-print-inline-flex { + display: inline-flex !important; } } + +.embed-responsive { + position: relative; + display: block; + width: 100%; + padding: 0; + overflow: hidden; } + .embed-responsive::before { + display: block; + content: ""; } + .embed-responsive .embed-responsive-item, + .embed-responsive iframe, + .embed-responsive embed, + .embed-responsive object, + .embed-responsive video { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; } + +.embed-responsive-21by9::before { + padding-top: 42.85714%; } + +.embed-responsive-16by9::before { + padding-top: 56.25%; } + +.embed-responsive-4by3::before { + padding-top: 75%; } + +.embed-responsive-1by1::before { + padding-top: 100%; } + +.flex-row { + flex-direction: row !important; } + +.flex-column { + flex-direction: column !important; } + +.flex-row-reverse { + flex-direction: row-reverse !important; } + +.flex-column-reverse { + flex-direction: column-reverse !important; } + +.flex-wrap { + flex-wrap: wrap !important; } + +.flex-nowrap { + flex-wrap: nowrap !important; } + +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; } + +.justify-content-start { + justify-content: flex-start !important; } + +.justify-content-end { + justify-content: flex-end !important; } + +.justify-content-center { + justify-content: center !important; } + +.justify-content-between { + justify-content: space-between !important; } + +.justify-content-around { + justify-content: space-around !important; } + +.align-items-start { + align-items: flex-start !important; } + +.align-items-end { + align-items: flex-end !important; } + +.align-items-center { + align-items: center !important; } + +.align-items-baseline { + align-items: baseline !important; } + +.align-items-stretch { + align-items: stretch !important; } + +.align-content-start { + align-content: flex-start !important; } + +.align-content-end { + align-content: flex-end !important; } + +.align-content-center { + align-content: center !important; } + +.align-content-between { + align-content: space-between !important; } + +.align-content-around { + align-content: space-around !important; } + +.align-content-stretch { + align-content: stretch !important; } + +.align-self-auto { + align-self: auto !important; } + +.align-self-start { + align-self: flex-start !important; } + +.align-self-end { + align-self: flex-end !important; } + +.align-self-center { + align-self: center !important; } + +.align-self-baseline { + align-self: baseline !important; } + +.align-self-stretch { + align-self: stretch !important; } + +@media (min-width: 576px) { + .flex-sm-row { + flex-direction: row !important; } + .flex-sm-column { + flex-direction: column !important; } + .flex-sm-row-reverse { + flex-direction: row-reverse !important; } + .flex-sm-column-reverse { + flex-direction: column-reverse !important; } + .flex-sm-wrap { + flex-wrap: wrap !important; } + .flex-sm-nowrap { + flex-wrap: nowrap !important; } + .flex-sm-wrap-reverse { + flex-wrap: wrap-reverse !important; } + .justify-content-sm-start { + justify-content: flex-start !important; } + .justify-content-sm-end { + justify-content: flex-end !important; } + .justify-content-sm-center { + justify-content: center !important; } + .justify-content-sm-between { + justify-content: space-between !important; } + .justify-content-sm-around { + justify-content: space-around !important; } + .align-items-sm-start { + align-items: flex-start !important; } + .align-items-sm-end { + align-items: flex-end !important; } + .align-items-sm-center { + align-items: center !important; } + .align-items-sm-baseline { + align-items: baseline !important; } + .align-items-sm-stretch { + align-items: stretch !important; } + .align-content-sm-start { + align-content: flex-start !important; } + .align-content-sm-end { + align-content: flex-end !important; } + .align-content-sm-center { + align-content: center !important; } + .align-content-sm-between { + align-content: space-between !important; } + .align-content-sm-around { + align-content: space-around !important; } + .align-content-sm-stretch { + align-content: stretch !important; } + .align-self-sm-auto { + align-self: auto !important; } + .align-self-sm-start { + align-self: flex-start !important; } + .align-self-sm-end { + align-self: flex-end !important; } + .align-self-sm-center { + align-self: center !important; } + .align-self-sm-baseline { + align-self: baseline !important; } + .align-self-sm-stretch { + align-self: stretch !important; } } + +@media (min-width: 768px) { + .flex-md-row { + flex-direction: row !important; } + .flex-md-column { + flex-direction: column !important; } + .flex-md-row-reverse { + flex-direction: row-reverse !important; } + .flex-md-column-reverse { + flex-direction: column-reverse !important; } + .flex-md-wrap { + flex-wrap: wrap !important; } + .flex-md-nowrap { + flex-wrap: nowrap !important; } + .flex-md-wrap-reverse { + flex-wrap: wrap-reverse !important; } + .justify-content-md-start { + justify-content: flex-start !important; } + .justify-content-md-end { + justify-content: flex-end !important; } + .justify-content-md-center { + justify-content: center !important; } + .justify-content-md-between { + justify-content: space-between !important; } + .justify-content-md-around { + justify-content: space-around !important; } + .align-items-md-start { + align-items: flex-start !important; } + .align-items-md-end { + align-items: flex-end !important; } + .align-items-md-center { + align-items: center !important; } + .align-items-md-baseline { + align-items: baseline !important; } + .align-items-md-stretch { + align-items: stretch !important; } + .align-content-md-start { + align-content: flex-start !important; } + .align-content-md-end { + align-content: flex-end !important; } + .align-content-md-center { + align-content: center !important; } + .align-content-md-between { + align-content: space-between !important; } + .align-content-md-around { + align-content: space-around !important; } + .align-content-md-stretch { + align-content: stretch !important; } + .align-self-md-auto { + align-self: auto !important; } + .align-self-md-start { + align-self: flex-start !important; } + .align-self-md-end { + align-self: flex-end !important; } + .align-self-md-center { + align-self: center !important; } + .align-self-md-baseline { + align-self: baseline !important; } + .align-self-md-stretch { + align-self: stretch !important; } } + +@media (min-width: 992px) { + .flex-lg-row { + flex-direction: row !important; } + .flex-lg-column { + flex-direction: column !important; } + .flex-lg-row-reverse { + flex-direction: row-reverse !important; } + .flex-lg-column-reverse { + flex-direction: column-reverse !important; } + .flex-lg-wrap { + flex-wrap: wrap !important; } + .flex-lg-nowrap { + flex-wrap: nowrap !important; } + .flex-lg-wrap-reverse { + flex-wrap: wrap-reverse !important; } + .justify-content-lg-start { + justify-content: flex-start !important; } + .justify-content-lg-end { + justify-content: flex-end !important; } + .justify-content-lg-center { + justify-content: center !important; } + .justify-content-lg-between { + justify-content: space-between !important; } + .justify-content-lg-around { + justify-content: space-around !important; } + .align-items-lg-start { + align-items: flex-start !important; } + .align-items-lg-end { + align-items: flex-end !important; } + .align-items-lg-center { + align-items: center !important; } + .align-items-lg-baseline { + align-items: baseline !important; } + .align-items-lg-stretch { + align-items: stretch !important; } + .align-content-lg-start { + align-content: flex-start !important; } + .align-content-lg-end { + align-content: flex-end !important; } + .align-content-lg-center { + align-content: center !important; } + .align-content-lg-between { + align-content: space-between !important; } + .align-content-lg-around { + align-content: space-around !important; } + .align-content-lg-stretch { + align-content: stretch !important; } + .align-self-lg-auto { + align-self: auto !important; } + .align-self-lg-start { + align-self: flex-start !important; } + .align-self-lg-end { + align-self: flex-end !important; } + .align-self-lg-center { + align-self: center !important; } + .align-self-lg-baseline { + align-self: baseline !important; } + .align-self-lg-stretch { + align-self: stretch !important; } } + +@media (min-width: 1200px) { + .flex-xl-row { + flex-direction: row !important; } + .flex-xl-column { + flex-direction: column !important; } + .flex-xl-row-reverse { + flex-direction: row-reverse !important; } + .flex-xl-column-reverse { + flex-direction: column-reverse !important; } + .flex-xl-wrap { + flex-wrap: wrap !important; } + .flex-xl-nowrap { + flex-wrap: nowrap !important; } + .flex-xl-wrap-reverse { + flex-wrap: wrap-reverse !important; } + .justify-content-xl-start { + justify-content: flex-start !important; } + .justify-content-xl-end { + justify-content: flex-end !important; } + .justify-content-xl-center { + justify-content: center !important; } + .justify-content-xl-between { + justify-content: space-between !important; } + .justify-content-xl-around { + justify-content: space-around !important; } + .align-items-xl-start { + align-items: flex-start !important; } + .align-items-xl-end { + align-items: flex-end !important; } + .align-items-xl-center { + align-items: center !important; } + .align-items-xl-baseline { + align-items: baseline !important; } + .align-items-xl-stretch { + align-items: stretch !important; } + .align-content-xl-start { + align-content: flex-start !important; } + .align-content-xl-end { + align-content: flex-end !important; } + .align-content-xl-center { + align-content: center !important; } + .align-content-xl-between { + align-content: space-between !important; } + .align-content-xl-around { + align-content: space-around !important; } + .align-content-xl-stretch { + align-content: stretch !important; } + .align-self-xl-auto { + align-self: auto !important; } + .align-self-xl-start { + align-self: flex-start !important; } + .align-self-xl-end { + align-self: flex-end !important; } + .align-self-xl-center { + align-self: center !important; } + .align-self-xl-baseline { + align-self: baseline !important; } + .align-self-xl-stretch { + align-self: stretch !important; } } + +.float-left { + float: left !important; } + +.float-right { + float: right !important; } + +.float-none { + float: none !important; } + +@media (min-width: 576px) { + .float-sm-left { + float: left !important; } + .float-sm-right { + float: right !important; } + .float-sm-none { + float: none !important; } } + +@media (min-width: 768px) { + .float-md-left { + float: left !important; } + .float-md-right { + float: right !important; } + .float-md-none { + float: none !important; } } + +@media (min-width: 992px) { + .float-lg-left { + float: left !important; } + .float-lg-right { + float: right !important; } + .float-lg-none { + float: none !important; } } + +@media (min-width: 1200px) { + .float-xl-left { + float: left !important; } + .float-xl-right { + float: right !important; } + .float-xl-none { + float: none !important; } } + +.position-static { + position: static !important; } + +.position-relative { + position: relative !important; } + +.position-absolute { + position: absolute !important; } + +.position-fixed { + position: fixed !important; } + +.position-sticky { + position: sticky !important; } + +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; } + +.fixed-bottom { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: 1030; } + +@supports (position: sticky) { + .sticky-top { + position: sticky; + top: 0; + z-index: 1020; } } + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + clip-path: inset(50%); + border: 0; } + +.sr-only-focusable:active, .sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + overflow: visible; + clip: auto; + white-space: normal; + clip-path: none; } + +.w-25 { + width: 25% !important; } + +.w-50 { + width: 50% !important; } + +.w-75 { + width: 75% !important; } + +.w-100 { + width: 100% !important; } + +.h-25 { + height: 25% !important; } + +.h-50 { + height: 50% !important; } + +.h-75 { + height: 75% !important; } + +.h-100 { + height: 100% !important; } + +.mw-100 { + max-width: 100% !important; } + +.mh-100 { + max-height: 100% !important; } + +.m-0 { + margin: 0 !important; } + +.mt-0, +.my-0 { + margin-top: 0 !important; } + +.mr-0, +.mx-0 { + margin-right: 0 !important; } + +.mb-0, +.my-0 { + margin-bottom: 0 !important; } + +.ml-0, +.mx-0 { + margin-left: 0 !important; } + +.m-1 { + margin: 0.25rem !important; } + +.mt-1, +.my-1 { + margin-top: 0.25rem !important; } + +.mr-1, +.mx-1 { + margin-right: 0.25rem !important; } + +.mb-1, +.my-1 { + margin-bottom: 0.25rem !important; } + +.ml-1, +.mx-1 { + margin-left: 0.25rem !important; } + +.m-2 { + margin: 0.5rem !important; } + +.mt-2, +.my-2 { + margin-top: 0.5rem !important; } + +.mr-2, +.mx-2 { + margin-right: 0.5rem !important; } + +.mb-2, +.my-2 { + margin-bottom: 0.5rem !important; } + +.ml-2, +.mx-2 { + margin-left: 0.5rem !important; } + +.m-3 { + margin: 1rem !important; } + +.mt-3, +.my-3 { + margin-top: 1rem !important; } + +.mr-3, +.mx-3 { + margin-right: 1rem !important; } + +.mb-3, +.my-3 { + margin-bottom: 1rem !important; } + +.ml-3, +.mx-3 { + margin-left: 1rem !important; } + +.m-4 { + margin: 1.5rem !important; } + +.mt-4, +.my-4 { + margin-top: 1.5rem !important; } + +.mr-4, +.mx-4 { + margin-right: 1.5rem !important; } + +.mb-4, +.my-4 { + margin-bottom: 1.5rem !important; } + +.ml-4, +.mx-4 { + margin-left: 1.5rem !important; } + +.m-5 { + margin: 3rem !important; } + +.mt-5, +.my-5 { + margin-top: 3rem !important; } + +.mr-5, +.mx-5 { + margin-right: 3rem !important; } + +.mb-5, +.my-5 { + margin-bottom: 3rem !important; } + +.ml-5, +.mx-5 { + margin-left: 3rem !important; } + +.p-0 { + padding: 0 !important; } + +.pt-0, +.py-0 { + padding-top: 0 !important; } + +.pr-0, +.px-0 { + padding-right: 0 !important; } + +.pb-0, +.py-0 { + padding-bottom: 0 !important; } + +.pl-0, +.px-0 { + padding-left: 0 !important; } + +.p-1 { + padding: 0.25rem !important; } + +.pt-1, +.py-1 { + padding-top: 0.25rem !important; } + +.pr-1, +.px-1 { + padding-right: 0.25rem !important; } + +.pb-1, +.py-1 { + padding-bottom: 0.25rem !important; } + +.pl-1, +.px-1 { + padding-left: 0.25rem !important; } + +.p-2 { + padding: 0.5rem !important; } + +.pt-2, +.py-2 { + padding-top: 0.5rem !important; } + +.pr-2, +.px-2 { + padding-right: 0.5rem !important; } + +.pb-2, +.py-2 { + padding-bottom: 0.5rem !important; } + +.pl-2, +.px-2 { + padding-left: 0.5rem !important; } + +.p-3 { + padding: 1rem !important; } + +.pt-3, +.py-3 { + padding-top: 1rem !important; } + +.pr-3, +.px-3 { + padding-right: 1rem !important; } + +.pb-3, +.py-3 { + padding-bottom: 1rem !important; } + +.pl-3, +.px-3 { + padding-left: 1rem !important; } + +.p-4 { + padding: 1.5rem !important; } + +.pt-4, +.py-4 { + padding-top: 1.5rem !important; } + +.pr-4, +.px-4 { + padding-right: 1.5rem !important; } + +.pb-4, +.py-4 { + padding-bottom: 1.5rem !important; } + +.pl-4, +.px-4 { + padding-left: 1.5rem !important; } + +.p-5 { + padding: 3rem !important; } + +.pt-5, +.py-5 { + padding-top: 3rem !important; } + +.pr-5, +.px-5 { + padding-right: 3rem !important; } + +.pb-5, +.py-5 { + padding-bottom: 3rem !important; } + +.pl-5, +.px-5 { + padding-left: 3rem !important; } + +.m-auto { + margin: auto !important; } + +.mt-auto, +.my-auto { + margin-top: auto !important; } + +.mr-auto, +.mx-auto { + margin-right: auto !important; } + +.mb-auto, +.my-auto { + margin-bottom: auto !important; } + +.ml-auto, +.mx-auto { + margin-left: auto !important; } + +@media (min-width: 576px) { + .m-sm-0 { + margin: 0 !important; } + .mt-sm-0, + .my-sm-0 { + margin-top: 0 !important; } + .mr-sm-0, + .mx-sm-0 { + margin-right: 0 !important; } + .mb-sm-0, + .my-sm-0 { + margin-bottom: 0 !important; } + .ml-sm-0, + .mx-sm-0 { + margin-left: 0 !important; } + .m-sm-1 { + margin: 0.25rem !important; } + .mt-sm-1, + .my-sm-1 { + margin-top: 0.25rem !important; } + .mr-sm-1, + .mx-sm-1 { + margin-right: 0.25rem !important; } + .mb-sm-1, + .my-sm-1 { + margin-bottom: 0.25rem !important; } + .ml-sm-1, + .mx-sm-1 { + margin-left: 0.25rem !important; } + .m-sm-2 { + margin: 0.5rem !important; } + .mt-sm-2, + .my-sm-2 { + margin-top: 0.5rem !important; } + .mr-sm-2, + .mx-sm-2 { + margin-right: 0.5rem !important; } + .mb-sm-2, + .my-sm-2 { + margin-bottom: 0.5rem !important; } + .ml-sm-2, + .mx-sm-2 { + margin-left: 0.5rem !important; } + .m-sm-3 { + margin: 1rem !important; } + .mt-sm-3, + .my-sm-3 { + margin-top: 1rem !important; } + .mr-sm-3, + .mx-sm-3 { + margin-right: 1rem !important; } + .mb-sm-3, + .my-sm-3 { + margin-bottom: 1rem !important; } + .ml-sm-3, + .mx-sm-3 { + margin-left: 1rem !important; } + .m-sm-4 { + margin: 1.5rem !important; } + .mt-sm-4, + .my-sm-4 { + margin-top: 1.5rem !important; } + .mr-sm-4, + .mx-sm-4 { + margin-right: 1.5rem !important; } + .mb-sm-4, + .my-sm-4 { + margin-bottom: 1.5rem !important; } + .ml-sm-4, + .mx-sm-4 { + margin-left: 1.5rem !important; } + .m-sm-5 { + margin: 3rem !important; } + .mt-sm-5, + .my-sm-5 { + margin-top: 3rem !important; } + .mr-sm-5, + .mx-sm-5 { + margin-right: 3rem !important; } + .mb-sm-5, + .my-sm-5 { + margin-bottom: 3rem !important; } + .ml-sm-5, + .mx-sm-5 { + margin-left: 3rem !important; } + .p-sm-0 { + padding: 0 !important; } + .pt-sm-0, + .py-sm-0 { + padding-top: 0 !important; } + .pr-sm-0, + .px-sm-0 { + padding-right: 0 !important; } + .pb-sm-0, + .py-sm-0 { + padding-bottom: 0 !important; } + .pl-sm-0, + .px-sm-0 { + padding-left: 0 !important; } + .p-sm-1 { + padding: 0.25rem !important; } + .pt-sm-1, + .py-sm-1 { + padding-top: 0.25rem !important; } + .pr-sm-1, + .px-sm-1 { + padding-right: 0.25rem !important; } + .pb-sm-1, + .py-sm-1 { + padding-bottom: 0.25rem !important; } + .pl-sm-1, + .px-sm-1 { + padding-left: 0.25rem !important; } + .p-sm-2 { + padding: 0.5rem !important; } + .pt-sm-2, + .py-sm-2 { + padding-top: 0.5rem !important; } + .pr-sm-2, + .px-sm-2 { + padding-right: 0.5rem !important; } + .pb-sm-2, + .py-sm-2 { + padding-bottom: 0.5rem !important; } + .pl-sm-2, + .px-sm-2 { + padding-left: 0.5rem !important; } + .p-sm-3 { + padding: 1rem !important; } + .pt-sm-3, + .py-sm-3 { + padding-top: 1rem !important; } + .pr-sm-3, + .px-sm-3 { + padding-right: 1rem !important; } + .pb-sm-3, + .py-sm-3 { + padding-bottom: 1rem !important; } + .pl-sm-3, + .px-sm-3 { + padding-left: 1rem !important; } + .p-sm-4 { + padding: 1.5rem !important; } + .pt-sm-4, + .py-sm-4 { + padding-top: 1.5rem !important; } + .pr-sm-4, + .px-sm-4 { + padding-right: 1.5rem !important; } + .pb-sm-4, + .py-sm-4 { + padding-bottom: 1.5rem !important; } + .pl-sm-4, + .px-sm-4 { + padding-left: 1.5rem !important; } + .p-sm-5 { + padding: 3rem !important; } + .pt-sm-5, + .py-sm-5 { + padding-top: 3rem !important; } + .pr-sm-5, + .px-sm-5 { + padding-right: 3rem !important; } + .pb-sm-5, + .py-sm-5 { + padding-bottom: 3rem !important; } + .pl-sm-5, + .px-sm-5 { + padding-left: 3rem !important; } + .m-sm-auto { + margin: auto !important; } + .mt-sm-auto, + .my-sm-auto { + margin-top: auto !important; } + .mr-sm-auto, + .mx-sm-auto { + margin-right: auto !important; } + .mb-sm-auto, + .my-sm-auto { + margin-bottom: auto !important; } + .ml-sm-auto, + .mx-sm-auto { + margin-left: auto !important; } } + +@media (min-width: 768px) { + .m-md-0 { + margin: 0 !important; } + .mt-md-0, + .my-md-0 { + margin-top: 0 !important; } + .mr-md-0, + .mx-md-0 { + margin-right: 0 !important; } + .mb-md-0, + .my-md-0 { + margin-bottom: 0 !important; } + .ml-md-0, + .mx-md-0 { + margin-left: 0 !important; } + .m-md-1 { + margin: 0.25rem !important; } + .mt-md-1, + .my-md-1 { + margin-top: 0.25rem !important; } + .mr-md-1, + .mx-md-1 { + margin-right: 0.25rem !important; } + .mb-md-1, + .my-md-1 { + margin-bottom: 0.25rem !important; } + .ml-md-1, + .mx-md-1 { + margin-left: 0.25rem !important; } + .m-md-2 { + margin: 0.5rem !important; } + .mt-md-2, + .my-md-2 { + margin-top: 0.5rem !important; } + .mr-md-2, + .mx-md-2 { + margin-right: 0.5rem !important; } + .mb-md-2, + .my-md-2 { + margin-bottom: 0.5rem !important; } + .ml-md-2, + .mx-md-2 { + margin-left: 0.5rem !important; } + .m-md-3 { + margin: 1rem !important; } + .mt-md-3, + .my-md-3 { + margin-top: 1rem !important; } + .mr-md-3, + .mx-md-3 { + margin-right: 1rem !important; } + .mb-md-3, + .my-md-3 { + margin-bottom: 1rem !important; } + .ml-md-3, + .mx-md-3 { + margin-left: 1rem !important; } + .m-md-4 { + margin: 1.5rem !important; } + .mt-md-4, + .my-md-4 { + margin-top: 1.5rem !important; } + .mr-md-4, + .mx-md-4 { + margin-right: 1.5rem !important; } + .mb-md-4, + .my-md-4 { + margin-bottom: 1.5rem !important; } + .ml-md-4, + .mx-md-4 { + margin-left: 1.5rem !important; } + .m-md-5 { + margin: 3rem !important; } + .mt-md-5, + .my-md-5 { + margin-top: 3rem !important; } + .mr-md-5, + .mx-md-5 { + margin-right: 3rem !important; } + .mb-md-5, + .my-md-5 { + margin-bottom: 3rem !important; } + .ml-md-5, + .mx-md-5 { + margin-left: 3rem !important; } + .p-md-0 { + padding: 0 !important; } + .pt-md-0, + .py-md-0 { + padding-top: 0 !important; } + .pr-md-0, + .px-md-0 { + padding-right: 0 !important; } + .pb-md-0, + .py-md-0 { + padding-bottom: 0 !important; } + .pl-md-0, + .px-md-0 { + padding-left: 0 !important; } + .p-md-1 { + padding: 0.25rem !important; } + .pt-md-1, + .py-md-1 { + padding-top: 0.25rem !important; } + .pr-md-1, + .px-md-1 { + padding-right: 0.25rem !important; } + .pb-md-1, + .py-md-1 { + padding-bottom: 0.25rem !important; } + .pl-md-1, + .px-md-1 { + padding-left: 0.25rem !important; } + .p-md-2 { + padding: 0.5rem !important; } + .pt-md-2, + .py-md-2 { + padding-top: 0.5rem !important; } + .pr-md-2, + .px-md-2 { + padding-right: 0.5rem !important; } + .pb-md-2, + .py-md-2 { + padding-bottom: 0.5rem !important; } + .pl-md-2, + .px-md-2 { + padding-left: 0.5rem !important; } + .p-md-3 { + padding: 1rem !important; } + .pt-md-3, + .py-md-3 { + padding-top: 1rem !important; } + .pr-md-3, + .px-md-3 { + padding-right: 1rem !important; } + .pb-md-3, + .py-md-3 { + padding-bottom: 1rem !important; } + .pl-md-3, + .px-md-3 { + padding-left: 1rem !important; } + .p-md-4 { + padding: 1.5rem !important; } + .pt-md-4, + .py-md-4 { + padding-top: 1.5rem !important; } + .pr-md-4, + .px-md-4 { + padding-right: 1.5rem !important; } + .pb-md-4, + .py-md-4 { + padding-bottom: 1.5rem !important; } + .pl-md-4, + .px-md-4 { + padding-left: 1.5rem !important; } + .p-md-5 { + padding: 3rem !important; } + .pt-md-5, + .py-md-5 { + padding-top: 3rem !important; } + .pr-md-5, + .px-md-5 { + padding-right: 3rem !important; } + .pb-md-5, + .py-md-5 { + padding-bottom: 3rem !important; } + .pl-md-5, + .px-md-5 { + padding-left: 3rem !important; } + .m-md-auto { + margin: auto !important; } + .mt-md-auto, + .my-md-auto { + margin-top: auto !important; } + .mr-md-auto, + .mx-md-auto { + margin-right: auto !important; } + .mb-md-auto, + .my-md-auto { + margin-bottom: auto !important; } + .ml-md-auto, + .mx-md-auto { + margin-left: auto !important; } } + +@media (min-width: 992px) { + .m-lg-0 { + margin: 0 !important; } + .mt-lg-0, + .my-lg-0 { + margin-top: 0 !important; } + .mr-lg-0, + .mx-lg-0 { + margin-right: 0 !important; } + .mb-lg-0, + .my-lg-0 { + margin-bottom: 0 !important; } + .ml-lg-0, + .mx-lg-0 { + margin-left: 0 !important; } + .m-lg-1 { + margin: 0.25rem !important; } + .mt-lg-1, + .my-lg-1 { + margin-top: 0.25rem !important; } + .mr-lg-1, + .mx-lg-1 { + margin-right: 0.25rem !important; } + .mb-lg-1, + .my-lg-1 { + margin-bottom: 0.25rem !important; } + .ml-lg-1, + .mx-lg-1 { + margin-left: 0.25rem !important; } + .m-lg-2 { + margin: 0.5rem !important; } + .mt-lg-2, + .my-lg-2 { + margin-top: 0.5rem !important; } + .mr-lg-2, + .mx-lg-2 { + margin-right: 0.5rem !important; } + .mb-lg-2, + .my-lg-2 { + margin-bottom: 0.5rem !important; } + .ml-lg-2, + .mx-lg-2 { + margin-left: 0.5rem !important; } + .m-lg-3 { + margin: 1rem !important; } + .mt-lg-3, + .my-lg-3 { + margin-top: 1rem !important; } + .mr-lg-3, + .mx-lg-3 { + margin-right: 1rem !important; } + .mb-lg-3, + .my-lg-3 { + margin-bottom: 1rem !important; } + .ml-lg-3, + .mx-lg-3 { + margin-left: 1rem !important; } + .m-lg-4 { + margin: 1.5rem !important; } + .mt-lg-4, + .my-lg-4 { + margin-top: 1.5rem !important; } + .mr-lg-4, + .mx-lg-4 { + margin-right: 1.5rem !important; } + .mb-lg-4, + .my-lg-4 { + margin-bottom: 1.5rem !important; } + .ml-lg-4, + .mx-lg-4 { + margin-left: 1.5rem !important; } + .m-lg-5 { + margin: 3rem !important; } + .mt-lg-5, + .my-lg-5 { + margin-top: 3rem !important; } + .mr-lg-5, + .mx-lg-5 { + margin-right: 3rem !important; } + .mb-lg-5, + .my-lg-5 { + margin-bottom: 3rem !important; } + .ml-lg-5, + .mx-lg-5 { + margin-left: 3rem !important; } + .p-lg-0 { + padding: 0 !important; } + .pt-lg-0, + .py-lg-0 { + padding-top: 0 !important; } + .pr-lg-0, + .px-lg-0 { + padding-right: 0 !important; } + .pb-lg-0, + .py-lg-0 { + padding-bottom: 0 !important; } + .pl-lg-0, + .px-lg-0 { + padding-left: 0 !important; } + .p-lg-1 { + padding: 0.25rem !important; } + .pt-lg-1, + .py-lg-1 { + padding-top: 0.25rem !important; } + .pr-lg-1, + .px-lg-1 { + padding-right: 0.25rem !important; } + .pb-lg-1, + .py-lg-1 { + padding-bottom: 0.25rem !important; } + .pl-lg-1, + .px-lg-1 { + padding-left: 0.25rem !important; } + .p-lg-2 { + padding: 0.5rem !important; } + .pt-lg-2, + .py-lg-2 { + padding-top: 0.5rem !important; } + .pr-lg-2, + .px-lg-2 { + padding-right: 0.5rem !important; } + .pb-lg-2, + .py-lg-2 { + padding-bottom: 0.5rem !important; } + .pl-lg-2, + .px-lg-2 { + padding-left: 0.5rem !important; } + .p-lg-3 { + padding: 1rem !important; } + .pt-lg-3, + .py-lg-3 { + padding-top: 1rem !important; } + .pr-lg-3, + .px-lg-3 { + padding-right: 1rem !important; } + .pb-lg-3, + .py-lg-3 { + padding-bottom: 1rem !important; } + .pl-lg-3, + .px-lg-3 { + padding-left: 1rem !important; } + .p-lg-4 { + padding: 1.5rem !important; } + .pt-lg-4, + .py-lg-4 { + padding-top: 1.5rem !important; } + .pr-lg-4, + .px-lg-4 { + padding-right: 1.5rem !important; } + .pb-lg-4, + .py-lg-4 { + padding-bottom: 1.5rem !important; } + .pl-lg-4, + .px-lg-4 { + padding-left: 1.5rem !important; } + .p-lg-5 { + padding: 3rem !important; } + .pt-lg-5, + .py-lg-5 { + padding-top: 3rem !important; } + .pr-lg-5, + .px-lg-5 { + padding-right: 3rem !important; } + .pb-lg-5, + .py-lg-5 { + padding-bottom: 3rem !important; } + .pl-lg-5, + .px-lg-5 { + padding-left: 3rem !important; } + .m-lg-auto { + margin: auto !important; } + .mt-lg-auto, + .my-lg-auto { + margin-top: auto !important; } + .mr-lg-auto, + .mx-lg-auto { + margin-right: auto !important; } + .mb-lg-auto, + .my-lg-auto { + margin-bottom: auto !important; } + .ml-lg-auto, + .mx-lg-auto { + margin-left: auto !important; } } + +@media (min-width: 1200px) { + .m-xl-0 { + margin: 0 !important; } + .mt-xl-0, + .my-xl-0 { + margin-top: 0 !important; } + .mr-xl-0, + .mx-xl-0 { + margin-right: 0 !important; } + .mb-xl-0, + .my-xl-0 { + margin-bottom: 0 !important; } + .ml-xl-0, + .mx-xl-0 { + margin-left: 0 !important; } + .m-xl-1 { + margin: 0.25rem !important; } + .mt-xl-1, + .my-xl-1 { + margin-top: 0.25rem !important; } + .mr-xl-1, + .mx-xl-1 { + margin-right: 0.25rem !important; } + .mb-xl-1, + .my-xl-1 { + margin-bottom: 0.25rem !important; } + .ml-xl-1, + .mx-xl-1 { + margin-left: 0.25rem !important; } + .m-xl-2 { + margin: 0.5rem !important; } + .mt-xl-2, + .my-xl-2 { + margin-top: 0.5rem !important; } + .mr-xl-2, + .mx-xl-2 { + margin-right: 0.5rem !important; } + .mb-xl-2, + .my-xl-2 { + margin-bottom: 0.5rem !important; } + .ml-xl-2, + .mx-xl-2 { + margin-left: 0.5rem !important; } + .m-xl-3 { + margin: 1rem !important; } + .mt-xl-3, + .my-xl-3 { + margin-top: 1rem !important; } + .mr-xl-3, + .mx-xl-3 { + margin-right: 1rem !important; } + .mb-xl-3, + .my-xl-3 { + margin-bottom: 1rem !important; } + .ml-xl-3, + .mx-xl-3 { + margin-left: 1rem !important; } + .m-xl-4 { + margin: 1.5rem !important; } + .mt-xl-4, + .my-xl-4 { + margin-top: 1.5rem !important; } + .mr-xl-4, + .mx-xl-4 { + margin-right: 1.5rem !important; } + .mb-xl-4, + .my-xl-4 { + margin-bottom: 1.5rem !important; } + .ml-xl-4, + .mx-xl-4 { + margin-left: 1.5rem !important; } + .m-xl-5 { + margin: 3rem !important; } + .mt-xl-5, + .my-xl-5 { + margin-top: 3rem !important; } + .mr-xl-5, + .mx-xl-5 { + margin-right: 3rem !important; } + .mb-xl-5, + .my-xl-5 { + margin-bottom: 3rem !important; } + .ml-xl-5, + .mx-xl-5 { + margin-left: 3rem !important; } + .p-xl-0 { + padding: 0 !important; } + .pt-xl-0, + .py-xl-0 { + padding-top: 0 !important; } + .pr-xl-0, + .px-xl-0 { + padding-right: 0 !important; } + .pb-xl-0, + .py-xl-0 { + padding-bottom: 0 !important; } + .pl-xl-0, + .px-xl-0 { + padding-left: 0 !important; } + .p-xl-1 { + padding: 0.25rem !important; } + .pt-xl-1, + .py-xl-1 { + padding-top: 0.25rem !important; } + .pr-xl-1, + .px-xl-1 { + padding-right: 0.25rem !important; } + .pb-xl-1, + .py-xl-1 { + padding-bottom: 0.25rem !important; } + .pl-xl-1, + .px-xl-1 { + padding-left: 0.25rem !important; } + .p-xl-2 { + padding: 0.5rem !important; } + .pt-xl-2, + .py-xl-2 { + padding-top: 0.5rem !important; } + .pr-xl-2, + .px-xl-2 { + padding-right: 0.5rem !important; } + .pb-xl-2, + .py-xl-2 { + padding-bottom: 0.5rem !important; } + .pl-xl-2, + .px-xl-2 { + padding-left: 0.5rem !important; } + .p-xl-3 { + padding: 1rem !important; } + .pt-xl-3, + .py-xl-3 { + padding-top: 1rem !important; } + .pr-xl-3, + .px-xl-3 { + padding-right: 1rem !important; } + .pb-xl-3, + .py-xl-3 { + padding-bottom: 1rem !important; } + .pl-xl-3, + .px-xl-3 { + padding-left: 1rem !important; } + .p-xl-4 { + padding: 1.5rem !important; } + .pt-xl-4, + .py-xl-4 { + padding-top: 1.5rem !important; } + .pr-xl-4, + .px-xl-4 { + padding-right: 1.5rem !important; } + .pb-xl-4, + .py-xl-4 { + padding-bottom: 1.5rem !important; } + .pl-xl-4, + .px-xl-4 { + padding-left: 1.5rem !important; } + .p-xl-5 { + padding: 3rem !important; } + .pt-xl-5, + .py-xl-5 { + padding-top: 3rem !important; } + .pr-xl-5, + .px-xl-5 { + padding-right: 3rem !important; } + .pb-xl-5, + .py-xl-5 { + padding-bottom: 3rem !important; } + .pl-xl-5, + .px-xl-5 { + padding-left: 3rem !important; } + .m-xl-auto { + margin: auto !important; } + .mt-xl-auto, + .my-xl-auto { + margin-top: auto !important; } + .mr-xl-auto, + .mx-xl-auto { + margin-right: auto !important; } + .mb-xl-auto, + .my-xl-auto { + margin-bottom: auto !important; } + .ml-xl-auto, + .mx-xl-auto { + margin-left: auto !important; } } + +.text-justify { + text-align: justify !important; } + +.text-nowrap { + white-space: nowrap !important; } + +.text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + +.text-left { + text-align: left !important; } + +.text-right { + text-align: right !important; } + +.text-center { + text-align: center !important; } + +@media (min-width: 576px) { + .text-sm-left { + text-align: left !important; } + .text-sm-right { + text-align: right !important; } + .text-sm-center { + text-align: center !important; } } + +@media (min-width: 768px) { + .text-md-left { + text-align: left !important; } + .text-md-right { + text-align: right !important; } + .text-md-center { + text-align: center !important; } } + +@media (min-width: 992px) { + .text-lg-left { + text-align: left !important; } + .text-lg-right { + text-align: right !important; } + .text-lg-center { + text-align: center !important; } } + +@media (min-width: 1200px) { + .text-xl-left { + text-align: left !important; } + .text-xl-right { + text-align: right !important; } + .text-xl-center { + text-align: center !important; } } + +.text-lowercase { + text-transform: lowercase !important; } + +.text-uppercase { + text-transform: uppercase !important; } + +.text-capitalize { + text-transform: capitalize !important; } + +.font-weight-light { + font-weight: 300 !important; } + +.font-weight-normal { + font-weight: 400 !important; } + +.font-weight-bold { + font-weight: 700 !important; } + +.font-italic { + font-style: italic !important; } + +.text-white { + color: #fff !important; } + +.text-primary { + color: #0075b4 !important; } + +a.text-primary:hover, a.text-primary:focus { + color: #005481 !important; } + +.text-secondary { + color: #313131 !important; } + +a.text-secondary:hover, a.text-secondary:focus { + color: #181818 !important; } + +.text-success { + color: #008100 !important; } + +a.text-success:hover, a.text-success:focus { + color: #004e00 !important; } + +.text-info { + color: #17a2b8 !important; } + +a.text-info:hover, a.text-info:focus { + color: #117a8b !important; } + +.text-warning { + color: #e2c01f !important; } + +a.text-warning:hover, a.text-warning:focus { + color: #b69b18 !important; } + +.text-danger { + color: #b20610 !important; } + +a.text-danger:hover, a.text-danger:focus { + color: #81040c !important; } + +.text-light { + color: #e7e7e7 !important; } + +a.text-light:hover, a.text-light:focus { + color: #cecece !important; } + +.text-dark { + color: #313131 !important; } + +a.text-dark:hover, a.text-dark:focus { + color: #181818 !important; } + +.text-inverse { + color: #fff !important; } + +a.text-inverse:hover, a.text-inverse:focus { + color: #e6e6e6 !important; } + +.text-disabled { + color: #767676 !important; } + +a.text-disabled:hover, a.text-disabled:focus { + color: #5d5d5d !important; } + +.text-purchase { + color: #008100 !important; } + +a.text-purchase:hover, a.text-purchase:focus { + color: #004e00 !important; } + +.text-lightest { + color: #f5f5f5 !important; } + +a.text-lightest:hover, a.text-lightest:focus { + color: gainsboro !important; } + +.text-darker { + color: #111 !important; } + +a.text-darker:hover, a.text-darker:focus { + color: black !important; } + +.text-darkest { + color: #000 !important; } + +a.text-darkest:hover, a.text-darkest:focus { + color: black !important; } + +.text-muted { + color: #767676 !important; } + +.text-hide { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; } + +.visible { + visibility: visible !important; } + +.invisible { + visibility: hidden !important; } + +.badge { + display: inline-block; + padding: 0.25em 0.4em; + font-size: 75%; + font-weight: 700; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + -webkit-border-radius: 0.1875rem; + -moz-border-radius: 0.1875rem; + -ms-border-radius: 0.1875rem; + -o-border-radius: 0.1875rem; + border-radius: 0.1875rem; } + .badge:empty { + display: none; } + +.btn .badge { + position: relative; + top: -1px; } + +.badge-pill { + padding-right: 0.6em; + padding-left: 0.6em; + -webkit-border-radius: 10rem; + -moz-border-radius: 10rem; + -ms-border-radius: 10rem; + -o-border-radius: 10rem; + border-radius: 10rem; } + +.badge-primary { + color: #fff; + background-color: #0075b4; } + .badge-primary[href]:hover, .badge-primary[href]:focus { + color: #fff; + text-decoration: none; + background-color: #005481; } + +.badge-secondary { + color: #fff; + background-color: #313131; } + .badge-secondary[href]:hover, .badge-secondary[href]:focus { + color: #fff; + text-decoration: none; + background-color: #181818; } + +.badge-success { + color: #fff; + background-color: #008100; } + .badge-success[href]:hover, .badge-success[href]:focus { + color: #fff; + text-decoration: none; + background-color: #004e00; } + +.badge-info { + color: #fff; + background-color: #17a2b8; } + .badge-info[href]:hover, .badge-info[href]:focus { + color: #fff; + text-decoration: none; + background-color: #117a8b; } + +.badge-warning { + color: #111; + background-color: #e2c01f; } + .badge-warning[href]:hover, .badge-warning[href]:focus { + color: #111; + text-decoration: none; + background-color: #b69b18; } + +.badge-danger { + color: #fff; + background-color: #b20610; } + .badge-danger[href]:hover, .badge-danger[href]:focus { + color: #fff; + text-decoration: none; + background-color: #81040c; } + +.badge-light { + color: #111; + background-color: #e7e7e7; } + .badge-light[href]:hover, .badge-light[href]:focus { + color: #111; + text-decoration: none; + background-color: #cecece; } + +.badge-dark { + color: #fff; + background-color: #313131; } + .badge-dark[href]:hover, .badge-dark[href]:focus { + color: #fff; + text-decoration: none; + background-color: #181818; } + +.badge-inverse { + color: #111; + background-color: #fff; } + .badge-inverse[href]:hover, .badge-inverse[href]:focus { + color: #111; + text-decoration: none; + background-color: #e6e6e6; } + +.badge-disabled { + color: #fff; + background-color: #767676; } + .badge-disabled[href]:hover, .badge-disabled[href]:focus { + color: #fff; + text-decoration: none; + background-color: #5d5d5d; } + +.badge-purchase { + color: #fff; + background-color: #008100; } + .badge-purchase[href]:hover, .badge-purchase[href]:focus { + color: #fff; + text-decoration: none; + background-color: #004e00; } + +.badge-lightest { + color: #111; + background-color: #f5f5f5; } + .badge-lightest[href]:hover, .badge-lightest[href]:focus { + color: #111; + text-decoration: none; + background-color: gainsboro; } + +.badge-darker { + color: #fff; + background-color: #111; } + .badge-darker[href]:hover, .badge-darker[href]:focus { + color: #fff; + text-decoration: none; + background-color: black; } + +.badge-darkest { + color: #fff; + background-color: #000; } + .badge-darkest[href]:hover, .badge-darkest[href]:focus { + color: #fff; + text-decoration: none; + background-color: black; } + +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1060; + display: block; + max-width: 276px; + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-style: normal; + font-weight: 400; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + white-space: normal; + line-break: auto; + font-size: 0.875rem; + word-wrap: break-word; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-border-radius: 0.1875rem; + -moz-border-radius: 0.1875rem; + -ms-border-radius: 0.1875rem; + -o-border-radius: 0.1875rem; + border-radius: 0.1875rem; } + .popover .arrow { + position: absolute; + display: block; + width: 1rem; + height: 0.5rem; + margin: 0 0.1875rem; } + .popover .arrow::before, .popover .arrow::after { + position: absolute; + display: block; + content: ""; + border-color: transparent; + border-style: solid; } + +.bs-popover-top, .bs-popover-auto[x-placement^="top"] { + margin-bottom: 0.5rem; } + .bs-popover-top .arrow, .bs-popover-auto[x-placement^="top"] .arrow { + bottom: calc((0.5rem + 1px) * -1); } + .bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before, + .bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after { + border-width: 0.5rem 0.5rem 0; } + .bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before { + bottom: 0; + border-top-color: rgba(0, 0, 0, 0.25); } + .bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after { + bottom: 1px; + border-top-color: #fff; } + +.bs-popover-right, .bs-popover-auto[x-placement^="right"] { + margin-left: 0.5rem; } + .bs-popover-right .arrow, .bs-popover-auto[x-placement^="right"] .arrow { + left: calc((0.5rem + 1px) * -1); + width: 0.5rem; + height: 1rem; + margin: 0.1875rem 0; } + .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before, + .bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after { + border-width: 0.5rem 0.5rem 0.5rem 0; } + .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before { + left: 0; + border-right-color: rgba(0, 0, 0, 0.25); } + .bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after { + left: 1px; + border-right-color: #fff; } + +.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] { + margin-top: 0.5rem; } + .bs-popover-bottom .arrow, .bs-popover-auto[x-placement^="bottom"] .arrow { + top: calc((0.5rem + 1px) * -1); } + .bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before, + .bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after { + border-width: 0 0.5rem 0.5rem 0.5rem; } + .bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before { + top: 0; + border-bottom-color: rgba(0, 0, 0, 0.25); } + .bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after { + top: 1px; + border-bottom-color: #fff; } + .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: 1rem; + margin-left: -0.5rem; + content: ""; + border-bottom: 1px solid #f7f7f7; } + +.bs-popover-left, .bs-popover-auto[x-placement^="left"] { + margin-right: 0.5rem; } + .bs-popover-left .arrow, .bs-popover-auto[x-placement^="left"] .arrow { + right: calc((0.5rem + 1px) * -1); + width: 0.5rem; + height: 1rem; + margin: 0.1875rem 0; } + .bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before, + .bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after { + border-width: 0.5rem 0 0.5rem 0.5rem; } + .bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before { + right: 0; + border-left-color: rgba(0, 0, 0, 0.25); } + .bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after { + right: 1px; + border-left-color: #fff; } + +.popover-header { + padding: 0.5rem 0.75rem; + margin-bottom: 0; + font-size: 1rem; + color: inherit; + background-color: #f7f7f7; + border-bottom: 1px solid #ebebeb; + -webkit-border-top-left-radius: calc(0.1875rem - 1px); + -moz-border-topleft-radius: calc(0.1875rem - 1px); + border-top-left-radius: calc(0.1875rem - 1px); + -webkit-border-top-right-radius: calc(0.1875rem - 1px); + -moz-border-topright-radius: calc(0.1875rem - 1px); + border-top-right-radius: calc(0.1875rem - 1px); } + .popover-header:empty { + display: none; } + +.popover-body { + padding: 0.5rem 0.75rem; + color: #313131; } + +/* + * In pursuit of decoupling the built-in XBlocks from edx-platform's Sass build + * and ensuring comprehensive theming support in the extracted XBlocks, + * we need to expose Sass variables as CSS variables. + * + * Ticket/Issue: https://github.com/openedx/edx-platform/issues/35173 + */ +/* stylelint-disable-line */ +/* stylelint-disable-line */ +.btn-default:disabled, .btn-primary:disabled, .btn-brand:disabled, .btn-upgrade:disabled, .is-disabled.btn-default, .is-disabled.btn-primary, .is-disabled.btn-brand, .is-disabled.btn-upgrade { + pointer-events: none; + outline: none; + cursor: not-allowed; } + +.btn-small.btn-default, .btn-small.btn-primary, .btn-small.btn-brand, .btn-small.btn-upgrade { + padding: 0.625rem; + font-size: 14px; } + +:root { + --action-primary-active-bg: #0075b4; + --actions-dropdown-width: 145px; + --actions-dropdown-offset: 100px; + --base-font-size: 18px; + --base-line-height: 1.5em; + --baseline: 20px; + --black: #000; + --black-t2: rgba(0, 0, 0, 0.5); + --blue: #0075b4; + --blue-d1: #005e90; + --blue-d2: #00466c; + --blue-d4: #001724; + --blue-s1: #0075b4; + --body-color: #313131; + --border-color: #e7e7e7; + --border-color-4: #fcfcfc; + --bp-screen-lg: 1024px; + --btn-brand-focus-background: #065683; + --correct: #008100; + --comment-image-dimension: calc(var(--baseline) * 2); + --danger: #b20610; + --darkGrey: #8891a1; + --error-color: #cb0712; + --error-color-dark: #95050d; + --error-color-light: #f95861; + --font-bold: 700; + --font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + --forum-color-active-thread: var(--forum-color-primary); + --forum-color-hover: #065683; + --forum-color-active-text: var(--white); + --forum-color-background: #fff; + --forum-x-large-font-size: 21px; + --forum-color-copy-light: #414141; + --forum-large-font-size: 16px; + --forum-border-radius: 3px; + --forum-base-font-size: 14px; + --forum-small-font-size: 12px; + --forum-color-border: var(--gray-300); + --forum-color-background-light: whitesmoke; + --forum-color-editor-preview-label: var(--forum-color-copy-light); + --forum-color-following: var(--forum-color-primary); + --forum-color-error: #b20610; + --forum-color-pinned: #982c62; + --forum-color-reported: #982c62; + --forum-color-closed: var(--black); + --forum-color-staff: var(--forum-color-primary); + --forum-color-community-ta: var(--green); + --forum-color-response-count: var(--forum-color-copy-light); + --forum-color-read-post: var(--forum-color-copy-light); + --forum-color-hover-thread: var(--forum-color-background-light); + --forum-color-reading-thread: var(--forum-color-background-light); + --forum-color-never-read-post: var(--forum-color-primary); + --forum-color-navigation-bar: var(--forum-color-background-light); + --forum-color-primary: #0075b4; + --general-color-accent: #0075b4; + --green: #008100; + --gray: #767676; + --gray-300: #d9d9d9; + --gray-d1: #5e5e5e; + --gray-l2: #adadad; + --gray-l3: #c8c8c8; + --gray-l4: #e4e4e4; + --gray-l6: #f8f8f8; + --icon-correct: url("../images/correct-icon.png"); + --icon-incorrect: url("../images/incorrect-icon.png"); + --icon-info: url("../images/info-icon.png"); + --icon-partially-correct: url("../images/partially-correct-icon.png"); + --icon-spinner: url("../images/spinner.gif"); + --icon-unanswered: url("../images/unanswered-icon.png"); + --incorrect: #b20610; + --lightGrey: #edf1f5; + --lighter-base-font-color: #646464; + --link-color: #1b6d99; + --line-height-base: 1.5; + --medium-font-size: 0.9em; + --pink: #c2387d; + --partially-correct: #008100; + --primary: #0075b4; + --post-image-dimension: calc(var(--baseline) * 3); + --response-image-dimension: calc(var(--baseline) * 2.5); + --shadow: rgba(0, 0, 0, 0.2); + --shadow-l1: rgba(0, 0, 0, 0.1); + --sidebar-color: #f6f6f6; + --small-font-size: 80%; + --submitted: #0075b4; + --success: #008100; + --serif: Georgia, Cambria, "Times New Roman", Times, serif; + --tmg-f2: 0.25s; + --tmg-s2: 2s; + --transparent: transparent; + --uxpl-gray-background: #d9d9d9; + --uxpl-gray-base: #414141; + --uxpl-gray-dark: #111111; + --very-light-text: white; + --warning: #e2c01f; + --warning-color: #ffc01f; + --warning-color-accent: #fffcdd; + --white: #fff; + --yellow: #e2c01f; } + +/* stylelint-disable-line */ +/* stylelint-disable-line */ +/* HTML5 Boilerplate */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +nav, +section { + display: block; } + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; } + +audio:not([controls]) { + display: none; } + +[hidden] { + display: none; } + +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } + +html, +button, +input, +select, +textarea { + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #222; } + +body { + margin: 0; + font-size: 1em; + line-height: 1.4; } + +a:not(.btn) { + color: #1b6d99; } + +a:visited:not(.btn) { + color: #003655; } + +a:hover:not(.btn), +a:focus:not(.btn) { + color: #0079bc; } + +abbr[title] { + border-bottom: 1px dotted; } + +b, +strong { + font-weight: bold; } + +blockquote { + margin: 1em 40px; } + +dfn { + font-style: italic; } + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; } + +ins { + background: #ff9; + color: #000; + text-decoration: none; } + +mark { + background: #ff0; + color: #000; + font-style: italic; + font-weight: bold; } + +pre, +code, +kbd, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; } + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; } + +q { + quotes: none; } + +q::before, +q::after { + content: ""; + content: none; } + +small { + font-size: 85%; } + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +ul, +ol { + padding: 0 0 0 40px; + margin: 1em 0; } + +dd { + margin: 0 0 0 40px; } + +nav ul, +nav ol { + list-style: none; + margin: 0; + padding: 0; } + +img { + border: 0; + -ms-interpolation-mode: bicubic; + vertical-align: middle; } + +svg:not(:root) { + overflow: hidden; } + +figure { + margin: 0; } + +form { + margin: 0; } + +fieldset { + border: 0; + margin: 0; + padding: 0; } + +label { + cursor: pointer; } + +legend { + border: 0; + *margin-left: -7px; + padding: 0; + white-space: normal; } + +button, +input, +select, +textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; } + +button, +input { + line-height: normal; } + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; + *overflow: visible; } + +button[disabled], +input[disabled] { + cursor: default; } + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; + *width: 13px; + *height: 13px; } + +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; } + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; } + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +button:-moz-focusring { + outline: 1px dotted black; } + +textarea { + overflow: auto; + vertical-align: top; + resize: vertical; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +td { + vertical-align: top; } + +.chromeframe { + margin: 0.2em 0; + background: #ccc; + color: black; + padding: 0.2em 0; } + +.ir { + display: block; + border: 0; + text-indent: -999em; + overflow: hidden; + background-color: transparent; + background-repeat: no-repeat; + text-align: left; + direction: ltr; + *line-height: 0; } + +.ir br { + display: none; } + +.hidden { + display: none !important; + visibility: hidden; } + +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } + +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; } + +.invisible { + visibility: hidden; } + +.clearfix::before, +.clearfix::after { + content: ""; + display: table; } + +.clearfix::after { + clear: both; } + +.clearfix { + *zoom: 1; } + +@media print { + * { + background: transparent; + color: black !important; + box-shadow: none !important; + text-shadow: none !important; + filter: none !important; + -ms-filter: none !important; } + html, + body { + background: transparent !important; } + a, + a:visited { + text-decoration: underline; } + abbr[title]::after { + content: " (" attr(title) ")"; } + .ir a::after { + content: ""; } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; } + thead { + display: table-header-group; } + tr, + img { + page-break-inside: avoid; } + img { + max-width: 100% !important; } + @page { + margin: 1cm 1.2cm 2cm; } + p, + h2, + h3 { + orphans: 3; + widows: 3; } + h2, + h3 { + page-break-after: avoid; } } + +/* stylelint-disable-line */ +/* stylelint-disable-line */ +.discussion .actions-dropdown { + z-index: 10; } + +.discussion-thread .discussion-article .thread-wrapper .discussion-post .inline-comment-count { + z-index: 100; } + +.discussion .post-actions-list, +.discussion .response-actions-list, +.discussion .comment-actions-list, .discussion .actions-dropdown, .discussion .responses, .discussion .comments { + list-style: none; + margin: 0; + padding: 0; + text-indent: 0; } + .discussion .post-actions-list li, + .discussion .response-actions-list li, + .discussion .comment-actions-list li, .discussion .actions-dropdown li, .discussion .responses li, .discussion .comments li, .discussion .post-actions-list dt, + .discussion .response-actions-list dt, + .discussion .comment-actions-list dt, .discussion .actions-dropdown dt, .discussion .responses dt, .discussion .comments dt, .discussion .post-actions-list dd, + .discussion .response-actions-list dd, + .discussion .comment-actions-list dd, .discussion .actions-dropdown dd, .discussion .responses dd, .discussion .comments dd { + margin: 0; + padding: 0; } + +.btn-default:disabled, .btn-primary:disabled, .btn-brand:disabled, .btn-upgrade:disabled, .is-disabled.btn-default, .is-disabled.btn-primary, .is-disabled.btn-brand, .is-disabled.btn-upgrade { + pointer-events: none; + outline: none; + cursor: not-allowed; } + +.btn-small.btn-default, .btn-small.btn-primary, .btn-small.btn-brand, .btn-small.btn-upgrade { + padding: 0.625rem; + font-size: 14px; } + +.breadcrumbs { + font-size: 0.875rem; + line-height: line-height(small); } + .breadcrumbs .nav-item { + margin-left: 5px; + display: inline-block; } + @media (max-width: 1199.98px) { + .breadcrumbs .nav-item { + max-width: 240px; } } + @media (max-width: 767.98px) { + .breadcrumbs .nav-item { + max-width: 140px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } } + @media (max-width: 575.98px) { + .breadcrumbs .nav-item:not(:first-child) { + max-width: 60px; } } + .breadcrumbs .nav-item.nav-item-course { + max-width: none; } + .breadcrumbs .nav-item a, + .breadcrumbs .nav-item a:visited { + color: #0075b4; } + .breadcrumbs .nav-item a:hover { + color: #065683; } + .breadcrumbs .fa-angle-right { + margin-left: 5px; + display: inline-block; + color: #313131; } + @media (max-width: 767.98px) { + .breadcrumbs .fa-angle-right { + position: relative; + top: -5px; } } + .breadcrumbs .fa-angle-right:last-child { + display: none; } + +.btn-default, .btn-primary, .btn-brand, .btn-upgrade { + display: inline-block; + background-color: transparent; + background-image: none; + border-style: solid; + border-radius: 0.1875rem; + border-width: 1px; + box-shadow: none; + padding: 0.625rem 1.25rem; + font-size: 16px; + font-weight: normal; + text-shadow: none; + text-transform: capitalize; } + .block.btn-default, .block.btn-primary, .block.btn-brand, .block.btn-upgrade { + display: block; + width: 100%; } + .btn-default .icon, .btn-primary .icon, .btn-brand .icon, .btn-upgrade .icon { + display: inline-block; + vertical-align: baseline; } + .btn-default .icon:only-child, .btn-primary .icon:only-child, .btn-brand .icon:only-child, .btn-upgrade .icon:only-child, + .sr-only + .btn-default .icon, + .sr-only + .btn-primary .icon, + .sr-only + .btn-brand .icon, + .sr-only + .btn-upgrade .icon { + margin-right: 0; } + +.btn-default { + border-color: transparent; + background: transparent; + color: #0075b4; } + .btn-default:hover, .btn-default.is-hovered, .btn-default:focus, .btn-default.is-focused { + border-color: #0075b4; + background-color: transparent; + color: #0075b4; } + .btn-default:active, .btn-default.is-pressed, .btn-default.is-active { + border-color: #0075b4; + color: #0075b4; } + .btn-default:disabled, .btn-default.is-disabled { + border-color: #d2d0d0; + color: #6b6969; } + +.btn-primary, .btn-brand { + border-color: #0075b4; + background: #0075b4; + color: #fcfcfc; } + .btn-primary:hover, .btn-brand:hover, .btn-primary.is-hovered, .is-hovered.btn-brand, .btn-primary:focus, .btn-brand:focus, .btn-primary.is-focused, .is-focused.btn-brand { + border-color: #065683; + background-color: #065683; + color: #fcfcfc; } + .btn-primary:active, .btn-brand:active, .btn-primary.is-pressed, .is-pressed.btn-brand, .btn-primary.is-active, .is-active.btn-brand { + border-color: #0075b4; + background: #0075b4; } + .btn-primary:disabled, .btn-brand:disabled, .btn-primary.is-disabled, .is-disabled.btn-brand { + border-color: #d2d0d0; + background: #f2f3f3; + color: #676666; } + +.btn-upgrade { + border-color: #008100; + background: #008100; + color: #fcfcfc; } + .btn-upgrade:hover, .btn-upgrade.is-hovered, .btn-upgrade:focus, .btn-upgrade.is-focused { + border-color: #009b00; + background-color: #009b00; + color: #fcfcfc; } + .btn-upgrade:disabled, .btn-upgrade.is-disabled { + border-color: #d2d0d0; + background: #f2f3f3; + color: #fcfcfc; } + +.edx-cookie-banner-wrapper { + background: #f2f8fd; + box-sizing: border-box; + /** Base Styles - start **/ + text-align: left; + line-height: 1.5; + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1rem; + font-weight: 400; + /** Base Styles - end **/ } + .edx-cookie-banner-wrapper .alert { + position: relative; + padding: 8px 20px; } + .edx-cookie-banner-wrapper .alert-dismissible .close { + position: absolute; + top: 0; + right: 0; + padding: 0.75rem 1.25rem; + background: transparent; + border: 0; + text-shadow: 0 1px 0 #fff; + opacity: 0.5; + float: right; + line-height: 1; + font-size: 1.5rem; + font-weight: 500; } + .edx-cookie-banner-wrapper .alert-dismissible .btn { + display: inline-block; + text-align: center; + white-space: nowrap; + vertical-align: middle; } + .edx-cookie-banner-wrapper .edx-cookie-banner { + box-sizing: border-box; + display: flex; + justify-content: space-between; + margin: 0 auto; + background: inherit; + border: none; } + .edx-cookie-banner-wrapper .edx-cookie-banner .policy-link { + color: #19291F; + text-decoration: underline; } + .edx-cookie-banner-wrapper .edx-cookie-banner .policy-link:focus, .edx-cookie-banner-wrapper .edx-cookie-banner .policy-link:hover { + color: #075683; + border: none; } + .edx-cookie-banner-wrapper .edx-cookie-banner .alert-dialog { + margin: auto; + color: #4e4e4e; + text-align: center; + max-width: 800px; + font-size: 14px; } + .edx-cookie-banner-wrapper .edx-cookie-banner .btn.close { + padding: 4px; + color: #19291F; } + .edx-cookie-banner-wrapper .edx-cookie-banner .btn.close:focus, .edx-cookie-banner-wrapper .edx-cookie-banner .btn.close:hover { + color: #075683; + cursor: pointer; } + +.discussion .responses .posted-by { + font-weight: 700; } + +.discussion-article .posted-details .username { + font-weight: 600; } + +.discussion .post-label, .discussion-article .posted-details, .discussion-post .post-context { + font-weight: 300; } + +.discussion-response .response-body, .discussion-post .post-body, .discussion .action-button .action-label, .discussion .actions-dropdown .action-list-item, .view-discussion-home .label, .view-discussion-home .home-description, .view-discussion-home .home-stats .stats-grouping .profile-stat, .discussion-article .posted-details, .discussion-comment .response-body, .discussion-post .post-context, .discussion .post-actions-list, +.discussion .response-actions-list, +.discussion .comment-actions-list { + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } + +.discussion-response .response-body, .discussion-post .post-body { + font-size: 14px; + line-height: 20.72px; } + +.discussion .action-button .action-label, .discussion .actions-dropdown .action-list-item, .view-discussion-home .label, .view-discussion-home .home-description, .view-discussion-home .home-stats .stats-grouping .profile-stat, .discussion-article .posted-details, .discussion-comment .response-body, .discussion-post .post-context, .discussion .post-actions-list, +.discussion .response-actions-list, +.discussion .comment-actions-list { + font-size: 12px; + line-height: 17.76px; } + +.forum-nav-thread-comments-count { + font-weight: 600; } + +.discussion-response .response-header-content .username, .forum-nav .search-alert-content .message em, .forum-nav .search-alert-content .link-jump, .forum-nav .search-alert-controls .control { + font-weight: 700; } + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +.discussion-body, .discussion-module { + width: 100%; + border: none; + background: transparent; + box-shadow: none; } + .discussion-body:after, .discussion-module:after { + content: ""; + display: table; + clear: both; } + @media (min-width: 768px) { + .discussion-body, .discussion-module { + display: flex; + flex-direction: row-reverse; } } + .discussion-body .bottom-post-status, .discussion-module .bottom-post-status { + padding: 30px; + font-size: var(--forum-x-large-font-size); + font-weight: 700; + color: var(--forum-color-copy-light); + text-align: center; } + .discussion-body .discussion-article, .discussion-module .discussion-article { + position: relative; } + .discussion-body .discussion-article a, .discussion-module .discussion-article a, + .discussion-body .discussion-article p, .discussion-module .discussion-article p { + word-wrap: break-word; } + .discussion-body .main-article.new, .discussion-module .main-article.new { + display: none; + padding: calc(var(--baseline) * 2.5); } + .discussion-body .discussion-reply-new, .discussion-module .discussion-reply-new { + transition: opacity 0.2s linear 0s; } + .discussion-body .discussion-reply-new:after, .discussion-module .discussion-reply-new:after { + content: ""; + display: table; + clear: both; } + .discussion-body .discussion-reply-new h4, .discussion-module .discussion-reply-new h4 { + font-size: var(--forum-large-font-size); + font-weight: 700; } + .discussion-body .reply-post-control, .discussion-module .reply-post-control { + margin-top: var(--baseline); } + +.discussion-module { + display: block; + position: relative; + border-radius: var(--forum-border-radius); } + .discussion-module header .anonymous { + font-size: var(--forum-base-font-size); } + .discussion-module .inline-discussion-topic { + width: 100%; + font-size: var(--forum-small-font-size); } + .discussion-module .inline-discussion-topic .inline-discussion-topic-title { + font-weight: bold; } + .discussion-module .discussion-module-header { + float: left; + width: 57.44681%; + margin-bottom: calc(var(--baseline) * 0.75); } + .discussion-module .add_post_btn_container { + text-align: right; + width: 100%; + height: calc(2 * var(--baseline)); } + .discussion-module div.add-response.post-extended-content { + margin-top: var(--baseline); + margin-bottom: var(--baseline); } + +.discussion-show { + float: right; + position: relative; + top: 3px; + font-size: var(--forum-base-font-size); + text-align: center; } + .discussion-show.shown { + background-color: #fff; + color: #0075b4; } + +section.discussion:after { + content: ""; + display: table; + clear: both; } + +.new-post-article .forum-new-post-form { + padding: var(--baseline); } + +.new-post-article .inner-wrapper { + max-width: 1920px; + min-width: 760px; + margin: auto; } + +.xblock-student_view-discussion { + padding-top: 15px !important; } + +section.discussion-pagination { + margin-top: calc(var(--baseline) * 1.5); } + section.discussion-pagination nav.discussion-paginator { + float: right; } + section.discussion-pagination nav.discussion-paginator ol li { + padding-right: calc(var(--baseline) / 2); + list-style: none; + display: inline-block; } + section.discussion-pagination nav.discussion-paginator ol li.current-page span { + display: inline-block; + height: 35px; + padding: 0 calc(var(--baseline) * 0.75); + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); + font-size: var(--forum-base-font-size); + font-weight: 700; + line-height: 32px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); } + +.discussion-module .btn, +.wmd-prompt-dialog .btn, .discussion-module .btn-brand, +.wmd-prompt-dialog .btn-brand { + transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s; + display: inline-block; + border: 1px solid var(--forum-color-active-thread); + border-radius: 3px; + margin: 0; + background-image: none; + box-shadow: none; + height: 40px; + text-shadow: none; + font-family: var(--font-family-sans-serif); + font-size: 14px; + font-weight: 600; + word-wrap: break-word; + white-space: nowrap; } + .discussion-module .block.btn, + .wmd-prompt-dialog .block.btn, .discussion-module .block.btn-brand, + .wmd-prompt-dialog .block.btn-brand { + display: block; + width: 100%; } + .discussion-module .btn:disabled, + .wmd-prompt-dialog .btn:disabled, .discussion-module .btn-brand:disabled, + .wmd-prompt-dialog .btn-brand:disabled, .discussion-module .is-disabled.btn, + .wmd-prompt-dialog .is-disabled.btn, .discussion-module .is-disabled.btn-brand, + .wmd-prompt-dialog .is-disabled.btn-brand { + pointer-events: none; + outline: none; + cursor: not-allowed; } + .discussion-module .btn:hover, + .wmd-prompt-dialog .btn:hover, .discussion-module .btn-brand:hover, + .wmd-prompt-dialog .btn-brand:hover, .discussion-module .btn:active, + .wmd-prompt-dialog .btn:active, .discussion-module .btn-brand:active, + .wmd-prompt-dialog .btn-brand:active, .discussion-module .btn:focus, + .wmd-prompt-dialog .btn:focus, .discussion-module .btn-brand:focus, + .wmd-prompt-dialog .btn-brand:focus { + border-color: var(--forum-color-hover) !important; + background-color: var(--forum-color-hover) !important; + background-image: none !important; + box-shadow: none !important; + color: var(--forum-color-active-text) !important; + text-decoration: none !important; } + +.discussion-module .btn, +.wmd-prompt-dialog .btn { + background-color: var(--forum-color-background); + color: var(--forum-color-active-thread); } + +.discussion-module .btn-brand, +.wmd-prompt-dialog .btn-brand { + background-color: var(--forum-color-active-thread); + color: var(--forum-color-active-text); } + +.discussion-module .discussion { + clear: both; } + +.discussion .post-actions-list, +.discussion .response-actions-list, +.discussion .comment-actions-list { + text-align: right; } + .discussion .post-actions-list .actions-item, + .discussion .response-actions-list .actions-item, + .discussion .comment-actions-list .actions-item { + box-sizing: border-box; + display: block; + margin: calc(var(--baseline) / 4) 0; } + .discussion .post-actions-list .actions-item.is-hidden, + .discussion .response-actions-list .actions-item.is-hidden, + .discussion .comment-actions-list .actions-item.is-hidden { + display: none; } + .discussion .post-actions-list .actions-item.is-disabled a, + .discussion .response-actions-list .actions-item.is-disabled a, + .discussion .comment-actions-list .actions-item.is-disabled a { + pointer-events: none; } + .discussion .post-actions-list .actions-item.is-disabled a .action-icon, + .discussion .response-actions-list .actions-item.is-disabled a .action-icon, + .discussion .comment-actions-list .actions-item.is-disabled a .action-icon { + display: none; } + .discussion .post-actions-list .actions-item.is-disabled a .action-label, + .discussion .response-actions-list .actions-item.is-disabled a .action-label, + .discussion .comment-actions-list .actions-item.is-disabled a .action-label { + padding-right: 0; } + .discussion .post-actions-list .actions-item.is-disabled a:hover, + .discussion .response-actions-list .actions-item.is-disabled a:hover, + .discussion .comment-actions-list .actions-item.is-disabled a:hover { + border-color: transparent; } + .discussion .post-actions-list .actions-item.is-disabled a:hover .action-label, + .discussion .response-actions-list .actions-item.is-disabled a:hover .action-label, + .discussion .comment-actions-list .actions-item.is-disabled a:hover .action-label { + color: var(--forum-color-active-text); } + .discussion .post-actions-list .more-wrapper, + .discussion .response-actions-list .more-wrapper, + .discussion .comment-actions-list .more-wrapper { + position: relative; } + +.discussion .actions-dropdown { + right: 0; + display: none; + position: absolute; + top: 100%; + pointer-events: none; + min-width: var(--actions-dropdown-width); } + .discussion .actions-dropdown.is-expanded { + display: block; + pointer-events: auto; } + .discussion .actions-dropdown .actions-dropdown-list { + box-sizing: border-box; + box-shadow: 0 1px 1px var(--shadow-l1); + position: relative; + width: 100%; + border-radius: var(--forum-border-radius); + margin: calc(var(--baseline) / 4) 0 0 0; + border: 1px solid var(--forum-color-border); + padding: calc(var(--baseline) / 2) calc(var(--baseline) * 0.75); + background: var(--forum-color-background); } + .discussion .actions-dropdown .actions-dropdown-list::after, .discussion .actions-dropdown .actions-dropdown-list::before { + right: 6px; + bottom: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; } + .discussion .actions-dropdown .actions-dropdown-list::after { + margin-right: 1px; + border-color: transparent; + border-bottom-color: var(--white); + border-width: 6px; } + .discussion .actions-dropdown .actions-dropdown-list::before { + border-color: transparent; + border-bottom-color: var(--forum-color-border); + border-width: 7px; } + .discussion .actions-dropdown .actions-item { + display: block; + margin: 0; } + .discussion .actions-dropdown .actions-item.is-hidden { + display: none; } + +.discussion .action-button { + transition: border 0.5s linear 0s; + box-sizing: border-box; + display: inline-block; + border: 1px solid transparent; + border-radius: var(--forum-border-radius); + color: #313131; } + .discussion .action-button .action-icon { + display: inline-block; + font-size: var(--forum-small-font-size); + height: var(--baseline); + width: var(--baseline); + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); + text-align: center; + color: #313131; } + .discussion .action-button .action-icon .icon { + margin-right: 0; + vertical-align: middle; } + .discussion .action-button .action-label { + display: none; + vertical-align: middle; + padding: 2px 8px; } + .discussion .action-button:hover .action-label, .discussion .action-button:focus .action-label { + display: inline-block; } + .discussion .action-button:hover .action-icon, .discussion .action-button:focus .action-icon { + -webkit-border-top-left-radius: 0; + -moz-border-topleft-radius: 0; + border-top-left-radius: 0; + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: var(--forum-border-radius); + -moz-border-bottomright-radius: var(--forum-border-radius); + border-bottom-right-radius: var(--forum-border-radius); + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; } + .discussion .action-button.action-follow .action-label { + color: #0075b4; } + .discussion .action-button.action-follow.is-checked .action-icon, .discussion .action-button.action-follow:hover .action-icon, .discussion .action-button.action-follow:focus .action-icon { + background-color: var(--forum-color-following); + border: 1px solid #0075b4; + color: var(--white); } + .discussion .action-button.action-follow:hover, .discussion .action-button.action-follow:focus { + border-color: var(--forum-color-following); } + .discussion .action-button.action-vote .action-label { + opacity: 1; } + .discussion .action-button.action-vote.is-checked .action-icon, .discussion .action-button.action-vote:hover .action-icon, .discussion .action-button.action-vote:focus .action-icon { + background-color: var(--green); + border: 1px solid var(--green); + color: var(--white); } + .discussion .action-button.action-vote:hover, .discussion .action-button.action-vote:focus { + border-color: var(--green); } + .discussion .action-button.action-vote:hover .action-label, .discussion .action-button.action-vote:focus .action-label { + color: var(--green); } + .discussion .action-button.action-endorse.is-checked .action-icon, .discussion .action-button.action-endorse:hover .action-icon, .discussion .action-button.action-endorse:focus .action-icon { + background-color: #0075b4; + border: 1px solid #0075b4; + color: var(--white); } + .discussion .action-button.action-endorse:hover, .discussion .action-button.action-endorse:focus { + border-color: #0075b4; + background-color: var(--forum-color-background); } + .discussion .action-button.action-endorse:hover .action-label, .discussion .action-button.action-endorse:focus .action-label { + color: #0075b4; } + .discussion .action-button.action-answer.is-checked .action-icon, .discussion .action-button.action-answer:hover .action-icon, .discussion .action-button.action-answer:focus .action-icon { + border: 1px solid var(--green); + background-color: var(--green); + color: var(--white); } + .discussion .action-button.action-answer:hover, .discussion .action-button.action-answer:focus { + border-color: var(--green); + background-color: var(--forum-color-background); } + .discussion .action-button.action-answer:hover .action-label, .discussion .action-button.action-answer:focus .action-label { + color: var(--green); } + .discussion .action-button.action-more { + position: relative; } + .discussion .action-button.action-more:hover, .discussion .action-button.action-more:focus { + border-color: #313131; + background-color: var(--forum-color-background); } + .discussion .action-button.action-more:hover .action-icon, .discussion .action-button.action-more:focus .action-icon { + border: 1px solid #313131; + background-color: #313131; + color: #fff; } + .discussion .action-button.action-more:hover .action-label, .discussion .action-button.action-more:focus .action-label { + opacity: 1; + color: var(--black); } + +.discussion .actions-dropdown .action-list-item { + text-align: right; + display: block; + width: 100%; + padding: calc(var(--baseline) / 10) 0; + white-space: nowrap; + color: #313131; } + .discussion .actions-dropdown .action-list-item:hover, .discussion .actions-dropdown .action-list-item:focus { + color: var(--link-color); } + .discussion .actions-dropdown .action-list-item .action-icon { + margin-left: calc(var(--baseline) / 4); + display: inline-block; + width: calc(var(--baseline) / 2); + color: inherit; } + .discussion .actions-dropdown .action-list-item .action-label { + display: inline-block; + color: inherit; } + .discussion .actions-dropdown .action-list-item.is-checked.action-pin { + color: var(--pink); } + .discussion .actions-dropdown .action-list-item.is-checked.action-report { + color: var(--pink); } + .discussion .actions-dropdown .action-list-item.is-checked:hover, .discussion .actions-dropdown .action-list-item.is-checked:focus { + color: var(--link-color); } + +.discussion .action-button .action-label, +.discussion .action-list-item .action-label { + float: left; } + .discussion .action-button .action-label .label-checked, + .discussion .action-list-item .action-label .label-checked { + display: none; } + +.discussion .action-button.is-checked .label-unchecked, +.discussion .action-list-item.is-checked .label-unchecked { + display: none; } + +.discussion .action-button.is-checked .label-checked, +.discussion .action-list-item.is-checked .label-checked { + display: inline; } + +.discussion .btn-primary:focus, .discussion .btn-brand:focus, +.discussion .btn-outline-primary:focus { + box-shadow: 0 0 0 2px #0078b4; } + +.forum-new-post-form .wmd-input { + box-sizing: border-box; + position: relative; + z-index: 1; } + +.wmd-preview-container { + -webkit-border-top-left-radius: 0; + -moz-border-topleft-radius: 0; + border-top-left-radius: 0; + -webkit-border-top-right-radius: 0; + -moz-border-topright-radius: 0; + border-top-right-radius: 0; + -webkit-border-bottom-right-radius: var(--forum-border-radius); + -moz-border-bottomright-radius: var(--forum-border-radius); + border-bottom-right-radius: var(--forum-border-radius); + -webkit-border-bottom-left-radius: var(--forum-border-radius); + -moz-border-bottomleft-radius: var(--forum-border-radius); + border-bottom-left-radius: var(--forum-border-radius); + box-sizing: border-box; + border: 1px solid var(--forum-color-border); + width: 100%; + background: var(--forum-color-background-light); + border-color: var(--forum-color-border); } + .discussion-board .wmd-preview-container, + .discussion-user-profile-board .wmd-preview-container { + margin-top: calc(-1 * var(--baseline) / 4); } + +.wmd-preview-label { + padding-left: calc(var(--baseline) / 4); + padding-top: 3px; + width: 100%; + color: var(--forum-color-editor-preview-label); + font-size: var(--forum-small-font-size); } + +.wmd-preview { + padding: calc(var(--baseline) / 2) var(--baseline); + width: auto; + background-color: var(--forum-color-background-light); } + .wmd-preview ol, + .wmd-preview ul { + padding-left: calc(var(--baseline) * 2); + padding-right: 0; } + .wmd-preview svg { + max-width: 100% !important; } + +.wmd-button { + background: none; } + +.wmd-button-bar { + width: 100%; } + +.wmd-button-row { + transition: all 0.2s ease-out 0s; + position: relative; + overflow: hidden; + margin: calc(var(--baseline) / 2) calc(var(--baseline) / 4) calc(var(--baseline) / 4) calc(var(--baseline) / 4); + padding: 0; + height: 30px; } + +.wmd-spacer { + margin-left: 14px; + position: absolute; + display: inline-block; + width: 1px; + height: 20px; + background-color: Silver; + list-style: none; } + +.wmd-button { + position: absolute; + display: inline-block; + width: 20px; + height: 20px; + border: none; + background: none; + list-style: none; + cursor: pointer; + padding: 0; } + +.wmd-button:hover { + background: none; + box-shadow: none; } + +.wmd-button > span { + display: inline-block; + width: 20px; + height: 20px; + background-image: url("var(--static-path)/images/wmd-buttons-transparent.png"); + background-position: 0 0; + background-repeat: no-repeat; } + +.wmd-spacer1 { + left: 50px; } + +.wmd-spacer2 { + left: 175px; } + +.wmd-spacer3 { + left: 300px; } + +.wmd-input { + -webkit-border-top-left-radius: var(--forum-border-radius); + -moz-border-topleft-radius: var(--forum-border-radius); + border-top-left-radius: var(--forum-border-radius); + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: 0; + -moz-border-bottomright-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; + box-sizing: border-box; + margin-top: 0; + border: 1px solid var(--forum-color-border); + padding: calc(var(--baseline) / 2); + width: 100%; + height: 125px; + background: var(--forum-color-background); + font-size: var(--forum-base-font-size); + font-family: var(--font-family-sans-serif); + line-height: 1.6; + box-sizing: border-box; + width: 100%; + background: var(--forum-color-background); } + +.wmd-prompt-background { + background-color: var(--black); } + +.wmd-prompt-dialog { + background: var(--forum-color-background); + padding: var(--baseline); } + .wmd-prompt-dialog > div { + font-size: var(--forum-base-font-size); + font-family: arial, helvetica, sans-serif; } + .wmd-prompt-dialog b { + font-size: var(--forum-large-font-size); } + .wmd-prompt-dialog > form > input[type="text"] { + border-radius: var(--forum-border-radius); + color: #333; } + .wmd-prompt-dialog > form > input[type="button"] { + border: 1px solid #888; + font-family: var(--font-family-sans-serif); + font-size: var(--forum-x-large-font-size); } + .wmd-prompt-dialog > form > input[type="file"] { + margin-bottom: 18px; } + .wmd-prompt-dialog .field-group .field .field-hint { + margin-left: 0; + width: 100%; } + .wmd-prompt-dialog .field-input-label { + font-size: var(--forum-base-font-size); } + .wmd-prompt-dialog .input-text { + width: calc(100% - 175px); + height: 40px; } + .wmd-prompt-dialog .input-text.has-error { + border-color: var(--forum-color-error); } + .wmd-prompt-dialog .field-message.has-error { + width: calc(100% - 175px); + background-color: var(--forum-color-error); + color: var(--white); + padding: calc(var(--baseline) / 2); + box-sizing: border-box; } + .wmd-prompt-dialog .field-label { + cursor: pointer; } + .wmd-prompt-dialog .input-checkbox { + margin-right: calc(var(--baseline) / 5); } + .wmd-prompt-dialog #new-url-input { + direction: ltr; } + +.wmd-button-row { + position: relative; + height: 25px; } + +.discussion .post-label { + margin: calc(var(--baseline)/4) calc(var(--baseline)/2) 0 0; + font-size: var(--forum-small-font-size); + display: inline; + white-space: nowrap; } + .discussion .post-label .icon { + margin-right: calc(var(--baseline) / 5); } + .discussion .post-label.is-hidden { + display: none; } + .discussion .post-label.post-label-pinned { + color: var(--forum-color-pinned); } + .discussion .post-label.post-label-following { + color: var(--forum-color-following); } + .discussion .post-label.post-label-reported { + color: var(--forum-color-reported); } + .discussion .post-label.post-label-closed { + color: var(--forum-color-closed); } + .discussion .post-label.post-label-by-staff { + color: var(--forum-color-staff); } + .discussion .post-label.post-label-by-community-ta { + color: var(--forum-color-community-ta); } + +.discussion .user-label-staff, +.discussion .user-label-community-ta { + color: var(--forum-color-copy-light); + font-size: var(--forum-small-font-size); + white-space: nowrap; } + +.forum-nav-thread-link .forum-nav-thread-labels .post-label .icon { + margin-right: 0; } + +.discussion-board > .page-header .has-breadcrumbs .breadcrumbs { + margin-bottom: calc(var(--baseline) / 2); + font-size: 1rem; + font-weight: 600; + line-height: var(--line-height-base); } + +.forum-nav-browse-menu-wrapper { + border-bottom: 1px solid var(--forum-color-border); + background: #e7e7e7; } + +.forum-nav-browse-filter { + position: relative; + border-bottom: 1px solid var(--forum-color-border); + padding: calc(var(--baseline) / 4); } + +.forum-nav-browse-filter .icon { + right: calc(var(--baseline)/4 + 1px + calc(var(--baseline) / 4)); + font-size: var(--forum-small-font-size); + position: absolute; + margin-top: -6px; + top: 75%; } + +.forum-nav-browse-filter-input { + width: 100%; } + +.forum-nav-browse-menu-following .icon { + float: left; + left: calc(var(--baseline) / 2); + position: relative; + top: 13px; } + +.forum-nav-browse-menu-following .forum-nav-browse-title { + padding-left: calc(var(--baseline) * 1.5); } + +.forum-nav-browse-menu-item { + margin-bottom: 0; } + +.forum-nav-browse-title { + text-align: left; + display: block; + width: 100%; + border: 0; + border-radius: 0; + border-bottom: 1px solid var(--forum-color-border); + padding: calc(var(--baseline) / 2); + background: transparent; + box-shadow: none; + background-image: none; + cursor: pointer; } + .forum-nav-browse-title:hover, .forum-nav-browse-title:focus, .forum-nav-browse-title.is-focused { + background-image: none !important; + box-shadow: none !important; + background: var(--forum-color-background) !important; + /* stylelint-disable-line */ } + +.forum-nav-browse-title .icon { + margin-right: calc(var(--baseline) / 2); } + +.forum-nav-browse-menu { + padding-left: 0; + margin: 0; + font-size: var(--forum-base-font-size); + overflow-y: scroll; + list-style: none; + max-height: 600px; } + +.forum-nav-browse-submenu { + list-style: none; + margin: 0; + padding: 0; } + .forum-nav-browse-submenu li .forum-nav-browse-title { + padding-left: var(--baseline); } + +.forum-nav-refine-bar { + -webkit-border-top-left-radius: var(--forum-border-radius); + -moz-border-topleft-radius: var(--forum-border-radius); + border-top-left-radius: var(--forum-border-radius); + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: 0; + -moz-border-bottomright-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; + font-size: var(--forum-small-font-size); + border-bottom: 1px solid var(--forum-color-border); + background-color: #e7e7e7; + padding: calc(var(--baseline) / 4) calc(var(--baseline) / 2); + color: var(--black); } + .forum-nav-refine-bar:after { + content: ""; + display: table; + clear: both; } + +.forum-nav-filter-main { + text-align: left; + float: left; + box-sizing: border-box; + width: 50%; } + +.forum-nav-filter-cohort, +.forum-nav-sort { + text-align: right; + box-sizing: border-box; } + +.discussion-board .forum-nav-filter-cohort { + float: right; + text-align: right; + width: 50%; } + +.forum-nav-sort { + float: right; } + +.forum-nav-filter-main-control, .forum-nav-filter-cohort-control, .forum-nav-sort-control { + border: none; + max-width: 100%; + background-color: transparent; } + +.forum-nav-filter-cohort-control { + max-width: 60%; } + +.forum-nav-thread-list { + padding-left: 0 !important; + min-height: 60px; + max-height: 800px; + border-bottom: 1px solid #e7e7e7; + margin: 0; + overflow-y: auto; + list-style: none; + border-radius: 0 0 3px 3px; } + .forum-nav-thread-list .forum-nav-thread-labels { + margin: 5px 0 0; + padding-left: 0 !important; } + .forum-nav-thread-list .thread-preview-body { + margin-top: calc(var(--baseline) / 4); + color: var(--forum-color-response-count); + font-size: var(--forum-small-font-size); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + +.course-wrapper .course-content .forum-nav-thread-list-wrapper .forum-nav-thread-list { + padding-left: 0; + list-style: none; } + .course-wrapper .course-content .forum-nav-thread-list-wrapper .forum-nav-thread-list .forum-nav-thread { + margin: 0; } + +.forum-nav-thread { + border-bottom: 1px solid var(--forum-color-border); + background-color: var(--forum-color-background); + margin-bottom: 0; } + .forum-nav-thread:last-child { + border-bottom: 1px solid var(--forum-color-border); } + .forum-nav-thread .forum-nav-thread-link { + border-left: 3px solid transparent; + display: flex; + padding: calc(var(--baseline) / 2); + transition: none; + align-items: center; + justify-content: space-between; + color: var(--forum-color-read-post); } + .forum-nav-thread .forum-nav-thread-link:hover, .forum-nav-thread .forum-nav-thread-link:active, .forum-nav-thread .forum-nav-thread-link:focus { + text-decoration: none; } + .forum-nav-thread .forum-nav-thread-link:hover { + background-color: var(--forum-color-hover-thread); } + .forum-nav-thread .forum-nav-thread-link.is-active { + background-color: var(--forum-color-reading-thread); } + .forum-nav-thread .forum-nav-thread-link .forum-nav-thread-unread-comments-count { + display: inline-block; + font-size: var(--forum-small-font-size); + white-space: nowrap; } + .forum-nav-thread.never-read .forum-nav-thread-link { + border-left: 3px solid var(--forum-color-never-read-post); + color: var(--forum-color-never-read-post); } + +.forum-nav-thread-wrapper-0, .forum-nav-thread-wrapper-1, .forum-nav-thread-wrapper-2 { + display: inline-block; + vertical-align: middle; } + +.forum-nav-thread-wrapper-0 { + margin-right: calc(var(--baseline) / 5); + align-self: flex-start; } + .forum-nav-thread-wrapper-0 .icon { + font-size: var(--forum-base-font-size); + width: 18px; + text-align: center; } + +.forum-nav-thread-wrapper-1 { + margin: 0 calc(var(--baseline) / 4); + max-width: calc(100% - 75px); + flex-grow: 1; } + +.forum-nav-thread-wrapper-2 { + text-align: right; + min-width: 40px; + white-space: nowrap; } + +.forum-nav-thread-title { + margin-left: 0; + font-size: var(--forum-base-font-size); + display: block; } + +.forum-nav-thread-votes-count, .forum-nav-thread-comments-count { + margin-right: calc(var(--baseline) / 4); + font-size: var(--forum-small-font-size); + display: inline-block; + text-align: center; + color: var(--black); } + .forum-nav-thread-votes-count:last-child, .forum-nav-thread-comments-count:last-child { + margin-right: 0; } + +.forum-nav-thread-comments-count { + position: relative; + margin-left: calc(var(--baseline) / 4); + margin-bottom: calc(var(--baseline) / 4); + border-radius: var(--forum-border-radius); + padding: calc(var(--baseline) / 10) calc(var(--baseline) / 5); + min-width: 2em; + background-color: #e7e7e7; } + .forum-nav-thread-comments-count::after { + content: ''; + display: block; + position: absolute; + bottom: calc(-1 * var(--baseline) / 4); + right: calc(var(--baseline) / 4); + width: 0; + height: 0; + border-style: solid; + border-width: 0 calc(var(--baseline) / 4) calc(var(--baseline) / 4) 0; + border-color: transparent var(--forum-color-border) transparent transparent; } + +.forum-nav-load-more { + border-bottom: 1px solid var(--forum-color-border); + background-color: #e7e7e7; } + +.forum-nav-load-more-link, .forum-nav-loading { + display: block; + padding: var(--baseline) 0; + text-align: center; } + +.forum-nav-load-more-link { + color: var(--link-color); + width: 100%; } + .forum-nav-load-more-link:hover, .forum-nav-load-more-link:focus { + color: var(--forum-color-active-text); + background-color: var(--forum-color-active-thread) !important; } + +.view-discussion-home { + padding-left: var(--baseline); + display: none; } + @media (min-width: 992px) { + .view-discussion-home { + display: block; } } + .view-discussion-home section { + border-bottom: 1px solid var(--forum-color-border); } + .view-discussion-home .label { + display: block; } + .view-discussion-home .label-settings { + padding-top: var(--baseline); + padding-bottom: calc(var(--baseline) / 2); } + .view-discussion-home .home-header { + margin: 0; } + .view-discussion-home .home-title { + font-size: var(--forum-large-font-size); + color: var(--black); + margin-bottom: calc(var(--baseline) / 4); } + .view-discussion-home .home-description { + margin-bottom: calc(var(--baseline) / 2); } + .view-discussion-home .home-stats { + padding: var(--baseline) 0; } + .view-discussion-home .home-stats .label-area { + display: inline-block; + min-width: calc(var(--baseline) * 5); + width: 25%; + vertical-align: middle; } + .view-discussion-home .home-stats .label-area .profile-link { + font-weight: 700; } + .view-discussion-home .home-stats .stats-grouping { + padding-left: var(--baseline); + display: inline-block; + width: 70%; } + .view-discussion-home .home-stats .stats-grouping .profile-stat { + display: inline-block; + width: 32.5%; + vertical-align: middle; } + .view-discussion-home .home-stats .stats-grouping .profile-stat .count { + font-size: var(--forum-x-large-font-size); + display: inline-block; + padding: 0 calc(var(--baseline) / 2); + vertical-align: middle; } + .view-discussion-home .home-stats .stats-grouping .profile-stat .profile-stat-label { + vertical-align: middle; } + .view-discussion-home .home-helpgrid { + border-bottom: none; + border-radius: var(--forum-border-radius); + border: 1px solid var(--forum-color-border); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } + .view-discussion-home .helpgrid-row { + border-bottom: 1px solid var(--forum-color-border); } + .view-discussion-home .helpgrid-row .row-title { + padding: calc(var(--baseline) * 1.5) var(--baseline); + background-color: #dedede; + font-size: var(--forum-small-font-size); } + .view-discussion-home .helpgrid-row .row-item-full, + .view-discussion-home .helpgrid-row .row-item { + font-size: var(--forum-small-font-size); + padding: 0 calc(var(--baseline) / 2); + width: 26%; + vertical-align: middle; } + .view-discussion-home .helpgrid-row .row-item-full .icon, + .view-discussion-home .helpgrid-row .row-item .icon { + padding: 0 calc(var(--baseline) / 2); + font-size: 24px; + vertical-align: middle; + display: table-cell; } + .view-discussion-home .helpgrid-row .row-item-full .fa-stack .icon, + .view-discussion-home .helpgrid-row .row-item .fa-stack .icon { + padding: 0 calc(var(--baseline) / 2); } + .view-discussion-home .helpgrid-row .row-item-full .row-description, + .view-discussion-home .helpgrid-row .row-item .row-description { + vertical-align: middle; + display: table-cell; } + .view-discussion-home .helpgrid-row .row-item-full .notification-checkbox { + margin-right: calc(var(--baseline) / 2); + display: inline-block; + padding: calc(var(--baseline)/4) 0 calc(var(--baseline)/2) 0; + border-radius: var(--forum-border-radius); + border: 1px solid gray; } + .view-discussion-home .helpgrid-row .row-item-full .notification-checkbox .email-setting { + display: inline-block; + text-align: center; + vertical-align: middle; + margin-left: calc(var(--baseline) / 2); } + .view-discussion-home .helpgrid-row .row-item-full .notification-checkbox .icon { + display: inline-block; } + .view-discussion-home .helpgrid-row .row-item-full .notification-checkbox .email-setting:checked ~ .icon { + color: var(--green); } + .view-discussion-home .helpgrid-row .row-item-full .row-description { + display: inline-block; + width: 80%; } + .view-discussion-home .helpgrid-row-navigation .fa-bars { + color: #e7e7e7; } + .view-discussion-home .helpgrid-row-navigation .fa-search { + color: var(--gray-300); } + .view-discussion-home .helpgrid-row-navigation .fa-sort { + color: var(--gray-300); } + .view-discussion-home .helpgrid-row-participation .fa-plus { + color: var(--green); } + .view-discussion-home .helpgrid-row-participation .fa-flag { + color: var(--pink); } + .view-discussion-home .helpgrid-row-participation .fa-star { + color: var(--blue); } + .view-discussion-home .helpgrid-row-notification .fa-square { + color: var(--green); } + .view-discussion-home .helpgrid-row-notification .fa-envelope { + color: var(--gray-300); } + +.discussion-post { + padding: 0 calc(var(--baseline) / 2); } + .discussion-post .post-header-actions { + float: right; } + +.discussion-article .posted-details { + margin: calc(var(--baseline) / 5) 0; + color: var(--forum-color-copy-light); } + .discussion-article .posted-details .username { + display: inline; } + .discussion-article .posted-details .timeago, + .discussion-article .posted-details .top-post-status { + color: inherit; } + +.thread-title { + display: block; + margin-bottom: var(--baseline); + font-size: var(--forum-x-large-font-size); + font-weight: 600; } + +.thread-responses-wrapper, +.post-extended-content { + padding: 0 calc(var(--baseline) / 2); } + +.discussion-response { + min-height: calc(var(--baseline) * 5); } + .discussion-response .response-header-content { + display: inline-block; + vertical-align: top; + width: 91.48936%; } + .discussion-response .response-header-actions { + float: right; + right: var(--baseline); + position: absolute; + top: calc(var(--baseline) / 2); } + +.discussion-comment .response-body { + padding: calc(var(--baseline) / 2) calc(var(--baseline) * 1.5) 0 0; + display: inline-block; + margin-top: calc(var(--baseline) / 2); + width: 82.97872%; } + .discussion-comment .response-body p + p { + margin-top: calc(var(--baseline) / 2); } + +.discussion-comment .comment-actions-list { + float: right; + right: calc(var(--baseline) / 2); + position: absolute; + top: 0; } + +.thread-wrapper .response-btn-count-wrapper { + margin: var(--baseline) 0; } + +.discussion-post:after, +.discussion-response:after, +.discussion-comment:after { + content: ""; + display: table; + clear: both; } + +.discussion-post .author-image, +.discussion-response .author-image, +.discussion-comment .author-image { + margin-right: calc(var(--baseline) / 2); + display: inline-block; + vertical-align: top; } + .discussion-post .author-image:empty, + .discussion-response .author-image:empty, + .discussion-comment .author-image:empty { + display: none; } + .discussion-post .author-image.level-post, + .discussion-response .author-image.level-post, + .discussion-comment .author-image.level-post { + height: var(--post-image-dimension); + width: var(--post-image-dimension); } + .discussion-post .author-image.level-response, + .discussion-response .author-image.level-response, + .discussion-comment .author-image.level-response { + height: var(--response-image-dimension); + width: var(--response-image-dimension); } + .discussion-post .author-image.level-comment, + .discussion-response .author-image.level-comment, + .discussion-comment .author-image.level-comment { + height: var(--comment-image-dimension); + width: var(--comment-image-dimension); } + .discussion-post .author-image img, + .discussion-response .author-image img, + .discussion-comment .author-image img { + border-radius: var(--forum-border-radius); } + +.discussion-response .response-body { + padding: calc(var(--baseline) / 2) calc(var(--baseline) * 1.5) 0 0; + margin-bottom: 0.2em; + font-size: var(--forum-base-font-size); } + +.discussion-post:after { + content: ""; + display: table; + clear: both; } + +.discussion-post .post-header-content { + max-width: calc(100% - var(--actions-dropdown-offset)); } + .discussion-post .post-header-content .post-title { + font-size: var(--forum-x-large-font-size); + margin-bottom: calc(var(--baseline) / 4); } + +.discussion-post .post-body { + padding: calc(var(--baseline) / 2) 0; + max-width: calc(100% - var(--actions-dropdown-offset)); } + +.discussion-post .post-context { + color: var(--forum-color-copy-light); } + .discussion-post .post-context:empty { + display: none; } + +.discussion-thread { + padding: 0; + margin-bottom: var(--baseline); + transition: all 0.25s linear 0s; } + .discussion-thread p { + margin-bottom: 0; } + .discussion-thread .discussion-article { + transition: all 0.2s linear 0s; + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); + min-height: 0; + background: var(--forum-color-background); + box-shadow: 0 1px 0 var(--shadow); + transition: all 0.2s linear 0s; } + .discussion-thread .discussion-article .thread-wrapper { + -webkit-border-top-left-radius: var(--forum-border-radius); + -moz-border-topleft-radius: var(--forum-border-radius); + border-top-left-radius: var(--forum-border-radius); + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: 0; + -moz-border-bottomright-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; + position: relative; + overflow-x: hidden; + overflow-y: auto; + max-height: 600px; + background-color: var(--forum-color-background); } + .discussion-thread .discussion-article .thread-wrapper .discussion-post .inline-comment-count { + margin-right: calc(var(--baseline) / 2); + float: right; + position: relative; + display: block; + height: 27px; + margin-top: 6px; + padding: 0 8px; + border-radius: var(--forum-border-radius); + font-size: var(--forum-small-font-size); + font-weight: 400; + line-height: 25px; + color: #888; } + .discussion-thread .discussion-article .thread-wrapper .responses header { + padding-bottom: 0; + margin-bottom: calc(var(--baseline) * 0.75); } + .discussion-thread .discussion-article .thread-wrapper .responses header .posted-by { + margin-right: calc(var(--baseline) / 4); + float: left; + font-size: var(--forum-large-font-size); } + .discussion-thread .discussion-article .thread-wrapper .discussion-reply-new .wmd-input { + height: 120px; } + .discussion-thread .discussion-article .thread-wrapper .post-extended-content { + display: none; } + .discussion-thread .discussion-article .post-tools { + box-shadow: 0 1px 1px var(--shadow) inset; + background: var(--white); } + .discussion-thread .discussion-article .post-tools:hover { + background: var(--forum-color-hover-thread); } + .discussion-thread .discussion-article .post-tools:hover .icon { + color: var(--link-hover); } + .discussion-thread .discussion-article .post-tools .btn-link { + display: block; + padding: calc(var(--baseline) * 0.25) var(--baseline); + font-size: var(--forum-small-font-size); + line-height: 30px; } + .discussion-thread .discussion-article .post-tools .btn-link .icon { + margin-right: calc(var(--baseline) * 0.25); + color: var(--link-color); } + +.thread-wrapper img, +.forum-new-post-form img { + max-width: 100%; } + +.forum-new-post-form, +.edit-post-form { + box-sizing: border-box; + margin: 0; + border-radius: var(--forum-border-radius); + max-width: 1920px; } + .forum-new-post-form:after, + .edit-post-form:after { + content: ""; + display: table; + clear: both; } + .forum-new-post-form label, + .forum-new-post-form .field-label-text, + .edit-post-form label, + .edit-post-form .field-label-text { + -webkit-font-smoothing: initial; } + .forum-new-post-form .post-type, + .edit-post-form .post-type { + text-shadow: none; } + .forum-new-post-form .post-type, + .edit-post-form .post-type { + margin-bottom: 0; } + .forum-new-post-form .post-errors, + .edit-post-form .post-errors { + margin: 0 0 var(--baseline); + padding: 0 !important; + list-style: none !important; } + .forum-new-post-form .post-field, + .edit-post-form .post-field { + margin-bottom: calc(var(--baseline) * 1.5); } + .forum-new-post-form .post-field .field-label, + .edit-post-form .post-field .field-label { + margin: 0; } + .forum-new-post-form .post-field .field-label .field-input, + .edit-post-form .post-field .field-label .field-input { + display: inline-block; + vertical-align: top; } + .forum-new-post-form .post-field .field-label .field-input:not([type="text"]), + .edit-post-form .post-field .field-label .field-input:not([type="text"]) { + border-width: 0; + padding: 0; } + .forum-new-post-form .post-field .field-label .field-label-text, + .edit-post-form .post-field .field-label .field-label-text { + display: block; } + .forum-new-post-form .post-field .field-label .field-label-text + .field-input, + .edit-post-form .post-field .field-label .field-label-text + .field-input { + width: 75%; } + .forum-new-post-form .post-field .field-label .js-post-title, + .edit-post-form .post-field .field-label .js-post-title { + width: 85%; } + .forum-new-post-form .post-field .field-help, + .edit-post-form .post-field .field-help { + margin: calc(var(--baseline) / 4) 0 calc(var(--baseline) / 4) 0; + font-size: var(--forum-small-font-size); + line-height: 1.5; } + .forum-new-post-form .post-field .field-help#field_help_post_type, + .edit-post-form .post-field .field-help#field_help_post_type { + margin: calc(var(--baseline) / 4) 0 calc(var(--baseline) * 0.75) 0; } + .forum-new-post-form .post-field .field-help#new-post-editor-description, + .edit-post-form .post-field .field-help#new-post-editor-description { + padding-left: 0; } + .forum-new-post-form .post-field .field-input, + .edit-post-form .post-field .field-input { + padding: 0; + border: none; } + .forum-new-post-form .post-options, + .edit-post-form .post-options { + margin: var(--baseline) 0; } + .forum-new-post-form .post-options .field-label, + .edit-post-form .post-options .field-label { + margin-right: var(--baseline); } + .forum-new-post-form .post-options .icon, + .edit-post-form .post-options .icon { + margin-right: calc(var(--baseline) / 4); } + +.edit-post-form { + box-sizing: border-box; + width: 100%; + padding-top: 0; } + .edit-post-form:after { + content: ""; + display: table; + clear: both; } + .edit-post-form h1 { + font-size: var(--forum-large-font-size); } + .edit-post-form .form-row { + margin-top: var(--baseline); } + .edit-post-form .post-cancel { + float: left; + margin: calc(var(--baseline)/2) 0 0 calc(var(--baseline)*0.75); } + .edit-post-form .post-update { + float: left; + margin-top: calc(var(--baseline) / 2); } + .edit-post-form .post-update:hover, .edit-post-form .post-update:focus { + border-color: #222; } + .edit-post-form .edit-post-title { + box-sizing: border-box; + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); + padding: 0 calc(var(--baseline) / 2); + width: 100%; + height: 40px; + box-shadow: 0 1px 3px var(--shadow-l1) inset; + font-size: var(--forum-large-font-size); + font-family: var(--font-family-sans-serif); } + +.discussion-module .forum-new-post-form { + background: var(--forum-color-background); } + +.forum-new-post-form .post-type-label, +.edit-post-form .post-type-label { + margin-right: var(--baseline); } + +.forum-new-post-form input[type=text].field-input, +.edit-post-form input[type=text].field-input { + box-sizing: border-box; + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); + padding: 0 calc(var(--baseline) / 2); + width: 70%; + height: 40px; + color: #333; + font-size: var(--forum-large-font-size); + font-family: 'Open Sans', sans-serif; } + +.forum-new-post-form select.field-input, +.edit-post-form select.field-input { + border: 1px solid var(--forum-color-border) !important; + height: 40px; } + +.forum-new-post-form .post-topic.field-input, +.edit-post-form .post-topic.field-input { + width: 100%; } + +.forum-new-post-form .post-option, +.edit-post-form .post-option { + box-sizing: border-box; + display: inline-block; + margin-right: var(--baseline); + border-radius: var(--forum-border-radius); + padding: calc(var(--baseline) / 2); + cursor: pointer; } + .forum-new-post-form .post-option:hover, + .edit-post-form .post-option:hover { + border-color: var(--forum-color-border); } + .forum-new-post-form .post-option .icon, + .edit-post-form .post-option .icon { + margin-right: calc(var(--baseline) / 4); } + +.discussion .responses:empty { + display: none; } + +.discussion .responses .forum-response { + animation: fadeIn 0.3s; + position: relative; + margin: var(--baseline) 0; + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); + box-shadow: 0 0 1px var(--shadow); } + +.discussion .responses .discussion-response { + box-sizing: border-box; + -webkit-border-top-left-radius: var(--forum-border-radius); + -moz-border-topleft-radius: var(--forum-border-radius); + border-top-left-radius: var(--forum-border-radius); + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: 0; + -moz-border-bottomright-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; + padding: var(--baseline); + background-color: var(--forum-color-background); } + +.discussion-response .response-header-content .username { + font-size: var(--forum-base-font-size); } + +.discussion-response .response-body ol, +.discussion-response .response-body ul { + padding-left: calc(var(--baseline) * 2); + padding-right: 0; } + +.discussion .add-response { + display: inline; + padding: calc(var(--baseline) / 2); } + +.forum-response .action-show-comments { + font-size: var(--forum-base-font-size); + box-sizing: border-box; + display: block; + padding: calc(var(--baseline) / 2) var(--baseline); + width: 100%; + background: #f5f5f5; + box-shadow: 0 1px 3px -1px var(--shadow) inset; } + +.discussion .responses .forum-response.staff { + padding-top: 38px; + border-color: #009fe2; } + +.discussion .responses .forum-response.community-ta { + padding-top: 38px; + border-color: var(--forum-color-community-ta); } + +.discussion .responses .forum-response .staff-banner { + -webkit-border-top-left-radius: var(--forum-border-radius); + -moz-border-topleft-radius: var(--forum-border-radius); + border-top-left-radius: var(--forum-border-radius); + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: 0; + -moz-border-bottomright-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; + left: 0; + position: absolute; + top: 0; + width: 100%; + height: 14px; + padding: 1px calc(var(--baseline) / 4); + box-sizing: border-box; + background: #009fe2; + font-size: var(--forum-small-font-size); + font-weight: 700; + color: var(--white); } + +.discussion .responses .forum-response .community-ta-banner { + -webkit-border-top-left-radius: var(--forum-border-radius); + -moz-border-topleft-radius: var(--forum-border-radius); + border-top-left-radius: var(--forum-border-radius); + -webkit-border-top-right-radius: var(--forum-border-radius); + -moz-border-topright-radius: var(--forum-border-radius); + border-top-right-radius: var(--forum-border-radius); + -webkit-border-bottom-right-radius: 0; + -moz-border-bottomright-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; + left: 0; + position: absolute; + top: 0; + width: 100%; + height: 14px; + padding: 1px calc(var(--baseline) / 4); + box-sizing: border-box; + background: var(--forum-color-community-ta); + font-size: var(--forum-small-font-size); + font-weight: 700; + color: var(--white); } + +.discussion .responses .forum-response.loading { + height: 0; + margin: 0; + padding: 0; + border: none; + box-shadow: none; } + +.discussion .comments { + -webkit-border-top-left-radius: 0; + -moz-border-topleft-radius: 0; + border-top-left-radius: 0; + -webkit-border-top-right-radius: 0; + -moz-border-topright-radius: 0; + border-top-right-radius: 0; + -webkit-border-bottom-right-radius: var(--forum-border-radius); + -moz-border-bottomright-radius: var(--forum-border-radius); + border-bottom-right-radius: var(--forum-border-radius); + -webkit-border-bottom-left-radius: var(--forum-border-radius); + -moz-border-bottomleft-radius: var(--forum-border-radius); + border-bottom-left-radius: var(--forum-border-radius); + background: #f5f5f5; + box-shadow: 0 1px 3px -1px var(--shadow) inset; } + .discussion .comments > li { + border-top: 1px solid var(--forum-color-border); + padding: calc(var(--baseline) / 2) var(--baseline); + position: relative; } + .discussion .comments blockquote { + background: var(--forum-color-background-light); + border-radius: var(--forum-border-radius); + padding: calc(var(--baseline) / 4) calc(var(--baseline) / 2); + font-size: var(--forum-base-font-size); } + .discussion .comments .comment-form { + padding: calc(var(--baseline) / 2) 0; } + .discussion .comments .comment-form:after { + content: ""; + display: table; + clear: both; } + .discussion .comments .comment-form .comment-form-input { + padding: calc(var(--baseline) / 4) calc(var(--baseline) / 2); + background-color: var(--forum-color-background); + font-size: var(--forum-base-font-size); } + .discussion .comments .comment-form .discussion-submit-comment { + float: left; + margin-top: 8px; } + .discussion .comments .comment-form .wmd-input { + transition: all 0.2s linear 0s; + height: 40px; } + .discussion .comments .comment-form .discussion-errors { + margin: 0; } + +.response-count { + float: right; + margin-right: var(--baseline)/2; + color: var(--forum-color-copy-light); + font-size: var(--forum-base-font-size); } + +.response-pagination { + visibility: visible; + margin: calc(var(--baseline) / 2) 0; } + .response-pagination:empty { + visibility: hidden; } + .response-pagination .response-display-count { + display: block; + padding: calc(var(--baseline) / 2) 0; + color: var(--forum-color-response-count); + font-size: var(--forum-base-font-size); } + .response-pagination .load-response-button { + text-align: left; + position: relative; + margin: calc(var(--baseline) / 2) 0; + width: 100%; } + +.forum-nav .search-alert { + transition: none; + padding: calc(var(--baseline) / 2) 11px calc(var(--baseline) / 2) 18px; + background-color: var(--black); } + +.forum-nav .search-alert-content, +.forum-nav .search-alert-controls { + display: inline-block; + vertical-align: middle; } + +.forum-nav .search-alert-content { + width: 70%; } + .forum-nav .search-alert-content .message { + font-size: var(--forum-small-font-size); + color: var(--white); } + .forum-nav .search-alert-content .message em { + font-style: italic; } + .forum-nav .search-alert-content .link-jump { + transition: none; } + +.forum-nav .search-alert-controls { + text-align: right; + width: 28%; } + .forum-nav .search-alert-controls .control { + transition: none; + padding: calc(var(--baseline) / 4) calc(var(--baseline) / 2); + color: var(--white); + font-size: var(--forum-base-font-size); } + .forum-nav .search-alert-controls .control:hover, .forum-nav .search-alert-controls .control:focus { + color: var(--white); + text-decoration: none; } + +.has-breadcrumbs .breadcrumbs { + margin: 5px 0 0; } + .has-breadcrumbs .breadcrumbs .all-topics { + font-size: 14px; } + .has-breadcrumbs .breadcrumbs .all-topics .fa { + margin-right: 10px; } + +.forum-nav-browse-filter label { + margin-bottom: 0; + width: 100%; } + +.forum-nav-browse-filter-input { + padding-left: calc(var(--baseline) / 4); + padding-right: calc(var(--baseline) / 2)12px; + box-shadow: none !important; + border-radius: var(--forum-border-radius) !important; + height: auto !important; + font-size: var(--forum-small-font-size) !important; } + +.forum-nav-filter-main, +.forum-nav-filter-cohort, +.forum-nav-sort { + font: inherit; + line-height: 1em; + margin-bottom: 0; } + +.forum-nav-filter-main-control, +.forum-nav-filter-cohort-control, +.forum-nav-sort-control { + font: inherit; } + +li[class*=forum-nav-thread-label-] span { + color: inherit; } + +li[class*=forum-nav-thread-label-]::before, li[class*=forum-nav-thread-label-]::after { + display: none !important; } + +.discussion .action-label span, +.discussion .action-icon span { + color: inherit; } + +.discussion-module .post-header { + margin-bottom: 0 !important; + padding-bottom: 0 !important; } + .discussion-module .post-header .posted-details { + margin: calc(var(--baseline) / 5) 0 !important; } + .discussion-module .post-header .post-labels { + font-size: var(--forum-base-font-size); } + .discussion-module .post-header .post-title { + margin-bottom: 0 !important; } + +.discussion-article .response-header { + line-height: 1 !important; + font-size: var(--forum-base-font-size) !important; + margin-bottom: 0 !important; + padding-bottom: 0 !important; } + +/* + This file mirror UXPL Form field styles +*/ +.post-type-label { + margin-right: 20px; + display: inline-block; + line-height: 100%; } + +.post-options .field-label { + display: inline-block; } + +.field-label .field-input:checked + .field-input-label { + color: #0075b4; } + +.input-radio, +.input-checkbox { + margin-right: 10px; } + +.discussion.inline-discussion .inline-threads { + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); } + +.discussion.inline-discussion .inline-thread { + border: 1px solid var(--forum-color-border); + border-radius: var(--forum-border-radius); } + .discussion.inline-discussion .inline-thread .forum-nav-bar { + padding: calc(var(--baseline) / 2) calc(var(--baseline) / 4); + color: var(--forum-color-navigation-bar); + position: relative; } + .discussion.inline-discussion .inline-thread .forum-nav-bar .all-posts-btn { + color: var(--forum-color-primary); } + .discussion.inline-discussion .inline-thread .forum-nav-bar .all-posts-btn .icon { + margin-left: calc(var(--baseline) / 2); } + .discussion.inline-discussion .inline-thread .forum-content { + padding: calc(var(--baseline) / 2); + overflow-y: auto; } + +.discussion.inline-discussion .new-post-article { + position: relative; + border: 1px solid var(--forum-color-border); } + .discussion.inline-discussion .new-post-article .add-post-cancel { + right: calc(var(--baseline) / 2); + top: calc(var(--baseline) / 2); + position: absolute; + color: #0075b4; } + .discussion.inline-discussion .new-post-article .add-post-cancel:hover, .discussion.inline-discussion .new-post-article .add-post-cancel:focus { + border-color: transparent; + box-shadow: none; + background-color: transparent; + background-image: none; } diff --git a/xblocks_contrib/discussion/static/js/common/content.js b/xblocks_contrib/discussion/static/js/common/content.js new file mode 100644 index 00000000..c229c8dd --- /dev/null +++ b/xblocks_contrib/discussion/static/js/common/content.js @@ -0,0 +1,428 @@ +/* globals DiscussionUtil, Comments */ +(function() { + 'use strict'; + + var __hasProp = {}.hasOwnProperty; + + function __extends(child, parent) { + for (var key in parent) { + if (__hasProp.call(parent, key)) { + child[key] = parent[key]; + } + } + function ctor() { + this.constructor = child; + } + + ctor.prototype = parent.prototype; + child.prototype = new ctor(); + child.__super__ = parent.prototype; + return child; + } + + var __indexOf = [].indexOf || function(item) { + for (var i = 0, l = this.length; i < l; i++) { + if (i in this && this[i] === item) { + return i; + } + } + return -1; + }; + + if (typeof Backbone !== 'undefined' && Backbone !== null) { + this.Content = (function(_super) { + __extends(Content, _super); + + function Content() { + return Content.__super__.constructor.apply(this, arguments); + } + + Content.contents = {}; + + Content.contentInfos = {}; + + Content.prototype.template = function() { + return DiscussionUtil.getTemplate('_content'); + }; + + Content.prototype.actions = { + editable: '.admin-edit', + can_reply: '.discussion-reply', + can_delete: '.admin-delete', + can_openclose: '.admin-openclose', + can_report: '.admin-report', + can_vote: '.admin-vote' + }; + + Content.prototype.urlMappers = {}; + + Content.prototype.urlFor = function(name) { + return this.urlMappers[name].apply(this); + }; + + Content.prototype.can = function(action) { + return (this.get('ability') || {})[action]; + }; + + Content.prototype.canBeEndorsed = function() { + return false; + }; + + Content.prototype.updateInfo = function(info) { + if (info) { + this.set('ability', info.ability); + this.set('voted', info.voted); + return this.set('subscribed', info.subscribed); + } + }; + + Content.prototype.addComment = function(comment, options) { + var comments_count, model, thread; + options = (options) || {}; + if (!options.silent) { + thread = this.get('thread'); + comments_count = parseInt(thread.get('comments_count')); + thread.set('comments_count', comments_count + 1); + } + this.get('children').push(comment); + model = new Comment($.extend({}, comment, { + thread: this.get('thread') + })); + this.get('comments').add(model); + this.trigger('comment:add'); + return model; + }; + + Content.prototype.removeComment = function(comment) { + var comments_count, thread; + thread = this.get('thread'); + comments_count = parseInt(thread.get('comments_count')); + thread.set('comments_count', comments_count - 1 - comment.getCommentsCount()); + return this.trigger('comment:remove'); + }; + + Content.prototype.resetComments = function(children) { + var comment, _i, _len, _ref, _results; + this.set('children', []); + this.set('comments', new Comments()); + _ref = children || []; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + comment = _ref[_i]; + _results.push(this.addComment(comment, { + silent: true + })); + } + return _results; + }; + + Content.prototype.initialize = function() { + var userId; + Content.addContent(this.id, this); + userId = this.get('user_id'); + if (userId) { + this.set('staff_authored', DiscussionUtil.isStaff(userId)); + this.set('community_ta_authored', DiscussionUtil.isTA(userId) || DiscussionUtil.isGroupTA(userId)); + } else { + this.set('staff_authored', false); + this.set('community_ta_authored', false); + } + if (Content.getInfo(this.id)) { + this.updateInfo(Content.getInfo(this.id)); + } + this.set('user_url', DiscussionUtil.urlFor('user_profile', userId)); + return this.resetComments(this.get('children')); + }; + + Content.prototype.remove = function() { + if (this.get('type') === 'comment') { + this.get('thread').removeComment(this); + return this.get('thread').trigger('comment:remove', this); + } else { + return this.trigger('thread:remove', this); + } + }; + + Content.addContent = function(id, content) { + this.contents[id] = content; + }; + + Content.getContent = function(id) { + return this.contents[id]; + }; + + Content.getInfo = function(id) { + return this.contentInfos[id]; + }; + + Content.loadContentInfos = function(infos) { + var id, info; + for (id in infos) { + if (infos.hasOwnProperty(id)) { + info = infos[id]; + if (this.getContent(id)) { + this.getContent(id).updateInfo(info); + } + } + } + return $.extend(this.contentInfos, infos); + }; + + Content.prototype.pinThread = function() { + var pinned; + pinned = this.get('pinned'); + this.set('pinned', pinned); + return this.trigger('change', this); + }; + + Content.prototype.unPinThread = function() { + var pinned; + pinned = this.get('pinned'); + this.set('pinned', pinned); + return this.trigger('change', this); + }; + + Content.prototype.flagAbuse = function() { + var temp_array; + temp_array = this.get('abuse_flaggers'); + temp_array.push(window.user.get('id')); + this.set('abuse_flaggers', temp_array); + return this.trigger('change', this); + }; + + Content.prototype.unflagAbuse = function() { + this.get('abuse_flaggers').pop(window.user.get('id')); + return this.trigger('change', this); + }; + + Content.prototype.isFlagged = function() { + var flaggers, user; + user = DiscussionUtil.getUser(); + flaggers = this.get('abuse_flaggers'); + return user && ( + (__indexOf.call(flaggers, user.id) >= 0) + || (DiscussionUtil.isPrivilegedUser(user.id) && flaggers.length > 0) + ); + }; + + Content.prototype.incrementVote = function(increment) { + var newVotes; + newVotes = _.clone(this.get('votes')); + newVotes.up_count += increment; + return this.set('votes', newVotes); + }; + + Content.prototype.vote = function() { + return this.incrementVote(1); + }; + + Content.prototype.unvote = function() { + return this.incrementVote(-1); + }; + + return Content; + }(Backbone.Model)); + this.Thread = (function(_super) { + __extends(Thread, _super); + + function Thread() { + return Thread.__super__.constructor.apply(this, arguments); + } + + Thread.prototype.urlMappers = { + retrieve: function() { + return DiscussionUtil.urlFor('retrieve_single_thread', this.get('commentable_id'), this.id); + }, + reply: function() { + return DiscussionUtil.urlFor('create_comment', this.id); + }, + unvote: function() { + return DiscussionUtil.urlFor('undo_vote_for_' + (this.get('type')), this.id); + }, + upvote: function() { + return DiscussionUtil.urlFor('upvote_' + (this.get('type')), this.id); + }, + downvote: function() { + return DiscussionUtil.urlFor('downvote_' + (this.get('type')), this.id); + }, + close: function() { + return DiscussionUtil.urlFor('openclose_thread', this.id); + }, + update: function() { + return DiscussionUtil.urlFor('update_thread', this.id); + }, + _delete: function() { + return DiscussionUtil.urlFor('delete_thread', this.id); + }, + follow: function() { + return DiscussionUtil.urlFor('follow_thread', this.id); + }, + unfollow: function() { + return DiscussionUtil.urlFor('unfollow_thread', this.id); + }, + flagAbuse: function() { + return DiscussionUtil.urlFor('flagAbuse_' + (this.get('type')), this.id); + }, + unFlagAbuse: function() { + return DiscussionUtil.urlFor('unFlagAbuse_' + (this.get('type')), this.id); + }, + pinThread: function() { + return DiscussionUtil.urlFor('pin_thread', this.id); + }, + unPinThread: function() { + return DiscussionUtil.urlFor('un_pin_thread', this.id); + } + }; + + Thread.prototype.initialize = function() { + this.set('thread', this); + return Thread.__super__.initialize.call(this); + }; + + Thread.prototype.comment = function() { + return this.set('comments_count', parseInt(this.get('comments_count')) + 1); + }; + + Thread.prototype.follow = function() { + return this.set('subscribed', true); + }; + + Thread.prototype.unfollow = function() { + return this.set('subscribed', false); + }; + + Thread.prototype.display_body = function() { + if (this.has('highlighted_body')) { + return String(this.get('highlighted_body')) + .replace(//g, '') + .replace(/<\/highlight>/g, ''); + } else { + return this.get('body'); + } + }; + + Thread.prototype.display_title = function() { + if (this.has('highlighted_title')) { + return String(this.get('highlighted_title')) + .replace(//g, '') + .replace(/<\/highlight>/g, ''); + } else { + return this.get('title'); + } + }; + + Thread.prototype.toJSON = function() { + var json_attributes; + json_attributes = _.clone(this.attributes); + return _.extend(json_attributes, { + title: this.display_title(), + body: this.display_body() + }); + }; + + Thread.prototype.created_at_date = function() { + return new Date(this.get('created_at')); + }; + + Thread.prototype.created_at_time = function() { + return new Date(this.get('created_at')).getTime(); + }; + + Thread.prototype.hasResponses = function() { + return this.get('comments_count') > 0; + }; + + return Thread; + }(this.Content)); + this.Comment = (function(_super) { + __extends(Comment, _super); + + function Comment() { + var self = this; + this.canBeEndorsed = function() { + return Comment.prototype.canBeEndorsed.apply(self, arguments); + }; + return Comment.__super__.constructor.apply(this, arguments); + } + + Comment.prototype.urlMappers = { + reply: function() { + return DiscussionUtil.urlFor('create_sub_comment', this.id); + }, + unvote: function() { + return DiscussionUtil.urlFor('undo_vote_for_' + (this.get('type')), this.id); + }, + upvote: function() { + return DiscussionUtil.urlFor('upvote_' + (this.get('type')), this.id); + }, + downvote: function() { + return DiscussionUtil.urlFor('downvote_' + (this.get('type')), this.id); + }, + endorse: function() { + return DiscussionUtil.urlFor('endorse_comment', this.id); + }, + update: function() { + return DiscussionUtil.urlFor('update_comment', this.id); + }, + _delete: function() { + return DiscussionUtil.urlFor('delete_comment', this.id); + }, + flagAbuse: function() { + return DiscussionUtil.urlFor('flagAbuse_' + (this.get('type')), this.id); + }, + unFlagAbuse: function() { + return DiscussionUtil.urlFor('unFlagAbuse_' + (this.get('type')), this.id); + } + }; + + Comment.prototype.getCommentsCount = function() { + var count; + count = 0; + this.get('comments').each(function(comment) { + // eslint-disable-next-line no-return-assign + return count += comment.getCommentsCount() + 1; + }); + return count; + }; + + Comment.prototype.canBeEndorsed = function() { + var user_id; + user_id = window.user.get('id'); + return user_id && ( + DiscussionUtil.isPrivilegedUser(user_id) + || ( + this.get('thread').get('thread_type') === 'question' + && this.get('thread').get('user_id') === user_id + ) + ); + }; + + return Comment; + }(this.Content)); + + this.Comments = (function(_super) { + __extends(Comments, _super); + + function Comments() { + return Comments.__super__.constructor.apply(this, arguments); + } + + Comments.prototype.model = Comment; + + Comments.prototype.initialize = function() { + var self = this; + return this.bind('add', function(item) { + item.collection = self; + }); + }; + + Comments.prototype.find = function(id) { + return _.first(this.where({ + id: id + })); + }; + + return Comments; + }(Backbone.Collection)); + } +}).call(window); diff --git a/xblocks_contrib/discussion/static/js/common/discussion.js b/xblocks_contrib/discussion/static/js/common/discussion.js new file mode 100644 index 00000000..09e6c876 --- /dev/null +++ b/xblocks_contrib/discussion/static/js/common/discussion.js @@ -0,0 +1,228 @@ +/* globals Thread, DiscussionUtil, Content */ +(function() { + 'use strict'; + + var __hasProp = {}.hasOwnProperty, + __extends = function(child, parent) { + for (var key in parent) { + if (__hasProp.call(parent, key)) { + child[key] = parent[key]; + } + } + function ctor() { + this.constructor = child; + } + + ctor.prototype = parent.prototype; + child.prototype = new ctor(); + child.__super__ = parent.prototype; + return child; + }; + + if (typeof Backbone !== 'undefined' && Backbone !== null) { + this.Discussion = (function(_super) { + __extends(Discussion, _super); + + function Discussion() { + return Discussion.__super__.constructor.apply(this, arguments); + } + + Discussion.prototype.model = Thread; + + Discussion.prototype.initialize = function(models, options) { + var self = this; + if (!options) { + options = {}; + } + this.pages = options.pages || 1; + this.current_page = 1; + this.sort_preference = options.sort; + this.is_commentable_divided = options.is_commentable_divided; + this.bind('add', function(item) { + item.discussion = self; + }); + this.setSortComparator(this.sort_preference); + return this.on('thread:remove', function(thread) { + self.remove(thread); + }); + }; + + Discussion.prototype.find = function(id) { + return _.first(this.where({ + id: id + })); + }; + + Discussion.prototype.hasMorePages = function() { + return this.current_page < this.pages; + }; + + Discussion.prototype.setSortComparator = function(sortBy) { + // eslint-disable-next-line default-case + switch (sortBy) { + case 'activity': + this.comparator = this.sortByDateRecentFirst; + break; + case 'votes': + this.comparator = this.sortByVotes; + break; + case 'comments': + this.comparator = this.sortByComments; + break; + } + }; + + Discussion.prototype.addThread = function(thread) { + var model; + if (!this.find(thread.id)) { + model = new Thread(thread); + this.add(model); + return model; + } + }; + + Discussion.prototype.retrieveAnotherPage = function(mode, options, sort_options, error) { + var data, url, + self = this; + if (!options) { + options = {}; + } + if (!sort_options) { + sort_options = {}; + } + data = { + page: this.current_page + 1 + }; + if (_.contains(['unread', 'unanswered', 'flagged'], options.filter)) { + data[options.filter] = true; + } + // eslint-disable-next-line default-case + switch (mode) { + case 'search': + url = DiscussionUtil.urlFor('search'); + data.text = options.search_text; + break; + case 'commentables': + url = DiscussionUtil.urlFor('retrieve_discussion', options.commentable_ids); + data.commentable_ids = options.commentable_ids; + break; + case 'all': + url = DiscussionUtil.urlFor('threads'); + break; + case 'followed': + url = DiscussionUtil.urlFor('followed_threads', options.user_id); + break; + case 'user': + url = DiscussionUtil.urlFor('user_profile', options.user_id); + break; + } + if (options.group_id) { + data.group_id = options.group_id; + } + data.sort_key = sort_options.sort_key || 'activity'; + data.sort_order = sort_options.sort_order || 'desc'; + return DiscussionUtil.safeAjax({ + $elem: this.$el, + url: url, + data: data, + dataType: 'json', + success: function(response) { + var models, new_collection, new_threads; + models = self.models; + new_threads = [ + (function() { + var _i, _len, _ref, _results; + _ref = response.discussion_data; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + data = _ref[_i]; + _results.push(new Thread(data)); + } + return _results; + }()) + ][0]; + new_collection = _.union(models, new_threads); + Content.loadContentInfos(response.annotated_content_info); + self.pages = response.num_pages; + self.current_page = response.page; + self.is_commentable_divided = response.is_commentable_divided; + return self.reset(new_collection); + }, + error: error + }); + }; + + Discussion.prototype.sortByDate = function(thread) { + /* + The comment client asks each thread for a value by which to sort the collection + and calls this sort routine regardless of the order returned from the LMS/comments service + so, this takes advantage of this per-thread value and returns tomorrow's date + for pinned threads, ensuring that they appear first, (which is the intent of pinned threads) + */ + return this.pinnedThreadsSortComparatorWithDate(thread, true); + }; + + Discussion.prototype.sortByDateRecentFirst = function(thread) { + /* + Same as above + but negative to flip the order (newest first) + */ + return this.pinnedThreadsSortComparatorWithDate(thread, false); + }; + + Discussion.prototype.sortByVotes = function(thread1, thread2) { + var thread1_count, thread2_count; + thread1_count = parseInt(thread1.get('votes').up_count); + thread2_count = parseInt(thread2.get('votes').up_count); + return this.pinnedThreadsSortComparatorWithCount(thread1, thread2, thread1_count, thread2_count); + }; + + Discussion.prototype.sortByComments = function(thread1, thread2) { + var thread1_count, thread2_count; + thread1_count = parseInt(thread1.get('comments_count')); + thread2_count = parseInt(thread2.get('comments_count')); + return this.pinnedThreadsSortComparatorWithCount(thread1, thread2, thread1_count, thread2_count); + }; + + Discussion.prototype.pinnedThreadsSortComparatorWithCount = function( + thread1, thread2, thread1_count, thread2_count + ) { + if (thread1.get('pinned') && !thread2.get('pinned')) { + return -1; + } else if (thread2.get('pinned') && !thread1.get('pinned')) { + return 1; + } else { + if (thread1_count > thread2_count) { + return -1; + } else if (thread2_count > thread1_count) { + return 1; + } else { + if (thread1.created_at_time() > thread2.created_at_time()) { + return -1; + } else { + return 1; + } + } + } + }; + + Discussion.prototype.pinnedThreadsSortComparatorWithDate = function(thread, ascending) { + var preferredDate, threadLastActivityAtTime, today; + threadLastActivityAtTime = new Date(thread.get('last_activity_at')).getTime(); + if (thread.get('pinned')) { + today = new Date(); + preferredDate = new Date(today.getTime() + (24 * 60 * 60 * 1000) + threadLastActivityAtTime); + } else { + preferredDate = threadLastActivityAtTime; + } + if (ascending) { + return preferredDate; + } else { + return -preferredDate; + } + }; + + return Discussion; + }(Backbone.Collection)); + } +}).call(window); diff --git a/xblocks_contrib/discussion/static/js/common/mathjax_include.js b/xblocks_contrib/discussion/static/js/common/mathjax_include.js new file mode 100644 index 00000000..07435456 --- /dev/null +++ b/xblocks_contrib/discussion/static/js/common/mathjax_include.js @@ -0,0 +1,56 @@ +// See common/templates/mathjax_include.html for info on Fast Preview mode. +var disableFastPreview = true, + vendorScript; +if (typeof MathJax === 'undefined') { + if (disableFastPreview) { + window.MathJax = { + menuSettings: {CHTMLpreview: false} + }; + } + + vendorScript = document.createElement('script'); + vendorScript.onload = function() { + 'use strict'; + + var MathJax = window.MathJax, + setMathJaxDisplayDivSettings; + MathJax.Hub.Config({ + tex2jax: { + inlineMath: [ + ['\\(', '\\)'], + ['[mathjaxinline]', '[/mathjaxinline]'] + ], + displayMath: [ + ['\\[', '\\]'], + ['[mathjax]', '[/mathjax]'] + ] + } + }); + if (disableFastPreview) { + MathJax.Hub.processSectionDelay = 0; + } + MathJax.Hub.signal.Interest(function(message) { + if (message[0] === 'End Math') { + setMathJaxDisplayDivSettings(); + } + }); + setMathJaxDisplayDivSettings = function() { + $('.MathJax_Display').each(function() { + this.setAttribute('tabindex', '0'); + this.setAttribute('aria-live', 'off'); + this.removeAttribute('role'); + this.removeAttribute('aria-readonly'); + }); + }; + }; + // Automatic loading of Mathjax accessibility files + window.MathJax = { + menuSettings: { + collapsible: true, + autocollapse: false, + explorer: true + } + }; + vendorScript.src = 'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_HTMLorMML'; + document.body.appendChild(vendorScript); +} diff --git a/xblocks_contrib/discussion/static/js/common/models/discussion_course_settings.js b/xblocks_contrib/discussion/static/js/common/models/discussion_course_settings.js new file mode 100644 index 00000000..fb6c5761 --- /dev/null +++ b/xblocks_contrib/discussion/static/js/common/models/discussion_course_settings.js @@ -0,0 +1,32 @@ +(function() { + 'use strict'; + + var __hasProp = {}.hasOwnProperty, + __extends = function(child, parent) { + for (var key in parent) { + if (__hasProp.call(parent, key)) { + child[key] = parent[key]; + } + } + function ctor() { + this.constructor = child; + } + + ctor.prototype = parent.prototype; + child.prototype = new ctor(); + child.__super__ = parent.prototype; + return child; + }; + + if (typeof Backbone !== 'undefined' && Backbone !== null) { + this.DiscussionCourseSettings = (function(_super) { + __extends(DiscussionCourseSettings, _super); + + function DiscussionCourseSettings() { + return DiscussionCourseSettings.__super__.constructor.apply(this, arguments); + } + + return DiscussionCourseSettings; + }(Backbone.Model)); + } +}).call(this); diff --git a/xblocks_contrib/discussion/static/js/common/models/discussion_user.js b/xblocks_contrib/discussion/static/js/common/models/discussion_user.js new file mode 100644 index 00000000..ccd1f037 --- /dev/null +++ b/xblocks_contrib/discussion/static/js/common/models/discussion_user.js @@ -0,0 +1,50 @@ +(function() { + 'use strict'; + + var __hasProp = {}.hasOwnProperty, + __extends = function(child, parent) { + for (var key in parent) { + if (__hasProp.call(parent, key)) { + child[key] = parent[key]; + } + } + function ctor() { + this.constructor = child; + } + + ctor.prototype = parent.prototype; + child.prototype = new ctor(); + child.__super__ = parent.prototype; + return child; + }; + + if (typeof Backbone !== 'undefined' && Backbone !== null) { + this.DiscussionUser = (function(_super) { + __extends(DiscussionUser, _super); + + function DiscussionUser() { + return DiscussionUser.__super__.constructor.apply(this, arguments); + } + + DiscussionUser.prototype.following = function(thread) { + return _.include(this.get('subscribed_thread_ids'), thread.id); + }; + + DiscussionUser.prototype.voted = function(thread) { + return _.include(this.get('upvoted_ids'), thread.id); + }; + + DiscussionUser.prototype.vote = function(thread) { + this.get('upvoted_ids').push(thread.id); + return thread.vote(); + }; + + DiscussionUser.prototype.unvote = function(thread) { + this.set('upvoted_ids', _.without(this.get('upvoted_ids'), thread.id)); + return thread.unvote(); + }; + + return DiscussionUser; + }(Backbone.Model)); + } +}).call(this); diff --git a/xblocks_contrib/discussion/static/js/common/utils.js b/xblocks_contrib/discussion/static/js/common/utils.js new file mode 100644 index 00000000..3f0a7a44 --- /dev/null +++ b/xblocks_contrib/discussion/static/js/common/utils.js @@ -0,0 +1,589 @@ +/* globals $$course_id, Content, Markdown, MathJax, URI, _ */ +(function() { + 'use strict'; + + this.DiscussionUtil = (function() { + function DiscussionUtil() { + } + + DiscussionUtil.wmdEditors = {}; + + DiscussionUtil.leftKey = 37; + DiscussionUtil.rightKey = 39; + + DiscussionUtil.getTemplate = function(id) { + return $('script#' + id).html(); + }; + + DiscussionUtil.setUser = function(user) { + this.user = user; + }; + + DiscussionUtil.getUser = function() { + return this.user; + }; + + DiscussionUtil.loadRoles = function(roles) { + this.roleIds = roles; + }; + + DiscussionUtil.isStaff = function(userId) { + var staff; + if (_.isUndefined(userId)) { + // eslint-disable-next-line no-void + userId = this.user ? this.user.id : void 0; + } + if (_.isUndefined(this.roleIds)) { + this.roleIds = {}; + } + staff = _.union(this.roleIds.Moderator, this.roleIds.Administrator); + return _.include(staff, parseInt(userId)); + }; + + DiscussionUtil.isTA = function(userId) { + var ta; + if (_.isUndefined(userId)) { + // eslint-disable-next-line no-void + userId = this.user ? this.user.id : void 0; + } + ta = _.union(this.roleIds['Community TA']); + return _.include(ta, parseInt(userId)); + }; + + DiscussionUtil.isGroupTA = function(userId) { + var groupTa, + localUserId = userId; + if (_.isUndefined(userId)) { + // eslint-disable-next-line no-void + localUserId = this.user ? this.user.id : void 0; + } + groupTa = _.union(this.roleIds['Group Moderator']); + return _.include(groupTa, parseInt(localUserId, 10)); + }; + + DiscussionUtil.isPrivilegedUser = function(userId) { + return this.isStaff(userId) || this.isTA(userId); + }; + + DiscussionUtil.bulkUpdateContentInfo = function(infos) { + var id, info, _results; + _results = []; + for (id in infos) { + if (infos.hasOwnProperty(id)) { + info = infos[id]; + _results.push(Content.getContent(id).updateInfo(info)); + } + } + return _results; + }; + + DiscussionUtil.generateDiscussionLink = function(cls, txt, handler) { + return $('') + .addClass('discussion-link').attr('href', '#') + .addClass(cls) + .text(txt) + .click(function() { return handler(this); }); + }; + + DiscussionUtil.urlFor = function(name, param, param1, param2) { + return { + follow_discussion: '/courses/' + $$course_id + '/discussion/' + param + '/follow', + unfollow_discussion: '/courses/' + $$course_id + '/discussion/' + param + '/unfollow', + create_thread: '/courses/' + $$course_id + '/discussion/' + param + '/threads/create', + update_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/update', + create_comment: '/courses/' + $$course_id + '/discussion/threads/' + param + '/reply', + delete_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/delete', + flagAbuse_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/flagAbuse', + unFlagAbuse_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/unFlagAbuse', + flagAbuse_comment: '/courses/' + $$course_id + '/discussion/comments/' + param + '/flagAbuse', + unFlagAbuse_comment: '/courses/' + $$course_id + '/discussion/comments/' + param + '/unFlagAbuse', + upvote_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/upvote', + downvote_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/downvote', + pin_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/pin', + un_pin_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/unpin', + undo_vote_for_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/unvote', + follow_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/follow', + unfollow_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/unfollow', + update_comment: '/courses/' + $$course_id + '/discussion/comments/' + param + '/update', + endorse_comment: '/courses/' + $$course_id + '/discussion/comments/' + param + '/endorse', + create_sub_comment: '/courses/' + $$course_id + '/discussion/comments/' + param + '/reply', + delete_comment: '/courses/' + $$course_id + '/discussion/comments/' + param + '/delete', + upvote_comment: '/courses/' + $$course_id + '/discussion/comments/' + param + '/upvote', + downvote_comment: '/courses/' + $$course_id + '/discussion/comments/' + param + '/downvote', + undo_vote_for_comment: '/courses/' + $$course_id + '/discussion/comments/' + param + '/unvote', + upload: '/courses/' + $$course_id + '/discussion/upload', + users: '/courses/' + $$course_id + '/discussion/users', + search: '/courses/' + $$course_id + '/discussion/forum/search', + retrieve_discussion: '/courses/' + $$course_id + '/discussion/forum/' + param + '/inline', + retrieve_single_thread: '/courses/' + $$course_id + '/discussion/forum/' + param + '/threads/' + param1, + openclose_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/close', + user_profile: '/courses/' + $$course_id + '/discussion/forum/users/' + param, + followed_threads: '/courses/' + $$course_id + '/discussion/forum/users/' + param + '/followed', + threads: '/courses/' + $$course_id + '/discussion/forum', + enable_notifications: '/notification_prefs/enable/', + disable_notifications: '/notification_prefs/disable/', + notifications_status: '/notification_prefs/status/' + }[name]; + }; + + DiscussionUtil.ignoreEnterKey = function(event) { + if (event.which === 13) { + return event.preventDefault(); + } + }; + + DiscussionUtil.activateOnSpace = function(event, func) { + if (event.which === 32) { + event.preventDefault(); + return func(event); + } + }; + + DiscussionUtil.makeFocusTrap = function(elem) { + return elem.keydown(function(event) { + if (event.which === 9) { + return event.preventDefault(); + } + }); + }; + + DiscussionUtil.showLoadingIndicator = function(element, takeFocus) { + var animElem = edx.HtmlUtils.joinHtml( + edx.HtmlUtils.HTML("
"), + edx.HtmlUtils.HTML(""), + gettext('Loading content'), + edx.HtmlUtils.HTML('
') + ); + var $animElem = $(animElem.toString()); + element.after($animElem); + this.$_loading = $animElem; + if (takeFocus) { + this.makeFocusTrap(this.$_loading); + this.$_loading.focus(); + } + }; + + DiscussionUtil.hideLoadingIndicator = function() { + return this.$_loading.remove(); + }; + + DiscussionUtil.discussionAlert = function(header, body) { + var $alertDiv, $alertTrigger; + // Prevents "text" is undefined in underscore.js in tests - looks like some tests use + // discussions somehow, but never append discussion fixtures or reset them; this causes + // entire test suite (lms, cms, common) to fail due to unhandled JS exception + var popupTemplate = $('#alert-popup').html() || ''; + if ($('#discussion-alert').length === 0) { + $alertDiv = $( + edx.HtmlUtils.template(popupTemplate)({}).toString() + ); + this.makeFocusTrap($alertDiv.find('button')); + $alertTrigger = $("").css('display', 'none'); + $alertTrigger.leanModal({ + closeButton: '#discussion-alert .dismiss', + overlay: 1, + top: 200 + }); + $('body').append($alertDiv).append($alertTrigger); + } + $('#discussion-alert header h2').text(header); + $('#discussion-alert p').text(body); + $('#discussion-alert-trigger').click(); + $('#discussion-alert button').focus(); + }; + + DiscussionUtil.safeAjax = function(params) { + var $elem, deferred, request, + self = this; + $elem = params.$elem; + if ($elem && $elem.prop('disabled')) { + deferred = $.Deferred(); + deferred.reject(); + return deferred.promise(); + } + params.url = URI(params.url).addSearch({ + ajax: 1 + }); + if (!params.error) { + params.error = function() { + self.discussionAlert( + gettext('Error'), + gettext('Your request could not be processed. Refresh the page and try again.') + ); + }; + } + + if ($elem) { + $elem.prop('disabled', true); + } + if (params.$loading) { + if (params.loadingCallback) { + params.loadingCallback.apply(params.$loading); + } else { + self.showLoadingIndicator(params.$loading, params.takeFocus); + } + } + + request = $.ajax(params).always(function() { + if ($elem) { + $elem.prop('disabled', false); + } + if (params.$loading) { + if (params.loadedCallback) { + return params.loadedCallback.apply(params.$loading); + } else { + return self.hideLoadingIndicator(); + } + } + }); + return request; + }; + + DiscussionUtil.updateWithUndo = function(model, updates, safeAjaxParams, errorMsg, beforeSend) { + var undo, + self = this; + if (errorMsg) { + safeAjaxParams.error = function() { + return self.discussionAlert(gettext('Error'), errorMsg); + }; + } + undo = _.pick(model.attributes, _.keys(updates)); + model.set(updates); + if (typeof beforeSend === 'function') { + beforeSend(); + } + return this.safeAjax(safeAjaxParams).fail(function() { + return model.set(undo); + }); + }; + + DiscussionUtil.bindLocalEvents = function($local, eventsHandler) { + var event, eventSelector, handler, selector, _ref, _results; + _results = []; + for (eventSelector in eventsHandler) { + if (eventsHandler.hasOwnProperty(eventSelector)) { + handler = eventsHandler[eventSelector]; + _ref = eventSelector.split(' '); + event = _ref[0]; + selector = _ref[1]; + _results.push($local(selector).unbind(event)[event](handler)); + } + } + return _results; + }; + + DiscussionUtil.formErrorHandler = function(errorsField) { + return function(xhr) { + var makeErrorElem, response, i, $errorItem; + makeErrorElem = function(message, alertId) { + return edx.HtmlUtils.joinHtml( + edx.HtmlUtils.HTML('
  • '), + edx.HtmlUtils.template( + $('#new-post-alert-template').html() + )({ + message: message, + alertId: alertId + }), + edx.HtmlUtils.HTML('
    • ') + ); + }; + errorsField.empty().show(); + if (xhr.status === 400) { + response = JSON.parse(xhr.responseText); + if (response.errors) { + for (i = 0; i < response.errors.length; i++) { + $errorItem = makeErrorElem(response.errors[i], i); + edx.HtmlUtils.append(errorsField, $errorItem); + } + } + } else { + $errorItem = makeErrorElem('Your request could not be processed. Refresh the page and try again.', 0); // eslint-disable-line max-len + edx.HtmlUtils.append(errorsField, $errorItem); + } + + // Set focus on the first error displayed + $('div[role="alert"]', errorsField).first().focus(); + }; + }; + + DiscussionUtil.clearFormErrors = function(errorsField) { + return errorsField.empty(); + }; + + DiscussionUtil.postMathJaxProcessor = function(htmlSnippet) { + var RE_DISPLAYMATH, RE_INLINEMATH; + RE_INLINEMATH = /^\$([^\$]*)\$/g; + RE_DISPLAYMATH = /^\$\$([^\$]*)\$\$/g; + return this.processEachMathAndCode(htmlSnippet, function(s, type) { + if (type === 'display') { + return s.replace(RE_DISPLAYMATH, function($0, $1) { + return '\\[' + $1 + '\\]'; + }); + } else if (type === 'inline') { + return s.replace(RE_INLINEMATH, function($0, $1) { + return '\\(' + $1 + '\\)'; + }); + } else { + return s; + } + }); + }; + + DiscussionUtil.makeWmdEditor = function($content, $local, cls_identifier) { + var appended_id, editor, elem, id, imageUploadUrl, placeholder, _processor; + elem = $local('.' + cls_identifier); + placeholder = elem.data('placeholder'); + id = elem.data('id'); + appended_id = '-' + cls_identifier + '-' + id; + imageUploadUrl = this.urlFor('upload'); + _processor = function(self) { + return function(text) { + // HTML returned by Markdown is assumed to be safe to render + return self.postMathJaxProcessor(edx.HtmlUtils.HTML(text)).toString(); + }; + }; + editor = Markdown.makeWmdEditor(elem, appended_id, imageUploadUrl, _processor(this)); + this.wmdEditors['' + cls_identifier + '-' + id] = editor; + if (placeholder) { + elem.find('#wmd-input' + appended_id).attr('placeholder', placeholder); + } + return editor; + }; + + DiscussionUtil.getWmdEditor = function($content, $local, cls_identifier) { + var elem, id; + elem = $local('.' + cls_identifier); + id = elem.attr('data-id'); + return this.wmdEditors['' + cls_identifier + '-' + id]; + }; + + DiscussionUtil.getWmdInput = function($content, $local, cls_identifier) { + var elem, id; + elem = $local('.' + cls_identifier); + id = elem.attr('data-id'); + return $local('#wmd-input-' + cls_identifier + '-' + id); + }; + + DiscussionUtil.getWmdContent = function($content, $local, cls_identifier) { + return this.getWmdInput($content, $local, cls_identifier).val(); + }; + + DiscussionUtil.setWmdContent = function($content, $local, cls_identifier, text) { + this.getWmdInput($content, $local, cls_identifier).val(text); + return this.getWmdEditor($content, $local, cls_identifier).refreshPreview(); + }; + + var RE_DISPLAYMATH = /^([^\$]*?)\$\$([^\$]*?)\$\$(.*)$/m, + RE_INLINEMATH = /^([^\$]*?)\$([^\$]+?)\$(.*)$/m, + ESCAPED_DOLLAR = '@@ESCAPED_D@@', + ESCAPED_BACKSLASH = '@@ESCAPED_B@@', + LATEX_SCRIPT = '\{javascript\:(.+?)\}'; + + /** + * Formats math and code chunks + * @param htmlSnippet - post contents in form of safe (escaped and/or stripped) HTML + * @param processor - callback to post-process math and code chunks. Should return HtmlUtils.HTML or "subclass" + * @returns {*} + */ + DiscussionUtil.processEachMathAndCode = function(htmlSnippet, processor) { + var $div, codeArchive, processedHtmlString, htmlString; + codeArchive = {}; + processedHtmlString = ''; + $div = edx.HtmlUtils.setHtml($('
    '), edx.HtmlUtils.ensureHtml(htmlSnippet)); + $div.find('code').each(function(index, code) { + codeArchive[index] = $(code).html(); + return $(code).text(index); + }); + htmlString = $div.html(); + htmlString = htmlString.replace(/\\\$/g, ESCAPED_DOLLAR); + /* eslint-disable no-loop-func */ + // eslint-disable-next-line no-constant-condition + while (true) { + if (RE_INLINEMATH.test(htmlString)) { + htmlString = htmlString.replace(RE_INLINEMATH, function($0, $1, $2, $3) { + processedHtmlString += $1 + processor('$' + $2 + '$', 'inline'); + return $3; + }); + } else if (RE_DISPLAYMATH.test(htmlString)) { + htmlString = htmlString.replace(RE_DISPLAYMATH, function($0, $1, $2, $3) { + /* + corrected mathjax rendering in preview + */ + processedHtmlString += $1 + processor('$$' + $2 + '$$', 'display'); + return $3; + }); + } else { + processedHtmlString += htmlString; + break; + } + } + /* eslint-enable no-loop-func */ + htmlString = processedHtmlString; + htmlString = htmlString.replace(new RegExp(ESCAPED_DOLLAR, 'g'), '\\$'); + htmlString = htmlString.replace(/\\\\\\\\/g, ESCAPED_BACKSLASH); + htmlString = htmlString.replace(/\\begin\{([a-z]*\*?)\}([\s\S]*?)\\end\{\1\}/img, function($0, $1, $2) { + return processor(('\\begin{' + $1 + '}') + $2 + ('\\end{' + $1 + '}')); + }); + htmlString = htmlString.replace(new RegExp(ESCAPED_BACKSLASH, 'g'), '\\\\\\\\'); + htmlString = htmlString.replace(new RegExp(LATEX_SCRIPT, 'g'), '{}'); + $div = edx.HtmlUtils.setHtml($('
    '), edx.HtmlUtils.HTML(htmlString)); + $div.find('code').each(function(index, code) { + edx.HtmlUtils.setHtml( + $(code), + edx.HtmlUtils.HTML(processor(codeArchive[index], 'code')) + ); + }); + return edx.HtmlUtils.HTML($div.html()); + }; + + DiscussionUtil.unescapeHighlightTag = function(htmlSnippet) { + return edx.HtmlUtils.HTML( + htmlSnippet.toString().replace( + /\<\;highlight\>\;/g, + "").replace(/\<\;\/highlight\>\;/g, '' + ) + ); + }; + + DiscussionUtil.stripHighlight = function(htmlString) { + return htmlString + .replace(/\&(amp\;)?lt\;highlight\&(amp\;)?gt\;/g, '') + .replace(/\&(amp\;)?lt\;\/highlight\&(amp\;)?gt\;/g, ''); + }; + + DiscussionUtil.stripLatexHighlight = function(htmlSnippet) { + return this.processEachMathAndCode(htmlSnippet, this.stripHighlight); + }; + + /** + * Processes markdown into formatted text and handles highlighting. + * @param unsafeText - raw markdown text, with all HTML entitites being *unescaped*. + * @returns HtmlSnippet + */ + DiscussionUtil.markdownWithHighlight = function(unsafeText) { + var converter; + unsafeText = unsafeText.replace(/^\>\;/gm, '>'); + converter = Markdown.getMathCompatibleConverter(); + /* + * converter.makeHtml and HTML escaping: + * - converter.makeHtml is not HtmlSnippet aware, so we must pass unescaped raw text + * - converter.makeHtml strips html tags in post body and escapes in code blocks by design. + * HTML tags are not supported. Only markdown is supported. + */ + var htmlSnippet = edx.HtmlUtils.HTML(converter.makeHtml(unsafeText)); + return this.unescapeHighlightTag(this.stripLatexHighlight(htmlSnippet)); + }; + + DiscussionUtil.abbreviateString = function(text, minLength) { + if (text.length < minLength) { + return text; + } else { + while (minLength < text.length && text[minLength] !== ' ') { + minLength++; + } + return text.substr(0, minLength) + gettext('…'); + } + }; + + DiscussionUtil.convertMath = function(element) { + edx.HtmlUtils.setHtml( + element, + this.postMathJaxProcessor(this.markdownWithHighlight(element.text())) + ); + }; + + DiscussionUtil.typesetMathJax = function(element) { + if (typeof MathJax !== 'undefined' && MathJax !== null && typeof MathJax.Hub !== 'undefined') { + MathJax.Hub.Queue(['Typeset', MathJax.Hub, element[0]]); + } + }; + + DiscussionUtil.abbreviateHTML = function(htmlSnippet, maxLength) { + var $result, imagesToReplace, truncated_text; + truncated_text = edx.HtmlUtils.HTML(jQuery.truncate(htmlSnippet.toString(), { + length: maxLength, + noBreaks: true, + ellipsis: gettext('…') + })); + $result = $(edx.HtmlUtils.joinHtml( + edx.HtmlUtils.HTML('
    '), + truncated_text, + edx.HtmlUtils.HTML('
    ') + ).toString()); + imagesToReplace = $result.find('img:not(:first)'); + if (imagesToReplace.length > 0) { + edx.HtmlUtils.append( + $result, + edx.HtmlUtils.interpolateHtml( + edx.HtmlUtils.HTML('

    {text}

    '), + {text: gettext('Some images in this post have been omitted')} + ) + ); + } + // See TNL-4983 for an explanation of why the linter requires ensureHtml() + var afterMessage = edx.HtmlUtils.interpolateHtml( + edx.HtmlUtils.HTML('{text}'), {text: gettext('image omitted')} + ); + imagesToReplace.after(edx.HtmlUtils.ensureHtml(afterMessage).toString()).remove(); + return $result.html(); + }; + + DiscussionUtil.getPaginationParams = function(curPage, numPages, pageUrlFunc) { + var delta, maxPage, minPage, pageInfo; + delta = 2; + minPage = Math.max(curPage - delta, 1); + maxPage = Math.min(curPage + delta, numPages); + pageInfo = function(pageNum) { + return { + number: pageNum, + url: pageUrlFunc(pageNum) + }; + }; + return { + page: curPage, + lowPages: _.range(minPage, curPage).map(pageInfo), + highPages: _.range(curPage + 1, maxPage + 1).map(pageInfo), + previous: curPage > 1 ? pageInfo(curPage - 1) : null, + next: curPage < numPages ? pageInfo(curPage + 1) : null, + leftdots: minPage > 2, + rightdots: maxPage < numPages - 1, + first: minPage > 1 ? pageInfo(1) : null, + last: maxPage < numPages ? pageInfo(numPages) : null + }; + }; + + DiscussionUtil.handleKeypressInToolbar = function(event) { + var $currentButton, $nextButton, $toolbar, $allButtons, + keyPressed, nextIndex, currentButtonIndex, + validKeyPress, toolbarHasButtons; + + $currentButton = $(event.target); + keyPressed = event.which || event.keyCode; + $toolbar = $currentButton.parent(); + $allButtons = $toolbar.children('.wmd-button'); + + validKeyPress = keyPressed === this.leftKey || keyPressed === this.rightKey; + toolbarHasButtons = $allButtons.length > 0; + + if (validKeyPress && toolbarHasButtons) { + currentButtonIndex = $allButtons.index($currentButton); + nextIndex = keyPressed === this.leftKey ? currentButtonIndex - 1 : currentButtonIndex + 1; + nextIndex = Math.max(Math.min(nextIndex, $allButtons.length - 1), 0); + + $nextButton = $($allButtons[nextIndex]); + this.moveSelectionToNextItem($currentButton, $nextButton); + } + }; + + DiscussionUtil.moveSelectionToNextItem = function(prevItem, nextItem) { + prevItem.attr('aria-selected', 'false'); + prevItem.attr('tabindex', '-1'); + + nextItem.attr('aria-selected', 'true'); + nextItem.attr('tabindex', '0'); + nextItem.focus(); + }; + + return DiscussionUtil; + }).call(this); +}).call(window); diff --git a/xblocks_contrib/discussion/static/js/common/views/discussion_content_view.js b/xblocks_contrib/discussion/static/js/common/views/discussion_content_view.js new file mode 100644 index 00000000..2145130b --- /dev/null +++ b/xblocks_contrib/discussion/static/js/common/views/discussion_content_view.js @@ -0,0 +1,528 @@ +/* globals _, Backbone, DiscussionContentView, DiscussionUtil */ +(function() { + 'use strict'; + + var __hasProp = {}.hasOwnProperty, + __extends = function(child, parent) { + for (var key in parent) { + if (__hasProp.call(parent, key)) { + child[key] = parent[key]; + } + } + function ctor() { + this.constructor = child; + } + + ctor.prototype = parent.prototype; + child.prototype = new ctor(); + child.__super__ = parent.prototype; + return child; + }; + + if (typeof Backbone !== 'undefined' && Backbone !== null) { + this.DiscussionContentView = (function(_super) { + __extends(DiscussionContentView, _super); + + function DiscussionContentView() { + var self = this; + this.setWmdContent = function() { + return DiscussionContentView.prototype.setWmdContent.apply(self, arguments); + }; + this.getWmdContent = function() { + return DiscussionContentView.prototype.getWmdContent.apply(self, arguments); + }; + this.getWmdEditor = function() { + return DiscussionContentView.prototype.getWmdEditor.apply(self, arguments); + }; + this.makeWmdEditor = function() { + return DiscussionContentView.prototype.makeWmdEditor.apply(self, arguments); + }; + return DiscussionContentView.__super__.constructor.apply(this, arguments); + } + + DiscussionContentView.prototype.events = { + 'click .discussion-flag-abuse': 'toggleFlagAbuse', + 'keydown .discussion-flag-abuse': function(event) { + return DiscussionUtil.activateOnSpace(event, this.toggleFlagAbuse); + } + }; + + DiscussionContentView.prototype.attrRenderer = { + ability: function(ability) { + var action, selector, _ref, _results; + _ref = this.abilityRenderer; + _results = []; + for (action in _ref) { + if (_ref.hasOwnProperty(action)) { + selector = _ref[action]; + if (!ability[action]) { + _results.push(selector.disable.apply(this)); + } else { + _results.push(selector.enable.apply(this)); + } + } + } + return _results; + } + }; + + DiscussionContentView.prototype.abilityRenderer = { + editable: { + enable: function() { + return this.$('.action-edit').closest('.actions-item').removeClass('is-hidden'); + }, + disable: function() { + return this.$('.action-edit').closest('.actions-item').addClass('is-hidden'); + } + }, + can_delete: { + enable: function() { + return this.$('.action-delete').closest('.actions-item').removeClass('is-hidden'); + }, + disable: function() { + return this.$('.action-delete').closest('.actions-item').addClass('is-hidden'); + } + }, + can_openclose: { + enable: function() { + var self = this; + return _.each(['.action-close', '.action-pin'], function(selector) { + return self.$(selector).closest('.actions-item').removeClass('is-hidden'); + }); + }, + disable: function() { + var self = this; + return _.each(['.action-close', '.action-pin'], function(selector) { + return self.$(selector).closest('.actions-item').addClass('is-hidden'); + }); + } + }, + can_report: { + enable: function() { + return this.$('.action-report').closest('.actions-item').removeClass('is-hidden'); + }, + disable: function() { + return this.$('.action-report').closest('.actions-item').addClass('is-hidden'); + } + }, + can_vote: { + enable: function() { + this.$('.action-vote').closest('.actions-item').removeClass('is-disabled'); + }, + disable: function() { + this.$('.action-vote').closest('.actions-item').addClass('is-disabled'); + } + } + }; + + DiscussionContentView.prototype.renderPartialAttrs = function() { + var attr, value, _ref, _results; + _ref = this.model.changedAttributes(); + _results = []; + for (attr in _ref) { + if (_ref.hasOwnProperty(attr)) { + value = _ref[attr]; + if (this.attrRenderer[attr]) { + _results.push(this.attrRenderer[attr].apply(this, [value])); + } else { + // eslint-disable-next-line no-void + _results.push(void 0); + } + } + } + return _results; + }; + + DiscussionContentView.prototype.renderAttrs = function() { + var attr, value, _ref, _results; + _ref = this.model.attributes; + _results = []; + for (attr in _ref) { + if (_ref.hasOwnProperty(attr)) { + value = _ref[attr]; + if (this.attrRenderer[attr]) { + _results.push(this.attrRenderer[attr].apply(this, [value])); + } else { + // eslint-disable-next-line no-void + _results.push(void 0); + } + } + } + return _results; + }; + + DiscussionContentView.prototype.makeWmdEditor = function(classIdentifier) { + if (!this.$el.find('.wmd-panel').length) { + return DiscussionUtil.makeWmdEditor(this.$el, $.proxy(this.$, this), classIdentifier); + } else { + return null; + } + }; + + DiscussionContentView.prototype.getWmdEditor = function(classIdentifier) { + return DiscussionUtil.getWmdEditor(this.$el, $.proxy(this.$, this), classIdentifier); + }; + + DiscussionContentView.prototype.getWmdContent = function(classIdentifier) { + return DiscussionUtil.getWmdContent(this.$el, $.proxy(this.$, this), classIdentifier); + }; + + DiscussionContentView.prototype.setWmdContent = function(classIdentifier, text) { + return DiscussionUtil.setWmdContent(this.$el, $.proxy(this.$, this), classIdentifier, text); + }; + + DiscussionContentView.prototype.initialize = function() { + var self = this; + this.model.bind('change', this.renderPartialAttrs, this); + return this.listenTo(this.model, 'change:endorsed', function() { + if (self.model instanceof Comment) { + self.trigger('comment:endorse'); + } + }); + }; + + return DiscussionContentView; + }(Backbone.View)); + this.DiscussionContentShowView = (function(_super) { + __extends(DiscussionContentShowView, _super); + + function DiscussionContentShowView() { + var self = this; + this.toggleClose = function() { + return DiscussionContentShowView.prototype.toggleClose.apply(self, arguments); + }; + this.toggleReport = function() { + return DiscussionContentShowView.prototype.toggleReport.apply(self, arguments); + }; + this.togglePin = function() { + return DiscussionContentShowView.prototype.togglePin.apply(self, arguments); + }; + this.toggleVote = function() { + return DiscussionContentShowView.prototype.toggleVote.apply(self, arguments); + }; + this.toggleEndorse = function() { + return DiscussionContentShowView.prototype.toggleEndorse.apply(self, arguments); + }; + this.toggleFollow = function() { + return DiscussionContentShowView.prototype.toggleFollow.apply(self, arguments); + }; + this.handleSecondaryActionBlur = function() { + return DiscussionContentShowView.prototype.handleSecondaryActionBlur.apply(self, arguments); + }; + this.handleSecondaryActionEscape = function() { + return DiscussionContentShowView.prototype.handleSecondaryActionEscape.apply(self, arguments); + }; + this.toggleSecondaryActions = function() { + return DiscussionContentShowView.prototype.toggleSecondaryActions.apply(self, arguments); + }; + this.updateButtonState = function() { + return DiscussionContentShowView.prototype.updateButtonState.apply(self, arguments); + }; + return DiscussionContentShowView.__super__.constructor.apply(this, arguments); + } + + DiscussionContentShowView.prototype.events = _.reduce( + [ + ['.action-follow', 'toggleFollow'], + ['.action-answer', 'toggleEndorse'], + ['.action-endorse', 'toggleEndorse'], + ['.action-vote', 'toggleVote'], + ['.action-more', 'toggleSecondaryActions'], + ['.action-pin', 'togglePin'], + ['.action-edit', 'edit'], + ['.action-delete', '_delete'], + ['.action-report', 'toggleReport'], + ['.action-close', 'toggleClose'] + ], + function(obj, event) { + var funcName, selector; + selector = event[0]; + funcName = event[1]; + // eslint-disable-next-line no-shadow + obj['click ' + selector] = function(event) { + return this[funcName](event); + }; + // eslint-disable-next-line no-shadow + obj['keydown ' + selector] = function(event) { + return DiscussionUtil.activateOnSpace(event, this[funcName]); + }; + return obj; + }, + {} + ); + + DiscussionContentShowView.prototype.updateButtonState = function(selector, checked) { + var $button; + $button = this.$(selector); + $button.toggleClass('is-checked', checked); + return $button.attr('aria-checked', checked); + }; + + DiscussionContentShowView.prototype.attrRenderer = $.extend( + {}, + DiscussionContentView.prototype.attrRenderer, + { + subscribed: function(subscribed) { + return this.updateButtonState('.action-follow', subscribed); + }, + endorsed: function(endorsed) { + var $button, selector; + selector = this.model.get('thread').get('thread_type') === 'question' + ? '.action-answer' + : '.action-endorse'; + this.updateButtonState(selector, endorsed); + $button = this.$(selector); + $button.closest('.actions-item').toggleClass('is-hidden', !this.model.canBeEndorsed()); + return $button.toggleClass('is-checked', endorsed); + }, + votes: function(votes) { + var button, numVotes, selector, votesText, votesCountMsg; + selector = '.action-vote'; + this.updateButtonState(selector, window.user.voted(this.model)); + button = this.$el.find(selector); + numVotes = votes.up_count; + votesCountMsg = ngettext( + 'there is currently {numVotes} vote', 'there are currently {numVotes} votes', numVotes + ); + button.find('.js-sr-vote-count').empty().text( + edx.StringUtils.interpolate(votesCountMsg, {numVotes: numVotes}) + ); + votesText = edx.StringUtils.interpolate( + ngettext('{numVotes} Vote', '{numVotes} Votes', numVotes), + {numVotes: numVotes}); + button.find('.vote-count').empty().text(votesText); + this.$el.find('.display-vote .vote-count').empty().text(votesText); + }, + pinned: function(pinned) { + this.updateButtonState('.action-pin', pinned); + return this.$('.post-label-pinned').toggleClass('is-hidden', !pinned); + }, + abuse_flaggers: function() { + var flagged; + flagged = this.model.isFlagged(); + this.updateButtonState('.action-report', flagged); + return this.$('.post-label-reported').toggleClass('is-hidden', !flagged); + }, + closed: function(closed) { + this.updateButtonState('.action-close', closed); + this.$('.post-label-closed').toggleClass('is-hidden', !closed); + return this.$('.display-vote').toggle(closed); + } + } + ); + + DiscussionContentShowView.prototype.toggleSecondaryActions = function(event) { + event.preventDefault(); + event.stopPropagation(); + this.secondaryActionsExpanded = !this.secondaryActionsExpanded; + this.$('.action-more').toggleClass('is-expanded', this.secondaryActionsExpanded); + this.$('.actions-dropdown') + .toggleClass('is-expanded', this.secondaryActionsExpanded) + .attr('aria-expanded', this.secondaryActionsExpanded); + + if (this.secondaryActionsExpanded) { + if (event.type === 'keydown') { + this.$('.action-list-item:first').focus(); + } + $('body').on('click', this.toggleSecondaryActions); + $('body').on('keydown', this.handleSecondaryActionEscape); + return this.$('.action-list-item').on('blur', this.handleSecondaryActionBlur); + } else { + $('body').off('click', this.toggleSecondaryActions); + $('body').off('keydown', this.handleSecondaryActionEscape); + return this.$('.action-list-item').off('blur', this.handleSecondaryActionBlur); + } + }; + + DiscussionContentShowView.prototype.handleSecondaryActionEscape = function(event) { + if (event.keyCode === 27) { + this.toggleSecondaryActions(event); + this.$('.action-more').focus(); + } + }; + + DiscussionContentShowView.prototype.handleSecondaryActionBlur = function(event) { + var self = this; + return setTimeout(function() { + if (self.secondaryActionsExpanded && self.$('.actions-dropdown :focus').length === 0) { + self.toggleSecondaryActions(event); + } + }, 10); + }; + + DiscussionContentShowView.prototype.toggleFollow = function(event) { + var isSubscribing, msg, url; + event.preventDefault(); + isSubscribing = !this.model.get('subscribed'); + url = this.model.urlFor(isSubscribing ? 'follow' : 'unfollow'); + if (isSubscribing) { + msg = gettext('You could not be subscribed to this post. Refresh the page and try again.'); + } else { + msg = gettext('You could not be unsubscribed from this post. Refresh the page and try again.'); + } + return DiscussionUtil.updateWithUndo(this.model, { + subscribed: isSubscribing + }, { + url: url, + type: 'POST', + $elem: $(event.currentTarget) + }, msg); + }; + + DiscussionContentShowView.prototype.toggleEndorse = function(event) { + var isEndorsing, msg, updates, url, + self = this; + event.preventDefault(); + isEndorsing = !this.model.get('endorsed'); + url = this.model.urlFor('endorse'); + updates = { + endorsed: isEndorsing, + endorsement: isEndorsing ? { + username: DiscussionUtil.getUser().get('username'), + user_id: DiscussionUtil.getUser().id, + time: new Date().toISOString() + } : null + }; + if (this.model.get('thread').get('thread_type') === 'question') { + if (isEndorsing) { + msg = gettext('This response could not be marked as an answer. Refresh the page and try again.'); // eslint-disable-line max-len + } else { + msg = gettext('This response could not be unmarked as an answer. Refresh the page and try again.'); // eslint-disable-line max-len + } + } else { + if (isEndorsing) { + msg = gettext('This response could not be marked as endorsed. Refresh the page and try again.'); + } else { + msg = gettext('This response could not be unendorsed. Refresh the page and try again.'); + } + } + return DiscussionUtil.updateWithUndo( + this.model, + updates, + { + url: url, + type: 'POST', + data: {endorsed: isEndorsing}, + $elem: $(event.currentTarget) + }, + msg, + function() { return self.trigger('comment:endorse'); } + ).always(this.trigger('comment:endorse')); + }; + + DiscussionContentShowView.prototype.toggleVote = function(event) { + var isVoting, updates, url, user, + self = this; + event.preventDefault(); + user = DiscussionUtil.getUser(); + isVoting = !user.voted(this.model); + url = this.model.urlFor(isVoting ? 'upvote' : 'unvote'); + updates = { + upvoted_ids: (isVoting ? _.union : _.difference)(user.get('upvoted_ids'), [this.model.id]) + }; + if (!$(event.target.closest('.actions-item')).hasClass('is-disabled')) { + return DiscussionUtil.updateWithUndo(user, updates, { + url: url, + type: 'POST', + $elem: $(event.currentTarget) + }, gettext('This vote could not be processed. Refresh the page and try again.')).done(function() { + if (isVoting) { + return self.model.vote(); + } else { + return self.model.unvote(); + } + }); + } + }; + + DiscussionContentShowView.prototype.togglePin = function(event) { + var isPinning, msg, url; + event.preventDefault(); + isPinning = !this.model.get('pinned'); + url = this.model.urlFor(isPinning ? 'pinThread' : 'unPinThread'); + if (isPinning) { + msg = gettext('This post could not be pinned. Refresh the page and try again.'); + } else { + msg = gettext('This post could not be unpinned. Refresh the page and try again.'); + } + return DiscussionUtil.updateWithUndo(this.model, { + pinned: isPinning + }, { + url: url, + type: 'POST', + $elem: $(event.currentTarget) + }, msg); + }; + + DiscussionContentShowView.prototype.toggleReport = function(event) { + var isFlagging, msg, updates, url; + event.preventDefault(); + if (this.model.isFlagged()) { + isFlagging = false; + msg = gettext('This post could not be flagged for abuse. Refresh the page and try again.'); + } else { + isFlagging = true; + msg = gettext('This post could not be unflagged for abuse. Refresh the page and try again.'); + } + url = this.model.urlFor(isFlagging ? 'flagAbuse' : 'unFlagAbuse'); + updates = { + abuse_flaggers: (isFlagging ? _.union : _.difference)( + this.model.get('abuse_flaggers'), [DiscussionUtil.getUser().id] + ) + }; + return DiscussionUtil.updateWithUndo(this.model, updates, { + url: url, + type: 'POST', + $elem: $(event.currentTarget) + }, msg); + }; + + DiscussionContentShowView.prototype.toggleClose = function(event) { + var isClosing, msg, updates; + event.preventDefault(); + isClosing = !this.model.get('closed'); + if (isClosing) { + msg = gettext('This post could not be closed. Refresh the page and try again.'); + } else { + msg = gettext('This post could not be reopened. Refresh the page and try again.'); + } + updates = { + closed: isClosing + }; + return DiscussionUtil.updateWithUndo(this.model, updates, { + url: this.model.urlFor('close'), + type: 'POST', + data: updates, + $elem: $(event.currentTarget) + }, msg); + }; + + DiscussionContentShowView.prototype.getAuthorDisplay = function() { + return _.template($('#post-user-display-template').html())({ + username: this.model.get('username') || null, + user_url: this.model.get('user_url'), + is_community_ta: this.model.get('community_ta_authored'), + is_staff: this.model.get('staff_authored') + }); + }; + + DiscussionContentShowView.prototype.getEndorserDisplay = function() { + var endorsement; + endorsement = this.model.get('endorsement'); + if (endorsement && endorsement.username) { + return _.template($('#post-user-display-template').html())({ + username: endorsement.username, + user_url: DiscussionUtil.urlFor('user_profile', endorsement.user_id), + is_community_ta: DiscussionUtil.isTA(endorsement.user_id) + || DiscussionUtil.isGroupTA(endorsement.user_id), + is_staff: DiscussionUtil.isStaff(endorsement.user_id) + }); + } else { + return null; + } + }; + + return DiscussionContentShowView; + }).call(this, this.DiscussionContentView); + } +}).call(window); diff --git a/xblocks_contrib/discussion/static/js/common/views/discussion_inline_view.js b/xblocks_contrib/discussion/static/js/common/views/discussion_inline_view.js new file mode 100644 index 00000000..7d87a69b --- /dev/null +++ b/xblocks_contrib/discussion/static/js/common/views/discussion_inline_view.js @@ -0,0 +1,256 @@ +/* globals + _, Backbone, Content, Discussion, DiscussionUtil, DiscussionUser, DiscussionCourseSettings, + DiscussionThreadListView, DiscussionThreadView, NewPostView + */ + +(function() { + 'use strict'; + + this.DiscussionInlineView = Backbone.View.extend({ + events: { + 'click .discussion-show': 'toggleDiscussion', + 'keydown .discussion-show': function(event) { + return DiscussionUtil.activateOnSpace(event, this.toggleDiscussion); + }, + 'click .new-post-btn': 'toggleNewPost', + 'click .all-posts-btn': 'navigateToAllPosts', + keydown: 'handleKeydown', + 'keydown .new-post-btn': function(event) { + return DiscussionUtil.activateOnSpace(event, this.toggleNewPost); + } + }, + + page_re: /\?discussion_page=(\d+)/, + + initialize: function(options) { + var match; + this.$el = options.el; + this.readOnly = options.readOnly; + this.toggleDiscussionBtn = this.$('.discussion-show'); + this.listenTo(this.model, 'change', this.render); + this.escKey = 27; + + if (options.startHeader !== undefined) { + this.startHeader = options.startHeader; + } else { + this.startHeader = 4; // Start the header levels at H + } + + match = this.page_re.exec(window.location.href); + if (match) { + this.page = parseInt(match[1], 10); + } else { + this.page = 1; + } + + this.defaultSortKey = 'activity'; + this.defaultSortOrder = 'desc'; + // discussions are open by default + this.toggleDiscussion(); + }, + + loadDiscussions: function($elem, error) { + var discussionId = this.$el.data('discussion-id'), + url = DiscussionUtil.urlFor('retrieve_discussion', discussionId) + ('?page=' + this.page) + + ('&sort_key=' + this.defaultSortKey) + ('&sort_order=' + this.defaultSortOrder), + self = this; + + DiscussionUtil.safeAjax({ + $elem: this.$el, + $loading: this.$el, + takeFocus: false, + url: url, + type: 'GET', + dataType: 'json', + success: function(response, textStatus) { + self.renderDiscussion(self.$el, response, textStatus, discussionId); + }, + error: error + }); + }, + + renderDiscussion: function($elem, response, textStatus, discussionId) { + var discussionHtml, + user = new DiscussionUser(response.user_info), + self = this; + $elem.focus(); + + window.user = user; + DiscussionUtil.setUser(user); + Content.loadContentInfos(response.annotated_content_info); + DiscussionUtil.loadRoles(response.roles); + + this.courseSettings = new DiscussionCourseSettings(response.course_settings); + this.is_commentable_divided = response.is_commentable_divided; + + this.discussion = new Discussion(undefined, {pages: response.num_pages}); + this.discussion.reset(response.discussion_data, { + silent: false + }); + + discussionHtml = edx.HtmlUtils.template($('#inline-discussion-template').html())({ + threads: response.discussion_data, + read_only: this.readOnly, + discussionId: discussionId + }); + + if (this.$('section.discussion').length) { + edx.HtmlUtils.setHtml(this.$el, discussionHtml); + this.$('section.discussion').replaceWith(edx.HtmlUtils.ensureHtml(discussionHtml).toString()); + } else { + edx.HtmlUtils.append(this.$el, discussionHtml); + } + + this.threadListView = new DiscussionThreadListView({ + el: this.$('.inline-threads'), + collection: self.discussion, + courseSettings: self.courseSettings + }); + + this.threadListView.render(); + + this.threadListView.on('thread:selected', _.bind(this.navigateToThread, this)); + + DiscussionUtil.bulkUpdateContentInfo(window.$$annotated_content_info); + + this.newPostForm = this.$el.find('.new-post-article'); + + this.newPostView = new NewPostView({ + el: this.newPostForm, + collection: this.discussion, + course_settings: this.courseSettings, + topicId: discussionId, + startHeader: this.startHeader, + is_commentable_divided: response.is_commentable_divided, + user_group_id: response.user_group_id + }); + + this.newPostView.render(); + + this.listenTo(this.newPostView, 'newPost:createPost', this.onNewPostCreated); + this.listenTo(this.newPostView, 'newPost:cancel', this.hideNewPost); + this.discussion.on('add', this.addThread); + + this.retrieved = true; + this.showed = true; + + if (this.isWaitingOnNewPost) { + this.newPostForm.removeClass('is-hidden').focus(); + } + + // Hide the thread view initially + this.$('.inline-thread').addClass('is-hidden'); + }, + + navigateToThread: function(threadId) { + var thread = this.discussion.get(threadId); + this.threadView = new DiscussionThreadView({ + el: this.$('.forum-content'), + model: thread, + mode: 'inline', + startHeader: this.startHeader, + courseSettings: this.courseSettings, + is_commentable_divided: this.is_commentable_divided + }); + this.threadView.render(); + this.listenTo(this.threadView.showView, 'thread:_delete', this.navigateToAllPosts); + this.$(".forum-nav-thread[data-id='" + threadId + "']").removeClass('never-read'); + this.threadListView.$el.addClass('is-hidden'); + this.$('.inline-thread').removeClass('is-hidden'); + }, + + navigateToAllPosts: function() { + // Hide the inline thread section + this.$('.inline-thread').addClass('is-hidden'); + + // Delete the thread view + if (this.threadView) { + this.threadView.$el.empty().off(); + this.threadView.stopListening(); + this.threadView = null; + } + + // Show the thread list view + this.threadListView.$el.removeClass('is-hidden'); + + // Set focus to thread list item that was saved as active + this.threadListView.$('.is-active').focus(); + }, + + hideDiscussion: function() { + this.$('section.discussion').addClass('is-hidden'); + this.toggleDiscussionBtn.removeClass('shown'); + this.toggleDiscussionBtn.find('.button-text').text(gettext('Show Discussion')); + this.showed = false; + }, + + toggleDiscussion: function() { + var self = this; + if (this.showed) { + this.hideDiscussion(); + } else { + this.toggleDiscussionBtn.addClass('shown'); + this.toggleDiscussionBtn.find('.button-text').text(gettext('Hide Discussion')); + if (this.retrieved) { + this.$('section.discussion').removeClass('is-hidden'); + this.showed = true; + } else { + this.loadDiscussions(this.$el, function(request) { + if (request.status === 403 && request.responseText) { + DiscussionUtil.discussionAlert( + gettext('Warning'), + request.responseText + ); + self.$el.text(request.responseText); + self.showed = true; + } else { + self.hideDiscussion(); + DiscussionUtil.discussionAlert( + gettext('Error'), + gettext('This discussion could not be loaded. Refresh the page and try again.') + ); + } + }); + } + } + }, + + toggleNewPost: function(event) { + event.preventDefault(); + if (!this.newPostForm) { + this.toggleDiscussion(); + this.isWaitingOnNewPost = true; + return; + } + if (this.showed) { + this.$('section.discussion').find('.inline-discussion-thread-container').addClass('is-hidden'); + this.$('section.discussion').find('.add_post_btn_container').addClass('is-hidden'); + this.newPostForm.removeClass('is-hidden'); + } + this.newPostView.$el.removeClass('is-hidden'); + this.toggleDiscussionBtn.addClass('shown'); + this.toggleDiscussionBtn.find('.button-text').text(gettext('Hide Discussion')); + this.showed = true; + }, + + onNewPostCreated: function() { + this.navigateToAllPosts(); + this.hideNewPost(); + }, + + hideNewPost: function() { + this.$('section.discussion').find('.inline-discussion-thread-container').removeClass('is-hidden'); + this.$('section.discussion').find('.add_post_btn_container') + .removeClass('is-hidden') + .focus(); + this.newPostForm.addClass('is-hidden'); + }, + + handleKeydown: function(event) { + var keyCode = event.keyCode; + if (keyCode === this.escKey) { + this.$('section.discussion').find('.cancel').trigger('click'); + } + } + }); +}).call(window); diff --git a/xblocks_contrib/discussion/static/js/common/views/discussion_thread_edit_view.js b/xblocks_contrib/discussion/static/js/common/views/discussion_thread_edit_view.js new file mode 100644 index 00000000..29378548 --- /dev/null +++ b/xblocks_contrib/discussion/static/js/common/views/discussion_thread_edit_view.js @@ -0,0 +1,121 @@ +/* globals DiscussionTopicMenuView, DiscussionUtil */ +(function() { + 'use strict'; + + if (Backbone) { + this.DiscussionThreadEditView = Backbone.View.extend({ + tagName: 'form', + events: { + submit: 'updateHandler', + 'click .post-cancel': 'cancelHandler', + 'keypress input:not(.wmd-input)': function(event) { + return DiscussionUtil.ignoreEnterKey(event); + } + }, + + attributes: { + class: 'discussion-post edit-post-form' + }, + + initialize: function(options) { + this.container = options.container || $('.thread-content-wrapper'); + this.mode = options.mode || 'inline'; + this.startHeader = options.startHeader; + this.course_settings = options.course_settings; + this.threadType = this.model.get('thread_type'); + this.topicId = this.model.get('commentable_id'); + this.context = options.context || 'course'; + _.bindAll(this, 'updateHandler', 'cancelHandler'); + return this; + }, + + render: function() { + var formId = _.uniqueId('form-'), + threadTypeTemplate = edx.HtmlUtils.template($('#thread-type-template').html()), + $threadTypeSelector = $(threadTypeTemplate({form_id: formId}).toString()), + context, + mainTemplate = edx.HtmlUtils.template($('#thread-edit-template').html()); + context = $.extend({mode: this.mode, startHeader: this.startHeader}, this.model.attributes); + edx.HtmlUtils.setHtml(this.$el, mainTemplate(context)); + this.container.append(this.$el); + this.$submitBtn = this.$('.post-update'); + this.addField($threadTypeSelector); + this.$('#' + formId + '-post-type-' + this.threadType).attr('checked', true); + // Only allow the topic field for course threads, as standalone threads + // cannot be moved. + if (this.isTabMode()) { + this.topicView = new DiscussionTopicMenuView({ + topicId: this.topicId, + course_settings: this.course_settings + }); + this.addField(this.topicView.render()); + } + DiscussionUtil.makeWmdEditor(this.$el, $.proxy(this.$, this), 'edit-post-body'); + return this; + }, + + addField: function($fieldView) { + this.$('.forum-edit-post-form-wrapper').append($fieldView); + return this; + }, + + isTabMode: function() { + return this.mode === 'tab'; + }, + + save: function() { + var title = this.$('.edit-post-title').val(), + threadType = this.$('.input-radio:checked').val(), + body = this.$('.edit-post-body textarea').val(), + postData = { + title: title, + thread_type: threadType, + body: body + }; + if (this.topicView) { + postData.commentable_id = this.topicView.getCurrentTopicId(); + } + + return DiscussionUtil.safeAjax({ + $elem: this.$submitBtn, + $loading: this.$submitBtn, + url: DiscussionUtil.urlFor('update_thread', this.model.id), + type: 'POST', + dataType: 'json', + data: postData, + error: DiscussionUtil.formErrorHandler(this.$('.post-errors')), + success: function() { + this.$('.edit-post-title').val('').attr('prev-text', ''); + this.$('.edit-post-body textarea').val('').attr('prev-text', ''); + this.$('.wmd-preview p').html(''); + if (this.topicView) { + postData.courseware_title = this.topicView.getFullTopicName(); + } + this.model.set(postData).unset('abbreviatedBody'); + this.trigger('thread:updated'); + if (this.threadType !== threadType) { + this.model.set('thread_type', threadType); + this.model.trigger('thread:thread_type_updated'); + this.trigger('comment:endorse'); + } + }.bind(this) + }); + }, + + updateHandler: function(event) { + event.preventDefault(); + // this event is for the moment triggered and used nowhere. + this.trigger('thread:update', event); + this.save(); + return this; + }, + + cancelHandler: function(event) { + event.preventDefault(); + this.trigger('thread:cancel_edit', event); + this.remove(); + return this; + } + }); + } +}).call(window); diff --git a/xblocks_contrib/discussion/static/js/common/views/discussion_thread_list_view.js b/xblocks_contrib/discussion/static/js/common/views/discussion_thread_list_view.js new file mode 100644 index 00000000..9202db53 --- /dev/null +++ b/xblocks_contrib/discussion/static/js/common/views/discussion_thread_list_view.js @@ -0,0 +1,621 @@ +/* globals _, Backbone, Content, Discussion, DiscussionUtil, DiscussionThreadView, DiscussionThreadListView */ +(function() { + 'use strict'; + + /* eslint-disable */ + var __hasProp = {}.hasOwnProperty, + __extends = function(child, parent) { + for (var key in parent) { + if (__hasProp.call(parent, key)) { + child[key] = parent[key]; + } + } + function ctor() { + this.constructor = child; + } + + ctor.prototype = parent.prototype; + child.prototype = new ctor(); + child.__super__ = parent.prototype; + return child; + }; + /* eslint-enable */ + + if (typeof Backbone !== 'undefined' && Backbone !== null) { + this.DiscussionThreadListView = (function(_super) { + __extends(DiscussionThreadListView, _super); + + function DiscussionThreadListView() { + var self = this; + this.updateEmailNotifications = function() { + return DiscussionThreadListView.prototype.updateEmailNotifications.apply(self, arguments); + }; + this.retrieveFollowed = function() { + return DiscussionThreadListView.prototype.retrieveFollowed.apply(self, arguments); + }; + this.chooseGroup = function() { + return DiscussionThreadListView.prototype.chooseGroup.apply(self, arguments); + }; + this.chooseFilter = function() { + return DiscussionThreadListView.prototype.chooseFilter.apply(self, arguments); + }; + this.threadRemoved = function() { + return DiscussionThreadListView.prototype.threadRemoved.apply(self, arguments); + }; + this.threadSelected = function() { + return DiscussionThreadListView.prototype.threadSelected.apply(self, arguments); + }; + this.renderThread = function() { + return DiscussionThreadListView.prototype.renderThread.apply(self, arguments); + }; + this.loadMorePages = function() { + return DiscussionThreadListView.prototype.loadMorePages.apply(self, arguments); + }; + this.showMetadataAccordingToSort = function() { + return DiscussionThreadListView.prototype.showMetadataAccordingToSort.apply(self, arguments); + }; + this.renderThreads = function() { + return DiscussionThreadListView.prototype.renderThreads.apply(self, arguments); + }; + this.addAndSelectThread = function() { + return DiscussionThreadListView.prototype.addAndSelectThread.apply(self, arguments); + }; + this.reloadDisplayedCollection = function() { + return DiscussionThreadListView.prototype.reloadDisplayedCollection.apply(self, arguments); + }; + this.clearSearchAlerts = function() { + return DiscussionThreadListView.prototype.clearSearchAlerts.apply(self, arguments); + }; + this.removeSearchAlert = function() { + return DiscussionThreadListView.prototype.removeSearchAlert.apply(self, arguments); + }; + this.addSearchAlert = function() { + return DiscussionThreadListView.prototype.addSearchAlert.apply(self, arguments); + }; + this.performSearch = function() { + return DiscussionThreadListView.prototype.performSearch.apply(self, arguments); + }; + return DiscussionThreadListView.__super__.constructor.apply(this, arguments); // eslint-disable-line no-underscore-dangle, max-len + } + + DiscussionThreadListView.prototype.events = { + 'keypress .forum-nav-browse-filter-input': function(event) { + return DiscussionUtil.ignoreEnterKey(event); + }, + 'change .forum-nav-sort-control': 'sortThreads', + 'click .forum-nav-thread-link': 'threadSelected', + 'click .forum-nav-load-more-link': 'loadMorePages', + 'change .forum-nav-filter-main-control': 'chooseFilter', + 'change .forum-nav-filter-cohort-control': 'chooseGroup' + }; + + DiscussionThreadListView.prototype.initialize = function(options) { + var self = this; + this.courseSettings = options.courseSettings; + this.supportsActiveThread = options.supportsActiveThread; + this.hideReadState = options.hideReadState || false; + this.displayedCollection = new Discussion(this.collection.models, { + pages: this.collection.pages + }); + this.collection.on('change', this.reloadDisplayedCollection); + this.discussionIds = this.$el.data('discussion-id') || ''; + this.collection.on('reset', function(discussion) { + self.displayedCollection.current_page = discussion.current_page; + self.displayedCollection.pages = discussion.pages; + return self.displayedCollection.reset(discussion.models); + }); + this.collection.on('add', this.addAndSelectThread); + this.collection.on('thread:remove', this.threadRemoved); + this.sidebar_padding = 10; + this.boardName = null; + this.current_search = ''; + this.mode = options.mode || 'commentables'; + this.showThreadPreview = true; + this.searchAlertCollection = new Backbone.Collection([], { + model: Backbone.Model + }); + this.searchAlertCollection.on('add', function(searchAlert) { + var content; + content = edx.HtmlUtils.template($('#search-alert-template').html())({ + messageHtml: searchAlert.attributes.message, + cid: searchAlert.cid, + css_class: searchAlert.attributes.css_class + }); + edx.HtmlUtils.append(self.$('.search-alerts'), content); + return self.$('#search-alert-' + searchAlert.cid + ' .dismiss') + .bind('click', searchAlert, function(event) { + return self.removeSearchAlert(event.data.cid); + }); + }); + this.searchAlertCollection.on('remove', function(searchAlert) { + return self.$('#search-alert-' + searchAlert.cid).remove(); + }); + this.searchAlertCollection.on('reset', function() { + return self.$('.search-alerts').empty(); + }); + this.template = edx.HtmlUtils.template($('#thread-list-template').html()); + this.threadListItemTemplate = edx.HtmlUtils.template($('#thread-list-item-template').html()); + }; + + /** + * Creates search alert model and adds it to collection + * @param message - alert message + * @param cssClass - Allows setting custom css class for a message. This can be used to style messages + * of different types differently (i.e. other background, completely hide, etc.) + * @returns {Backbone.Model} + */ + DiscussionThreadListView.prototype.addSearchAlert = function(message, cssClass) { + var searchAlertModel = new Backbone.Model({message: message, css_class: cssClass || ''}); + this.searchAlertCollection.add(searchAlertModel); + return searchAlertModel; + }; + + DiscussionThreadListView.prototype.removeSearchAlert = function(searchAlert) { + return this.searchAlertCollection.remove(searchAlert); + }; + + DiscussionThreadListView.prototype.clearSearchAlerts = function() { + return this.searchAlertCollection.reset(); + }; + + DiscussionThreadListView.prototype.reloadDisplayedCollection = function(thread) { + var active, $content, $currentElement, threadId; + this.clearSearchAlerts(); + threadId = thread.get('id'); + $content = this.renderThread(thread); + $currentElement = this.$('.forum-nav-thread[data-id=' + threadId + ']'); + active = $currentElement.has('.forum-nav-thread-link.is-active').length !== 0; + $currentElement.replaceWith($content); + this.showMetadataAccordingToSort(); + if (this.supportsActiveThread && active) { + this.setActiveThread(threadId); + } + }; + + /* + TODO fix this entire chain of events + */ + + DiscussionThreadListView.prototype.addAndSelectThread = function(thread) { + var commentableId = thread.get('commentable_id'), + self = this; + return this.retrieveDiscussion(commentableId, function() { + return self.trigger('thread:created', thread.get('id')); + }); + }; + + DiscussionThreadListView.prototype.ignoreClick = function(event) { + return event.stopPropagation(); + }; + + DiscussionThreadListView.prototype.render = function() { + var self = this; + this.timer = 0; + this.$el.empty(); + edx.HtmlUtils.append( + this.$el, + this.template({ + isDiscussionDivisionEnabled: this.courseSettings.get('is_discussion_division_enabled'), + isPrivilegedUser: DiscussionUtil.isPrivilegedUser() + }) + ); + if (this.hideReadState) { + this.$('.forum-nav-filter-main').addClass('is-hidden'); + } + this.$('.forum-nav-sort-control option').removeProp('selected'); + this.$('.forum-nav-sort-control option[value=' + this.collection.sort_preference + ']') + .prop('selected', true); + this.displayedCollection.on('reset', this.renderThreads); + this.displayedCollection.on('thread:remove', this.renderThreads); + this.displayedCollection.on('change:commentable_id', function() { + if (self.mode === 'commentables') { + self.retrieveDiscussions(self.discussionIds.split(',')); + } + }); + this.renderThreads(); + return this; + }; + + DiscussionThreadListView.prototype.renderThreads = function() { + var $content, thread, i, len; + this.$('.forum-nav-thread-list').empty(); + for (i = 0, len = this.displayedCollection.models.length; i < len; i++) { + thread = this.displayedCollection.models[i]; + $content = this.renderThread(thread); + this.$('.forum-nav-thread-list').append($content); + } + if (this.$('.forum-nav-thread-list li').length === 0) { + this.clearSearchAlerts(); + this.addSearchAlert(gettext('There are no posts in this topic yet.')); + } + this.showMetadataAccordingToSort(); + this.renderMorePages(); + this.trigger('threads:rendered'); + }; + + DiscussionThreadListView.prototype.showMetadataAccordingToSort = function() { + var voteCounts = this.$('.forum-nav-thread-votes-count'), + unreadCommentCounts = this.$('.forum-nav-thread-unread-comments-count'), + commentCounts = this.$('.forum-nav-thread-comments-count'); + voteCounts.hide(); + commentCounts.hide(); + unreadCommentCounts.hide(); + switch (this.$('.forum-nav-sort-control').val()) { + case 'votes': + voteCounts.show(); + break; + default: + unreadCommentCounts.show(); + commentCounts.show(); + } + }; + + DiscussionThreadListView.prototype.renderMorePages = function() { + if (this.displayedCollection.hasMorePages()) { + edx.HtmlUtils.append( + this.$('.forum-nav-thread-list'), + edx.HtmlUtils.template($('#nav-load-more-link').html())({}) + ); + } + }; + + DiscussionThreadListView.prototype.getLoadingContent = function(srText) { + return edx.HtmlUtils.template($('#nav-loading-template').html())({srText: srText}); + }; + + DiscussionThreadListView.prototype.loadMorePages = function(event) { + var error, lastThread, loadMoreElem, loadingElem, options, ref, + self = this; + if (event) { + event.preventDefault(); + } + loadMoreElem = this.$('.forum-nav-load-more'); + loadMoreElem.empty(); + edx.HtmlUtils.append(loadMoreElem, this.getLoadingContent(gettext('Loading more threads'))); + loadingElem = loadMoreElem.find('.forum-nav-loading'); + DiscussionUtil.makeFocusTrap(loadingElem); + loadingElem.focus(); + options = { + filter: this.filter + }; + switch (this.mode) { + case 'search': + options.search_text = this.current_search; + if (this.group_id) { + options.group_id = this.group_id; + } + break; + case 'followed': + options.user_id = window.user.id; + break; + case 'user': + options.user_id = this.$el.parent().data('user-id'); + break; + case 'commentables': + options.commentable_ids = this.discussionIds; + if (this.group_id) { + options.group_id = this.group_id; + } + break; + case 'all': + if (this.group_id) { + options.group_id = this.group_id; + } + break; + default: + } + ref = this.collection.last(); + // eslint-disable-next-line no-void + lastThread = ref ? ref.get('id') : void 0; + if (lastThread) { + this.once('threads:rendered', function() { + var classSelector = ".forum-nav-thread[data-id='" + lastThread + "'] + .forum-nav-thread " + + '.forum-nav-thread-link'; + return $(classSelector).focus(); + }); + } else { + this.once('threads:rendered', function() { + var ref1 = $('.forum-nav-thread-link').first(); + // eslint-disable-next-line no-void + return ref1 ? ref1.focus() : void 0; + }); + } + error = function() { + self.renderThreads(); + DiscussionUtil.discussionAlert( + gettext('Error'), + gettext('Additional posts could not be loaded. Refresh the page and try again.') + ); + }; + /* + The options object is being passed to the function below from discussion/discussion.js + which correspondingly forms the ajax url based on the mode via the DiscussionUtil.urlFor + from discussion/utils.js + */ + return this.collection.retrieveAnotherPage(this.mode, options, { + sort_key: this.$('.forum-nav-sort-control').val() + }, error); + }; + + DiscussionThreadListView.prototype.containsMarkup = function(threadBody) { + var imagePostSearchString = '![', + mathJaxSearchString = /\$/g, + containsImages = threadBody.indexOf(imagePostSearchString) !== -1, + // mathJax has to have at least 2 dollar signs + containsMathJax = (threadBody.match(mathJaxSearchString) || []).length > 1; + return containsImages || containsMathJax; + }; + + DiscussionThreadListView.prototype.renderThread = function(thread) { + var threadCommentCount = thread.get('comments_count'), + threadUnreadCommentCount = thread.get('unread_comments_count'), + neverRead = !thread.get('read') && threadUnreadCommentCount === threadCommentCount, + threadPreview = this.containsMarkup(thread.get('body')) ? '' : thread.get('body'), + context = _.extend( + { + neverRead: neverRead, + threadUrl: thread.urlFor('retrieve'), + threadPreview: threadPreview, + showThreadPreview: this.showThreadPreview, + hideReadState: this.hideReadState + }, + thread.toJSON() + ); + var $threadHTML = $(this.threadListItemTemplate(context).toString()); + var previewBody = $threadHTML.find('.thread-preview-body').text(); + previewBody = new DOMParser().parseFromString(previewBody, 'text/html').documentElement.textContent; + $threadHTML.find('.thread-preview-body').text(previewBody); + return $threadHTML; + }; + + DiscussionThreadListView.prototype.threadSelected = function(e) { + var threadId; + threadId = $(e.target).closest('.forum-nav-thread').attr('data-id'); + if (this.supportsActiveThread) { + this.setActiveThread(threadId); + } + this.trigger('thread:selected', threadId); + return false; + }; + + DiscussionThreadListView.prototype.threadRemoved = function(thread) { + this.trigger('thread:removed', thread); + }; + + DiscussionThreadListView.prototype.setActiveThread = function(threadId) { + var $srElem; + this.$('.forum-nav-thread-link').find('.sr').remove(); + this.$(".forum-nav-thread[data-id!='" + threadId + "'] .forum-nav-thread-link") + .removeClass('is-active'); + $srElem = edx.HtmlUtils.joinHtml( + edx.HtmlUtils.HTML(''), + edx.HtmlUtils.ensureHtml(gettext('Current conversation')), + edx.HtmlUtils.HTML('') + ).toString(); + this.$(".forum-nav-thread[data-id='" + threadId + "'] .forum-nav-thread-link") + .addClass('is-active').find('.forum-nav-thread-wrapper-1') + .prepend($srElem); + }; + + DiscussionThreadListView.prototype.selectTopic = function($target) { + var allItems, discussionIds, $item; + $item = $target.closest('.forum-nav-browse-menu-item'); + + if ($item.hasClass('forum-nav-browse-menu-all')) { + this.discussionIds = ''; + this.$('.forum-nav-filter-cohort').show(); + return this.retrieveAllThreads(); + } else if ($item.hasClass('forum-nav-browse-menu-following')) { + this.retrieveFollowed(); + return this.$('.forum-nav-filter-cohort').hide(); + } else { + allItems = $item.find('.forum-nav-browse-menu-item').andSelf(); + discussionIds = allItems.filter('[data-discussion-id]').map(function(i, elem) { + return $(elem).data('discussion-id'); + }).get(); + this.retrieveDiscussions(discussionIds); + return this.$('.forum-nav-filter-cohort').toggle($item.data('divided') === true); + } + }; + + DiscussionThreadListView.prototype.chooseFilter = function() { + this.filter = $('.forum-nav-filter-main-control :selected').val(); + this.clearSearchAlerts(); + return this.retrieveFirstPage(); + }; + + DiscussionThreadListView.prototype.chooseGroup = function() { + this.group_id = this.$('.forum-nav-filter-cohort-control :selected').val(); + return this.retrieveFirstPage(); + }; + + DiscussionThreadListView.prototype.retrieveDiscussion = function(discussionId, callback) { + var url = DiscussionUtil.urlFor('retrieve_discussion', discussionId), + self = this; + return DiscussionUtil.safeAjax({ + url: url, + type: 'GET', + success: function(response) { + self.collection.current_page = response.page; + self.collection.pages = response.num_pages; + self.collection.reset(response.discussion_data); + Content.loadContentInfos(response.annotated_content_info); + self.displayedCollection.reset(self.collection.models); + if (callback) { + callback(); + } + } + }); + }; + + DiscussionThreadListView.prototype.retrieveDiscussions = function(discussionIds) { + this.discussionIds = discussionIds.join(','); + this.mode = 'commentables'; + return this.retrieveFirstPage(); + }; + + DiscussionThreadListView.prototype.retrieveAllThreads = function() { + this.mode = 'all'; + return this.retrieveFirstPage(); + }; + + DiscussionThreadListView.prototype.retrieveFirstPage = function(event) { + this.collection.current_page = 0; + this.$('.forum-nav-thread-list').empty(); + this.collection.models = []; + return this.loadMorePages(event); + }; + + DiscussionThreadListView.prototype.sortThreads = function(event) { + this.displayedCollection.setSortComparator(this.$('.forum-nav-sort-control').val()); + return this.retrieveFirstPage(event); + }; + + DiscussionThreadListView.prototype.performSearch = function($searchInput) { + // trigger this event so the breadcrumbs can update as well + this.trigger('search:initiated'); + this.searchFor($searchInput.val(), $searchInput); + }; + + DiscussionThreadListView.prototype.searchFor = function(text, $searchInput) { + var url = DiscussionUtil.urlFor('search'), + self = this; + this.clearSearchAlerts(); + this.clearFilters(); + this.mode = 'search'; + this.current_search = text; + /* + TODO: This might be better done by setting discussion.current_page=0 and + calling discussion.loadMorePages + Mainly because this currently does not reset any pagination variables which could cause problems. + This doesn't use pagination either. + */ + + return DiscussionUtil.safeAjax({ + $elem: $searchInput, + data: { + text: text + }, + url: url, + type: 'GET', + dataType: 'json', + $loading: $, + loadingCallback: function() { + var element = self.$('.forum-nav-thread-list'); + element.empty(); + edx.HtmlUtils.append( + element, + edx.HtmlUtils.joinHtml( + edx.HtmlUtils.HTML("
  • "), + self.getLoadingContent(gettext('Loading posts list')), + edx.HtmlUtils.HTML('
    • ') + ) + ); + }, + loadedCallback: function() { + return self.$('.forum-nav-thread-list .forum-nav-load-more').remove(); + }, + success: function(response, textStatus) { + var message, noResponseMsg; + if (textStatus === 'success') { + self.collection.reset(response.discussion_data); + self.clearSearchAlerts(); + Content.loadContentInfos(response.annotated_content_info); + self.collection.current_page = response.page; + self.collection.pages = response.num_pages; + if (!_.isNull(response.corrected_text)) { + noResponseMsg = _.escape( + gettext( + 'No results found for {original_query}. ' + + 'Showing results for {suggested_query}.' + ) + ); + message = edx.HtmlUtils.interpolateHtml( + noResponseMsg, + { + original_query: edx.HtmlUtils.joinHtml( + edx.HtmlUtils.HTML(''), text, edx.HtmlUtils.HTML('') + ), + suggested_query: edx.HtmlUtils.joinHtml( + edx.HtmlUtils.HTML(''), + response.corrected_text, + edx.HtmlUtils.HTML('') + ) + } + ); + self.addSearchAlert(message); + } else if (response.discussion_data.length === 0) { + self.addSearchAlert(gettext('No posts matched your query.')); + self.displayedCollection.models = []; + } + if (self.collection.models.length !== 0) { + self.displayedCollection.reset(self.collection.models); + } + if (text) { + return self.searchForUser(text); + } + } + return response; + } + }); + }; + + DiscussionThreadListView.prototype.searchForUser = function(text) { + var self = this; + return DiscussionUtil.safeAjax({ + data: { + username: text + }, + url: DiscussionUtil.urlFor('users'), + type: 'GET', + dataType: 'json', + error: function() {}, + success: function(response) { + var message, username; + if (response.users.length > 0) { + username = edx.HtmlUtils.joinHtml( + edx.HtmlUtils.interpolateHtml( + edx.HtmlUtils.HTML('    '), + {url: DiscussionUtil.urlFor('user_profile', response.users[0].id)} + ), + response.users[0].username, + edx.HtmlUtils.HTML('') + ); + + message = edx.HtmlUtils.interpolateHtml( + gettext('Show posts by {username}.'), {username: username} + ); + self.addSearchAlert(message, 'search-by-user'); + } + } + }); + }; + + DiscussionThreadListView.prototype.clearFilters = function() { + this.$('.forum-nav-filter-main-control').val('all'); + return this.$('.forum-nav-filter-cohort-control').val('all'); + }; + + DiscussionThreadListView.prototype.retrieveFollowed = function() { + this.mode = 'followed'; + return this.retrieveFirstPage(); + }; + + DiscussionThreadListView.prototype.updateEmailNotifications = function() { + var $checkbox, checked, urlName; + $checkbox = $('input.email-setting'); + checked = $checkbox.prop('checked'); + urlName = (checked) ? 'enable_notifications' : 'disable_notifications'; + DiscussionUtil.safeAjax({ + url: DiscussionUtil.urlFor(urlName), + type: 'POST', + error: function() { + $checkbox.prop('checked', !checked); + } + }); + }; + + return DiscussionThreadListView; + }).call(this, Backbone.View); + } +}).call(window); diff --git a/xblocks_contrib/discussion/static/js/common/views/discussion_thread_profile_view.js b/xblocks_contrib/discussion/static/js/common/views/discussion_thread_profile_view.js new file mode 100644 index 00000000..113196eb --- /dev/null +++ b/xblocks_contrib/discussion/static/js/common/views/discussion_thread_profile_view.js @@ -0,0 +1,68 @@ +/* globals DiscussionUtil, MathJax */ +(function() { + 'use strict'; + + var __hasProp = {}.hasOwnProperty, + __extends = function(child, parent) { + for (var key in parent) { + if (__hasProp.call(parent, key)) { + child[key] = parent[key]; + } + } + function ctor() { + this.constructor = child; + } + + ctor.prototype = parent.prototype; + child.prototype = new ctor(); + child.__super__ = parent.prototype; + return child; + }; + + if (typeof Backbone !== 'undefined' && Backbone !== null) { + this.DiscussionThreadProfileView = (function(_super) { + __extends(DiscussionThreadProfileView, _super); + + function DiscussionThreadProfileView() { + return DiscussionThreadProfileView.__super__.constructor.apply(this, arguments); + } + + DiscussionThreadProfileView.prototype.render = function() { + var params; + this.convertMath(); + this.abbreviateBody(); + params = $.extend(this.model.toJSON(), { + permalink: this.model.urlFor('retrieve') + }); + if (!this.model.get('anonymous')) { + params = $.extend(params, { + user: { + username: this.model.username, + user_url: this.model.user_url + } + }); + } + edx.HtmlUtils.setHtml( + this.$el, + edx.HtmlUtils.template($('#profile-thread-template').html())(params) + ); + this.$('span.timeago').timeago(); + DiscussionUtil.typesetMathJax(this.$('.post-body')); + return this; + }; + + DiscussionThreadProfileView.prototype.convertMath = function() { + var htmlSnippet = DiscussionUtil.markdownWithHighlight(this.model.get('body')); + this.model.set('markdownBody', htmlSnippet); + }; + + DiscussionThreadProfileView.prototype.abbreviateBody = function() { + var abbreviated; + abbreviated = DiscussionUtil.abbreviateHTML(this.model.get('markdownBody'), 140); + this.model.set('abbreviatedBody', abbreviated); + }; + + return DiscussionThreadProfileView; + }(Backbone.View)); + } +}).call(window); diff --git a/xblocks_contrib/discussion/static/js/common/views/discussion_thread_show_view.js b/xblocks_contrib/discussion/static/js/common/views/discussion_thread_show_view.js new file mode 100644 index 00000000..536f6cfa --- /dev/null +++ b/xblocks_contrib/discussion/static/js/common/views/discussion_thread_show_view.js @@ -0,0 +1,83 @@ +/* globals DiscussionUtil, DiscussionContentShowView, MathJax */ +(function() { + 'use strict'; + + var __hasProp = {}.hasOwnProperty, + __extends = function(child, parent) { + for (var key in parent) { + if (__hasProp.call(parent, key)) { + child[key] = parent[key]; + } + } + function ctor() { + this.constructor = child; + } + + ctor.prototype = parent.prototype; + child.prototype = new ctor(); + child.__super__ = parent.prototype; + return child; + }; + + if (typeof Backbone !== 'undefined' && Backbone !== null) { + this.DiscussionThreadShowView = (function(_super) { + __extends(DiscussionThreadShowView, _super); + + function DiscussionThreadShowView() { + return DiscussionThreadShowView.__super__.constructor.apply(this, arguments); + } + + DiscussionThreadShowView.prototype.initialize = function(options) { + var _ref; + DiscussionThreadShowView.__super__.initialize.call(this); + this.mode = options.mode || 'inline'; + this.startHeader = options.startHeader; + this.is_commentable_divided = options.is_commentable_divided; + // eslint-disable-next-line no-cond-assign + if ((_ref = this.mode) !== 'tab' && _ref !== 'inline') { + throw new Error('invalid mode: ' + this.mode); + } + }; + + DiscussionThreadShowView.prototype.renderTemplate = function() { + var context = $.extend({ + mode: this.mode, + startHeader: this.startHeader, + flagged: this.model.isFlagged(), + is_commentable_divided: this.is_commentable_divided, + author_display: this.getAuthorDisplay(), + cid: this.model.cid, + readOnly: $('.discussion-module').data('read-only') + }, this.model.attributes); + return edx.HtmlUtils.template($('#thread-show-template').html())(context); + }; + + DiscussionThreadShowView.prototype.render = function() { + edx.HtmlUtils.setHtml( + this.$el, + this.renderTemplate() + ); + this.delegateEvents(); + this.renderAttrs(); + this.$('span.timeago').timeago(); + this.convertMath(); + return this; + }; + + DiscussionThreadShowView.prototype.convertMath = function() { + DiscussionUtil.convertMath(this.$('.post-body')); + DiscussionUtil.typesetMathJax(this.$('.post-body')); + }; + + DiscussionThreadShowView.prototype.edit = function(event) { + return this.trigger('thread:edit', event); + }; + + DiscussionThreadShowView.prototype._delete = function(event) { + return this.trigger('thread:_delete', event); + }; + + return DiscussionThreadShowView; + }(DiscussionContentShowView)); + } +}).call(window); diff --git a/xblocks_contrib/discussion/static/js/common/views/discussion_thread_view.js b/xblocks_contrib/discussion/static/js/common/views/discussion_thread_view.js new file mode 100644 index 00000000..0deb418a --- /dev/null +++ b/xblocks_contrib/discussion/static/js/common/views/discussion_thread_view.js @@ -0,0 +1,478 @@ +/* globals + Comments, Content, DiscussionContentView, DiscussionThreadEditView, + DiscussionThreadShowView, DiscussionUtil, ThreadResponseView +*/ +(function() { + 'use strict'; + + var __hasProp = {}.hasOwnProperty, + __extends = function(child, parent) { + for (var key in parent) { + if (__hasProp.call(parent, key)) { + child[key] = parent[key]; + } + } + function ctor() { + this.constructor = child; + } + + ctor.prototype = parent.prototype; + child.prototype = new ctor(); + child.__super__ = parent.prototype; + return child; + }; + + if (typeof Backbone !== 'undefined' && Backbone !== null) { + this.DiscussionThreadView = (function(_super) { + var INITIAL_RESPONSE_PAGE_SIZE, SUBSEQUENT_RESPONSE_PAGE_SIZE; + + __extends(DiscussionThreadView, _super); + + function DiscussionThreadView() { + var self = this; + this._delete = function() { + return DiscussionThreadView.prototype._delete.apply(self, arguments); + }; + this.closeEditView = function() { + return DiscussionThreadView.prototype.closeEditView.apply(self, arguments); + }; + this.edit = function() { + return DiscussionThreadView.prototype.edit.apply(self, arguments); + }; + this.endorseThread = function() { + return DiscussionThreadView.prototype.endorseThread.apply(self, arguments); + }; + this.addComment = function() { + return DiscussionThreadView.prototype.addComment.apply(self, arguments); + }; + this.renderAddResponseButton = function() { + return DiscussionThreadView.prototype.renderAddResponseButton.apply(self, arguments); + }; + this.renderResponseToList = function() { + return DiscussionThreadView.prototype.renderResponseToList.apply(self, arguments); + }; + this.renderResponseCountAndPagination = function() { + return DiscussionThreadView.prototype.renderResponseCountAndPagination.apply(self, arguments); + }; + return DiscussionThreadView.__super__.constructor.apply(this, arguments); + } + + INITIAL_RESPONSE_PAGE_SIZE = 25; + + SUBSEQUENT_RESPONSE_PAGE_SIZE = 100; + + DiscussionThreadView.prototype.events = { + 'click .discussion-submit-post': 'submitComment', + 'click .add-response-btn': 'scrollToAddResponse', + 'keydown .wmd-button': function(event) { + return DiscussionUtil.handleKeypressInToolbar(event); + } + }; + + DiscussionThreadView.prototype.$ = function(selector) { + return this.$el.find(selector); + }; + + DiscussionThreadView.prototype.isQuestion = function() { + return this.model.get('thread_type') === 'question'; + }; + + DiscussionThreadView.prototype.initialize = function(options) { + var _ref, + self = this; + DiscussionThreadView.__super__.initialize.call(this); + this.mode = options.mode || 'inline'; + this.context = options.context || 'course'; + this.options = _.extend({}, options); + this.startHeader = options.startHeader; + // eslint-disable-next-line no-cond-assign + if ((_ref = this.mode) !== 'tab' && _ref !== 'inline') { + throw new Error('invalid mode: ' + this.mode); + } + this.readOnly = $('.discussion-module').data('read-only'); + this.model.collection.on('reset', function(collection) { + var id; + id = self.model.get('id'); + if (collection.get(id)) { + self.model = collection.get(id); + } + }); + this.is_commentable_divided = options.is_commentable_divided; + this.createShowView(); + this.responses = new Comments(); + this.loadedResponses = false; + if (this.isQuestion()) { + this.markedAnswers = new Comments(); + } + }; + + DiscussionThreadView.prototype.rerender = function() { + if (this.showView) { + this.showView.undelegateEvents(); + } + this.undelegateEvents(); + this.$el.empty(); + this.initialize({ + mode: this.mode, + model: this.model, + el: this.el, + courseSettings: this.options.courseSettings, + topicId: this.topicId + }); + return this.render(); + }; + + DiscussionThreadView.prototype.renderTemplate = function() { + var $container, + templateData; + this.template = _.template($('#thread-template').html()); + $container = $('#discussion-container'); + if (!$container.length) { + $container = $('.discussion-module'); + } + templateData = _.extend(this.model.toJSON(), { + readOnly: this.readOnly, + startHeader: this.startHeader + 1, // this is a child so headers should be increased + can_create_comment: $container.data('user-create-comment') + }); + return this.template(templateData); + }; + + DiscussionThreadView.prototype.render = function() { + var self = this; + var $element = $(this.renderTemplate()); + this.$el.empty(); + this.$el.append($element); + this.delegateEvents(); + this.renderShowView(); + this.renderAttrs(); + this.$('span.timeago').timeago(); + this.makeWmdEditor('reply-body'); + this.renderAddResponseButton(); + this.responses.on('add', function(response) { + return self.renderResponseToList(response, '.js-response-list', {}); + }); + if (this.isQuestion()) { + this.markedAnswers.on('add', function(response) { + return self.renderResponseToList(response, '.js-marked-answer-list', { + collapseComments: true + }); + }); + } + this.loadInitialResponses(); + }; + + DiscussionThreadView.prototype.attrRenderer = $.extend({}, DiscussionContentView.prototype.attrRenderer, { + closed: function(closed) { + this.$('.discussion-reply-new').toggle(!closed); + this.$('.comment-form').closest('li').toggle(!closed); + this.$('.action-vote').toggle(!closed); + this.$('.display-vote').toggle(closed); + return this.renderAddResponseButton(); + } + }); + + DiscussionThreadView.prototype.cleanup = function() { + // jQuery.ajax after 1.5 returns a jqXHR which doesn't implement .abort + // but I don't feel confident enough about what's going on here to remove this code + // so just check to make sure we can abort before we try to + if (this.responsesRequest && this.responsesRequest.abort) { + return this.responsesRequest.abort(); + } + }; + + DiscussionThreadView.prototype.loadResponses = function(responseLimit, $elem, firstLoad) { + var self = this; + this.responsesRequest = DiscussionUtil.safeAjax({ + url: DiscussionUtil.urlFor( + 'retrieve_single_thread', this.model.get('commentable_id'), this.model.id + ), + data: { + resp_skip: this.responses.size(), + // eslint-disable-next-line no-void + resp_limit: responseLimit || void 0 + }, + $elem: $elem, + $loading: $elem, + takeFocus: false, + complete: function() { + self.responsesRequest = null; + }, + success: function(data) { + Content.loadContentInfos(data.annotated_content_info); + if (self.isQuestion()) { + self.markedAnswers.add(data.content.endorsed_responses); + } + self.responses.add( + self.isQuestion() ? data.content.non_endorsed_responses : data.content.children + ); + self.renderResponseCountAndPagination( + self.isQuestion() + ? data.content.non_endorsed_resp_total + : data.content.resp_total + ); + self.trigger('thread:responses:rendered'); + self.loadedResponses = true; + }, + error: function(xhr, textStatus) { + if (textStatus === 'abort') { + return; + } + if (xhr.status === 404) { + DiscussionUtil.discussionAlert( + gettext('Error'), + gettext('The post you selected has been deleted.') + ); + } else if (firstLoad) { + DiscussionUtil.discussionAlert( + gettext('Error'), + gettext('Responses could not be loaded. Refresh the page and try again.') + ); + } else { + DiscussionUtil.discussionAlert( + gettext('Error'), + gettext('Additional responses could not be loaded. Refresh the page and try again.') + ); + } + } + }); + }; + + DiscussionThreadView.prototype.loadInitialResponses = function() { + return this.loadResponses(INITIAL_RESPONSE_PAGE_SIZE, this.$el.find('.js-response-list'), true); + }; + + DiscussionThreadView.prototype.renderResponseCountAndPagination = function(responseTotal) { + var buttonText, $loadMoreButton, responseCountFormat, responseLimit, responsePagination, + responsesRemaining, showingResponsesText, + self = this; + if (this.isQuestion() && this.markedAnswers.length !== 0) { + responseCountFormat = ngettext( + '{numResponses} other response', '{numResponses} other responses', responseTotal + ); + if (responseTotal === 0) { + this.$el.find('.response-count').hide(); + } + } else { + responseCountFormat = ngettext( + '{numResponses} response', '{numResponses} responses', responseTotal + ); + } + this.$el.find('.response-count').text( + edx.StringUtils.interpolate(responseCountFormat, {numResponses: responseTotal}, true) + ); + + responsePagination = this.$el.find('.response-pagination'); + responsePagination.empty(); + if (responseTotal > 0) { + responsesRemaining = responseTotal - this.responses.size(); + if (responsesRemaining === 0) { + showingResponsesText = gettext('Showing all responses'); + } else { + showingResponsesText = edx.StringUtils.interpolate( + ngettext( + 'Showing first response', 'Showing first {numResponses} responses', + this.responses.size() + ), + {numResponses: this.responses.size()}, + true + ); + } + + responsePagination.append($('') + .addClass('response-display-count').text(showingResponsesText)); + if (responsesRemaining > 0) { + if (responsesRemaining < SUBSEQUENT_RESPONSE_PAGE_SIZE) { + responseLimit = null; + buttonText = gettext('Load all responses'); + } else { + responseLimit = SUBSEQUENT_RESPONSE_PAGE_SIZE; + buttonText = edx.StringUtils.interpolate(gettext('Load next {numResponses} responses'), { + numResponses: responseLimit + }, true); + } + $loadMoreButton = $('