Category: CSS

Bootstrap 4 dropdown hover

CSS

.dropdown:hover>.dropdown-menu {
    display: block;
}

or

JavaScript

function toggleDropdown (e) {
  const _d = $(e.target).closest('.dropdown'),
    _m = $('.dropdown-menu', _d);
  setTimeout(function(){
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 150 : 0);
}

$('body')
  .on('mouseenter mouseleave','.dropdown',toggleDropdown)
  .on('click', '.dropdown-menu a', toggleDropdown);

Container fluid left right

SCSS

@mixin make-container-fluid-left-right($gutter: $grid-gutter-width) {
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
}
@mixin make-container-fluid-left($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
    @each $breakpoint, $container-max-width in $max-widths {
        @include media-breakpoint-up($breakpoint, $breakpoints) {
            margin-right: calc((100% - #{$container-max-width}) / 2);
            width: calc(100% - ((100% - #{$container-max-width}) / 2));
        }
    }
}
@mixin make-container-fluid-right($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
    @each $breakpoint, $container-max-width in $max-widths {
        @include media-breakpoint-up($breakpoint, $breakpoints) {
            margin-left: calc((100% - #{$container-max-width}) / 2);
            width: calc(100% - ((100% - #{$container-max-width}) / 2));
        }
    }
}
.container-fluid-left {
    @include make-container-fluid-left-right();
    @include make-container-fluid-left();
}
.container-fluid-right {
    @include make-container-fluid-left-right();
    @include make-container-fluid-right();
}

Responsive column margin

SCSS

.col-item {
    margin-bottom: $grid-gutter-width;
}
.col-item-sm {
    margin-bottom: $grid-gutter-width;
    @include media-breakpoint-up(sm) {
        margin-bottom: 0;
    }
}
.col-item-md {
    margin-bottom: $grid-gutter-width;
    @include media-breakpoint-up(md) {
        margin-bottom: 0;
    }
}
.col-item-lg {
    margin-bottom: $grid-gutter-width;
    @include media-breakpoint-up(lg) {
        margin-bottom: 0;
    }
}
.col-item-xl {
    margin-bottom: $grid-gutter-width;
    @include media-breakpoint-up(xl) {
        margin-bottom: 0;
    }
}
[class^='col-item'], [class*=" col-item"] {
    &:last-child {
        margin-bottom: 0;
    }
}

Remove focus outline and add it on tab key

HTML

<body class="no-focus-outline">
<!-- WordPress -->
<body <?php body_class("no-focus-outline"); ?>>

SCSS

.no-focus-outline {
  a, button, input {
    &:focus {
      outline: none;
      box-shadow: none !important;
    }
}

JS

// body remove no-focus-outline on tab key
document.body.addEventListener('keydown', function(e) {
    if (e.which === 9) /* tab */ {
        $("body").removeClass('no-focus-outline');
    }
});

Responsive Bootstrap gutter

HTML

<div class="row responsive-gutter">
    <div class="col-6 col-md-4">
    </div>
    <div class="col-6 col-md-4">
    </div>
    ...
</div>

CSS

.row.responsive-gutter {
    > .col,
    > [class*="col-"] {
        margin-bottom: $grid-gutter-width;
        &.last-row {
            margin-bottom: 0;
        }
    }
    // setting half the size for mobile
    @include media-breakpoint-down(md) {
        margin-right: -$grid-gutter-width / 4;
        margin-left: -$grid-gutter-width / 4;
        > .col,
        > [class*="col-"] {
            margin-bottom: $grid-gutter-width / 2;
            padding-right: $grid-gutter-width / 4;
            padding-left: $grid-gutter-width / 4;
        }
    }
}