@shawnsandy/mix/css/style.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 Sun, 06 Dec 2020 22:54:50 GMT
*/
/** GENERAL PURPOSE SASS-MIXINS **/
/** generates a series of modifies based a list of attributes  **/
/**


**/
/**
 * navbar
 */
body > * > section,
body > * > div,
body > * > article {
  max-width: 90%;
  margin: 0 auto; }
  @media screen and (min-width: 1280px) {
    body > * > section,
    body > * > div,
    body > * > article {
      max-width: 1600px;
      width: 80%; } }
  @media screen and (min-width: 1980px) {
    body > * > section,
    body > * > div,
    body > * > article {
      max-width: 1920px; } }

nav[aria-label],
header nav[aria-label] {
  background-color: transparent; }
  nav[aria-label] > section,
  nav[aria-label] > div,
  nav[aria-label] > ul,
  header nav[aria-label] > section,
  header nav[aria-label] > div,
  header nav[aria-label] > ul {
    height: 100%; }
    @media all and (min-width: 960px) {
      nav[aria-label] > section,
      nav[aria-label] > div,
      nav[aria-label] > ul,
      header nav[aria-label] > section,
      header nav[aria-label] > div,
      header nav[aria-label] > ul {
        display: flex;
        align-items: center;
        justify-content: space-between; } }
    @media all {
      nav[aria-label] > section,
      nav[aria-label] > div,
      nav[aria-label] > ul,
      header nav[aria-label] > section,
      header nav[aria-label] > div,
      header nav[aria-label] > ul {
        width: 100% !important;
        max-width: 100% !important; } }
    nav[aria-label] > section h1,
    nav[aria-label] > div h1,
    nav[aria-label] > ul h1,
    header nav[aria-label] > section h1,
    header nav[aria-label] > div h1,
    header nav[aria-label] > ul h1 {
      margin: 0;
      display: inline-flex;
      height: inherit;
      word-break: normal;
      margin: 0 1rem 0 0;
      padding: 0 1rem 0 0;
      height: 5rem; }
      nav[aria-label] > section h1 * + *,
      nav[aria-label] > div h1 * + *,
      nav[aria-label] > ul h1 * + *,
      header nav[aria-label] > section h1 * + *,
      header nav[aria-label] > div h1 * + *,
      header nav[aria-label] > ul h1 * + * {
        margin-left: 0.5rem; }
      nav[aria-label] > section h1 img,
      nav[aria-label] > div h1 img,
      nav[aria-label] > ul h1 img,
      header nav[aria-label] > section h1 img,
      header nav[aria-label] > div h1 img,
      header nav[aria-label] > ul h1 img {
        max-height: 70%;
        width: auto; }
      nav[aria-label] > section h1 span,
      nav[aria-label] > div h1 span,
      nav[aria-label] > ul h1 span,
      header nav[aria-label] > section h1 span,
      header nav[aria-label] > div h1 span,
      header nav[aria-label] > ul h1 span {
        font-size: 1.5rem;
        color: rgba(0, 0, 0, 0.8); }
    nav[aria-label] > section [aria-hidden],
    nav[aria-label] > div [aria-hidden],
    nav[aria-label] > ul [aria-hidden],
    header nav[aria-label] > section [aria-hidden],
    header nav[aria-label] > div [aria-hidden],
    header nav[aria-label] > ul [aria-hidden] {
      display: inline-flex; }
      @media all and (min-width: 980px) {
        nav[aria-label] > section [aria-hidden],
        nav[aria-label] > div [aria-hidden],
        nav[aria-label] > ul [aria-hidden],
        header nav[aria-label] > section [aria-hidden],
        header nav[aria-label] > div [aria-hidden],
        header nav[aria-label] > ul [aria-hidden] {
          display: none; } }
  nav[aria-label] ul,
  header nav[aria-label] ul {
    padding: 0;
    list-style: none; }
  nav[aria-label] div,
  header nav[aria-label] div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    nav[aria-label] div a,
    header nav[aria-label] div a {
      display: inline-flex; }
  nav[aria-label] a,
  nav[aria-label] li,
  header nav[aria-label] a,
  header nav[aria-label] li {
    text-align: center;
    display: flex;
    align-items: center;
    height: 100% !important;
    font-size: smaller;
    padding: 0.5rem;
    text-decoration: none; }
    nav[aria-label] a[aria-label*="logo"], nav[aria-label] a[aria-label*="branding"],
    nav[aria-label] li[aria-label*="logo"],
    nav[aria-label] li[aria-label*="branding"],
    header nav[aria-label] a[aria-label*="logo"],
    header nav[aria-label] a[aria-label*="branding"],
    header nav[aria-label] li[aria-label*="logo"],
    header nav[aria-label] li[aria-label*="branding"] {
      text-align: center;
      height: 100% !important; }
      nav[aria-label] a[aria-label*="logo"]:hover, nav[aria-label] a[aria-label*="logo"]:focus, nav[aria-label] a[aria-label*="branding"]:hover, nav[aria-label] a[aria-label*="branding"]:focus,
      nav[aria-label] li[aria-label*="logo"]:hover,
      nav[aria-label] li[aria-label*="logo"]:focus,
      nav[aria-label] li[aria-label*="branding"]:hover,
      nav[aria-label] li[aria-label*="branding"]:focus,
      header nav[aria-label] a[aria-label*="logo"]:hover,
      header nav[aria-label] a[aria-label*="logo"]:focus,
      header nav[aria-label] a[aria-label*="branding"]:hover,
      header nav[aria-label] a[aria-label*="branding"]:focus,
      header nav[aria-label] li[aria-label*="logo"]:hover,
      header nav[aria-label] li[aria-label*="logo"]:focus,
      header nav[aria-label] li[aria-label*="branding"]:hover,
      header nav[aria-label] li[aria-label*="branding"]:focus {
        background-color: transparent; }
    nav[aria-label] a:hover, nav[aria-label] a:focus,
    nav[aria-label] li:hover,
    nav[aria-label] li:focus,
    header nav[aria-label] a:hover,
    header nav[aria-label] a:focus,
    header nav[aria-label] li:hover,
    header nav[aria-label] li:focus {
      background-color: rgba(0, 0, 0, 0.1); }
    @media all and (min-width: 980px) {
      nav[aria-label] a,
      nav[aria-label] li,
      header nav[aria-label] a,
      header nav[aria-label] li {
        padding: 0 1.5rem; } }
  nav[aria-label] li a,
  header nav[aria-label] li a {
    padding: 0; }
  @media all and (min-width: 980px) {
    nav[aria-label]:first-of-type,
    header nav[aria-label]:first-of-type {
      min-height: 10vh;
      height: 5rem; } }

