For Drupal Bootstrap Barrio Theme

barrio.theme.css

/**
 * Updated October 25, 2020
 */

h1.title
{
  display: none;
}

#main-wrapper
{
  min-height: 550px;
  padding-top: 140px;
}

/* Looks like 992 is the new mobile navicon */
@media (min-width: 992px)
{
  #main-wrapper
  {
    min-height: 850px;
    padding-top: 180px;
  }
}

/*----------------------------------------------------------------------------------------*/
/*
  Footer
*/

.site-footer
{
  padding: 0;
}

.site-footer .block
{
  border: none;
  margin: 0;
}

.site-footer .row,
.site-footer .block
{
  width: 100%;
}

/*----------------------------------------------------------------------------------------*/
/*
  Tabs
*/

.nav-tabs .nav-link
{
  background-color: darkgray;
}

/*----------------------------------------------------------------------------------------*/
/*
  Navbars & Menu items.
*/

/*
  By the way, the top for #navbar-main is being handled
  dynamically by Routines.onResizeNavbarMain()
 */
#navbar-main,
#navbar-top
{
  padding: 0;
  margin: 0;
}

.navbar-toggler
{
  background-color: gray;
  position: fixed;
  top: 10px;
  right: 15px;

  float: right;
  padding: 9px 10px;
  margin-right: 15px;
  margin-top: 8px;
  margin-bottom: 8px;
  border: 1px solid black;
  border-radius: 4px;
}

/*
  Brilliant. . . .
  From https://julienmelissas.com/animated-x-icon-for-the-bootstrap-navbar-toggle/
  Make sure that you add the classes to system/page.html.twig
*/
.navbar-toggler .icon-bar
{
  width: 22px;
  transition: all 0.2s;
  display: block;
  height: 2px;
  border-radius: 1px;
  background-color: #FFF;
  margin: 4px 0;
}

