@shawnsandy/mix/css/color-samples.css

AtomMix--A toolkit for generating utility classes, components and styles-sheets for your design system, style-guide or website from SASS MAPS

/*
  Do not edit directly
  Generated on Sat, 18 Apr 2020 12:11:01 GMT
*/
/** GENERAL PURPOSE SASS-MIXINS **/
/** generates a series of modifies based a list of attributes  **/
/**


**/
/**
 * navbar
 */
.samp-black {
  color: #000000 !important; }
  .samp-black-hover:hover {
    color: rgba(0, 0, 0, 0.91) !important; }
  .samp-black\:hover:hover {
    color: rgba(0, 0, 0, 0.91) !important; }
  .samp-black\:focus:focus {
    color: rgba(0, 0, 0, 0.91) !important; }
  .samp-black-tp {
    color: rgba(0, 0, 0, 0.91) !important; }

.samp-white {
  color: #ffffff !important; }
  .samp-white-hover:hover {
    color: #e6e6e6 !important; }
  .samp-white\:hover:hover {
    color: #e6e6e6 !important; }
  .samp-white\:focus:focus {
    color: #e6e6e6 !important; }
  .samp-white-tp {
    color: #e6e6e6 !important; }

.samp-gray {
  color: #6a737d !important; }
  .samp-gray-hover:hover {
    color: rgba(106, 115, 125, 0.91) !important; }
  .samp-gray\:hover:hover {
    color: rgba(106, 115, 125, 0.91) !important; }
  .samp-gray\:focus:focus {
    color: rgba(106, 115, 125, 0.91) !important; }
  .samp-gray-tp {
    color: rgba(106, 115, 125, 0.91) !important; }

.samp-red {
  color: #d73a49 !important; }
  .samp-red-hover:hover {
    color: #b92534 !important; }
  .samp-red\:hover:hover {
    color: #b92534 !important; }
  .samp-red\:focus:focus {
    color: #b92534 !important; }
  .samp-red-tp {
    color: #b92534 !important; }

.samp-blue {
  color: #0366d6 !important; }
  .samp-blue-hover:hover {
    color: rgba(3, 102, 214, 0.91) !important; }
  .samp-blue\:hover:hover {
    color: rgba(3, 102, 214, 0.91) !important; }
  .samp-blue\:focus:focus {
    color: rgba(3, 102, 214, 0.91) !important; }
  .samp-blue-tp {
    color: rgba(3, 102, 214, 0.91) !important; }

.samp-orange {
  color: #f66a0a !important; }
  .samp-orange-hover:hover {
    color: #c65507 !important; }
  .samp-orange\:hover:hover {
    color: #c65507 !important; }
  .samp-orange\:focus:focus {
    color: #c65507 !important; }
  .samp-orange-tp {
    color: #c65507 !important; }

.samp-yellow {
  color: #ffd33d !important; }
  .samp-yellow-hover:hover {
    color: #ffc70a !important; }
  .samp-yellow\:hover:hover {
    color: #ffc70a !important; }
  .samp-yellow\:focus:focus {
    color: #ffc70a !important; }
  .samp-yellow-tp {
    color: #ffc70a !important; }

.samp-green {
  color: #28a745 !important; }
  .samp-green-hover:hover {
    color: rgba(40, 167, 69, 0.91) !important; }
  .samp-green\:hover:hover {
    color: rgba(40, 167, 69, 0.91) !important; }
  .samp-green\:focus:focus {
    color: rgba(40, 167, 69, 0.91) !important; }
  .samp-green-tp {
    color: rgba(40, 167, 69, 0.91) !important; }

.samp-olive {
  color: #b5cc18 !important; }
  .samp-olive-hover:hover {
    color: rgba(181, 204, 24, 0.91) !important; }
  .samp-olive\:hover:hover {
    color: rgba(181, 204, 24, 0.91) !important; }
  .samp-olive\:focus:focus {
    color: rgba(181, 204, 24, 0.91) !important; }
  .samp-olive-tp {
    color: rgba(181, 204, 24, 0.91) !important; }

.samp-test-yellow {
  color: #ffd33d !important; }
  .samp-test-yellow-hover:hover {
    color: #ffc70a !important; }
  .samp-test-yellow\:hover:hover {
    color: #ffc70a !important; }
  .samp-test-yellow\:focus:focus {
    color: #ffc70a !important; }
  .samp-test-yellow-tp {
    color: #ffc70a !important; }

.samp-test-green {
  color: #28a745 !important; }
  .samp-test-green-hover:hover {
    color: rgba(40, 167, 69, 0.91) !important; }
  .samp-test-green\:hover:hover {
    color: rgba(40, 167, 69, 0.91) !important; }
  .samp-test-green\:focus:focus {
    color: rgba(40, 167, 69, 0.91) !important; }
  .samp-test-green-tp {
    color: rgba(40, 167, 69, 0.91) !important; }

.samp-test-olive {
  color: #b5cc18 !important; }
  .samp-test-olive-hover:hover {
    color: rgba(181, 204, 24, 0.91) !important; }
  .samp-test-olive\:hover:hover {
    color: rgba(181, 204, 24, 0.91) !important; }
  .samp-test-olive\:focus:focus {
    color: rgba(181, 204, 24, 0.91) !important; }
  .samp-test-olive-tp {
    color: rgba(181, 204, 24, 0.91) !important; }

.samp-bg-black {
  background-color: #000000 !important; }
  .samp-bg-black-hover:hover {
    background-color: rgba(0, 0, 0, 0.91) !important; }
  .samp-bg-black\:hover:hover {
    background-color: rgba(0, 0, 0, 0.91) !important; }
  .samp-bg-black\:focus:focus {
    background-color: rgba(0, 0, 0, 0.91) !important; }
  .samp-bg-black-tp {
    background-color: rgba(0, 0, 0, 0.91) !important; }

.samp-bg-white {
  background-color: #ffffff !important; }
  .samp-bg-white-hover:hover {
    background-color: #e6e6e6 !important; }
  .samp-bg-white\:hover:hover {
    background-color: #e6e6e6 !important; }
  .samp-bg-white\:focus:focus {
    background-color: #e6e6e6 !important; }
  .samp-bg-white-tp {
    background-color: #e6e6e6 !important; }

.samp-bg-gray {
  background-color: #6a737d !important; }
  .samp-bg-gray-hover:hover {
    background-color: rgba(106, 115, 125, 0.91) !important; }
  .samp-bg-gray\:hover:hover {
    background-color: rgba(106, 115, 125, 0.91) !important; }
  .samp-bg-gray\:focus:focus {
    background-color: rgba(106, 115, 125, 0.91) !important; }
  .samp-bg-gray-tp {
    background-color: rgba(106, 115, 125, 0.91) !important; }

.samp-bg-red {
  background-color: #d73a49 !important; }
  .samp-bg-red-hover:hover {
    background-color: #b92534 !important; }
  .samp-bg-red\:hover:hover {
    background-color: #b92534 !important; }
  .samp-bg-red\:focus:focus {
    background-color: #b92534 !important; }
  .samp-bg-red-tp {
    background-color: #b92534 !important; }

.samp-bg-blue {
  background-color: #0366d6 !important; }
  .samp-bg-blue-hover:hover {
    background-color: rgba(3, 102, 214, 0.91) !important; }
  .samp-bg-blue\:hover:hover {
    background-color: rgba(3, 102, 214, 0.91) !important; }
  .samp-bg-blue\:focus:focus {
    background-color: rgba(3, 102, 214, 0.91) !important; }
  .samp-bg-blue-tp {
    background-color: rgba(3, 102, 214, 0.91) !important; }

.samp-bg-orange {
  background-color: #f66a0a !important; }
  .samp-bg-orange-hover:hover {
    background-color: #c65507 !important; }
  .samp-bg-orange\:hover:hover {
    background-color: #c65507 !important; }
  .samp-bg-orange\:focus:focus {
    background-color: #c65507 !important; }
  .samp-bg-orange-tp {
    background-color: #c65507 !important; }

.samp-bg-yellow {
  background-color: #ffd33d !important; }
  .samp-bg-yellow-hover:hover {
    background-color: #ffc70a !important; }
  .samp-bg-yellow\:hover:hover {
    background-color: #ffc70a !important; }
  .samp-bg-yellow\:focus:focus {
    background-color: #ffc70a !important; }
  .samp-bg-yellow-tp {
    background-color: #ffc70a !important; }

.samp-bg-green {
  background-color: #28a745 !important; }
  .samp-bg-green-hover:hover {
    background-color: rgba(40, 167, 69, 0.91) !important; }
  .samp-bg-green\:hover:hover {
    background-color: rgba(40, 167, 69, 0.91) !important; }
  .samp-bg-green\:focus:focus {
    background-color: rgba(40, 167, 69, 0.91) !important; }
  .samp-bg-green-tp {
    background-color: rgba(40, 167, 69, 0.91) !important; }

.samp-bg-olive {
  background-color: #b5cc18 !important; }
  .samp-bg-olive-hover:hover {
    background-color: rgba(181, 204, 24, 0.91) !important; }
  .samp-bg-olive\:hover:hover {
    background-color: rgba(181, 204, 24, 0.91) !important; }
  .samp-bg-olive\:focus:focus {
    background-color: rgba(181, 204, 24, 0.91) !important; }
  .samp-bg-olive-tp {
    background-color: rgba(181, 204, 24, 0.91) !important; }

.samp-test-bg-yellow {
  background-color: #ffd33d !important; }
  .samp-test-bg-yellow-hover:hover {
    background-color: #ffc70a !important; }
  .samp-test-bg-yellow\:hover:hover {
    background-color: #ffc70a !important; }
  .samp-test-bg-yellow\:focus:focus {
    background-color: #ffc70a !important; }
  .samp-test-bg-yellow-tp {
    background-color: #ffc70a !important; }

.samp-test-bg-green {
  background-color: #28a745 !important; }
  .samp-test-bg-green-hover:hover {
    background-color: rgba(40, 167, 69, 0.91) !important; }
  .samp-test-bg-green\:hover:hover {
    background-color: rgba(40, 167, 69, 0.91) !important; }
  .samp-test-bg-green\:focus:focus {
    background-color: rgba(40, 167, 69, 0.91) !important; }
  .samp-test-bg-green-tp {
    background-color: rgba(40, 167, 69, 0.91) !important; }

.samp-test-bg-olive {
  background-color: #b5cc18 !important; }
  .samp-test-bg-olive-hover:hover {
    background-color: rgba(181, 204, 24, 0.91) !important; }
  .samp-test-bg-olive\:hover:hover {
    background-color: rgba(181, 204, 24, 0.91) !important; }
  .samp-test-bg-olive\:focus:focus {
    background-color: rgba(181, 204, 24, 0.91) !important; }
  .samp-test-bg-olive-tp {
    background-color: rgba(181, 204, 24, 0.91) !important; }

.samp-border-black {
  border-color: #000000 !important; }
  .samp-border-black-hover:hover {
    border-color: rgba(0, 0, 0, 0.91) !important; }
  .samp-border-black\:hover:hover {
    border-color: rgba(0, 0, 0, 0.91) !important; }
  .samp-border-black\:focus:focus {
    border-color: rgba(0, 0, 0, 0.91) !important; }
  .samp-border-black-tp {
    border-color: rgba(0, 0, 0, 0.91) !important; }

.samp-border-white {
  border-color: #ffffff !important; }
  .samp-border-white-hover:hover {
    border-color: #e6e6e6 !important; }
  .samp-border-white\:hover:hover {
    border-color: #e6e6e6 !important; }
  .samp-border-white\:focus:focus {
    border-color: #e6e6e6 !important; }
  .samp-border-white-tp {
    border-color: #e6e6e6 !important; }

.samp-border-gray {
  border-color: #6a737d !important; }
  .samp-border-gray-hover:hover {
    border-color: rgba(106, 115, 125, 0.91) !important; }
  .samp-border-gray\:hover:hover {
    border-color: rgba(106, 115, 125, 0.91) !important; }
  .samp-border-gray\:focus:focus {
    border-color: rgba(106, 115, 125, 0.91) !important; }
  .samp-border-gray-tp {
    border-color: rgba(106, 115, 125, 0.91) !important; }

.samp-border-red {
  border-color: #d73a49 !important; }
  .samp-border-red-hover:hover {
    border-color: #b92534 !important; }
  .samp-border-red\:hover:hover {
    border-color: #b92534 !important; }
  .samp-border-red\:focus:focus {
    border-color: #b92534 !important; }
  .samp-border-red-tp {
    border-color: #b92534 !important; }

.samp-border-blue {
  border-color: #0366d6 !important; }
  .samp-border-blue-hover:hover {
    border-color: rgba(3, 102, 214, 0.91) !important; }
  .samp-border-blue\:hover:hover {
    border-color: rgba(3, 102, 214, 0.91) !important; }
  .samp-border-blue\:focus:focus {
    border-color: rgba(3, 102, 214, 0.91) !important; }
  .samp-border-blue-tp {
    border-color: rgba(3, 102, 214, 0.91) !important; }

.samp-border-orange {
  border-color: #f66a0a !important; }
  .samp-border-orange-hover:hover {
    border-color: #c65507 !important; }
  .samp-border-orange\:hover:hover {
    border-color: #c65507 !important; }
  .samp-border-orange\:focus:focus {
    border-color: #c65507 !important; }
  .samp-border-orange-tp {
    border-color: #c65507 !important; }

.samp-border-yellow {
  border-color: #ffd33d !important; }
  .samp-border-yellow-hover:hover {
    border-color: #ffc70a !important; }
  .samp-border-yellow\:hover:hover {
    border-color: #ffc70a !important; }
  .samp-border-yellow\:focus:focus {
    border-color: #ffc70a !important; }
  .samp-border-yellow-tp {
    border-color: #ffc70a !important; }

.samp-border-green {
  border-color: #28a745 !important; }
  .samp-border-green-hover:hover {
    border-color: rgba(40, 167, 69, 0.91) !important; }
  .samp-border-green\:hover:hover {
    border-color: rgba(40, 167, 69, 0.91) !important; }
  .samp-border-green\:focus:focus {
    border-color: rgba(40, 167, 69, 0.91) !important; }
  .samp-border-green-tp {
    border-color: rgba(40, 167, 69, 0.91) !important; }

.samp-border-olive {
  border-color: #b5cc18 !important; }
  .samp-border-olive-hover:hover {
    border-color: rgba(181, 204, 24, 0.91) !important; }
  .samp-border-olive\:hover:hover {
    border-color: rgba(181, 204, 24, 0.91) !important; }
  .samp-border-olive\:focus:focus {
    border-color: rgba(181, 204, 24, 0.91) !important; }
  .samp-border-olive-tp {
    border-color: rgba(181, 204, 24, 0.91) !important; }

.samp-test-border-yellow {
  border-color: #ffd33d !important; }
  .samp-test-border-yellow-hover:hover {
    border-color: #ffc70a !important; }
  .samp-test-border-yellow\:hover:hover {
    border-color: #ffc70a !important; }
  .samp-test-border-yellow\:focus:focus {
    border-color: #ffc70a !important; }
  .samp-test-border-yellow-tp {
    border-color: #ffc70a !important; }

.samp-test-border-green {
  border-color: #28a745 !important; }
  .samp-test-border-green-hover:hover {
    border-color: rgba(40, 167, 69, 0.91) !important; }
  .samp-test-border-green\:hover:hover {
    border-color: rgba(40, 167, 69, 0.91) !important; }
  .samp-test-border-green\:focus:focus {
    border-color: rgba(40, 167, 69, 0.91) !important; }
  .samp-test-border-green-tp {
    border-color: rgba(40, 167, 69, 0.91) !important; }

.samp-test-border-olive {
  border-color: #b5cc18 !important; }
  .samp-test-border-olive-hover:hover {
    border-color: rgba(181, 204, 24, 0.91) !important; }
  .samp-test-border-olive\:hover:hover {
    border-color: rgba(181, 204, 24, 0.91) !important; }
  .samp-test-border-olive\:focus:focus {
    border-color: rgba(181, 204, 24, 0.91) !important; }
  .samp-test-border-olive-tp {
    border-color: rgba(181, 204, 24, 0.91) !important; }