bootstrap_barrio.breakpoints.yml

 bootstrap_barrio.small:
   label: small
-  mediaQuery: 'all and (min-width: 34em) and (max-width: 47em)'
+  mediaQuery: 'all and (min-width: 34em) and (max-width: 47.99em)'
   weight: 0
   multipliers:
     - 1x
 bootstrap_barrio.medium:
   label: medium
-  mediaQuery: 'all and (min-width: 48em) and (max-width: 61em)'
+  mediaQuery: 'all and (min-width: 48em) and (max-width: 61.99em)'
   weight: 1
   multipliers:
     - 1x
 bootstrap_barrio.large:
   label: large
-  mediaQuery: 'all and (min-width: 62em) and (max-width: 74em)'
+  mediaQuery: 'all and (min-width: 62em) and (max-width: 74.99em)'
   weight: 2
   multipliers:
     - 1x

bootstrap_barrio.info.yml

 name: Bootstrap Barrio
 type: theme
 description: 'A flexible Booststrap based theme, with many regions and a responsive, mobile-first layout.'
-# version: VERSION
-core: 8.x
+core_version_requirement: ^10.3 || ^11
 base theme: false
 
 libraries:
@@ -13,17 +12,21 @@ libraries-extend:
     - bootstrap_barrio/dropbutton
   file/drupal.file:
     - bootstrap_barrio/file
+  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/base/elements.css
-  - css/components/captions.css
   - css/components/table.css
 
 regions:
-  top_header: 'Top Header'
-  top_header_form: "Top Header Form"
+  top_header: 'Top header'
+  top_header_form: 'Top header form'
   header: Header
-  header_form: "Header Form"
+  header_form: 'Header form'
   primary_menu: 'Primary menu'
   secondary_menu: 'Secondary menu'
   page_top: 'Page top'

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/book.css: {}
-      css/components/comments.css: {}
       css/components/contextual.css: {}
       # @see https://www.drupal.org/node/2389735
       css/components/feed-icon.css: {}
@@ -18,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: {}
@@ -31,15 +30,18 @@ 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: {}
       css/components/views.css: {}
       css/components/ui-dialog.css: {}
+      css/components/progress.css: { weight: -10 }
     theme:
       css/print.css: { media: print }
   dependencies:
     - core/jquery
+    - core/once
     - core/drupal
 
 affix:
@@ -49,19 +51,37 @@ affix:
   css:
     component:
       css/components/affix.css: {}
-
+  dependencies:
+    - core/jquery
+    - core/once
+alerts:
+  version: VERSION
+  css:
+    component:
+      css/components/alerts.css: {}
 book-navigation:
   version: VERSION
   css:
     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:
@@ -81,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:
@@ -96,19 +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 }
 
-search-results:
+slide_nav:
   version: VERSION
   css:
-    component:
-      css/components/search-results.css: {}
+    theme:
+      css/components/slide-nav.css: {}
 
-sidebar-collapse:
+sidebar_collapse:
   version: VERSION
   js:
     js/sidebar-collapse.js: { external: true }
@@ -122,12 +170,36 @@ tabs:
     component:
       css/components/tabs.css: {}
 
+tabs_full:
+  version: VERSION
+  css:
+    component:
+      css/components/tabs-full.css: {}
+
+toast:
+  version: VERSION
+  js:
+    js/toast.js: {}
+
 verticaltabs:
   version: VERSION
   css:
     component:
       css/components/vertical-tabs.css: {}
 
+commerce:
+  version: VERSION
+  css:
+    component:
+      css/components/commerce.css: {}
+
+# Core
+
+drupal.node.preview:
+  css:
+    component:
+      css/components/node-preview.css: {}
+
 # Fonts
 
 roboto:
@@ -231,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:
@@ -253,8 +337,9 @@ material_design_icons:
 
 fontawesome:
   version: VERSION
-  js:
-    //use.fontawesome.com/releases/v5.0.13/js/all.js: { external: true }
+  css:
+    component:
+      //use.fontawesome.com/releases/v5.13.0/css/all.css: {}
 
 # Material Design for Bootstrap
 