.navbar-toggler .top-bar
{
  -webkit-transform: translateX(3px) rotate(45deg);
  -moz-transform: translateX(3px) rotate(45deg);
  -o-transform: translateX(3px) rotate(45deg);

  transform: translateX(3px) rotate(45deg);

  -webkit-transform-origin: 10% 10%;
  -moz-transform-origin: 10% 10%;
  -o-transform-origin: 10% 10%;

  transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar
{
  opacity: 0;
}

.navbar-toggler .bottom-bar
{
  -webkit-transform: translateX(3px) rotate(-45deg);
  -moz-transform: translateX(3px) rotate(-45deg);
  -o-transform: rotate(-45deg);

  transform: translateX(3px) rotate(-45deg);

  -webkit-transform-origin: 10% 90%;
  -moz-transform-origin: 10% 90%;
  -o-transform-origin: 10% 90%;

  transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .top-bar
{
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);

  transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar
{
  opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar
{
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);

  transform: rotate(0);
}

@media (max-width: 991px)
{
  .navbar-collapse
  {
    position: fixed;
    width: 150px;
    top: 60px;
    right: 30px;
    padding: 0 10px;
    overflow: hidden;
    border: 1px solid #0B93D5;
    background: #002C54;
    border-radius: 4px;
  }
}

.navbar-collapse .nav-item.dropdown .dropdown-toggle::after
{
  transform: rotate(0deg);

  transition: all 0.2s;
}

.navbar-collapse .nav-item.dropdown.show .dropdown-toggle::after
{
  transform: rotate(180deg);

  transition: all 0.2s;
}

.navbar-collapse .menu.dropdown-menu
{
  display: none;
  margin: 0;
}

.navbar-collapse .menu.dropdown-menu.show
{
  display: block;
}

/*
  Forces the sub-menu to expand the main menu on click.
*/
@media (max-width: 991px)
{
  .navbar-collapse .dropdown-menu
  {
    position: revert;
  }
}

.navbar-collapse .menu.dropdown-menu .nav-item
{
  padding-left: 10px;
  font-size: 0.75em;
}


/*----------------------------------------------------------------------------------------*/
/*
  Watermarks
*/

textarea.watermark,
input.watermark
{
  color: #999999;
}

/*----------------------------------------------------------------------------------------*/
/*
  From https://stackoverflow.com/questions/20751316/how-to-make-div-to-match-image-height-with-css
  Otherwise, the <a></a> will not stretch to fit the image.
*/

/*
  This way, the image doesn't briefly appear large and then resize.
  I'm also assuming that I will be using the  Beo.setupImageDialogBox
  for all images.
*/
img
{
  display: none;
}

.ui-dialog img
{
  display: block;
  padding: 0;
}

/* ------ */

.dialogbox-image
{
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-align: center;
}

a.dialogbox-image img
{
  opacity: 1.0;
  -moz-transition: opacity 0.25s ease;
  -webkit-transition: opacity 0.25s ease;

  transition: opacity 0.25s ease;
}

a.dialogbox-image img:hover
{
  opacity: 0.75;
  -moz-transition: opacity 0.25s ease;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

/*----------------------------------------------------------------------------------------*/
/*
  From https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block
  I'm modifying .img-responsive from Bootstrap. I need to use inline-block.
*/

.responsive-image-small,
.responsive-image-regular,
.responsive-image-large
{
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.responsive-image-small
{
  max-height: 240px;
}

.responsive-image-regular
{
  max-height: 350px;
}

.responsive-image-large
{
  max-height: 480px;
}

/*
  Bootstrap uses min-width: 768px settings,
  so max-width: 767px works in concert
*/
@media (max-width: 767px)
{
  .responsive-image-small
  {
    max-height: 175px;
  }

  .responsive-image-regular
  {
    max-height: 285px;
  }

  .responsive-image-large
  {
    max-height: 415px;
  }
}

/*----------------------------------------------------------------------------------------*/
/*
  jQuery UI
*/

.ui-dialog
{
  z-index: 99999;
}

.ui-dialog .ui-dialog-titlebar
{
  padding: 0.1em 1.0em;
}

.ui-dialog .ui-dialog-content
{
  padding: 0;
}

.ui-corner-all
{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ui-tabs-vertical
{
  width: 100%;
}

.ui-tabs-vertical .ui-tabs-nav .ui-tabs-anchor
{
  width: 100%;
}

.ui-tabs-vertical .ui-tabs-nav
{
  padding: .2em .1em .2em .2em;
  float: left;
  width: 12em;
}

.ui-tabs-vertical .ui-tabs-nav li
{
  clear: left;
  width: 100%;
  border-bottom-width: 1px !important;
  border-right-width: 0 !important;
  margin: 0 -1px .2em 0;
}

.ui-tabs-vertical .ui-tabs-nav li a
{
  display: block;
}

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active
{
  padding-bottom: 0;
  padding-right: 0.1em;
  border-right-width: 1px;
}

.ui-tabs-vertical .ui-tabs-panel
{
  padding: 1.0em;
  float: left;
  width: 100%;

  /*
    From https://stackoverflow.com/questions/36418352/css-word-wrap-break-word-wont-work
    Now, all the text wraps, even the long URLs, and the text no longer overflows the sides.
  */
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

/*----------------------------------------------------------------------------------------*/
/*
  Carousel
*/

/* Keeps the arrows from being active over the left and right sides. */
.carousel-control-next,
.carousel-control-prev
{
  top: unset;
  bottom: 25%;
  width: 30px;
  height: 30px;
}

.carousel-control-next-icon,
.carousel-control-prev-icon
{
  margin-top: 4px;
}

/*----------------------------------------------------------------------------------------*/

barrio.theme.js

// License: Eclipse Public License - v 2.0 (https://www.eclipse.org/org/documents/epl-2.0/EPL-2.0.html)
// Updated on November 7, 2022

//----------------------------------------------------------------------------------------------------
//----------------------------------------------------------------------------------------------------
//----------------------------------------------------------------------------------------------------

var BarrioTheme =
  {
    //----------------------------------------------------------------------------------------------------
    onResizeWrapperNavbar: function ()
    {
      BarrioTheme.adjustNavbarMain();
      BarrioTheme.adjustMainWrapper();

      jQuery(window).resize(function ()
      {
        BarrioTheme.adjustNavbarMain();
        BarrioTheme.adjustMainWrapper();
      });

    },
    //----------------------------------------------------------------------------------------------------
    adjustMainWrapper: function ()
    {
      let loTop = jQuery('#navbar-top');
      let loMain = jQuery('#navbar-main');
      let loWrapper = jQuery('#main-wrapper');

      if ((loTop.length == 0) || (loMain.length == 0) || (loWrapper.length == 0))
      {
        return;
      }

      let lnPaddingTop = 15;
      lnPaddingTop += loTop.height();
      if (loMain.is(':visible'))
      {
        lnPaddingTop += loMain.height();
      }

      loWrapper.css('padding-top', lnPaddingTop + 'px');
    },
    //----------------------------------------------------------------------------------------------------
    adjustNavbarMain: function ()
    {
      let loMainNavBar = jQuery('#navbar-main');

      let loTopNavBar = jQuery('#navbar-top');
      let loToolBarAdmin = jQuery('.toolbar-menu-administration .toolbar-icon-admin-toolbar-tools-help')
      let loToolBarTab = jQuery('.toolbar-tab .toolbar-icon-menu')

      let lnTop = 0;

      if (loMainNavBar.length == 0)
      {
        return;
      }

      // Now includes the admin menu tools when logged in.
      lnTop += (loTopNavBar.length != 0) ? Math.max(loTopNavBar.height(), parseFloat(loTopNavBar.css('height'))) : 0;
      lnTop += (loToolBarAdmin.length != 0) ? Math.max(loToolBarAdmin.height(), parseFloat(loToolBarAdmin.css('height'))) : 0;
      lnTop += (loToolBarTab.length != 0) ? Math.max(loToolBarTab.height(), parseFloat(loToolBarTab.css('height'))) : 0;

      loMainNavBar.css('top', lnTop + 'px');
    }
    //----------------------------------------------------------------------------------------------------
  };

//----------------------------------------------------------------------------------------------------
//----------------------------------------------------------------------------------------------------
//----------------------------------------------------------------------------------------------------