Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <nav class="leftnav">
  <div class="leftnav__title">
    <div class="leftnav__logo"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-312/MHE_Logo_RGB.png"></div>
    <h1 class="leftnav__headline">Grade - Subject</h1>
    <h2 class="leftnav__sub-headline">UI Pattern Library</h2>
  </div>
  <div class="leftnav__toc">
    <h3 class="leftnav__toc-headline"><a href=#overview>Overview</a></h3>
    <ul>
      <li><a href=#introduction>Introduction</a></li>
      <li><a href=#colors>Colors</a></li>
      <li><a href=#typography>Typography</a></li>
      <li><a href=#buttons>Buttons</a></li>
<!--       <li>Input Fields</li> -->
    </ul>
<!--     <h3 class="leftnav__toc-headline">Design</h3>
    <ul>
      <li>Buttons</li>
      <li>Downloads</li>
      <li></li>
      <li></li>
    </ul> -->
  </div>
</nav>
<div id="container">
  <div id="warning">
    <strong>ATTENTION:</strong> This is a framework for a style guide. All visuals are placeholders.
  </div>
  <div id="container__content">
    <section name="Introduction">
      <h1>Overview</h1>
      <a name="overview" class="anchor-h1"></a>
      <h2>Introduction</h2>
      <a name="introduction" class="anchor"></a>
      <p>Maintained by the School UX team, this style guide was created to act as a central location to house a live inventory of UI components, brand guidelines, brand assets, code snippets, developer guidelines and more. Anyone working on the Next-Gen product is encouraged to stay familiar with this styleguide and help ensure that it is kept up-to-date.</p>
    </section> 
    <section name="Colors">
      <h2>Colors</h2>
      <a name="colors" class="anchor"></a>
      <p>All digital content, visuals and interactives in the McGraw-Hill Education Next Gen product must have be <a href="https://www.w3.org/TR/WCAG20/">WCAG 2.0 - AA</a> compliant.</p>    
      <h3>Primary UI Colors</h3>
      <div class="colors">
        <div class="colors__block colors__block--prim-1">
          <div class="colors__block--txt">
            <p><span>$color--primary-1</span><br>#3e50b4</p>
          </div>  
        </div>
        <div class="colors__block colors__block--prim-2">
          <div class="colors__block--txt">
            <p><span>$color--primary-2</span><br>#19227d</p>
          </div>  
        </div>
        <div class="colors__block colors__block--prim-3">
          <div class="colors__block--txt">
            <p><span>$color--primary-3</span><br>#2f3e9e</p>
          </div>  
        </div>
        <div class="colors__block colors__block--prim-4">
          <div class="colors__block--txt">
            <p><span>$color--primary-4</span><br>#7885ca</p>
          </div>  
        </div>
        <div class="colors__block colors__block--prim-5">
          <div class="colors__block--txt">
            <p><span>$color--primary-5</span><br>#c4c9e8</p>
          </div>  
        </div>
      </div>  
      <h3>Accent UI Colors</h3>
      <div class="colors">
        <div class="colors__block colors__block--accent-1">
          <div class="colors__block--txt">
            <p><span>$color--accent-1</span><br>#ff5621</p>
          </div>  
        </div>
        <div class="colors__block colors__block--accent-2">
          <div class="colors__block--txt">
            <p><span>$color--accent-2</span><br>#be350b</p>
          </div>  
        </div>
        <div class="colors__block colors__block--accent-3">
          <div class="colors__block--txt">
            <p><span>$color--accent-3</span><br>#ff3c00</p>
          </div>  
        </div>
        <div class="colors__block colors__block--accent-4">
          <div class="colors__block--txt">
            <p><span>$color--accent-4</span><br>#ffcbbb</p>
          </div>  
        </div>
      </div>  
    </section>
    <section name="Typography">
      <h2>Typography</h2>
      <a name="typography" class="anchor"></a>
      <p>The McGraw-Hill Education default digital typeface for Connect2 is Proxima Nova. Additional typefaces may be requested on a program-by-program basis.</p>
      <h3>Headers</h3>
      <div class="type">
        <div class="type__example">
          <h1>H1 - The quick brown fox jumps over the lazy dog</h1>
        </div>
        <div class="type__variable">
          <code>
            <span class="purple">h1</span> {
            <ul>
              <li><span class="blue">font-family</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">font-size</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">weight</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">color</span>: <span class="green">$VARIABLE</span>;</li>
            </ul>
            }
          </code>
        </div>
      </div>
      <div class="type">
        <div class="type__example">
          <h2>H2 - The quick brown fox jumps over the lazy dog</h2>
        </div>
        <div class="type__variable">
          <code>
            <span class="purple">h2</span> {
            <ul>
              <li><span class="blue">font-family</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">font-size</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">weight</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">color</span>: <span class="green">$VARIABLE</span>;</li>
            </ul>
            }
          </code>
        </div>
      </div>
      <div class="type">
        <div class="type__example">
          <h3>H3 - The quick brown fox jumps over the lazy dog</h3>
        </div>
        <div class="type__variable">
          <code>
            <span class="purple">h3</span> {
            <ul>
              <li><span class="blue">font-family</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">font-size</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">weight</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">color</span>: <span class="green">$VARIABLE</span>;</li>
            </ul>
            }
          </code>
        </div>
      </div>
      <div class="type">
        <div class="type__example">
          <h4>H4 - The quick brown fox jumps over the lazy dog</h4>
        </div>
        <div class="type__variable">
          <code>
            <span class="purple">h4</span> {
            <ul>
              <li><span class="blue">font-family</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">font-size</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">weight</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">color</span>: <span class="green">$VARIABLE</span>;</li>
            </ul>
            }
          </code>
        </div>
      </div>
      <div class="type">
        <div class="type__example">
          <h5>H5 - The quick brown fox jumps over the lazy dog</h5>
        </div>
        <div class="type__variable">
          <code>
            <span class="purple">h5</span> {
            <ul>
              <li><span class="blue">font-family</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">font-size</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">weight</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">color</span>: <span class="green">$VARIABLE</span>;</li>
            </ul>
            }
          </code>
        </div>
      </div>
      <div class="type">
        <div class="type__example">
          <h6>H6 - The quick brown fox jumps over the lazy dog</h6>
        </div>
        <div class="type__variable">
          <code>
            <span class="purple">h6</span> {
            <ul>
              <li><span class="blue">font-family</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">font-size</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">weight</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">color</span>: <span class="green">$VARIABLE</span>;</li>
            </ul>
            }
          </code>
        </div>
      </div>
      <h3>Body</h3>
      <div class="type">
        <div class="type__example type__example--body">
          <p>Typi qui nunc nobis videntur parum clari fiant sollemnes in. Processus dynamicus qui sequitur mutationem consuetudium lectorum mirum est notare quam. Placerat facer possim assum typi non habent claritatem insitam est usus legentis in iis qui facit.</p>
        </div>
        <div class="type__variable">
          <code>
            <span class="purple">p</span> {
            <ul>
              <li><span class="blue">font-family</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">font-size</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">weight</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">color</span>: <span class="green">$VARIABLE</span>;</li>
              <li><span class="blue">line-height</span>: <span class="green">$VARIABLE</span>;</li>
            </ul>
            }
          </code>
        </div>
      </div>
    </section>
    <section name="Buttons">
      <h2>Buttons</h2>
      <a name="buttons" class="anchor"></a>
      <h3 style="padding-top: 0px;">Primary Interaction Button</h3>
      <p>Primary buttons should be used to signify necessary or mandatory actions to be taken by the student. For accessibility the outline should be set to browser defaults.</p>
      <div class="showcase">
        <div class="showcase__example">
          <button class="btn btn__primary-1">Submit</button>
        </div>
        <div class="showcase__code">
          <span class="purple">btn__primary</span> {
           <ul>
             <li><span class="blue">box-sizing</span>: <span class="purple">border-box</span>;</li>
             <li><span class="blue">height</span>: <span class="yellow"><span class="red">40px</span></span>;</li>
             <li><span class="blue">width</span>: <span class="yellow"><span class="red">120px</span></span>;</li>
             <li><span class="blue">font-family</span>: <span class="green">'Proxima Nova'</span>, <span class="purple">Helvetica</span>, <span class="purple">Arial</span>, <span class="purple">sans-serif</span>;</li>
             <li><span class="blue">font-size</span>: <span class="yellow"><span class="red">18px</span></span>;</li>
             <li><span class="blue">border-radius</span>: <span class="red">4px</span>;</li>
             <li><span class="blue">transition</span>: <span class="purple">all</span> <span class="red">.02s</span> linear</span>;</li>
             <li><span class="blue">background-color</span>: <span class="green">$color--primary-1</span>;</li>
             <li><span class="blue">border</span>: <span class="red">1px</span> <span class="purple">solid</span><span class="green"> $color--primary-1</span>;</li>
             <li><span class="blue">color</span>: <span class="purple">#ffffff</span>;</li>
          </ul>
          }
          <br><br>
          <span class="purple">btn__primary:hover</span> {
          <ul>
            <li><span class="blue">background-color</span>: <span class="purple">lighten</span>(<span class="green">$color--primary-1</span>, <span class="red">5%</span>);</li>
            <li><span class="blue">border-color</span>: <span class="purple">lighten</span>(<span class="green">$color--primary-1</span>, <span class="red">5%</span>);</li>
          </ul>
          }
          <br><br>
          <span class="purple">btn__primary:active</span> {
          <ul>
            <li><span class="blue">background-color</span>: <span class="purple">darken</span>(<span class="green">$color--primary-1</span>, <span class="red">5%</span>);</li>
            <li><span class="blue">border-color</span>: <span class="purple">darken</span>(<span class="green">$color--primary-1</span>, <span class="red">5%</span>);</li>
          </ul>
          }
        </div>
      </div>
      <h3>Secondary Interaction Button</h3>
      <p>Secondary buttons should be used to signify optional, infrequent or subtle actions.</p>
      <div class="showcase">
        <div class="showcase__example">
          <button class="btn btn__secondary-1">Reset</button>
        </div>
        <div class="showcase__code">
          <span class="purple">btn__secondary</span> {
          <ul>
            <li><span class="blue">box-sizing</span>: <span class="purple">border-box</span>;</li>
            <li><span class="blue">height</span>: <span class="red">40px</span>;</li>
            <li><span class="blue">width</span>: <span class="red">120px</span>;</li>
            <li><span class="blue">font-family</span>: <span class="green">'Proxima Nova'</span>, <span class="purple">Helvetica</span>, <span class="purple">Arial</span>, <span class="purple">sans-serif</span>;</li>
            <li><span class="blue">font-size</span>: <span class="red">18px</span>;</li>
            <li><span class="blue">border-radius</span>: <span class="red">4px</span>;</li>
            <li><span class="blue">transition</span>: all <span class="red">.02s</span> <span class="purple">linear</span>;</li>
            <li><span class="blue">background-color</span>: <span class="purple">#ffffff</span>;</li>
            <li><span class="blue">border</span>: <span class="red">1px</span> <span class="purple">solid </span><span class="green">$color--primary-1</span>;</li>
            <li><span class="blue">color</span>: <span class="green">$color--primary-3</span>;</li>
          </ul>
          }
          <br><br>
          <span class="purple">btn__secondary:hover </span>{
          <ul>
            <li><span class="blue">border-color</span>: <span class="purple">lighten</span>(<span class="green">$color--primary-1</span>, <span class="red">5%</span>);</li>
            <li><span class="blue">color</span>: <span class="green">$color--primary-3</span>;</li>
          </ul>
          }
          <br><br>
          <span class="purple">btn__secondary:active</span> {
          <ul>
            <li><span class="blue">background-color</span>: <span class="purple">darken</span>(<span class="purple">#ffffff</span>, <span class="red">5%</span>);</li>
            <li><span class="blue">border-color</span>: <span class="purple">darken</span>(<span class="green">$color--primary-1</span>, <span class="red">5%</span>);</li>
            <li><span class="blue">color</span>: <span class="purple">darken</span>(<span class="green">$color--primary-3</span>, <span class="red">5%</span>);</li>
          </ul>
          }
        </div>
      </div>
      <h3>Tertiary Interaction Button</h3>
      <p>Tertiary buttons are for interactions that are not required </p>
      <div class="showcase">
        <div class="showcase__example">
          <p class="tertiary__text"><i class="fa fa-chevron-right" aria-hidden="true"></i> <span>READ MORE</span>: The quick brown fox jumps over the lazy dog.</p>
        </div>
        <div class="showcase__code">
          Code snippet goes HERE.
        </div>
      </div>
    </section>
    <div id="footer">
      <p style="margin-bottom: 0px"><i class="fa fa-pied-piper" aria-hidden="true"></i></p>
<!--       <p><span><strong>Project Status:</strong> On hold.</span></p> -->
    </div>
  </div>
</div>

            
          
!
            
              $color--mhered: #db002b;
$color--primary-1: #3e50b4;
$color--primary-2: #19227d;
$color--primary-3: #2f3e9e;
$color--primary-4: #7885ca;
$color--primary-5: #c4c9e8;
$color--accent-1: #ff5621;
$color--accent-2: #be350b;
$color--accent-3: #ff3c00;
$color--accent-4: #ffcbbb;

$font--body: 'Proxima Nova', Helvetica, Arial, sans-serif;
$font--body-size: 18px;
$font--body-line-height: 26px;
$font--body-color: black;

$font--header: 'Proxima Nova', Helvetica, Arial, sans-serif;
$font--h1-size: 32px;
$font--h1-color: red;
$font--h1-weight: 700;

$font--h2-size: 24px;
$font--h2-color: red;
$font--h2-weight: 600;

$font--h3-size: 20px;
$font--h3-color: red;
$font--h3-weight: 500;

$font--h4-size: default;
$font--h4-color: red;
$font--h4-weight: 400;

$font--h5-size: default;
$font--h5-color: red;
$font--h5-weight: 400;

$font--h6-size: default;
$font--h6-color: red;
$font--h6-weight: 400;

body {
  font-family: 'Proxima Nova', helvetica, arial, sans-serif;
  font-size: 18px;
}

code {
  
  & ul {
    padding-left: 20px;
    margin: 0;
  }
  
  & li {
    list-style: none;
  }
}

.leftnav {
  display: inline-block;
  position: fixed;
  width: 300px;
  height: 100vh;
  // background-color: #f9fafc;
  background-color: #f2f2f2;
  border-right: 1px solid #d1d1d1;
  box-sizing: border-box;
  overflow-y: auto;
  
  &__title {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #d1d1d1;
  }
  
  &__logo {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    width: 100%;
    margin: 0 0 10px 0;
    
    > img {
        width: 60px;
        height: 60px;
    }
  }
  
  &__headline {
    font-size: 14px;
    color: #666666;
    text-align: center;
    margin: 0 0 6px 0;
  }
  
  &__sub-headline {
    font-size: 20px;
    color: #555555;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
  }
  
  &__toc {
    padding: 0 40px;
    font-size: 18px;
    color: #666666;
    
    &-headline {
      margin: 0 0 10px 0;
      color: #555555;
      
      & a {
        text-decoration: none;
        color: #555555;
        // padding-left: 36px;
        // border-left: 4px solid rgba(0,0,0,0);
        // box-sizing: border-box;

        &:visited {
          color: #555555;
        }
        
        &:hover {
          color: $color--mhered;
          // border-left: 4px solid $color--mhered;
        }
        
        &:active {
          color: darken($color--mhered, 10%);
        }
      }
      
      &:not(:first-child) {
        padding-top: 20px;
      }
    }
    
    & > ul {
      list-style-type: none;
      padding-left: 0px;
      margin: 4px 0;
      font-size: 17px;
      
      & li {
        margin-bottom: 10px;
        
        & a {
          text-decoration: none;
          color: #666666;
          
          &:visited {
            color: #666666;
          }
          
          &:hover {
            color: $color--mhered;
          }
          
          &:active {
            color: darken($color--mhered, 10%);
          }
        }
      }
    }
  }
}

#container {
  display: inline-block;
  position: fixed;
  width: calc(100% - 300px);
  height: 100vh;
  top: 0;
  left: 300px;
  overflow-y: auto;
  color: #555555;
  
  .anchor {
    display: block;
    position: relative;
    top: -80px;
    // visibility: hidden;
    
    &-h1 {
      display: block;
      position: relative;
      top: -113px;
    }
  }
  
  & #warning {
    position: fixed;
    // display: none;
    width: calc(100% - 320px);
    color: white;
    padding: 10px;
    // height: 50px;
    // line-height: 50px;
    background-color: darken($color--mhered, 3%);
    text-align: center;
    z-index: 100;
    box-shadow: 0 0px 0px rgba(0,0,0,.5);
  }
  
  & section {
    margin-bottom: 80px; 
  }
  
  & a {
    text-decoration: none;
    color: darken($color--mhered,10%);
  }
  
  & h1 {
    margin: 113px 0 40px 0;
    font-size: 36px;
    color: #555555;
    border-bottom: 1px solid $color--mhered;
  }
  
  & h2 {
    margin: 0 0 12px 0;
    font-size: 26px;
    color: darken($color--mhered,10%);
  }
  
  & h3 {
    margin: 0 0 14px 0;
    padding-top: 10px;
    font-size: 22px;
    font-weight: 600;
  }
  
  & p {
    line-height: 28px;
    margin: 0 0 24px 0;
  }
  
  &__content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    // background-color: salmon;
  }
}

