Formuario con Kimera CSS framework

implementacion de kimera css

by Leonardo Quintana

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/kimera.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<mega class="is-full-center">
  <h1 class="padding-v-2">
    <white>Kimera</white> <danger>CSS</danger>
  </h1>
  <form class="color-cloud padding-2">
    <fab>
        <button is-toggle="#fab3" type="floating" class="is-large is-danger">
          <icon>
            <i class="fa fa-plus"></i>
          </icon>
        </button>
        <fabmenu id="fab3"class="is-down">
            <a class="button is-success" type="floating">
              <icon>
                <i class="fa fa-bookmark"></i>
              </icon>
            </a>
            <a class="button is-warning" type="floating">
              <icon>
                <i class="fa fa-pencil"></i>
              </icon>
            </a>
            <a class="button is-primary" type="floating">
              <icon>
                <i class="fa fa-bolt"></i>
              </icon>
            </a>
        </fabmenu>
    </fab>
      <responsive class="is-square-128">
      <img src="https://mir-s3-cdn-cf.behance.net/project_modules/hd/10d1699341307.560ccb35608dd.jpg" alt="" class="is-rounded">
     </responsive>    
     <div class="padding-v-2">
       <field>
        <input id="user" type="text" class="input is-material is-small" required placeholder="Enter username">
        <tiny for="user" class="is-validate">El usuario debe contenerminimo 4 digitos.</tiny>
      </field>
      <field>
        <input id="pass" type="password" class="input is-material is-small" placeholder="Enter current password" required>
        <tiny for="pass" class="is-validate">Tu contraseña debe tener minimo 4 digitos</tiny>
      </field>
       <item class="is-small">
       <checkbox class="is-danger">
         <input type="checkbox" id="ch1">
         <label for="ch1"></label>
         <span>Recuerdame</span>
       </checkbox>
    ...

SCSS

mega {
  background-image: url('https://images.pexels.com/photos/551852/pexels-photo-551852.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb');
  background-position: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
h1 {
  font-size: 4rem;
}
form {
  position: relative;
  max-width: 650px;
  border-radius: 5px;
  box-shadow: 0 5px 10px 2px rgba(#000, .05);
  padding: 1em;
  responsive {
    margin: 0 auto;
  }
  checkbox {
    color: #333 !important;
  }
  fab {
    position: absolute;
    right: -2.25em;
    top: 2em;
    & a {
      opacity: 1;
    }
  }
  a {
    opacity: .6;
  }
}

JavaScript

$('fab [is-toggle]').on('click', function(e){
e.preventDefault();
e.stopPropagation();
	$(this).siblings().toggleClass('is-visible');
});

$('body').on('click', function(){
	$(this).find('fabmenu').removeClass("is-visible");
})