@@ -270,6 +355,151 @@ mdb:
       //mdbootstrap.com/mdbcdn/mdb.min.css: {}
   dependencies:
     - core/jquery
-  dependencies:
     - bootstrap_barrio/material_design_icons
 
+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

composer.json

+{
+  "name": "drupal/bootstrap_barrio",
+  "description": "Bootstrap 4 base theme.",
+  "type": "drupal-theme",
+  "license": "GPL-2.0-or-later",
+  "homepage": "https://www.drupal.org/project/bootstrap_barrio",
+  "require": {
+    "twbs/bootstrap": "^4.4.1"
+  },
+  "authors": [{
+    "name": "Alberto Siles",
+    "email": "alberto@siles.pe"
+  }]
+}
\ No newline at end of file

config/install/bootstrap_barrio.settings.yml

-# Library
-# --------------
+# Library.
+# ----------------------------
 bootstrap_barrio_library: 'production'
-# Layout
-# --------------
+# Layout.
+# ----------------------------
 bootstrap_barrio_sidebar_position: 'both'
 bootstrap_barrio_content_offset: 0
 bootstrap_barrio_sidebar_first_width: 4
@@ -10,22 +10,47 @@ bootstrap_barrio_sidebar_first_offset: 0
 bootstrap_barrio_sidebar_second_width: 3
 bootstrap_barrio_sidebar_second_offset: 0
 
-# Container
-# --------------
+# Container.
+# ----------------------------
 bootstrap_barrio_fluid_container: 0
 
-# Buttons
-# --------------
+# Buttons.
+# ----------------------------
+bootstrap_barrio_button: 1
 bootstrap_barrio_button_size: ''
 bootstrap_barrio_button_outline: 0
 
-# Navbar
-# --------------
-bootstrap_barrio_navbar_toggle: 1
+# Navbar.
+# ----------------------------
+bootstrap_barrio_navbar_toggle: 'navbar-toggleable-lg'
 bootstrap_barrio_navbar_container: 'navbar-toggleable-md'
 bootstrap_barrio_navbar_top_position: ''
 bootstrap_barrio_navbar_top_color: 'navbar-dark'
-bootstrap_barrio_navbar_top_background: 'bg-dark'
+bootstrap_barrio_navbar_top_background: 'bg-secondary'
 bootstrap_barrio_navbar_position: ''
 bootstrap_barrio_navbar_color: 'navbar-dark'
 bootstrap_barrio_navbar_background: 'bg-primary'
+
+# Messages.
+# ----------------------------
+bootstrap_barrio_messages_widget: 'toasts'
+
+# Form.
+# ----------------------------
+bootstrap_barrio_radio: 'custom'
+bootstrap_barrio_checkbox: 'switch'
+bootstrap_barrio_select: 'custom'
+bootstrap_barrio_file: 'custom'
+
+# Colors.
+# ----------------------------
+bootstrap_barrio_system_messages: 'messages_white'
+
+# Tables.
+# ----------------------------
+bootstrap_barrio_table_hover: 1
+bootstrap_barrio_table_style: 'table-striped'
+
+# Icons.
+# ----------------------------
+bootstrap_barrio_bootstrap_icons: 1

config/schema/bootstrap_barrio.schema.yml

-# Schema for the configuration files of the Bootstrap Barrio theme.
+# Schema for the configuration files of the Bootstrap Barrio Subtheme.
 
 bootstrap_barrio.settings:
   type: theme_settings
   label: 'Bootstrap Barrio settings'
