uikit/src/less/components/divider.less

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

// Name:            Divider
// Description:     Styles for dividers
//
// Component:       `uk-divider-icon`
//                  `uk-divider-small`
//                  `uk-divider-vertical`
//
// ========================================================================


// Variables
// ========================================================================

@divider-margin-vertical:                       @global-margin;

@divider-icon-width:                            50px;
@divider-icon-height:                           20px;
@divider-icon-color:                            @global-border;
@divider-icon-line-top:                         50%;
@divider-icon-line-width:                       100%;
@divider-icon-line-border-width:                @global-border-width;
@divider-icon-line-border:                      @global-border;

@internal-divider-icon-image:                   "../../images/backgrounds/divider-icon.svg";

@divider-small-width:                           100px;
@divider-small-border-width:                    @global-border-width;
@divider-small-border:                          @global-border;

@divider-vertical-height:                       100px;
@divider-vertical-border-width:                 @global-border-width;
@divider-vertical-border:                       @global-border;


/* ========================================================================
   Component: Divider
 ========================================================================== */

/*
 * 1. Reset default `hr`
 * 2. Set margin if a `div` is used for semantical reason
 */

[class*="uk-divider"] {
    /* 1 */
    border: none;
    /* 2 */
    margin-bottom: @divider-margin-vertical;
}

/* Add margin if adjacent element */
* + [class*="uk-divider"] { margin-top: @divider-margin-vertical; }


/* Icon
 ========================================================================== */

.uk-divider-icon {
    position: relative;
    height: @divider-icon-height;
    .svg-fill(@internal-divider-icon-image, "#000", @divider-icon-color);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    .hook-divider-icon();
}

.uk-divider-icon::before,
.uk-divider-icon::after {
    content: "";
    position: absolute;
    top: @divider-icon-line-top;
    max-width: ~'calc(50% - (@{divider-icon-width} / 2))';
    border-bottom: @divider-icon-line-border-width solid @divider-icon-line-border;
    .hook-divider-icon-line();
}

.uk-divider-icon::before {
    right: ~'calc(50% + (@{divider-icon-width} / 2))';
    width: @divider-icon-line-width;
    .hook-divider-icon-line-left();
}

.uk-divider-icon::after {
    left: ~'calc(50% + (@{divider-icon-width} / 2))';
    width: @divider-icon-line-width;
    .hook-divider-icon-line-right();
}


/* Small
 ========================================================================== */

/*
 * 1. Fix height because of `inline-block`
 * 2. Using ::after and inline-block to make `text-align` work
 */

/* 1 */
.uk-divider-small { line-height: 0; }

/* 2 */
.uk-divider-small::after {
    content: "";
    display: inline-block;
    width: @divider-small-width;
    max-width: 100%;
    border-top: @divider-small-border-width solid @divider-small-border;
    vertical-align: top;
    .hook-divider-small();
}


/* Vertical
 ========================================================================== */

.uk-divider-vertical {
    width: max-content;
    height: @divider-vertical-height;
    margin-left: auto;
    margin-right: auto;
    border-left: @divider-vertical-border-width solid @divider-vertical-border;
    .hook-divider-vertical();
}


// Hooks
// ========================================================================

.hook-divider-misc();

.hook-divider-icon() {}
.hook-divider-icon-line() {}
.hook-divider-icon-line-left() {}
.hook-divider-icon-line-right() {}
.hook-divider-small() {}
.hook-divider-vertical() {}
.hook-divider-misc() {}


// Inverse
// ========================================================================

@inverse-divider-icon-color:                      @inverse-global-border;
@inverse-divider-icon-line-border:                @inverse-global-border;
@inverse-divider-small-border:                    @inverse-global-border;
@inverse-divider-vertical-border:                 @inverse-global-border;

.hook-inverse() {

    .uk-divider-icon {
        .svg-fill(@internal-divider-icon-image, "#000", @inverse-divider-icon-color);
        .hook-inverse-divider-icon();
    }

    .uk-divider-icon::before,
    .uk-divider-icon::after {
        border-bottom-color: @inverse-divider-icon-line-border;
        .hook-inverse-divider-icon-line();
    }

    .uk-divider-small::after {
        border-top-color: @inverse-divider-small-border;
        .hook-inverse-divider-small();
    }

    .uk-divider-vertical {
        border-left-color: @inverse-divider-vertical-border;
        .hook-inverse-divider-vertical();
    }

}

.hook-inverse-divider-icon() {}
.hook-inverse-divider-icon-line() {}
.hook-inverse-divider-small() {}
.hook-inverse-divider-vertical() {}