.colors {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  
  &__block {
    flex-grow: 0;
    text-align: left;
    min-width: 180px;
    height: 180px;
    border-radius: 4px;
    margin: 0 20px 20px 0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    
    &--txt {
      font-size: 16px;
      font-weight: 200;
      // color: #ffffff;
      color: #444444;
      position: relative;
      display: block;
      height: 64px;
      background-color: #ffffff;
      // background-color: #f2f2f2;
      top: 109px;
      padding: 7px 10px 0 10px;
      margin-bottom: 20px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      text-transform: uppercase;
    
      & span {
        font-weight: 600;
        text-transform: none;
        font-size: 18px;
      }
    }
    
    &--prim-1 {
      background-color: $color--primary-1;
    }
    
    &--prim-2 {
      background-color: $color--primary-2;
    }
    
    &--prim-3 {
      background-color: $color--primary-3;
    }
    
    &--prim-4 {
      background-color: $color--primary-4;
    }
    
    &--prim-5 {
      background-color: $color--primary-5;
    }
    
    &--accent-1 {
      background-color: $color--accent-1;
    }
    
    &--accent-2 {
      background-color: $color--accent-2;
    }
    
    &--accent-3 {
      background-color: $color--accent-3;
    }
    
    &--accent-4 {
      background-color: $color--accent-4;
    }
  }
}