/** generate all components in specified map--default component **/
.mx-btn {
  height: 2.5rem;
  padding: 0 1.5rem;
  display: inline-block;
  text-align: center;
  transition: all 0.2s;
  border: none; }
  .mx-btn:focus {
    border: none;
    outline: none; }
  .mx-btn-pill {
    border-radius: 9999rem; }
  .mx-btn-rounded {
    border-radius: 0.31rem; }

.mx-primary {
  color: #000000; }
  .mx-primary:hover {
    color: #010101; }

/** generate buttons using the modifier **/
.mx-btn {
  height: 2.5rem;
  padding: 0 1.5rem;
  display: inline-block;
  text-align: center;
  transition: all 0.2s;
  border: none; }
  .mx-btn:focus {
    border: none;
    outline: none; }
  .mx-btn-pill {
    border-radius: 9999rem; }
  .mx-btn-rounded {
    border-radius: 0.31rem; }

.mx-font-size-default {
  font-size: 1rem; }

.mx-font-size-1sm {
  font-size: 0.702rem; }

.mx-font-size-2sm {
  font-size: 0.79rem; }

.mx-font-size-3sm {
  font-size: 0.889rem; }

.mx-font-size-4md {
  font-size: 1.26rem; }

.mx-font-size-5md {
  font-size: 1.424rem; }

.mx-font-size-6md {
  font-size: 1.602rem; }

.mx-font-size-7lg {
  font-size: 1.802rem; }

.mx-font-size-8lg {
  font-size: 2.369rem; }

.mx-font-size-9lg {
  font-size: 3.157rem; }

.mx-font-size-10xl {
  font-size: 4.209rem; }

.mx-font-size-11xl {
  font-size: 5.61rem; }

.mx-font-size-12xl {
  font-size: 7.478rem; }

.mx-weight-medium {
  font-weight: 500; }

.mx-weight-bold {
  font-weight: 700; }

.mx-black {
  color: #000000; }

.mx-black-hover:hover {
  color: rgba(0, 0, 0, 0.8); }

.mx-black\:hover:hover {
  color: #000000; }

.mx-black\:focus:focus {
  color: #000000; }

.mx-black-tp {
  color: black; }

.mx-bg-black {
  background-color: #000000; }

.mx-bg-black-hover:hover {
  background-color: rgba(0, 0, 0, 0.8); }

.mx-bg-black\:hover:hover {
  background-color: #000000; }

.mx-bg-black\:focus:focus {
  background-color: #000000; }

.mx-bg-black-tp {
  background-color: black; }

.mx-border-black {
  border-color: #000000; }

.mx-border-black-hover:hover {
  border-color: rgba(0, 0, 0, 0.8); }

.mx-border-black\:hover:hover {
  border-color: #000000; }

.mx-border-black\:focus:focus {
  border-color: #000000; }

.mx-border-black-tp {
  border-color: black; }

.mx-white {
  color: #ffffff; }

.mx-white-hover:hover {
  color: rgba(255, 255, 255, 0.8); }

.mx-white\:hover:hover {
  color: #ffffff; }

.mx-white\:focus:focus {
  color: #ffffff; }

.mx-white-tp {
  color: #f7f7f7; }

.mx-bg-white {
  background-color: #ffffff; }

.mx-bg-white-hover:hover {
  background-color: rgba(255, 255, 255, 0.8); }

.mx-bg-white\:hover:hover {
  background-color: #ffffff; }

.mx-bg-white\:focus:focus {
  background-color: #ffffff; }

.mx-bg-white-tp {
  background-color: #f7f7f7; }

.mx-border-white {
  border-color: #ffffff; }

.mx-border-white-hover:hover {
  border-color: rgba(255, 255, 255, 0.8); }

.mx-border-white\:hover:hover {
  border-color: #ffffff; }

.mx-border-white\:focus:focus {
  border-color: #ffffff; }

.mx-border-white-tp {
  border-color: #f7f7f7; }

.mx-gray {
  color: #6a737d; }

.mx-gray-hover:hover {
  color: rgba(106, 115, 125, 0.8); }

.mx-gray\:hover:hover {
  color: #6a737d; }

.mx-gray\:focus:focus {
  color: #6a737d; }

.mx-gray-tp {
  color: #636b75; }

.mx-bg-gray {
  background-color: #6a737d; }

.mx-bg-gray-hover:hover {
  background-color: rgba(106, 115, 125, 0.8); }

.mx-bg-gray\:hover:hover {
  background-color: #6a737d; }

.mx-bg-gray\:focus:focus {
  background-color: #6a737d; }

.mx-bg-gray-tp {
  background-color: #636b75; }

.mx-border-gray {
  border-color: #6a737d; }

.mx-border-gray-hover:hover {
  border-color: rgba(106, 115, 125, 0.8); }

.mx-border-gray\:hover:hover {
  border-color: #6a737d; }

.mx-border-gray\:focus:focus {
  border-color: #6a737d; }

.mx-border-gray-tp {
  border-color: #636b75; }

.mx-lightgray {
  color: #d3d3d3; }

.mx-lightgray-hover:hover {
  color: rgba(211, 211, 211, 0.8); }

.mx-lightgray\:hover:hover {
  color: #d3d3d3; }

.mx-lightgray\:focus:focus {
  color: #d3d3d3; }

.mx-lightgray-tp {
  color: #cbcbcb; }

.mx-bg-lightgray {
  background-color: #d3d3d3; }

.mx-bg-lightgray-hover:hover {
  background-color: rgba(211, 211, 211, 0.8); }

.mx-bg-lightgray\:hover:hover {
  background-color: #d3d3d3; }

.mx-bg-lightgray\:focus:focus {
  background-color: #d3d3d3; }

.mx-bg-lightgray-tp {
  background-color: #cbcbcb; }

.mx-border-lightgray {
  border-color: #d3d3d3; }

.mx-border-lightgray-hover:hover {
  border-color: rgba(211, 211, 211, 0.8); }

.mx-border-lightgray\:hover:hover {
  border-color: #d3d3d3; }

.mx-border-lightgray\:focus:focus {
  border-color: #d3d3d3; }

.mx-border-lightgray-tp {
  border-color: #cbcbcb; }

.mx-red {
  color: #d73a49; }

.mx-red-hover:hover {
  color: rgba(215, 58, 73, 0.8); }

.mx-red\:hover:hover {
  color: #d73a49; }

.mx-red\:focus:focus {
  color: #d73a49; }

.mx-red-tp {
  color: #d42d3d; }

.mx-bg-red {
  background-color: #d73a49; }

.mx-bg-red-hover:hover {
  background-color: rgba(215, 58, 73, 0.8); }

.mx-bg-red\:hover:hover {
  background-color: #d73a49; }

.mx-bg-red\:focus:focus {
  background-color: #d73a49; }

.mx-bg-red-tp {
  background-color: #d42d3d; }

.mx-border-red {
  border-color: #d73a49; }

.mx-border-red-hover:hover {
  border-color: rgba(215, 58, 73, 0.8); }

.mx-border-red\:hover:hover {
  border-color: #d73a49; }

.mx-border-red\:focus:focus {
  border-color: #d73a49; }

.mx-border-red-tp {
  border-color: #d42d3d; }

.mx-blue {
  color: #0366d6; }

.mx-blue-hover:hover {
  color: rgba(3, 102, 214, 0.8); }

.mx-blue\:hover:hover {
  color: #0366d6; }

.mx-blue\:focus:focus {
  color: #0366d6; }

.mx-blue-tp {
  color: #035fc7; }

.mx-bg-blue {
  background-color: #0366d6; }

.mx-bg-blue-hover:hover {
  background-color: rgba(3, 102, 214, 0.8); }

.mx-bg-blue\:hover:hover {
  background-color: #0366d6; }

.mx-bg-blue\:focus:focus {
  background-color: #0366d6; }

.mx-bg-blue-tp {
  background-color: #035fc7; }

.mx-border-blue {
  border-color: #0366d6; }

.mx-border-blue-hover:hover {
  border-color: rgba(3, 102, 214, 0.8); }

.mx-border-blue\:hover:hover {
  border-color: #0366d6; }

.mx-border-blue\:focus:focus {
  border-color: #0366d6; }

.mx-border-blue-tp {
  border-color: #035fc7; }

.mx-orange {
  color: #f66a0a; }

.mx-orange-hover:hover {
  color: rgba(246, 106, 10, 0.8); }

.mx-orange\:hover:hover {
  color: #f66a0a; }

.mx-orange\:focus:focus {
  color: #f66a0a; }

.mx-orange-tp {
  color: #e86409; }

.mx-bg-orange {
  background-color: #f66a0a; }

.mx-bg-orange-hover:hover {
  background-color: rgba(246, 106, 10, 0.8); }

.mx-bg-orange\:hover:hover {
  background-color: #f66a0a; }

.mx-bg-orange\:focus:focus {
  background-color: #f66a0a; }

.mx-bg-orange-tp {
  background-color: #e86409; }

.mx-border-orange {
  border-color: #f66a0a; }

.mx-border-orange-hover:hover {
  border-color: rgba(246, 106, 10, 0.8); }

.mx-border-orange\:hover:hover {
  border-color: #f66a0a; }

.mx-border-orange\:focus:focus {
  border-color: #f66a0a; }

.mx-border-orange-tp {
  border-color: #e86409; }

.mx-yellow {
  color: #ffd33d; }

.mx-yellow-hover:hover {
  color: rgba(255, 211, 61, 0.8); }

.mx-yellow\:hover:hover {
  color: #ffd33d; }

.mx-yellow\:focus:focus {
  color: #ffd33d; }

.mx-yellow-tp {
  color: #ffd02e; }

.mx-bg-yellow {
  background-color: #ffd33d; }

.mx-bg-yellow-hover:hover {
  background-color: rgba(255, 211, 61, 0.8); }

.mx-bg-yellow\:hover:hover {
  background-color: #ffd33d; }

.mx-bg-yellow\:focus:focus {
  background-color: #ffd33d; }

.mx-bg-yellow-tp {
  background-color: #ffd02e; }

.mx-border-yellow {
  border-color: #ffd33d; }

.mx-border-yellow-hover:hover {
  border-color: rgba(255, 211, 61, 0.8); }

.mx-border-yellow\:hover:hover {
  border-color: #ffd33d; }

.mx-border-yellow\:focus:focus {
  border-color: #ffd33d; }

.mx-border-yellow-tp {
  border-color: #ffd02e; }

.mx-green {
  color: #008000; }

.mx-green-hover:hover {
  color: rgba(0, 128, 0, 0.8); }

.mx-green\:hover:hover {
  color: #008000; }

.mx-green\:focus:focus {
  color: #008000; }

.mx-green-tp {
  color: #007100; }

.mx-bg-green {
  background-color: #008000; }

.mx-bg-green-hover:hover {
  background-color: rgba(0, 128, 0, 0.8); }

.mx-bg-green\:hover:hover {
  background-color: #008000; }

.mx-bg-green\:focus:focus {
  background-color: #008000; }

.mx-bg-green-tp {
  background-color: #007100; }

.mx-border-green {
  border-color: #008000; }

.mx-border-green-hover:hover {
  border-color: rgba(0, 128, 0, 0.8); }

.mx-border-green\:hover:hover {
  border-color: #008000; }

.mx-border-green\:focus:focus {
  border-color: #008000; }

.mx-border-green-tp {
  border-color: #007100; }

.mx-vh-5 {
  height: 5vh; }

.mx-vh-10 {
  height: 10vh; }

.mx-vh-20 {
  height: 20vh; }

.mx-vh-30 {
  height: 30vh; }

.mx-vh-40 {
  height: 40vh; }

.mx-vh-50 {
  height: 50vh; }

.mx-vh-60 {
  height: 60vh; }

.mx-vh-70 {
  height: 70vh; }

.mx-vh-80 {
  height: 80vh; }

.mx-vh-90 {
  height: 90vh; }

.mx-vh-100 {
  height: 100vh; }

.mx-vw5 {
  width: 5vw; }

.mx-vw10 {
  width: 10vw; }

.mx-vw20 {
  width: 20vw; }

.mx-vw30 {
  width: 30vw; }

.mx-vw40 {
  width: 40vw; }

.mx-vw50 {
  width: 50vw; }

.mx-vw60 {
  width: 60vw; }

.mx-vw70 {
  width: 70vw; }

.mx-vw80 {
  width: 80vw; }

.mx-vw90 {
  width: 90vw; }

.mx-vw100 {
  width: 100vw; }