bootstrap_barrio.info.yml

 name: Bootstrap Barrio
 type: theme
 description: 'A flexible Booststrap based theme, with many regions and a responsive, mobile-first layout.'
-core: 8.x
-core_version_requirement: ^8 || ^9
+core_version_requirement: ^10.3 || ^11
 base theme: false
 
 libraries:
@@ -13,10 +12,15 @@ libraries-extend:
     - bootstrap_barrio/dropbutton
   file/drupal.file:
     - bootstrap_barrio/file
-  ckeditor_stylesheets:
-    - css/components/table.css
   views/views.ajax:
     - bootstrap_barrio/views.ajax
+  node/drupal.node.preview:
+    - bootstrap_barrio/drupal.node.preview
+  core/drupal.message:
+    - bootstrap_barrio/messages
+
+ckeditor_stylesheets:
+  - css/components/table.css
 
 regions:
   top_header: 'Top header'

bootstrap_barrio.layouts.yml

-bb_cardbasic:
+barrio_cardbasic:
   label: Card basic
-  category: Barrio
-  template: templates/ds/layout--ds-card-basic
-  class: '\Drupal\ds\Plugin\DsLayout'
+  category: Barrio Cards
+  path: layouts
+  template: card-basic
+  default_region: first
+  icon_map:
+    - [first]
   regions:
     first:
       label: Content
-bb_cardtopimage:
+barrio_cardtopimage:
   label: Card top image
-  category: Barrio
-  template: templates/ds/layout--ds-card-top-image
-  class: '\Drupal\ds\Plugin\DsLayout'
+  category: Barrio Cards
+  path: layouts
+  template: card-top-image
+  default_region: second
+  icon_map:
+    - [top]
+    - [middle]
   regions:
     first:
       label: Image
     second:
       label: Content
-bb_cardimageoverlay:
+barrio_cardimageoverlay:
   label: Card image overlay
-  category: Barrio
-  template: templates/ds/layout--ds-card-image-overlay
-  class: '\Drupal\ds\Plugin\DsLayout'
+  category: Barrio Cards
+  path: layouts
+  template: card-image-overlay
+  default_region: second
+  icon_map:
+    - [top]
+    - [middle]
   regions:
     first:
       label: Image
     second:
       label: Content
-bb_cardheaderfooter:
+barrio_cardheaderfooter:
   label: Card header footer
-  category: Barrio
-  template: templates/ds/layout--ds-card-header-footer
-  class: '\Drupal\ds\Plugin\DsLayout'
+  category: Barrio Cards
+  path: layouts
+  template: card-header-footer
+  default_region: second
+  icon_map:
+    - [top]
+    - [middle]
+    - [bottom]
   regions:
     first:
       label: Header
@@ -38,11 +54,16 @@ bb_cardheaderfooter:
       label: Content
     third:
       label: Footer
-bb_card3stack:
+barrio_card3stack:
   label: Card three block stacked
-  category: Barrio
-  template: templates/ds/layout--ds-card-3stack
-  class: '\Drupal\ds\Plugin\DsLayout'
+  category: Barrio Cards
+  path: layouts
+  template: card-3stack
+  default_region: second
+  icon_map:
+    - [top]
+    - [middle]
+    - [bottom]
   regions:
     first:
       label: First
@@ -50,13 +71,117 @@ bb_card3stack:
       label: Image
     third:
       label: Second
-bb_media:
+barrio_media:
   label: Media
-  category: Barrio
-  template: templates/ds/layout--ds-media
-  class: '\Drupal\ds\Plugin\DsLayout'
+  category: Barrio Media
+  path: layouts
+  template: bootstrap-media
+  default_region: second
+  icon_map:
+    - [first, second]
   regions:
     first:
       label: Image
     second:
       label: Content
+barrio_col2-equal:
+  label: 2 Columns Equal
+  category: Barrio Columns
+  path: layouts
+  template: col2-equal
+  default_region: first
+  icon_map:
+    - [top]
+    - [first, second]
+    - [bottom]
+  regions:
+    top:
+      label: Top
+    first:
+      label: First
+    second:
+      label: Second
+    bottom:
+      label: Bottom
+barrio_col2-3-9:
+  label: 2 Columns 3 and 9
+  category: Barrio Columns
+  path: layouts
+  template: col2-3-9
+  default_region: first
+  icon_map:
+    - [top]
+    - [first, second]
+    - [bottom]
+  regions:
+    top:
+      label: Top
+    first:
+      label: First
+    second:
+      label: Second
+    bottom:
+      label: Bottom
+barrio_col2-9-3:
+  label: 2 Columns 9 and 3
+  category: Barrio Columns
+  path: layouts
+  template: col2-9-3
+  default_region: first
+  icon_map:
+    - [top]
+    - [first, second]
+    - [bottom]
+  regions:
+    top:
+      label: Top
+    first:
+      label: First
+    second:
+      label: Second
+    bottom:
+      label: Bottom
+barrio_col3-equal:
+  label: 3 Columns Equal
+  category: Barrio Columns
+  path: layouts
+  template: col3-equal
+  default_region: first
+  icon_map:
+    - [top]
+    - [first, second, third]
+    - [bottom]
+  regions:
+    top:
+      label: Top
+    first:
+      label: First
+    second:
+      label: Second
+    third:
+      label: Third
+    bottom:
+      label: Bottom
+barrio_col4-equal:
+  label: 4 Columns Equal
+  category: Barrio Columns
+  path: layouts
+  template: col4-equal
+  default_region: first
+  icon_map:
+    - [top]
+    - [first, second, third, fourth]
+    - [bottom]
+  regions:
+    top:
+      label: Top
+    first:
+      label: First
+    second:
+      label: Second
+    third:
+      label: Third
+    fourth:
+      label: Fourth
+    bottom:
+      label: Bottom

bootstrap_barrio.libraries.yml

 global-styling:
   version: VERSION
   js:
-    js/global.js: {}
+    js/barrio.js: {}
     js/affix.js: {}
   css:
     component:
       css/components/affix.css: {}
-      css/components/alerts.css: {}
       css/components/book.css: {}
