bootstrap_barrio.libraries.yml

@@ -123,6 +123,11 @@ tabs:
     component:
       css/components/tabs.css: {}
 
+toast:
+  version: VERSION
+  js:
+    js/toast.js: {}
+
 verticaltabs:
   version: VERSION
   css:

bootstrap_barrio.theme

@@ -16,7 +16,7 @@ use Drupal\Core\Form\FormStateInterface;
  * Adds body classes if certain regions have content.
  */
 function bootstrap_barrio_preprocess_html(&$variables) {
-  if (!array_key_exists('class', $variables['attributes']) || !is_array($variables['attributes']['class'])) {
+  if (!isset($variables['attributes']['class'])) {
     $variables['attributes']['class'] = [];
   }
 

composer.json

 {
     "name": "drupal/bootstrap_barrio",
-    "description": "Bootstrap 4 base theme. Flex based and compatible with jQuery 3+.",
+    "description": "Bootstrap 4 base theme.",
     "type": "drupal-theme",
     "license": "GPL-2.0",
     "homepage": "https://www.drupal.org/project/bootstrap_barrio",

config/schema/bootstrap_barrio.schema.yml

@@ -3,3 +3,61 @@
 bootstrap_barrio.settings:
   type: theme_settings
   label: 'Bootstrap Barrio settings'
+  mapping:
+    bootstrap_barrio_library:
+      type: integer
+      label: 'Library'
+    bootstrap_barrio_sidebar_position:
+      type: text
+      label: 'Sidebar Position'
+    bootstrap_barrio_content_offset:
+      type: integer
+      label: 'Offset'
+    bootstrap_barrio_sidebar_first_width:
+      type: integer
+      label: 'Width'
+    bootstrap_barrio_sidebar_first_offset:
+      type: integer
+      label: 'Offset'
+    bootstrap_barrio_sidebar_second_width:
+      type: integer
+      label: 'Width'
+    bootstrap_barrio_sidebar_second_offset:
+      type: integer
+      label: 'Offset'
+    bootstrap_barrio_footer_layout:
+      type: text
+      label: 'Layout'
+    bootstrap_barrio_fluid_container:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_button_size:
+      type: text
+      label: 'Size'
+    bootstrap_barrio_button_outline:
+      type: integer
+      label: 'Button outline'
+    bootstrap_barrio_navbar_top_position:
+      type: text
+      label: 'Position'
+    bootstrap_barrio_navbar_top_color:
+      type: integer
+      label: 'Color'
+    bootstrap_barrio_navbar_top_background:
+      type: text
+      label: 'Background'
+    bootstrap_barrio_navbar_position:
+      type: text
+      label: 'Position'
+    bootstrap_barrio_navbar_color:
+      type: integer
+      label: 'Color'
+    bootstrap_barrio_navbar_background:
+      type: text
+      label: 'Background'
+    bootstrap_barrio_navbar_toggle:
+      type: integer
+      label: 'Enable'
+    bootstrap_barrio_navbar_container:
+      type: text
+      label: 'Container'
\ No newline at end of file

css/components/progress.css

+/**
+ * Visual styles for progress bar.
+ */
+
+.progress__track {
+    border-color: #b3b3b3;
+    border-radius: 10em;
+    background-color: #f2f1eb;
+    background-image: -webkit-linear-gradient(#e7e7df, #f0f0f0);
+    background-image: linear-gradient(#e7e7df, #f0f0f0);
+    box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.16);
+}
+.progress__bar {
+    border: 1px #07629a solid;
+    background: #057ec9;
+    background-image:
+            -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)),
+            -webkit-linear-gradient(left top, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%);
+    background-image:
+            linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)),
+            linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%);
+    background-size: 40px 40px;
+    margin-top: -1px;
+    margin-left: -1px; /* LTR */
+    padding: 0 1px;
+    height: 16px;
+    border-radius: 10em;
+    -webkit-animation: animate-stripes 3s linear infinite;
+    -moz-animation: animate-stripes 3s linear infinite;
+    -webkit-transition: width 0.5s ease-out;
+    transition: width 0.5s ease-out;
+}
+[dir="rtl"] .progress__bar {
+    margin-left: 0;
+    margin-right: -1px;
+    animation-direction: reverse;
+    -webkit-animation-direction: reverse;
+    -moz-animation-direction: reverse;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    .progress__bar {
+        -webkit-animation: none;
+        -moz-animation: none;
+        -webkit-transition: none;
+        transition: none;
+    }
+}
+
+/**
+ * Progress bar animations.
+ */
+@-webkit-keyframes animate-stripes {
+    0% { background-position: 0 0, 0 0; }
+    100% { background-position: 0 0, -80px 0; }
+}
+
+@-ms-keyframes animate-stripes {
+    0% { background-position: 0 0, 0 0; }
+    100% { background-position: 0 0, -80px 0; }
+}
+
+@keyframes animate-stripes {
+    0% { background-position: 0 0, 0 0; }
+    100% { background-position: 0 0, -80px 0; }
+}

