feat(css): create SCSS versions of CSS (#2218)

* Create alert.scss

* Create _variables.scss

* Update alert.scss

* Create _variables.scss

* Create dropdown.scss

* Create _variables.scss

* Create form-file.scss

* Create _variables.scss

* Create input-group.scss

Author: tmorehouse

src/components/alert/_variables.scss

@@ -0,0 +1,3 @@
+// Alert defaults
+
+$bv-alert-transition: $transition-fade !default;

src/components/alert/alert.scss

@@ -0,0 +1,16 @@
+// @import "bootstrap/scss/functions"
+// @import "bootstrap/scss/variables"
+// @import "bootstrap/scss/mixins"
+
+@import "./variables"
+
+.alert {
+  &.fade-enter-active,
+  &.alert.fade-leave-active {
+    transition: $bv-alert-transition;
+  }
+  &.fade-enter,
+  &.fade-leave-to {
+    opacity: 0;
+  }
+}

src/components/dropdown/_variables.scss

@@ -0,0 +1 @@
+// Dropdown variables

src/components/dropdown/dropdown.scss

@@ -0,0 +1,15 @@
+// @import "boostrap/scss/functions
+// @import "boostrap/scss/variables
+// @import "boostrap/scss/mixins
+
+@import "./variables"
+
+/* b-dropdown: custom styling */
+// Hide the caret for no-caret setting
+// See: https://github.com/bootstrap-vue/bootstrap-vue/issues/1473
+// See: https://github.com/twbs/bootstrap/issues/23724
+.dropdown-toggle {
+  &.dropdown-toggle-no-caret:after {
+    display: none !important;
+  }
+}

src/components/form-file/_variables.scss

@@ -0,0 +1 @@
+// b-form-file defaults

src/components/form-file/form-file.scss

@@ -0,0 +1,8 @@
+/* b-form-file: custom style overrides */
+
+/* b-form-file: temporary css until Bootstrap V4.2 is released */
+.custom-file-input {
+  ~ .custom-file-label[data-browse]::after {
+      content: attr(data-browse);
+    }
+}

src/components/input-group/_variables.scss

@@ -0,0 +1 @@
+// b-input-group: defaults

src/components/input-group/input-group.scss

@@ -0,0 +1,30 @@
+// @import "bootstrap-vue/scss/functions
+// @import "bootstrap-vue/scss/variables
+// @import "bootstrap-vue/scss/mixins
+
+@import "./variables"
+
+/* b-input-group: custom styles */
+
+/* workaround for https://github.com/bootstrap-vue/bootstrap-vue/issues/1560 */
+/* workaround for https://github.com/bootstrap-vue/bootstrap-vue/issues/2114 */
+/* source: bootstrap _input-group.scss */
+.input-group {
+  > .input-group-prepend > .btn-group,
+  > .input-group-append:not(:last-child) > .btn-group,
+  > .input-group-append:last-child > .btn-group:not(:last-child):not(.dropdown-toggle) {
+    > .btn {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  > .input-group-append > .btn-group,
+  > .input-group-prepend:not(:first-child) > .btn-group,
+  > .input-group-prepend:first-child > .btn-group:not(:first-child) {
+    > .btn {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}