+  mapping:
+
+    # 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'
+
+    # 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: 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 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: string
+      label: 'Default button size'
+    bootstrap_barrio_button_outline:
+      type: integer
+      label: 'Button with outline format'
+
+    # 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: string
+      label: 'Messages 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'
+
+    # Scrollspy.
+    # ----------------------------
+    bootstrap_barrio_scroll_spy:
+      type: string
+      label: 'Scrollspy element ID'
+
+    # Fonts.
+    # ----------------------------
+    bootstrap_barrio_google_fonts:
+      type: string
+      label: 'Google Fonts combination'
+
+    # Icons.
+    # ----------------------------
+    bootstrap_barrio_bootstrap_icons:
+      type: integer
+      label: 'Use Bootstrap icons'
+    bootstrap_barrio_icons:
+      type: string
+      label: 'Icon set'
+
+    # System messages.
+    # ----------------------------
+    bootstrap_barrio_system_messages:
+      type: string
+      label: 'System messages color scheme'
+
+    # Tables.
+    # ----------------------------
+    bootstrap_barrio_table_style:
+      type: string
+      label: 'Table cell style'
+    bootstrap_barrio_table_hover:
+      type: integer
+      label: 'Hover effect over table cells'
+    bootstrap_barrio_table_head:
+      type: string
+      label: 'Table header color scheme'
+
+    # Image fluid.
+    # ----------------------------
+    bootstrap_barrio_image_fluid:
+      type: boolean
+      label: 'Apply img-fluid style to all content images'
+
+    # Tabs.
+    # ----------------------------
+    bootstrap_barrio_tabs_style:
+      type: string
+      label: 'Tabs style'

css/colors/messages/messages-dark.css

