Merge pull request #10 from cywolf/bootstrap-4.3

Update to bootstrap 4.3, add misc fixes

README.md

@@ -2,7 +2,7 @@
 
 [Full documentation and demonstrations of the theme](https://bcgov.github.io/bootstrap-theme/) 
 
-A Bootstrap version 4.1 BC Government Look-and-Feel featuring:
+A Bootstrap version 4.3 BC Government look-and-feel featuring:
 - Compatibility with pure Bootstrap markup
 - A few additions:
   - `bcgold` colour classes for the old-style gold buttons (`btn-bcgold`, `bg-bcgold`, etc)

dist/scss/_additions.scss

@@ -1,5 +1,5 @@
 //---------------------------------------------------------------------------------------
-// Additions are for extra things not found in bootstrap like a new font!
+// Additions are for extra classes not found in the normal Bootstrap
 // WARNING: Do not create alot of new things here, remember always try to tweak and variable
 // or override bootstrap css before trying to create something new.
 //---------------------------------------------------------------------------------------

dist/scss/_common.scss

@@ -1,8 +1,9 @@
+// Includes in this file should not define any CSS classes, it is only meant for
+// defining variables and functions for use by isolated components
+
 @import "~bootstrap/scss/functions";
 
 @import "variables";
 
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
-
-@import "overrides";

dist/scss/_overrides.scss

@@ -10,7 +10,7 @@
 }
 
 // Highlight focused links
