stylingutilities/stylingutilities/type.styl

lightweight css utilities library for the front-end web

@require "../node_modules/rfs/stylus.styl"

type-class-prefix = ""

.{type-class-prefix}display-1 {
    rfs-font-size(6rem)
}

.{type-class-prefix}display-2 {
    rfs-font-size(5.5rem)
}

.{type-class-prefix}display-3 {
    rfs-font-size(4.5rem)
}

.{type-class-prefix}display-4 {
    rfs-font-size(3.5rem)
}

.{type-class-prefix}bold {
    font-weight bold
}

.{type-class-prefix}bolder {
    font-weight bolder
}

.{type-class-prefix}light {
    font-weight 300
}

.{type-class-prefix}lighter {
    font-weight lighter
}

.{type-class-prefix}italic {
    font-style italic
}

.{type-class-prefix}normal-font-weight {
    font-weight 400
}

.{type-class-prefix}h1 {
    font-size 2.5rem
}

.{type-class-prefix}h1-r {
    rfs-font-size(2.5rem)
}

.{type-class-prefix}h2 {
    font-size 2.5rem
}

.{type-class-prefix}h2-r {
    rfs-font-size(2rem)
}

.{type-class-prefix}h3 {
    font-size 1.75rem
}

.{type-class-prefix}h3-r {
    rfs-font-size(1.75rem)
}

.{type-class-prefix}h4 {
    font-size 1.5rem
}

.{type-class-prefix}h4-r {
    rfs-font-size(1.5rem)
}

.{type-class-prefix}h5 {
    font-size 1.25rem
}

.{type-class-prefix}h5-r {
    rfs-font-size(1.25rem)
}

.{type-class-prefix}h6 {
    font-size 1rem
}

.{type-class-prefix}h6-r {
    rfs-font-size(1rem)
}

.{type-class-prefix}h-bold {
    font-weight 500
}

.{type-class-prefix}text-center {
    text-align center
}

.{type-class-prefix}text-left {
    text-align start
}

.{type-class-prefix}text-right {
    text-align end
}

.{type-class-prefix}text-wrap {
    white-space normal
}

.{type-class-prefix}text-nowrap {
    white-space nowrap
}

.{type-class-prefix}capitalize {
    text-transform capitalize
}

.{type-class-prefix}lowercase {
    text-transform lowercase
}

.{type-class-prefix}uppercase {
    text-transform uppercase
}

.{type-class-prefix}no-line {
    text-decoration-line none
}

.{type-class-prefix}strikethrough {
    text-decoration-line line-through
}

.{type-class-prefix}overline {
    text-decoration-line overline
}

.{type-class-prefix}underline {
    text-decoration-line underline
}

.{type-class-prefix}dotted-line {
    text-decoration-style dotted
}

.{type-class-prefix}wavy-line {
    text-decoration-style wavy
}

.{type-class-prefix}solid-line {
    text-decoration-style solid
}

.{type-class-prefix}double-line {
    text-decoration-style double
}

.{type-class-prefix}dashed-line {
    text-decoration-style dashed
}

.{type-class-prefix}list-none {
    list-style-type none
}

.{type-class-prefix}list-normal {
    list-style-type disc
}

.{type-class-prefix}list-decimal {
    list-style-type decimal
}

.{type-class-prefix}word-break {
    overflow-wrap break-word
    word-break break-word
}

.{type-class-prefix}kbd {
    background-color black
    box-shadow 0 0.1rem #121212
    color white
    border-radius 0.25rem
    padding: 0.1rem
}

.{type-class-prefix}kbd-light {
    background-color white
    box-shadow 0 0.1rem #c0c0c0
    color black
    border-radius 0.25rem
    padding: 0.1rem
}