Modal

Pure CSS Multi Modal

by rdillman

HTML

<nav class="user-nav">
  <label for="auth-sign-in" class="user-nav__sign-in">Sign In</label>
  <label for="auth-sign-up" class="user-nav__sign-up">Sign Up</label>
</nav>
<div id="modal-auth-container" class="modal" data-reactroot="">
  <input type="radio" name="auth" class="auth-none" id="auth-none" checked="">
  <input type="radio" name="auth" class="auth-sign-in" id="auth-sign-in">
  <input type="radio" name="auth" class="auth-sign-in-email" id="auth-sign-in-email">
  <input type="radio" name="auth" class="auth-sign-up" id="auth-sign-up">
  <input type="radio" name="auth" class="auth-sign-up-email" id="auth-sign-up-email">
  <input type="radio" name="auth" class="auth-forgot" id="auth-forgot">
  <input type="radio" name="auth" class="auth-thanks" id="auth-thanks">
  <div role="dialog" class="modal-auth">
    <div class="modal-container">
      <label for="auth-none" class="modal--close" aria-label="Close auth modal">×</label>
      <div class="modal-auth--content modal-auth--sign-in">
        <h2 class="modal-auth__header">Sign in with Social Media</h2>
        <div class="modal-auth__button-oauth">
          <a href="" class="mfe-btn mfe-btn--medium mfe-btn--block mfe-btn--oauth-facebook">
                        <svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                            <path d="M16 32C7.163444 32 0 24.836556 0 16S7.163444 0 16 0s16 7.163444 16 16-7.163444 16-16 16zm1.049938-7v-8.199402h2.767252l.413078-3.209575h-3.18033V11.54757c0-.92851.259544-1.557265 1.590165-1.557265h1.699831V7.124353a23.46846706 23.46846706 0 0 0-2.467497-.124289c-2.445564 0-4.112496 1.491465-4.112496 4.229473v2.361486H11v3.209575h2.759941V25h3.289997z"></path>
                        </svg> Connect with Facebook</a>
          <a href="" class="mfe-btn mfe-btn--medium mfe-btn--block mfe-btn--oauth-linkedin">
                        <svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                            <path d="M16...

SCSS

// Social colors
$mfe-facebook: #3B5998;
$mfe-linkedin: #0077B5;
$mfe-twitter: #00ACED;
$mfe-pinterest: #BD081C;
$mfe-instagram: #DD2A7B;
$mfe-google: #DB3236;
// Core Colors
$mfe-dark-gray: #333;
$mfe-medium-gray: #666;
$mfe-light-gray: #999;
$mfe-snow: #F7F7F7;
$mfe-silver: #CCC;
$mfe-muse-blue: #53B6D0;
$mfe-royal-blue: #3852D4;
$mfe-orange: #F16814;
$mfe-purple: #5737B3;
$mfe-yellow: #FDB814;
$mfe-green: #0ABA8A;
$mfe-red: #E8270E;
$mfe-box-shadow: rgba(51, 51, 51, 0.3);
// Secondary Colors
// Pink
$mfe-pink: #F9CFCF;
// Purples
$mfe-wondiferous-jam: #552EAF;
$mfe-midnight: #221697;
$mfe-royal-purple: #4A1B7B;
$mfe-jazzberry: #9029A7;
$mfe-sharkleberry: #7451BD;
$mfe-dioxazine-purple: #3C26AA;
$mfe-grape: #6B2F94;
$mfe-toxic-smoothie: #A549B7;
$mfe-lilac: #9575CD;
$mfe-violet: #8E44AD;
$mfe-fuchsia: #BA68C8;
$mfe-macaroon: #BFA3E1;
$mfe-venomous-monster: #794DD8;
$mfe-neon-pegasus: #BB5FCD;
$mfe-orchid: #D591DE;
$mfe-cotton-candy: #E9D2F5;
$mfe-blossom: #9C63F2;
$mfe-tacky-flamingo: #E87AEE;
$mfe-lavender: #F1BBF4;
// Reds
$mfe-brick: #D52E2E;
$mfe-scarlet: #FF4328;
$mfe-blush: #DD5050;
$mfe-vermillion: #EC4518;
$mfe-rose: #E57373;
$mfe-carnation: #EFA1A1;
// Oranges
$mfe-tangerine: #FF8A65;
$mfe-pamplemousse: #FFB88D;
$mfe-mango: #F68A31;
$mfe-coral: #FF6746;
$mfe-carrot: #FB8D08;
$mfe-ochre: #FCA20D;
// Yellows
$mfe-marcipan: #FFE7B5;
$mfe-marigold: #FCB23F;
$mfe-goldenrod: #FFCD37;
$mfe-pineapple: #FFEF62;
$mfe-raincoat: #FFD65C;
$mfe-pollen: #FFF17F;
$mfe-canary: #FDD41C;
$mfe-dandelion: #FFE082;
$mfe-lemon: #FFF59D;
$mfe-butter: #FFECB4;
$mfe-banana: #FFF9C4;
$mfe-sunbeam: #FEF024;
// Whites
$mfe-vanilla: #FFF8E6;
$mfe-alabaster: #FFFDEB;
// Greens
$mfe-shamrock: #459F1D;
$mfe-gambino-greeno: #049043;
$mfe-atomic-mold: #68B133;
$mfe-emerald: #06A566;
$mfe-lime: #8BC34A;
$mfe-cucumber: #B9DB67;
$mfe-sea-foam: #0ED5B8;
$mfe-chartreuse: #E7F385;
$mfe-cyan: #12F1E7;
// Blues
$mfe-lucerne-blue: #92CAF8;
$mfe-cornflower: #2888F0;
$mfe-turquoise:...