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:
@@ -63,12 +65,23 @@ book-navigation:
     component:
       css/components/book-navigation.css: {}
 
+bootstrap-icons:
+  version: VERSION
+  css:
+    component:
+      css/components/bootstrap-icons.css: {}
+
 breadcrumb:
   version: VERSION
   css:
     component:
       css/components/breadcrumb.css: {}
 
+comments:
+  css:
+    component:
+      css/components/comments.css: {}
+
 dropbutton:
   version: VERSION
   css:
@@ -88,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:
@@ -103,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 }
@@ -123,6 +170,12 @@ tabs:
     component:
       css/components/tabs.css: {}
 
+tabs_full:
+  version: VERSION
+  css:
+    component:
+      css/components/tabs-full.css: {}
+
 toast:
   version: VERSION
   js:
@@ -140,6 +193,13 @@ commerce:
     component:
       css/components/commerce.css: {}
 
+# Core
+
+drupal.node.preview:
+  css:
+    component:
+      css/components/node-preview.css: {}
+
 # Fonts
 
 roboto:
@@ -243,6 +303,18 @@ monserrat_lato:
 
 # Colors
 
+messages_white:
+  version: VERSION
+  css:
+    component:
+      css/colors/messages/messages-white.css: {}
+
+messages_gray:
+  version: VERSION
+  css:
+    component:
+      css/colors/messages/messages-gray.css: {}
+
 messages_light:
   version: VERSION
   css:
@@ -288,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

@@ -11,6 +11,7 @@ use Drupal\Component\Utility\Html;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Component\Utility\Xss;
 use Drupal\node\Entity\Node;
+use Drupal\Component\Render\MarkupInterface;
 
 /**
  * Implements hook_preprocess_HOOK() for HTML document templates.
@@ -63,8 +64,10 @@ function bootstrap_barrio_preprocess_html(&$variables) {
     $path_args[0] == 'taxonomy' && $path_args[1] == 'term') {
     $variables['attributes']['class'][] = 'page-taxonomy-term-' . $path_args[2];
     $term = \Drupal::entityTypeManager()->getStorage('taxonomy_term')->load($path_args[2]);
-    $vocabulary_id = $term->bundle();
-    $variables['attributes']['class'][] = 'page-vocabulary-' . Html::cleanCssIdentifier($vocabulary_id);
+    if (!empty($term)) {
+      $vocabulary_id = $term->bundle();
+      $variables['attributes']['class'][] = 'page-vocabulary-' . Html::cleanCssIdentifier($vocabulary_id);
+    }
   }
   $view_id = \Drupal::routeMatch()->getParameter('view_id');
   if ($view_id) {
@@ -85,7 +88,7 @@ function bootstrap_barrio_preprocess_html(&$variables) {
 }
 
 /**
- * Implements hook_page_attachments_alter()
+ * Implements hook_page_attachments_alter() for page templates.
  */
 function bootstrap_barrio_page_attachments_alter(&$page) {
   $viewport = [
@@ -109,20 +112,55 @@ function bootstrap_barrio_preprocess_page(&$variables) {
       case 'cdn':
         $variables['#attached']['library'][] = 'bootstrap_library/bootstrap-cdn';
         break;
+
       case 'production':
         $variables['#attached']['library'][] = 'bootstrap_library/bootstrap';
         break;
+
       case 'development':
         $variables['#attached']['library'][] = 'bootstrap_library/bootstrap-dev';
         break;
+
     }
   }
+  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) {
     $variables['#attached']['library'][] = 'bootstrap_barrio/' . $fonts;
   }
 