js/global.js

@@ -51,9 +51,6 @@
         // init
         toggleAffix(ele, $(window), wrapper);
       });
-
-      $('.toast').toast('show');
-      
     }
   };
 

js/toast.js

+/**
+ * @file
+ * Toast utilities.
+ *
+ */
+(function ($, Drupal) {
+
+  'use strict';
+
+  Drupal.behaviors.bootstrap_barrio_toast = {
+    attach: function (context, settings) {
+      $('.toast').toast('show');
+    }
+  };
+
+})(jQuery, Drupal);

scripts/create_subtheme.sh

+#!/bin/bash
+# Script to quickly create sub-theme.
+
+echo '
++------------------------------------------------------------------------+
+| With this script you could quickly create barrio sub-theme             |
+| In order to use this:                                                  |
+| - bootstrap_barrio theme (this folder) should be in the contrib folder |
++------------------------------------------------------------------------+
+'
+echo 'The machine name of your custom theme? [e.g. mycustom_barrio]'
+read CUSTOM_BARRIO
+
+echo 'Your theme name ? [e.g. My custom barrio]'
+read CUSTOM_BARRIO_NAME
+
+if [[ ! -e ../../custom ]]; then
+    mkdir ../../custom
+fi
+cd ../../custom
+cp -r ../contrib/bootstrap_barrio/subtheme $CUSTOM_BARRIO
+cd $CUSTOM_BARRIO
+for file in *bootstrap_barrio_subtheme.*; do mv $file ${file//bootstrap_barrio_subtheme/$CUSTOM_BARRIO}; done
+for file in config/*/*bootstrap_barrio_subtheme.*; do mv $file ${file//bootstrap_barrio_subtheme/$CUSTOM_BARRIO}; done
+mv {_,}$CUSTOM_BARRIO.theme
+grep -Rl bootstrap_barrio_subtheme .|xargs sed -i '' -e "s/bootstrap_barrio_subtheme/$CUSTOM_BARRIO/"
+sed -i '' -e "s/Bootstrap Barrio Subtheme/$CUSTOM_BARRIO_NAME/" $CUSTOM_BARRIO.info.yml
+echo "# Check the themes/custom folder for your new sub-theme."

subtheme/config/schema/bootstrap_barrio_subtheme.schema.yml

@@ -3,3 +3,142 @@
 bootstrap_barrio_subtheme.settings:
   type: theme_settings
   label: 'Bootstrap Barrio Subtheme settings'
+  mapping:
+    bootstrap_barrio_sidebar_position:
+      type: text
+      label: 'Sidebar Position'
+    bootstrap_barrio_content_offset:
+      type: integer
+      label: 'Offset'
+    bootstrap_barrio_sidebar_first_width:
+      type: integer
+      label: 'Width'
+    bootstrap_barrio_sidebar_first_offset:
+      type: integer
+      label: 'Offset'
+    bootstrap_barrio_sidebar_second_width:
+      type: integer
+      label: 'Width'
+    bootstrap_barrio_sidebar_second_offset:
+      type: integer
+      label: 'Offset'
+    bootstrap_barrio_footer_layout:
+      type: text
+      label: 'Layout'
+    bootstrap_barrio_fluid_container:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_button_size:
+      type: text
+      label: 'Size'
+    bootstrap_barrio_button_outline:
+      type: integer
+      label: 'Button outline'
+    bootstrap_barrio_navbar_top_position:
+      type: text
+      label: 'Position'
+    bootstrap_barrio_navbar_top_color:
+      type: integer
+      label: 'Color'
+    bootstrap_barrio_navbar_top_background:
+      type: text
+      label: 'Background'
+    bootstrap_barrio_navbar_position:
+      type: text
+      label: 'Position'
+    bootstrap_barrio_navbar_color:
+      type: integer
+      label: 'Color'
+    bootstrap_barrio_navbar_background:
+      type: text
+      label: 'Background'
+    bootstrap_barrio_anchors_fix:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_anchors_smooth_scrolling:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_forms_required_has_error:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_forms_has_error_value_toggle:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_forms_smart_descriptions:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_forms_smart_descriptions_limit:
+      type: integer
+      label: 'Limit'
+    bootstrap_barrio_forms_smart_descriptions_allowed_tags:
+      type: text
+      label: 'Allowed tags'
+    bootstrap_barrio_popover_enabled:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_popover_animation:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_popover_html:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_popover_placement:
+      type: text
+      label: 'Placement'
+    bootstrap_barrio_popover_selector:
+      type: text
+      label: 'Selector'
+    bootstrap_barrio_popover_trigger_autoclose:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_popover_delay:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_popover_trigger:
+      type: mapping
+      mapping:
+        hover:
+          type: integer
+          label: 'Hover'
+    bootstrap_barrio_tooltip_enabled:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_tooltip_descriptions:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_tooltip_descriptions_length:
+      type: integer
+      label: 'Length'
+    bootstrap_barrio_tooltip_animation:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_tooltip_html:
+      type: integer
+      label: 'Length'
+    bootstrap_barrio_tooltip_delay:
+      type: integer
+      label: 'Enabled'
+    bootstrap_barrio_popover_title:
+      type: text
+      label: 'Title'
+    bootstrap_barrio_popover_content:
+      type: text
+      label: 'Content'
+    bootstrap_barrio_tooltip_placement:
+      type: text
+      label: 'Placement'
+    bootstrap_barrio_tooltip_container:
+      type: text
+      label: 'Container'
+    bootstrap_barrio_tooltip_selector:
+      type: text
+      label: 'Selector'
+    bootstrap_barrio_tooltip_trigger:
+      type: mapping
+      mapping:
+        hover:
+          type: text
+          label: 'Hover'
+    bootstrap_barrio_popover_container:
+      type: text
+      label: 'Container'
\ No newline at end of file

templates/form/form-element.html.twig

@@ -105,13 +105,13 @@
     {% endif %}
     {% if label_display == 'before' %}
       <label {{ attributes.addClass(labelclass).setAttribute('for', input_attributes.id) }}>
-        {{ input_title }}
+        {{ input_title | raw }}
       </label>
     {% endif %}
     <input{{ input_attributes.addClass(inputclass) }}>
     {% if label_display == 'after' %}
       <label {{ attributes.addClass(labelclass).setAttribute('for', input_attributes.id) }}>
-        {{ input_title }}
+        {{ input_title | raw }}
       </label>
     {% endif %}
     {% if suffix is not empty %}

templates/misc/status-messages--toasts.html.twig

@@ -25,6 +25,7 @@
  * @ingroup themeable
  */
 #}
+{{ attach_library('bootstrap_barrio/toast') }}
 
 <div class="toast-wrapper">
 

templates/navigation/menu--account.html.twig

@@ -36,7 +36,7 @@
           set classes = [
            'nav-link',
             item.in_active_trail ? 'active',
-            item.url.getOption('attributes').class ? item.url.getOption('attributes').class,
+            item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '),
           ]
         %}
         {{ link(item.title, item.url, {'class': classes}) }}

templates/navigation/menu--footer.html.twig

@@ -48,7 +48,7 @@
           set link_classes = [
             'nav-link',
             item.in_active_trail ? 'active',
-            item.url.getOption('attributes').class ? item.url.getOption('attributes').class,
+            item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '),
           ]
         %}
         {{ link(item.title, item.url, {'class': link_classes}) }}

templates/navigation/menu--main.html.twig

@@ -50,7 +50,7 @@
             not menu_level ? 'nav-link',
             item.in_active_trail ? 'active',
             item.below ? 'dropdown-toggle',
-            item.url.getOption('attributes').class ? item.url.getOption('attributes').class,
+            item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '),
           ]
         %}
         {% if item.below %}

templates/navigation/menu-local-task.html.twig

@@ -20,7 +20,7 @@
   set classes = [
     'nav-link',
     is_active ? 'active',
-    item.url.getOption('attributes').class ? item.url.getOption('attributes').class,
+    item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '),
   ]
 %}
 <li{{ attributes.addClass(is_active ? 'active', 'nav-item') }}>{{ link(item.text, item.url, {'class': classes}) }}</li>