Basic WordPress widget styling

widgets.scss

/* Widgets
-------------------------------------------------------------- */
.widget {
  .sidebar & {
    margin-bottom: $grid-gutter-width;
    font-size: $font-size-sm;
    line-height: $line-height-sm;

    // Display with columns on small screen
    @include media-breakpoint-up(sm) {
      width: calc(50% - 15px);
      float: left;
      clear: both;

      &:nth-child(even) {
        float: right;
        clear: none;
      }
    }

    @include media-breakpoint-up(lg) {
      width: 100%;
      float: none;
    }
  }

  // Widget title
  h3 {
    font-size: 1em;
  }

  ul {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;

    // Set active classes for various widgets
    li {
      &.active,
      &.current-cat,
      &.current_page_item,
      &.current-cat-ancestor,
      &.current-cat-parent,
      &.current_page_ancestor,
      &.current_page_parent {
        > a {
          font-weight: $font-weight-bold;
        }
      }
    }
  }
}

// Make links in menu widgets more clickable
.widget.widget_nav_menu,
.widget.widget_pages {
  ul li > a {
    display: block;
  }
}

// Indent nav menus
.widget_nav_menu {
  .sub-menu {
    padding-left: 0.75rem;
  }
}

// Indent categories & pages
.widget_categories,
.widget_pages {
  .children {
    padding-left: 0.75rem;
  }
}

// Reset spacing on Galleries
.widget_media_gallery {
  .gallery {
    margin-right: -1px;
    margin-left: -1px;
  }

  .gallery-item {
    padding-right: 1px;
    padding-left: 1px;
    margin-bottom: 2px;
  }

  .wp-caption-text {
    left: 1px;
    right: 1px;
  }
}

.widget_archive,
.widget_categories {
  select {
    @extend .custom-select;
    @extend .custom-select-sm;
  }
}