D-Net

// Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

//

// OMTDComponent: Button

//

// ========================================================================

// Variables

// ========================================================================

@button-height:                                 @global-height;

@button-mini-height:                            @global-height-mini;

@button-small-height:                           @global-height-small;

@button-large-height:                           @global-height-large;

@button-line-height:                            @global-height;

@button-mini-line-height:                       @global-height-mini;

@button-small-line-height:                      @global-height-small;

@button-large-line-height:                      @global-height-large;

@button-mini-font-size:                         round((@global-font-size * 0.733)); // 11px

@button-small-font-size:                        round((@global-font-size * 0.8)); // 12px

@button-large-font-size:                        round((@global-font-size * 1.067)); // 16px

@button-background:                             rgba(0,0,0,0);

@button-color:                                  @global-color;

@button-hover-background:                       rgba(0,0,0,0);

@button-hover-color:                            @global-contrast-color;

@button-active-background:                      rgba(0,0,0,0);

@button-active-color:                           @global-contrast-color;

@button-primary-background:                     @global-primary-background;

@button-primary-color:                          @global-contrast-color;

@button-primary-hover-background:               darken(@global-primary-background, 10%);

@button-primary-hover-color:                    @global-contrast-color;

@button-primary-active-background:              darken(@global-primary-background, 15%);

@button-primary-active-color:                   @global-contrast-color;

@button-success-background:                     @global-success-background;

@button-success-color:                          @global-contrast-color;

@button-success-hover-background:               desaturate(darken(@global-success-background, 5%), 10%);

@button-success-hover-color:                    @global-contrast-color;

@button-success-active-background:              desaturate(darken(@global-success-background, 10%), 10%);

@button-success-active-color:                   @global-contrast-color;

@button-danger-background:                      @global-danger-background;

@button-danger-color:                           @global-contrast-color;

@button-danger-hover-background:                desaturate(darken(@global-danger-background, 5%), 10%);

@button-danger-hover-color:                     @global-contrast-color;

@button-danger-active-background:               desaturate(darken(@global-danger-background, 10%), 15%);

@button-danger-active-color:                    @global-contrast-color;

@button-disabled-color:                         @global-muted-color;

@button-link-color:                             @global-color;

@button-link-hover-color:                       @global-color;

@button-link-hover-text-decoration:             none;

@button-link-disabled-color:                    @global-muted-color;

//

// New

//

@button-border-width:                           @global-border-width;

@button-border:                                 #999;

@button-hover-border:                           #444;

@button-active-border:                          #333;

@button-link-font-family:                       'Chester';

@button-link-icon:                              "\e901";

// OMTDComponent

// ========================================================================

.hook-button() {

    position: relative;

    border: @button-border-width solid @button-border;

    overflow: hidden;

    -webkit-transition: color .4s, background .2s;

    transition: color .4s, background .2s;

    z-index: 1;

    &:not(.uk-button-link):before {

        content: "";

        position: absolute;

        left: -160%;

        height: 100%;

        width: 130%;

        background: @button-hover-border;

        -webkit-transform: skewX(20deg);

        transform: skewX(20deg);

        -webkit-transition: left .4s;

        transition: left .4s;

        z-index: -1;

    }

}

.hook-button-hover() {

    border-color: @button-hover-border;

    &:not(.uk-button-link):before { left: -15%; }

}

.hook-button-active() {

    border-color: @button-active-border;

    &:not(.uk-button-link):before {

        left: -15%;

        background: @button-active-border;

    }

}

// Color modifiers

// ========================================================================

//

// Modifier: `uk-button-primary`

//

.hook-button-primary() {

    border-color: transparent;

    &:before { background: none !important; }

}

.hook-button-primary-hover() { border-color: transparent; }

.hook-button-primary-active() { border-color: transparent; }

//

// Modifier: `uk-button-success`

//

.hook-button-success() {

    border-color: transparent;

    &:before { background: none !important; }

}

.hook-button-success-hover() { border-color: transparent; }

.hook-button-success-active() { border-color: transparent; }

//

// Modifier: `uk-button-danger`

//

.hook-button-danger() {

    border-color: transparent;

    &:before { background: none !important; }

}

.hook-button-danger-hover() { border-color: transparent; }

.hook-button-danger-active() { border-color: transparent; }

// Disabled state

// ========================================================================

.hook-button-disable() {

    border-color: transparent;

    &:before { background: none !important; }

}

// Modifier: `uk-button-link`

// ========================================================================

.hook-button-link() {

    &:hover,

    &:focus { text-decoration: none; }

    &:not(:disabled) {

        position: relative;

        padding-left: 0;

        padding-right: 25px;

        &:before,

        &:after {

            content: "";

            position: absolute;

            -webkit-transition: right .2s, width .2s;

            transition: right .2s, width .2s;

        }

        &:before {

            right: 7px;

            width: 7px;

            content: @button-link-icon;

            font-family: @button-link-font-family;

            font-size: 12px;

            line-height: @button-height;

        }

        &:after {

            top: 50%;

            right: 8px;

            width: 12px;

            height: 1px;

            background: @button-link-color;

        }

        &:hover:before,

        &:focus:before { right: 0; }

        &:hover:after,

        &:focus:after {

            right: 0;

            width: 20px;

        }

    }

}

// Size modifiers

// ========================================================================

.hook-button-large() {}

// Miscellaneous

// ========================================================================

.hook-button-misc() {

    // Collapse border

    .uk-button-group > .uk-button:nth-child(n+2),

    .uk-button-group > div:nth-child(n+2) .uk-button { border-left-width: 0; }

    .uk-button-group > .uk-button:nth-child(n+2):hover,

    .uk-button-group > div:nth-child(n+2) .uk-button:hover,

    .uk-button-group > .uk-button:nth-child(n+2):active,

    .uk-button-group > .uk-button:nth-child(n+2).uk-active {

        margin-left: -@button-border-width;

        border-left-width: @button-border-width;

    }

}