-a:focus {
+a:not(.btn):focus {
   color: $link-hover-color;
 }
 

dist/scss/_variables.scss

@@ -45,7 +45,15 @@ $table-dark-bg: theme-color(primary);
 $table-dark-border-color: theme-color(primary);
 
 // Slightly darker borders
+$gray-400:                  #ced4da;
 $alert-border-level:        -7;
+$card-border-color:         rgba(0, 0, 0, .2);
+$hr-border-color:           rgba(0, 0, 0, .2);
+$border-color:              $gray-400;
+$nav-tabs-border-color:     $gray-400;
+$pagination-border-color:   $gray-400;
+$pagination-hover-border-color:  $gray-400;
+$table-border-color:        $gray-400;
 
 // List groups
 $list-group-active-bg:      lighten(theme-color(secondary-nav), 10%);

dist/scss/bootstrap-theme.scss

@@ -4,6 +4,9 @@
 // Now bring in the rest of bootstrap!
 @import "~bootstrap/scss/bootstrap";
 
+// Overrides of bootstrap classes
+@import "overrides";
+
 // Import the additions to bootstrap base
 @import "additions";
 

docs/getting-started/introduction.md

@@ -16,8 +16,8 @@ For the moment, the theme package can be installed using something like this in
 
   ```json
   "devDependencies": {  
-    "@bcgov/bootstrap-theme": "https://github.com/cywolf/bootstrap-theme/releases/download/v4.1.0-rc0/bcgov-bootstrap-theme-4.1.0-rc0.tgz",
-    "bootstrap": "~4.1.0",
+    "@bcgov/bootstrap-theme": "https://github.com/bcgov/bootstrap-theme/releases/download/v1.0.0/bcgov-bootstrap-theme-1.0.0.tgz",
+    "bootstrap": "~4.3.1",
   }
   ```
 
@@ -39,7 +39,7 @@ installed as node modules, or distributed separately. For example:
   ```html
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   ```
 
 For Angular-based sites, [`ng-bootstrap`](https://ng-bootstrap.github.io/) is recommended
@@ -133,7 +133,7 @@ footer at the bottom of the screen on larger screen sizes.
 
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
     <script>
       // enable popovers everywhere
       $(function () {

docs/reference/simple.md

@@ -20,7 +20,7 @@ toc: true
       <div class="col-md-9 col-sm-8">
         <h1>Simple Theme Reference</h1>
         <p class="lead">
-          For complete Bootstrap documentation, see <a href="https://getbootstrap.com/docs/4.1/">The Official Site</a>.
+          For complete Bootstrap documentation, see <a href="https://getbootstrap.com/docs/4.3/">The Official Site</a>.
         </p>
       </div>
       
@@ -266,13 +266,13 @@ toc: true
 
         <div class="mb-3">
           <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
-            <div class="btn-group" role="group" aria-label="First group">
+            <div class="btn-group mr-2" role="group" aria-label="First group">
               <button type="button" class="btn btn-secondary">1</button>
               <button type="button" class="btn btn-secondary">2</button>
               <button type="button" class="btn btn-secondary">3</button>
               <button type="button" class="btn btn-secondary">4</button>
             </div>
-            <div class="btn-group" role="group" aria-label="Second group">
+            <div class="btn-group mr-2" role="group" aria-label="Second group">
               <button type="button" class="btn btn-secondary">5</button>
               <button type="button" class="btn btn-secondary">6</button>
               <button type="button" class="btn btn-secondary">7</button>

index.html

@@ -6,7 +6,7 @@
 <div class="container">
   <h1>Government of British Columbia Bootstrap Theme</h1>
   <p class="lead">
-    BC Government look-and-feel for Bootstrap 4.1.
+    BC Government look-and-feel for Bootstrap 4.3.
     See <a href="{{ site.baseurl }}/docs/reference/simple">a simple demonstration of all common styles.</a>
   </p>
 </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcgov/bootstrap-theme",
-  "version": "4.1.0-rc0",
+  "version": "1.0.0",
   "description": "Government of British Columbia Bootstrap v4 theme",
   "style": "dist/css/bootstrap-theme.min.css",
   "main": "dist/js/bootstrap-theme.min.js",
@@ -33,23 +33,23 @@
   "license": "Apache-2.0",
   "dependencies": {},
   "peerDependencies": {
-    "bootstrap": "~4.1.0"
+    "bootstrap": "~4.3.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.2.0",
-    "bootstrap": "~4.1.0",
+    "bootstrap": "^4.3.1",
     "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "^4.5.0",
+    "copy-webpack-plugin": "^4.6.0",
     "cross-env": "^5.2.0",
     "css-loader": "^0.28.11",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.11",
-    "node-sass": "^4.5.3",
+    "node-sass": "^4.12.0",
     "postcss-loader": "^2.1.0",
     "precss": "^3.1.0",
+    "sass-lint": "^1.13.1",
     "sass-loader": "^7.1.0",
-    "sass-lint": "^1.12.1",
     "style-loader": "^0.23.0",
-    "webpack": "^3.10.0"
+    "webpack": "^3.12.0"
   }
 }

src/styles/_additions.scss

@@ -1,5 +1,5 @@
 //---------------------------------------------------------------------------------------
-// Additions are for extra things not found in bootstrap like a new font!
+// Additions are for extra classes not found in the normal Bootstrap
 // WARNING: Do not create alot of new things here, remember always try to tweak and variable
 // or override bootstrap css before trying to create something new.
 //---------------------------------------------------------------------------------------

src/styles/_common.scss

@@ -1,8 +1,9 @@
+// Includes in this file should not define any CSS classes, it is only meant for
+// defining variables and functions for use by isolated components
+
 @import "~bootstrap/scss/functions";
 
 @import "variables";
 
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
-
-@import "overrides";

src/styles/_overrides.scss

@@ -10,7 +10,7 @@
 }
 
 // Highlight focused links
-a:focus {
+a:not(.btn):focus {
   color: $link-hover-color;
 }
 

src/styles/_variables.scss

@@ -45,7 +45,15 @@ $table-dark-bg: theme-color(primary);
 $table-dark-border-color: theme-color(primary);
 
 // Slightly darker borders
+$gray-400:                  #ced4da;
 $alert-border-level:        -7;
+$card-border-color:         rgba(0, 0, 0, .2);
+$hr-border-color:           rgba(0, 0, 0, .2);
+$border-color:              $gray-400;
+$nav-tabs-border-color:     $gray-400;
+$pagination-border-color:   $gray-400;
+$pagination-hover-border-color:  $gray-400;
+$table-border-color:        $gray-400;
 
 // List groups
 $list-group-active-bg:      lighten(theme-color(secondary-nav), 10%);

src/styles/bootstrap-theme.scss

@@ -4,6 +4,9 @@
 // Now bring in the rest of bootstrap!
 @import "~bootstrap/scss/bootstrap";
 
+// Overrides of bootstrap classes
+@import "overrides";
+
 // Import the additions to bootstrap base
 @import "additions";