+  $icons = theme_get_setting('bootstrap_barrio_bootstrap_icons');
+  if ($icons) {
+    $variables['#attached']['library'][] = 'bootstrap_barrio/bootstrap-icons';
+  }
+
   $icons = theme_get_setting('bootstrap_barrio_icons');
   if ($icons) {
     $variables['#attached']['library'][] = 'bootstrap_barrio/' . $icons;
@@ -139,28 +177,28 @@ function bootstrap_barrio_preprocess_page(&$variables) {
 
   // Define default classes for containers.
   $variables['navbar_top_attributes'] = [
-    'class' => [ 'navbar' ],
-	  'id' => ['navbar-top' ],
+    'class' => ['navbar'],
+    'id' => ['navbar-top'],
   ];
   $variables['navbar_attributes'] = [
-    'class' => [ 'navbar' ],
-	  'id' => [ 'navbar-main' ],
+    'class' => ['navbar'],
+    'id' => ['navbar-main'],
   ];
   $variables['content_attributes'] = [
-    'class' => [ 'main-content', $content_width ],
-	  'id' => [ 'content' ],
-	  'role' => [ 'main' ],
+    'class' => ['main-content', $content_width],
+    'id' => ['content'],
+    'role' => ['main'],
   ];
   $variables['sidebar_first_attributes'] = [
-    'class' =>  [ 'sidebar_first sidebar', $sidebar_first_width ],
-	  'id' => [ 'sidebar_first' ],
+    'class' => ['sidebar_first', 'sidebar', $sidebar_first_width],
+    'id' => ['sidebar_first'],
   ];
   $variables['sidebar_second_attributes'] = [
-    'class' => [ 'sidebar_second sidebar', $sidebar_second_width ],
-	  'id' => [ 'sidebar_second' ],
+    'class' => ['sidebar_second', 'sidebar', $sidebar_second_width],
+    'id' => ['sidebar_second'],
   ];
 
-  // Get custom Navbar classes from config and add them to Navbars
+  // Get custom Navbar classes from config and add them to Navbars.
   if (theme_get_setting('bootstrap_barrio_navbar_top_class') !== NULL) {
     $variables['navbar_top_attributes']['class'][] = theme_get_setting('bootstrap_barrio_navbar_top_class');
   }
@@ -202,18 +240,20 @@ function bootstrap_barrio_preprocess_page(&$variables) {
 
   // Define column layout classes.
   switch (theme_get_setting('bootstrap_barrio_sidebar_position')) {
-	case 'left':
-    $variables['sidebar_first_attributes']['class'][] = 'order-first';
-    $variables['content_attributes']['class'][] = 'order-last';
-	  break;
-	case 'both':
-    $variables['sidebar_first_attributes']['class'][] = 'order-first';
-    $variables['sidebar_second_attributes']['class'][] = 'order-last';
-	  break;
-	case 'right':
-    $variables['content_attributes']['class'][] = 'order-first';
-    $variables['sidebar_second_attributes']['class'][] = 'order-last';
-	  break;
+    case 'left':
+      $variables['sidebar_first_attributes']['class'][] = 'order-first';
+      $variables['content_attributes']['class'][] = 'order-last';
+      break;
+
+    case 'both':
+      $variables['sidebar_first_attributes']['class'][] = 'order-first';
+      $variables['sidebar_second_attributes']['class'][] = 'order-last';
+      break;
+
+    case 'right':
+      $variables['content_attributes']['class'][] = 'order-first';
+      $variables['sidebar_second_attributes']['class'][] = 'order-last';
+      break;
   }
 
   // Define navigation position.
@@ -230,26 +270,38 @@ 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;
+
     case 'navbar-toggleable-md':
       $variables['navbar_attributes']['class'][] = 'navbar-expand-md';
       break;
+
     case 'navbar-toggleable-sm':
       $variables['navbar_attributes']['class'][] = 'navbar-expand-sm';
       break;
+
     case 'navbar-toggleable-xs':
       $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;
   }
 
   if (theme_get_setting('bootstrap_barrio_sidebar_collapse')) {
-	  $variables['content_attributes']['class'][] = 'sidebar-offcanvas';
-	  $variables['sidebar_collapse'] = TRUE;
+    $variables['content_attributes']['class'][] = 'sidebar-offcanvas';
+    $variables['sidebar_collapse'] = TRUE;
     $variables['#attached']['library'][] = 'bootstrap_barrio/sidebar_collapse';
   }
 
@@ -341,6 +393,10 @@ function bootstrap_barrio_preprocess_region(&$variables) {
  * Implements hook_preprocess_HOOK() for block.html.twig.
  */
 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.
   if ($variables['plugin_id'] == 'system_branding_block') {
     $variables['attributes']['class'][] = 'clearfix';
@@ -352,10 +408,10 @@ function bootstrap_barrio_preprocess_block(&$variables) {
  */
 function bootstrap_barrio_preprocess_form_element(&$variables) {
   if (isset($variables['label']['#title'])) {
-    if (is_object($variables['label']['#title']) && !$variables['label']['#title'] instanceof \Drupal\Component\Render\MarkupInterface) {
+    if (is_object($variables['label']['#title']) && !$variables['label']['#title'] instanceof MarkupInterface) {
       $variables['input_title'] = NULL;
     }
-    elseif (is_object($variables['label']['#title']) ) {
+    elseif (is_object($variables['label']['#title'])) {
       $variables['input_title'] = $variables['label']['#title'];
     }
     else {
@@ -365,30 +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;
-    case 'radio':
-      $variables['customtype'] = theme_get_setting('bootstrap_barrio_radio');
-      break;
-    default:
-      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;
+
+      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'];
 }
 
 /**
@@ -405,6 +477,9 @@ function bootstrap_barrio_preprocess_menu(&$variables) {
   $variables['attributes']['class'][] = 'clearfix';
 }
 
+/**
+ * Implements hook_preprocess_HOOK() for menu-local-task.html.twig.
+ */
 function bootstrap_barrio_preprocess_menu_local_task(&$variables) {
   $link = $variables['element']['#link'];
   $url = $link['url'];
@@ -414,9 +489,34 @@ function bootstrap_barrio_preprocess_menu_local_task(&$variables) {
 }
 
 /**
- * Implements hook_preprocess_HOOK() for menu-local-action.html.twig.
+ * 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().
+ */
+function bootstrap_barrio_theme_suggestions_menu_alter(array &$suggestions, array $variables) {
+  // 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(['block-', '-'], ['', '_'], $variables['attributes']['block']);
+    $suggestions[] = $variables['theme_hook_original'] . '__' . $hook;
+  }
+}
 
+/**
+ * Implements hook_preprocess_HOOK() for menu-local-action.html.twig.
+ */
 function bootstrap_barrio_preprocess_menu_local_action(&$variables) {
   $link = $variables['element']['#link'];
   $link += [
@@ -464,13 +564,13 @@ function bootstrap_barrio_theme_suggestions_region_alter(array &$suggestions, ar
     'sidebar_first',
     'sidebar_second',
   ];
-  if ( theme_get_setting('bootstrap_barrio_region_clean_' . $variables['elements']['#region']) !== NULL) {
+  if (theme_get_setting('bootstrap_barrio_region_clean_' . $variables['elements']['#region']) !== NULL) {
     $region_clean = theme_get_setting('bootstrap_barrio_region_clean_' . $variables['elements']['#region']);
   }
   else {
     $region_clean = in_array($variables['elements']['#region'], $nowrap);
   }
-  if ( $region_clean ) {
+  if ($region_clean) {
     $suggestions[] = 'region__nowrap';
   }
 }
@@ -490,9 +590,9 @@ function bootstrap_barrio_theme_suggestions_user_alter(array &$suggestions, arra
 }
 
 /**
- * Implements HOOK_theme_suggestions_HOOK_alter().
+ * Implements hook_theme_suggestions_HOOK_alter() for page template.
  */
-function radix_theme_suggestions_page_alter(array &$suggestions, array $variables) {
+function bootstrap_barrio_theme_suggestions_page_alter(array &$suggestions, array $variables) {
   // Add a template suggestions for node type.
   /** @var \Drupal\node\NodeInterface $node */
   if ($node = \Drupal::routeMatch()->getParameter('node')) {
@@ -516,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';
+    }
   }
 }
 
@@ -529,6 +631,7 @@ function bootstrap_barrio_theme_suggestions_status_messages_alter(array &$sugges
     case 'toasts':
       $suggestions[] = 'status_messages__toasts';
       break;
+
     case 'alerts':
       $suggestions[] = 'status_messages__alerts';
       break;
@@ -540,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");
+    }
   }
 }
 
@@ -568,39 +673,50 @@ function bootstrap_barrio_theme_suggestions_input_alter(array &$suggestions, arr
 
 /**
  * Implements hook_form_alter() to add classes to the search form.
- *
- *function bootstrap_barrio_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
+ */
+/*
+ * function bootstrap_barrio_form_alter(
+ * &$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  *  if (in_array($form_id, ['search_block_form', 'search_form'])) {
  *    $key = ($form_id == 'search_block_form') ? 'actions' : 'basic';
  *    if (!isset($form[$key]['submit']['#attributes'])) {
  *      $form[$key]['submit']['#attributes'] = new Attribute();
  *    }
- *    $outline = theme_get_setting('bootstrap_barrio_button_outline') ? 'btn-outline-primary' : 'btn-primary';
+ *    $outline = theme_get_setting('bootstrap_barrio_button_outline') ?
+ *    'btn-outline-primary' : 'btn-primary';
  * If use the $outline variable, HTML crashes. Even if use the value directly
- *    $form[$key]['submit']['#attributes']->addClass(['btn', 'btn-primary', 'btn-sm']);
+ *    $form[$key]['submit']['#attributes']->addClass(
+ *    ['btn', 'btn-primary', 'btn-sm']);
  *  }
- *}
+ * }
  */
 
 /**
- * Implements hook_preprocess_input() to add classes to inputs.
+ * Implements hook_preprocess_input() for adding classes to inputs.
  */
 function bootstrap_barrio_preprocess_input(&$variables) {
   if (isset($variables['attributes']['class'])) {
     if (is_object($variables['attributes']['class'])) {
-      if (in_array( 'error', $variables['attributes']['class']->value())) {
+      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'])) {
+      if (in_array('error', $variables['attributes']['class'])) {
         $variables['attributes']['class'][] = 'is-invalid';
       }
     }
   }
   if ($variables['element']['#type'] == 'submit') {
     $button_size = theme_get_setting('bootstrap_barrio_button_size');
-    $button_types = ['btn-primary', 'btn-secondary', 'btn-success', 'btn-warning', 'btn-danger', 'btn-link'];
+    $button_types = [
+      'btn-primary',
+      'btn-secondary',
+      'btn-success',
+      'btn-warning',
+      'btn-danger',
+      'btn-link',
+    ];
     $button_sizes = ['btn-sm', 'btn-lg'];
     $button_is_outline = theme_get_setting('bootstrap_barrio_button_outline');
     if (is_object($variables['attributes']['class'])) {

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/install/bootstrap_barrio.settings.yml

@@ -44,9 +44,13 @@ bootstrap_barrio_file: 'custom'
 
 # Colors.
 # ----------------------------
-bootstrap_barrio_system_messages: 'messages_light'
+bootstrap_barrio_system_messages: 'messages_white'
 
 # Tables.
 # ----------------------------
 bootstrap_barrio_table_hover: 1
-bootstrap_barrio_table_style: 'table-striped'
\ No newline at end of file
+bootstrap_barrio_table_style: 'table-striped'
+
+# Icons.
+# ----------------------------
+bootstrap_barrio_bootstrap_icons: 1

config/schema/bootstrap_barrio.schema.yml

@@ -5,293 +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_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'
\ No newline at end of file
+    # 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/colors/messages/messages-dark.css

@@ -6,18 +6,54 @@
 .alert-success {
   color: white;
   background-color: #007e33;
-  border-color: #00c851;
+  border-color: #012911;
 }
+.alert-success::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-check-box" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 003 14.5h10a1.5 1.5 0 001.5-1.5V8a.5.5 0 00-1 0v5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5h8a.5.5 0 000-1H3A1.5 1.5 0 001.5 3v10z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+  background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
 .alert-warning {
   color: white;
   background-color: #ff8800;
-  border-color: #ffbb33;
+  border-color: #e07903;
+}
+.alert-warning::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-info-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z" clip-rule="evenodd"/><path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/><circle cx="8" cy="4.5" r="1"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+  background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
 }
+
 .alert-danger {
   color: white;
   background-color: #cc0000;
-  border-color: #ff4444;
+  border-color: #7a0c0c;
+}
+.alert-danger::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-exclamation-triangle" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.938 2.016a.146.146 0 00-.054.057L1.027 13.74a.176.176 0 00-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 00.066-.017.163.163 0 00.055-.06.176.176 0 00-.003-.183L8.12 2.073a.146.146 0 00-.054-.057A.13.13 0 008.002 2a.13.13 0 00-.064.016zm1.044-.45a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z" clip-rule="evenodd"/><path d="M7.002 12a1 1 0 112 0 1 1 0 01-2 0zM7.1 5.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995z"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+  background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
 }
+
 .alert-dismissible .close {
   opacity: 0.6;
 }

css/colors/messages/messages-gray.css

+/**
+ * @file
+ * Visual styles for Bootstrap Barrio's system messages.
+ */
+
+.alert-success {
+  color: white;
+  background-color: #333;
+  border-left: #28a745 15px solid;
+}
+.alert-success::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-check-box" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 003 14.5h10a1.5 1.5 0 001.5-1.5V8a.5.5 0 00-1 0v5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5h8a.5.5 0 000-1H3A1.5 1.5 0 001.5 3v10z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+          background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-warning {
+  color: white;
+  background-color: #333;
+  border-left: #ff8800 15px solid;
+}
+.alert-warning::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-info-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z" clip-rule="evenodd"/><path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/><circle cx="8" cy="4.5" r="1"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+          background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-danger {
+  color: white;
+  background-color: #333;
+  border-left: #cc0000 15px solid;
+}
+.alert-danger::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-exclamation-triangle" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.938 2.016a.146.146 0 00-.054.057L1.027 13.74a.176.176 0 00-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 00.066-.017.163.163 0 00.055-.06.176.176 0 00-.003-.183L8.12 2.073a.146.146 0 00-.054-.057A.13.13 0 008.002 2a.13.13 0 00-.064.016zm1.044-.45a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z" clip-rule="evenodd"/><path d="M7.002 12a1 1 0 112 0 1 1 0 01-2 0zM7.1 5.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995z"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+          background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-dismissible .close {
+  opacity: 0.6;
+}

css/colors/messages/messages-light.css

@@ -8,11 +8,45 @@
   background-color: #00c851;
   border-color: #007e33;
 }
+.alert-success::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-check-box" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 003 14.5h10a1.5 1.5 0 001.5-1.5V8a.5.5 0 00-1 0v5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5h8a.5.5 0 000-1H3A1.5 1.5 0 001.5 3v10z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+  background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
 .alert-warning {
   color: white;
   background-color: #ffbb33;
   border-color: #ff8800;
 }
+.alert-warning::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-info-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z" clip-rule="evenodd"/><path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/><circle cx="8" cy="4.5" r="1"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+  background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-danger::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-exclamation-triangle" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.938 2.016a.146.146 0 00-.054.057L1.027 13.74a.176.176 0 00-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 00.066-.017.163.163 0 00.055-.06.176.176 0 00-.003-.183L8.12 2.073a.146.146 0 00-.054-.057A.13.13 0 008.002 2a.13.13 0 00-.064.016zm1.044-.45a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z" clip-rule="evenodd"/><path d="M7.002 12a1 1 0 112 0 1 1 0 01-2 0zM7.1 5.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995z"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+  background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
 .alert-danger {
   color: white;
   background-color: #ff4444;

css/colors/messages/messages-white.css

+/**
+ * @file
+ * Visual styles for Bootstrap Barrio's system messages.
+ */
+
+.alert-success {
+  color: #333;
+  background-color: white;
+  border-left: #28a745 15px solid;
+}
+.alert-success::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-check-box" width="1em" height="1em" viewBox="0 0 16 16" fill="green" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 003 14.5h10a1.5 1.5 0 001.5-1.5V8a.5.5 0 00-1 0v5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5h8a.5.5 0 000-1H3A1.5 1.5 0 001.5 3v10z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+          background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-warning {
+  color: #333;
+  background-color: white;
+  border-left: #ff8800 15px solid;
+}
+.alert-warning::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-info-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="orange" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z" clip-rule="evenodd"/><path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/><circle cx="8" cy="4.5" r="1"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+          background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-danger {
+  color: #333;
+  background-color: white;
+  border-left: #cc0000 15px solid;
+}
+.alert-danger::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-exclamation-triangle" width="1em" height="1em" viewBox="0 0 16 16" fill="red" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.938 2.016a.146.146 0 00-.054.057L1.027 13.74a.176.176 0 00-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 00.066-.017.163.163 0 00.055-.06.176.176 0 00-.003-.183L8.12 2.073a.146.146 0 00-.054-.057A.13.13 0 008.002 2a.13.13 0 00-.064.016zm1.044-.45a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z" clip-rule="evenodd"/><path d="M7.002 12a1 1 0 112 0 1 1 0 01-2 0zM7.1 5.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995z"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+          background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-dismissible .close {
+  opacity: 0.6;
+}

css/components/alerts.css

@@ -7,15 +7,53 @@
   position: fixed;
   bottom: 0;
   left: 0;
-  max-width: 100%;
+  width: 100%;
   max-height: 75vh;
-  overflow: scroll;
   z-index: 9999;
 }
 
+.alert-wrapper .alert {
+  overflow-y: auto;
+  margin-bottom: 0;
+}
+
 .toast-wrapper {
   position: fixed;
   top: 0;
   right: 0;
   z-index: 9999;
 }
+
+.alert-success::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-check-box" width="1em" height="1em" viewBox="0 0 16 16" fill="darkgreen" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 003 14.5h10a1.5 1.5 0 001.5-1.5V8a.5.5 0 00-1 0v5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5h8a.5.5 0 000-1H3A1.5 1.5 0 001.5 3v10z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+  background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-warning::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-info-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="brown" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z" clip-rule="evenodd"/><path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/><circle cx="8" cy="4.5" r="1"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+  background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-danger::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-exclamation-triangle" width="1em" height="1em" viewBox="0 0 16 16" fill="darkred" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.938 2.016a.146.146 0 00-.054.057L1.027 13.74a.176.176 0 00-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 00.066-.017.163.163 0 00.055-.06.176.176 0 00-.003-.183L8.12 2.073a.146.146 0 00-.054-.057A.13.13 0 008.002 2a.13.13 0 00-.064.016zm1.044-.45a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z" clip-rule="evenodd"/><path d="M7.002 12a1 1 0 112 0 1 1 0 01-2 0zM7.1 5.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995z"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+  background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}

css/components/bootstrap-icons.css

+.user-pass .form-item-name label::before,
+.user-register-form .form-item-name label::before,
+.user-login-form .form-item-name label::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-person" width="1em" height="1em" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+  background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.user-pass .form-type-password label::before,
+.user-register-form .form-type-password label::before,
+.user-login-form .form-type-password label::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-lock" width="1em" height="1em" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.5 8h-7a1 1 0 00-1 1v5a1 1 0 001 1h7a1 1 0 001-1V9a1 1 0 00-1-1zm-7-1a2 2 0 00-2 2v5a2 2 0 002 2h7a2 2 0 002-2V9a2 2 0 00-2-2h-7zm0-3a3.5 3.5 0 117 0v3h-1V4a2.5 2.5 0 00-5 0v3h-1V4z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+  background-size: 1.5rem 1.5rem;
+  background-position: 0 0.25rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.user-pass .form-type-email label::before,
+.user-register-form .form-type-email label::before,
+.user-login-form .form-type-email label::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-envelope" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14 3H2a1 1 0 00-1 1v8a1 1 0 001 1h12a1 1 0 001-1V4a1 1 0 00-1-1zM2 2a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2H2z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M.071 4.243a.5.5 0 01.686-.172L8 8.417l7.243-4.346a.5.5 0 01.514.858L8 9.583.243 4.93a.5.5 0 01-.172-.686z" clip-rule="evenodd"/><path d="M6.752 8.932l.432-.252-.504-.864-.432.252.504.864zm-6 3.5l6-3.5-.504-.864-6 3.5.504.864zm8.496-3.5l-.432-.252.504-.864.432.252-.504.864zm6 3.5l-6-3.5.504-.864 6 3.5-.504.864z"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+  background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.user-pass .form-item-user-picture-0 label::before,
+.user-register-form .form-item-user-picture-0 label::before,
+.user-login-form .form-item-user-picture-0 label::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-person-square" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14 1H2a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V2a1 1 0 00-1-1zM2 0a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2H2z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M2 15v-1c0-1 1-4 6-4s6 3 6 4v1H2zm6-6a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+  background-size: 1.5rem 1.5rem;
+  background-position: 0 0.25rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.form-submit::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-check" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M13.854 3.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3.5-3.5a.5.5 0 11.708-.708L6.5 10.293l6.646-6.647a.5.5 0 01.708 0z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1rem 1rem;
+  background-size: 1rem 1rem;
+  background-position: 0 0.25rem;
+  width: 1.5rem;
+  height: 1.2rem;
+}
+
+.search-form .form-submit::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1rem 1rem;
+  background-size: 1rem 1rem;
+  background-position: 0 0.25rem;
+  width: 1.5rem;
+  height: 1.2rem;
+}
+
+a.nav-link--::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" fill="white" 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;
+  width: 1.5rem;
+  height: 1.2rem;
+}
+
+a.nav-link--user-login::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-unlock" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.655 8H2.333c-.264 0-.398.068-.471.121a.73.73 0 00-.224.296 1.626 1.626 0 00-.138.59V14c0 .342.076.531.14.635.064.106.151.18.256.237a1.122 1.122 0 00.436.127l.013.001h7.322c.264 0 .398-.068.471-.121a.73.73 0 00.224-.296 1.627 1.627 0 00.138-.59V9c0-.342-.076-.531-.14-.635a.658.658 0 00-.255-.237A1.122 1.122 0 009.655 8zm.012-1H2.333C.5 7 .5 9 .5 9v5c0 2 1.833 2 1.833 2h7.334c1.833 0 1.833-2 1.833-2V9c0-2-1.833-2-1.833-2zM8.5 4a3.5 3.5 0 117 0v3h-1V4a2.5 2.5 0 00-5 0v3h-1V4z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1rem 1rem;
+  background-size: 1rem 1rem;
+  background-position: 0 0.20rem;
+  width: 1.5rem;
+  height: 1.2rem;
+}
+
+a.nav-link--user-logout::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-lock" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.5 8h-7a1 1 0 00-1 1v5a1 1 0 001 1h7a1 1 0 001-1V9a1 1 0 00-1-1zm-7-1a2 2 0 00-2 2v5a2 2 0 002 2h7a2 2 0 002-2V9a2 2 0 00-2-2h-7zm0-3a3.5 3.5 0 117 0v3h-1V4a2.5 2.5 0 00-5 0v3h-1V4z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1rem 1rem;
+  background-size: 1rem 1rem;
+  background-position: 0 0.20rem;
+  width: 1.5rem;
+  height: 1.2rem;
+}
+
+a.nav-link--user::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-person-check" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM1.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM6 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0zm6.854.146a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-1.5-1.5a.5.5 0 01.708-.708L12.5 7.793l2.646-2.647a.5.5 0 01.708 0z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1rem 1rem;
+  background-size: 1rem 1rem;
+  background-position: 0 0.25rem;
+  width: 1.5rem;
+  height: 1.2rem;
+}
+
+a.nav-link--contact::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-envelope" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14 3H2a1 1 0 00-1 1v8a1 1 0 001 1h12a1 1 0 001-1V4a1 1 0 00-1-1zM2 2a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2H2z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M.071 4.243a.5.5 0 01.686-.172L8 8.417l7.243-4.346a.5.5 0 01.514.858L8 9.583.243 4.93a.5.5 0 01-.172-.686z" clip-rule="evenodd"/><path d="M6.752 8.932l.432-.252-.504-.864-.432.252.504.864zm-6 3.5l6-3.5-.504-.864-6 3.5.504.864zm8.496-3.5l-.432-.252.504-.864.432.252-.504.864zm6 3.5l-6-3.5.504-.864 6 3.5-.504.864z"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1rem 1rem;
+  background-size: 1rem 1rem;
+  background-position: 0 0.25rem;
+  width: 1.5rem;
+  height: 1.2rem;
+}
+
+a.nav-link--user-register::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-person-plus" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM1.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM6 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0zm4.5 0a.5.5 0 01.5.5v2a.5.5 0 01-.5.5h-2a.5.5 0 010-1H13V5.5a.5.5 0 01.5-.5z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M13 7.5a.5.5 0 01.5-.5h2a.5.5 0 010 1H14v1.5a.5.5 0 01-1 0v-2z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1rem 1rem;
+  background-size: 1rem 1rem;
+  background-position: 0 0.25rem;
+  width: 1.5rem;
+  height: 1.2rem;
+}
+
+a.nav-link--user-password::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-lock" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.5 8h-7a1 1 0 00-1 1v5a1 1 0 001 1h7a1 1 0 001-1V9a1 1 0 00-1-1zm-7-1a2 2 0 00-2 2v5a2 2 0 002 2h7a2 2 0 002-2V9a2 2 0 00-2-2h-7zm0-3a3.5 3.5 0 117 0v3h-1V4a2.5 2.5 0 00-5 0v3h-1V4z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1rem 1rem;
+  background-size: 1rem 1rem;
+  background-position: 0 0.20rem;
+  width: 1.5rem;
+  height: 1.2rem;
+}
+
+.tabs a.nav-link--user-login::before {
+  background-image: url('data:image/svg+xml,<svg class="bi bi-unlock" width="1em" height="1em" viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.655 8H2.333c-.264 0-.398.068-.471.121a.73.73 0 00-.224.296 1.626 1.626 0 00-.138.59V14c0 .342.076.531.14.635.064.106.151.18.256.237a1.122 1.122 0 00.436.127l.013.001h7.322c.264 0 .398-.068.471-.121a.73.73 0 00.224-.296 1.627 1.627 0 00.138-.59V9c0-.342-.076-.531-.14-.635a.658.658 0 00-.255-.237A1.122 1.122 0 009.655 8zm.012-1H2.333C.5 7 .5 9 .5 9v5c0 2 1.833 2 1.833 2h7.334c1.833 0 1.833-2 1.833-2V9c0-2-1.833-2-1.833-2zM8.5 4a3.5 3.5 0 117 0v3h-1V4a2.5 2.5 0 00-5 0v3h-1V4z" clip-rule="evenodd"/></svg>');
+}
+.tabs a.nav-link--user-register::before {
+  background-image: url('data:image/svg+xml,<svg class="bi bi-person-plus" width="1em" height="1em" viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM1.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM6 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0zm4.5 0a.5.5 0 01.5.5v2a.5.5 0 01-.5.5h-2a.5.5 0 010-1H13V5.5a.5.5 0 01.5-.5z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M13 7.5a.5.5 0 01.5-.5h2a.5.5 0 010 1H14v1.5a.5.5 0 01-1 0v-2z" clip-rule="evenodd"/></svg>');
+}
+.tabs a.nav-link--user-password::before {
+  background-image: url('data:image/svg+xml,<svg class="bi bi-lock" width="1em" height="1em" viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.5 8h-7a1 1 0 00-1 1v5a1 1 0 001 1h7a1 1 0 001-1V9a1 1 0 00-1-1zm-7-1a2 2 0 00-2 2v5a2 2 0 002 2h7a2 2 0 002-2V9a2 2 0 00-2-2h-7zm0-3a3.5 3.5 0 117 0v3h-1V4a2.5 2.5 0 00-5 0v3h-1V4z" clip-rule="evenodd"/></svg>');
+}
+
+
+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.15rem;
+  width: 1.5rem;
+  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;
+}