@@ -5,19 +5,55 @@
 
 .alert-success {
   color: white;
-  background-color: #007E33;
-  border-color: #00C851;
+  background-color: #007e33;
+  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;
+  background-color: #ff8800;
+  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;
+  background-color: #cc0000;
+  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

@@ -5,18 +5,52 @@
 
 .alert-success {
   color: white;
-  background-color: #00C851;
-  border-color: #007E33;
+  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;
+  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;
-  border-color: #CC0000;
+  border-color: #cc0000;
 }
 .alert-dismissible .close {
   opacity: 0.6;

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

 /**
  * @file
- * Visual styles for comments in Bartik.
+ * Visual styles for comments in Bootstrap Barrio.
  */
 
-.alert {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    max-width: 100%;
-    z-index: 9999;
-}
\ No newline at end of file
+.alert-wrapper {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  max-height: 75vh;
+  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/breadcrumb.css

@@ -4,5 +4,5 @@
  */
 
 .breadcrumb {
-    font-size: 0.929em;
-}
\ No newline at end of file
+  font-size: 0.929em;
+}

css/components/comments.css

@@ -4,10 +4,7 @@
  */
 
 /* This is required to win over specificity of #content h2 */
-#content .comment-wrapper h2 {
-  margin-bottom: 1em;
-}
-#content .comment-wrapper h2.comment-form__title {
+.main-content .comment-wrapper .comment-form__title {
   margin-bottom: 1em;
 }
 .field-node--comment {
@@ -43,14 +40,16 @@
   margin: 4px 0;
   line-height: 1.2;
 }
-.comment__time, .comment__permalink {
+.comment__time,
+.comment__permalink {
   margin-bottom: 4px;
   color: #68696b;
   font-size: 0.733em;
   line-height: 1.2;
   padding: 0 0.5em 0 0; /* LTR */
 }
-[dir="rtl"] .comment__time, .comment__permalink {
+[dir="rtl"] .comment__time,
+.comment__permalink {
   padding: 0 0 0 0.5em;
 }
 .comment__permalink {

css/components/commerce.css

+.views-field-variations > span > div {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  align-items: center;
+}
+
+.views-field-variations > span > div > div {
+  display: inline-block;
+}
+
+.views-field-variations {
+  margin-bottom: 0;
+}
+
+.views-field-variations .field--name-price {
+  display: inline-block;
+  width: 70px;
+  text-align: right;
+  padding-bottom: 1.2rem;
+}
+
+.views-field-variations .field--type-entity-reference {
+  padding-left: 1rem;
+}
+
+.views-field-variations .commerce-order-item-variation-cart-form-form {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  max-width: 100%;
+}
+
+.views-field-variations .commerce-order-item-variation-cart-form-form .field--name-purchased-entity {
+  padding: 0;
+  margin: 0;
+}
+
+.views-field-variations .commerce-order-item-variation-cart-form-form .field--name-quantity {
+  display: inline-block;
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.views-field-variations .commerce-order-item-variation-cart-form-form .field--name-quantity label {
+  display: none;
+}
+
+.views-field-variations .commerce-order-item-variation-cart-form-form .field--name-quantity input {
+  width: 50px;
+}
+
+.views-field-variations .commerce-order-item-variation-cart-form-form .form-actions {
+  display: inline-block;
+  margin-bottom: 0;
+  padding: 0;
+}
+
+#edit-shipping-information .col-auto,
+#edit-payment-information-billing-information .col-auto,
+#edit-payment-information-billing-information.col-auto,
+#edit-order-summary .col-auto,
+#edit-order-summary.col-auto {
+  padding: 0;
+}
+
+#edit-shipping-information #edit-shipping-information-shipping-profile-field-ruc-wrapper {
+  display: none;
+}
+
+.view-id-listado_de_productos .views-row > div {
+  display: inline-block;
+}
+
+.view-id-listado_de_productos .views-row {
+  margin-top: 0.5rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.view-id-listado_de_productos .views-row .views-field-title {
+  width: 320px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  align-items: center;
+}
+
+.cart-block--contents {
+  font-size: 0.75rem;
+  width: auto;
+}
+
+.cart-block--contents .cart-block--contents__items {
+  max-height: inherit;
+  overflow-y: hidden;
+  overflow-x: hidden;
+}
+
+.cart--cart-offcanvas {
+  font-size: 0.75rem;
+}
+
+.cart--cart-offcanvas .cart-block--offcanvas-contents__links {
+  padding: 0.5rem 1rem;
+}
+
+.cart--cart-offcanvas .cart-block--offcanvas-contents__links a {
+  text-decoration: none;
+}
+
+.cart--cart-offcanvas .close {
+  padding: 0.25rem;
+}
+
+.cart--cart-offcanvas table td.cart-block--offcanvas-cart-table__title,
+.cart--cart-offcanvas table td.cart-block--offcanvas-cart-table__price {
+  padding: 0.5rem 0.25rem !important;
+}
+
+.cart--cart-offcanvas table td.cart-block--offcanvas-cart-table__quantity {
+  padding: 0.25rem !important;
+}
+
+.cart--cart-offcanvas table .btn {
+  font-size: 0.75rem;
+}
+.cart--cart-offcanvas table tfoot .btn {
+  font-size: 0.75rem;
+  margin-top: 0.5rem;
+}

css/components/dropbutton.component.css

@@ -4,66 +4,66 @@
  */
 
 .js .dropbutton-wrapper .dropbutton-widget {
-    /* This is required to win over specifity of .js td .dropbutton-widget */
-    position: relative;
+  /* This is required to win over specifity of .js td .dropbutton-widget */
+  position: relative;
 }
 
 .js .dropbutton-widget {
-    border: 1px solid;
-    border-color: #e4e4e4 #d2d2d2 #b4b4b4 #d2d2d2;
-    background-color: #fff;
-    background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8);
-    background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8);
-    color: #3a3a3a;
-    cursor: pointer;
-    text-align: center;
-    margin: 0.125em 0;
-    border-radius: 1em;
-    overflow: hidden;
+  border: 1px solid;
+  border-color: #e4e4e4 #d2d2d2 #b4b4b4 #d2d2d2;
+  background-color: #fff;
+  background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8);
+  background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8);
+  color: #3a3a3a;
+  cursor: pointer;
+  text-align: center;
+  margin: 0.125em 0;
+  border-radius: 1em;
+  overflow: hidden;
 }
 
 .js .dropbutton-widget:hover {
-    border-color: #e4e4e4 #d2d2d2 #b4b4b4 #d2d2d2;
+  border-color: #e4e4e4 #d2d2d2 #b4b4b4 #d2d2d2;
 }
 
 .js .dropbutton-widget .button {
-    border: none;
-    margin: 0;
-    padding: 0.32em 1em;
-    background: transparent none;
-    color: inherit;
+  border: none;
+  margin: 0;
+  padding: 0.32em 1em;
+  background: transparent none;
+  color: inherit;
 }
 
 .js .dropbutton-multiple .dropbutton-widget .dropbutton-action a {
-    margin-right: 0;
-    /* LTR */
+  margin-right: 0;
+  /* LTR */
 }
 
 [dir="rtl"].js .dropbutton-multiple .dropbutton-widget .dropbutton-action a {
-    margin-left: 0;
+  margin-left: 0;
 }
 
 .js .dropbutton .secondary-action {
-    border-top-color: #ccc;
+  border-top-color: #ccc;
 }
 
 .js .dropbutton-toggle button {
-    background-color: #e8e8e8;
-    background-image: -webkit-linear-gradient(top, #e8e8e8, #d2d2d2);
-    background-image: linear-gradient(to bottom, #e8e8e8, #d2d2d2);
+  background-color: #e8e8e8;
+  background-image: -webkit-linear-gradient(top, #e8e8e8, #d2d2d2);
+  background-image: linear-gradient(to bottom, #e8e8e8, #d2d2d2);
 }
 
 .js .dropbutton-toggle .dropbutton-arrow:hover {
-    background: #ccc;
+  background: #ccc;
 }
 
 .js .dropbutton a {
-    color: #3a3a3a;
-    border-bottom: 0 none;
+  color: #3a3a3a;
+  border-bottom: 0 none;
 }
 
 .js .dropbutton .dropbutton-action:hover,
 .js .dropbutton a:hover {
-    background: #dedede;
-    border-bottom: 0 none;
-}
\ No newline at end of file
+  background: #dedede;
+  border-bottom: 0 none;
+}

css/components/dropbutton.css

@@ -2,7 +2,6 @@
  * @file
  * General styles for dropbuttons.
  */
-
 .js .dropbutton-widget {
   background-color: white;
   border: 1px solid #cccccc;
@@ -10,7 +9,7 @@
 .js .dropbutton-widget:hover {
   border-color: #b8b8b8;
 }
-.dropbutton .dropbutton-action > * {
+.dropbutton .dropbutton-action>* {
   padding: 0.1em 0.5em;
   white-space: nowrap;
 }
@@ -18,16 +17,34 @@
   border-top: 1px solid #e8e8e8;
 }
 .dropbutton-multiple .dropbutton {
-  border-right: 1px solid #e8e8e8; /* LTR */
+  border-right: 1px solid #e8e8e8;
+  /* LTR */
 }
 [dir="rtl"] .dropbutton-multiple .dropbutton {
   border-left: 1px solid #e8e8e8;
   border-right: 0 none;
 }
-.dropbutton-multiple .dropbutton .dropbutton-action > * {
-  margin-right: 0.25em; /* LTR */
+.dropbutton-multiple .dropbutton .dropbutton-action>* {
+  margin-right: 0.25em;
+  /* LTR */
 }
-[dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * {
+[dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action>* {
   margin-left: 0.25em;
   margin-right: 0;
 }
+.js td .dropbutton-multiple {
+  padding-right: 10em;
+  margin-right: 2em;
+  max-width: 100%;
+}
+.js td .dropbutton-wrapper {
+  min-height: 2em;
+}
+.js .dropbutton-wrapper,
+.js .dropbutton-widget {
+  display: block;
+  position: relative;
+}
+.js td .dropbutton-widget {
+  position: absolute;
+}

css/components/field.css

@@ -82,6 +82,7 @@
   padding: 0 0 0 1em;
   float: right;
 }
-.field--label-inline .field__label, .field--label-inline .field__item {
-  display: inline-block
+.field--label-inline .field__label,
+.field--label-inline .field__item {
+  display: inline-block;
 }