diff --git a/admin/tool/lp/templates/manage_competencies_page.mustache b/admin/tool/lp/templates/manage_competencies_page.mustache index e99f7c56650..9f5c317af0e 100644 --- a/admin/tool/lp/templates/manage_competencies_page.mustache +++ b/admin/tool/lp/templates/manage_competencies_page.mustache @@ -39,7 +39,7 @@
{{{framework.description}}}

{{#str}}competencies, core_competency{{/str}}

-
+

@@ -56,7 +56,7 @@
-
+

{{#str}}selectedcompetency, tool_lp{{/str}}

diff --git a/backup/util/ui/base_moodleform.class.php b/backup/util/ui/base_moodleform.class.php index 34820e42e3b..4685a66491e 100644 --- a/backup/util/ui/base_moodleform.class.php +++ b/backup/util/ui/base_moodleform.class.php @@ -127,12 +127,6 @@ abstract class base_moodleform extends moodleform { */ public function definition_after_data() { $buttonarray = array(); - $buttonarray[] = $this->_form->createElement( - 'submit', - 'submitbutton', - get_string($this->uistage->get_ui()->get_name().'stage'.$this->uistage->get_stage().'action', 'backup'), - array('class' => 'proceedbutton') - ); if (!$this->uistage->is_first_stage()) { $buttonarray[] = $this->_form->createElement('submit', 'previous', get_string('previousstage', 'backup')); } else if ($this->uistage instanceof backup_ui_stage) { @@ -141,6 +135,12 @@ abstract class base_moodleform extends moodleform { array('class' => 'oneclickbackup')); } $buttonarray[] = $this->_form->createElement('cancel', 'cancel', get_string('cancel'), array('class' => 'confirmcancel')); + $buttonarray[] = $this->_form->createElement( + 'submit', + 'submitbutton', + get_string($this->uistage->get_ui()->get_name().'stage'.$this->uistage->get_stage().'action', 'backup'), + array('class' => 'proceedbutton') + ); $this->_form->addGroup($buttonarray, 'buttonar', '', array(' '), false); $this->_form->closeHeaderBefore('buttonar'); diff --git a/backup/util/ui/renderer.php b/backup/util/ui/renderer.php index 7499d6f601e..f656577bc78 100644 --- a/backup/util/ui/renderer.php +++ b/backup/util/ui/renderer.php @@ -395,7 +395,7 @@ class core_backup_renderer extends plugin_renderer_base { $count ++; $html = html_writer::start_tag('div', array('class' => 'detail-pair')); $html .= html_writer::tag('label', $label, array('class' => 'detail-pair-label', 'for' => 'detail-pair-value-'.$count)); - $html .= html_writer::tag('div', $value, array('class' => 'detail-pair-value', 'name' => 'detail-pair-value-'.$count)); + $html .= html_writer::tag('div', $value, array('class' => 'detail-pair-value pl-2', 'name' => 'detail-pair-value-'.$count)); $html .= html_writer::end_tag('div'); return $html; } @@ -792,7 +792,7 @@ class core_backup_renderer extends plugin_renderer_base { $url = $component->get_url(); $output = html_writer::start_tag('div', array('class' => 'restore-course-search form-inline m-b-1')); - $output .= html_writer::start_tag('div', array('class' => 'rcs-results')); + $output .= html_writer::start_tag('div', array('class' => 'rcs-results w-100')); $table = new html_table(); $table->head = array('', get_string('name'), get_string('description')); diff --git a/blocks/myoverview/templates/course-event-list-item.mustache b/blocks/myoverview/templates/course-event-list-item.mustache index 587393a8f16..55c0e46c883 100644 --- a/blocks/myoverview/templates/course-event-list-item.mustache +++ b/blocks/myoverview/templates/course-event-list-item.mustache @@ -52,7 +52,7 @@

-
+
{{#action.actionable}} {{action.name}} {{#action.itemcount}} diff --git a/blocks/myoverview/templates/course-summary.mustache b/blocks/myoverview/templates/course-summary.mustache index acc214b9b08..53f40a018ca 100644 --- a/blocks/myoverview/templates/course-summary.mustache +++ b/blocks/myoverview/templates/course-summary.mustache @@ -27,17 +27,13 @@ } }}
-
+
{{> block_myoverview/progress-chart}}

{{{fullnamedisplay}}}

-
- {{> block_myoverview/progress-chart}} -

{{{fullnamedisplay}}}

-
-
+
-
+
{{> block_myoverview/progress-chart}}
diff --git a/blocks/myoverview/templates/courses-view-course-item.mustache b/blocks/myoverview/templates/courses-view-course-item.mustache index fd8a4fb0c74..afe5f2f8e6d 100644 --- a/blocks/myoverview/templates/courses-view-course-item.mustache +++ b/blocks/myoverview/templates/courses-view-course-item.mustache @@ -27,27 +27,21 @@ } }}
-
-
-
- {{> block_myoverview/progress-chart}} -

{{{fullnamedisplay}}}

-
-
-
-
-
- {{> block_myoverview/progress-chart}} -
-
-
-

{{{fullnamedisplay}}}

-
+
+
+ +
+
+ {{> block_myoverview/progress-chart}} +
+
+

{{{fullnamedisplay}}}

+

{{#shortentext}} 140, {{summary}}{{/shortentext}}

-
+
\ No newline at end of file diff --git a/blocks/myoverview/templates/courses-view.mustache b/blocks/myoverview/templates/courses-view.mustache index 2a66c0ce7be..14ffa493f73 100644 --- a/blocks/myoverview/templates/courses-view.mustache +++ b/blocks/myoverview/templates/courses-view.mustache @@ -24,21 +24,27 @@ }}
{{#hascourses}} -
-
- - {{#str}} inprogress, block_myoverview {{/str}} - - - {{#str}} future, block_myoverview {{/str}} - - - {{#str}} past, block_myoverview {{/str}} - -
+
+
-
+
{{#inprogress}} {{< block_myoverview/courses-view-by-status }} {{$id}}courses-view-in-progress{{/id}} @@ -48,12 +54,12 @@ {{/ block_myoverview/courses-view-by-status }} {{/inprogress}} {{^inprogress}} -
+
{{#str}} nocoursesinprogress, block_myoverview {{/str}} -

{{#str}} nocoursesinprogress, block_myoverview {{/str}}

+

{{#str}} nocoursesinprogress, block_myoverview {{/str}}

{{/inprogress}}
@@ -67,12 +73,12 @@ {{/ block_myoverview/courses-view-by-status }} {{/future}} {{^future}} -
+
{{#str}} nocoursesfuture, block_myoverview {{/str}} -

{{#str}} nocoursesfuture, block_myoverview {{/str}}

+

{{#str}} nocoursesfuture, block_myoverview {{/str}}

{{/future}}
@@ -86,33 +92,24 @@ {{/ block_myoverview/courses-view-by-status }} {{/past}} {{^past}} -
+
{{#str}} nocoursespast, block_myoverview {{/str}} -

{{#str}} nocoursespast, block_myoverview {{/str}}

+

{{#str}} nocoursespast, block_myoverview {{/str}}

{{/past}}
{{/hascourses}} {{^hascourses}} -
+
{{#str}} nocourses, block_myoverview {{/str}} -

{{#str}} nocourses, block_myoverview {{/str}}

+

{{#str}} nocourses, block_myoverview {{/str}}

{{/hascourses}} -
-{{#js}} -require(['jquery', 'core/custom_interaction_events'], function($, customEvents) { - var root = $('#courses-view-{{uniqid}}'); - customEvents.define(root, [customEvents.events.activate]); - root.on(customEvents.events.activate, '[data-toggle="btns"] > .btn', function() { - root.find('.btn.active').removeClass('active'); - }); -}); -{{/js}} +
\ No newline at end of file diff --git a/blocks/myoverview/templates/event-list-item.mustache b/blocks/myoverview/templates/event-list-item.mustache index 0101dfece40..a269b5cb10c 100644 --- a/blocks/myoverview/templates/event-list-item.mustache +++ b/blocks/myoverview/templates/event-list-item.mustache @@ -57,7 +57,7 @@
{{#userdate}} {{timesort}}, {{#str}} strftimerecent {{/str}} {{/userdate}}
-
+
{{#action.actionable}} {{action.name}} {{#action.itemcount}} diff --git a/blocks/myoverview/templates/timeline-view.mustache b/blocks/myoverview/templates/timeline-view.mustache index cba411eb20a..9d57cd26b59 100644 --- a/blocks/myoverview/templates/timeline-view.mustache +++ b/blocks/myoverview/templates/timeline-view.mustache @@ -23,32 +23,27 @@ {} }}
-
-
- +
+
+ +
-
+
{{> block_myoverview/timeline-view-dates }}
{{> block_myoverview/timeline-view-courses }}
-
-{{#js}} -require(['jquery', 'core/custom_interaction_events'], function($, customEvents) { - var root = $('#timeline-view-{{uniqid}}'); - customEvents.define(root, [customEvents.events.activate]); - root.on(customEvents.events.activate, '[data-toggle="btns"] > .btn', function() { - root.find('.btn.active').removeClass('active'); - }); -}); -{{/js}} +
\ No newline at end of file diff --git a/blocks/tests/behat/behat_blocks.php b/blocks/tests/behat/behat_blocks.php index a5a1652e00e..9f459f9fe7a 100644 --- a/blocks/tests/behat/behat_blocks.php +++ b/blocks/tests/behat/behat_blocks.php @@ -108,7 +108,7 @@ class behat_blocks extends behat_base { } $this->execute('behat_general::i_click_on_in_the', - array("a[role='menuitem']", "css_element", $this->escape($blockname), "block") + array("a[role='button']", "css_element", $this->escape($blockname), "block") ); } diff --git a/calendar/templates/month_detailed.mustache b/calendar/templates/month_detailed.mustache index f3cdfeb696a..9231fa8a6ea 100644 --- a/calendar/templates/month_detailed.mustache +++ b/calendar/templates/month_detailed.mustache @@ -43,7 +43,7 @@ {{> core_calendar/header }} {{> core_calendar/month_navigation }} {{> core/overlay_loading}} - +
{{# daynames }} @@ -71,7 +71,7 @@ data-drop-zone="month-view-day" data-region="day" data-new-event-timestamp="{{neweventtimestamp}}"> -
+
{{#hasevents}} {{mday}} {{/hasevents}} @@ -119,7 +119,7 @@
{{/hasevents}}
-
+
{{#hasevents}} {{mday}} {{/hasevents}} diff --git a/course/classes/management_renderer.php b/course/classes/management_renderer.php index 638346b98a2..13b9e59849b 100644 --- a/course/classes/management_renderer.php +++ b/course/classes/management_renderer.php @@ -139,7 +139,7 @@ class core_course_management_renderer extends plugin_renderer_base { $listing = coursecat::get(0)->get_children(); $attributes = array( - 'class' => 'ml', + 'class' => 'ml-1', 'role' => 'tree', 'aria-labelledby' => 'category-listing-title' ); @@ -288,7 +288,7 @@ class core_course_management_renderer extends plugin_renderer_base { $html .= html_writer::end_div(); if ($isexpanded) { $html .= html_writer::start_tag('ul', - array('class' => 'ml', 'role' => 'group', 'id' => 'subcategoryof'.$category->id)); + array('class' => 'ml-1', 'role' => 'group', 'id' => 'subcategoryof'.$category->id)); $catatlevel = \core_course\management\helper::get_expanded_categories($category->path); $catatlevel[] = array_shift($selectedcategories); $catatlevel = array_unique($catatlevel); @@ -528,7 +528,7 @@ class core_course_management_renderer extends plugin_renderer_base { array('id' => 'course-listing-title', 'tabindex' => '0')); $html .= $this->course_listing_actions($category, $course, $perpage); $html .= $this->listing_pagination($category, $page, $perpage); - $html .= html_writer::start_tag('ul', array('class' => 'ml', 'role' => 'group')); + $html .= html_writer::start_tag('ul', array('class' => 'ml-1', 'role' => 'group')); foreach ($category->get_courses($options) as $listitem) { $html .= $this->course_listitem($category, $listitem, $courseid); } @@ -1109,7 +1109,7 @@ class core_course_management_renderer extends plugin_renderer_base { )); $html .= html_writer::tag('h3', get_string('courses')); $html .= $this->search_pagination($totalcourses, $page, $perpage); - $html .= html_writer::start_tag('ul', array('class' => 'ml')); + $html .= html_writer::start_tag('ul', array('class' => 'ml-1')); foreach ($courses as $listitem) { $i++; if ($i == $totalcourses) { diff --git a/course/tests/behat/category_change_visibility.feature b/course/tests/behat/category_change_visibility.feature index 042094cf609..a59850c7450 100644 --- a/course/tests/behat/category_change_visibility.feature +++ b/course/tests/behat/category_change_visibility.feature @@ -16,7 +16,7 @@ Feature: We can change the visibility of categories in the management interface. And I log in as "admin" And I go to the courses management page And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" And category in management listing should be visible "CAT1" And I toggle visibility of category "CAT1" in management listing # Redirect. @@ -38,7 +38,7 @@ Feature: We can change the visibility of categories in the management interface. And I go to the courses management page And I start watching to see if a new page loads And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" And category in management listing should be visible "CAT1" And I toggle visibility of category "CAT1" in management listing And a new page should not have loaded since I started watching @@ -57,28 +57,28 @@ Feature: We can change the visibility of categories in the management interface. And I log in as "admin" And I go to the courses management page And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should not see "Cat 2" in the "#category-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should not see "Cat 2" in the "#category-listing ul" "css_element" And category in management listing should be visible "CAT1" And I click on category "Cat 1" in the management interface # Redirect. And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 2" in the "#category-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should see "Cat 2" in the "#category-listing ul" "css_element" And category in management listing should be visible "CAT1" And category in management listing should be visible "CAT2" And I toggle visibility of category "CAT2" in management listing # Redirect. And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 2" in the "#category-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should see "Cat 2" in the "#category-listing ul" "css_element" And category in management listing should be visible "CAT1" And category in management listing should be dimmed "CAT2" And I toggle visibility of category "CAT2" in management listing # Redirect. And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 2" in the "#category-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should see "Cat 2" in the "#category-listing ul" "css_element" And category in management listing should be visible "CAT1" And category in management listing should be visible "CAT2" @@ -94,8 +94,8 @@ Feature: We can change the visibility of categories in the management interface. And I go to the courses management page And I start watching to see if a new page loads And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should not see "Cat 2" in the "#category-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should not see "Cat 2" in the "#category-listing ul" "css_element" And category in management listing should be visible "CAT1" And I click to expand category "CAT1" in the management interface And a new page should not have loaded since I started watching @@ -130,13 +130,13 @@ Feature: We can change the visibility of categories in the management interface. And I click on category "Cat 1" in the management interface # Redirect. And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 2" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 3" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 4" in the "#category-listing ul.ml" "css_element" - And I should see "Course 1" in the "#course-listing ul.ml" "css_element" - And I should see "Course 2" in the "#course-listing ul.ml" "css_element" - And I should see "Course 3" in the "#course-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should see "Cat 2" in the "#category-listing ul" "css_element" + And I should see "Cat 3" in the "#category-listing ul" "css_element" + And I should see "Cat 4" in the "#category-listing ul" "css_element" + And I should see "Course 1" in the "#course-listing ul" "css_element" + And I should see "Course 2" in the "#course-listing ul" "css_element" + And I should see "Course 3" in the "#course-listing ul" "css_element" And category in management listing should be visible "CAT1" And category in management listing should be visible "CAT2" And category in management listing should be visible "CAT3" @@ -207,13 +207,13 @@ Feature: We can change the visibility of categories in the management interface. And a new page should have loaded since I started watching And I start watching to see if a new page loads And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 2" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 3" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 4" in the "#category-listing ul.ml" "css_element" - And I should see "Course 1" in the "#course-listing ul.ml" "css_element" - And I should see "Course 2" in the "#course-listing ul.ml" "css_element" - And I should see "Course 3" in the "#course-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should see "Cat 2" in the "#category-listing ul" "css_element" + And I should see "Cat 3" in the "#category-listing ul" "css_element" + And I should see "Cat 4" in the "#category-listing ul" "css_element" + And I should see "Course 1" in the "#course-listing ul" "css_element" + And I should see "Course 2" in the "#course-listing ul" "css_element" + And I should see "Course 3" in the "#course-listing ul" "css_element" And category in management listing should be visible "CAT1" And category in management listing should be visible "CAT2" And category in management listing should be visible "CAT3" @@ -223,7 +223,7 @@ Feature: We can change the visibility of categories in the management interface. And course in management listing should be visible "C3" And I toggle visibility of course "C2" in management listing And a new page should not have loaded since I started watching - And I should see "Cat 3" in the "#category-listing ul.ml" "css_element" + And I should see "Cat 3" in the "#category-listing ul" "css_element" And course in management listing should be visible "C1" And course in management listing should be dimmed "C2" And course in management listing should be visible "C3" diff --git a/course/tests/behat/category_management.feature b/course/tests/behat/category_management.feature index 5a68d138656..151cd7e794d 100644 --- a/course/tests/behat/category_management.feature +++ b/course/tests/behat/category_management.feature @@ -56,9 +56,9 @@ Feature: Test category management actions And I log in as "admin" And I go to the courses management page And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 2" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 3" in the "#category-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should see "Cat 2" in the "#category-listing ul" "css_element" + And I should see "Cat 3" in the "#category-listing ul" "css_element" And I click on "delete" action for "Cat 2" in management category listing # Redirect And I should see "Delete category: Cat 2" @@ -67,9 +67,9 @@ Feature: Test category management actions And I press "Cancel" # Redirect And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 2" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 3" in the "#category-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should see "Cat 2" in the "#category-listing ul" "css_element" + And I should see "Cat 3" in the "#category-listing ul" "css_element" And I click on "delete" action for "Cat 2" in management category listing # Redirect And I should see "Delete category: Cat 2" @@ -82,9 +82,9 @@ Feature: Test category management actions And I press "Continue" # Redirect And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should not see "Cat 2" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 3" in the "#category-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should not see "Cat 2" in the "#category-listing ul" "css_element" + And I should see "Cat 3" in the "#category-listing ul" "css_element" And I click on "delete" action for "Cat 3" in management category listing # Redirect And I should see "Delete category: Cat 3" @@ -98,10 +98,10 @@ Feature: Test category management actions And I press "Continue" # Redirect And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should not see "Cat 2" in the "#category-listing ul.ml" "css_element" - And I should not see "Cat 3" in the "#category-listing ul.ml" "css_element" - And I should see "Course 1" in the "#course-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should not see "Cat 2" in the "#category-listing ul" "css_element" + And I should not see "Cat 3" in the "#category-listing ul" "css_element" + And I should see "Course 1" in the "#course-listing ul" "css_element" Scenario: Test I can assign roles for a category through the management interface. Given the following "categories" exist: @@ -222,9 +222,9 @@ Feature: Test category management actions And I log in as "admin" And I go to the courses management page And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 2" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 3" in the "#category-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should see "Cat 2" in the "#category-listing ul" "css_element" + And I should see "Cat 3" in the "#category-listing ul" "css_element" And I select category "Cat 2" in the management interface And I select category "Cat 3" in the management interface And I set the field "menumovecategoriesto" to "Cat 1" @@ -253,9 +253,9 @@ Feature: Test category management actions And I log in as "admin" And I go to the courses management page And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 2" in the "#category-listing ul.ml" "css_element" - And I should see "Cat 3" in the "#category-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should see "Cat 2" in the "#category-listing ul" "css_element" + And I should see "Cat 3" in the "#category-listing ul" "css_element" And the "movecategoriesto" "select" should be disabled And the "resortcategoriesby" "select" should be disabled And the "resortcoursesby" "select" should be disabled @@ -298,8 +298,8 @@ Feature: Test category management actions And I click on category "Cat 3" in the management interface #Redirect And I should see the "Course categories and courses" management page - And I should see "Course 1" in the "#course-listing ul.ml" "css_element" - And I should see "Course 2" in the "#course-listing ul.ml" "css_element" + And I should see "Course 1" in the "#course-listing ul" "css_element" + And I should see "Course 2" in the "#course-listing ul" "css_element" And the "movecategoriesto" "select" should be disabled And the "resortcategoriesby" "select" should be disabled And the "resortcoursesby" "select" should be disabled diff --git a/course/tests/behat/course_category_management_listing.feature b/course/tests/behat/course_category_management_listing.feature index 26f28630b78..f09cae2622c 100644 --- a/course/tests/behat/course_category_management_listing.feature +++ b/course/tests/behat/course_category_management_listing.feature @@ -99,47 +99,47 @@ Feature: Course category management interface performs as expected And I log in as "admin" And I go to the courses management page And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" And I click on "Cat 1" "link" # Redirect. And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" And I click on "Cat 1-1" "link" # Redirect. And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" And I click on "Cat 2" "link" # Redirect. And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1-2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" # This is similar to the above scenario except here we are going to use AJAX # to load the categories. @@ -170,74 +170,74 @@ Feature: Course category management interface performs as expected And I go to the courses management page And I start watching to see if a new page loads And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" And I click to expand category "CAT1" in the management interface And a new page should not have loaded since I started watching - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" And I click to expand category "CAT3" in the management interface And a new page should not have loaded since I started watching - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" And I click to expand category "CAT2" in the management interface And a new page should not have loaded since I started watching - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1-2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" And I click to expand category "CAT7" in the management interface And a new page should not have loaded since I started watching - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1-2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" And I click to expand category "CAT1" in the management interface And a new page should not have loaded since I started watching - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1-2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" And I click to expand category "CAT1" in the management interface And a new page should not have loaded since I started watching - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1-2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" @javascript Scenario Outline: Top level categories are displayed correctly when resorted @@ -746,51 +746,51 @@ Feature: Course category management interface performs as expected And I go to the courses management page And I start watching to see if a new page loads And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1" in the "#course-category-listings ul" "css_element" And I click to expand category "CAT2" in the management interface And a new page should not have loaded since I started watching And I click to expand category "CAT7" in the management interface And a new page should not have loaded since I started watching And I click to expand category "CAT9" in the management interface And a new page should not have loaded since I started watching - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1-2-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1-1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1-2-1" in the "#course-category-listings ul" "css_element" And I click on "Cat 1" category in the management category listing And a new page should have loaded since I started watching And I start watching to see if a new page loads And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1-2-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1-1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1-2-1" in the "#course-category-listings ul" "css_element" And I click on "resortbyidnumber" action for "Cat 1" in management category listing And a new page should have loaded since I started watching And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 1-2" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1-2" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat 2-1-1-1" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat 2-1-2-1" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat 1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 1-2" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1-2" in the "#course-category-listings ul" "css_element" + And I should not see "Cat 2-1-1-1" in the "#course-category-listings ul" "css_element" + And I should see "Cat 2-1-2-1" in the "#course-category-listings ul" "css_element" @javascript Scenario: Test category expansion after deletion @@ -806,19 +806,19 @@ Feature: Course category management interface performs as expected And I go to the courses management page And I start watching to see if a new page loads And I should see the "Course categories and courses" management page - And I should see "Cat A (1)" in the "#course-category-listings ul.ml" "css_element" - And I should see "Cat B (2)" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat C (1-1)" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat D (2-1)" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat E (2-1-1)" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat A (1)" in the "#course-category-listings ul" "css_element" + And I should see "Cat B (2)" in the "#course-category-listings ul" "css_element" + And I should not see "Cat C (1-1)" in the "#course-category-listings ul" "css_element" + And I should not see "Cat D (2-1)" in the "#course-category-listings ul" "css_element" + And I should not see "Cat E (2-1-1)" in the "#course-category-listings ul" "css_element" And I click to expand category "CAT1" in the management interface - And I should see "Cat C (1-1)" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat C (1-1)" in the "#course-category-listings ul" "css_element" And a new page should not have loaded since I started watching And I click to expand category "CAT2" in the management interface - And I should see "Cat D (2-1)" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat D (2-1)" in the "#course-category-listings ul" "css_element" And a new page should not have loaded since I started watching And I click to expand category "CAT4" in the management interface - And I should see "Cat E (2-1-1)" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat E (2-1-1)" in the "#course-category-listings ul" "css_element" And a new page should not have loaded since I started watching And I click on "delete" action for "Cat B (2)" in management category listing And a new page should have loaded since I started watching @@ -833,5 +833,5 @@ Feature: Course category management interface performs as expected And I press "Continue" And a new page should have loaded since I started watching And I should see the "Course categories and courses" management page - And I should see "Cat A (1)" in the "#course-category-listings ul.ml" "css_element" - And I should not see "Cat B (2)" in the "#course-category-listings ul.ml" "css_element" + And I should see "Cat A (1)" in the "#course-category-listings ul" "css_element" + And I should not see "Cat B (2)" in the "#course-category-listings ul" "css_element" diff --git a/course/tests/behat/course_change_visibility.feature b/course/tests/behat/course_change_visibility.feature index ea67b3439a1..2c411161d05 100644 --- a/course/tests/behat/course_change_visibility.feature +++ b/course/tests/behat/course_change_visibility.feature @@ -19,8 +19,8 @@ Feature: We can change the visibility of courses in the management interface. And I click on category "Cat 1" in the management interface # Redirect. And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should see "Course 1" in the "#course-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should see "Course 1" in the "#course-listing ul" "css_element" And category in management listing should be visible "CAT1" And course in management listing should be visible "C1" And I toggle visibility of course "C1" in management listing @@ -68,8 +68,8 @@ Feature: We can change the visibility of courses in the management interface. And a new page should have loaded since I started watching And I start watching to see if a new page loads And I should see the "Course categories and courses" management page - And I should see "Cat 1" in the "#category-listing ul.ml" "css_element" - And I should see "Course 1" in the "#course-listing ul.ml" "css_element" + And I should see "Cat 1" in the "#category-listing ul" "css_element" + And I should see "Course 1" in the "#course-listing ul" "css_element" And category in management listing should be visible "CAT1" And course in management listing should be visible "C1" And I toggle visibility of course "C1" in management listing @@ -98,7 +98,7 @@ Feature: We can change the visibility of courses in the management interface. And I click on "Courses" "link" in the ".view-mode-selector" "css_element" And a new page should have loaded since I started watching And I start watching to see if a new page loads - And I should see "Course 1" in the "#course-listing ul.ml" "css_element" + And I should see "Course 1" in the "#course-listing ul" "css_element" And I toggle visibility of course "C1" in management listing And a new page should not have loaded since I started watching And course in management listing should be dimmed "C1" diff --git a/course/tests/behat/course_search.feature b/course/tests/behat/course_search.feature index 3ffbe6e1c44..635bc2d1d91 100644 --- a/course/tests/behat/course_search.feature +++ b/course/tests/behat/course_search.feature @@ -20,7 +20,7 @@ Feature: Courses can be searched for and moved in bulk. Scenario: Search courses finds correct results Given I log in as "admin" And I go to the courses management page - When I set the field "Search courses" to "Biology" + When I set the field "coursesearchbox" to "Biology" And I press "Go" Then I should see "Biology Y1" And I should see "Biology Y2" @@ -31,7 +31,7 @@ Feature: Courses can be searched for and moved in bulk. Scenario: Search courses and move results in bulk Given I log in as "admin" And I go to the courses management page - And I set the field "Search courses" to "Biology" + And I set the field "coursesearchbox" to "Biology" And I press "Go" When I select course "Biology Y1" in the management interface And I select course "Biology Y2" in the management interface diff --git a/course/tests/behat/navigate_course_list.feature b/course/tests/behat/navigate_course_list.feature index 4ae448329ba..539f116d036 100644 --- a/course/tests/behat/navigate_course_list.feature +++ b/course/tests/behat/navigate_course_list.feature @@ -23,12 +23,12 @@ Feature: Browse course list and return back from enrolment page And I follow "Miscellaneous" And I follow "Sample course" And I press "Continue" - Then I should see "Courses" in the ".breadcrumb-nav" "css_element" - And I click on "Courses" "link" in the ".breadcrumb-nav" "css_element" + Then I should see "Courses" in the ".breadcrumb" "css_element" + And I click on "Courses" "link" in the ".breadcrumb" "css_element" And I follow "Sample category" And I am on "Course 1" course homepage And I press "Continue" - And I should see "Sample category" in the ".breadcrumb-nav" "css_element" + And I should see "Sample category" in the ".breadcrumb" "css_element" @javascript Scenario: A user can return to the previous page from enrolment page by clicking navigation links @@ -47,7 +47,7 @@ Feature: Browse course list and return back from enrolment page And I expand "Sample category" node And I follow "Course 1" And I press "Continue" - Then I should see "Edit profile" in the ".breadcrumb-nav" "css_element" + Then I should see "Edit profile" in the ".breadcrumb" "css_element" Scenario: User can return to the choice activity from enrolment page Given the following "roles" exist: @@ -72,4 +72,4 @@ Feature: Browse course list and return back from enrolment page And I should see "Sorry, only enrolled users are allowed to make choices." And I press "Enrol me in this course" And I press "Continue" - Then I should see "Test choice" in the ".breadcrumb-nav" "css_element" + Then I should see "Test choice" in the ".breadcrumb" "css_element" diff --git a/lib/behat/classes/partial_named_selector.php b/lib/behat/classes/partial_named_selector.php index 37230efecd4..67abfef22f4 100644 --- a/lib/behat/classes/partial_named_selector.php +++ b/lib/behat/classes/partial_named_selector.php @@ -127,7 +127,7 @@ class behat_partial_named_selector extends \Behat\Mink\Selector\PartialNamedSele XPATH , 'block' => << << $icon_progress
-',trigger:"hover focus",title:"",delay:0,html:!1,selector:!1,placement:"top",offset:"0 0",constraints:[]},n={animation:"boolean",template:"string",title:"(string|element|function)",trigger:"string",delay:"(number|object)",html:"boolean",selector:"(string|boolean)",placement:"(string|function)",offset:"string",constraints:"array"},o={TOP:"bottom center",RIGHT:"middle left",BOTTOM:"top center",LEFT:"middle right"},p={IN:"in",OUT:"out"},q={HIDE:"hide"+i,HIDDEN:"hidden"+i,SHOW:"show"+i,SHOWN:"shown"+i,INSERTED:"inserted"+i,CLICK:"click"+i,FOCUSIN:"focusin"+i,FOCUSOUT:"focusout"+i,MOUSEENTER:"mouseenter"+i,MOUSELEAVE:"mouseleave"+i},r={FADE:"fade",IN:"in"},s={TOOLTIP:".tooltip",TOOLTIP_INNER:".tooltip-inner"},t={element:!1,enabled:!1},u={HOVER:"hover",FOCUS:"focus",CLICK:"click",MANUAL:"manual"},v=function(){function j(a,b){d(this,j),this._isEnabled=!0,this._timeout=0,this._hoverState="",this._activeTrigger={},this._tether=null,this.element=a,this.config=this._getConfig(b),this.tip=null,this._setListeners()}return g(j,[{key:"enable",value:function(){this._isEnabled=!0}},{key:"disable",value:function(){this._isEnabled=!1}},{key:"toggleEnabled",value:function(){this._isEnabled=!this._isEnabled}},{key:"toggle",value:function(b){if(b){var c=this.constructor.DATA_KEY,d=a(b.currentTarget).data(c);d||(d=new this.constructor(b.currentTarget,this._getDelegateConfig()),a(b.currentTarget).data(c,d)),d._activeTrigger.click=!d._activeTrigger.click,d._isWithActiveTrigger()?d._enter(null,d):d._leave(null,d)}else{if(a(this.getTipElement()).hasClass(r.IN))return void this._leave(null,this);this._enter(null,this)}}},{key:"dispose",value:function(){clearTimeout(this._timeout),this.cleanupTether(),a.removeData(this.element,this.constructor.DATA_KEY),a(this.element).off(this.constructor.EVENT_KEY),this.tip&&a(this.tip).remove(),this._isEnabled=null,this._timeout=null,this._hoverState=null,this._activeTrigger=null,this._tether=null,this.element=null,this.config=null,this.tip=null}},{key:"show",value:function(){var b=this,c=a.Event(this.constructor.Event.SHOW);if(this.isWithContent()&&this._isEnabled){a(this.element).trigger(c);var d=a.contains(this.element.ownerDocument.documentElement,this.element);if(c.isDefaultPrevented()||!d)return;var f=this.getTipElement(),g=e["default"].getUID(this.constructor.NAME);f.setAttribute("id",g),this.element.setAttribute("aria-describedby",g),this.setContent(),this.config.animation&&a(f).addClass(r.FADE);var h="function"==typeof this.config.placement?this.config.placement.call(this,f,this.element):this.config.placement,i=this._getAttachment(h);a(f).data(this.constructor.DATA_KEY,this).appendTo(document.body),a(this.element).trigger(this.constructor.Event.INSERTED),this._tether=new Tether({attachment:i,element:f,target:this.element,classes:t,classPrefix:l,offset:this.config.offset,constraints:this.config.constraints,addTargetClasses:!1}),e["default"].reflow(f),this._tether.position(),a(f).addClass(r.IN);var k=function(){var c=b._hoverState;b._hoverState=null,a(b.element).trigger(b.constructor.Event.SHOWN),c===p.OUT&&b._leave(null,b)};if(e["default"].supportsTransitionEnd()&&a(this.tip).hasClass(r.FADE))return void a(this.tip).one(e["default"].TRANSITION_END,k).emulateTransitionEnd(j._TRANSITION_DURATION);k()}}},{key:"hide",value:function(b){var c=this,d=this.getTipElement(),f=a.Event(this.constructor.Event.HIDE),g=function(){c._hoverState!==p.IN&&d.parentNode&&d.parentNode.removeChild(d),c.element.removeAttribute("aria-describedby"),a(c.element).trigger(c.constructor.Event.HIDDEN),c.cleanupTether(),b&&b()};a(this.element).trigger(f),f.isDefaultPrevented()||(a(d).removeClass(r.IN),e["default"].supportsTransitionEnd()&&a(this.tip).hasClass(r.FADE)?a(d).one(e["default"].TRANSITION_END,g).emulateTransitionEnd(k):g(),this._hoverState="")}},{key:"isWithContent",value:function(){return Boolean(this.getTitle())}},{key:"getTipElement",value:function(){return this.tip=this.tip||a(this.config.template)[0]}},{key:"setContent",value:function(){var b=a(this.getTipElement());this.setElementContent(b.find(s.TOOLTIP_INNER),this.getTitle()),b.removeClass(r.FADE).removeClass(r.IN),this.cleanupTether()}},{key:"setElementContent",value:function(b,c){var d=this.config.html;"object"===("undefined"==typeof c?"undefined":f(c))&&(c.nodeType||c.jquery)?d?a(c).parent().is(b)||b.empty().append(c):b.text(a(c).text()):b[d?"html":"text"](c)}},{key:"getTitle",value:function(){var a=this.element.getAttribute("data-original-title");return a||(a="function"==typeof this.config.title?this.config.title.call(this.element):this.config.title),a}},{key:"cleanupTether",value:function(){this._tether&&this._tether.destroy()}},{key:"_getAttachment",value:function(a){return o[a.toUpperCase()]}},{key:"_setListeners",value:function(){var b=this,c=this.config.trigger.split(" ");c.forEach(function(c){if("click"===c)a(b.element).on(b.constructor.Event.CLICK,b.config.selector,a.proxy(b.toggle,b));else if(c!==u.MANUAL){var d=c===u.HOVER?b.constructor.Event.MOUSEENTER:b.constructor.Event.FOCUSIN,e=c===u.HOVER?b.constructor.Event.MOUSELEAVE:b.constructor.Event.FOCUSOUT;a(b.element).on(d,b.config.selector,a.proxy(b._enter,b)).on(e,b.config.selector,a.proxy(b._leave,b))}}),this.config.selector?this.config=a.extend({},this.config,{trigger:"manual",selector:""}):this._fixTitle()}},{key:"_fixTitle",value:function(){var a=f(this.element.getAttribute("data-original-title"));(this.element.getAttribute("title")||"string"!==a)&&(this.element.setAttribute("data-original-title",this.element.getAttribute("title")||""),this.element.setAttribute("title",""))}},{key:"_enter",value:function(b,c){var d=this.constructor.DATA_KEY;return c=c||a(b.currentTarget).data(d),c||(c=new this.constructor(b.currentTarget,this._getDelegateConfig()),a(b.currentTarget).data(d,c)),b&&(c._activeTrigger["focusin"===b.type?u.FOCUS:u.HOVER]=!0),a(c.getTipElement()).hasClass(r.IN)||c._hoverState===p.IN?void(c._hoverState=p.IN):(clearTimeout(c._timeout),c._hoverState=p.IN,c.config.delay&&c.config.delay.show?void(c._timeout=setTimeout(function(){c._hoverState===p.IN&&c.show()},c.config.delay.show)):void c.show())}},{key:"_leave",value:function(b,c){var d=this.constructor.DATA_KEY;if(c=c||a(b.currentTarget).data(d),c||(c=new this.constructor(b.currentTarget,this._getDelegateConfig()),a(b.currentTarget).data(d,c)),b&&(c._activeTrigger["focusout"===b.type?u.FOCUS:u.HOVER]=!1),!c._isWithActiveTrigger())return clearTimeout(c._timeout),c._hoverState=p.OUT,c.config.delay&&c.config.delay.hide?void(c._timeout=setTimeout(function(){c._hoverState===p.OUT&&c.hide()},c.config.delay.hide)):void c.hide()}},{key:"_isWithActiveTrigger",value:function(){for(var a in this._activeTrigger)if(this._activeTrigger[a])return!0;return!1}},{key:"_getConfig",value:function(c){return c=a.extend({},this.constructor.Default,a(this.element).data(),c),c.delay&&"number"==typeof c.delay&&(c.delay={show:c.delay,hide:c.delay}),e["default"].typeCheckConfig(b,c,this.constructor.DefaultType),c}},{key:"_getDelegateConfig",value:function(){var a={};if(this.config)for(var b in this.config)this.constructor.Default[b]!==this.config[b]&&(a[b]=this.config[b]);return a}}],[{key:"_jQueryInterface",value:function(b){return this.each(function(){var c=a(this).data(h),d="object"===("undefined"==typeof b?"undefined":f(b))?b:null;if((c||!/destroy|hide/.test(b))&&(c||(c=new j(this,d),a(this).data(h,c)),"string"==typeof b)){if(void 0===c[b])throw new Error('No method named "'+b+'"');c[b]()}})}},{key:"VERSION",get:function(){return c}},{key:"Default",get:function(){return m}},{key:"NAME",get:function(){return b}},{key:"DATA_KEY",get:function(){return h}},{key:"Event",get:function(){return q}},{key:"EVENT_KEY",get:function(){return i}},{key:"DefaultType",get:function(){return n}}]),j}();return a.fn[b]=v._jQueryInterface,a.fn[b].Constructor=v,a.fn[b].noConflict=function(){return a.fn[b]=j,v._jQueryInterface},v}(jQuery);a["default"]=h}); \ No newline at end of file +define(["exports","jquery","core/popper","./util"],function(a,b,c,d){"use strict";function e(a){return a&&a.__esModule?a:{"default":a}}function f(){return f=Object.assign||function(a){for(var b=1;b
',trigger:"hover focus",title:"",delay:0,html:!1,selector:!1,placement:"top",offset:0,container:!1,fallbackPlacement:"flip",boundary:"scrollParent"},s={SHOW:"show",OUT:"out"},t={HIDE:"hide".concat(e),HIDDEN:"hidden".concat(e),SHOW:"show".concat(e),SHOWN:"shown".concat(e),INSERTED:"inserted".concat(e),CLICK:"click".concat(e),FOCUSIN:"focusin".concat(e),FOCUSOUT:"focusout".concat(e),MOUSEENTER:"mouseenter".concat(e),MOUSELEAVE:"mouseleave".concat(e)},u={FADE:"fade",SHOW:"show"},v={TOOLTIP:".tooltip",TOOLTIP_INNER:".tooltip-inner",ARROW:".arrow"},w={HOVER:"hover",FOCUS:"focus",CLICK:"click",MANUAL:"manual"},x=function(){function i(a,b){if(h(this,i),"undefined"==typeof l["default"])throw new TypeError("Bootstrap tooltips require Popper.js (https://popper.js.org)");this._isEnabled=!0,this._timeout=0,this._hoverState="",this._activeTrigger={},this._popper=null,this.element=a,this.config=this._getConfig(b),this.tip=null,this._setListeners()}return j(i,[{key:"enable",value:function(){this._isEnabled=!0}},{key:"disable",value:function(){this._isEnabled=!1}},{key:"toggleEnabled",value:function(){this._isEnabled=!this._isEnabled}},{key:"toggle",value:function(b){if(this._isEnabled)if(b){var c=this.constructor.DATA_KEY,d=a(b.currentTarget).data(c);d||(d=new this.constructor(b.currentTarget,this._getDelegateConfig()),a(b.currentTarget).data(c,d)),d._activeTrigger.click=!d._activeTrigger.click,d._isWithActiveTrigger()?d._enter(null,d):d._leave(null,d)}else{if(a(this.getTipElement()).hasClass(u.SHOW))return void this._leave(null,this);this._enter(null,this)}}},{key:"dispose",value:function(){clearTimeout(this._timeout),a.removeData(this.element,this.constructor.DATA_KEY),a(this.element).off(this.constructor.EVENT_KEY),a(this.element).closest(".modal").off("hide.bs.modal"),this.tip&&a(this.tip).remove(),this._isEnabled=null,this._timeout=null,this._hoverState=null,this._activeTrigger=null,null!==this._popper&&this._popper.destroy(),this._popper=null,this.element=null,this.config=null,this.tip=null}},{key:"show",value:function(){var b=this;if("none"===a(this.element).css("display"))throw new Error("Please use show on visible elements");var c=a.Event(this.constructor.Event.SHOW);if(this.isWithContent()&&this._isEnabled){a(this.element).trigger(c);var d=a.contains(this.element.ownerDocument.documentElement,this.element);if(c.isDefaultPrevented()||!d)return;var e=this.getTipElement(),f=m["default"].getUID(this.constructor.NAME);e.setAttribute("id",f),this.element.setAttribute("aria-describedby",f),this.setContent(),this.config.animation&&a(e).addClass(u.FADE);var g="function"==typeof this.config.placement?this.config.placement.call(this,e,this.element):this.config.placement,h=this._getAttachment(g);this.addAttachmentClass(h);var j=this.config.container===!1?document.body:a(this.config.container);a(e).data(this.constructor.DATA_KEY,this),a.contains(this.element.ownerDocument.documentElement,this.tip)||a(e).appendTo(j),a(this.element).trigger(this.constructor.Event.INSERTED),this._popper=new l["default"](this.element,e,{placement:h,modifiers:{offset:{offset:this.config.offset},flip:{behavior:this.config.fallbackPlacement},arrow:{element:v.ARROW},preventOverflow:{boundariesElement:this.config.boundary}},onCreate:function(a){a.originalPlacement!==a.placement&&b._handlePopperPlacementChange(a)},onUpdate:function(a){b._handlePopperPlacementChange(a)}}),a(e).addClass(u.SHOW),"ontouchstart"in document.documentElement&&a("body").children().on("mouseover",null,a.noop);var k=function(){b.config.animation&&b._fixTransition();var c=b._hoverState;b._hoverState=null,a(b.element).trigger(b.constructor.Event.SHOWN),c===s.OUT&&b._leave(null,b)};m["default"].supportsTransitionEnd()&&a(this.tip).hasClass(u.FADE)?a(this.tip).one(m["default"].TRANSITION_END,k).emulateTransitionEnd(i._TRANSITION_DURATION):k()}}},{key:"hide",value:function(b){var c=this,d=this.getTipElement(),e=a.Event(this.constructor.Event.HIDE),f=function(){c._hoverState!==s.SHOW&&d.parentNode&&d.parentNode.removeChild(d),c._cleanTipClass(),c.element.removeAttribute("aria-describedby"),a(c.element).trigger(c.constructor.Event.HIDDEN),null!==c._popper&&c._popper.destroy(),b&&b()};a(this.element).trigger(e),e.isDefaultPrevented()||(a(d).removeClass(u.SHOW),"ontouchstart"in document.documentElement&&a("body").children().off("mouseover",null,a.noop),this._activeTrigger[w.CLICK]=!1,this._activeTrigger[w.FOCUS]=!1,this._activeTrigger[w.HOVER]=!1,m["default"].supportsTransitionEnd()&&a(this.tip).hasClass(u.FADE)?a(d).one(m["default"].TRANSITION_END,f).emulateTransitionEnd(k):f(),this._hoverState="")}},{key:"update",value:function(){null!==this._popper&&this._popper.scheduleUpdate()}},{key:"isWithContent",value:function(){return Boolean(this.getTitle())}},{key:"addAttachmentClass",value:function(b){a(this.getTipElement()).addClass("".concat(n,"-").concat(b))}},{key:"getTipElement",value:function(){return this.tip=this.tip||a(this.config.template)[0],this.tip}},{key:"setContent",value:function(){var b=a(this.getTipElement());this.setElementContent(b.find(v.TOOLTIP_INNER),this.getTitle()),b.removeClass("".concat(u.FADE," ").concat(u.SHOW))}},{key:"setElementContent",value:function(b,c){var d=this.config.html;"object"===g(c)&&(c.nodeType||c.jquery)?d?a(c).parent().is(b)||b.empty().append(c):b.text(a(c).text()):b[d?"html":"text"](c)}},{key:"getTitle",value:function(){var a=this.element.getAttribute("data-original-title");return a||(a="function"==typeof this.config.title?this.config.title.call(this.element):this.config.title),a}},{key:"_getAttachment",value:function(a){return q[a.toUpperCase()]}},{key:"_setListeners",value:function(){var b=this,c=this.config.trigger.split(" ");c.forEach(function(c){if("click"===c)a(b.element).on(b.constructor.Event.CLICK,b.config.selector,function(a){return b.toggle(a)});else if(c!==w.MANUAL){var d=c===w.HOVER?b.constructor.Event.MOUSEENTER:b.constructor.Event.FOCUSIN,e=c===w.HOVER?b.constructor.Event.MOUSELEAVE:b.constructor.Event.FOCUSOUT;a(b.element).on(d,b.config.selector,function(a){return b._enter(a)}).on(e,b.config.selector,function(a){return b._leave(a)})}a(b.element).closest(".modal").on("hide.bs.modal",function(){return b.hide()})}),this.config.selector?this.config=f({},this.config,{trigger:"manual",selector:""}):this._fixTitle()}},{key:"_fixTitle",value:function(){var a=g(this.element.getAttribute("data-original-title"));(this.element.getAttribute("title")||"string"!==a)&&(this.element.setAttribute("data-original-title",this.element.getAttribute("title")||""),this.element.setAttribute("title",""))}},{key:"_enter",value:function(b,c){var d=this.constructor.DATA_KEY;return c=c||a(b.currentTarget).data(d),c||(c=new this.constructor(b.currentTarget,this._getDelegateConfig()),a(b.currentTarget).data(d,c)),b&&(c._activeTrigger["focusin"===b.type?w.FOCUS:w.HOVER]=!0),a(c.getTipElement()).hasClass(u.SHOW)||c._hoverState===s.SHOW?void(c._hoverState=s.SHOW):(clearTimeout(c._timeout),c._hoverState=s.SHOW,c.config.delay&&c.config.delay.show?void(c._timeout=setTimeout(function(){c._hoverState===s.SHOW&&c.show()},c.config.delay.show)):void c.show())}},{key:"_leave",value:function(b,c){var d=this.constructor.DATA_KEY;if(c=c||a(b.currentTarget).data(d),c||(c=new this.constructor(b.currentTarget,this._getDelegateConfig()),a(b.currentTarget).data(d,c)),b&&(c._activeTrigger["focusout"===b.type?w.FOCUS:w.HOVER]=!1),!c._isWithActiveTrigger())return clearTimeout(c._timeout),c._hoverState=s.OUT,c.config.delay&&c.config.delay.hide?void(c._timeout=setTimeout(function(){c._hoverState===s.OUT&&c.hide()},c.config.delay.hide)):void c.hide()}},{key:"_isWithActiveTrigger",value:function(){for(var a in this._activeTrigger)if(this._activeTrigger[a])return!0;return!1}},{key:"_getConfig",value:function(c){return c=f({},this.constructor.Default,a(this.element).data(),c),"number"==typeof c.delay&&(c.delay={show:c.delay,hide:c.delay}),"number"==typeof c.title&&(c.title=c.title.toString()),"number"==typeof c.content&&(c.content=c.content.toString()),m["default"].typeCheckConfig(b,c,this.constructor.DefaultType),c}},{key:"_getDelegateConfig",value:function(){var a={};if(this.config)for(var b in this.config)this.constructor.Default[b]!==this.config[b]&&(a[b]=this.config[b]);return a}},{key:"_cleanTipClass",value:function(){var b=a(this.getTipElement()),c=b.attr("class").match(o);null!==c&&c.length>0&&b.removeClass(c.join(""))}},{key:"_handlePopperPlacementChange",value:function(a){this._cleanTipClass(),this.addAttachmentClass(this._getAttachment(a.placement))}},{key:"_fixTransition",value:function(){var b=this.getTipElement(),c=this.config.animation;null===b.getAttribute("x-placement")&&(a(b).removeClass(u.FADE),this.config.animation=!1,this.hide(),this.show(),this.config.animation=c)}}],[{key:"_jQueryInterface",value:function(b){return this.each(function(){var c=a(this).data(d),e="object"===g(b)&&b;if((c||!/dispose|hide/.test(b))&&(c||(c=new i(this,e),a(this).data(d,c)),"string"==typeof b)){if("undefined"==typeof c[b])throw new TypeError('No method named "'.concat(b,'"'));c[b]()}})}},{key:"VERSION",get:function(){return c}},{key:"Default",get:function(){return r}},{key:"NAME",get:function(){return b}},{key:"DATA_KEY",get:function(){return d}},{key:"Event",get:function(){return t}},{key:"EVENT_KEY",get:function(){return e}},{key:"DefaultType",get:function(){return p}}]),i}();return a.fn[b]=x._jQueryInterface,a.fn[b].Constructor=x,a.fn[b].noConflict=function(){return a.fn[b]=i,x._jQueryInterface},x}(k["default"],l["default"]);a["default"]=n}); \ No newline at end of file diff --git a/theme/boost/amd/build/util.min.js b/theme/boost/amd/build/util.min.js index df57c9d7be1..3ecdb77c63f 100644 --- a/theme/boost/amd/build/util.min.js +++ b/theme/boost/amd/build/util.min.js @@ -1 +1 @@ -define(["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var b=function(a){function b(a){return{}.toString.call(a).match(/\s([a-zA-Z]+)/)[1].toLowerCase()}function c(a){return(a[0]||a).nodeType}function d(){return{bindType:h.end,delegateType:h.end,handle:function(b){if(a(b.target).is(this))return b.handleObj.handler.apply(this,arguments)}}}function e(){if(window.QUnit)return!1;var a=document.createElement("bootstrap");for(var b in j)if(void 0!==a.style[b])return{end:j[b]};return!1}function f(b){var c=this,d=!1;return a(this).one(k.TRANSITION_END,function(){d=!0}),setTimeout(function(){d||k.triggerTransitionEnd(c)},b),this}function g(){h=e(),a.fn.emulateTransitionEnd=f,k.supportsTransitionEnd()&&(a.event.special[k.TRANSITION_END]=d())}var h=!1,i=1e6,j={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},k={TRANSITION_END:"bsTransitionEnd",getUID:function(a){do a+=~~(Math.random()*i);while(document.getElementById(a));return a},getSelectorFromElement:function(a){var b=a.getAttribute("data-target");return b||(b=a.getAttribute("href")||"",b=/^#[a-z]/i.test(b)?b:null),b},reflow:function(a){new Function("bs","return bs")(a.offsetHeight)},triggerTransitionEnd:function(b){a(b).trigger(h.end)},supportsTransitionEnd:function(){return Boolean(h)},typeCheckConfig:function(a,d,e){for(var f in e)if(e.hasOwnProperty(f)){var g=e[f],h=d[f],i=void 0;if(i=h&&c(h)?"element":b(h),!new RegExp(g).test(i))throw new Error(a.toUpperCase()+": "+('Option "'+f+'" provided type "'+i+'" ')+('but expected type "'+g+'".'))}}};return g(),k}(jQuery);a["default"]=b}); \ No newline at end of file +define(["exports","jquery"],function(a,b){"use strict";function c(a){return a&&a.__esModule?a:{"default":a}}Object.defineProperty(a,"__esModule",{value:!0});var d=c(b),e=function(a){function b(a){return{}.toString.call(a).match(/\s([a-zA-Z]+)/)[1].toLowerCase()}function c(){return{bindType:h.end,delegateType:h.end,handle:function(b){if(a(b.target).is(this))return b.handleObj.handler.apply(this,arguments)}}}function d(){return("undefined"==typeof window||!window.QUnit)&&{end:"transitionend"}}function e(b){var c=this,d=!1;return a(this).one(j.TRANSITION_END,function(){d=!0}),setTimeout(function(){d||j.triggerTransitionEnd(c)},b),this}function f(){h=d(),a.fn.emulateTransitionEnd=e,j.supportsTransitionEnd()&&(a.event.special[j.TRANSITION_END]=c())}function g(b){return b="function"==typeof a.escapeSelector?a.escapeSelector(b).substr(1):b.replace(/(:|\.|\[|\]|,|=|@)/g,"\\$1")}var h=!1,i=1e6,j={TRANSITION_END:"bsTransitionEnd",getUID:function(a){do a+=~~(Math.random()*i);while(document.getElementById(a));return a},getSelectorFromElement:function(b){var c=b.getAttribute("data-target");c&&"#"!==c||(c=b.getAttribute("href")||""),"#"===c.charAt(0)&&(c=g(c));try{var d=a(document).find(c);return d.length>0?c:null}catch(e){return null}},reflow:function(a){return a.offsetHeight},triggerTransitionEnd:function(b){a(b).trigger(h.end)},supportsTransitionEnd:function(){return Boolean(h)},isElement:function(a){return(a[0]||a).nodeType},typeCheckConfig:function(a,c,d){for(var e in d)if(Object.prototype.hasOwnProperty.call(d,e)){var f=d[e],g=c[e],h=g&&j.isElement(g)?"element":b(g);if(!new RegExp(f).test(h))throw new Error("".concat(a.toUpperCase(),": ")+'Option "'.concat(e,'" provided type "').concat(h,'" ')+'but expected type "'.concat(f,'".'))}}};return f(),j}(d["default"]);a["default"]=e}); \ No newline at end of file diff --git a/theme/boost/amd/src/alert.js b/theme/boost/amd/src/alert.js index fcd11d45871..4d3065eca91 100644 --- a/theme/boost/amd/src/alert.js +++ b/theme/boost/amd/src/alert.js @@ -1,10 +1,12 @@ -define(['exports', './util'], function (exports, _util) { - 'use strict'; +define(["exports", "jquery", "./util"], function (exports, _jquery, _util) { + "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); + var _jquery2 = _interopRequireDefault(_jquery); + var _util2 = _interopRequireDefault(_util); function _interopRequireDefault(obj) { @@ -19,84 +21,76 @@ define(['exports', './util'], function (exports, _util) { } } - var _createClass = function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); } + } - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; - }(); + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } /** * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0-alpha.4): alert.js + * Bootstrap (v4.0.0): alert.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ - var Alert = function ($) { - /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ */ - var NAME = 'alert'; - var VERSION = '4.0.0-alpha.4'; + var VERSION = '4.0.0'; var DATA_KEY = 'bs.alert'; - var EVENT_KEY = '.' + DATA_KEY; + var EVENT_KEY = ".".concat(DATA_KEY); var DATA_API_KEY = '.data-api'; var JQUERY_NO_CONFLICT = $.fn[NAME]; var TRANSITION_DURATION = 150; - var Selector = { DISMISS: '[data-dismiss="alert"]' }; - var Event = { - CLOSE: 'close' + EVENT_KEY, - CLOSED: 'closed' + EVENT_KEY, - CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY + CLOSE: "close".concat(EVENT_KEY), + CLOSED: "closed".concat(EVENT_KEY), + CLICK_DATA_API: "click".concat(EVENT_KEY).concat(DATA_API_KEY) }; - var ClassName = { ALERT: 'alert', FADE: 'fade', - IN: 'in' - }; + SHOW: 'show' + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ - /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ - */ + }; var Alert = function () { function Alert(element) { _classCallCheck(this, Alert); this._element = element; - } + } // Getters - // getters _createClass(Alert, [{ - key: 'close', + key: "close", value: function close(element) { element = element || this._element; var rootElement = this._getRootElement(element); + var customEvent = this._triggerCloseEvent(rootElement); if (customEvent.isDefaultPrevented()) { @@ -106,15 +100,16 @@ define(['exports', './util'], function (exports, _util) { this._removeElement(rootElement); } }, { - key: 'dispose', + key: "dispose", value: function dispose() { $.removeData(this._element, DATA_KEY); this._element = null; } }, { - key: '_getRootElement', + key: "_getRootElement", value: function _getRootElement(element) { var selector = _util2.default.getSelectorFromElement(element); + var parent = false; if (selector) { @@ -122,38 +117,42 @@ define(['exports', './util'], function (exports, _util) { } if (!parent) { - parent = $(element).closest('.' + ClassName.ALERT)[0]; + parent = $(element).closest(".".concat(ClassName.ALERT))[0]; } return parent; } }, { - key: '_triggerCloseEvent', + key: "_triggerCloseEvent", value: function _triggerCloseEvent(element) { var closeEvent = $.Event(Event.CLOSE); - $(element).trigger(closeEvent); return closeEvent; } }, { - key: '_removeElement', + key: "_removeElement", value: function _removeElement(element) { - $(element).removeClass(ClassName.IN); + var _this = this; + + $(element).removeClass(ClassName.SHOW); if (!_util2.default.supportsTransitionEnd() || !$(element).hasClass(ClassName.FADE)) { this._destroyElement(element); + return; } - $(element).one(_util2.default.TRANSITION_END, $.proxy(this._destroyElement, this, element)).emulateTransitionEnd(TRANSITION_DURATION); + $(element).one(_util2.default.TRANSITION_END, function (event) { + return _this._destroyElement(element, event); + }).emulateTransitionEnd(TRANSITION_DURATION); } }, { - key: '_destroyElement', + key: "_destroyElement", value: function _destroyElement(element) { $(element).detach().trigger(Event.CLOSED).remove(); } }], [{ - key: '_jQueryInterface', + key: "_jQueryInterface", value: function _jQueryInterface(config) { return this.each(function () { var $element = $(this); @@ -170,7 +169,7 @@ define(['exports', './util'], function (exports, _util) { }); } }, { - key: '_handleDismiss', + key: "_handleDismiss", value: function _handleDismiss(alertInstance) { return function (event) { if (event) { @@ -181,7 +180,7 @@ define(['exports', './util'], function (exports, _util) { }; } }, { - key: 'VERSION', + key: "VERSION", get: function get() { return VERSION; } @@ -195,9 +194,7 @@ define(['exports', './util'], function (exports, _util) { * Data Api implementation * ------------------------------------------------------------------------ */ - $(document).on(Event.CLICK_DATA_API, Selector.DISMISS, Alert._handleDismiss(new Alert())); - /** * ------------------------------------------------------------------------ * jQuery @@ -206,13 +203,14 @@ define(['exports', './util'], function (exports, _util) { $.fn[NAME] = Alert._jQueryInterface; $.fn[NAME].Constructor = Alert; + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT; return Alert._jQueryInterface; }; return Alert; - }(jQuery); + }(_jquery2.default); exports.default = Alert; }); \ No newline at end of file diff --git a/theme/boost/amd/src/button.js b/theme/boost/amd/src/button.js index 20436a13fb3..00a407a66dc 100644 --- a/theme/boost/amd/src/button.js +++ b/theme/boost/amd/src/button.js @@ -1,62 +1,63 @@ -define(['exports'], function (exports) { - 'use strict'; +define(["exports", "jquery"], function (exports, _jquery) { + "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); + var _jquery2 = _interopRequireDefault(_jquery); + + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: obj + }; + } + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - var _createClass = function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); } + } - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; - }(); + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } /** * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0-alpha.4): button.js + * Bootstrap (v4.0.0): button.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ - var Button = function ($) { - /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ */ - var NAME = 'button'; - var VERSION = '4.0.0-alpha.4'; + var VERSION = '4.0.0'; var DATA_KEY = 'bs.button'; - var EVENT_KEY = '.' + DATA_KEY; + var EVENT_KEY = ".".concat(DATA_KEY); var DATA_API_KEY = '.data-api'; var JQUERY_NO_CONFLICT = $.fn[NAME]; - var ClassName = { ACTIVE: 'active', BUTTON: 'btn', FOCUS: 'focus' }; - var Selector = { DATA_TOGGLE_CARROT: '[data-toggle^="button"]', DATA_TOGGLE: '[data-toggle="buttons"]', @@ -64,31 +65,30 @@ define(['exports'], function (exports) { ACTIVE: '.active', BUTTON: '.btn' }; - var Event = { - CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY, - FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY) - }; + CLICK_DATA_API: "click".concat(EVENT_KEY).concat(DATA_API_KEY), + FOCUS_BLUR_DATA_API: "focus".concat(EVENT_KEY).concat(DATA_API_KEY, " ") + "blur".concat(EVENT_KEY).concat(DATA_API_KEY) + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ - /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ - */ + }; var Button = function () { function Button(element) { _classCallCheck(this, Button); this._element = element; - } + } // Getters - // getters _createClass(Button, [{ - key: 'toggle', + key: "toggle", value: function toggle() { var triggerChangeEvent = true; + var addAriaPressed = true; var rootElement = $(this._element).closest(Selector.DATA_TOGGLE)[0]; if (rootElement) { @@ -108,13 +108,20 @@ define(['exports'], function (exports) { } if (triggerChangeEvent) { + if (input.hasAttribute('disabled') || rootElement.hasAttribute('disabled') || input.classList.contains('disabled') || rootElement.classList.contains('disabled')) { + return; + } + input.checked = !$(this._element).hasClass(ClassName.ACTIVE); - $(this._element).trigger('change'); + $(input).trigger('change'); } input.focus(); + addAriaPressed = false; } - } else { + } + + if (addAriaPressed) { this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE)); } @@ -123,13 +130,13 @@ define(['exports'], function (exports) { } } }, { - key: 'dispose', + key: "dispose", value: function dispose() { $.removeData(this._element, DATA_KEY); this._element = null; } }], [{ - key: '_jQueryInterface', + key: "_jQueryInterface", value: function _jQueryInterface(config) { return this.each(function () { var data = $(this).data(DATA_KEY); @@ -145,7 +152,7 @@ define(['exports'], function (exports) { }); } }, { - key: 'VERSION', + key: "VERSION", get: function get() { return VERSION; } @@ -159,10 +166,8 @@ define(['exports'], function (exports) { * Data Api implementation * ------------------------------------------------------------------------ */ - $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, function (event) { event.preventDefault(); - var button = event.target; if (!$(button).hasClass(ClassName.BUTTON)) { @@ -174,7 +179,6 @@ define(['exports'], function (exports) { var button = $(event.target).closest(Selector.BUTTON)[0]; $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type)); }); - /** * ------------------------------------------------------------------------ * jQuery @@ -183,13 +187,14 @@ define(['exports'], function (exports) { $.fn[NAME] = Button._jQueryInterface; $.fn[NAME].Constructor = Button; + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT; return Button._jQueryInterface; }; return Button; - }(jQuery); + }(_jquery2.default); exports.default = Button; }); \ No newline at end of file diff --git a/theme/boost/amd/src/carousel.js b/theme/boost/amd/src/carousel.js index f57e4d514f1..c1a9e67ea63 100644 --- a/theme/boost/amd/src/carousel.js +++ b/theme/boost/amd/src/carousel.js @@ -1,10 +1,12 @@ -define(['exports', './util'], function (exports, _util) { - 'use strict'; +define(["exports", "jquery", "./util"], function (exports, _jquery, _util) { + "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); + var _jquery2 = _interopRequireDefault(_jquery); + var _util2 = _interopRequireDefault(_util); function _interopRequireDefault(obj) { @@ -13,11 +15,37 @@ define(['exports', './util'], function (exports, _util) { }; } - var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { - return typeof obj; - } : function (obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; - }; + function _typeof(obj) { + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function _typeof(obj) { + return typeof obj; + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); + } + + function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); + } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { @@ -25,49 +53,47 @@ define(['exports', './util'], function (exports, _util) { } } - var _createClass = function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); } + } - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; - }(); + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } /** * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0-alpha.4): carousel.js + * Bootstrap (v4.0.0): carousel.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ - var Carousel = function ($) { - /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ */ - var NAME = 'carousel'; - var VERSION = '4.0.0-alpha.4'; + var VERSION = '4.0.0'; var DATA_KEY = 'bs.carousel'; - var EVENT_KEY = '.' + DATA_KEY; + var EVENT_KEY = ".".concat(DATA_KEY); var DATA_API_KEY = '.data-api'; var JQUERY_NO_CONFLICT = $.fn[NAME]; var TRANSITION_DURATION = 600; var ARROW_LEFT_KEYCODE = 37; // KeyboardEvent.which value for left arrow key + var ARROW_RIGHT_KEYCODE = 39; // KeyboardEvent.which value for right arrow key + var TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch + var Default = { interval: 5000, keyboard: true, @@ -75,7 +101,6 @@ define(['exports', './util'], function (exports, _util) { pause: 'hover', wrap: true }; - var DefaultType = { interval: '(number|boolean)', keyboard: 'boolean', @@ -83,46 +108,47 @@ define(['exports', './util'], function (exports, _util) { pause: '(string|boolean)', wrap: 'boolean' }; - var Direction = { NEXT: 'next', - PREVIOUS: 'prev' + PREV: 'prev', + LEFT: 'left', + RIGHT: 'right' }; - var Event = { - SLIDE: 'slide' + EVENT_KEY, - SLID: 'slid' + EVENT_KEY, - KEYDOWN: 'keydown' + EVENT_KEY, - MOUSEENTER: 'mouseenter' + EVENT_KEY, - MOUSELEAVE: 'mouseleave' + EVENT_KEY, - LOAD_DATA_API: 'load' + EVENT_KEY + DATA_API_KEY, - CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY + SLIDE: "slide".concat(EVENT_KEY), + SLID: "slid".concat(EVENT_KEY), + KEYDOWN: "keydown".concat(EVENT_KEY), + MOUSEENTER: "mouseenter".concat(EVENT_KEY), + MOUSELEAVE: "mouseleave".concat(EVENT_KEY), + TOUCHEND: "touchend".concat(EVENT_KEY), + LOAD_DATA_API: "load".concat(EVENT_KEY).concat(DATA_API_KEY), + CLICK_DATA_API: "click".concat(EVENT_KEY).concat(DATA_API_KEY) }; - var ClassName = { CAROUSEL: 'carousel', ACTIVE: 'active', SLIDE: 'slide', - RIGHT: 'right', - LEFT: 'left', + RIGHT: 'carousel-item-right', + LEFT: 'carousel-item-left', + NEXT: 'carousel-item-next', + PREV: 'carousel-item-prev', ITEM: 'carousel-item' }; - var Selector = { ACTIVE: '.active', ACTIVE_ITEM: '.active.carousel-item', ITEM: '.carousel-item', - NEXT_PREV: '.next, .prev', + NEXT_PREV: '.carousel-item-next, .carousel-item-prev', INDICATORS: '.carousel-indicators', DATA_SLIDE: '[data-slide], [data-slide-to]', DATA_RIDE: '[data-ride="carousel"]' - }; + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ - /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ - */ + }; var Carousel = function () { function Carousel(element, config) { @@ -131,43 +157,42 @@ define(['exports', './util'], function (exports, _util) { this._items = null; this._interval = null; this._activeElement = null; - this._isPaused = false; this._isSliding = false; - + this.touchTimeout = null; this._config = this._getConfig(config); this._element = $(element)[0]; this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0]; this._addEventListeners(); - } + } // Getters - // getters _createClass(Carousel, [{ - key: 'next', + key: "next", value: function next() { if (!this._isSliding) { this._slide(Direction.NEXT); } } }, { - key: 'nextWhenVisible', + key: "nextWhenVisible", value: function nextWhenVisible() { // Don't call next when the page isn't visible - if (!document.hidden) { + // or the carousel or its parent isn't visible + if (!document.hidden && $(this._element).is(':visible') && $(this._element).css('visibility') !== 'hidden') { this.next(); } } }, { - key: 'prev', + key: "prev", value: function prev() { if (!this._isSliding) { - this._slide(Direction.PREVIOUS); + this._slide(Direction.PREV); } } }, { - key: 'pause', + key: "pause", value: function pause(event) { if (!event) { this._isPaused = true; @@ -175,6 +200,7 @@ define(['exports', './util'], function (exports, _util) { if ($(this._element).find(Selector.NEXT_PREV)[0] && _util2.default.supportsTransitionEnd()) { _util2.default.triggerTransitionEnd(this._element); + this.cycle(true); } @@ -182,7 +208,7 @@ define(['exports', './util'], function (exports, _util) { this._interval = null; } }, { - key: 'cycle', + key: "cycle", value: function cycle(event) { if (!event) { this._isPaused = false; @@ -194,11 +220,11 @@ define(['exports', './util'], function (exports, _util) { } if (this._config.interval && !this._isPaused) { - this._interval = setInterval($.proxy(document.visibilityState ? this.nextWhenVisible : this.next, this), this._config.interval); + this._interval = setInterval((document.visibilityState ? this.nextWhenVisible : this.next).bind(this), this._config.interval); } } }, { - key: 'to', + key: "to", value: function to(index) { var _this = this; @@ -223,16 +249,15 @@ define(['exports', './util'], function (exports, _util) { return; } - var direction = index > activeIndex ? Direction.NEXT : Direction.PREVIOUS; + var direction = index > activeIndex ? Direction.NEXT : Direction.PREV; this._slide(direction, this._items[index]); } }, { - key: 'dispose', + key: "dispose", value: function dispose() { $(this._element).off(EVENT_KEY); $.removeData(this._element, DATA_KEY); - this._items = null; this._config = null; this._element = null; @@ -243,55 +268,89 @@ define(['exports', './util'], function (exports, _util) { this._indicatorsElement = null; } }, { - key: '_getConfig', + key: "_getConfig", value: function _getConfig(config) { - config = $.extend({}, Default, config); + config = _extends({}, Default, config); + _util2.default.typeCheckConfig(NAME, config, DefaultType); + return config; } }, { - key: '_addEventListeners', + key: "_addEventListeners", value: function _addEventListeners() { + var _this2 = this; + if (this._config.keyboard) { - $(this._element).on(Event.KEYDOWN, $.proxy(this._keydown, this)); + $(this._element).on(Event.KEYDOWN, function (event) { + return _this2._keydown(event); + }); } - if (this._config.pause === 'hover' && !('ontouchstart' in document.documentElement)) { - $(this._element).on(Event.MOUSEENTER, $.proxy(this.pause, this)).on(Event.MOUSELEAVE, $.proxy(this.cycle, this)); + if (this._config.pause === 'hover') { + $(this._element).on(Event.MOUSEENTER, function (event) { + return _this2.pause(event); + }).on(Event.MOUSELEAVE, function (event) { + return _this2.cycle(event); + }); + + if ('ontouchstart' in document.documentElement) { + // If it's a touch-enabled device, mouseenter/leave are fired as + // part of the mouse compatibility events on first tap - the carousel + // would stop cycling until user tapped out of it; + // here, we listen for touchend, explicitly pause the carousel + // (as if it's the second time we tap on it, mouseenter compat event + // is NOT fired) and after a timeout (to allow for mouse compatibility + // events to fire) we explicitly restart cycling + $(this._element).on(Event.TOUCHEND, function () { + _this2.pause(); + + if (_this2.touchTimeout) { + clearTimeout(_this2.touchTimeout); + } + + _this2.touchTimeout = setTimeout(function (event) { + return _this2.cycle(event); + }, TOUCHEVENT_COMPAT_WAIT + _this2._config.interval); + }); + } } } }, { - key: '_keydown', + key: "_keydown", value: function _keydown(event) { - event.preventDefault(); - if (/input|textarea/i.test(event.target.tagName)) { return; } switch (event.which) { case ARROW_LEFT_KEYCODE: + event.preventDefault(); this.prev(); break; + case ARROW_RIGHT_KEYCODE: + event.preventDefault(); this.next(); break; + default: - return; } } }, { - key: '_getItemIndex', + key: "_getItemIndex", value: function _getItemIndex(element) { this._items = $.makeArray($(element).parent().find(Selector.ITEM)); return this._items.indexOf(element); } }, { - key: '_getItemByDirection', + key: "_getItemByDirection", value: function _getItemByDirection(direction, activeElement) { var isNextDirection = direction === Direction.NEXT; - var isPrevDirection = direction === Direction.PREVIOUS; + var isPrevDirection = direction === Direction.PREV; + var activeIndex = this._getItemIndex(activeElement); + var lastItemIndex = this._items.length - 1; var isGoingToWrap = isPrevDirection && activeIndex === 0 || isNextDirection && activeIndex === lastItemIndex; @@ -299,25 +358,28 @@ define(['exports', './util'], function (exports, _util) { return activeElement; } - var delta = direction === Direction.PREVIOUS ? -1 : 1; + var delta = direction === Direction.PREV ? -1 : 1; var itemIndex = (activeIndex + delta) % this._items.length; - return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex]; } }, { - key: '_triggerSlideEvent', - value: function _triggerSlideEvent(relatedTarget, directionalClassname) { + key: "_triggerSlideEvent", + value: function _triggerSlideEvent(relatedTarget, eventDirectionName) { + var targetIndex = this._getItemIndex(relatedTarget); + + var fromIndex = this._getItemIndex($(this._element).find(Selector.ACTIVE_ITEM)[0]); + var slideEvent = $.Event(Event.SLIDE, { relatedTarget: relatedTarget, - direction: directionalClassname + direction: eventDirectionName, + from: fromIndex, + to: targetIndex }); - $(this._element).trigger(slideEvent); - return slideEvent; } }, { - key: '_setActiveIndicatorElement', + key: "_setActiveIndicatorElement", value: function _setActiveIndicatorElement(element) { if (this._indicatorsElement) { $(this._indicatorsElement).find(Selector.ACTIVE).removeClass(ClassName.ACTIVE); @@ -330,29 +392,46 @@ define(['exports', './util'], function (exports, _util) { } } }, { - key: '_slide', + key: "_slide", value: function _slide(direction, element) { - var _this2 = this; + var _this3 = this; var activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0]; + + var activeElementIndex = this._getItemIndex(activeElement); + var nextElement = element || activeElement && this._getItemByDirection(direction, activeElement); - var isCycling = Boolean(this._interval); + var nextElementIndex = this._getItemIndex(nextElement); - var directionalClassName = direction === Direction.NEXT ? ClassName.LEFT : ClassName.RIGHT; + var isCycling = Boolean(this._interval); + var directionalClassName; + var orderClassName; + var eventDirectionName; + + if (direction === Direction.NEXT) { + directionalClassName = ClassName.LEFT; + orderClassName = ClassName.NEXT; + eventDirectionName = Direction.LEFT; + } else { + directionalClassName = ClassName.RIGHT; + orderClassName = ClassName.PREV; + eventDirectionName = Direction.RIGHT; + } if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) { this._isSliding = false; return; } - var slideEvent = this._triggerSlideEvent(nextElement, directionalClassName); + var slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName); + if (slideEvent.isDefaultPrevented()) { return; } if (!activeElement || !nextElement) { - // some weirdness is happening, so we bail + // Some weirdness is happening, so we bail return; } @@ -366,35 +445,29 @@ define(['exports', './util'], function (exports, _util) { var slidEvent = $.Event(Event.SLID, { relatedTarget: nextElement, - direction: directionalClassName + direction: eventDirectionName, + from: activeElementIndex, + to: nextElementIndex }); if (_util2.default.supportsTransitionEnd() && $(this._element).hasClass(ClassName.SLIDE)) { - - $(nextElement).addClass(direction); + $(nextElement).addClass(orderClassName); _util2.default.reflow(nextElement); $(activeElement).addClass(directionalClassName); $(nextElement).addClass(directionalClassName); - $(activeElement).one(_util2.default.TRANSITION_END, function () { - $(nextElement).removeClass(directionalClassName).removeClass(direction); - - $(nextElement).addClass(ClassName.ACTIVE); - - $(activeElement).removeClass(ClassName.ACTIVE).removeClass(direction).removeClass(directionalClassName); - - _this2._isSliding = false; - + $(nextElement).removeClass("".concat(directionalClassName, " ").concat(orderClassName)).addClass(ClassName.ACTIVE); + $(activeElement).removeClass("".concat(ClassName.ACTIVE, " ").concat(orderClassName, " ").concat(directionalClassName)); + _this3._isSliding = false; setTimeout(function () { - return $(_this2._element).trigger(slidEvent); + return $(_this3._element).trigger(slidEvent); }, 0); }).emulateTransitionEnd(TRANSITION_DURATION); } else { $(activeElement).removeClass(ClassName.ACTIVE); $(nextElement).addClass(ClassName.ACTIVE); - this._isSliding = false; $(this._element).trigger(slidEvent); } @@ -404,14 +477,15 @@ define(['exports', './util'], function (exports, _util) { } } }], [{ - key: '_jQueryInterface', + key: "_jQueryInterface", value: function _jQueryInterface(config) { return this.each(function () { var data = $(this).data(DATA_KEY); - var _config = $.extend({}, Default, $(this).data()); - if ((typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object') { - $.extend(_config, config); + var _config = _extends({}, Default, $(this).data()); + + if (_typeof(config) === 'object') { + _config = _extends({}, _config, config); } var action = typeof config === 'string' ? config : _config.slide; @@ -424,9 +498,10 @@ define(['exports', './util'], function (exports, _util) { if (typeof config === 'number') { data.to(config); } else if (typeof action === 'string') { - if (data[action] === undefined) { - throw new Error('No method named "' + action + '"'); + if (typeof data[action] === 'undefined') { + throw new TypeError("No method named \"".concat(action, "\"")); } + data[action](); } else if (_config.interval) { data.pause(); @@ -435,7 +510,7 @@ define(['exports', './util'], function (exports, _util) { }); } }, { - key: '_dataApiClickHandler', + key: "_dataApiClickHandler", value: function _dataApiClickHandler(event) { var selector = _util2.default.getSelectorFromElement(this); @@ -449,7 +524,8 @@ define(['exports', './util'], function (exports, _util) { return; } - var config = $.extend({}, $(target).data(), $(this).data()); + var config = _extends({}, $(target).data(), $(this).data()); + var slideIndex = this.getAttribute('data-slide-to'); if (slideIndex) { @@ -465,12 +541,12 @@ define(['exports', './util'], function (exports, _util) { event.preventDefault(); } }, { - key: 'VERSION', + key: "VERSION", get: function get() { return VERSION; } }, { - key: 'Default', + key: "Default", get: function get() { return Default; } @@ -484,16 +560,14 @@ define(['exports', './util'], function (exports, _util) { * Data Api implementation * ------------------------------------------------------------------------ */ - $(document).on(Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler); - $(window).on(Event.LOAD_DATA_API, function () { $(Selector.DATA_RIDE).each(function () { var $carousel = $(this); + Carousel._jQueryInterface.call($carousel, $carousel.data()); }); }); - /** * ------------------------------------------------------------------------ * jQuery @@ -502,13 +576,14 @@ define(['exports', './util'], function (exports, _util) { $.fn[NAME] = Carousel._jQueryInterface; $.fn[NAME].Constructor = Carousel; + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT; return Carousel._jQueryInterface; }; return Carousel; - }(jQuery); + }(_jquery2.default); exports.default = Carousel; }); \ No newline at end of file diff --git a/theme/boost/amd/src/collapse.js b/theme/boost/amd/src/collapse.js index 25cf3cfe877..636cd5f8616 100644 --- a/theme/boost/amd/src/collapse.js +++ b/theme/boost/amd/src/collapse.js @@ -1,10 +1,12 @@ -define(['exports', './util'], function (exports, _util) { - 'use strict'; +define(["exports", "jquery", "./util"], function (exports, _jquery, _util) { + "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); + var _jquery2 = _interopRequireDefault(_jquery); + var _util2 = _interopRequireDefault(_util); function _interopRequireDefault(obj) { @@ -13,11 +15,37 @@ define(['exports', './util'], function (exports, _util) { }; } - var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { - return typeof obj; - } : function (obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; - }; + function _typeof(obj) { + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function _typeof(obj) { + return typeof obj; + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); + } + + function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); + } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { @@ -25,87 +53,76 @@ define(['exports', './util'], function (exports, _util) { } } - var _createClass = function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); } + } - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; - }(); + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } /** * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0-alpha.4): collapse.js + * Bootstrap (v4.0.0): collapse.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ - var Collapse = function ($) { - /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ */ - var NAME = 'collapse'; - var VERSION = '4.0.0-alpha.4'; + var VERSION = '4.0.0'; var DATA_KEY = 'bs.collapse'; - var EVENT_KEY = '.' + DATA_KEY; + var EVENT_KEY = ".".concat(DATA_KEY); var DATA_API_KEY = '.data-api'; var JQUERY_NO_CONFLICT = $.fn[NAME]; var TRANSITION_DURATION = 600; - var Default = { toggle: true, parent: '' }; - var DefaultType = { toggle: 'boolean', - parent: 'string' + parent: '(string|element)' }; - var Event = { - SHOW: 'show' + EVENT_KEY, - SHOWN: 'shown' + EVENT_KEY, - HIDE: 'hide' + EVENT_KEY, - HIDDEN: 'hidden' + EVENT_KEY, - CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY + SHOW: "show".concat(EVENT_KEY), + SHOWN: "shown".concat(EVENT_KEY), + HIDE: "hide".concat(EVENT_KEY), + HIDDEN: "hidden".concat(EVENT_KEY), + CLICK_DATA_API: "click".concat(EVENT_KEY).concat(DATA_API_KEY) }; - var ClassName = { - IN: 'in', + SHOW: 'show', COLLAPSE: 'collapse', COLLAPSING: 'collapsing', COLLAPSED: 'collapsed' }; - var Dimension = { WIDTH: 'width', HEIGHT: 'height' }; - var Selector = { - ACTIVES: '.panel > .in, .panel > .collapsing', + ACTIVES: '.show, .collapsing', DATA_TOGGLE: '[data-toggle="collapse"]' - }; + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ - /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ - */ + }; var Collapse = function () { function Collapse(element, config) { @@ -114,7 +131,20 @@ define(['exports', './util'], function (exports, _util) { this._isTransitioning = false; this._element = element; this._config = this._getConfig(config); - this._triggerArray = $.makeArray($('[data-toggle="collapse"][href="#' + element.id + '"],' + ('[data-toggle="collapse"][data-target="#' + element.id + '"]'))); + this._triggerArray = $.makeArray($("[data-toggle=\"collapse\"][href=\"#".concat(element.id, "\"],") + "[data-toggle=\"collapse\"][data-target=\"#".concat(element.id, "\"]"))); + var tabToggles = $(Selector.DATA_TOGGLE); + + for (var i = 0; i < tabToggles.length; i++) { + var elem = tabToggles[i]; + + var selector = _util2.default.getSelectorFromElement(elem); + + if (selector !== null && $(selector).filter(element).length > 0) { + this._selector = selector; + + this._triggerArray.push(elem); + } + } this._parent = this._config.parent ? this._getParent() : null; @@ -125,40 +155,41 @@ define(['exports', './util'], function (exports, _util) { if (this._config.toggle) { this.toggle(); } - } + } // Getters - // getters _createClass(Collapse, [{ - key: 'toggle', + key: "toggle", value: function toggle() { - if ($(this._element).hasClass(ClassName.IN)) { + if ($(this._element).hasClass(ClassName.SHOW)) { this.hide(); } else { this.show(); } } }, { - key: 'show', + key: "show", value: function show() { var _this = this; - if (this._isTransitioning || $(this._element).hasClass(ClassName.IN)) { + if (this._isTransitioning || $(this._element).hasClass(ClassName.SHOW)) { return; } - var actives = void 0; - var activesData = void 0; + var actives; + var activesData; if (this._parent) { - actives = $.makeArray($(Selector.ACTIVES)); - if (!actives.length) { + actives = $.makeArray($(this._parent).find(Selector.ACTIVES).filter("[data-parent=\"".concat(this._config.parent, "\"]"))); + + if (actives.length === 0) { actives = null; } } if (actives) { - activesData = $(actives).data(DATA_KEY); + activesData = $(actives).not(this._selector).data(DATA_KEY); + if (activesData && activesData._isTransitioning) { return; } @@ -166,12 +197,14 @@ define(['exports', './util'], function (exports, _util) { var startEvent = $.Event(Event.SHOW); $(this._element).trigger(startEvent); + if (startEvent.isDefaultPrevented()) { return; } if (actives) { - Collapse._jQueryInterface.call($(actives), 'hide'); + Collapse._jQueryInterface.call($(actives).not(this._selector), 'hide'); + if (!activesData) { $(actives).data(DATA_KEY, null); } @@ -180,19 +213,16 @@ define(['exports', './util'], function (exports, _util) { var dimension = this._getDimension(); $(this._element).removeClass(ClassName.COLLAPSE).addClass(ClassName.COLLAPSING); - this._element.style[dimension] = 0; - this._element.setAttribute('aria-expanded', true); - if (this._triggerArray.length) { + if (this._triggerArray.length > 0) { $(this._triggerArray).removeClass(ClassName.COLLAPSED).attr('aria-expanded', true); } this.setTransitioning(true); var complete = function complete() { - $(_this._element).removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE).addClass(ClassName.IN); - + $(_this._element).removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE).addClass(ClassName.SHOW); _this._element.style[dimension] = ''; _this.setTransitioning(false); @@ -206,50 +236,59 @@ define(['exports', './util'], function (exports, _util) { } var capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1); - var scrollSize = 'scroll' + capitalizedDimension; - + var scrollSize = "scroll".concat(capitalizedDimension); $(this._element).one(_util2.default.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION); - - this._element.style[dimension] = this._element[scrollSize] + 'px'; + this._element.style[dimension] = "".concat(this._element[scrollSize], "px"); } }, { - key: 'hide', + key: "hide", value: function hide() { var _this2 = this; - if (this._isTransitioning || !$(this._element).hasClass(ClassName.IN)) { + if (this._isTransitioning || !$(this._element).hasClass(ClassName.SHOW)) { return; } var startEvent = $.Event(Event.HIDE); $(this._element).trigger(startEvent); + if (startEvent.isDefaultPrevented()) { return; } var dimension = this._getDimension(); - var offsetDimension = dimension === Dimension.WIDTH ? 'offsetWidth' : 'offsetHeight'; - this._element.style[dimension] = this._element[offsetDimension] + 'px'; + this._element.style[dimension] = "".concat(this._element.getBoundingClientRect()[dimension], "px"); _util2.default.reflow(this._element); - $(this._element).addClass(ClassName.COLLAPSING).removeClass(ClassName.COLLAPSE).removeClass(ClassName.IN); + $(this._element).addClass(ClassName.COLLAPSING).removeClass(ClassName.COLLAPSE).removeClass(ClassName.SHOW); - this._element.setAttribute('aria-expanded', false); + if (this._triggerArray.length > 0) { + for (var i = 0; i < this._triggerArray.length; i++) { + var trigger = this._triggerArray[i]; - if (this._triggerArray.length) { - $(this._triggerArray).addClass(ClassName.COLLAPSED).attr('aria-expanded', false); + var selector = _util2.default.getSelectorFromElement(trigger); + + if (selector !== null) { + var $elem = $(selector); + + if (!$elem.hasClass(ClassName.SHOW)) { + $(trigger).addClass(ClassName.COLLAPSED).attr('aria-expanded', false); + } + } + } } this.setTransitioning(true); var complete = function complete() { _this2.setTransitioning(false); + $(_this2._element).removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE).trigger(Event.HIDDEN); }; - this._element.style[dimension] = 0; + this._element.style[dimension] = ''; if (!_util2.default.supportsTransitionEnd()) { complete(); @@ -259,15 +298,14 @@ define(['exports', './util'], function (exports, _util) { $(this._element).one(_util2.default.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION); } }, { - key: 'setTransitioning', + key: "setTransitioning", value: function setTransitioning(isTransitioning) { this._isTransitioning = isTransitioning; } }, { - key: 'dispose', + key: "dispose", value: function dispose() { $.removeData(this._element, DATA_KEY); - this._config = null; this._parent = null; this._element = null; @@ -275,58 +313,70 @@ define(['exports', './util'], function (exports, _util) { this._isTransitioning = null; } }, { - key: '_getConfig', + key: "_getConfig", value: function _getConfig(config) { - config = $.extend({}, Default, config); - config.toggle = Boolean(config.toggle); // coerce string values + config = _extends({}, Default, config); + config.toggle = Boolean(config.toggle); // Coerce string values + _util2.default.typeCheckConfig(NAME, config, DefaultType); + return config; } }, { - key: '_getDimension', + key: "_getDimension", value: function _getDimension() { var hasWidth = $(this._element).hasClass(Dimension.WIDTH); return hasWidth ? Dimension.WIDTH : Dimension.HEIGHT; } }, { - key: '_getParent', + key: "_getParent", value: function _getParent() { var _this3 = this; - var parent = $(this._config.parent)[0]; - var selector = '[data-toggle="collapse"][data-parent="' + this._config.parent + '"]'; + var parent = null; + if (_util2.default.isElement(this._config.parent)) { + parent = this._config.parent; // It's a jQuery object + + if (typeof this._config.parent.jquery !== 'undefined') { + parent = this._config.parent[0]; + } + } else { + parent = $(this._config.parent)[0]; + } + + var selector = "[data-toggle=\"collapse\"][data-parent=\"".concat(this._config.parent, "\"]"); $(parent).find(selector).each(function (i, element) { _this3._addAriaAndCollapsedClass(Collapse._getTargetFromElement(element), [element]); }); - return parent; } }, { - key: '_addAriaAndCollapsedClass', + key: "_addAriaAndCollapsedClass", value: function _addAriaAndCollapsedClass(element, triggerArray) { if (element) { - var isOpen = $(element).hasClass(ClassName.IN); - element.setAttribute('aria-expanded', isOpen); + var isOpen = $(element).hasClass(ClassName.SHOW); - if (triggerArray.length) { + if (triggerArray.length > 0) { $(triggerArray).toggleClass(ClassName.COLLAPSED, !isOpen).attr('aria-expanded', isOpen); } } } }], [{ - key: '_getTargetFromElement', + key: "_getTargetFromElement", value: function _getTargetFromElement(element) { var selector = _util2.default.getSelectorFromElement(element); + return selector ? $(selector)[0] : null; } }, { - key: '_jQueryInterface', + key: "_jQueryInterface", value: function _jQueryInterface(config) { return this.each(function () { var $this = $(this); var data = $this.data(DATA_KEY); - var _config = $.extend({}, Default, $this.data(), (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' && config); + + var _config = _extends({}, Default, $this.data(), _typeof(config) === 'object' && config); if (!data && _config.toggle && /show|hide/.test(config)) { _config.toggle = false; @@ -338,20 +388,21 @@ define(['exports', './util'], function (exports, _util) { } if (typeof config === 'string') { - if (data[config] === undefined) { - throw new Error('No method named "' + config + '"'); + if (typeof data[config] === 'undefined') { + throw new TypeError("No method named \"".concat(config, "\"")); } + data[config](); } }); } }, { - key: 'VERSION', + key: "VERSION", get: function get() { return VERSION; } }, { - key: 'Default', + key: "Default", get: function get() { return Default; } @@ -365,17 +416,24 @@ define(['exports', './util'], function (exports, _util) { * Data Api implementation * ------------------------------------------------------------------------ */ - $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { - event.preventDefault(); + // preventDefault only for elements (which change the URL) not inside the collapsible element + if (event.currentTarget.tagName === 'A') { + event.preventDefault(); + } - var target = Collapse._getTargetFromElement(this); - var data = $(target).data(DATA_KEY); - var config = data ? 'toggle' : $(this).data(); + var $trigger = $(this); - Collapse._jQueryInterface.call($(target), config); + var selector = _util2.default.getSelectorFromElement(this); + + $(selector).each(function () { + var $target = $(this); + var data = $target.data(DATA_KEY); + var config = data ? 'toggle' : $trigger.data(); + + Collapse._jQueryInterface.call($target, config); + }); }); - /** * ------------------------------------------------------------------------ * jQuery @@ -384,13 +442,14 @@ define(['exports', './util'], function (exports, _util) { $.fn[NAME] = Collapse._jQueryInterface; $.fn[NAME].Constructor = Collapse; + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT; return Collapse._jQueryInterface; }; return Collapse; - }(jQuery); + }(_jquery2.default); exports.default = Collapse; }); \ No newline at end of file diff --git a/theme/boost/amd/src/dropdown.js b/theme/boost/amd/src/dropdown.js index 632176177aa..6940589a51f 100644 --- a/theme/boost/amd/src/dropdown.js +++ b/theme/boost/amd/src/dropdown.js @@ -1,10 +1,14 @@ -define(['exports', './util'], function (exports, _util) { - 'use strict'; +define(["exports", "jquery", "core/popper", "./util"], function (exports, _jquery, _popper, _util) { + "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); + var _jquery2 = _interopRequireDefault(_jquery); + + var _popper2 = _interopRequireDefault(_popper); + var _util2 = _interopRequireDefault(_util); function _interopRequireDefault(obj) { @@ -13,212 +17,417 @@ define(['exports', './util'], function (exports, _util) { }; } + function _typeof(obj) { + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function _typeof(obj) { + return typeof obj; + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); + } + + function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); + } + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - var _createClass = function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); } + } - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; - }(); + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } /** * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0-alpha.4): dropdown.js + * Bootstrap (v4.0.0): dropdown.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ - var Dropdown = function ($) { - /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ */ - var NAME = 'dropdown'; - var VERSION = '4.0.0-alpha.4'; + var VERSION = '4.0.0'; var DATA_KEY = 'bs.dropdown'; - var EVENT_KEY = '.' + DATA_KEY; + var EVENT_KEY = ".".concat(DATA_KEY); var DATA_API_KEY = '.data-api'; var JQUERY_NO_CONFLICT = $.fn[NAME]; var ESCAPE_KEYCODE = 27; // KeyboardEvent.which value for Escape (Esc) key + + var SPACE_KEYCODE = 32; // KeyboardEvent.which value for space key + + var TAB_KEYCODE = 9; // KeyboardEvent.which value for tab key + var ARROW_UP_KEYCODE = 38; // KeyboardEvent.which value for up arrow key + var ARROW_DOWN_KEYCODE = 40; // KeyboardEvent.which value for down arrow key + var RIGHT_MOUSE_BUTTON_WHICH = 3; // MouseEvent.which value for the right button (assuming a right-handed mouse) + var REGEXP_KEYDOWN = new RegExp("".concat(ARROW_UP_KEYCODE, "|").concat(ARROW_DOWN_KEYCODE, "|").concat(ESCAPE_KEYCODE)); var Event = { - HIDE: 'hide' + EVENT_KEY, - HIDDEN: 'hidden' + EVENT_KEY, - SHOW: 'show' + EVENT_KEY, - SHOWN: 'shown' + EVENT_KEY, - CLICK: 'click' + EVENT_KEY, - CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY, - KEYDOWN_DATA_API: 'keydown' + EVENT_KEY + DATA_API_KEY + HIDE: "hide".concat(EVENT_KEY), + HIDDEN: "hidden".concat(EVENT_KEY), + SHOW: "show".concat(EVENT_KEY), + SHOWN: "shown".concat(EVENT_KEY), + CLICK: "click".concat(EVENT_KEY), + CLICK_DATA_API: "click".concat(EVENT_KEY).concat(DATA_API_KEY), + KEYDOWN_DATA_API: "keydown".concat(EVENT_KEY).concat(DATA_API_KEY), + KEYUP_DATA_API: "keyup".concat(EVENT_KEY).concat(DATA_API_KEY) }; - var ClassName = { - BACKDROP: 'dropdown-backdrop', DISABLED: 'disabled', - OPEN: 'open' + SHOW: 'show', + DROPUP: 'dropup', + DROPRIGHT: 'dropright', + DROPLEFT: 'dropleft', + MENURIGHT: 'dropdown-menu-right', + MENULEFT: 'dropdown-menu-left', + POSITION_STATIC: 'position-static' }; - var Selector = { - BACKDROP: '.dropdown-backdrop', DATA_TOGGLE: '[data-toggle="dropdown"]', FORM_CHILD: '.dropdown form', - ROLE_MENU: '[role="menu"]', - ROLE_LISTBOX: '[role="listbox"]', + MENU: '.dropdown-menu', NAVBAR_NAV: '.navbar-nav', - VISIBLE_ITEMS: '[role="menu"] li:not(.disabled) a, ' + '[role="listbox"] li:not(.disabled) a' + VISIBLE_ITEMS: '.dropdown-menu .dropdown-item:not(.disabled)' + }; + var AttachmentMap = { + TOP: 'top-start', + TOPEND: 'top-end', + BOTTOM: 'bottom-start', + BOTTOMEND: 'bottom-end', + RIGHT: 'right-start', + RIGHTEND: 'right-end', + LEFT: 'left-start', + LEFTEND: 'left-end' + }; + var Default = { + offset: 0, + flip: false, + boundary: 'scrollParent' + }; + var DefaultType = { + offset: '(number|string|function)', + flip: 'boolean', + boundary: '(string|element)' + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ + }; - /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ - */ - var Dropdown = function () { - function Dropdown(element) { + function Dropdown(element, config) { _classCallCheck(this, Dropdown); this._element = element; + this._popper = null; + this._config = this._getConfig(config); + this._menu = this._getMenuElement(); + this._inNavbar = this._detectNavbar(); this._addEventListeners(); - } + } // Getters - // getters _createClass(Dropdown, [{ - key: 'toggle', + key: "toggle", value: function toggle() { - if (this.disabled || $(this).hasClass(ClassName.DISABLED)) { - return false; + if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED)) { + return; } - var parent = Dropdown._getParentFromElement(this); - var isActive = $(parent).hasClass(ClassName.OPEN); + var parent = Dropdown._getParentFromElement(this._element); + + var isActive = $(this._menu).hasClass(ClassName.SHOW); Dropdown._clearMenus(); if (isActive) { - return false; + return; } - if ('ontouchstart' in document.documentElement && !$(parent).closest(Selector.NAVBAR_NAV).length) { - - // if mobile we use a backdrop because click events don't delegate - var dropdown = document.createElement('div'); - dropdown.className = ClassName.BACKDROP; - $(dropdown).insertBefore(this); - $(dropdown).on('click', Dropdown._clearMenus); - } - - var relatedTarget = { relatedTarget: this }; + var relatedTarget = { + relatedTarget: this._element + }; var showEvent = $.Event(Event.SHOW, relatedTarget); - $(parent).trigger(showEvent); if (showEvent.isDefaultPrevented()) { - return false; + return; + } // Disable totally Popper.js for Dropdown in Navbar + + + if (!this._inNavbar) { + /** + * Check for Popper dependency + * Popper - https://popper.js.org + */ + if (typeof _popper2.default === 'undefined') { + throw new TypeError('Bootstrap dropdown require Popper.js (https://popper.js.org)'); + } + + var element = this._element; // For dropup with alignment we use the parent as popper container + + if ($(parent).hasClass(ClassName.DROPUP)) { + if ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) { + element = parent; + } + } // If boundary is not `scrollParent`, then set position to `static` + // to allow the menu to "escape" the scroll parent's boundaries + // https://github.com/twbs/bootstrap/issues/24251 + + + if (this._config.boundary !== 'scrollParent') { + $(parent).addClass(ClassName.POSITION_STATIC); + } + + this._popper = new _popper2.default(element, this._menu, this._getPopperConfig()); + } // If this is a touch-enabled device we add extra + // empty mouseover listeners to the body's immediate children; + // only needed because of broken event delegation on iOS + // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html + + + if ('ontouchstart' in document.documentElement && $(parent).closest(Selector.NAVBAR_NAV).length === 0) { + $('body').children().on('mouseover', null, $.noop); } - this.focus(); - this.setAttribute('aria-expanded', 'true'); + this._element.focus(); - $(parent).toggleClass(ClassName.OPEN); - $(parent).trigger($.Event(Event.SHOWN, relatedTarget)); + this._element.setAttribute('aria-expanded', true); - return false; + $(this._menu).toggleClass(ClassName.SHOW); + $(parent).toggleClass(ClassName.SHOW).trigger($.Event(Event.SHOWN, relatedTarget)); } }, { - key: 'dispose', + key: "dispose", value: function dispose() { $.removeData(this._element, DATA_KEY); $(this._element).off(EVENT_KEY); this._element = null; + this._menu = null; + + if (this._popper !== null) { + this._popper.destroy(); + + this._popper = null; + } } }, { - key: '_addEventListeners', + key: "update", + value: function update() { + this._inNavbar = this._detectNavbar(); + + if (this._popper !== null) { + this._popper.scheduleUpdate(); + } + } + }, { + key: "_addEventListeners", value: function _addEventListeners() { - $(this._element).on(Event.CLICK, this.toggle); + var _this = this; + + $(this._element).on(Event.CLICK, function (event) { + event.preventDefault(); + event.stopPropagation(); + + _this.toggle(); + }); + } + }, { + key: "_getConfig", + value: function _getConfig(config) { + config = _extends({}, this.constructor.Default, $(this._element).data(), config); + + _util2.default.typeCheckConfig(NAME, config, this.constructor.DefaultType); + + return config; + } + }, { + key: "_getMenuElement", + value: function _getMenuElement() { + if (!this._menu) { + var parent = Dropdown._getParentFromElement(this._element); + + this._menu = $(parent).find(Selector.MENU)[0]; + } + + return this._menu; + } + }, { + key: "_getPlacement", + value: function _getPlacement() { + var $parentDropdown = $(this._element).parent(); + var placement = AttachmentMap.BOTTOM; // Handle dropup + + if ($parentDropdown.hasClass(ClassName.DROPUP)) { + placement = AttachmentMap.TOP; + + if ($(this._menu).hasClass(ClassName.MENURIGHT)) { + placement = AttachmentMap.TOPEND; + } + } else if ($parentDropdown.hasClass(ClassName.DROPRIGHT)) { + placement = AttachmentMap.RIGHT; + } else if ($parentDropdown.hasClass(ClassName.DROPLEFT)) { + placement = AttachmentMap.LEFT; + } else if ($(this._menu).hasClass(ClassName.MENURIGHT)) { + placement = AttachmentMap.BOTTOMEND; + } + + return placement; + } + }, { + key: "_detectNavbar", + value: function _detectNavbar() { + return $(this._element).closest('.navbar').length > 0; + } + }, { + key: "_getPopperConfig", + value: function _getPopperConfig() { + var _this2 = this; + + var offsetConf = {}; + + if (typeof this._config.offset === 'function') { + offsetConf.fn = function (data) { + data.offsets = _extends({}, data.offsets, _this2._config.offset(data.offsets) || {}); + return data; + }; + } else { + offsetConf.offset = this._config.offset; + } + + var popperConfig = { + placement: this._getPlacement(), + modifiers: { + offset: offsetConf, + flip: { + enabled: this._config.flip + }, + preventOverflow: { + boundariesElement: this._config.boundary + } + } + }; + return popperConfig; } }], [{ - key: '_jQueryInterface', + key: "_jQueryInterface", value: function _jQueryInterface(config) { return this.each(function () { var data = $(this).data(DATA_KEY); + var _config = _typeof(config) === 'object' ? config : null; + if (!data) { - $(this).data(DATA_KEY, data = new Dropdown(this)); + data = new Dropdown(this, _config); + $(this).data(DATA_KEY, data); } if (typeof config === 'string') { - if (data[config] === undefined) { - throw new Error('No method named "' + config + '"'); + if (typeof data[config] === 'undefined') { + throw new TypeError("No method named \"".concat(config, "\"")); } - data[config].call(this); + + data[config](); } }); } }, { - key: '_clearMenus', + key: "_clearMenus", value: function _clearMenus(event) { - if (event && event.which === RIGHT_MOUSE_BUTTON_WHICH) { + if (event && (event.which === RIGHT_MOUSE_BUTTON_WHICH || event.type === 'keyup' && event.which !== TAB_KEYCODE)) { return; } - var backdrop = $(Selector.BACKDROP)[0]; - if (backdrop) { - backdrop.parentNode.removeChild(backdrop); - } - var toggles = $.makeArray($(Selector.DATA_TOGGLE)); for (var i = 0; i < toggles.length; i++) { var parent = Dropdown._getParentFromElement(toggles[i]); - var relatedTarget = { relatedTarget: toggles[i] }; - if (!$(parent).hasClass(ClassName.OPEN)) { + var context = $(toggles[i]).data(DATA_KEY); + var relatedTarget = { + relatedTarget: toggles[i] + }; + + if (!context) { continue; } - if (event && event.type === 'click' && /input|textarea/i.test(event.target.tagName) && $.contains(parent, event.target)) { + var dropdownMenu = context._menu; + + if (!$(parent).hasClass(ClassName.SHOW)) { + continue; + } + + if (event && (event.type === 'click' && /input|textarea/i.test(event.target.tagName) || event.type === 'keyup' && event.which === TAB_KEYCODE) && $.contains(parent, event.target)) { continue; } var hideEvent = $.Event(Event.HIDE, relatedTarget); $(parent).trigger(hideEvent); + if (hideEvent.isDefaultPrevented()) { continue; + } // If this is a touch-enabled device we remove the extra + // empty mouseover listeners we added for iOS support + + + if ('ontouchstart' in document.documentElement) { + $('body').children().off('mouseover', null, $.noop); } toggles[i].setAttribute('aria-expanded', 'false'); - - $(parent).removeClass(ClassName.OPEN).trigger($.Event(Event.HIDDEN, relatedTarget)); + $(dropdownMenu).removeClass(ClassName.SHOW); + $(parent).removeClass(ClassName.SHOW).trigger($.Event(Event.HIDDEN, relatedTarget)); } } }, { - key: '_getParentFromElement', + key: "_getParentFromElement", value: function _getParentFromElement(element) { - var parent = void 0; + var parent; + var selector = _util2.default.getSelectorFromElement(element); if (selector) { @@ -228,9 +437,16 @@ define(['exports', './util'], function (exports, _util) { return parent || element.parentNode; } }, { - key: '_dataApiKeydownHandler', + key: "_dataApiKeydownHandler", value: function _dataApiKeydownHandler(event) { - if (!/(38|40|27|32)/.test(event.which) || /input|textarea/i.test(event.target.tagName)) { + // If not input/textarea: + // - And not a key in REGEXP_KEYDOWN => not a dropdown command + // If input/textarea: + // - If space key => not a dropdown command + // - If key is other than escape + // - If key is not up or down => not a dropdown command + // - If trigger inside the menu => not a dropdown command + if (/input|textarea/i.test(event.target.tagName) ? event.which === SPACE_KEYCODE || event.which !== ESCAPE_KEYCODE && (event.which !== ARROW_DOWN_KEYCODE && event.which !== ARROW_UP_KEYCODE || $(event.target).closest(Selector.MENU).length) : !REGEXP_KEYDOWN.test(event.which)) { return; } @@ -242,10 +458,10 @@ define(['exports', './util'], function (exports, _util) { } var parent = Dropdown._getParentFromElement(this); - var isActive = $(parent).hasClass(ClassName.OPEN); - if (!isActive && event.which !== ESCAPE_KEYCODE || isActive && event.which === ESCAPE_KEYCODE) { + var isActive = $(parent).hasClass(ClassName.SHOW); + if (!isActive && (event.which !== ESCAPE_KEYCODE || event.which !== SPACE_KEYCODE) || isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) { if (event.which === ESCAPE_KEYCODE) { var toggle = $(parent).find(Selector.DATA_TOGGLE)[0]; $(toggle).trigger('focus'); @@ -255,25 +471,21 @@ define(['exports', './util'], function (exports, _util) { return; } - var items = $.makeArray($(Selector.VISIBLE_ITEMS)); + var items = $(parent).find(Selector.VISIBLE_ITEMS).get(); - items = items.filter(function (item) { - return item.offsetWidth || item.offsetHeight; - }); - - if (!items.length) { + if (items.length === 0) { return; } var index = items.indexOf(event.target); if (event.which === ARROW_UP_KEYCODE && index > 0) { - // up + // Up index--; } if (event.which === ARROW_DOWN_KEYCODE && index < items.length - 1) { - // down + // Down index++; } @@ -284,10 +496,20 @@ define(['exports', './util'], function (exports, _util) { items[index].focus(); } }, { - key: 'VERSION', + key: "VERSION", get: function get() { return VERSION; } + }, { + key: "Default", + get: function get() { + return Default; + } + }, { + key: "DefaultType", + get: function get() { + return DefaultType; + } }]); return Dropdown; @@ -298,11 +520,14 @@ define(['exports', './util'], function (exports, _util) { * Data Api implementation * ------------------------------------------------------------------------ */ + $(document).on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler).on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler).on("".concat(Event.CLICK_DATA_API, " ").concat(Event.KEYUP_DATA_API), Dropdown._clearMenus).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { + event.preventDefault(); + event.stopPropagation(); - $(document).on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler).on(Event.KEYDOWN_DATA_API, Selector.ROLE_MENU, Dropdown._dataApiKeydownHandler).on(Event.KEYDOWN_DATA_API, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler).on(Event.CLICK_DATA_API, Dropdown._clearMenus).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle).on(Event.CLICK_DATA_API, Selector.FORM_CHILD, function (e) { + Dropdown._jQueryInterface.call($(this), 'toggle'); + }).on(Event.CLICK_DATA_API, Selector.FORM_CHILD, function (e) { e.stopPropagation(); }); - /** * ------------------------------------------------------------------------ * jQuery @@ -311,13 +536,14 @@ define(['exports', './util'], function (exports, _util) { $.fn[NAME] = Dropdown._jQueryInterface; $.fn[NAME].Constructor = Dropdown; + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT; return Dropdown._jQueryInterface; }; return Dropdown; - }(jQuery); + }(_jquery2.default, _popper2.default); exports.default = Dropdown; }); \ No newline at end of file diff --git a/theme/boost/amd/src/form-display-errors.js b/theme/boost/amd/src/form-display-errors.js index 1a32c295535..1adda2d672e 100644 --- a/theme/boost/amd/src/form-display-errors.js +++ b/theme/boost/amd/src/form-display-errors.js @@ -37,7 +37,7 @@ define(['jquery', 'core/event'], function($, Event) { if (msg !== '') { parent.addClass('has-danger'); parent.data('client-validation-error', true); - $(element).addClass('form-control-danger'); + $(element).addClass('is-invalid'); $(element).attr('aria-describedby', feedback.attr('id')); $(element).attr('aria-invalid', true); feedback.attr('tabindex', 0); @@ -53,7 +53,7 @@ define(['jquery', 'core/event'], function($, Event) { if (parent.data('client-validation-error') === true) { parent.removeClass('has-danger'); parent.data('client-validation-error', false); - $(element).removeClass('form-control-danger'); + $(element).removeClass('is-invalid'); $(element).removeAttr('aria-describedby'); $(element).attr('aria-invalid', false); feedback.hide(); diff --git a/theme/boost/amd/src/modal.js b/theme/boost/amd/src/modal.js index 195e7189162..e17353862cc 100644 --- a/theme/boost/amd/src/modal.js +++ b/theme/boost/amd/src/modal.js @@ -1,10 +1,12 @@ -define(['exports', './util'], function (exports, _util) { - 'use strict'; +define(["exports", "jquery", "./util"], function (exports, _jquery, _util) { + "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); + var _jquery2 = _interopRequireDefault(_jquery); + var _util2 = _interopRequireDefault(_util); function _interopRequireDefault(obj) { @@ -13,11 +15,37 @@ define(['exports', './util'], function (exports, _util) { }; } - var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { - return typeof obj; - } : function (obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; - }; + function _typeof(obj) { + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function _typeof(obj) { + return typeof obj; + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); + } + + function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); + } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { @@ -25,43 +53,38 @@ define(['exports', './util'], function (exports, _util) { } } - var _createClass = function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); } + } - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; - }(); + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } /** * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0-alpha.4): modal.js + * Bootstrap (v4.0.0): modal.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ - var Modal = function ($) { - /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ */ - var NAME = 'modal'; - var VERSION = '4.0.0-alpha.4'; + var VERSION = '4.0.0'; var DATA_KEY = 'bs.modal'; - var EVENT_KEY = '.' + DATA_KEY; + var EVENT_KEY = ".".concat(DATA_KEY); var DATA_API_KEY = '.data-api'; var JQUERY_NO_CONFLICT = $.fn[NAME]; var TRANSITION_DURATION = 300; @@ -74,48 +97,46 @@ define(['exports', './util'], function (exports, _util) { focus: true, show: true }; - var DefaultType = { backdrop: '(boolean|string)', keyboard: 'boolean', focus: 'boolean', show: 'boolean' }; - var Event = { - HIDE: 'hide' + EVENT_KEY, - HIDDEN: 'hidden' + EVENT_KEY, - SHOW: 'show' + EVENT_KEY, - SHOWN: 'shown' + EVENT_KEY, - FOCUSIN: 'focusin' + EVENT_KEY, - RESIZE: 'resize' + EVENT_KEY, - CLICK_DISMISS: 'click.dismiss' + EVENT_KEY, - KEYDOWN_DISMISS: 'keydown.dismiss' + EVENT_KEY, - MOUSEUP_DISMISS: 'mouseup.dismiss' + EVENT_KEY, - MOUSEDOWN_DISMISS: 'mousedown.dismiss' + EVENT_KEY, - CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY + HIDE: "hide".concat(EVENT_KEY), + HIDDEN: "hidden".concat(EVENT_KEY), + SHOW: "show".concat(EVENT_KEY), + SHOWN: "shown".concat(EVENT_KEY), + FOCUSIN: "focusin".concat(EVENT_KEY), + RESIZE: "resize".concat(EVENT_KEY), + CLICK_DISMISS: "click.dismiss".concat(EVENT_KEY), + KEYDOWN_DISMISS: "keydown.dismiss".concat(EVENT_KEY), + MOUSEUP_DISMISS: "mouseup.dismiss".concat(EVENT_KEY), + MOUSEDOWN_DISMISS: "mousedown.dismiss".concat(EVENT_KEY), + CLICK_DATA_API: "click".concat(EVENT_KEY).concat(DATA_API_KEY) }; - var ClassName = { SCROLLBAR_MEASURER: 'modal-scrollbar-measure', BACKDROP: 'modal-backdrop', OPEN: 'modal-open', FADE: 'fade', - IN: 'in' + SHOW: 'show' }; - var Selector = { DIALOG: '.modal-dialog', DATA_TOGGLE: '[data-toggle="modal"]', DATA_DISMISS: '[data-dismiss="modal"]', - FIXED_CONTENT: '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed' - }; + FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top', + STICKY_CONTENT: '.sticky-top', + NAVBAR_TOGGLER: '.navbar-toggler' + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ - /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ - */ + }; var Modal = function () { function Modal(element, config) { @@ -130,24 +151,30 @@ define(['exports', './util'], function (exports, _util) { this._ignoreBackdropClick = false; this._originalBodyPadding = 0; this._scrollbarWidth = 0; - } + } // Getters - // getters _createClass(Modal, [{ - key: 'toggle', + key: "toggle", value: function toggle(relatedTarget) { return this._isShown ? this.hide() : this.show(relatedTarget); } }, { - key: 'show', + key: "show", value: function show(relatedTarget) { var _this = this; + if (this._isTransitioning || this._isShown) { + return; + } + + if (_util2.default.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)) { + this._isTransitioning = true; + } + var showEvent = $.Event(Event.SHOW, { relatedTarget: relatedTarget }); - $(this._element).trigger(showEvent); if (this._isShown || showEvent.isDefaultPrevented()) { @@ -157,15 +184,20 @@ define(['exports', './util'], function (exports, _util) { this._isShown = true; this._checkScrollbar(); + this._setScrollbar(); + this._adjustDialog(); + $(document.body).addClass(ClassName.OPEN); this._setEscapeEvent(); + this._setResizeEvent(); - $(this._element).on(Event.CLICK_DISMISS, Selector.DATA_DISMISS, $.proxy(this.hide, this)); - + $(this._element).on(Event.CLICK_DISMISS, Selector.DATA_DISMISS, function (event) { + return _this.hide(event); + }); $(this._dialog).on(Event.MOUSEDOWN_DISMISS, function () { $(_this._element).one(Event.MOUSEUP_DISMISS, function (event) { if ($(event.target).is(_this._element)) { @@ -174,17 +206,24 @@ define(['exports', './util'], function (exports, _util) { }); }); - this._showBackdrop($.proxy(this._showElement, this, relatedTarget)); + this._showBackdrop(function () { + return _this._showElement(relatedTarget); + }); } }, { - key: 'hide', + key: "hide", value: function hide(event) { + var _this2 = this; + if (event) { event.preventDefault(); } - var hideEvent = $.Event(Event.HIDE); + if (this._isTransitioning || !this._isShown) { + return; + } + var hideEvent = $.Event(Event.HIDE); $(this._element).trigger(hideEvent); if (!this._isShown || hideEvent.isDefaultPrevented()) { @@ -192,34 +231,34 @@ define(['exports', './util'], function (exports, _util) { } this._isShown = false; + var transition = _util2.default.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE); + + if (transition) { + this._isTransitioning = true; + } this._setEscapeEvent(); + this._setResizeEvent(); $(document).off(Event.FOCUSIN); - - $(this._element).removeClass(ClassName.IN); - + $(this._element).removeClass(ClassName.SHOW); $(this._element).off(Event.CLICK_DISMISS); $(this._dialog).off(Event.MOUSEDOWN_DISMISS); - if (_util2.default.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)) { - - $(this._element).one(_util2.default.TRANSITION_END, $.proxy(this._hideModal, this)).emulateTransitionEnd(TRANSITION_DURATION); + if (transition) { + $(this._element).one(_util2.default.TRANSITION_END, function (event) { + return _this2._hideModal(event); + }).emulateTransitionEnd(TRANSITION_DURATION); } else { this._hideModal(); } } }, { - key: 'dispose', + key: "dispose", value: function dispose() { $.removeData(this._element, DATA_KEY); - - $(window).off(EVENT_KEY); - $(document).off(EVENT_KEY); - $(this._element).off(EVENT_KEY); - $(this._backdrop).off(EVENT_KEY); - + $(window, document, this._element, this._backdrop).off(EVENT_KEY); this._config = null; this._element = null; this._dialog = null; @@ -227,37 +266,45 @@ define(['exports', './util'], function (exports, _util) { this._isShown = null; this._isBodyOverflowing = null; this._ignoreBackdropClick = null; - this._originalBodyPadding = null; this._scrollbarWidth = null; } }, { - key: '_getConfig', + key: "handleUpdate", + value: function handleUpdate() { + this._adjustDialog(); + } + }, { + key: "_getConfig", value: function _getConfig(config) { - config = $.extend({}, Default, config); + config = _extends({}, Default, config); + _util2.default.typeCheckConfig(NAME, config, DefaultType); + return config; } }, { - key: '_showElement', + key: "_showElement", value: function _showElement(relatedTarget) { - var _this2 = this; + var _this3 = this; var transition = _util2.default.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE); if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) { - // don't move modals dom position + // Don't move modal's DOM position document.body.appendChild(this._element); } this._element.style.display = 'block'; + this._element.removeAttribute('aria-hidden'); + this._element.scrollTop = 0; if (transition) { _util2.default.reflow(this._element); } - $(this._element).addClass(ClassName.IN); + $(this._element).addClass(ClassName.SHOW); if (this._config.focus) { this._enforceFocus(); @@ -268,10 +315,12 @@ define(['exports', './util'], function (exports, _util) { }); var transitionComplete = function transitionComplete() { - if (_this2._config.focus) { - _this2._element.focus(); + if (_this3._config.focus) { + _this3._element.focus(); } - $(_this2._element).trigger(shownEvent); + + _this3._isTransitioning = false; + $(_this3._element).trigger(shownEvent); }; if (transition) { @@ -281,26 +330,28 @@ define(['exports', './util'], function (exports, _util) { } } }, { - key: '_enforceFocus', + key: "_enforceFocus", value: function _enforceFocus() { - var _this3 = this; + var _this4 = this; - $(document).off(Event.FOCUSIN) // guard against infinite focus loop + $(document).off(Event.FOCUSIN) // Guard against infinite focus loop .on(Event.FOCUSIN, function (event) { - if (document !== event.target && _this3._element !== event.target && !$(_this3._element).has(event.target).length) { - _this3._element.focus(); + if (document !== event.target && _this4._element !== event.target && $(_this4._element).has(event.target).length === 0) { + _this4._element.focus(); } }); } }, { - key: '_setEscapeEvent', + key: "_setEscapeEvent", value: function _setEscapeEvent() { - var _this4 = this; + var _this5 = this; if (this._isShown && this._config.keyboard) { $(this._element).on(Event.KEYDOWN_DISMISS, function (event) { if (event.which === ESCAPE_KEYCODE) { - _this4.hide(); + event.preventDefault(); + + _this5.hide(); } }); } else if (!this._isShown) { @@ -308,30 +359,41 @@ define(['exports', './util'], function (exports, _util) { } } }, { - key: '_setResizeEvent', + key: "_setResizeEvent", value: function _setResizeEvent() { + var _this6 = this; + if (this._isShown) { - $(window).on(Event.RESIZE, $.proxy(this._handleUpdate, this)); + $(window).on(Event.RESIZE, function (event) { + return _this6.handleUpdate(event); + }); } else { $(window).off(Event.RESIZE); } } }, { - key: '_hideModal', + key: "_hideModal", value: function _hideModal() { - var _this5 = this; + var _this7 = this; this._element.style.display = 'none'; - this._element.setAttribute('aria-hidden', 'true'); + + this._element.setAttribute('aria-hidden', true); + + this._isTransitioning = false; + this._showBackdrop(function () { $(document.body).removeClass(ClassName.OPEN); - _this5._resetAdjustments(); - _this5._resetScrollbar(); - $(_this5._element).trigger(Event.HIDDEN); + + _this7._resetAdjustments(); + + _this7._resetScrollbar(); + + $(_this7._element).trigger(Event.HIDDEN); }); } }, { - key: '_removeBackdrop', + key: "_removeBackdrop", value: function _removeBackdrop() { if (this._backdrop) { $(this._backdrop).remove(); @@ -339,15 +401,14 @@ define(['exports', './util'], function (exports, _util) { } } }, { - key: '_showBackdrop', + key: "_showBackdrop", value: function _showBackdrop(callback) { - var _this6 = this; + var _this8 = this; var animate = $(this._element).hasClass(ClassName.FADE) ? ClassName.FADE : ''; if (this._isShown && this._config.backdrop) { var doAnimate = _util2.default.supportsTransitionEnd() && animate; - this._backdrop = document.createElement('div'); this._backdrop.className = ClassName.BACKDROP; @@ -356,19 +417,20 @@ define(['exports', './util'], function (exports, _util) { } $(this._backdrop).appendTo(document.body); - $(this._element).on(Event.CLICK_DISMISS, function (event) { - if (_this6._ignoreBackdropClick) { - _this6._ignoreBackdropClick = false; + if (_this8._ignoreBackdropClick) { + _this8._ignoreBackdropClick = false; return; } + if (event.target !== event.currentTarget) { return; } - if (_this6._config.backdrop === 'static') { - _this6._element.focus(); + + if (_this8._config.backdrop === 'static') { + _this8._element.focus(); } else { - _this6.hide(); + _this8.hide(); } }); @@ -376,7 +438,7 @@ define(['exports', './util'], function (exports, _util) { _util2.default.reflow(this._backdrop); } - $(this._backdrop).addClass(ClassName.IN); + $(this._backdrop).addClass(ClassName.SHOW); if (!callback) { return; @@ -389,10 +451,11 @@ define(['exports', './util'], function (exports, _util) { $(this._backdrop).one(_util2.default.TRANSITION_END, callback).emulateTransitionEnd(BACKDROP_TRANSITION_DURATION); } else if (!this._isShown && this._backdrop) { - $(this._backdrop).removeClass(ClassName.IN); + $(this._backdrop).removeClass(ClassName.SHOW); var callbackRemove = function callbackRemove() { - _this6._removeBackdrop(); + _this8._removeBackdrop(); + if (callback) { callback(); } @@ -408,68 +471,107 @@ define(['exports', './util'], function (exports, _util) { } } }, { - key: '_handleUpdate', - value: function _handleUpdate() { - this._adjustDialog(); - } - }, { - key: '_adjustDialog', + key: "_adjustDialog", value: function _adjustDialog() { var isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight; if (!this._isBodyOverflowing && isModalOverflowing) { - this._element.style.paddingLeft = this._scrollbarWidth + 'px'; + this._element.style.paddingLeft = "".concat(this._scrollbarWidth, "px"); } if (this._isBodyOverflowing && !isModalOverflowing) { - this._element.style.paddingRight = this._scrollbarWidth + 'px'; + this._element.style.paddingRight = "".concat(this._scrollbarWidth, "px"); } } }, { - key: '_resetAdjustments', + key: "_resetAdjustments", value: function _resetAdjustments() { this._element.style.paddingLeft = ''; this._element.style.paddingRight = ''; } }, { - key: '_checkScrollbar', + key: "_checkScrollbar", value: function _checkScrollbar() { - this._isBodyOverflowing = document.body.clientWidth < window.innerWidth; + var rect = document.body.getBoundingClientRect(); + this._isBodyOverflowing = rect.left + rect.right < window.innerWidth; this._scrollbarWidth = this._getScrollbarWidth(); } }, { - key: '_setScrollbar', + key: "_setScrollbar", value: function _setScrollbar() { - var bodyPadding = parseInt($(Selector.FIXED_CONTENT).css('padding-right') || 0, 10); - - this._originalBodyPadding = document.body.style.paddingRight || ''; + var _this9 = this; if (this._isBodyOverflowing) { - document.body.style.paddingRight = bodyPadding + this._scrollbarWidth + 'px'; + // Note: DOMNode.style.paddingRight returns the actual value or '' if not set + // while $(DOMNode).css('padding-right') returns the calculated value or 0 if not set + // Adjust fixed content padding + $(Selector.FIXED_CONTENT).each(function (index, element) { + var actualPadding = $(element)[0].style.paddingRight; + var calculatedPadding = $(element).css('padding-right'); + $(element).data('padding-right', actualPadding).css('padding-right', "".concat(parseFloat(calculatedPadding) + _this9._scrollbarWidth, "px")); + }); // Adjust sticky content margin + + $(Selector.STICKY_CONTENT).each(function (index, element) { + var actualMargin = $(element)[0].style.marginRight; + var calculatedMargin = $(element).css('margin-right'); + $(element).data('margin-right', actualMargin).css('margin-right', "".concat(parseFloat(calculatedMargin) - _this9._scrollbarWidth, "px")); + }); // Adjust navbar-toggler margin + + $(Selector.NAVBAR_TOGGLER).each(function (index, element) { + var actualMargin = $(element)[0].style.marginRight; + var calculatedMargin = $(element).css('margin-right'); + $(element).data('margin-right', actualMargin).css('margin-right', "".concat(parseFloat(calculatedMargin) + _this9._scrollbarWidth, "px")); + }); // Adjust body padding + + var actualPadding = document.body.style.paddingRight; + var calculatedPadding = $('body').css('padding-right'); + $('body').data('padding-right', actualPadding).css('padding-right', "".concat(parseFloat(calculatedPadding) + this._scrollbarWidth, "px")); } } }, { - key: '_resetScrollbar', + key: "_resetScrollbar", value: function _resetScrollbar() { - document.body.style.paddingRight = this._originalBodyPadding; + // Restore fixed content padding + $(Selector.FIXED_CONTENT).each(function (index, element) { + var padding = $(element).data('padding-right'); + + if (typeof padding !== 'undefined') { + $(element).css('padding-right', padding).removeData('padding-right'); + } + }); // Restore sticky content and navbar-toggler margin + + $("".concat(Selector.STICKY_CONTENT, ", ").concat(Selector.NAVBAR_TOGGLER)).each(function (index, element) { + var margin = $(element).data('margin-right'); + + if (typeof margin !== 'undefined') { + $(element).css('margin-right', margin).removeData('margin-right'); + } + }); // Restore body padding + + var padding = $('body').data('padding-right'); + + if (typeof padding !== 'undefined') { + $('body').css('padding-right', padding).removeData('padding-right'); + } } }, { - key: '_getScrollbarWidth', + key: "_getScrollbarWidth", value: function _getScrollbarWidth() { // thx d.walsh var scrollDiv = document.createElement('div'); scrollDiv.className = ClassName.SCROLLBAR_MEASURER; document.body.appendChild(scrollDiv); - var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; + var scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth; document.body.removeChild(scrollDiv); return scrollbarWidth; } }], [{ - key: '_jQueryInterface', + key: "_jQueryInterface", value: function _jQueryInterface(config, relatedTarget) { return this.each(function () { var data = $(this).data(DATA_KEY); - var _config = $.extend({}, Modal.Default, $(this).data(), (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' && config); + + var _config = _extends({}, Modal.Default, $(this).data(), _typeof(config) === 'object' && config); if (!data) { data = new Modal(this, _config); @@ -477,9 +579,10 @@ define(['exports', './util'], function (exports, _util) { } if (typeof config === 'string') { - if (data[config] === undefined) { - throw new Error('No method named "' + config + '"'); + if (typeof data[config] === 'undefined') { + throw new TypeError("No method named \"".concat(config, "\"")); } + data[config](relatedTarget); } else if (_config.show) { data.show(relatedTarget); @@ -487,12 +590,12 @@ define(['exports', './util'], function (exports, _util) { }); } }, { - key: 'VERSION', + key: "VERSION", get: function get() { return VERSION; } }, { - key: 'Default', + key: "Default", get: function get() { return Default; } @@ -506,39 +609,38 @@ define(['exports', './util'], function (exports, _util) { * Data Api implementation * ------------------------------------------------------------------------ */ - $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { - var _this7 = this; + var _this10 = this; + + var target; - var target = void 0; var selector = _util2.default.getSelectorFromElement(this); if (selector) { target = $(selector)[0]; } - var config = $(target).data(DATA_KEY) ? 'toggle' : $.extend({}, $(target).data(), $(this).data()); + var config = $(target).data(DATA_KEY) ? 'toggle' : _extends({}, $(target).data(), $(this).data()); - if (this.tagName === 'A') { + if (this.tagName === 'A' || this.tagName === 'AREA') { event.preventDefault(); } var $target = $(target).one(Event.SHOW, function (showEvent) { if (showEvent.isDefaultPrevented()) { - // only register focus restorer if modal will actually get shown + // Only register focus restorer if modal will actually get shown return; } $target.one(Event.HIDDEN, function () { - if ($(_this7).is(':visible')) { - _this7.focus(); + if ($(_this10).is(':visible')) { + _this10.focus(); } }); }); Modal._jQueryInterface.call($(target), config, this); }); - /** * ------------------------------------------------------------------------ * jQuery @@ -547,13 +649,14 @@ define(['exports', './util'], function (exports, _util) { $.fn[NAME] = Modal._jQueryInterface; $.fn[NAME].Constructor = Modal; + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT; return Modal._jQueryInterface; }; return Modal; - }(jQuery); + }(_jquery2.default); exports.default = Modal; }); \ No newline at end of file diff --git a/theme/boost/amd/src/popover.js b/theme/boost/amd/src/popover.js index df8b147d35c..bc88d804e67 100644 --- a/theme/boost/amd/src/popover.js +++ b/theme/boost/amd/src/popover.js @@ -1,10 +1,12 @@ -define(['exports', './tooltip'], function (exports, _tooltip) { - 'use strict'; +define(["exports", "jquery", "./tooltip"], function (exports, _jquery, _tooltip) { + "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); + var _jquery2 = _interopRequireDefault(_jquery); + var _tooltip2 = _interopRequireDefault(_tooltip); function _interopRequireDefault(obj) { @@ -13,11 +15,19 @@ define(['exports', './tooltip'], function (exports, _tooltip) { }; } - var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { - return typeof obj; - } : function (obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; - }; + function _typeof(obj) { + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function _typeof(obj) { + return typeof obj; + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); + } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { @@ -25,35 +35,37 @@ define(['exports', './tooltip'], function (exports, _tooltip) { } } - var _createClass = function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); } + } - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; - }(); + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } function _possibleConstructorReturn(self, call) { - if (!self) { + if (call && (_typeof(call) === "object" || typeof call === "function")) { + return call; + } + + if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } - return call && (typeof call === "object" || typeof call === "function") ? call : self; + return self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { @@ -67,67 +79,81 @@ define(['exports', './tooltip'], function (exports, _tooltip) { if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); + } + /** * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0-alpha.4): popover.js + * Bootstrap (v4.0.0): popover.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ - var Popover = function ($) { - /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ */ - var NAME = 'popover'; - var VERSION = '4.0.0-alpha.4'; + var VERSION = '4.0.0'; var DATA_KEY = 'bs.popover'; - var EVENT_KEY = '.' + DATA_KEY; + var EVENT_KEY = ".".concat(DATA_KEY); var JQUERY_NO_CONFLICT = $.fn[NAME]; + var CLASS_PREFIX = 'bs-popover'; + var BSCLS_PREFIX_REGEX = new RegExp("(^|\\s)".concat(CLASS_PREFIX, "\\S+"), 'g'); - var Default = $.extend({}, _tooltip2.default.Default, { + var Default = _extends({}, _tooltip2.default.Default, { placement: 'right', trigger: 'click', content: '', - template: '' + template: '' }); - var DefaultType = $.extend({}, _tooltip2.default.DefaultType, { + var DefaultType = _extends({}, _tooltip2.default.DefaultType, { content: '(string|element|function)' }); var ClassName = { FADE: 'fade', - IN: 'in' + SHOW: 'show' }; - var Selector = { - TITLE: '.popover-title', - CONTENT: '.popover-content', - ARROW: '.popover-arrow' + TITLE: '.popover-header', + CONTENT: '.popover-body' }; - var Event = { - HIDE: 'hide' + EVENT_KEY, - HIDDEN: 'hidden' + EVENT_KEY, - SHOW: 'show' + EVENT_KEY, - SHOWN: 'shown' + EVENT_KEY, - INSERTED: 'inserted' + EVENT_KEY, - CLICK: 'click' + EVENT_KEY, - FOCUSIN: 'focusin' + EVENT_KEY, - FOCUSOUT: 'focusout' + EVENT_KEY, - MOUSEENTER: 'mouseenter' + EVENT_KEY, - MOUSELEAVE: 'mouseleave' + EVENT_KEY - }; + HIDE: "hide".concat(EVENT_KEY), + HIDDEN: "hidden".concat(EVENT_KEY), + SHOW: "show".concat(EVENT_KEY), + SHOWN: "shown".concat(EVENT_KEY), + INSERTED: "inserted".concat(EVENT_KEY), + CLICK: "click".concat(EVENT_KEY), + FOCUSIN: "focusin".concat(EVENT_KEY), + FOCUSOUT: "focusout".concat(EVENT_KEY), + MOUSEENTER: "mouseenter".concat(EVENT_KEY), + MOUSELEAVE: "mouseleave".concat(EVENT_KEY) + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ - /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ - */ + }; var Popover = function (_Tooltip) { _inherits(Popover, _Tooltip); @@ -139,39 +165,59 @@ define(['exports', './tooltip'], function (exports, _tooltip) { } _createClass(Popover, [{ - key: 'isWithContent', + key: "isWithContent", value: function isWithContent() { return this.getTitle() || this._getContent(); } }, { - key: 'getTipElement', + key: "addAttachmentClass", + value: function addAttachmentClass(attachment) { + $(this.getTipElement()).addClass("".concat(CLASS_PREFIX, "-").concat(attachment)); + } + }, { + key: "getTipElement", value: function getTipElement() { - return this.tip = this.tip || $(this.config.template)[0]; + this.tip = this.tip || $(this.config.template)[0]; + return this.tip; } }, { - key: 'setContent', + key: "setContent", value: function setContent() { - var $tip = $(this.getTipElement()); + var $tip = $(this.getTipElement()); // We use append for html objects to maintain js events - // we use append for html objects to maintain js events this.setElementContent($tip.find(Selector.TITLE), this.getTitle()); - this.setElementContent($tip.find(Selector.CONTENT), this._getContent()); - $tip.removeClass(ClassName.FADE).removeClass(ClassName.IN); + var content = this._getContent(); - this.cleanupTether(); + if (typeof content === 'function') { + content = content.call(this.element); + } + + this.setElementContent($tip.find(Selector.CONTENT), content); + $tip.removeClass("".concat(ClassName.FADE, " ").concat(ClassName.SHOW)); } }, { - key: '_getContent', + key: "_getContent", value: function _getContent() { - return this.element.getAttribute('data-content') || (typeof this.config.content === 'function' ? this.config.content.call(this.element) : this.config.content); + return this.element.getAttribute('data-content') || this.config.content; + } + }, { + key: "_cleanTipClass", + value: function _cleanTipClass() { + var $tip = $(this.getTipElement()); + var tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX); + + if (tabClass !== null && tabClass.length > 0) { + $tip.removeClass(tabClass.join('')); + } } }], [{ - key: '_jQueryInterface', + key: "_jQueryInterface", value: function _jQueryInterface(config) { return this.each(function () { var data = $(this).data(DATA_KEY); - var _config = (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' ? config : null; + + var _config = _typeof(config) === 'object' ? config : null; if (!data && /destroy|hide/.test(config)) { return; @@ -183,45 +229,46 @@ define(['exports', './tooltip'], function (exports, _tooltip) { } if (typeof config === 'string') { - if (data[config] === undefined) { - throw new Error('No method named "' + config + '"'); + if (typeof data[config] === 'undefined') { + throw new TypeError("No method named \"".concat(config, "\"")); } + data[config](); } }); } }, { - key: 'VERSION', + key: "VERSION", get: function get() { return VERSION; } }, { - key: 'Default', + key: "Default", get: function get() { return Default; } }, { - key: 'NAME', + key: "NAME", get: function get() { return NAME; } }, { - key: 'DATA_KEY', + key: "DATA_KEY", get: function get() { return DATA_KEY; } }, { - key: 'Event', + key: "Event", get: function get() { return Event; } }, { - key: 'EVENT_KEY', + key: "EVENT_KEY", get: function get() { return EVENT_KEY; } }, { - key: 'DefaultType', + key: "DefaultType", get: function get() { return DefaultType; } @@ -235,16 +282,16 @@ define(['exports', './tooltip'], function (exports, _tooltip) { * jQuery * ------------------------------------------------------------------------ */ - $.fn[NAME] = Popover._jQueryInterface; $.fn[NAME].Constructor = Popover; + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT; return Popover._jQueryInterface; }; return Popover; - }(jQuery); + }(_jquery2.default); exports.default = Popover; }); \ No newline at end of file diff --git a/theme/boost/amd/src/scrollspy.js b/theme/boost/amd/src/scrollspy.js index ef92b2d845a..dc6f96e9f3e 100644 --- a/theme/boost/amd/src/scrollspy.js +++ b/theme/boost/amd/src/scrollspy.js @@ -1,10 +1,12 @@ -define(['exports', './util'], function (exports, _util) { - 'use strict'; +define(["exports", "jquery", "./util"], function (exports, _jquery, _util) { + "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); + var _jquery2 = _interopRequireDefault(_jquery); + var _util2 = _interopRequireDefault(_util); function _interopRequireDefault(obj) { @@ -13,11 +15,37 @@ define(['exports', './util'], function (exports, _util) { }; } - var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { - return typeof obj; - } : function (obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; - }; + function _typeof(obj) { + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function _typeof(obj) { + return typeof obj; + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); + } + + function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); + } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { @@ -25,162 +53,151 @@ define(['exports', './util'], function (exports, _util) { } } - var _createClass = function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); } + } - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; - }(); + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } /** * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0-alpha.4): scrollspy.js + * Bootstrap (v4.0.0): scrollspy.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ - var ScrollSpy = function ($) { - /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ */ - var NAME = 'scrollspy'; - var VERSION = '4.0.0-alpha.4'; + var VERSION = '4.0.0'; var DATA_KEY = 'bs.scrollspy'; - var EVENT_KEY = '.' + DATA_KEY; + var EVENT_KEY = ".".concat(DATA_KEY); var DATA_API_KEY = '.data-api'; var JQUERY_NO_CONFLICT = $.fn[NAME]; - var Default = { offset: 10, method: 'auto', target: '' }; - var DefaultType = { offset: 'number', method: 'string', target: '(string|element)' }; - var Event = { - ACTIVATE: 'activate' + EVENT_KEY, - SCROLL: 'scroll' + EVENT_KEY, - LOAD_DATA_API: 'load' + EVENT_KEY + DATA_API_KEY + ACTIVATE: "activate".concat(EVENT_KEY), + SCROLL: "scroll".concat(EVENT_KEY), + LOAD_DATA_API: "load".concat(EVENT_KEY).concat(DATA_API_KEY) }; - var ClassName = { DROPDOWN_ITEM: 'dropdown-item', DROPDOWN_MENU: 'dropdown-menu', - NAV_LINK: 'nav-link', - NAV: 'nav', ACTIVE: 'active' }; - var Selector = { DATA_SPY: '[data-spy="scroll"]', ACTIVE: '.active', - LIST_ITEM: '.list-item', - LI: 'li', - LI_DROPDOWN: 'li.dropdown', + NAV_LIST_GROUP: '.nav, .list-group', NAV_LINKS: '.nav-link', + NAV_ITEMS: '.nav-item', + LIST_ITEMS: '.list-group-item', DROPDOWN: '.dropdown', DROPDOWN_ITEMS: '.dropdown-item', DROPDOWN_TOGGLE: '.dropdown-toggle' }; - var OffsetMethod = { OFFSET: 'offset', POSITION: 'position' - }; + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ - /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ - */ + }; var ScrollSpy = function () { function ScrollSpy(element, config) { + var _this = this; + _classCallCheck(this, ScrollSpy); this._element = element; this._scrollElement = element.tagName === 'BODY' ? window : element; this._config = this._getConfig(config); - this._selector = this._config.target + ' ' + Selector.NAV_LINKS + ',' + (this._config.target + ' ' + Selector.DROPDOWN_ITEMS); + this._selector = "".concat(this._config.target, " ").concat(Selector.NAV_LINKS, ",") + "".concat(this._config.target, " ").concat(Selector.LIST_ITEMS, ",") + "".concat(this._config.target, " ").concat(Selector.DROPDOWN_ITEMS); this._offsets = []; this._targets = []; this._activeTarget = null; this._scrollHeight = 0; - - $(this._scrollElement).on(Event.SCROLL, $.proxy(this._process, this)); - + $(this._scrollElement).on(Event.SCROLL, function (event) { + return _this._process(event); + }); this.refresh(); - this._process(); - } - // getters + this._process(); + } // Getters + _createClass(ScrollSpy, [{ - key: 'refresh', + key: "refresh", value: function refresh() { - var _this = this; - - var autoMethod = this._scrollElement !== this._scrollElement.window ? OffsetMethod.POSITION : OffsetMethod.OFFSET; + var _this2 = this; + var autoMethod = this._scrollElement === this._scrollElement.window ? OffsetMethod.OFFSET : OffsetMethod.POSITION; var offsetMethod = this._config.method === 'auto' ? autoMethod : this._config.method; - var offsetBase = offsetMethod === OffsetMethod.POSITION ? this._getScrollTop() : 0; - this._offsets = []; this._targets = []; - this._scrollHeight = this._getScrollHeight(); - var targets = $.makeArray($(this._selector)); - targets.map(function (element) { - var target = void 0; + var target; + var targetSelector = _util2.default.getSelectorFromElement(element); if (targetSelector) { target = $(targetSelector)[0]; } - if (target && (target.offsetWidth || target.offsetHeight)) { - // todo (fat): remove sketch reliance on jQuery position/offset - return [$(target)[offsetMethod]().top + offsetBase, targetSelector]; + if (target) { + var targetBCR = target.getBoundingClientRect(); + + if (targetBCR.width || targetBCR.height) { + // TODO (fat): remove sketch reliance on jQuery position/offset + return [$(target)[offsetMethod]().top + offsetBase, targetSelector]; + } } + return null; }).filter(function (item) { return item; }).sort(function (a, b) { return a[0] - b[0]; }).forEach(function (item) { - _this._offsets.push(item[0]); - _this._targets.push(item[1]); + _this2._offsets.push(item[0]); + + _this2._targets.push(item[1]); }); } }, { - key: 'dispose', + key: "dispose", value: function dispose() { $.removeData(this._element, DATA_KEY); $(this._scrollElement).off(EVENT_KEY); - this._element = null; this._scrollElement = null; this._config = null; @@ -191,17 +208,19 @@ define(['exports', './util'], function (exports, _util) { this._scrollHeight = null; } }, { - key: '_getConfig', + key: "_getConfig", value: function _getConfig(config) { - config = $.extend({}, Default, config); + config = _extends({}, Default, config); if (typeof config.target !== 'string') { var id = $(config.target).attr('id'); + if (!id) { id = _util2.default.getUID(NAME); $(config.target).attr('id', id); } - config.target = '#' + id; + + config.target = "#".concat(id); } _util2.default.typeCheckConfig(NAME, config, DefaultType); @@ -209,21 +228,28 @@ define(['exports', './util'], function (exports, _util) { return config; } }, { - key: '_getScrollTop', + key: "_getScrollTop", value: function _getScrollTop() { - return this._scrollElement === window ? this._scrollElement.scrollY : this._scrollElement.scrollTop; + return this._scrollElement === window ? this._scrollElement.pageYOffset : this._scrollElement.scrollTop; } }, { - key: '_getScrollHeight', + key: "_getScrollHeight", value: function _getScrollHeight() { return this._scrollElement.scrollHeight || Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); } }, { - key: '_process', + key: "_getOffsetHeight", + value: function _getOffsetHeight() { + return this._scrollElement === window ? window.innerHeight : this._scrollElement.getBoundingClientRect().height; + } + }, { + key: "_process", value: function _process() { var scrollTop = this._getScrollTop() + this._config.offset; + var scrollHeight = this._getScrollHeight(); - var maxScroll = this._config.offset + scrollHeight - this._scrollElement.offsetHeight; + + var maxScroll = this._config.offset + scrollHeight - this._getOffsetHeight(); if (this._scrollHeight !== scrollHeight) { this.refresh(); @@ -235,16 +261,20 @@ define(['exports', './util'], function (exports, _util) { if (this._activeTarget !== target) { this._activate(target); } + + return; } - if (this._activeTarget && scrollTop < this._offsets[0]) { + if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) { this._activeTarget = null; + this._clear(); + return; } for (var i = this._offsets.length; i--;) { - var isActiveTarget = this._activeTarget !== this._targets[i] && scrollTop >= this._offsets[i] && (this._offsets[i + 1] === undefined || scrollTop < this._offsets[i + 1]); + var isActiveTarget = this._activeTarget !== this._targets[i] && scrollTop >= this._offsets[i] && (typeof this._offsets[i + 1] === 'undefined' || scrollTop < this._offsets[i + 1]); if (isActiveTarget) { this._activate(this._targets[i]); @@ -252,26 +282,31 @@ define(['exports', './util'], function (exports, _util) { } } }, { - key: '_activate', + key: "_activate", value: function _activate(target) { this._activeTarget = target; this._clear(); - var queries = this._selector.split(','); - queries = queries.map(function (selector) { - return selector + '[data-target="' + target + '"],' + (selector + '[href="' + target + '"]'); - }); + var queries = this._selector.split(','); // eslint-disable-next-line arrow-body-style + + queries = queries.map(function (selector) { + return "".concat(selector, "[data-target=\"").concat(target, "\"],") + "".concat(selector, "[href=\"").concat(target, "\"]"); + }); var $link = $(queries.join(',')); if ($link.hasClass(ClassName.DROPDOWN_ITEM)) { $link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE); $link.addClass(ClassName.ACTIVE); } else { - // todo (fat) this is kinda sus... - // recursively add actives to tested nav-links - $link.parents(Selector.LI).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE); + // Set triggered link as active + $link.addClass(ClassName.ACTIVE); // Set triggered links parents as active + // With both
` elements. + body { - // Make the `body` use the `font-size-root` + margin: 0; // 1 font-family: $font-family-base; font-size: $font-size-base; + font-weight: $font-weight-base; line-height: $line-height-base; - // Go easy on the eyes and use something other than `#000` for text color: $body-color; - // By default, `` has no `background-color` so we set one as a best practice. - background-color: $body-bg; + text-align: left; // 3 + background-color: $body-bg; // 2 } // Suppress the focus outline on elements that cannot be accessed via keyboard. @@ -85,7 +71,19 @@ body { // // Credit: https://github.com/suitcss/base [tabindex="-1"]:focus { - outline: none !important; + outline: 0 !important; +} + + +// Content grouping +// +// 1. Add the correct box sizing in Firefox. +// 2. Show the overflow in Edge and IE. + +hr { + box-sizing: content-box; // 1 + height: 0; // 1 + overflow: visible; // 2 } @@ -97,10 +95,12 @@ body { // // By default, `

`-`

` all receive top and bottom margins. We nuke the top // margin for easier control within type scales as it avoids margin collapsing. +// stylelint-disable selector-list-comma-newline-after h1, h2, h3, h4, h5, h6 { margin-top: 0; - margin-bottom: .5rem; + margin-bottom: $headings-margin-bottom; } +// stylelint-enable selector-list-comma-newline-after // Reset margins on paragraphs // @@ -108,15 +108,22 @@ h1, h2, h3, h4, h5, h6 { // bottom margin to use `rem` units instead of `em`. p { margin-top: 0; - margin-bottom: 1rem; + margin-bottom: $paragraph-margin-bottom; } -// Abbreviations and acronyms +// Abbreviations +// +// 1. Remove the bottom border in Firefox 39-. +// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. +// 3. Add explicit cursor to indicate changed behavior. +// 4. Duplicate behavior to the data-* attribute for our tooltip plugin + abbr[title], -// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 -abbr[data-original-title] { - cursor: help; - border-bottom: 1px dotted $abbr-border-color; +abbr[data-original-title] { // 4 + text-decoration: underline; // 2 + text-decoration: underline dotted; // 2 + cursor: help; // 3 + border-bottom: 0; // 1 } address { @@ -152,6 +159,37 @@ blockquote { margin: 0 0 1rem; } +dfn { + font-style: italic; // Add the correct font style in Android 4.3- +} + +// stylelint-disable font-weight-notation +b, +strong { + font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari +} +// stylelint-enable font-weight-notation + +small { + font-size: 80%; // Add the correct font size in all browsers +} + +// +// Prevent `sub` and `sup` elements from affecting the line height in +// all browsers. +// + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sub { bottom: -.25em; } +sup { top: -.5em; } + // // Links @@ -160,15 +198,13 @@ blockquote { a { color: $link-color; text-decoration: $link-decoration; + background-color: transparent; // Remove the gray background on active links in IE 10. + -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+. - @include hover-focus { + @include hover { color: $link-hover-color; text-decoration: $link-hover-decoration; } - - &:focus { - @include tab-focus(); - } } // And undo these styles for placeholder links/named anchors (without href) @@ -187,7 +223,7 @@ a:not([href]):not([tabindex]) { } &:focus { - outline: none; + outline: 0; } } @@ -196,13 +232,26 @@ a:not([href]):not([tabindex]) { // Code // +// stylelint-disable font-family-no-duplicate-names +pre, +code, +kbd, +samp { + font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers. + font-size: 1em; // Correct the odd `em` font sizing in all browsers. +} +// stylelint-enable font-family-no-duplicate-names + pre { // Remove browser default top margin margin-top: 0; // Reset browser default of `1em` to use `rem`s margin-bottom: 1rem; - // Normalize v4 removed this property, causing `
` content to break out of wrapping code snippets
+  // Don't allow content to break outside
   overflow: auto;
+  // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so
+  // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+  -ms-overflow-style: scrollbar;
 }
 
 
@@ -211,56 +260,22 @@ pre {
 //
 
 figure {
-  // Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
-  // We reset that to create a better flow in-page.
+  // Apply a consistent margin strategy (matches our type styles).
   margin: 0 0 1rem;
 }
 
 
 //
-// Images
+// Images and content
 //
 
 img {
-  // By default, ``s are `inline-block`. This assumes that, and vertically
-  // centers them. This won't apply should you reset them to `block` level.
   vertical-align: middle;
-  // Note: ``s are deliberately not made responsive by default.
-  // For the rationale behind this, see the comments on the `.img-fluid` class.
+  border-style: none; // Remove the border on images inside links in IE 10-.
 }
 
-
-// iOS "clickable elements" fix for role="button"
-//
-// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
-// for traditionally non-focusable elements with role="button"
-// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-
-[role="button"] {
-  cursor: pointer;
-}
-
-
-// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
-//
-// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
-// DON'T remove the click delay when `` is present.
-// However, they DO support removing the click delay via `touch-action: manipulation`.
-// See:
-// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
-// * http://caniuse.com/#feat=css-touch-action
-// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
-
-a,
-area,
-button,
-[role="button"],
-input,
-label,
-select,
-summary,
-textarea {
-  touch-action: manipulation;
+svg:not(:root) {
+  overflow: hidden; // Hide the overflow in IE
 }
 
 
@@ -269,10 +284,7 @@ textarea {
 //
 
 table {
-  // No longer part of Normalize since v4
-  border-collapse: collapse;
-  // Reset for nesting within parents with `background-color`.
-  background-color: $table-bg;
+  border-collapse: collapse; // Prevent double borders
 }
 
 caption {
@@ -284,8 +296,9 @@ caption {
 }
 
 th {
-  // Centered by default, but left-align-ed to match the `td`s below.
-  text-align: left;
+  // Matches default `
` alignment by inheriting from the ``, or the + // closest parent with a set `text-align`. + text-align: inherit; } @@ -299,6 +312,13 @@ label { margin-bottom: .5rem; } +// Remove the default `border-radius` that macOS Chrome adds. +// +// Details at https://github.com/twbs/bootstrap/issues/24093 +button { + border-radius: 0; +} + // Work around a Firefox/IE bug where the transparent `button` background // results in a loss of the default `button` focus styles. // @@ -311,25 +331,47 @@ button:focus { input, button, select, +optgroup, textarea { - // Remove all `margin`s so our classes don't have to do it themselves. - margin: 0; - // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are - // properly inherited. However, `line-height` isn't addressed there. Using this - // ensures we don't need to unnecessarily redeclare the global font stack. + margin: 0; // Remove the margin in Firefox and Safari + font-family: inherit; + font-size: inherit; line-height: inherit; - // iOS adds rounded borders by default - border-radius: 0; +} + +button, +input { + overflow: visible; // Show the overflow in Edge +} + +button, +select { + text-transform: none; // Remove the inheritance of text transform in Firefox +} + +// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` +// controls in Android 4. +// 2. Correct the inability to style clickable types in iOS and Safari. +button, +html [type="button"], // 1 +[type="reset"], +[type="submit"] { + -webkit-appearance: button; // 2 +} + +// Remove inner border and padding from Firefox, but don't restore the outline like Normalize. +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + padding: 0; + border-style: none; } input[type="radio"], input[type="checkbox"] { - // Apply a disabled cursor for radios and checkboxes. - // - // Note: Neither radios nor checkboxes can be readonly. - &:disabled { - cursor: $cursor-disabled; - } + box-sizing: border-box; // 1. Add the correct box sizing in IE 10- + padding: 0; // 2. Remove the padding in IE 10- } @@ -340,20 +382,23 @@ input[type="month"] { // Remove the default appearance of temporal inputs to avoid a Mobile Safari // bug where setting a custom line-height prevents text from being vertically // centered within the input. - // - // Bug report: https://github.com/twbs/bootstrap/issues/11266 + // See https://bugs.webkit.org/show_bug.cgi?id=139848 + // and https://github.com/twbs/bootstrap/issues/11266 -webkit-appearance: listbox; } textarea { + overflow: auto; // Remove the default vertical scrollbar in IE. // Textareas should really only resize vertically so they don't break their (horizontal) containers. resize: vertical; } fieldset { - // Chrome and Firefox set a `min-width: min-content;` on fieldsets, - // so we reset that to ensure it behaves more like a standard block element. - // See https://github.com/twbs/bootstrap/issues/12359. + // Browsers set a default `min-width: min-content;` on fieldsets, + // unlike e.g. `
`s, which have `min-width: 0;` by default. + // So we reset that to ensure fieldsets behave more like a standard block element. + // See https://github.com/twbs/bootstrap/issues/12359 + // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements min-width: 0; // Reset the default outline behavior of fieldsets so they don't affect page layout. padding: 0; @@ -361,33 +406,77 @@ fieldset { border: 0; } +// 1. Correct the text wrapping in Edge and IE. +// 2. Correct the color inheritance from `fieldset` elements in IE. legend { - // Reset the entire legend element to match the `fieldset` display: block; width: 100%; + max-width: 100%; // 1 padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; + color: inherit; // 2 + white-space: normal; // 1 } -input[type="search"] { +progress { + vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera. +} + +// Correct the cursor style of increment and decrement buttons in Chrome. +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { // This overrides the extra rounded corners on search inputs in iOS so that our // `.form-control` class can properly style them. Note that this cannot simply // be added to `.form-control` as it's not specific enough. For details, see // https://github.com/twbs/bootstrap/issues/11586. + outline-offset: -2px; // 2. Correct the outline style in Safari. -webkit-appearance: none; } -// todo: needed? +// +// Remove the inner padding and cancel buttons in Chrome and Safari on macOS. +// + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// 1. Correct the inability to style clickable types in iOS and Safari. +// 2. Change font properties to `inherit` in Safari. +// + +::-webkit-file-upload-button { + font: inherit; // 2 + -webkit-appearance: button; // 1 +} + +// +// Correct element displays +// + output { display: inline-block; -// font-size: $font-size-base; -// line-height: $line-height; -// color: $input-color; +} + +summary { + display: list-item; // Add the correct display in all browsers + cursor: pointer; +} + +template { + display: none; // Add the correct display in IE } // Always hide an element with the `hidden` HTML attribute (from PureCSS). +// Needed for proper display in IE 10-. [hidden] { display: none !important; } diff --git a/theme/boost/scss/bootstrap/_root.scss b/theme/boost/scss/bootstrap/_root.scss new file mode 100644 index 00000000000..ad550df3b49 --- /dev/null +++ b/theme/boost/scss/bootstrap/_root.scss @@ -0,0 +1,19 @@ +:root { + // Custom variable values only support SassScript inside `#{}`. + @each $color, $value in $colors { + --#{$color}: #{$value}; + } + + @each $color, $value in $theme-colors { + --#{$color}: #{$value}; + } + + @each $bp, $value in $grid-breakpoints { + --breakpoint-#{$bp}: #{$value}; + } + + // Use `inspect` for lists so that quoted items keep the quotes. + // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 + --font-family-sans-serif: #{inspect($font-family-sans-serif)}; + --font-family-monospace: #{inspect($font-family-monospace)}; +} diff --git a/theme/boost/scss/bootstrap/_tables.scss b/theme/boost/scss/bootstrap/_tables.scss index 235ec984e06..0e3b1198e3d 100644 --- a/theme/boost/scss/bootstrap/_tables.scss +++ b/theme/boost/scss/bootstrap/_tables.scss @@ -6,6 +6,7 @@ width: 100%; max-width: 100%; margin-bottom: $spacer; + background-color: $table-bg; // Reset for nesting within parents with `background-color`. th, td { @@ -36,7 +37,7 @@ .table-sm { th, td { - padding: $table-sm-cell-padding; + padding: $table-cell-padding-sm; } } @@ -68,7 +69,7 @@ .table-striped { tbody tr:nth-of-type(odd) { - background-color: $table-bg-accent; + background-color: $table-accent-bg; } } @@ -80,7 +81,7 @@ .table-hover { tbody tr { @include hover { - background-color: $table-bg-hover; + background-color: $table-hover-bg; } } } @@ -91,106 +92,89 @@ // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. -// Generate the contextual variants -@include table-row-variant(active, $table-bg-active); -@include table-row-variant(success, $state-success-bg); -@include table-row-variant(info, $state-info-bg); -@include table-row-variant(warning, $state-warning-bg); -@include table-row-variant(danger, $state-danger-bg); +@each $color, $value in $theme-colors { + @include table-row-variant($color, theme-color-level($color, -9)); +} + +@include table-row-variant(active, $table-active-bg); -// Inverse styles +// Dark styles // // Same table markup, but inverted color scheme: dark background and light text. -.thead-inverse { - th { - color: #fff; - background-color: $gray-dark; +// stylelint-disable-next-line no-duplicate-selectors +.table { + .thead-dark { + th { + color: $table-dark-color; + background-color: $table-dark-bg; + border-color: $table-dark-border-color; + } + } + + .thead-light { + th { + color: $table-head-color; + background-color: $table-head-bg; + border-color: $table-border-color; + } } } -.thead-default { - th { - color: $gray; - background-color: $gray-lighter; - } -} - -.table-inverse { - color: $gray-lighter; - background-color: $gray-dark; +.table-dark { + color: $table-dark-color; + background-color: $table-dark-bg; th, td, thead th { - border-color: $gray; + border-color: $table-dark-border-color; } &.table-bordered { border: 0; } -} + &.table-striped { + tbody tr:nth-of-type(odd) { + background-color: $table-dark-accent-bg; + } + } + + &.table-hover { + tbody tr { + @include hover { + background-color: $table-dark-hover-bg; + } + } + } +} // Responsive tables // -// Wrap your tables in `.table-responsive` and we'll make them mobile friendly -// by enabling horizontal scrolling. Only applies <768px. Everything above that -// will display normally. +// Generate series of `.table-responsive-*` classes for configuring the screen +// size of where your table will overflow. .table-responsive { - display: block; - width: 100%; - min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) - overflow-x: auto; + @each $breakpoint in map-keys($grid-breakpoints) { + $next: breakpoint-next($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($next, $grid-breakpoints); - // TODO: find out if we need this still. - // - // border: $table-border-width solid $table-border-color; - // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 -} + &#{$infix} { + @include media-breakpoint-down($breakpoint) { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 - -.table-reflow { - thead { - float: left; - } - - tbody { - display: block; - white-space: nowrap; - } - - th, - td { - border-top: $table-border-width solid $table-border-color; - border-left: $table-border-width solid $table-border-color; - - &:last-child { - border-right: $table-border-width solid $table-border-color; - } - } - - thead, - tbody, - tfoot { - &:last-child { - tr:last-child th, - tr:last-child td { - border-bottom: $table-border-width solid $table-border-color; + // Prevent double border on horizontal scroll due to use of `display: block;` + > .table-bordered { + border: 0; + } } } } - - tr { - float: left; - - th, - td { - display: block !important; - border: $table-border-width solid $table-border-color; - } - } } diff --git a/theme/boost/scss/bootstrap/_tags.scss b/theme/boost/scss/bootstrap/_tags.scss deleted file mode 100644 index dee9ed95d23..00000000000 --- a/theme/boost/scss/bootstrap/_tags.scss +++ /dev/null @@ -1,77 +0,0 @@ -// Base class -// -// Requires one of the contextual, color modifier classes for `color` and -// `background-color`. - -.tag { - display: inline-block; - padding: $tag-padding-y $tag-padding-x; - font-size: $tag-font-size; - font-weight: $tag-font-weight; - line-height: 1; - color: $tag-color; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - @include border-radius(); - - // Empty tags collapse automatically - &:empty { - display: none; - } -} - -// Quick fix for tags in buttons -.btn .tag { - position: relative; - top: -1px; -} - -// scss-lint:disable QualifyingElement -// Add hover effects, but only for links -a.tag { - @include hover-focus { - color: $tag-link-hover-color; - text-decoration: none; - cursor: pointer; - } -} -// scss-lint:enable QualifyingElement - -// Pill tags -// -// Make them extra rounded with a modifier to replace v3's badges. - -.tag-pill { - padding-right: $tag-pill-padding-x; - padding-left: $tag-pill-padding-x; - @include border-radius($tag-pill-border-radius); -} - -// Colors -// -// Contextual variations (linked tags get darker on :hover). - -.tag-default { - @include tag-variant($tag-default-bg); -} - -.tag-primary { - @include tag-variant($tag-primary-bg); -} - -.tag-success { - @include tag-variant($tag-success-bg); -} - -.tag-info { - @include tag-variant($tag-info-bg); -} - -.tag-warning { - @include tag-variant($tag-warning-bg); -} - -.tag-danger { - @include tag-variant($tag-danger-bg); -} diff --git a/theme/boost/scss/bootstrap/_tooltip.scss b/theme/boost/scss/bootstrap/_tooltip.scss index e8151af07db..1286ebfcf90 100644 --- a/theme/boost/scss/bootstrap/_tooltip.scss +++ b/theme/boost/scss/bootstrap/_tooltip.scss @@ -3,70 +3,107 @@ position: absolute; z-index: $zindex-tooltip; display: block; + margin: $tooltip-margin; // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); - font-size: $font-size-sm; + font-size: $tooltip-font-size; // Allow breaking very long words so they don't overflow the tooltip's bounds word-wrap: break-word; opacity: 0; - &.in { opacity: $tooltip-opacity; } + &.show { opacity: $tooltip-opacity; } - &.tooltip-top, - &.bs-tether-element-attached-bottom { - padding: $tooltip-arrow-width 0; - margin-top: -$tooltip-margin; + .arrow { + position: absolute; + display: block; + width: $tooltip-arrow-width; + height: $tooltip-arrow-height; - .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; - border-width: $tooltip-arrow-width $tooltip-arrow-width 0; + &::before { + position: absolute; + content: ""; + border-color: transparent; + border-style: solid; + } + } +} + +.bs-tooltip-top { + padding: $tooltip-arrow-height 0; + + .arrow { + bottom: 0; + + &::before { + top: 0; + border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; border-top-color: $tooltip-arrow-color; } } - &.tooltip-right, - &.bs-tether-element-attached-left { - padding: 0 $tooltip-arrow-width; - margin-left: $tooltip-margin; +} - .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -$tooltip-arrow-width; - border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; +.bs-tooltip-right { + padding: 0 $tooltip-arrow-height; + + .arrow { + left: 0; + width: $tooltip-arrow-height; + height: $tooltip-arrow-width; + + &::before { + right: 0; + border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; border-right-color: $tooltip-arrow-color; } } - &.tooltip-bottom, - &.bs-tether-element-attached-top { - padding: $tooltip-arrow-width 0; - margin-top: $tooltip-margin; +} - .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; - border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; +.bs-tooltip-bottom { + padding: $tooltip-arrow-height 0; + + .arrow { + top: 0; + + &::before { + bottom: 0; + border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; border-bottom-color: $tooltip-arrow-color; } } - &.tooltip-left, - &.bs-tether-element-attached-right { - padding: 0 $tooltip-arrow-width; - margin-left: -$tooltip-margin; +} - .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -$tooltip-arrow-width; - border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; +.bs-tooltip-left { + padding: 0 $tooltip-arrow-height; + + .arrow { + right: 0; + width: $tooltip-arrow-height; + height: $tooltip-arrow-width; + + &::before { + left: 0; + border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; border-left-color: $tooltip-arrow-color; } } } +.bs-tooltip-auto { + &[x-placement^="top"] { + @extend .bs-tooltip-top; + } + &[x-placement^="right"] { + @extend .bs-tooltip-right; + } + &[x-placement^="bottom"] { + @extend .bs-tooltip-bottom; + } + &[x-placement^="left"] { + @extend .bs-tooltip-left; + } +} + // Wrapper for the tooltip content .tooltip-inner { max-width: $tooltip-max-width; @@ -74,14 +111,5 @@ color: $tooltip-color; text-align: center; background-color: $tooltip-bg; - @include border-radius($border-radius); -} - -// Arrows -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; + @include border-radius($tooltip-border-radius); } diff --git a/theme/boost/scss/bootstrap/_transitions.scss b/theme/boost/scss/bootstrap/_transitions.scss new file mode 100644 index 00000000000..df5744b25f5 --- /dev/null +++ b/theme/boost/scss/bootstrap/_transitions.scss @@ -0,0 +1,36 @@ +// stylelint-disable selector-no-qualifying-type + +.fade { + opacity: 0; + @include transition($transition-fade); + + &.show { + opacity: 1; + } +} + +.collapse { + display: none; + &.show { + display: block; + } +} + +tr { + &.collapse.show { + display: table-row; + } +} + +tbody { + &.collapse.show { + display: table-row-group; + } +} + +.collapsing { + position: relative; + height: 0; + overflow: hidden; + @include transition($transition-collapse); +} diff --git a/theme/boost/scss/bootstrap/_type.scss b/theme/boost/scss/bootstrap/_type.scss index ff7114074db..57d610f0c1c 100644 --- a/theme/boost/scss/bootstrap/_type.scss +++ b/theme/boost/scss/bootstrap/_type.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important, selector-list-comma-newline-after + // // Headings // @@ -11,12 +13,12 @@ h1, h2, h3, h4, h5, h6, color: $headings-color; } -h1, .h1 { font-size: $font-size-h1; } -h2, .h2 { font-size: $font-size-h2; } -h3, .h3 { font-size: $font-size-h3; } -h4, .h4 { font-size: $font-size-h4; } -h5, .h5 { font-size: $font-size-h5; } -h6, .h6 { font-size: $font-size-h6; } +h1, .h1 { font-size: $h1-font-size; } +h2, .h2 { font-size: $h2-font-size; } +h3, .h3 { font-size: $h3-font-size; } +h4, .h4 { font-size: $h4-font-size; } +h5, .h5 { font-size: $h5-font-size; } +h6, .h6 { font-size: $h6-font-size; } .lead { font-size: $lead-font-size; @@ -27,18 +29,22 @@ h6, .h6 { font-size: $font-size-h6; } .display-1 { font-size: $display1-size; font-weight: $display1-weight; + line-height: $display-line-height; } .display-2 { font-size: $display2-size; font-weight: $display2-weight; + line-height: $display-line-height; } .display-3 { font-size: $display3-size; font-weight: $display3-weight; + line-height: $display-line-height; } .display-4 { font-size: $display4-size; font-weight: $display4-weight; + line-height: $display-line-height; } @@ -47,8 +53,8 @@ h6, .h6 { font-size: $font-size-h6; } // hr { - margin-top: $spacer-y; - margin-bottom: $spacer-y; + margin-top: $hr-margin-y; + margin-bottom: $hr-margin-y; border: 0; border-top: $hr-border-width solid $hr-border-color; } @@ -61,7 +67,7 @@ hr { small, .small { font-size: $small-font-size; - font-weight: normal; + font-weight: $font-weight-normal; } mark, @@ -104,10 +110,8 @@ mark, // Blockquotes .blockquote { - padding: ($spacer / 2) $spacer; margin-bottom: $spacer; font-size: $blockquote-font-size; - border-left: $blockquote-border-width solid $blockquote-border-color; } .blockquote-footer { @@ -119,32 +123,3 @@ mark, content: "\2014 \00A0"; // em dash, nbsp } } - -// Opposite alignment of blockquote -.blockquote-reverse { - padding-right: $spacer; - padding-left: 0; - text-align: right; - border-right: $blockquote-border-width solid $blockquote-border-color; - border-left: 0; -} - -.blockquote-reverse .blockquote-footer { - &::before { - content: ""; - } - &::after { - content: "\00A0 \2014"; // nbsp, em dash - } -} - -@if not $enable-flex { - // Clean up some horizontal `
`s built with grids - // scss-lint:disable QualifyingElement - dl.row { - > dd + dt { - clear: left; - } - } - // scss-lint:enable QualifyingElement -} diff --git a/theme/boost/scss/bootstrap/_utilities.scss b/theme/boost/scss/bootstrap/_utilities.scss index 87b8ba6da7e..7b2a1ebe9d0 100644 --- a/theme/boost/scss/bootstrap/_utilities.scss +++ b/theme/boost/scss/bootstrap/_utilities.scss @@ -1,9 +1,14 @@ +@import "utilities/align"; @import "utilities/background"; +@import "utilities/borders"; @import "utilities/clearfix"; @import "utilities/display"; +@import "utilities/embed"; @import "utilities/flex"; -@import "utilities/pulls"; +@import "utilities/float"; +@import "utilities/position"; @import "utilities/screenreaders"; +@import "utilities/sizing"; @import "utilities/spacing"; @import "utilities/text"; @import "utilities/visibility"; diff --git a/theme/boost/scss/bootstrap/_variables.scss b/theme/boost/scss/bootstrap/_variables.scss index 05c008820d1..be580deb334 100644 --- a/theme/boost/scss/bootstrap/_variables.scss +++ b/theme/boost/scss/bootstrap/_variables.scss @@ -1,71 +1,109 @@ // Variables // -// Copy settings from this file into the provided `_custom.scss` to override -// the Bootstrap defaults without modifying key, versioned files. +// Variables should follow the `$component-state-property-size` formula for +// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. -// Table of Contents // -// Colors -// Options -// Spacing -// Body -// Links -// Grid breakpoints -// Grid containers -// Grid columns -// Fonts -// Components - -@mixin _assert-ascending($map, $map-name) { - $prev-key: null; - $prev-num: null; - @each $key, $num in $map { - @if $prev-num == null { - // Do nothing - } @else if not comparable($prev-num, $num) { - @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; - } @else if $prev-num >= $num { - @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; - } - $prev-key: $key; - $prev-num: $num; - } -} - -// General variable structure +// Color system // -// Variable format should follow the `$component-modifier-state-property` order. +// stylelint-disable +$white: #fff !default; +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #dee2e6 !default; +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #6c757d !default; +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #212529 !default; +$black: #000 !default; -// Colors -// -// Grayscale and brand colors for use across Bootstrap. +$grays: () !default; +$grays: map-merge(( + "100": $gray-100, + "200": $gray-200, + "300": $gray-300, + "400": $gray-400, + "500": $gray-500, + "600": $gray-600, + "700": $gray-700, + "800": $gray-800, + "900": $gray-900 +), $grays); -$gray-dark: #373a3c !default; -$gray: #55595c !default; -$gray-light: #818a91 !default; -$gray-lighter: #eceeef !default; -$gray-lightest: #f7f7f9 !default; +$blue: #007bff !default; +$indigo: #6610f2 !default; +$purple: #6f42c1 !default; +$pink: #e83e8c !default; +$red: #dc3545 !default; +$orange: #fd7e14 !default; +$yellow: #ffc107 !default; +$green: #28a745 !default; +$teal: #20c997 !default; +$cyan: #17a2b8 !default; -$brand-primary: #0275d8 !default; -$brand-success: #5cb85c !default; -$brand-info: #5bc0de !default; -$brand-warning: #f0ad4e !default; -$brand-danger: #d9534f !default; -$brand-inverse: $gray-dark !default; +$colors: () !default; +$colors: map-merge(( + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800 +), $colors); +$primary: $blue !default; +$secondary: $gray-600 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-100 !default; +$dark: $gray-800 !default; + +$theme-colors: () !default; +$theme-colors: map-merge(( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark +), $theme-colors); +// stylelint-enable + +// Set a specific jump point for requesting color jumps +$theme-color-interval: 8% !default; + +// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. +$yiq-contrasted-threshold: 150 !default; + +// Customize the light and dark text colors for use in our YIQ color contrast function. +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; // Options // // Quickly modify global styling by enabling or disabling optional features. -$enable-flex: false !default; +$enable-caret: true !default; $enable-rounded: true !default; $enable-shadows: false !default; $enable-gradients: false !default; -$enable-transitions: false !default; -$enable-hover-media-query: false !default; +$enable-transitions: true !default; +$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS $enable-grid-classes: true !default; $enable-print-styles: true !default; @@ -76,46 +114,49 @@ $enable-print-styles: true !default; // variables. Mostly focused on spacing. // You can add more entries to the $spacers map, should you need more variation. -$spacer: 1rem !default; -$spacer-x: $spacer !default; -$spacer-y: $spacer !default; -$spacers: ( - 0: ( - x: 0, - y: 0 - ), - 1: ( - x: $spacer-x, - y: $spacer-y - ), - 2: ( - x: ($spacer-x * 1.5), - y: ($spacer-y * 1.5) - ), - 3: ( - x: ($spacer-x * 3), - y: ($spacer-y * 3) - ) -) !default; -$border-width: 1px !default; +// stylelint-disable +$spacer: 1rem !default; +$spacers: () !default; +$spacers: map-merge(( + 0: 0, + 1: ($spacer * .25), + 2: ($spacer * .5), + 3: $spacer, + 4: ($spacer * 1.5), + 5: ($spacer * 3) +), $spacers); +// This variable affects the `.h-*` and `.w-*` classes. +$sizes: () !default; +$sizes: map-merge(( + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100% +), $sizes); +// stylelint-enable // Body // // Settings for the `` element. -$body-bg: #fff !default; -$body-color: $gray-dark !default; - +$body-bg: $white !default; +$body-color: $gray-900 !default; // Links // // Style anchor elements. -$link-color: $brand-primary !default; -$link-decoration: none !default; -$link-hover-color: darken($link-color, 15%) !default; -$link-hover-decoration: underline !default; +$link-color: theme-color("primary") !default; +$link-decoration: none !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: underline !default; + +// Paragraphs +// +// Style p element. + +$paragraph-margin-bottom: 1rem !default; // Grid breakpoints @@ -125,12 +166,14 @@ $link-hover-decoration: underline !default; $grid-breakpoints: ( xs: 0, - sm: 544px, + sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default; + @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); +@include _assert-starts-at-zero($grid-breakpoints); // Grid containers @@ -138,11 +181,12 @@ $grid-breakpoints: ( // Define the maximum width of `.container` for different screen sizes. $container-max-widths: ( - sm: 576px, + sm: 540px, md: 720px, - lg: 940px, + lg: 960px, xl: 1140px ) !default; + @include _assert-ascending($container-max-widths, "$container-max-widths"); @@ -150,314 +194,364 @@ $container-max-widths: ( // // Set the number of columns and specify the width of the gutters. -$grid-columns: 12 !default; -$grid-gutter-width: 30px !default; - - -// Typography -// -// Font, line-height, and color for body text, headings, and more. - -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; -$font-family-serif: Georgia, "Times New Roman", Times, serif !default; -$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; -$font-family-base: $font-family-sans-serif !default; - -// Pixel value used to responsively scale all typography. Applied to the `` element. -$font-size-root: 16px !default; - -$font-size-base: 1rem !default; -$font-size-lg: 1.25rem !default; -$font-size-sm: .875rem !default; -$font-size-xs: .75rem !default; - -$line-height-base: 1.5 !default; - -$font-size-h1: 2.5rem !default; -$font-size-h2: 2rem !default; -$font-size-h3: 1.75rem !default; -$font-size-h4: 1.5rem !default; -$font-size-h5: 1.25rem !default; -$font-size-h6: 1rem !default; - -$display1-size: 6rem !default; -$display2-size: 5.5rem !default; -$display3-size: 4.5rem !default; -$display4-size: 3.5rem !default; - -$display1-weight: 300 !default; -$display2-weight: 300 !default; -$display3-weight: 300 !default; -$display4-weight: 300 !default; - -$headings-margin-bottom: ($spacer / 2) !default; -$headings-font-family: inherit !default; -$headings-font-weight: 500 !default; -$headings-line-height: 1.1 !default; -$headings-color: inherit !default; - -$lead-font-size: 1.25rem !default; -$lead-font-weight: 300 !default; - -$small-font-size: 80% !default; - -$text-muted: $gray-light !default; - -$abbr-border-color: $gray-light !default; - -$blockquote-small-color: $gray-light !default; -$blockquote-font-size: ($font-size-base * 1.25) !default; -$blockquote-border-color: $gray-lighter !default; -$blockquote-border-width: .25rem !default; - -$hr-border-color: rgba(0,0,0,.1) !default; -$hr-border-width: $border-width !default; - -$mark-padding: .2em !default; - -$dt-font-weight: bold !default; - -$kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default; -$nested-kbd-font-weight: bold !default; - -$list-inline-padding: 5px !default; - +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; // Components // // Define common padding and border radius sizes and more. -$line-height-lg: (4 / 3) !default; -$line-height-sm: 1.5 !default; +$line-height-lg: 1.5 !default; +$line-height-sm: 1.5 !default; -$border-radius: .25rem !default; -$border-radius-lg: .3rem !default; -$border-radius-sm: .2rem !default; +$border-width: 1px !default; +$border-color: $gray-300 !default; -$component-active-color: #fff !default; -$component-active-bg: $brand-primary !default; +$border-radius: .25rem !default; +$border-radius-lg: .3rem !default; +$border-radius-sm: .2rem !default; -$caret-width: .3em !default; -$caret-width-lg: $caret-width !default; +$component-active-color: $white !default; +$component-active-bg: theme-color("primary") !default; + +$caret-width: .3em !default; + +$transition-base: all .2s ease-in-out !default; +$transition-fade: opacity .15s linear !default; +$transition-collapse: height .35s ease !default; + + +// Fonts +// +// Font, line-height, and color for body text, headings, and more. + +// stylelint-disable value-keyword-case +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; +$font-family-base: $font-family-sans-serif !default; +// stylelint-enable value-keyword-case + +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-size-lg: ($font-size-base * 1.25) !default; +$font-size-sm: ($font-size-base * .875) !default; + +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 700 !default; + +$font-weight-base: $font-weight-normal !default; +$line-height-base: 1.5 !default; + +$h1-font-size: $font-size-base * 2.5 !default; +$h2-font-size: $font-size-base * 2 !default; +$h3-font-size: $font-size-base * 1.75 !default; +$h4-font-size: $font-size-base * 1.5 !default; +$h5-font-size: $font-size-base * 1.25 !default; +$h6-font-size: $font-size-base !default; + +$headings-margin-bottom: ($spacer / 2) !default; +$headings-font-family: inherit !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.2 !default; +$headings-color: inherit !default; + +$display1-size: 6rem !default; +$display2-size: 5.5rem !default; +$display3-size: 4.5rem !default; +$display4-size: 3.5rem !default; + +$display1-weight: 300 !default; +$display2-weight: 300 !default; +$display3-weight: 300 !default; +$display4-weight: 300 !default; +$display-line-height: $headings-line-height !default; + +$lead-font-size: ($font-size-base * 1.25) !default; +$lead-font-weight: 300 !default; + +$small-font-size: 80% !default; + +$text-muted: $gray-600 !default; + +$blockquote-small-color: $gray-600 !default; +$blockquote-font-size: ($font-size-base * 1.25) !default; + +$hr-border-color: rgba($black, .1) !default; +$hr-border-width: $border-width !default; + +$mark-padding: .2em !default; + +$dt-font-weight: $font-weight-bold !default; + +$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; +$nested-kbd-font-weight: $font-weight-bold !default; + +$list-inline-padding: .5rem !default; + +$mark-bg: #fcf8e3 !default; + +$hr-margin-y: $spacer !default; // Tables // // Customizes the `.table` component with basic values, each used across all table variations. -$table-cell-padding: .75rem !default; -$table-sm-cell-padding: .3rem !default; +$table-cell-padding: .75rem !default; +$table-cell-padding-sm: .3rem !default; -$table-bg: transparent !default; -$table-bg-accent: rgba(0,0,0,.05) !default; -$table-bg-hover: rgba(0,0,0,.075) !default; -$table-bg-active: $table-bg-hover !default; +$table-bg: transparent !default; +$table-accent-bg: rgba($black, .05) !default; +$table-hover-bg: rgba($black, .075) !default; +$table-active-bg: $table-hover-bg !default; -$table-border-width: $border-width !default; -$table-border-color: $gray-lighter !default; +$table-border-width: $border-width !default; +$table-border-color: $gray-300 !default; + +$table-head-bg: $gray-200 !default; +$table-head-color: $gray-700 !default; + +$table-dark-bg: $gray-900 !default; +$table-dark-accent-bg: rgba($white, .05) !default; +$table-dark-hover-bg: rgba($white, .075) !default; +$table-dark-border-color: lighten($gray-900, 7.5%) !default; +$table-dark-color: $body-bg !default; + + +// Buttons + Forms +// +// Shared variables that are reassigned to `$input-` and `$btn-` specific variables. + +$input-btn-padding-y: .375rem !default; +$input-btn-padding-x: .75rem !default; +$input-btn-line-height: $line-height-base !default; + +$input-btn-focus-width: .2rem !default; +$input-btn-focus-color: rgba($component-active-bg, .25) !default; +$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; + +$input-btn-padding-y-sm: .25rem !default; +$input-btn-padding-x-sm: .5rem !default; +$input-btn-line-height-sm: $line-height-sm !default; + +$input-btn-padding-y-lg: .5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-line-height-lg: $line-height-lg !default; + +$input-btn-border-width: $border-width !default; // Buttons // -// For each of Bootstrap's buttons, define text, background and border color. +// For each of Bootstrap's buttons, define text, background, and border color. -$btn-padding-x: 1rem !default; -$btn-padding-y: .5rem !default; -$btn-line-height: 1.25 !default; -$btn-font-weight: normal !default; -$btn-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default; -$btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default; +$btn-padding-y: $input-btn-padding-y !default; +$btn-padding-x: $input-btn-padding-x !default; +$btn-line-height: $input-btn-line-height !default; -$btn-primary-color: #fff !default; -$btn-primary-bg: $brand-primary !default; -$btn-primary-border: $btn-primary-bg !default; +$btn-padding-y-sm: $input-btn-padding-y-sm !default; +$btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-line-height-sm: $input-btn-line-height-sm !default; -$btn-secondary-color: $gray-dark !default; -$btn-secondary-bg: #fff !default; -$btn-secondary-border: #ccc !default; +$btn-padding-y-lg: $input-btn-padding-y-lg !default; +$btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-line-height-lg: $input-btn-line-height-lg !default; -$btn-info-color: #fff !default; -$btn-info-bg: $brand-info !default; -$btn-info-border: $btn-info-bg !default; +$btn-border-width: $input-btn-border-width !default; -$btn-success-color: #fff !default; -$btn-success-bg: $brand-success !default; -$btn-success-border: $btn-success-bg !default; +$btn-font-weight: $font-weight-normal !default; +$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; +$btn-focus-width: $input-btn-focus-width !default; +$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; +$btn-disabled-opacity: .65 !default; +$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default; -$btn-warning-color: #fff !default; -$btn-warning-bg: $brand-warning !default; -$btn-warning-border: $btn-warning-bg !default; +$btn-link-disabled-color: $gray-600 !default; -$btn-danger-color: #fff !default; -$btn-danger-bg: $brand-danger !default; -$btn-danger-border: $btn-danger-bg !default; - -$btn-link-disabled-color: $gray-light !default; - -$btn-padding-x-sm: .5rem !default; -$btn-padding-y-sm: .25rem !default; - -$btn-padding-x-lg: 1.5rem !default; -$btn-padding-y-lg: .75rem !default; - -$btn-block-spacing-y: .5rem !default; -$btn-toolbar-margin: .5rem !default; +$btn-block-spacing-y: .5rem !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius !default; -$btn-border-radius-lg: $border-radius-lg !default; -$btn-border-radius-sm: $border-radius-sm !default; +$btn-border-radius: $border-radius !default; +$btn-border-radius-lg: $border-radius-lg !default; +$btn-border-radius-sm: $border-radius-sm !default; + +$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; // Forms -$input-padding-x: .75rem !default; -$input-padding-y: .5rem !default; -$input-line-height: 1.25 !default; +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-line-height: $input-btn-line-height !default; -$input-bg: #fff !default; -$input-bg-disabled: $gray-lighter !default; +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-line-height-sm: $input-btn-line-height-sm !default; -$input-color: $gray !default; -$input-border-color: rgba(0,0,0,.15) !default; -$input-btn-border-width: $border-width !default; // For form controls and buttons -$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-line-height-lg: $input-btn-line-height-lg !default; -$input-border-radius: $border-radius !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; +$input-bg: $white !default; +$input-disabled-bg: $gray-200 !default; -$input-bg-focus: $input-bg; -$input-border-focus: #66afe9 !default; -$input-box-shadow-focus: rgba(102,175,233,.6) !default; -$input-color-focus: $input-color; +$input-color: $gray-700 !default; +$input-border-color: $gray-400 !default; +$input-border-width: $input-btn-border-width !default; +$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default; -$input-color-placeholder: #999 !default; +$input-border-radius: $border-radius !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; -$input-padding-x-sm: .5rem !default; -$input-padding-y-sm: .25rem !default; +$input-focus-bg: $input-bg !default; +$input-focus-border-color: lighten($component-active-bg, 25%) !default; +$input-focus-color: $input-color !default; +$input-focus-width: $input-btn-focus-width !default; +$input-focus-box-shadow: $input-btn-focus-box-shadow !default; -$input-padding-x-lg: 1.5rem !default; -$input-padding-y-lg: .75rem !default; +$input-placeholder-color: $gray-600 !default; -$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; -$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; -$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; +$input-height-border: $input-border-width * 2 !default; -$form-group-margin-bottom: $spacer-y !default; +$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; +$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; -$input-group-addon-bg: $gray-lighter !default; -$input-group-addon-border-color: $input-border-color !default; +$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; +$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; -$cursor-disabled: not-allowed !default; +$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; +$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; -$custom-control-gutter: 1.5rem !default; -$custom-control-spacer-x: 1rem !default; -$custom-control-spacer-y: .25rem !default; +$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; -$custom-control-indicator-size: 1rem !default; -$custom-control-indicator-bg: #ddd !default; -$custom-control-indicator-bg-size: 50% 50% !default; -$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba(0,0,0,.1) !default; +$form-text-margin-top: .25rem !default; -$custom-control-disabled-cursor: $cursor-disabled !default; -$custom-control-disabled-indicator-bg: #eee !default; -$custom-control-disabled-description-color: #767676 !default; +$form-check-input-gutter: 1.25rem !default; +$form-check-input-margin-y: .3rem !default; +$form-check-input-margin-x: .25rem !default; -$custom-control-checked-indicator-color: #fff !default; -$custom-control-checked-indicator-bg: #0074d9 !default; -$custom-control-checked-indicator-box-shadow: none !default; +$form-check-inline-margin-x: .75rem !default; +$form-check-inline-input-margin-x: .3125rem !default; -$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default; +$form-group-margin-bottom: 1rem !default; -$custom-control-active-indicator-color: #fff !default; -$custom-control-active-indicator-bg: #84c6ff !default; -$custom-control-active-indicator-box-shadow: none !default; +$input-group-addon-color: $input-color !default; +$input-group-addon-bg: $gray-200 !default; +$input-group-addon-border-color: $input-border-color !default; -$custom-checkbox-radius: $border-radius !default; -$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default; -$custom-checkbox-indeterminate-bg: #0074d9 !default; -$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default; -$custom-checkbox-indeterminate-box-shadow: none !default; +$custom-control-gutter: 1.5rem !default; +$custom-control-spacer-x: 1rem !default; -$custom-radio-radius: 50% !default; -$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default; +$custom-control-indicator-size: 1rem !default; +$custom-control-indicator-bg: $gray-300 !default; +$custom-control-indicator-bg-size: 50% 50% !default; +$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; -$custom-select-padding-x: .75rem !default; -$custom-select-padding-y: .375rem !default; -$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-color: $input-color !default; -$custom-select-disabled-color: $gray-light !default; -$custom-select-bg: #fff !default; -$custom-select-disabled-bg: $gray-lighter !default; -$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions -$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default; -$custom-select-border-width: $input-btn-border-width !default; -$custom-select-border-color: $input-border-color !default; -$custom-select-border-radius: $border-radius !default; +$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-label-disabled-color: $gray-600 !default; -$custom-select-focus-border-color: #51a7e8 !default; -$custom-select-focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default; +$custom-control-indicator-checked-color: $component-active-color !default; +$custom-control-indicator-checked-bg: $component-active-bg !default; +$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default; +$custom-control-indicator-checked-box-shadow: none !default; -$custom-select-sm-padding-y: .2rem !default; -$custom-select-sm-font-size: 75% !default; +$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; -$custom-file-height: 2.5rem !default; -$custom-file-width: 14rem !default; -$custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default; +$custom-control-indicator-active-color: $component-active-color !default; +$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default; +$custom-control-indicator-active-box-shadow: none !default; -$custom-file-padding-x: .5rem !default; -$custom-file-padding-y: 1rem !default; -$custom-file-line-height: 1.5 !default; -$custom-file-color: #555 !default; -$custom-file-bg: #fff !default; -$custom-file-border-width: $border-width !default; -$custom-file-border-color: #ddd !default; -$custom-file-border-radius: $border-radius !default; -$custom-file-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05) !default; -$custom-file-button-color: $custom-file-color !default; -$custom-file-button-bg: #eee !default; +$custom-checkbox-indicator-border-radius: $border-radius !default; +$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; + +$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; +$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; +$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; +$custom-checkbox-indicator-indeterminate-box-shadow: none !default; + +$custom-radio-indicator-border-radius: 50% !default; +$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; + +$custom-select-padding-y: .375rem !default; +$custom-select-padding-x: .75rem !default; +$custom-select-height: $input-height !default; +$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$custom-select-line-height: $input-btn-line-height !default; +$custom-select-color: $input-color !default; +$custom-select-disabled-color: $gray-600 !default; +$custom-select-bg: $white !default; +$custom-select-disabled-bg: $gray-200 !default; +$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions +$custom-select-indicator-color: $gray-800 !default; +$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default; +$custom-select-border-width: $input-btn-border-width !default; +$custom-select-border-color: $input-border-color !default; +$custom-select-border-radius: $border-radius !default; + +$custom-select-focus-border-color: $input-focus-border-color !default; +$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; + +$custom-select-font-size-sm: 75% !default; +$custom-select-height-sm: $input-height-sm !default; + +$custom-select-font-size-lg: 125% !default; +$custom-select-height-lg: $input-height-lg !default; + +$custom-file-height: $input-height !default; +$custom-file-focus-border-color: $input-focus-border-color !default; +$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; + +$custom-file-padding-y: $input-btn-padding-y !default; +$custom-file-padding-x: $input-btn-padding-x !default; +$custom-file-line-height: $input-btn-line-height !default; +$custom-file-color: $input-color !default; +$custom-file-bg: $input-bg !default; +$custom-file-border-width: $input-btn-border-width !default; +$custom-file-border-color: $input-border-color !default; +$custom-file-border-radius: $input-border-radius !default; +$custom-file-box-shadow: $input-box-shadow !default; +$custom-file-button-color: $custom-file-color !default; +$custom-file-button-bg: $input-group-addon-bg !default; $custom-file-text: ( - placeholder: ( - en: "Choose file..." - ), - button-label: ( - en: "Browse" - ) + en: "Browse" ) !default; -// Form validation icons -$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default; -$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default; -$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default; +// Form validation +$form-feedback-margin-top: $form-text-margin-top !default; +$form-feedback-font-size: $small-font-size !default; +$form-feedback-valid-color: theme-color("success") !default; +$form-feedback-invalid-color: theme-color("danger") !default; // Dropdowns // // Dropdown menu container and contents. -$dropdown-min-width: 160px !default; -$dropdown-padding-y: 5px !default; -$dropdown-margin-top: 2px !default; -$dropdown-bg: #fff !default; -$dropdown-border-color: rgba(0,0,0,.15) !default; -$dropdown-border-width: $border-width !default; -$dropdown-divider-bg: #e5e5e5 !default; -$dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default; +$dropdown-min-width: 10rem !default; +$dropdown-padding-y: .5rem !default; +$dropdown-spacer: .125rem !default; +$dropdown-bg: $white !default; +$dropdown-border-color: rgba($black, .15) !default; +$dropdown-border-radius: $border-radius !default; +$dropdown-border-width: $border-width !default; +$dropdown-divider-bg: $gray-200 !default; +$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; -$dropdown-link-color: $gray-dark !default; -$dropdown-link-hover-color: darken($gray-dark, 5%) !default; -$dropdown-link-hover-bg: #f5f5f5 !default; +$dropdown-link-color: $gray-900 !default; +$dropdown-link-hover-color: darken($gray-900, 5%) !default; +$dropdown-link-hover-bg: $gray-100 !default; -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; +$dropdown-link-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; -$dropdown-link-disabled-color: $gray-light !default; +$dropdown-link-disabled-color: $gray-600 !default; -$dropdown-item-padding-x: 20px !default; +$dropdown-item-padding-y: .25rem !default; +$dropdown-item-padding-x: 1.5rem !default; -$dropdown-header-color: $gray-light !default; +$dropdown-header-color: $gray-600 !default; // Z-index master list @@ -465,365 +559,336 @@ $dropdown-header-color: $gray-light !default; // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. -$zindex-dropdown-backdrop: 990 !default; -$zindex-navbar: 1000 !default; -$zindex-dropdown: 1000 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; -$zindex-navbar-fixed: 1030 !default; -$zindex-navbar-sticky: 1030 !default; -$zindex-modal-bg: 1040 !default; -$zindex-modal: 1050 !default; - - -// Navbar - -$navbar-border-radius: $border-radius !default; -$navbar-padding-x: $spacer !default; -$navbar-padding-y: ($spacer / 2) !default; -$navbar-brand-padding-y: .25rem !default; - -$navbar-dark-color: rgba(255,255,255,.5) !default; -$navbar-dark-hover-color: rgba(255,255,255,.75) !default; -$navbar-dark-active-color: rgba(255,255,255,1) !default; -$navbar-dark-disabled-color: rgba(255,255,255,.25) !default; - -$navbar-light-color: rgba(0,0,0,.3) !default; -$navbar-light-hover-color: rgba(0,0,0,.6) !default; -$navbar-light-active-color: rgba(0,0,0,.8) !default; -$navbar-light-disabled-color: rgba(0,0,0,.15) !default; - +$zindex-dropdown: 1000 !default; +$zindex-sticky: 1020 !default; +$zindex-fixed: 1030 !default; +$zindex-modal-backdrop: 1040 !default; +$zindex-modal: 1050 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; // Navs -$nav-item-margin: .2rem !default; -$nav-item-inline-spacer: 1rem !default; -$nav-link-padding: .5em 1em !default; -$nav-link-hover-bg: $gray-lighter !default; -$nav-disabled-link-color: $gray-light !default; -$nav-disabled-link-hover-color: $gray-light !default; -$nav-disabled-link-hover-bg: transparent !default; +$nav-link-padding-y: .5rem !default; +$nav-link-padding-x: 1rem !default; +$nav-link-disabled-color: $gray-600 !default; -$nav-tabs-border-color: #ddd !default; -$nav-tabs-border-width: $border-width !default; -$nav-tabs-border-radius: $border-radius !default; -$nav-tabs-link-hover-border-color: $gray-lighter !default; -$nav-tabs-active-link-hover-color: $gray !default; -$nav-tabs-active-link-hover-bg: $body-bg !default; -$nav-tabs-active-link-hover-border-color: #ddd !default; -$nav-tabs-justified-link-border-color: #ddd !default; -$nav-tabs-justified-active-link-border-color: $body-bg !default; +$nav-tabs-border-color: $gray-300 !default; +$nav-tabs-border-width: $border-width !default; +$nav-tabs-border-radius: $border-radius !default; +$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; +$nav-tabs-link-active-color: $gray-700 !default; +$nav-tabs-link-active-bg: $body-bg !default; +$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; -$nav-pills-border-radius: $border-radius !default; -$nav-pills-active-link-color: $component-active-color !default; -$nav-pills-active-link-bg: $component-active-bg !default; +$nav-pills-border-radius: $border-radius !default; +$nav-pills-link-active-color: $component-active-color !default; +$nav-pills-link-active-bg: $component-active-bg !default; +// Navbar + +$navbar-padding-y: ($spacer / 2) !default; +$navbar-padding-x: $spacer !default; + +$navbar-nav-link-padding-x: .5rem !default; + +$navbar-brand-font-size: $font-size-lg !default; +// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link +$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; +$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; +$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; + +$navbar-toggler-padding-y: .25rem !default; +$navbar-toggler-padding-x: .75rem !default; +$navbar-toggler-font-size: $font-size-lg !default; +$navbar-toggler-border-radius: $btn-border-radius !default; + +$navbar-dark-color: rgba($white, .5) !default; +$navbar-dark-hover-color: rgba($white, .75) !default; +$navbar-dark-active-color: $white !default; +$navbar-dark-disabled-color: rgba($white, .25) !default; +$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-dark-toggler-border-color: rgba($white, .1) !default; + +$navbar-light-color: rgba($black, .5) !default; +$navbar-light-hover-color: rgba($black, .7) !default; +$navbar-light-active-color: rgba($black, .9) !default; +$navbar-light-disabled-color: rgba($black, .3) !default; +$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-light-toggler-border-color: rgba($black, .1) !default; // Pagination -$pagination-padding-x: .75rem !default; -$pagination-padding-y: .5rem !default; -$pagination-padding-x-sm: .75rem !default; -$pagination-padding-y-sm: .275rem !default; -$pagination-padding-x-lg: 1.5rem !default; -$pagination-padding-y-lg: .75rem !default; +$pagination-padding-y: .5rem !default; +$pagination-padding-x: .75rem !default; +$pagination-padding-y-sm: .25rem !default; +$pagination-padding-x-sm: .5rem !default; +$pagination-padding-y-lg: .75rem !default; +$pagination-padding-x-lg: 1.5rem !default; +$pagination-line-height: 1.25 !default; +$pagination-color: $link-color !default; +$pagination-bg: $white !default; +$pagination-border-width: $border-width !default; +$pagination-border-color: $gray-300 !default; -$pagination-color: $link-color !default; -$pagination-bg: #fff !default; -$pagination-border-width: $border-width !default; -$pagination-border-color: #ddd !default; +$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; -$pagination-hover-color: $link-hover-color !default; -$pagination-hover-bg: $gray-lighter !default; -$pagination-hover-border: #ddd !default; +$pagination-hover-color: $link-hover-color !default; +$pagination-hover-bg: $gray-200 !default; +$pagination-hover-border-color: $gray-300 !default; -$pagination-active-color: #fff !default; -$pagination-active-bg: $brand-primary !default; -$pagination-active-border: $brand-primary !default; +$pagination-active-color: $component-active-color !default; +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; -$pagination-disabled-color: $gray-light !default; -$pagination-disabled-bg: #fff !default; -$pagination-disabled-border: #ddd !default; +$pagination-disabled-color: $gray-600 !default; +$pagination-disabled-bg: $white !default; +$pagination-disabled-border-color: $gray-300 !default; // Jumbotron -$jumbotron-padding: 2rem !default; -$jumbotron-bg: $gray-lighter !default; - - -// Form states and alerts -// -// Define colors for form feedback states and, by default, alerts. - -$state-success-text: #3c763d !default; -$state-success-bg: #dff0d8 !default; -$state-success-border: darken($state-success-bg, 5%) !default; - -$state-info-text: #31708f !default; -$state-info-bg: #d9edf7 !default; -$state-info-border: darken($state-info-bg, 7%) !default; - -$state-warning-text: #8a6d3b !default; -$state-warning-bg: #fcf8e3 !default; -$mark-bg: $state-warning-bg !default; -$state-warning-border: darken($state-warning-bg, 5%) !default; - -$state-danger-text: #a94442 !default; -$state-danger-bg: #f2dede !default; -$state-danger-border: darken($state-danger-bg, 5%) !default; +$jumbotron-padding: 2rem !default; +$jumbotron-bg: $gray-200 !default; // Cards -$card-spacer-x: 1.25rem !default; -$card-spacer-y: .75rem !default; -$card-border-width: 1px !default; -$card-border-radius: $border-radius !default; -$card-border-color: rgba(0,0,0,.125) !default; -$card-border-radius-inner: $card-border-radius !default; -$card-cap-bg: #f5f5f5 !default; -$card-bg: #fff !default; -$card-link-hover-color: #fff !default; +$card-spacer-y: .75rem !default; +$card-spacer-x: 1.25rem !default; +$card-border-width: $border-width !default; +$card-border-radius: $border-radius !default; +$card-border-color: rgba($black, .125) !default; +$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; +$card-cap-bg: rgba($black, .03) !default; +$card-bg: $white !default; -$card-img-overlay-padding: 1.25rem !default; +$card-img-overlay-padding: 1.25rem !default; -$card-deck-margin: .625rem !default; +$card-group-margin: ($grid-gutter-width / 2) !default; +$card-deck-margin: $card-group-margin !default; -$card-columns-sm-up-column-gap: 1.25rem !default; +$card-columns-count: 3 !default; +$card-columns-gap: 1.25rem !default; +$card-columns-margin: $card-spacer-y !default; // Tooltips +$tooltip-font-size: $font-size-sm !default; $tooltip-max-width: 200px !default; -$tooltip-color: #fff !default; -$tooltip-bg: #000 !default; +$tooltip-color: $white !default; +$tooltip-bg: $black !default; +$tooltip-border-radius: $border-radius !default; $tooltip-opacity: .9 !default; -$tooltip-padding-y: 3px !default; -$tooltip-padding-x: 8px !default; -$tooltip-margin: 3px !default; +$tooltip-padding-y: .25rem !default; +$tooltip-padding-x: .5rem !default; +$tooltip-margin: 0 !default; -$tooltip-arrow-width: 5px !default; +$tooltip-arrow-width: .8rem !default; +$tooltip-arrow-height: .4rem !default; $tooltip-arrow-color: $tooltip-bg !default; // Popovers -$popover-inner-padding: 1px !default; -$popover-bg: #fff !default; -$popover-max-width: 276px !default; -$popover-border-width: $border-width !default; -$popover-border-color: rgba(0,0,0,.2) !default; -$popover-box-shadow: 0 5px 10px rgba(0,0,0,.2) !default; +$popover-font-size: $font-size-sm !default; +$popover-bg: $white !default; +$popover-max-width: 276px !default; +$popover-border-width: $border-width !default; +$popover-border-color: rgba($black, .2) !default; +$popover-border-radius: $border-radius-lg !default; +$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default; -$popover-title-bg: darken($popover-bg, 3%) !default; -$popover-title-padding-x: 14px !default; -$popover-title-padding-y: 8px !default; +$popover-header-bg: darken($popover-bg, 3%) !default; +$popover-header-color: $headings-color !default; +$popover-header-padding-y: .5rem !default; +$popover-header-padding-x: .75rem !default; -$popover-content-padding-x: 14px !default; -$popover-content-padding-y: 9px !default; +$popover-body-color: $body-color !default; +$popover-body-padding-y: $popover-header-padding-y !default; +$popover-body-padding-x: $popover-header-padding-x !default; -$popover-arrow-width: 10px !default; -$popover-arrow-color: $popover-bg !default; +$popover-arrow-width: 1rem !default; +$popover-arrow-height: .5rem !default; +$popover-arrow-color: $popover-bg !default; -$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; -$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; +$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; -// Tags +// Badges -$tag-default-bg: $gray-light !default; -$tag-primary-bg: $brand-primary !default; -$tag-success-bg: $brand-success !default; -$tag-info-bg: $brand-info !default; -$tag-warning-bg: $brand-warning !default; -$tag-danger-bg: $brand-danger !default; +$badge-font-size: 75% !default; +$badge-font-weight: $font-weight-bold !default; +$badge-padding-y: .25em !default; +$badge-padding-x: .4em !default; +$badge-border-radius: $border-radius !default; -$tag-color: #fff !default; -$tag-link-hover-color: #fff !default; -$tag-font-size: 75% !default; -$tag-font-weight: bold !default; -$tag-padding-x: .4em !default; -$tag-padding-y: .25em !default; - -$tag-pill-padding-x: .6em !default; +$badge-pill-padding-x: .6em !default; // Use a higher than normal value to ensure completely rounded edges when // customizing padding or font-size on labels. -$tag-pill-border-radius: 10rem !default; +$badge-pill-border-radius: 10rem !default; + // Modals // Padding applied to the modal body -$modal-inner-padding: 15px !default; +$modal-inner-padding: 1rem !default; -$modal-dialog-margin: 10px !default; -$modal-dialog-sm-up-margin-y: 30px !default; +$modal-dialog-margin: .5rem !default; +$modal-dialog-margin-y-sm-up: 1.75rem !default; -$modal-title-padding: 15px !default; -$modal-title-line-height: $line-height-base !default; +$modal-title-line-height: $line-height-base !default; -$modal-content-bg: #fff !default; -$modal-content-border-color: rgba(0,0,0,.2) !default; +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black, .2) !default; $modal-content-border-width: $border-width !default; -$modal-content-xs-box-shadow: 0 3px 9px rgba(0,0,0,.5) !default; -$modal-content-sm-up-box-shadow: 0 5px 15px rgba(0,0,0,.5) !default; +$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; +$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; -$modal-backdrop-bg: #000 !default; +$modal-backdrop-bg: $black !default; $modal-backdrop-opacity: .5 !default; -$modal-header-border-color: #e5e5e5 !default; +$modal-header-border-color: $gray-200 !default; $modal-footer-border-color: $modal-header-border-color !default; $modal-header-border-width: $modal-content-border-width !default; $modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding: 1rem !default; -$modal-lg: 900px !default; -$modal-md: 600px !default; -$modal-sm: 300px !default; +$modal-lg: 800px !default; +$modal-md: 500px !default; +$modal-sm: 300px !default; + +$modal-transition: transform .3s ease-out !default; // Alerts // // Define alert colors, border radius, and padding. -$alert-padding: 1rem !default; -$alert-border-radius: $border-radius !default; -$alert-link-font-weight: bold !default; -$alert-border-width: $border-width !default; +$alert-padding-y: .75rem !default; +$alert-padding-x: 1.25rem !default; +$alert-margin-bottom: 1rem !default; +$alert-border-radius: $border-radius !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width: $border-width !default; -$alert-success-bg: $state-success-bg !default; -$alert-success-text: $state-success-text !default; -$alert-success-border: $state-success-border !default; - -$alert-info-bg: $state-info-bg !default; -$alert-info-text: $state-info-text !default; -$alert-info-border: $state-info-border !default; - -$alert-warning-bg: $state-warning-bg !default; -$alert-warning-text: $state-warning-text !default; -$alert-warning-border: $state-warning-border !default; - -$alert-danger-bg: $state-danger-bg !default; -$alert-danger-text: $state-danger-text !default; -$alert-danger-border: $state-danger-border !default; +$alert-bg-level: -10 !default; +$alert-border-level: -9 !default; +$alert-color-level: 6 !default; // Progress bars -$progress-bg: #eee !default; -$progress-bar-color: #0074d9 !default; -$progress-border-radius: $border-radius !default; -$progress-box-shadow: inset 0 .1rem .1rem rgba(0,0,0,.1) !default; - -$progress-bar-bg: $brand-primary !default; -$progress-bar-success-bg: $brand-success !default; -$progress-bar-warning-bg: $brand-warning !default; -$progress-bar-danger-bg: $brand-danger !default; -$progress-bar-info-bg: $brand-info !default; - +$progress-height: 1rem !default; +$progress-font-size: ($font-size-base * .75) !default; +$progress-bg: $gray-200 !default; +$progress-border-radius: $border-radius !default; +$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default; +$progress-bar-color: $white !default; +$progress-bar-bg: theme-color("primary") !default; +$progress-bar-animation-timing: 1s linear infinite !default; +$progress-bar-transition: width .6s ease !default; // List group -$list-group-bg: #fff !default; -$list-group-border-color: #ddd !default; -$list-group-border-width: $border-width !default; -$list-group-border-radius: $border-radius !default; +$list-group-bg: $white !default; +$list-group-border-color: rgba($black, .125) !default; +$list-group-border-width: $border-width !default; +$list-group-border-radius: $border-radius !default; -$list-group-hover-bg: #f5f5f5 !default; -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border: $list-group-active-bg !default; -$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; +$list-group-item-padding-y: .75rem !default; +$list-group-item-padding-x: 1.25rem !default; -$list-group-disabled-color: $gray-light !default; -$list-group-disabled-bg: $gray-lighter !default; -$list-group-disabled-text-color: $list-group-disabled-color !default; +$list-group-hover-bg: $gray-100 !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; -$list-group-link-color: #555 !default; -$list-group-link-hover-color: $list-group-link-color !default; -$list-group-link-heading-color: #333 !default; +$list-group-disabled-color: $gray-600 !default; +$list-group-disabled-bg: $list-group-bg !default; -$list-group-item-padding-x: 1.25rem !default; -$list-group-item-padding-y: .75rem !default; -$list-group-item-heading-margin-bottom: 5px !default; +$list-group-action-color: $gray-700 !default; +$list-group-action-hover-color: $list-group-action-color !default; + +$list-group-action-active-color: $body-color !default; +$list-group-action-active-bg: $gray-200 !default; // Image thumbnails -$thumbnail-padding: .25rem !default; -$thumbnail-bg: $body-bg !default; -$thumbnail-border-width: $border-width !default; -$thumbnail-border-color: #ddd !default; -$thumbnail-border-radius: $border-radius !default; -$thumbnail-box-shadow: 0 1px 2px rgba(0,0,0,.075) !default; +$thumbnail-padding: .25rem !default; +$thumbnail-bg: $body-bg !default; +$thumbnail-border-width: $border-width !default; +$thumbnail-border-color: $gray-300 !default; +$thumbnail-border-radius: $border-radius !default; +$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default; // Figures -$figure-caption-font-size: 90% !default; +$figure-caption-font-size: 90% !default; +$figure-caption-color: $gray-600 !default; // Breadcrumbs -$breadcrumb-padding-y: .75rem !default; -$breadcrumb-padding-x: 1rem !default; -$breadcrumb-item-padding: .5rem !default; +$breadcrumb-padding-y: .75rem !default; +$breadcrumb-padding-x: 1rem !default; +$breadcrumb-item-padding: .5rem !default; -$breadcrumb-bg: $gray-lighter !default; -$breadcrumb-divider-color: $gray-light !default; -$breadcrumb-active-color: $gray-light !default; -$breadcrumb-divider: "/" !default; +$breadcrumb-margin-bottom: 1rem !default; - -// Media objects - -$media-margin-top: 15px !default; -$media-heading-margin-bottom: 5px !default; -$media-alignment-padding-x: 10px !default; +$breadcrumb-bg: $gray-200 !default; +$breadcrumb-divider-color: $gray-600 !default; +$breadcrumb-active-color: $gray-600 !default; +$breadcrumb-divider: "/" !default; // Carousel -$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; +$carousel-control-color: $white !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: .5 !default; -$carousel-control-color: #fff !default; -$carousel-control-width: 15% !default; -$carousel-control-sm-up-size: 30px !default; -$carousel-control-opacity: .5 !default; -$carousel-control-font-size: 20px !default; +$carousel-indicator-width: 30px !default; +$carousel-indicator-height: 3px !default; +$carousel-indicator-spacer: 3px !default; +$carousel-indicator-active-bg: $white !default; -$carousel-indicators-width: 60% !default; +$carousel-caption-width: 70% !default; +$carousel-caption-color: $white !default; -$carousel-indicator-size: 10px !default; -$carousel-indicator-active-size: 12px !default; -$carousel-indicator-active-bg: #fff !default; -$carousel-indicator-border-color: #fff !default; +$carousel-control-icon-width: 20px !default; -$carousel-caption-width: 70% !default; -$carousel-caption-sm-up-width: 60% !default; -$carousel-caption-color: #fff !default; +$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; +$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; -$carousel-icon-width: 20px !default; +$carousel-transition: transform .6s ease !default; // Close -$close-font-weight: bold !default; -$close-color: #000 !default; -$close-text-shadow: 0 1px 0 #fff !default; - +$close-font-size: $font-size-base * 1.5 !default; +$close-font-weight: $font-weight-bold !default; +$close-color: $black !default; +$close-text-shadow: 0 1px 0 $white !default; // Code -$code-font-size: 90% !default; -$code-padding-x: .4rem !default; -$code-padding-y: .2rem !default; -$code-color: #bd4147 !default; -$code-bg: #f7f7f9 !default; +$code-font-size: 87.5% !default; +$code-color: $pink !default; -$kbd-color: #fff !default; -$kbd-bg: #333 !default; +$kbd-padding-y: .2rem !default; +$kbd-padding-x: .4rem !default; +$kbd-font-size: $code-font-size !default; +$kbd-color: $white !default; +$kbd-bg: $gray-900 !default; -$pre-bg: #f7f7f9 !default; -$pre-color: $gray-dark !default; -$pre-border-color: #ccc !default; -$pre-scrollable-max-height: 340px !default; +$pre-color: $gray-900 !default; +$pre-scrollable-max-height: 340px !default; + + +// Printing +$print-page-size: a3 !default; +$print-body-min-width: map-get($grid-breakpoints, "lg") !default; diff --git a/theme/boost/scss/bootstrap/bootstrap-flex.scss b/theme/boost/scss/bootstrap/bootstrap-flex.scss deleted file mode 100644 index 60dd03a6861..00000000000 --- a/theme/boost/scss/bootstrap/bootstrap-flex.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Bootstrap with Flexbox enabled -// -// Includes all the imports from the standard Bootstrap project, but enables -// the flexbox variable. - -$enable-flex: true; - -@import "bootstrap"; diff --git a/theme/boost/scss/bootstrap/bootstrap-grid.scss b/theme/boost/scss/bootstrap/bootstrap-grid.scss index 40680ca9657..26c0dc89c28 100644 --- a/theme/boost/scss/bootstrap/bootstrap-grid.scss +++ b/theme/boost/scss/bootstrap/bootstrap-grid.scss @@ -1,23 +1,32 @@ -// Bootstrap Grid only -// -// Includes relevant variables and mixins for the regular (non-flexbox) grid -// system, as well as the generated predefined classes (e.g., `.col-4-sm`). +/*! + * Bootstrap Grid v4.0.0 (https://getbootstrap.com) + * Copyright 2011-2018 The Bootstrap Authors + * Copyright 2011-2018 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ +@at-root { + @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix +} -// -// Variables -// +html { + box-sizing: border-box; + -ms-overflow-style: scrollbar; +} -@import "custom"; +*, +*::before, +*::after { + box-sizing: inherit; +} + +@import "functions"; @import "variables"; -// -// Grid mixins -// - -@import "mixins/clearfix"; @import "mixins/breakpoints"; @import "mixins/grid-framework"; @import "mixins/grid"; @import "grid"; +@import "utilities/display"; +@import "utilities/flex"; diff --git a/theme/boost/scss/bootstrap/bootstrap-reboot.scss b/theme/boost/scss/bootstrap/bootstrap-reboot.scss index eeff5166c69..46c4610d8be 100644 --- a/theme/boost/scss/bootstrap/bootstrap-reboot.scss +++ b/theme/boost/scss/bootstrap/bootstrap-reboot.scss @@ -1,11 +1,12 @@ -// Bootstrap Reboot only -// -// Includes only Normalize and our custom Reboot reset. +/*! + * Bootstrap Reboot v4.0.0 (https://getbootstrap.com) + * Copyright 2011-2018 The Bootstrap Authors + * Copyright 2011-2018 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) + */ -@import "custom"; +@import "functions"; @import "variables"; -@import "mixins/hover"; -@import "mixins/tab-focus"; - -@import "normalize"; +@import "mixins"; @import "reboot"; diff --git a/theme/boost/scss/bootstrap/bootstrap.scss b/theme/boost/scss/bootstrap/bootstrap.scss index 219eda217b3..bb5fac868f7 100644 --- a/theme/boost/scss/bootstrap/bootstrap.scss +++ b/theme/boost/scss/bootstrap/bootstrap.scss @@ -1,20 +1,14 @@ /*! - * Bootstrap v4.0.0-alpha.4 (http://getbootstrap.com) - * Copyright 2011-2016 The Bootstrap Authors - * Copyright 2011-2016 Twitter, Inc. + * Bootstrap v4.0.0 (https://getbootstrap.com) + * Copyright 2011-2018 The Bootstrap Authors + * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -// Core variables and mixins -@import "custom"; +@import "functions"; @import "variables"; @import "mixins"; - -// Reset and dependencies -@import "normalize"; -@import "print"; - -// Core CSS +@import "root"; @import "reboot"; @import "type"; @import "images"; @@ -23,9 +17,7 @@ @import "tables"; @import "forms"; @import "buttons"; - -// Components -@import "animation"; +@import "transitions"; @import "dropdown"; @import "button-group"; @import "input-group"; @@ -35,20 +27,16 @@ @import "card"; @import "breadcrumb"; @import "pagination"; -@import "tags"; +@import "badge"; @import "jumbotron"; @import "alert"; @import "progress"; @import "media"; @import "list-group"; -@import "responsive-embed"; @import "close"; - -// Components w/ JavaScript @import "modal"; @import "tooltip"; @import "popover"; @import "carousel"; - -// Utility classes @import "utilities"; +@import "print"; diff --git a/theme/boost/scss/bootstrap/mixins/_alert.scss b/theme/boost/scss/bootstrap/mixins/_alert.scss index 6ed3a81ab1d..db5a7eb4549 100644 --- a/theme/boost/scss/bootstrap/mixins/_alert.scss +++ b/theme/boost/scss/bootstrap/mixins/_alert.scss @@ -1,14 +1,13 @@ -// Alerts - -@mixin alert-variant($background, $border, $body-color) { - background-color: $background; +@mixin alert-variant($background, $border, $color) { + color: $color; + @include gradient-bg($background); border-color: $border; - color: $body-color; hr { border-top-color: darken($border, 5%); } + .alert-link { - color: darken($body-color, 10%); + color: darken($color, 10%); } } diff --git a/theme/boost/scss/bootstrap/mixins/_background-variant.scss b/theme/boost/scss/bootstrap/mixins/_background-variant.scss index ff21ad958f7..494439d2b45 100644 --- a/theme/boost/scss/bootstrap/mixins/_background-variant.scss +++ b/theme/boost/scss/bootstrap/mixins/_background-variant.scss @@ -1,13 +1,21 @@ +// stylelint-disable declaration-no-important + // Contextual backgrounds @mixin bg-variant($parent, $color) { #{$parent} { - color: #fff !important; background-color: $color !important; } - a#{$parent} { + a#{$parent}, + button#{$parent} { @include hover-focus { background-color: darken($color, 10%) !important; } } } + +@mixin bg-gradient-variant($parent, $color) { + #{$parent} { + background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; + } +} diff --git a/theme/boost/scss/bootstrap/mixins/_badge.scss b/theme/boost/scss/bootstrap/mixins/_badge.scss new file mode 100644 index 00000000000..eeca0b40de9 --- /dev/null +++ b/theme/boost/scss/bootstrap/mixins/_badge.scss @@ -0,0 +1,12 @@ +@mixin badge-variant($bg) { + color: color-yiq($bg); + background-color: $bg; + + &[href] { + @include hover-focus { + color: color-yiq($bg); + text-decoration: none; + background-color: darken($bg, 10%); + } + } +} diff --git a/theme/boost/scss/bootstrap/mixins/_border-radius.scss b/theme/boost/scss/bootstrap/mixins/_border-radius.scss index 54f29f41da4..2024febcfa8 100644 --- a/theme/boost/scss/bootstrap/mixins/_border-radius.scss +++ b/theme/boost/scss/bootstrap/mixins/_border-radius.scss @@ -8,15 +8,15 @@ @mixin border-top-radius($radius) { @if $enable-rounded { - border-top-right-radius: $radius; border-top-left-radius: $radius; + border-top-right-radius: $radius; } } @mixin border-right-radius($radius) { @if $enable-rounded { - border-bottom-right-radius: $radius; border-top-right-radius: $radius; + border-bottom-right-radius: $radius; } } @@ -29,7 +29,7 @@ @mixin border-left-radius($radius) { @if $enable-rounded { - border-bottom-left-radius: $radius; border-top-left-radius: $radius; + border-bottom-left-radius: $radius; } } diff --git a/theme/boost/scss/bootstrap/mixins/_box-shadow.scss b/theme/boost/scss/bootstrap/mixins/_box-shadow.scss new file mode 100644 index 00000000000..b2410e53ac3 --- /dev/null +++ b/theme/boost/scss/bootstrap/mixins/_box-shadow.scss @@ -0,0 +1,5 @@ +@mixin box-shadow($shadow...) { + @if $enable-shadows { + box-shadow: $shadow; + } +} diff --git a/theme/boost/scss/bootstrap/mixins/_breakpoints.scss b/theme/boost/scss/bootstrap/mixins/_breakpoints.scss index a868833b45e..d1ad684cc76 100644 --- a/theme/boost/scss/bootstrap/mixins/_breakpoints.scss +++ b/theme/boost/scss/bootstrap/mixins/_breakpoints.scss @@ -2,7 +2,7 @@ // // Breakpoints are defined as a map of (name: minimum width), order from small to large: // -// (xs: 0, sm: 544px, md: 768px) +// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) // // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. @@ -10,9 +10,9 @@ // // >> breakpoint-next(sm) // md -// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px)) +// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // md -// >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) +// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); @@ -21,21 +21,36 @@ // Minimum breakpoint width. Null for the smallest (first) breakpoint. // -// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px)) -// 544px +// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// 576px @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { $min: map-get($breakpoints, $name); @return if($min != 0, $min, null); } // Maximum breakpoint width. Null for the largest (last) breakpoint. -// The maximum value is calculated as the minimum of the next one less 0.1. +// The maximum value is calculated as the minimum of the next one less 0.02px +// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. +// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max +// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. +// See https://bugs.webkit.org/show_bug.cgi?id=178261 // -// >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px)) -// 767px +// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// 767.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); + @return if($next, breakpoint-min($next, $breakpoints) - .02px, null); +} + +// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. +// Useful for making responsive utilities. +// +// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// "" (Returns a blank string) +// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// "-sm" +@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { + @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); } // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. @@ -64,23 +79,45 @@ } } -// Media between the breakpoint's minimum and maximum widths. -// No minimum for the smallest breakpoint, and no maximum for the largest one. -// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. -@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { - @include media-breakpoint-up($name, $breakpoints) { - @include media-breakpoint-down($name, $breakpoints) { - @content; - } - } -} - // Media that spans multiple breakpoint widths. // Makes the @content apply between the min and max breakpoints @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { - @include media-breakpoint-up($lower, $breakpoints) { + $min: breakpoint-min($lower, $breakpoints); + $max: breakpoint-max($upper, $breakpoints); + + @if $min != null and $max != null { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if $max == null { + @include media-breakpoint-up($lower, $breakpoints) { + @content; + } + } @else if $min == null { @include media-breakpoint-down($upper, $breakpoints) { @content; } } } + +// Media between the breakpoint's minimum and maximum widths. +// No minimum for the smallest breakpoint, and no maximum for the largest one. +// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. +@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($name, $breakpoints); + $max: breakpoint-max($name, $breakpoints); + + @if $min != null and $max != null { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if $max == null { + @include media-breakpoint-up($name, $breakpoints) { + @content; + } + } @else if $min == null { + @include media-breakpoint-down($name, $breakpoints) { + @content; + } + } +} diff --git a/theme/boost/scss/bootstrap/mixins/_buttons.scss b/theme/boost/scss/bootstrap/mixins/_buttons.scss index 5196ab65e19..06ad6772fa4 100644 --- a/theme/boost/scss/bootstrap/mixins/_buttons.scss +++ b/theme/boost/scss/bootstrap/mixins/_buttons.scss @@ -3,111 +3,107 @@ // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons -@mixin button-variant($color, $background, $border) { - $active-background: darken($background, 10%); - $active-border: darken($border, 12%); - - color: $color; - background-color: $background; +@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { + color: color-yiq($background); + @include gradient-bg($background); border-color: $border; @include box-shadow($btn-box-shadow); @include hover { - color: $color; - background-color: $active-background; - border-color: $active-border; + color: color-yiq($hover-background); + @include gradient-bg($hover-background); + border-color: $hover-border; } &:focus, &.focus { - color: $color; - background-color: $active-background; - border-color: $active-border; - } - - &:active, - &.active, - .open > &.dropdown-toggle { - color: $color; - background-color: $active-background; - border-color: $active-border; - // Remove the gradient for the pressed/active state - background-image: none; - @include box-shadow($btn-active-box-shadow); - - &:hover, - &:focus, - &.focus { - color: $color; - background-color: darken($background, 17%); - border-color: darken($border, 25%); + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); + } @else { + box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); } } + // Disabled comes first so active can properly restyle &.disabled, &:disabled { - &:focus, - &.focus { - background-color: $background; - border-color: $border; + color: color-yiq($background); + background-color: $background; + border-color: $border; + } + + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + .show > &.dropdown-toggle { + color: color-yiq($active-background); + background-color: $active-background; + @if $enable-gradients { + background-image: none; // Remove the gradient for the pressed/active state } - @include hover { - background-color: $background; - border-color: $border; + border-color: $active-border; + + &:focus { + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); + } @else { + box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); + } } } } -@mixin button-outline-variant($color) { +@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { color: $color; - background-image: none; background-color: transparent; + background-image: none; border-color: $color; - @include hover { - color: #fff; - background-color: $color; - border-color: $color; + &:hover { + color: $color-hover; + background-color: $active-background; + border-color: $active-border; } &:focus, &.focus { - color: #fff; - background-color: $color; - border-color: $color; - } - - &:active, - &.active, - .open > &.dropdown-toggle { - color: #fff; - background-color: $color; - border-color: $color; - - &:hover, - &:focus, - &.focus { - color: #fff; - background-color: darken($color, 17%); - border-color: darken($color, 25%); - } + box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); } &.disabled, &:disabled { - &:focus, - &.focus { - border-color: lighten($color, 20%); - } - @include hover { - border-color: lighten($color, 20%); + color: $color; + background-color: transparent; + } + + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + .show > &.dropdown-toggle { + color: color-yiq($active-background); + background-color: $active-background; + border-color: $active-border; + + &:focus { + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows and $btn-active-box-shadow != none { + box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5); + } @else { + box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); + } } } } // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { +@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { padding: $padding-y $padding-x; font-size: $font-size; - @include border-radius($border-radius); + line-height: $line-height; + // Manually declare to provide an override to the browser default + @if $enable-rounded { + border-radius: $border-radius; + } @else { + border-radius: 0; + } } diff --git a/theme/boost/scss/bootstrap/mixins/_cards.scss b/theme/boost/scss/bootstrap/mixins/_cards.scss deleted file mode 100644 index 574349abad8..00000000000 --- a/theme/boost/scss/bootstrap/mixins/_cards.scss +++ /dev/null @@ -1,44 +0,0 @@ -// Card variants - -@mixin card-variant($background, $border) { - background-color: $background; - border-color: $border; - - .card-header, - .card-footer { - background-color: transparent; - } -} - -@mixin card-outline-variant($color) { - background-color: transparent; - border-color: $color; -} - -// -// Inverse text within a card for use with dark backgrounds -// - -@mixin card-inverse { - .card-header, - .card-footer { - border-color: rgba(255,255,255,.2); - } - .card-header, - .card-footer, - .card-title, - .card-blockquote { - color: #fff; - } - .card-link, - .card-text, - .card-subtitle, - .card-blockquote .blockquote-footer { - color: rgba(255,255,255,.65); - } - .card-link { - @include hover-focus { - color: $card-link-hover-color; - } - } -} diff --git a/theme/boost/scss/bootstrap/mixins/_caret.scss b/theme/boost/scss/bootstrap/mixins/_caret.scss new file mode 100644 index 00000000000..40478e49297 --- /dev/null +++ b/theme/boost/scss/bootstrap/mixins/_caret.scss @@ -0,0 +1,65 @@ +@mixin caret-down { + border-top: $caret-width solid; + border-right: $caret-width solid transparent; + border-bottom: 0; + border-left: $caret-width solid transparent; +} + +@mixin caret-up { + border-top: 0; + border-right: $caret-width solid transparent; + border-bottom: $caret-width solid; + border-left: $caret-width solid transparent; +} + +@mixin caret-right { + border-top: $caret-width solid transparent; + border-bottom: $caret-width solid transparent; + border-left: $caret-width solid; +} + +@mixin caret-left { + border-top: $caret-width solid transparent; + border-right: $caret-width solid; + border-bottom: $caret-width solid transparent; +} + +@mixin caret($direction: down) { + @if $enable-caret { + &::after { + display: inline-block; + width: 0; + height: 0; + margin-left: $caret-width * .85; + vertical-align: $caret-width * .85; + content: ""; + @if $direction == down { + @include caret-down; + } @else if $direction == up { + @include caret-up; + } @else if $direction == right { + @include caret-right; + } + } + + @if $direction == left { + &::after { + display: none; + } + + &::before { + display: inline-block; + width: 0; + height: 0; + margin-right: $caret-width * .85; + vertical-align: $caret-width * .85; + content: ""; + @include caret-left; + } + } + + &:empty::after { + margin-left: 0; + } + } +} diff --git a/theme/boost/scss/bootstrap/mixins/_clearfix.scss b/theme/boost/scss/bootstrap/mixins/_clearfix.scss index d0ae125f3d4..11a977b7373 100644 --- a/theme/boost/scss/bootstrap/mixins/_clearfix.scss +++ b/theme/boost/scss/bootstrap/mixins/_clearfix.scss @@ -1,7 +1,7 @@ @mixin clearfix() { &::after { - content: ""; - display: table; + display: block; clear: both; + content: ""; } } diff --git a/theme/boost/scss/bootstrap/mixins/_float.scss b/theme/boost/scss/bootstrap/mixins/_float.scss new file mode 100644 index 00000000000..48fa8b6d59e --- /dev/null +++ b/theme/boost/scss/bootstrap/mixins/_float.scss @@ -0,0 +1,11 @@ +// stylelint-disable declaration-no-important + +@mixin float-left { + float: left !important; +} +@mixin float-right { + float: right !important; +} +@mixin float-none { + float: none !important; +} diff --git a/theme/boost/scss/bootstrap/mixins/_forms.scss b/theme/boost/scss/bootstrap/mixins/_forms.scss index b281dd71570..22906824212 100644 --- a/theme/boost/scss/bootstrap/mixins/_forms.scss +++ b/theme/boost/scss/bootstrap/mixins/_forms.scss @@ -1,45 +1,7 @@ -// Form validation states -// -// Used in _forms.scss to generate the form validation CSS for warnings, errors, -// and successes. - -@mixin form-control-validation($color) { - // Color the label and help text - .form-control-feedback, - .form-control-label, - .form-check-label, - .form-check-inline, - .custom-control { - color: $color; - } - // Set the border and box shadow on specific inputs to match - .form-control { - border-color: $color; - // @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work - - &:focus { - // border-color: darken($border-color, 10%); - // $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); - // @include box-shadow($shadow); - } - } - - // Set validation states also for addons - .input-group-addon { - color: $color; - border-color: $color; - background-color: lighten($color, 40%); - } - // Optional feedback icon - .form-control-feedback { - color: $color; - } -} - // Form control focus state // // Generate a customized focus state and for any input with the specified color, -// which defaults to the `@input-border-focus` variable. +// which defaults to the `$input-focus-border-color` variable. // // We highly encourage you to not customize the default value, but instead use // this to tweak colors on an as-needed basis. This aesthetic change is based on @@ -50,37 +12,126 @@ // contrast against a dark gray background. @mixin form-control-focus() { &:focus { - color: $input-color-focus; - background-color: $input-bg-focus; - border-color: $input-border-focus; - outline: none; - $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus; - @include box-shadow($shadow); + color: $input-focus-color; + background-color: $input-focus-bg; + border-color: $input-focus-border-color; + outline: 0; + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $input-box-shadow, $input-focus-box-shadow; + } @else { + box-shadow: $input-focus-box-shadow; + } } } -// Form control sizing -// -// Relative text size, padding, and border-radii changes for form controls. For -// horizontal sizing, wrap controls in the predefined grid classes. ` -
+
+
+ +
- -
+
{{#str}}advancedsearch, block_search_forums{{/str}} {{#helpicon}} {{>core/help_icon}} diff --git a/theme/boost/templates/columns1.mustache b/theme/boost/templates/columns1.mustache index a25cdcaac8f..d31db85d62b 100644 --- a/theme/boost/templates/columns1.mustache +++ b/theme/boost/templates/columns1.mustache @@ -36,14 +36,7 @@ "bodyattributes":"" } }} -{{{ output.doctype }}} - - - {{{ output.page_title }}} - - {{{ output.standard_head_html }}} - - +{{> theme_boost/head }} @@ -53,13 +46,15 @@
-
+
-
- {{{ output.course_content_header }}} - {{{ output.main_content }}} - {{{ output.activity_navigation }}} - {{{ output.course_content_footer }}} +
+
+ {{{ output.course_content_header }}} + {{{ output.main_content }}} + {{{ output.activity_navigation }}} + {{{ output.course_content_footer }}} +
diff --git a/theme/boost/templates/columns2.mustache b/theme/boost/templates/columns2.mustache index 33847aca67d..dcfe57c3295 100644 --- a/theme/boost/templates/columns2.mustache +++ b/theme/boost/templates/columns2.mustache @@ -48,14 +48,7 @@ "hasregionmainsettingsmenu": false } }} -{{{ output.doctype }}} - - - {{{ output.page_title }}} - - {{{ output.standard_head_html }}} - - +{{> theme_boost/head }} @@ -63,27 +56,29 @@ {{{ output.standard_top_of_body_html }}} - {{>theme_boost/header}} + {{>theme_boost/navbar}}
{{{ output.full_header }}}
-
+
{{#hasregionmainsettingsmenu}} -
+
{{{ output.region_main_settings_menu }}}
{{/hasregionmainsettingsmenu}} -
-
- {{#hasregionmainsettingsmenu}} -
- {{/hasregionmainsettingsmenu}} - {{{ output.course_content_header }}} - {{{ output.main_content }}} - {{{ output.activity_navigation }}} - {{{ output.course_content_footer }}} +
+
+
+ {{#hasregionmainsettingsmenu}} +
+ {{/hasregionmainsettingsmenu}} + {{{ output.course_content_header }}} + {{{ output.main_content }}} + {{{ output.activity_navigation }}} + {{{ output.course_content_footer }}} +
{{#hasblocks}} @@ -96,28 +91,8 @@
{{> theme_boost/nav-drawer }}
-
-
- - {{# output.page_doc_link }} -

{{{ output.page_doc_link }}}

- {{/ output.page_doc_link }} - - {{{ output.login_info }}} -
- {{{ output.home_link }}} - - {{{ output.standard_footer_html }}} - {{{ output.standard_end_of_body_html }}} -
-
+{{> theme_boost/footer }} diff --git a/theme/boost/templates/core/action_menu.mustache b/theme/boost/templates/core/action_menu.mustache index c09f5560d89..92aa3a6a3ba 100644 --- a/theme/boost/templates/core/action_menu.mustache +++ b/theme/boost/templates/core/action_menu.mustache @@ -30,18 +30,26 @@ } } }} -
+
{{#primary}} -
+
- {{#prioritise}}{{> core/action_menu_trigger }}{{/prioritise}}{{! + {{#prioritise}}{{> core/action_menu_trigger }}{{/prioritise}} - }}{{#items}}{{> core/action_menu_item }}{{/items}}{{! + {{#items}} +
+ {{> core/action_menu_item }} +
+ {{/items}} - }}{{^prioritise}}{{> core/action_menu_trigger }}{{/prioritise}} + {{^prioritise}} +
+ {{> core/action_menu_trigger }} +
+ {{/prioritise}}
{{/primary}} -
+
\ No newline at end of file diff --git a/theme/boost/templates/core/action_menu_trigger.mustache b/theme/boost/templates/core/action_menu_trigger.mustache index bf68279054a..93995e1456f 100644 --- a/theme/boost/templates/core/action_menu_trigger.mustache +++ b/theme/boost/templates/core/action_menu_trigger.mustache @@ -77,15 +77,44 @@ } } }} -
- +
+ {{#secondary}}
- {{#items}}{{! - }}{{#actionmenulink}}{{#icon}}{{#pix}}{{key}},{{component}},{{title}}{{/pix}}{{/icon}}{{#showtext}}{{{text}}}{{/showtext}}{{/actionmenulink}}{{! - }}{{#actionmenufiller}}
{{/actionmenufiller}}{{! - }}{{^actionmenulink}}{{^actionmenufiller}}
{{> core/action_menu_item }}
{{/actionmenufiller}}{{/actionmenulink}}{{! - }}{{/items}} + {{#items}} + {{#actionmenulink}} + + {{#icon}} + {{#pix}}{{key}},{{component}},{{title}}{{/pix}} + {{/icon}} + {{#showtext}} + + {{{text}}} + + {{/showtext}} + + {{/actionmenulink}} + {{#actionmenufiller}} +
+ {{/actionmenufiller}} + {{^actionmenulink}} + {{^actionmenufiller}} +
{{> core/action_menu_item }}
+ {{/actionmenufiller}} + {{/actionmenulink}} + {{/items}}
{{/secondary}}
diff --git a/theme/boost/templates/core/block.mustache b/theme/boost/templates/core/block.mustache index bdde709cec8..8eb1abbd899 100644 --- a/theme/boost/templates/core/block.mustache +++ b/theme/boost/templates/core/block.mustache @@ -19,8 +19,8 @@ {{/showskiplink}} {{! Start Block Container }} - + {{! Block Skip Link Target }} {{#showskiplink}} diff --git a/theme/boost/templates/core/custom_menu_item.mustache b/theme/boost/templates/core/custom_menu_item.mustache index 80760ead133..4e344c40ce1 100644 --- a/theme/boost/templates/core/custom_menu_item.mustache +++ b/theme/boost/templates/core/custom_menu_item.mustache @@ -1,6 +1,6 @@ {{^divider}} {{#haschildren}} -
+
  • @@ -14,9 +14,11 @@ {{/divider}} {{/children}}
    • -
    + {{/haschildren}} {{^haschildren}} -{{text}} +
  • + {{text}} +
    • {{/haschildren}} {{/divider}} diff --git a/theme/boost/templates/core/dataformat_selector.mustache b/theme/boost/templates/core/dataformat_selector.mustache index 7c11ab39754..569bc369984 100644 --- a/theme/boost/templates/core/dataformat_selector.mustache +++ b/theme/boost/templates/core/dataformat_selector.mustache @@ -38,10 +38,10 @@ "sesskey": "" } }} -
    +
    - +
    + +
    - -
    + +
    - -
    + +
    - -
    + +
    - -
    + +
    {{#pix}}i/loading_small{{/pix}} {{#str}}loading, repository{{/str}}
    - -
    + +

    {{#pix}}i/loading_small{{/pix}} {{#str}}loading, repository{{/str}}
      diff --git a/theme/boost/templates/core/filemanager_modal_generallayout.mustache b/theme/boost/templates/core/filemanager_modal_generallayout.mustache index 3e31b355820..b0b7bac9938 100644 --- a/theme/boost/templates/core/filemanager_modal_generallayout.mustache +++ b/theme/boost/templates/core/filemanager_modal_generallayout.mustache @@ -1,5 +1,5 @@ -