D-Net

// Name:            Text

// Description:     Utilities for text

//

// Component:       `uk-text-*`

//

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

// Variables

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

@text-lead-font-size:                           @global-large-font-size;

@text-lead-line-height:                         1.5;

@text-lead-color:                               @global-emphasis-color;

@text-meta-font-size:                           @global-small-font-size;

@text-meta-line-height:                         1.4;

@text-meta-color:                               @global-muted-color;

@text-small-font-size:                          @global-small-font-size;

@text-small-line-height:                        1.5;

@text-large-font-size:                          @global-large-font-size;

@text-large-line-height:                        1.5;

@text-muted-color:                              @global-muted-color;

@text-primary-color:                            @global-primary-background;

@text-success-color:                            @global-success-background;

@text-warning-color:                            @global-warning-background;

@text-danger-color:                             @global-danger-background;

@text-background-color:                         @global-primary-background;

/* ========================================================================

   Component: Text

 ========================================================================== */

/* Style modifiers

 ========================================================================== */

.uk-text-lead {

    font-size: @text-lead-font-size;

    line-height: @text-lead-line-height;

    color: @text-lead-color;

    .hook-text-lead;

}

.uk-text-meta {

    font-size: @text-meta-font-size;

    line-height: @text-meta-line-height;

    color: @text-meta-color;

    .hook-text-meta;

}

/* Size modifiers

 ========================================================================== */

.uk-text-small {

    font-size: @text-small-font-size;

    line-height: @text-small-line-height;

    .hook-text-small;

}

.uk-text-large {

    font-size: @text-large-font-size;

    line-height: @text-large-line-height;

    .hook-text-large;

}

/* Weight modifier

 ========================================================================== */

.uk-text-bold { font-weight: bolder; }

/* Transform modifier

 ========================================================================== */

.uk-text-uppercase { text-transform: uppercase !important; }

.uk-text-capitalize { text-transform: capitalize !important; }

.uk-text-lowercase { text-transform: lowercase !important; }

/* Color modifiers

 ========================================================================== */

.uk-text-muted { color: @text-muted-color !important; }

.uk-text-primary { color: @text-primary-color !important; }

.uk-text-success { color: @text-success-color !important; }

.uk-text-warning { color: @text-warning-color !important; }

.uk-text-danger { color: @text-danger-color !important; }

/* Background modifier

 ========================================================================== */

/*

 * 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera

 *    Default color is set to transparent

 * 2. Container fits the text

 * 3. Fallback color for IE11

 */

.uk-text-background {

    /* 1 */

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    /* 2 */

    display: inline-block;

    /* 3 */

    color: @text-background-color !important;

}

@supports (-webkit-background-clip: text) {

    .uk-text-background {

        background-color: @text-background-color;

        .hook-text-background;

    }

}

/* Alignment modifiers

 ========================================================================== */

.uk-text-left { text-align: left !important; }

.uk-text-right { text-align: right !important; }

.uk-text-center { text-align: center !important; }

.uk-text-justify { text-align: justify !important; }

/* Phone landscape and bigger */

@media (min-width: @breakpoint-small) {

    .uk-text-left\@s { text-align: left !important; }

    .uk-text-right\@s { text-align: right !important; }

    .uk-text-center\@s { text-align: center !important; }

}

/* Tablet landscape and bigger */

@media (min-width: @breakpoint-medium) {

    .uk-text-left\@m { text-align: left !important; }

    .uk-text-right\@m { text-align: right !important; }

    .uk-text-center\@m { text-align: center !important; }

}

/* Desktop and bigger */

@media (min-width: @breakpoint-large) {

    .uk-text-left\@l { text-align: left !important; }

    .uk-text-right\@l { text-align: right !important; }

    .uk-text-center\@l { text-align: center !important; }

}

/* Large screen and bigger */

@media (min-width: @breakpoint-xlarge) {

    .uk-text-left\@xl { text-align: left !important; }

    .uk-text-right\@xl { text-align: right !important; }

    .uk-text-center\@xl { text-align: center !important; }

}

/*

 * Vertical

 */

.uk-text-top { vertical-align: top !important; }

.uk-text-middle { vertical-align: middle !important; }

.uk-text-bottom { vertical-align: bottom !important; }

.uk-text-baseline { vertical-align: baseline !important; }

/* Wrap modifiers

 ========================================================================== */

/*

 * Prevent text from wrapping onto multiple lines

 */

.uk-text-nowrap { white-space: nowrap; }

/*

 * 1. Make sure a max-width is set after which truncation can occur

 * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis

 * 3. Fix for table cells

 */

.uk-text-truncate {

    /* 1 */

    max-width: 100%;

    /* 2 */

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

/* 2 */

th.uk-text-truncate,

td.uk-text-truncate { max-width: 0; }

/*

 * 1. Wrap long words onto the next line and break them if they are too long to fit

 * 2. Legacy `word-wrap` as fallback for `overflow-wrap`

 * 3. Add a hyphen where the word breaks

 * 4. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge

 *    Must use `break-all` to support IE11 and Edge

 */

.uk-text-break {

    /* 1 */

    overflow-wrap: break-word;

    /* 2 */

    word-wrap: break-word;

    /* 3 */

    -webkit-hyphens: auto;

    -ms-hyphens: auto;

    -moz-hyphens: auto;

    hyphens: auto;

}

/* 4 */

th.uk-text-break,

td.uk-text-break { word-break: break-all; }

// Hooks

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

.hook-text-misc;

.hook-text-lead() {}

.hook-text-meta() {}

.hook-text-small() {}

.hook-text-large() {}

.hook-text-background() {}

.hook-text-misc() {}

// Inverse

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

@inverse-text-lead-color:                      @inverse-global-color;

@inverse-text-meta-color:                      @inverse-global-muted-color;

@inverse-text-muted-color:                     @inverse-global-muted-color;

@inverse-text-primary-color:                   @inverse-global-color;

.hook-inverse() {

    .uk-text-lead {

        color: @inverse-text-lead-color;

        .hook-inverse-text-lead;

    }

    .uk-text-meta {

        color: @inverse-text-meta-color;

        .hook-inverse-text-meta;

    }

    .uk-text-muted { color: @inverse-text-muted-color !important; }

    .uk-text-primary { color: @inverse-text-primary-color !important; }

}

.hook-inverse-text-lead() {}

.hook-inverse-text-meta() {}