-      css/components/comments.css: {}
       css/components/contextual.css: {}
       # @see https://www.drupal.org/node/2389735
       css/components/feed-icon.css: {}
@@ -19,7 +17,7 @@ global-styling:
       css/components/image-button.css: {}
       css/components/item-list.css: {}
       css/components/list-group.css: {}
-      css/components/node-preview.css: {}
+      css/components/media.css: {}
       css/components/page.css: {}
       css/components/search-form.css: {}
       css/components/shortcut.css: {}
@@ -32,6 +30,7 @@ global-styling:
       css/components/tablesort-indicator.css: {}
       css/components/ui.widget.css: {}
       css/components/tabs.css: {}
+      css/components/toolbar.css: {}
       css/components/user.css: { weight: -10 }
       # @see https://www.drupal.org/node/2389735
       css/components/vertical-tabs.css: {}
@@ -42,7 +41,7 @@ global-styling:
       css/print.css: { media: print }
   dependencies:
     - core/jquery
-    - core/jquery.once
+    - core/once
     - core/drupal
 
 affix:
@@ -52,6 +51,9 @@ affix:
   css:
     component:
       css/components/affix.css: {}
+  dependencies:
+    - core/jquery
+    - core/once
 alerts:
   version: VERSION
   css:
@@ -75,6 +77,11 @@ breadcrumb:
     component:
       css/components/breadcrumb.css: {}
 
+comments:
+  css:
+    component:
+      css/components/comments.css: {}
+
 dropbutton:
   version: VERSION
   css:
@@ -94,6 +101,24 @@ form:
     component:
       css/components/form.css: {}
 
+forum:
+  version: VERSION
+  css:
+    component:
+      css/components/forum.css: { weight: -10 }
+
+image-widget:
+  version: VERSION
+  css:
+    component:
+      css/components/image-widget.css: {}
+
+image_fluid:
+  version: VERSION
+  css:
+    component:
+      css/components/img-fluid.css: {}
+
 indented:
   version: VERSION
   css:
@@ -109,13 +134,29 @@ maintenance_page:
     - system/maintenance
     - bootstrap_barrio/global-styling
 
+messages:
+  js:
+    js/messages.js: {}
+
+navigation:
+  version: VERSION
+  css:
+    theme:
+      css/components/navigation.css: {}
+
 node:
   version: VERSION
   css:
     component:
       css/components/node.css: { weight: -10 }
 
-sidebar-collapse:
+slide_nav:
+  version: VERSION
+  css:
+    theme:
+      css/components/slide-nav.css: {}
+
+sidebar_collapse:
   version: VERSION
   js:
     js/sidebar-collapse.js: { external: true }
@@ -129,6 +170,12 @@ tabs:
     component:
       css/components/tabs.css: {}
 
+tabs_full:
+  version: VERSION
+  css:
+    component:
+      css/components/tabs-full.css: {}
+
 toast:
   version: VERSION
   js:
@@ -146,6 +193,13 @@ commerce:
     component:
       css/components/commerce.css: {}
 
+# Core
+
+drupal.node.preview:
+  css:
+    component:
+      css/components/node-preview.css: {}
+
 # Fonts
 
 roboto:
@@ -306,3 +360,146 @@ mdb:
 views.ajax:
   js:
     js/modules/views/ajax_view.js: {}
+
+# Bootstrap
+
+bootstrap:
+  js:
+    /libraries/bootstrap/dist/js/bootstrap.min.js: {}
+  css:
+    component:
+      /libraries/bootstrap/dist/css/bootstrap.min.css: {}
+  dependencies:
+    - core/popperjs
+bootstrap_cdn:
+  js:
+    //cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js: {}
+    //stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js: {}
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css: {}
+boostrap_js:
+  js:
+    //cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js: {}
+    //stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js: {}
+
+# Bootswatch
+
+bootswatch_cosmo:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/cosmo/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_cyborg:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/cyborg/bootstrap.min.css: {}
+bootswatch_darkly:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/darkly/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_flatly:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/flatly/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_journal:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/journal/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_litera:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/litera/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_lumen:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/lumen/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_lux:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/lux/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_materia:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/materia/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_minty:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/minty/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_pulse:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/pulse/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_sandstone:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/sandstone/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_simplex:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/simplex/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_sketchy:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/sketchy/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_slate:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/slate/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_solar:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/solar/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_spacelab:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/spacelab/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_superhero:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/superhero/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_united:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/united/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js
+bootswatch_yeti:
+  css:
+    component:
+      //stackpath.bootstrapcdn.com/bootswatch/4.5.2/yeti/bootstrap.min.css: {}
+  dependencies:
+    - bootstrap_barrio/bootstrap_js

bootstrap_barrio.theme

@@ -123,6 +123,33 @@ function bootstrap_barrio_preprocess_page(&$variables) {
 
     }
   }
