uikit/src/less/components/list.less

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

// Name:            List
// Description:     Styles for lists
//
// Component:       `uk-list`
//
// Modifiers:       `uk-list-divider`
//                  `uk-list-striped`
//                  `uk-list-bullet`
//                  `uk-list-large`
//
// ========================================================================


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

@list-margin-top:                               @global-small-margin;

@list-nested-padding-left:                      @global-gutter;

@list-divider-margin-top:                       @global-small-margin;
@list-divider-border-width:                     @global-border-width;
@list-divider-border:                           @global-border;

@list-striped-padding-vertical:                 @global-small-margin;
@list-striped-padding-horizontal:               @global-small-margin;
@list-striped-background:                       @global-muted-background;

@list-bullet-width:                             (@global-line-height * 1em);
@list-bullet-height:                            @list-bullet-width;
@list-bullet-margin-right:                      @global-small-margin;
@list-bullet-icon-color:                        @global-color;

@list-large-margin-top:                         @global-margin;
@list-large-divider-margin-top:                 @global-margin;
@list-large-striped-padding-vertical:           @global-margin;
@list-large-striped-padding-horizontal:         @global-small-margin;

@internal-list-bullet-image:                    "../../images/backgrounds/list-bullet.svg";


/* ========================================================================
   Component: List
 ========================================================================== */

.uk-list {
    padding: 0;
    list-style: none;
}

/*
 * Micro clearfix
 */

.uk-list > li::before,
.uk-list > li::after {
    content: "";
    display: table;
}

.uk-list > li::after { clear: both; }

/*
 * Remove margin from the last-child
 */

.uk-list > li > :last-child { margin-bottom: 0; }

/*
 * Nested lists
 */

.uk-list ul {
    margin: 0;
    padding-left: @list-nested-padding-left;
    list-style: none;
}

/*
 * Style
 */

.uk-list > li:nth-child(n+2),
.uk-list > li > ul { margin-top: @list-margin-top; }


/* Style modifiers
 ========================================================================== */

/*
 * Divider
 */

.uk-list-divider > li:nth-child(n+2) {
    margin-top: @list-divider-margin-top;
    padding-top: @list-divider-margin-top;
    border-top: @list-divider-border-width solid @list-divider-border;
    .hook-list-divider;
}

/*
 * Striped
 */

.uk-list-striped > li {
    padding: @list-striped-padding-vertical @list-striped-padding-horizontal;
    .hook-list-striped;
}

.uk-list-striped > li:nth-of-type(odd) { background: @list-striped-background; }

.uk-list-striped > li:nth-child(n+2) { margin-top: 0; }

/*
 * Bullet
 * 1. Reset display `table` which causes issues in combination with multi column layouts.
 */

.uk-list-bullet > li {
    position: relative;
    padding-left: ~'calc(@{list-bullet-width} + @{list-bullet-margin-right})';
}

.uk-list-bullet > li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: @list-bullet-width;
    height: @list-bullet-height;
    .svg-fill(@internal-list-bullet-image, "#000", @list-bullet-icon-color);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    /* 1 */
    display: block;
    .hook-list-bullet;
}


/* Size modifier
 ========================================================================== */

.uk-list-large > li:nth-child(n+2),
.uk-list-large > li > ul { margin-top: @list-large-margin-top; }

/*
 * Divider
 */

.uk-list-large.uk-list-divider > li:nth-child(n+2) {
    margin-top: @list-large-divider-margin-top;
    padding-top: @list-large-divider-margin-top;
}

/*
 * Striped
 */

.uk-list-large.uk-list-striped > li {
    padding: @list-large-striped-padding-vertical @list-large-striped-padding-horizontal;
    .hook-list-striped;
}

.uk-list-large.uk-list-striped > li:nth-child(n+2) { margin-top: 0; }


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

.hook-list-misc;

.hook-list-divider() {}
.hook-list-striped() {}
.hook-list-bullet() {}
.hook-list-misc() {}


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

@inverse-list-divider-border:                     @inverse-global-border;
@inverse-list-striped-background:                 @inverse-global-muted-background;
@inverse-list-bullet-icon-color:                  @inverse-global-color;

.hook-inverse() {

    .uk-list-divider > li:nth-child(n+2) {
        border-top-color: @inverse-list-divider-border;
        .hook-inverse-list-divider;
    }

    .uk-list-striped > li {
        .hook-inverse-list-striped;
    }

    .uk-list-striped > li:nth-of-type(odd) { background-color: @inverse-list-striped-background; }

    .uk-list-bullet > li::before {
        .svg-fill(@internal-list-bullet-image, "#000", @inverse-list-bullet-icon-color);
        .hook-inverse-list-bullet;
    }

}

.hook-inverse-list-divider() {}
.hook-inverse-list-striped() {}
.hook-inverse-list-bullet() {}