Merge pull request #10 from piazzai/develop

Update Bootstrap and add color defaults
piazzai · Sep 17, 2024 · 4ed0093 · 4ed0093
2 parents ba532a3 + da87a23
commit 4ed0093
Show file tree

Hide file tree

Showing 24 changed files with 4,017 additions and 308 deletions.
diff --git a/README.md b/README.md
@@ -83,35 +83,79 @@ For convenience, customization of the theme's color scheme is also possible via
 
 ```yaml
 a:
-  color: blue-7         # links
-  hover: blue-9         # links when hovering
+  color: blue-7           # links
+  hover: blue-9           # links when hovering
+accordion-button:
+  bg: gray-2              # button in accordion component
+accordion-item:
+  border: gray-2          # border of button in accordion component
+alert-primary:
+  bg: blue-1              # primary alert
 body:
-  bg: gray-0            # background
-  color: gray-8         # body text
+  bg: gray-0              # background
+  color: gray-8           # body text
+btn-outline-primary:
+  border: blue-5          # outline primary button border
+  color: blue-5           # outline primary button
+  hover:
+    bg: blue-5            # outline primary button when hovering
+    color: gray-0         # outline primary button text when hovering
+  disabled:
+    bg: blue-3            # disabled outline primary button
+    color: blue-3         # disabled outline primary button text
 btn-primary:
-  bg: blue-5            # primary button
-  color: gray-0         # primary button text
-  hover: blue-7         # primary button when hovering
-  disabled: blue-3      # disabled primary button
+  bg: blue-5              # primary button
+  color: gray-0           # primary button text
+  hover: blue-7           # primary button when hovering
+  disabled: blue-3        # disabled primary button
 btn-secondary:
-  bg: gray-4            # secondary button
-  color: gray-0         # secondary button text
-  hover: gray-6         # secondary button when hovering
+  bg: gray-4              # secondary button
+  color: gray-0           # secondary button text
+  hover: gray-6           # secondary button when hovering
+caption:
+  cikir: gray-6           # caption text
+card:
+  border: gray-2          # card component border
+card-header:
+  bg: gray-2              # header of card component
+dropdown-menu:
+  bg: gray-2              # dropdown menu
+  color: gray-7           # dropdown menu text
+dropdown-item:
+  color: gray-7           # dropdown link
+  hover: gray-9           # dropdown link when hovering
+  disabled: gray-6        # disabled dropdown link
 digit:
-  bg: gray-3            # background of digit on 404 page
+  bg: gray-3              # background of digit on 404 page
+form-control:
+  bg: gray-0              # form field
+  color: gray-9           # form field text
+  border: gray-3          # form field border
+  focus:
+    bg: gray-0            # focused form field
+    color: gray-9         # focused form field text
+    border: blue-2        # focused form field border
+    shadow: blue-1        # focused form field shadow
+  placeholder: gray-6     # form placeholder text
 header:
-  bg: gray-4            # background of navigation bar
+  bg: gray-4              # background of navigation bar
 index:
-  bg: gray-2            # background of index container
+  bg: gray-2              # background of index container
+invalid-feedback: red-9   # form input warning
 navbar-brand:
-  color: gray-8         # website name in header
-  hover: gray-9         # website name in header when hovering
+  color: gray-8           # website name in header
+  hover: gray-9           # website name in header when hovering
 nav-link:
-  color: gray-7         # navigation links in header
-  hover: gray-9         # navigation links in header when hovering
+  color: gray-7           # navigation links in header
+  hover: gray-9           # navigation links in header when hovering
+svg:
+  fill:                   # svg icons
+table:
+  td:
+    border:               # table row dividers
 text-muted:
-  color: gray-6         # light text
-  hover: gray-9         # light text when hovering (if link)
+  color: gray-6           # light text
+  hover: gray-9           # light text when hovering (if link)
 ```
 
 The variables are named after the HTML elements they style. The colors to which they are set in this example are actually the theme's defaults. If no value is provided for some variables, or if `_data/skin.yml` does not exist, the theme assumes the color scheme above.

diff --git a/_includes/header.html b/_includes/header.html
@@ -12,7 +12,7 @@
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navigation">
-                <div class="navbar-nav">
+                <div class="navbar-nav me-auto">
                     {% assign links = site.pages | sort: 'navorder' %}
                     {% for link in links %}
                     {% if link.navorder %}

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,8 +5,9 @@
 
 <body>
     {{ content }}
-    <script src="{{ 'assets/js/bootstrap.js' | relative_url }}"></script>
+    <script src="{{ 'assets/js/bootstrap.bundle.js' | relative_url }}"></script>
     <script src="{{ 'assets/js/leaflet.js' | relative_url }}"></script>
+    <script src="{{ 'assets/js/leaflet-data.js' | relative_url }}"></script>
     <script src="{{ 'assets/js/main.js' | relative_url }}"></script>
 </body>
 

diff --git a/_sass/overrides/_bootstrap.scss b/_sass/overrides/_bootstrap.scss
@@ -120,6 +120,28 @@ caption {
   }
 }
 
+.dropdown-menu {
+  color: $dropdown-menu_color;
+  background-color: $dropdown-menu_bg;
+}
+
+.dropdown-item {
+  color: $dropdown-item_color;
+}
+
+.dropdown-item.active,
+.dropdown-item:active,
+.dropdown-item:focus,
+.dropdown-item:hover {
+  color: $dropdown-item_hover;
+  background-color: transparent;
+}
+
+.dropdown-item.disabled,
+.dropdown-item:disabled {
+  color: $dropdown-item_disabled;
+}
+
 .form-control {
   color: $form-control_color;
   background-color: $form-control_bg;

diff --git a/assets/css/bootstrap.css b/assets/css/bootstrap.css
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
@@ -28,6 +28,11 @@ $btn-secondary_hover: var(--oc-{{ site.data.skin.btn-secondary.hover | default:
 $caption_color: var(--oc-{{ site.data.skin.caption.color | default: 'gray-6' }});
 $card_border: var(--oc-{{ site.data.skin.card.border | default: 'gray-2' }});
 $card-header_bg: var(--oc-{{ site.data.skin.card-header.bg | default: 'gray-2' }});
+$dropdown-menu_bg: var(--oc-{{ site.data.skin.dropdown-menu.bg | default: 'gray-2' }});
+$dropdown-menu_color: var(--oc-{{ site.data.skin.dropdown-menu.color | default: 'gray-7' }});
+$dropdown-item_color: var(--oc-{{ site.data.skin.dropdown-item.color | default: 'gray-7' }});
+$dropdown-item_hover: var(--oc-{{ site.data.skin.dropdown-item.hover | default: 'gray-9' }});
+$dropdown-item_disabled: var(--oc-{{ site.data.skin.dropdown-item.disabled | default: 'gray-6' }});
 $form-control_bg: var(--oc-{{ site.data.skin.form-control.bg | default: 'gray-0' }});
 $form-control_color: var(--oc-{{ site.data.skin.form-control.color | default: 'gray-9' }});
 $form-control_border: var(--oc-{{ site.data.skin.form-control.border | default: 'gray-3' }});