.type {
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #d1d1d1;
  margin-bottom: 20px;
  
  &__example {
    padding: 20px;
    overflow: hidden;
    white-space: nowrap;
    
    & p {
      font-family: $font--body !important;
      font-size: $font--body-size !important;
      line-height: $font--body-line-height !important;
      color: $font--body-color !important;
      margin-bottom: 0px !important;
      white-space: normal;
    }
    
    & h1 {
      font-family: $font--header !important;
      font-size: $font--h1-size !important;
      color: $font--h1-color !important;
      font-weight: $font--h1-weight !important;
      margin: 0 !important;
      border: 0 !important;
    }
    
    & h2 {
      font-family: $font--header !important;
      font-size: $font--h2-size !important;
      color: $font--h2-color !important;
      font-weight: $font--h2-weight !important;
      margin: 0 !important;
      border: 0 !important;
    }
    
    & h3 {
      font-family: $font--header !important;
      font-size: $font--h3-size !important;
      color: $font--h3-color !important;
      font-weight: $font--h3-weight !important;
      margin: 0 !important;
      border: 0 !important;
    }
    
    & h4 {
      font-family: $font--header !important;
      font-size: $font--h4-size !important;
      color: $font--h4-color !important;
      font-weight: $font--h4-weight !important;
      margin: 0 !important;
      border: 0 !important;
    }
    
    & h5 {
      font-family: $font--header !important;
      font-size: $font--h5-size !important;
      color: $font--h5-color !important;
      font-weight: $font--h5-weight !important;
      margin: 0 !important;
      border: 0 !important;
    }
    
    & h6 {
      font-family: $font--header !important;
      font-size: $font--h6-size !important;
      color: $font--h6-color !important;
      font-weight: $font--h6-weight !important;
      margin: 0 !important;
      border: 0 !important;
    }
  }
  
  &__variable {
    background-color: #f2f2f2;
    padding: 20px;
    border-top: 1px solid #d1d1d1;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    color: #2d2d2d;
    font-size: 14px;
    
    & ul {
      margin: 4px 0;
      // list-style-type: none;
      padding-left: 20px;
    }
    
    & .purple {
      color: #7a2d83;
    }
  
    & .blue {
      color: #0071a0;
    }
  
    & .green {
      color: #009e5d;
    }
  
    & .red {
      color: #f64350;
    }
  }
}

