[4.0] Update Bootstrap to beta-1

Gruntfile.js

@@ -52,7 +52,7 @@ module.exports = function(grunt) {
 				src: [
 					'media/vendor/jquery/js/*',
 					'media/vendor/bootstrap/**',
-					'media/vendor/tether/**',
+					'media/vendor/popper/**',
 					'media/vendor/jcrop/**',
 					'media/vendor/dragula/**',
 					'media/vendor/font-awesome/**',
@@ -139,33 +139,33 @@ module.exports = function(grunt) {
 					{ expand: true, cwd: '<%= folder.node_module %>jquery/dist/', src: ['*', '!(core.js)'], dest: 'media/vendor/jquery/js/', filter: 'isFile'},
 					// jQuery js migrate files
 					{ expand: true, cwd: '<%= folder.node_module %>jquery-migrate/dist/', src: ['**'], dest: 'media/vendor/jquery/js/', filter: 'isFile'},
-					//Bootastrap js files
+					// Bootastrap js files
 					{ expand: true, cwd: '<%= folder.node_module %>bootstrap/dist/js/', src: ['**'], dest: 'media/vendor/bootstrap/js/', filter: 'isFile'},
-					//Bootastrap scss files
+					// Bootastrap scss files
 					{ expand: true, cwd: '<%= folder.node_module %>bootstrap/scss/', src: ['**'], dest: 'media/vendor/bootstrap/scss/', filter: 'isFile'},
-					//Bootastrap css files
+					// Bootastrap css files
 					{ expand: true, cwd: '<%= folder.node_module %>bootstrap/dist/css/', src: ['**'], dest: 'media/vendor/bootstrap/css/', filter: 'isFile'},
-					//Teether js files
-					{ expand: true, cwd: '<%= folder.node_module %>tether/dist/js/', src: ['**'], dest: 'media/vendor/tether/js/', filter: 'isFile'},
+					// Popper js files
+					{ expand: true, cwd: '<%= folder.node_module %>popper.js/dist/', src: ['*.js'], dest: 'media/vendor/popper/js/', filter: 'isFile'},
 					// Punycode js files
 					{ expand: true, cwd: '<%= folder.node_module %>punycode/', src: ['punycode.js', 'LICENSE-MIT.txt'], dest: 'media/vendor/punycode/js/', filter: 'isFile'},
 					// Cropperjs css files
 					{ expand: true, cwd: '<%= folder.node_module %>cropperjs/dist', src: ['*.css'], dest: 'media/vendor/cropperjs/css/', filter: 'isFile'},
 					// Cropperjs js files
 					{ expand: true, cwd: '<%= folder.node_module %>cropperjs/dist', src: ['*.js'], dest: 'media/vendor/cropperjs/js/', filter: 'isFile'},
-					//Font Awesome css files
+					// Font Awesome css files
 					{ expand: true, cwd: '<%= folder.node_module %>font-awesome/css/', src: ['**'], dest: 'media/vendor/font-awesome/css/', filter: 'isFile'},
-					//Font Awesome scss files
+					// Font Awesome scss files
 					{ expand: true, cwd: '<%= folder.node_module %>font-awesome/scss/', src: ['**'], dest: 'media/vendor/font-awesome/scss/', filter: 'isFile'},
-					//Font Awesome fonts files
+					// Font Awesome fonts files
 					{ expand: true, cwd: '<%= folder.node_module %>font-awesome/fonts/', src: ['**'], dest: 'media/vendor/font-awesome/fonts/', filter: 'isFile'},
-					// tinyMCE plugins
+					// TinyMCE plugins
 					{ expand: true, cwd: '<%= folder.node_module %>tinymce/plugins/', src: ['**'], dest: 'media/vendor/tinymce/plugins/', filter: 'isFile'},
-					// tinyMCE skins
+					// TinyMCE skins
 					{ expand: true, cwd: '<%= folder.node_module %>tinymce/skins/', src: ['**'], dest: 'media/vendor/tinymce/skins/', filter: 'isFile'},
-					// tinyMCE themes
+					// TinyMCE themes
 					{ expand: true, cwd: '<%= folder.node_module %>tinymce/themes/', src: ['**'], dest: 'media/vendor/tinymce/themes/', filter: 'isFile'},
-					// tinyMCE js files
+					// TinyMCE js files
 					{ expand: true, cwd: '<%= folder.node_module %>tinymce/', src: ['tinymce.js','tinymce.min.js','license.txt','changelog.txt'], dest: 'media/vendor/tinymce/', filter: 'isFile'},
 					// Code mirror addon files
 					{ expand: true, cwd: '<%= folder.node_module %>codemirror/addon/', src: ['**'], dest: 'media/vendor/codemirror/addon/', filter: 'isFile'},

administrator/templates/atum/scss/blocks/_icons.scss

@@ -26,6 +26,7 @@
   text-align: center;
   background-color: transparent;
   border: 0;
+
   span {
     width: 26px;
     height: 26px;
@@ -48,15 +49,15 @@
     border-color: $brand-danger;
   }
   .icon-archive {
-    color: $gray;
-    border-color: $gray;
+    color: $gray-700;
+    border-color: $gray-700;
   }
   .icon-checkedout {
     width: auto;
     height: auto;
     font-size: 1.2rem;
     line-height: 1rem;
-    color: $gray;
+    color: $gray-700;
     border: 0;
   }
 }

administrator/templates/atum/scss/blocks/_modals.scss

@@ -8,10 +8,10 @@
 
   .btn-primary:not([href]),
   .btn-success:not([href]) {
-    color: $btn-primary-color;
+    color: #fff;
 
     &:hover {
-      color: $btn-primary-color;
+      color: #fff;
     }
 
   }

administrator/templates/atum/scss/blocks/_searchtools.scss

@@ -61,7 +61,7 @@
       }
 
       option {
-        color: $gray;
+        color: $gray-700;
         background-color: #fff;
 
       }

administrator/templates/atum/scss/blocks/_sidebar-nav.scss

@@ -14,7 +14,7 @@
     &.nav-header {
       padding-top: .5rem;
       font-size: .85rem;
-      color: $gray-dark;
+      color: $gray-200;
     }
 
     a {

administrator/templates/atum/scss/blocks/_toolbar.scss

@@ -58,13 +58,13 @@
       margin: 0 6px 0 -10px;
       line-height: $atum-toolbar-line-height;
       color: inherit;
-      background-color: $gray-lighter;
+      background-color: $gray-200;
       border-right: 1px solid $atum-border-color;
       border-radius: 3px 0 0 3px;
     }
 
     &:hover {
-      background-color: $gray-lighter;
+      background-color: $gray-200;
       border-color: $atum-border-color;
     }
 

administrator/templates/atum/scss/blocks/_treeselect.scss

@@ -5,7 +5,7 @@
 
   .nav-header {
     font-weight: $font-weight-bold;
-    color: $gray-dark;
+    color: $gray-900;
   }
 
   li {
@@ -93,7 +93,7 @@
     &::after {
       margin-left: 0;
       font-size: 1rem;
-      color: $gray;
+      color: $gray-700;
     }
 
   }

administrator/templates/atum/scss/bootstrap.scss

@@ -1,16 +1,9 @@
 // Variables
+@import "../../../../media/vendor/bootstrap/scss/functions";
 @import "variables";
-
-// Core variables and mixins
 @import "../../../../media/vendor/bootstrap/scss/variables";
 @import "../../../../media/vendor/bootstrap/scss/mixins";
-@import "../../../../media/vendor/bootstrap/scss/custom";
-
-// Reset and dependencies
-@import "../../../../media/vendor/bootstrap/scss/normalize";
 @import "../../../../media/vendor/bootstrap/scss/print";
-
-// Core CSS
 @import "../../../../media/vendor/bootstrap/scss/reboot";
 @import "../../../../media/vendor/bootstrap/scss/type";
 @import "../../../../media/vendor/bootstrap/scss/images";
@@ -19,8 +12,6 @@
 @import "../../../../media/vendor/bootstrap/scss/tables";
 @import "../../../../media/vendor/bootstrap/scss/forms";
 @import "../../../../media/vendor/bootstrap/scss/buttons";
-
-// Components
 @import "../../../../media/vendor/bootstrap/scss/transitions";
 @import "../../../../media/vendor/bootstrap/scss/dropdown";
 @import "../../../../media/vendor/bootstrap/scss/button-group";
@@ -32,17 +23,14 @@
 @import "../../../../media/vendor/bootstrap/scss/breadcrumb";
 @import "../../../../media/vendor/bootstrap/scss/pagination";
 @import "../../../../media/vendor/bootstrap/scss/badge";
+@import "../../../../media/vendor/bootstrap/scss/jumbotron";
 @import "../../../../media/vendor/bootstrap/scss/alert";
 @import "../../../../media/vendor/bootstrap/scss/progress";
 @import "../../../../media/vendor/bootstrap/scss/media";
 @import "../../../../media/vendor/bootstrap/scss/list-group";
-@import "../../../../media/vendor/bootstrap/scss/responsive-embed";
 @import "../../../../media/vendor/bootstrap/scss/close";
-
-// Components w/ JavaScript
 @import "../../../../media/vendor/bootstrap/scss/modal";
 @import "../../../../media/vendor/bootstrap/scss/tooltip";
 @import "../../../../media/vendor/bootstrap/scss/popover";
-
-// Utility classes
+@import "../../../../media/vendor/bootstrap/scss/carousel";
 @import "../../../../media/vendor/bootstrap/scss/utilities";

administrator/templates/atum/scss/pages/_com_cpanel.scss

@@ -85,7 +85,7 @@
       width: 2.6em;
       height: 2.6em;
       line-height: 2.6em;
-      color: $gray;
+      color: $gray-700;
       text-align: center;
       background-color: $atum-card-title-icon-bg;
       border-left: 1px solid $atum-border-color;

administrator/templates/atum/scss/template.scss

@@ -5,9 +5,10 @@
 @import "../../../../media/vendor/flying-focus-a11y/scss/flying-focus";
 
 // Bootstrap
+@import "../../../../media/vendor/bootstrap/scss/functions";
 @import "../../../../media/vendor/bootstrap/scss/variables";
 @import "../../../../media/vendor/bootstrap/scss/mixins";
-@import "../../../../media/vendor/bootstrap/scss/custom";
+@import "../../../../media/vendor/bootstrap/scss/custom-forms";
 
 // Alert
 @import "../../../../media/system/scss/jalert";
@@ -35,7 +36,7 @@
 
 // Vendor overrides
 @import "vendor/awesomplete";
-@import "vendor/bootstrap/alert";
+//@import "vendor/bootstrap/alert";
 @import "vendor/bootstrap/buttons";
 @import "vendor/bootstrap/card";
 @import "vendor/bootstrap/custom-forms";

administrator/templates/atum/scss/vendor/_chosen.scss

@@ -33,7 +33,7 @@
 
     &:disabled {
       color: $custom-select-disabled-color;
-      cursor: $cursor-disabled;
+      cursor: not-allowed;
       background-color: $custom-select-disabled-bg;
     }
 

administrator/templates/atum/scss/vendor/bootstrap/_alert.scss

@@ -1,8 +1,8 @@
 // Alerts
 
 @mixin alert-variant($background, $border, $body-color) {
-  background-color: lighten($background, 35%);
-  border-color: $background;
+  background-color: $background;
+  border-color: $border;
   border-left: 10px solid $background;
   color: $body-color;
 
@@ -15,14 +15,14 @@
 }
 
 .alert-success {
-  @include alert-variant(lighten($alert-success-bg, 24%), $alert-success-border, $gray-dark);
+  @include alert-variant(theme-color("success"), theme-color("success"), $gray-200);
 }
 .alert-info {
-  @include alert-variant($alert-info-bg, $alert-info-border, $gray-dark);
+  @include alert-variant(theme-color("info"), theme-color("info"), $gray-200);
 }
 .alert-warning {
-  @include alert-variant($alert-warning-bg, $alert-warning-border, $gray-dark);
+  @include alert-variant(theme-color("warning"), theme-color("warning"), $gray-200);
 }
 .alert-danger {
-  @include alert-variant($alert-danger-bg, $alert-danger-border, $gray-dark);
+  @include alert-variant(theme-color("danger"), theme-color("danger"), $gray-200);
 }

grunt-settings.yaml

@@ -17,11 +17,11 @@ vendors:
                   'version': '1.4.1'
                   'dependencies': 'jquery'
     'bootstrap':
-                  'version': '~4.0.0-alpha.6'
-                  'dependencies': 'jquery, tether'
-    'tether':
-                  'version': '1.4.0'
-                  'dependencies': 'jquery, tether'
+                  'version': '~4.0.0-beta'
+                  'dependencies': 'jquery, popper.js'
+    'popper.js':
+                  'version': '1.11.1'
+                  'dependencies': ''
     'font-awesome':
                   'version': '4.7.0'
                   'dependencies': ''

libraries/cms/html/bootstrap.php

@@ -156,7 +156,7 @@ public static function framework($debug = null)
 		// Load the needed scripts
 		JHtml::_('behavior.core');
 		JHtml::_('jquery.framework');
-		JHtml::_('script', 'vendor/tether/tether.min.js', array('version' => 'auto', 'relative' => true, 'detectDebug' => $debug));
+		JHtml::_('script', 'vendor/popper/popper.min.js', array('version' => 'auto', 'relative' => true, 'detectDebug' => $debug));
 		JHtml::_('script', 'vendor/bootstrap/bootstrap.min.js', array('version' => 'auto', 'relative' => true, 'detectDebug' => $debug));
 		JHtml::_('script', 'system/bootstrap-init.min.js', array('version' => 'auto', 'relative' => true, 'detectDebug' => $debug));
 
@@ -228,7 +228,7 @@ public static function renderModal($selector = 'modal', $params = array(), $body
 	 *                      template     string           Base HTML to use when creating the popover.
 	 *                      title        string|function  default title value if `title` tag isn't present
 	 *                      trigger      string           how popover is triggered - hover | focus | manual
-	 *                      constraints  array            An array of constraints - passed through to Tether.
+	 *                      constraints  array            An array of constraints - passed through to Popper.
 	 *                      offset       string           Offset of the popover relative to its target.
 	 *
 	 * @return  void
@@ -317,7 +317,7 @@ public static function scrollspy($selector = 'navbar', $params = array())
 	 *                                template     string           Base HTML to use when creating the popover.
 	 *                                title        string|function  default title value if `title` tag isn't present
 	 *                                trigger      string           how popover is triggered - hover | focus | manual
-	 *                                constraints  array            An array of constraints - passed through to Tether.
+	 *                                constraints  array            An array of constraints - passed through to Popper.
 	 *                                offset       string           Offset of the popover relative to its target.
 	 *
 	 * @return  void

media/system/scss/_jalert.scss

@@ -1,5 +1,19 @@
 /* Bootstrap alert mapping */
 
+@mixin alert-variant($background, $border, $body-color) {
+  background-color: $background;
+  border-color: $border;
+  border-left: 10px solid $background;
+  color: $body-color;
+
+  hr {
+    border-top-color: darken($background, 5%);
+  }
+  .alert-link {
+    color: darken($background, 10%);
+  }
+}
+
 .alert-message {
-    @extend .alert-success;
+  @include alert-variant(theme-color("success"), theme-color("success"), $gray-200);
 }