+  else {
+    $source = theme_get_setting('bootstrap_barrio_source');
+    if ($source) {
+      $variables['#attached']['library'][] = $source;
+    }
+  }
+
+  $img_fluid = theme_get_setting('bootstrap_barrio_image_fluid');
+  if ($img_fluid) {
+    $variables['#attached']['library'][] = 'bootstrap_barrio/image_fluid';
+  }
+
+  $flyout = theme_get_setting('bootstrap_barrio_navbar_flyout');
+  if ($flyout) {
+    $variables['#attached']['library'][] = 'bootstrap_barrio/navigation';
+  }
+
+  $slide = theme_get_setting('bootstrap_barrio_navbar_slide');
+  if ($slide) {
+    $variables['#attached']['library'][] = 'bootstrap_barrio/slide_nav';
+  }
+
+  switch (theme_get_setting('bootstrap_barrio_tabs_style')) {
+    case 'full':
+      $variables['#attached']['library'][] = 'bootstrap_barrio/tabs_full';
+      break;
+  }
 
   $fonts = theme_get_setting('bootstrap_barrio_google_fonts');
   if ($fonts) {
@@ -163,11 +190,11 @@ function bootstrap_barrio_preprocess_page(&$variables) {
     'role' => ['main'],
   ];
   $variables['sidebar_first_attributes'] = [
-    'class' => ['sidebar_first sidebar', $sidebar_first_width],
+    'class' => ['sidebar_first', 'sidebar', $sidebar_first_width],
     'id' => ['sidebar_first'],
   ];
   $variables['sidebar_second_attributes'] = [
-    'class' => ['sidebar_second sidebar', $sidebar_second_width],
+    'class' => ['sidebar_second', 'sidebar', $sidebar_second_width],
     'id' => ['sidebar_second'],
   ];
 
@@ -243,6 +270,10 @@ function bootstrap_barrio_preprocess_page(&$variables) {
 
   // Define navigation toggle size.
   switch (theme_get_setting('bootstrap_barrio_navbar_toggle')) {
+    case 'navbar-toggleable-xl':
+      $variables['navbar_attributes']['class'][] = 'navbar-expand-xl';
+      break;
+
     case 'navbar-toggleable-lg':
       $variables['navbar_attributes']['class'][] = 'navbar-expand-lg';
       break;
@@ -259,6 +290,10 @@ function bootstrap_barrio_preprocess_page(&$variables) {
       $variables['navbar_attributes']['class'][] = 'navbar-expand-xs';
       break;
 
+    case 'navbar-toggleable-all':
+      $variables['navbar_attributes']['class'][] = '';
+      break;
+
     default:
       $variables['navbar_attributes']['class'][] = 'navbar-expand-md';
       break;
@@ -359,6 +394,7 @@ function bootstrap_barrio_preprocess_region(&$variables) {
  */
 function bootstrap_barrio_preprocess_block(&$variables) {
   if ($variables['base_plugin_id'] == 'system_menu_block' && isset($variables['attributes']['id'])) {
+    $variables['content']['#attributes']['id'] = $variables['attributes']['id'];
     $variables['content']['#attributes']['block'] = $variables['attributes']['id'];
   }
   // Add a clearfix class to system branding blocks.
@@ -385,32 +421,46 @@ function bootstrap_barrio_preprocess_form_element(&$variables) {
   if (isset($variables['element']['#attributes'])) {
     $variables['input_attributes'] = new Attribute($variables['element']['#attributes']);
   }
-  switch ($variables['type']) {
-    case 'checkbox':
-      $variables['customtype'] = theme_get_setting('bootstrap_barrio_checkbox');
-      break;
+  if (isset($variables['type'])) {
+    switch ($variables['type']) {
+      case 'checkbox':
+        $variables['customtype'] = theme_get_setting('bootstrap_barrio_checkbox');
+        break;
 
-    case 'radio':
-      $variables['customtype'] = theme_get_setting('bootstrap_barrio_radio');
-      break;
+      case 'radio':
+        $variables['customtype'] = theme_get_setting('bootstrap_barrio_radio');
+        break;
 
-    default:
-      break;
+      default:
+        break;
+    }
   }
 }
 
 /**
- * Implements hook_preprocess_HOOK() for form-element-label.html.twig.
+ * Implements hook_preprocess_select() for adding classes to select elements.
  */
-function bootstrap_barrio_preprocess_form_element_label(&$variables) {
-  $element = $variables['element'];
+function bootstrap_barrio_preprocess_select(&$variables) {
+  $variables['customtype'] = theme_get_setting('bootstrap_barrio_select');
+  if (isset($variables['attributes']['class'])) {
+    if (is_object($variables['attributes']['class'])) {
+      if (in_array('error', $variables['attributes']['class']->value())) {
+        $variables['attributes']['class']->addClass('is-invalid');
+      }
+    }
+    elseif (is_array($variables['attributes']['class'])) {
+      if (in_array('error', $variables['attributes']['class'])) {
+        $variables['attributes']['class'][] = 'is-invalid';
+      }
+    }
+  }
 }
 
 /**
- * Implements hook_preprocess_HOOK() for select.html.twig.
+ * Implements hook_preprocess_HOOK() for form-element-label.html.twig.
  */
-function bootstrap_barrio_preprocess_select(&$variables) {
-  $variables['customtype'] = theme_get_setting('bootstrap_barrio_select');
+function bootstrap_barrio_preprocess_form_element_label(&$variables) {
+  $element = $variables['element'];
 }
 
 /**
@@ -438,6 +488,20 @@ function bootstrap_barrio_preprocess_menu_local_task(&$variables) {
   $variables['item'] = Link::fromTextAndUrl($link['title'], $url);
 }
 
+/**
+ * Implements hook_preprocess_HOOK() for menu-local-tasks.html.twig.
+ */
+function bootstrap_barrio_preprocess_menu_local_tasks(&$variables) {
+  switch (theme_get_setting('bootstrap_barrio_tabs_style')) {
+    case 'pills':
+      $variables['nav_style'] = 'nav-pills';
+      break;
+    default:
+      $variables['nav_style'] = 'nav-tabs';
+      break;
+  }
+}
+
 /**
  * Implements hook_theme_suggestions_HOOK_alter().
  */
@@ -445,7 +509,7 @@ function bootstrap_barrio_theme_suggestions_menu_alter(array &$suggestions, arra
   // Taken from http://kristiankaa.dk/article/drupal8-region-specific-menu-theme-hook-suggestion
   // bootstrap_barrio_preprocess_block(&$variables)
   if (isset($variables['attributes']['block'])) {
-    $hook = str_replace(array('block-', '-'), array('', '_'), $variables['attributes']['block']);
+    $hook = str_replace(['block-', '-'], ['', '_'], $variables['attributes']['block']);
     $suggestions[] = $variables['theme_hook_original'] . '__' . $hook;
   }
 }
@@ -552,8 +616,10 @@ function bootstrap_barrio_form_node_form_alter(&$form, FormStateInterface $form_
  */
 function bootstrap_barrio_theme_suggestions_links_alter(array &$suggestions, array $variables) {
   // ToDo get from core a variable to flag inline links.
-  if (in_array('inline', $variables['attributes']['class'])) {
-    $suggestions[] = 'links__inline';
+  if (isset($variables['attributes']['class'])) {
+    if (in_array('inline', $variables['attributes']['class'])) {
+      $suggestions[] = 'links__inline';
+    }
   }
 }
 
@@ -577,8 +643,10 @@ function bootstrap_barrio_theme_suggestions_status_messages_alter(array &$sugges
  */
 function bootstrap_barrio_preprocess_status_messages(&$variables) {
   $variables['title_ids'] = [];
-  foreach ($variables['message_list'] as $message_type => $messages) {
-    $variables['title_ids'][$message_type] = Html::getUniqueId("message-$message_type-title");
+  if (is_array($variables['message_list'])) {
+    foreach ($variables['message_list'] as $message_type => $messages) {
+      $variables['title_ids'][$message_type] = Html::getUniqueId("message-$message_type-title");
+    }
   }
 }
 

composer.json

@@ -2,7 +2,7 @@
   "name": "drupal/bootstrap_barrio",
   "description": "Bootstrap 4 base theme.",
   "type": "drupal-theme",
-  "license": "GPL-2.0",
+  "license": "GPL-2.0-or-later",
   "homepage": "https://www.drupal.org/project/bootstrap_barrio",
   "require": {
     "twbs/bootstrap": "^4.4.1"

config/schema/bootstrap_barrio.schema.yml

@@ -5,296 +5,257 @@ bootstrap_barrio.settings:
   label: 'Bootstrap Barrio settings'
   mapping:
 
-# Library.
-# ----------------------------
-bootstrap_barrio_library:
-  type: text
-  label: 'Load library'
+    # Library.
+    # ----------------------------
+    bootstrap_barrio_library:
+      type: string
+      label: 'Load library'
+    bootstrap_barrio_source:
+      type: string
+      label: 'Load library'
 
-# Container.
-# ----------------------------
-bootstrap_barrio_fluid_container:
-  type: integer
-  label: 'Fluid container'
+    # Container.
+    # ----------------------------
+    bootstrap_barrio_fluid_container:
+      type: integer
+      label: 'Fluid container'
 
-# Region.
-# ----------------------------
-bootstrap_barrio_region_clean_top_header:
-  type: text
-  label: 'Clean wrapper for Top header region'
-bootstrap_barrio_region_class_top_header:
-  type: text
-  label: 'Classes for Top header region'
-bootstrap_barrio_region_clean_top_header_form:
-  type: text
-  label: 'Clean wrapper for Top header form region'
-bootstrap_barrio_region_class_top_header_form:
-  type: text
-  label: 'Classes for Top header form region'
-bootstrap_barrio_region_clean_header:
-  type: text
-  label: 'Clean wrapper for Header region'
-bootstrap_barrio_region_class_header:
-  type: text
-  label: 'Classes for Header region'
-bootstrap_barrio_region_clean_header_form:
-  type: text
-  label: 'Clean wrapper for Header form region'
-bootstrap_barrio_region_class_header_form:
-  type: text
-  label: 'Classes for Header form region'
-bootstrap_barrio_region_clean_primary_menu:
-  type: text
-  label: 'Clean wrapper for Primary menu region'
-bootstrap_barrio_region_class_primary_menu:
-  type: text
-  label: 'Classes for Primary menu region'
-bootstrap_barrio_region_clean_secondary_menu:
-  type: text
-  label: 'Clean wrapper for Secondary menu region'
-bootstrap_barrio_region_class_secondary_menu:
-  type: text
-  label: 'Classes for Secondary menu region'
-bootstrap_barrio_region_clean_page_top:
-  type: text
-  label: 'Clean wrapper for Page top region'
-bootstrap_barrio_region_class_page_top:
-  type: text
-  label: 'Classes for Page top region'
-bootstrap_barrio_region_clean_page_bottom:
-  type: text
-  label: 'Clean wrapper for Page bottom region'
-bootstrap_barrio_region_class_page_bottom:
-  type: text
-  label: 'Classes for Page bottom region'
-bootstrap_barrio_region_clean_highlighted:
-  type: text
-  label: 'Clean wrapper for Highlighted region'
-bootstrap_barrio_region_class_highlighted:
-  type: text
-  label: 'Classes for Highlighted region'
-bootstrap_barrio_region_clean_featured_top:
-  type: text
-  label: 'Clean wrapper for Featured top region'
-bootstrap_barrio_region_class_featured_top:
-  type: text
-  label: 'Classes for Featured top region'
-bootstrap_barrio_region_clean_breadcrumb:
-  type: text
-  label: 'Clean wrapper for Breadcrumb region'
-bootstrap_barrio_region_class_breadcrumb:
-  type: text
-  label: 'Classes for Breadcrumb region'
-bootstrap_barrio_region_clean_content:
-  type: text
-  label: 'Clean wrapper for Content region'
-bootstrap_barrio_region_class_content:
-  type: text
-  label: 'Classes for Content region'
-bootstrap_barrio_region_clean_sidebar_first:
-  type: text
-  label: 'Clean wrapper for Sidebar first region'
-bootstrap_barrio_region_class_sidebar_first:
-  type: text
-  label: 'Classes for Sidebar first region'
-bootstrap_barrio_region_clean_sidebar_second:
-  type: text
-  label: 'Clean wrapper for Sidebar second region'
-bootstrap_barrio_region_class_sidebar_second:
-  type: text
-  label: 'Classes for Sidebar second region'
-bootstrap_barrio_region_clean_featured_bottom_first:
-  type: text
-  label: 'Clean wrapper for Featured bottom first region'
-bootstrap_barrio_region_class_featured_bottom_first:
-  type: text
-  label: 'Classes for Featured bottom first region'
-bootstrap_barrio_region_clean_featured_bottom_second:
-  type: text
-  label: 'Clean wrapper for Featured bottom second region'
-bootstrap_barrio_region_class_featured_bottom_second:
-  type: text
-  label: 'Classes for Featured bottom second region'
-bootstrap_barrio_region_clean_featured_bottom_third:
-  type: text
-  label: 'Clean wrapper for Featured bottom third region'
-bootstrap_barrio_region_class_featured_bottom_third:
-  type: text
-  label: 'Classes for Featured bottom third region'
-bootstrap_barrio_region_clean_footer_first:
-  type: text
-  label: 'Clean wrapper for Footer first region'
-bootstrap_barrio_region_class_footer_first:
-  type: text
-  label: 'Classes for Footer first region'
-bootstrap_barrio_region_clean_footer_second:
-  type: text
-  label: 'Clean wrapper for Footer second region'
-bootstrap_barrio_region_class_footer_second:
-  type: text
-  label: 'Classes for Footer second region'
-bootstrap_barrio_region_clean_footer_third:
-  type: text
-  label: 'Clean wrapper for Footer third region'
-bootstrap_barrio_region_class_footer_third:
-  type: text
-  label: 'Classes for Footer third region'
-bootstrap_barrio_region_clean_footer_fourth:
-  type: text
-  label: 'Clean wrapper for Footer fourth region'
-bootstrap_barrio_region_class_footer_fourth:
-  type: text
-  label: 'Classes for Footer fourth region'
-bootstrap_barrio_region_clean_footer_fifth:
-  type: text
-  label: 'Clean wrapper for Footer fifth region'
-bootstrap_barrio_region_class_footer_fifth:
-  type: text
-  label: 'Classes for Footer fifth region'
+    # Region.
+    # ----------------------------
+    bootstrap_barrio_region_clean_top_header:
+      type: string
+      label: 'Clean wrapper for Top header region'
+    bootstrap_barrio_region_clean_top_header_form:
+      type: string
+      label: 'Clean wrapper for Top header form region'
+    bootstrap_barrio_region_clean_header:
+      type: string
+      label: 'Clean wrapper for Header region'
+    bootstrap_barrio_region_class_header_form:
+      type: string
+      label: 'Classes for Header form region'
+    bootstrap_barrio_region_clean_primary_menu:
+      type: string
+      label: 'Clean wrapper for Primary menu region'
+    bootstrap_barrio_region_class_secondary_menu:
+      type: string
+      label: 'Classes for Secondary menu region'
+    bootstrap_barrio_region_clean_page_top:
+      type: string
+      label: 'Clean wrapper for Page top region'
+    bootstrap_barrio_region_class_page_bottom:
+      type: string
+      label: 'Classes for Page bottom region'
+    bootstrap_barrio_region_clean_highlighted:
+      type: string
+      label: 'Clean wrapper for Highlighted region'
+    bootstrap_barrio_region_class_featured_top:
+      type: string
+      label: 'Classes for Featured top region'
+    bootstrap_barrio_region_clean_breadcrumb:
+      type: string
+      label: 'Clean wrapper for Breadcrumb region'
+    bootstrap_barrio_region_class_content:
+      type: string
+      label: 'Classes for Content region'
+    bootstrap_barrio_region_clean_sidebar_first:
+      type: string
+      label: 'Clean wrapper for Sidebar first region'
+    bootstrap_barrio_region_class_sidebar_second:
+      type: string
+      label: 'Classes for Sidebar second region'
+    bootstrap_barrio_region_clean_featured_bottom_first:
+      type: string
+      label: 'Clean wrapper for Featured bottom first region'
+    bootstrap_barrio_region_class_featured_bottom_second:
+      type: string
+      label: 'Classes for Featured bottom second region'
+    bootstrap_barrio_region_clean_featured_bottom_third:
+      type: string
+      label: 'Clean wrapper for Featured bottom third region'
+    bootstrap_barrio_region_class_footer_first:
+      type: string
+      label: 'Classes for Footer first region'
+    bootstrap_barrio_region_clean_footer_second:
+      type: string
+      label: 'Clean wrapper for Footer second region'
+    bootstrap_barrio_region_class_footer_third:
+      type: string
+      label: 'Classes for Footer third region'
+    bootstrap_barrio_region_clean_footer_fourth:
+      type: string
+      label: 'Clean wrapper for Footer fourth region'
+    bootstrap_barrio_region_class_footer_fifth:
+      type: string
+      label: 'Classes for Footer fifth region'
 
-# Sidebar position.
-# ----------------------------
-bootstrap_barrio_sidebar_position:
-  type: text
-  label: 'Sidebar position'
-bootstrap_barrio_content_offset:
-  type: integer
-  label: 'Content offset'
+    # Sidebar position.
+    # ----------------------------
+    bootstrap_barrio_sidebar_position:
+      type: string
+      label: 'Sidebar position'
+    bootstrap_barrio_content_offset:
+      type: integer
+      label: 'Content offset'
 
-# Sidebar first layout.
-# ----------------------------
-bootstrap_barrio_sidebar_collapse:
-  type: integer
-  label: 'Sidebar collapse'
-bootstrap_barrio_sidebar_first_width:
-  type: integer
-  label: 'Sidebar first width'
-bootstrap_barrio_sidebar_first_offset:
-  type: integer
-  label: 'Sidebar first offset'
+    # Sidebar first layout.
+    # ----------------------------
+    bootstrap_barrio_sidebar_collapse:
+      type: integer
+      label: 'Sidebar collapse'
+    bootstrap_barrio_sidebar_first_width:
+      type: integer
+      label: 'Sidebar first width'
+    bootstrap_barrio_sidebar_first_offset:
+      type: integer
+      label: 'Sidebar first offset'
 
-# Sidebar second layout.
-# ----------------------------
-bootstrap_barrio_sidebar_second_width:
-  type: integer
-  label: 'Sidebar second width'
-bootstrap_barrio_sidebar_second_offset:
-  type: integer
-  label: 'Sidebar second layout'
+    # Sidebar second layout.
+    # ----------------------------
+    bootstrap_barrio_sidebar_second_width:
+      type: integer
+      label: 'Sidebar second width'
+    bootstrap_barrio_sidebar_second_offset:
+      type: integer
+      label: 'Sidebar second layout'
 
-# Buttons.
-# ----------------------------
-bootstrap_barrio_button:
-  type: integer
-  label: 'Convert input submit to button element'
-bootstrap_barrio_button_size:
-  type: text
-  label: 'Default button size'
-bootstrap_barrio_button_outline:
-  type: integer
-  label: 'Button with outline format'
+    # Buttons.
+    # ----------------------------
+    bootstrap_barrio_button:
+      type: integer
+      label: 'Convert input submit to button element'
+    bootstrap_barrio_button_size:
+      type: string
+      label: 'Default button size'
+    bootstrap_barrio_button_outline:
+      type: integer
+      label: 'Button with outline format'
 
-# Navbar.
-# ----------------------------
-bootstrap_barrio_navbar_container:
-  type: text
-  label: 'Navbar width container'
-bootstrap_barrio_navbar_toggle:
-  type: text
-  label: 'Navbar toggle size'
-bootstrap_barrio_navbar_top_navbar:
-  type: integer
-  label: 'Navbar top is navbar'
-bootstrap_barrio_navbar_top_position:
-  type: text
-  label: 'Navbar top position'
-bootstrap_barrio_navbar_top_color:
-  type: text
-  label: 'Navbar top link color'
-bootstrap_barrio_navbar_top_background:
-  type: text
-  label: 'Navbar top background color'
-bootstrap_barrio_navbar_position:
-  type: text
-  label: 'Navbar position'
-bootstrap_barrio_navbar_color:
-  type: text
-  label: 'Navbar link color'
-bootstrap_barrio_navbar_background:
-  type: text
-  label: 'Navbar background color'
+    # Navbar.
+    # ----------------------------
+    bootstrap_barrio_navbar_container:
+      type: string
+      label: 'Navbar width container'
+    bootstrap_barrio_navbar_toggle:
+      type: string
+      label: 'Navbar toggle size'
+    bootstrap_barrio_navbar_top_navbar:
+      type: integer
+      label: 'Navbar top is navbar'
+    bootstrap_barrio_navbar_top_class:
+      type: string
+      label: 'Class for navbar top'
+    bootstrap_barrio_navbar_class:
+      type: string
+      label: 'Class for navbar'
+    bootstrap_barrio_navbar_top_position:
+      type: string
+      label: 'Navbar top position'
+    bootstrap_barrio_navbar_top_color:
+      type: string
+      label: 'Navbar top link color'
+    bootstrap_barrio_navbar_top_background:
+      type: string
+      label: 'Navbar top background color'
+    bootstrap_barrio_navbar_position:
+      type: string
+      label: 'Navbar position'
+    bootstrap_barrio_navbar_color:
+      type: string
+      label: 'Navbar link color'
+    bootstrap_barrio_navbar_background:
+      type: string
+      label: 'Navbar background color'
+    bootstrap_barrio_navbar_flyout:
+      type: boolean
+      label: 'Flyout style main menu'
+    bootstrap_barrio_navbar_slide:
+      type: boolean
+      label: 'Sliding navbar'
 
-# Messages.
-# ----------------------------
-bootstrap_barrio_messages_widget:
-  type: text
-  label: 'Messages widget'
+    # Messages.
+    # ----------------------------
+    bootstrap_barrio_messages_widget:
+      type: string
+      label: 'Messages widget'
 
-# Form.
-# ----------------------------
-bootstrap_barrio_radio:
-  type: text
-  label: 'Radio widget'
-bootstrap_barrio_checkbox:
-  type: text
-  label: 'Checkbox widget'
-bootstrap_barrio_select:
-  type: text
-  label: 'Select widget'
-bootstrap_barrio_file:
-  type: text
-  label: 'File widget'
+    # Form.
+    # ----------------------------
+    bootstrap_barrio_radio:
+      type: string
+      label: 'Radio widget'
+    bootstrap_barrio_checkbox:
+      type: string
+      label: 'Checkbox widget'
+    bootstrap_barrio_select:
+      type: string
+      label: 'Select widget'
+    bootstrap_barrio_file:
+      type: string
+      label: 'File widget'
 
-# Affix.
-# ----------------------------
-bootstrap_barrio_navbar_top_affix:
-  type: integer
-  label: 'Affix navbar top'
-bootstrap_barrio_navbar_affix:
-  type: integer
-  label: 'Affix navbar'
-bootstrap_barrio_sidebar_first_affix:
-  type: integer
-  label: 'Affix sidebar first'
-bootstrap_barrio_sidebar_second_affix:
-  type: integer
-  label: 'Affix sidebar first'
+    # Affix.
+    # ----------------------------
+    bootstrap_barrio_navbar_top_affix:
+      type: integer
+      label: 'Affix navbar top'
+    bootstrap_barrio_navbar_affix:
+      type: integer
+      label: 'Affix navbar'
+    bootstrap_barrio_sidebar_first_affix:
+      type: integer
+      label: 'Affix sidebar first'
+    bootstrap_barrio_sidebar_second_affix:
+      type: integer
+      label: 'Affix sidebar first'
 
-# Scrollspy.
-# ----------------------------
-bootstrap_barrio_scroll_spy:
-  type: text
-  label: 'Scrollspy element ID'
+    # Scrollspy.
+    # ----------------------------
+    bootstrap_barrio_scroll_spy:
+      type: string
+      label: 'Scrollspy element ID'
 
-# Fonts.
-# ----------------------------
-bootstrap_barrio_google_fonts:
-  type: text
-  label: 'Google Fonts combination'
+    # Fonts.
+    # ----------------------------
+    bootstrap_barrio_google_fonts:
+      type: string
+      label: 'Google Fonts combination'
 
-# Icons.
-# ----------------------------
-bootstrap_barrio_bootstrap_icons:
-  type: integer
-  label: 'Use Bootstrap icons'
-bootstrap_barrio_icons:
-  type: text
-  label: 'Icon set'
+    # Icons.
+    # ----------------------------
+    bootstrap_barrio_bootstrap_icons:
+      type: integer
+      label: 'Use Bootstrap icons'
+    bootstrap_barrio_icons:
+      type: string
+      label: 'Icon set'
 
-# System messages.
-# ----------------------------
-bootstrap_barrio_system_messages:
-  type: text
-  label: 'System messages color scheme'
+    # System messages.
+    # ----------------------------
+    bootstrap_barrio_system_messages:
+      type: string
+      label: 'System messages color scheme'
 
-# Tables.
-# ----------------------------
-bootstrap_barrio_table_style:
-  type: text
-  label: 'Table cell style'
-bootstrap_barrio_table_hover:
-  type: integer
-  label: 'Hover effect over table cells'
-bootstrap_barrio_table_head:
-  type: text
-  label: 'Table header color scheme'
+    # Tables.
+    # ----------------------------
+    bootstrap_barrio_table_style:
+      type: string
+      label: 'Table cell style'
+    bootstrap_barrio_table_hover:
+      type: integer
+      label: 'Hover effect over table cells'
+    bootstrap_barrio_table_head:
+      type: string
+      label: 'Table header color scheme'
+
+    # Image fluid.
+    # ----------------------------
+    bootstrap_barrio_image_fluid:
+      type: boolean
+      label: 'Apply img-fluid style to all content images'
+
+    # Tabs.
+    # ----------------------------
+    bootstrap_barrio_tabs_style:
+      type: string
+      label: 'Tabs style'

css/components/bootstrap-icons.css

@@ -173,14 +173,14 @@ a.nav-link--user-password::before {
 }
 
 
-ol.breadcrumb a:first-child::before {
+ol.breadcrumb li:first-child a::before {
   display: inline-block;
   content: "";
   background-image: url('data:image/svg+xml,<svg class="bi bi-house" width="1em" height="1em" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 00.5.5h9a.5.5 0 00.5-.5V7h1v6.5a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 13.5zm11-11V6l-2-2V2.5a.5.5 0 01.5-.5h1a.5.5 0 01.5.5z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M7.293 1.5a1 1 0 011.414 0l6.647 6.646a.5.5 0 01-.708.708L8 2.207 1.354 8.854a.5.5 0 11-.708-.708L7.293 1.5z" clip-rule="evenodd"/></svg>');
   background-repeat: no-repeat;
   -webkit-background-size: 1rem 1rem;
   background-size: 1rem 1rem;
-  background-position: 0 0.25rem;
+  background-position: 0 0.15rem;
   width: 1.5rem;
-  height: 1.2rem;
+  height: 1.1rem;
 }

css/components/form.css

@@ -19,7 +19,7 @@
 .form-row>div {
   padding-right: 5px;
   padding-left: 5px;
-  flex: 0 0 auto;
+  flex: 0 1 auto;
   width: auto;
   max-width: none;
 }

css/components/forum.css

+/**
+ * @file
+ * Styling for the Forum module.
+ */
+
+.forum__description {
+  margin: 0.5em;
+  font-size: 0.9em;
+}
+.forum__icon {
+  float: left; /* LTR */
+  width: 24px;
+  height: 24px;
+  margin: 0 9px 0 0; /* LTR */
+  background-image: url(../../images/icons/forum-icons.png);
+  background-repeat: no-repeat;
+}
+[dir="rtl"] .forum__icon {
+  float: right;
+  margin: 0 0 0 9px;
+}
+.forum__title {
+  overflow: hidden;
+}
+.forum .indented {
+  margin-left: 20px; /* LTR */
+}
+[dir="rtl"] .forum .indented {
+  margin-right: 20px;
+  margin-left: 0;
+}
+.forum__topic-status--new {
+  background-position: -24px 0;
+}
+.forum__topic-status--hot {
+  background-position: -48px 0;
+}
+.forum__topic-status--hot-new {
+  background-position: -72px 0;
+}
+.forum__topic-status--sticky {
+  background-position: -96px 0;
+}
+.forum__topic-status--closed {
+  background-position: -120px 0;
+}
\ No newline at end of file

css/components/icons.css

@@ -24,3 +24,8 @@
   direction: ltr;
   height: 16px;
 }
+
+/* Menu toggler fall back icon */
+.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}

css/components/image-widget.css

+.image-preview {
+  float: left; /* LTR */
+  padding: 0 10px 10px 0; /* LTR */
+}
+[dir="rtl"] .image-preview {
+  float: right;
+  padding: 0 0 10px 10px;
+}
+.image-widget-data {
+  float: left; /* LTR */
+}
+[dir="rtl"] .image-widget-data {
+  float: right;
+}
+.image-widget-data .text-field {
+  width: auto;
+}

css/components/img-fluid.css

+.content img {
+  max-width: 100%;
+  height: auto;
+}
\ No newline at end of file

css/components/media.css

+/**
+ * @file
+ * Media related  specific CSS.
+ */
+
+/* Media Image */
+.field--name-field-media-image img {
+  max-width: 100%;
+  height: auto;
+}
+
+
+/* Node Dialog Add/Select Overlay */
+
+/* Two Column Layout */
+.media-library-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+
+
+/* Left Menu Layout */
+.media-library-menu {
+  margin: 5px 5px 5px 0;
+  padding: 20px 15px;
+  border: 1px solid #dddddd;
+  border-radius: 3px;
+  background: #e9e9e9;
+  height: 100%;
+}
+
+.media-library-menu li {
+  margin: 5px;
+  white-space: nowrap;
+  height: 45px;
+}
+
+.media-library-menu li::marker {
+  color: #e9e9e9;
+}
+
+.media-library-menu__link {
+  margin: 5px 5px 5px 0;
+  padding: 10px 15px;
+  border: 1px solid #dddddd;
+  border-radius: 3px;
+  background: #e9e9e9;
+}
+
+.active.media-library-menu__link {
+  background: #fff;
+}
+
+
+
+/* Form Eliments Layout  */
+.media-library-content {
+  flex: 2;
+}
+
+.media-library-wrapper .form--inline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+}
+
+.media-library-widget-modal .js-form-item {
+  margin: 5px;
+}
+
+.media-library-wrapper .form-type-textfield {
+  flex: 2;
+}
+
+
+
+/* Fix Form Insert Button to Bottom of Popup */
+.media-library-widget-modal .form-actions {
+  position: sticky;
+  bottom: 0;
+  background: #fff;
+  padding: 5px;
+}
+
+.media-library-widget-modal .ui-dialog-content {
+  padding-bottom: 0;
+}
+
+/* Grid Layout */
+.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.media-library-widget-modal.ui-dialog--narrow {
+  width: 80% !important;
+  left: 10% !important;
+}
+
+.media-library-views-form__rows {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.media-library-item--grid {
+  margin: 10px;
+  width: 220px;
+}
+
+.media-library-item--grid .js-form-type-checkbox, .media-library-item--grid .form-check-label {
+  padding-left: 0;
+}
+
+
+/* Add or Select Media */
+.media-library-add-form__media::marker {
+  color: #fff;
+}

css/components/navigation.css

+/**
+ * @file
+ * Enables Bootstrap 4 multi-level flyout
+ */
+
+/* Only for mobile */
+@media (max-width: 767px) {
+
+  nav.menu--main {
+    margin-left: 16px;
+    width: 100%;
+    padding-bottom: 12px;
+  }
+
+  /* Enables first level dropdown from main nav links */
+  a.nav-link .dropdown>.dropdown-menu.show {
+      display: block;
+      border: 0;
+      margin-top: 5px !important;
+  }
+
+  ul.dropdown-menu {
+    border: 0;
+  }
+
+  .dropdown-menu .menu-item--expanded>a:after {
+    visibility: hidden;
+  }
+
+  ul.dropdown-menu.show li.menu-item--expanded>ul.dropdown-menu {
+    display: block;
+    border: 0;
+  }
+
+}
+
+/* Only for non-mobile */
+@media (min-width: 768px) {
+
+  /* Enables first level dropdown from main nav links */
+  .dropdown:hover>.dropdown-menu {
+    display: block;
+  }
+
+}
+
+/* Force manu items with no link to still use pointer */
+span.nav-link {
+  cursor: pointer;
+}
+
+.dropdown-menu .menu-item--expanded:hover>a:after {
+  visibility: hidden;
+}
+
+.dropdown-menu .menu-item--expanded:hover {
+  border-right: 1px solid #fff;
+}
+
+/* Enables next level dropdowns to go horizontal */
+.dropdown-menu .menu-item--expanded>.dropdown-menu {
+  top: 0px;
+  left: 100%;
+  margin-top: -1px;
+  margin-left: 0px;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+
+/* Creates right arrow which vanishes on rollover/expansion */
+.dropdown-menu .menu-item--expanded>a:after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #ccc;
+  margin-top: 7px;
+  margin-right: -5px;
+}
+
+.dropdown-item {
+  padding: 5px 15px;
+}
+/* Remove margin and padding around each flyout's containing UL, so that there is no "gap" where hover does not function, and flyouts vanish as you roll over the gap */
+ul.dropdown-menu {
+  padding: 0;
+  margin: 0;
+}
+
+/* Make sure links in the active trail reverse out to white so that they do not diappear when the LIs highlight */
+.dropdown-menu li.active>a {
+  color: #fff;
+}

css/components/slide-nav.css

+@media (max-width: 767px) {
+  .navbar-collapse {
+    border-top: 0;
+  }
+  .navbar-collapse .navbar-nav {
+    margin-right: 0;
+    margin-left: 0;
+  }
+  .navbar-collapse [class*="container"] {
+    background-color: inherit;
+    border-color: inherit;
+  }
+  .navbar-collapse .navigation {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1030;
+    width: 240px;
+    height: 100%;
+    margin: 0;
+    overflow: auto;
+    background-color: white;
+    border-right: 1px solid;
+    border-right-color: inherit;
+    padding-left: 0.25rem;
+  }
+  .bg-dark .navbar-collapse .navigation {
+    background-color: #17141f !important;
+  }
+  .navbar-collapse .navigation .navbar-nav .dropdown-menu li a {
+    width: 100%;
+    white-space: normal;
+  }
+  .navbar-collapse .navbar-form {
+    width: 100%;
+    margin: 8px 0;
+    overflow: hidden;
+    text-align: center;
+  }
+}
+@media (min-width: 768px) {
+  .navigation {
+    display: block;
+    width: auto !important;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
+
+.navbar-dark .navbar-toggler-icon {
+  opacity: 0.6;
+  background-size: 60%;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
+}
+
+.navbar-dark .collapsed .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.navbar-light .navbar-toggler-icon {
+  opacity: 0.6;
+  background-size: 60%;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
+}
+
+.navbar-light .collapsed .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.4%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}

css/components/tabledrag.css

@@ -12,3 +12,7 @@ tr.drag-previous {
 body div.tabledrag-changed-warning {
   margin-bottom: 0.5em;
 }
+a.tabledrag-handle .handle {
+  width: 25px;
+  height: 25px;
+}
\ No newline at end of file

css/components/tabs-full.css

+/**
+ * @file
+ * Theme styling for tabs.
+ */
+
+nav.tabs {
+  margin-bottom: 1rem;
+}
+
+nav.tabs ul {
+  background: #e9ecef;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; 
+}
+nav.tabs ul .nav-item {
+  flex-grow: 1; 
+}
+nav.tabs ul .nav-item a {
+  color: #303030;
+  text-align: center;
+}
+nav.tabs ul .nav-item.active a {
+  background: #303030;
+  color: #e9ecef;
+}

css/components/tabs.css

@@ -4,5 +4,5 @@
  */
 
 nav.tabs {
-  margin-bottom: 20px;
+  margin-bottom: 1rem;
 }

css/components/toolbar.css

+body.toolbar-horizontal #navbar-top.fixed-top,
+body.toolbar-vertical #navbar-top.fixed-top,
+body.toolbar-vertical.toolbar-tray-open #navbar-top.fixed-top,
+body.toolbar-horizontal #navbar-main.fixed-top,
+body.toolbar-vertical #navbar-main.fixed-top,
+body.toolbar-vertical.toolbar-tray-open #navbar-main.fixed-top {
+  top: 40px;
+}
+body.toolbar-horizontal.toolbar-tray-open #navbar-top.fixed-top,
+body.toolbar-horizontal.toolbar-tray-open #navbar-main.fixed-top {
+  top: 80px;
+}
+body.toolbar-fixed .toolbar-oriented .toolbar-bar {
+  z-index: 1040;
+}

css/components/user.css

@@ -74,3 +74,24 @@
   margin: 0 auto;
   border-radius: 5px;
 }
+
+/* User account page */
+body.path-user .field--label-inline .field__label {
+  width: 100px;
+}
+
+body.path-user .field--label-inline .field__item {
+  padding: 0.25rem 1rem;
+  border-radius: 1rem;
+  background: #e9ecef;
+  min-width: 250px;
+  margin: 0.25rem 0;
+}
+
+body.path-user .field--label-above .field__item {
+  padding: 0.25rem 1rem;
+  border-radius: 1rem;
+  background: #e9ecef;
+  width: 100%;
+  margin: 0.25rem 0;
+}
\ No newline at end of file