.btn {
  display: inline-block;
  box-sizing: border-box;
  height: 40px;
  width: 120px;
  font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
  font-size: 18px;
  border-radius: 4px;
  transition: all .02s linear;

  &__primary-1 {
    background-color: $color--primary-1;
    border: 1px solid $color--primary-1;
    color: white;

    &:hover {
      background-color: lighten($color--primary-1, 5%);
      border-color: lighten($color--primary-1, 5%);
    }
      
    &:active {
      background-color: darken($color--primary-1, 5%);
      border-color: darken($color--primary-1, 5%);
    }
  }
    
  &__secondary-1 {
    background-color: #ffffff;
    border: 1px solid $color--primary-1;
    color: $color--primary-3;

    &:hover {
      // background-color: lighten($color--primary-1, 5%);
      border-color: lighten($color--primary-1, 5%);
      color: lighten($color--primary-3, 5%);
    }

    &:active {
      background-color: darken(#ffffff, 5%);
      border-color: darken($color--primary-1, 5%);
      color: darken($color--primary-3, 5%);
    }
  }
}

.showcase {
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #d1d1d1;
  margin-bottom: 20px;
  
  & .purple {
    color: #7a2d83;
  }
  
  & .blue {
    color: #0071a0;
  }
  
  & .green {
    color: #009e5d;
  }
  
  & .red {
    color: #f64350;
  }
  
  &__example {
    padding: 20px;
  }
  
  &__code {
    background-color: #f2f2f2;
    padding: 20px;
    border-top: 1px solid #d1d1d1;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    color: #333333;
    font-size: 14px;
    font-family: monospace;
    
    & ul {
      padding-left: 20px;
      margin: 0;
    }
    
    & li {
      list-style: none;
    }
  }
    
  p.tertiary__text {
    display: inline-block;
    margin: 0 !important;
    // color: red;
    
    & i.fa-chevron-right {
      float: left;
      padding: 6px 10px 0px 0;
      margin-bottom: 4.1px;
      // margin: 6px 10px 0px 0;
      color: $color--primary-1;
    }
    
    & span {
      font-weight: 700;
    }
    
    &:hover {
      cursor: pointer;
      color: $color--primary-1;
    }
  }
}

#footer {
  text-align: center;
  font-size: 60px;
  
  & span {
    font-size: 20px;
    color: darken(#d1d1d1, 25%);
  }
  
  & .fa {
    // color: $color--mhered;
    color: #d1d1d1;
  }
}

@media screen and (max-width: 980px) {
  .leftnav {
    display: none;
    // width: 0px;
    // transition: width .2s linear;
  }
  
  #container {
    width: 100%;
    left: 0px;
    // transition: all .2s linear;
    
    & #warning {
      width: calc(100% - 14px);
    }
  }
}

@media screen and (max-width: 680px) {
  #container {
    
    & #warning {
      // font-size: 14px;
      padding: 5px 5px;
      // height: 40px;
      // line-height: 20px;
      width: calc(100% - 10px);
    }
    
    #container__content {
    padding: 0 10px;
    }
  }
  
  .colors__block {
    margin: 0 10px 10px 0;
    
    &--txt {
      overflow: hidden;
      white-space: nowrap;
      font-size: 14px;
      
      & span {
        font-size: 16px;
      }
    }
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console