withfront/css/text-tools.css

Tools for frontend development especially with Bootstrap 3.x and jQuery 3.x also FontAwesome, jsCookie and more

/**
 * Text tools for colors, transforms, font-weight
 *
 * with prefixes and as follow:
 * .text-*
 * colors (white, white-imp, white-a, black, black-imp, black-a, gray, lgray)
 * AdminLTE colors (azure, orange, green, blue, pink, purple, bricky, yellow, red, lred)
 * if applied to father element will overwrite all inside (light, gray, dark)
 *
 * transforms (underline, underline1, line-trough, normal, bold, ucfirst, capitalize, lower, lowercase, upper, uppercase)
 *
 * .font-weight-*
 * Font Weight (normal, bold, from 100, 200, 300, 400, 500, 600, 700, 800 to 900)
 *
 * .w-*
 * new style .w-* (capitalize, lowercase, uppercase, underline)
 */
.text-outline {
    border: 1px solid #000000;
    padding: 10px;
}
.text-outline-white {
    border: 1px solid #FFFFFF;
    padding: 10px;
}

/* .text-white */
.text-white { color: #FFFFFF; }
.text-white-imp { color: #FFFFFF !important; }
.text-white-a { color: #FFFFFF; }
.text-white-a:hover { color: #FFFFFF; text-decoration: none; }

/* .text-black */
.text-black { color: #000000; }
.text-black-imp { color: #000000 !important; }
.text-black-a { color: #000000; }
.text-black-a:hover { color: #000000; text-decoration: none; }

/* myne */
.text-gray { color: #999999; }
.text-lgray { color: #CCCCCC; }

/* border bottom underline  */
.text-underline1 { border-bottom: 1px solid #000000; }
.text-underline1:hover { text-decoration: none; border-bottom: none; }

/* transform */
.text-line-through { text-decoration: line-through; }
.text-normal { font-weight: normal; }
.text-bold { font-weight: bold; }
.text-ucfirst, .text-capitalize, .w-capitalize { text-transform: capitalize; }
.text-lower, .text-lowercase, .w-lowercase { text-transform: lowercase; }
.text-upper, .text-uppercase, .w-uppercase { text-transform: uppercase; }
.text-underline, .w-underline { text-decoration: underline; }


/* 2016 & forward */
.text-azure { color: #0095C8 !important; }
.text-orange { color: #FF6600 !important; }
.text-green { color: #1FBBA6 !important; }
.text-blue { color: #5F8295 !important; }
.text-pink { color: #DD5A82 !important; }
.text-purple { color: #DD5A82 !important; }
.text-bricky { color: #894550 !important; }
.text-yellow { color: #FFB848 !important; }
.text-red { color: #C82E29 !important; }
.text-lred { color: #ED4141 !important; }


/* apply to all */
.text-light,
.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6,
.text-light .lead,
.text-light p,
.text-light a:not(.button),
.text-light i,
.text-light li,
.text-light label,
.text-light div,
.text-light span { color: #FFFFFF !important; }
.text-dark,
.text-dark h1,
.text-dark h2,
.text-dark h3,
.text-dark h4,
.text-dark h5,
.text-dark h6,
.text-dark p,
.text-dark .lead,
.text-dark a:not(.button),
.text-dark i,
.text-dark li,
.text-dark label,
.text-dark div,
.text-dark span { color: #111111 !important; }
.text-gray,
.text-gray h1,
.text-gray h2,
.text-gray h3,
.text-gray h4,
.text-gray h5,
.text-gray h6,
.text-gray .lead,
.text-gray p,
.text-gray a:not(.button),
.text-gray i,
.text-gray li,
.text-gray label,
.text-gray div,
.text-gray span { color: #CCCCCC !important; }

/* font weight */
.font-weight-normal { font-weight: normal; }
.font-weight-bold { font-weight: bold; }
.font-weight-100 { font-weight: 100 !important; }
.font-weight-300 { font-weight: 300 !important; }
.font-weight-400 { font-weight: 400 !important; }
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }
.font-weight-700 { font-weight: 700 !important; }
.font-weight-800 { font-weight: 800 !important; }
.font-weight-900 { font-weight: 900 !important; }