minor changes to dbc.css to improve when switching themes

CHANGELOG.md

@@ -1,6 +1,11 @@
+## 1.0.2
+
+### Changes
+ - updated the dbc.css to improve style when switching themes.
+
 
 ## 1.0.0
-V1.0.0 is based on based on `dash` V2.0.0 and `dash-bootstrap-components` V1.0.0 which uses
+V1.0.0 is based on `dash` V2.0.0 and `dash-bootstrap-components` V1.0.0 which uses
 Boostrap V5 stylesheets.
 
 ### Added
@@ -12,7 +17,7 @@ Boostrap V5 stylesheets.
  - added `dbc.css` which minimally styles `dash-core-components` and the `DataTable` with  the selected Bootstrap theme
  - added examples of the2 AIO components that switch themes.
 
-## Changes
+### Changes
  - updated `_create_templates.py` to generate figure templates based on Boostrap V5 stylesheets
 
 

dbc.css

@@ -1,9 +1,12 @@
 /*
- *  The dbc class improves the style of Dash components with Bootstrap V5
+Defines the .dbc class
+  Description: The dbc class improves the style of Dash components when using Bootstrap V5 themes
+  Author: @AnnMarieW
+  Updated: 2021-11-29
 */
 
 
-/* --------- dropdown ---- */
+/* --------- dcc dropdown ---- */
 
 
 /* input box */
@@ -17,19 +20,16 @@
   color: var(--bs-body-color) !important;
 }
 
-
 .dbc .Select input {
   color: var(--bs-body-color);
 }
 
-
 /* dropdown menu options */
 .dbc .VirtualizedSelectOption {
   background-color: var(--bs-body-bg);
   color: var(--bs-body-color);
 }
 
-
 /* dropdown menu hover effect */
 .dbc .VirtualizedSelectFocusedOption {
   background-color: rgba(100, 100, 100, 0.2);
@@ -44,15 +44,13 @@
   box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
 }
 
-
 /* primary  this colors the input box text and x  of multi */
 .dbc .Select--multi .Select-value {
   color: var(--bs-body-color);
   background-color: rgba(var(--bs-primary-rgb), 0.2);
   border-color: rgba(var(--bs-primary-rgb), 0.6) !important;
 }
 
-
 /* ---------------------------------------
  * textarea
  */
@@ -62,8 +60,6 @@
   border-color: rgba(100, 100, 100, 0.4) !important;
 }
 
-
-
 /* Use this classname for dcc.Input */
 .dbc input:not([type=radio]):not([type=checkbox]) {
   color: var(--bs-body-color) !important;
@@ -398,4 +394,3 @@ body .dbc .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-in
     color: var(--bs-body-body) !important;
 }
 /* ------------------------------------------*/
-