uikit/src/less/components/slider.less

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

// Name:            Slider
// Description:     Component to create horizontal sliders
//
// Component:       `uk-slider`
//
// Sub-objects:     `uk-slider-container`
//                  `uk-slider-items`
//
// States:          `uk-active`
//
// ========================================================================


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

@slider-container-margin-top:                       -11px;
@slider-container-margin-bottom:                    -39px;
@slider-container-margin-left:                      -25px;
@slider-container-margin-right:                     -25px;


/* ========================================================================
   Component: Slider
 ========================================================================== */

/*
 * 1. Prevent tab highlighting on iOS.
 */

.uk-slider {
    /* 1 */
    -webkit-tap-highlight-color: transparent;
    .hook-slider;
}


/* Container
 ========================================================================== */

/*
 * Clip child elements
 */

.uk-slider-container { overflow: hidden; }

/*
 * Widen container to prevent box-shadows from clipping, `large-box-shadow`
 */

.uk-slider-container-offset {
    margin: @slider-container-margin-top @slider-container-margin-right @slider-container-margin-bottom @slider-container-margin-left;
    padding: (@slider-container-margin-top * -1) (@slider-container-margin-right * -1) (@slider-container-margin-bottom * -1) (@slider-container-margin-left * -1);
}

/* Items
 ========================================================================== */

/*
 * 1. Optimize animation
 * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`.
 */

.uk-slider-items {
    /* 1 */
    will-change: transform;
    /* 2 */
    position: relative;
}

/*
 * 1. Reset list style without interfering with grid
 * 2. Prevent displaying the callout information on iOS.
 */

.uk-slider-items:not(.uk-grid) {
    display: flex;
    /* 1 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 2 */
    -webkit-touch-callout: none;
}

.uk-slider-items.uk-grid { flex-wrap: nowrap; }


/* Item
 ========================================================================== */

/*
 * 1. Let items take content dimensions (0 0 auto)
 *    `max-width` needed to keep image responsiveness and prevent content overflow
 * 3. Create position context
 * 4. Disable horizontal panning gestures in IE11 and Edge
 * 5. Suppress outline on focus
 */

.uk-slider-items > * {
    /* 1 */
    flex: none;
    max-width: 100%;
    /* 3 */
    position: relative;
    /* 4 */
    touch-action: pan-y;
}

/* 5 */
.uk-slider-items > :focus { outline: none; }


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

.hook-slider-misc;

.hook-slider() {}
.hook-slider-misc() {}