29Utilities

<div class="kss-hide">
// Cover
//
// Adds centered background cover properties to an element for use with an
// inline background-image style.

.cover {
    background-size: cover;
    background-position: center center;

    .no-js & {
        background-image: '../users/images/user-login.jpg';
    }
}


// Type utility classes
.serif {
    font-family: $font-family-serif;
}

.sans-serif {
    font-family: $font-family-sans-serif;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-ellipsis {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &.text-ellipsis--medium-navy{
        color: $deep-medium-navy;
    }

}

.small-text-ellipsis {
    @include breakpoint(small only) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

// Prevent type from wrapping
.no-wrap {
    white-space: nowrap;
}

.color-info {
    color: $info-color;
}

.font-weight-normal {
    font-weight: normal;
}

.font-weight-demi {
    font-weight: $font-weight-demi;
}

// Javascript display/visibility utility classes
.js {
    .hide-for-js {
        display: none;
    }
    .hidden-for-js {
        visibility: hidden;
    }
    @include breakpoint(small only) {
        .hide-for-js-small-only {
            display: none;
        }
    }
    @include breakpoint(large only) {
        .show-for-js-large {
            display: inherit;
        }
    }
}

@include breakpoint(small only) {
    .hide-for-small {
        display: none;
    }
}

@include breakpoint(medium up) {
    .hide-for-medium{
        display: none;
    }
}

@include breakpoint(large up) {
    .hide-for-large {
        display: inherit;
    }
}

.no-js {
    .hide-for-no-js {
        display: none;
    }
}

// Float utility classes
.medium-right {
    @include breakpoint(medium up) {
        float: right !important;
    }
}

.large-right {
    @include breakpoint(large up) {
        float: right !important;
    }
}

.large-left {
    @include breakpoint(large up) {
        float: left !important;
    }
}

//Display utility
.inline {
    display: inline-block !important;
}


// White space utility classes following Basscss shorthand naming convention

.m0  { margin: 0 !important; }
.mt0 { margin-top: 0 !important; }
.mth { margin-top: 0.5rem !important; }
.mt1 { margin-top: 1rem !important; }
.mt2 { margin-top: 2rem !important; }

.mb0 { margin-bottom: 0 !important; }
.mb1 { margin-bottom: 1rem !importantx`; }
.mb2 { margin-bottom: 2rem !important; }

.mr1 { margin-right: 1rem !important; }
.ml1 { margin-left: 1rem !important; }
</div>