A Pen by Carl Boneri

Thumbnail
This awesome code was written by CarlBoneri, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright CarlBoneri ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Carl Boneri</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="description" content="WHyles is a machine learning pup">
  <title>Whyles</title>
  <!-- Favicons-->
  <link rel="apple-touch-icon-precomposed" href="https://www.dropbox.com/s/cio7s6lj27klwuj/whyles_circle_152x152.png?dl=1">
  <meta name="msapplication-TileColor" content="#FFFFFF">
  <meta name="msapplication-TileImage" content="https://www.dropbox.com/s/cio7s6lj27klwuj/whyles_circle_152x152.png?dl=1">
  <link rel="shortcut-icon" type="image/x-icon/" href="https://pathli.com/app/assets/images/whyles_favicon.ico" sizes="32x32">
  <!--  Android 5 Chrome Color-->
  <meta name="theme-color" content="#EE6E73">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
</head>

<body>

  <div class="navbar-fixed">
    <nav class="white" style="height:64px !important;">
        <div class="nav-wrapper white" style="line-height:64px">
            <a href="#" data-activates="slide-out-left" 
               class="button-collapse show-on-large" id="left-nav">
            <i class="material-icons light-blue-text darken-4">menu</i>
          </a>
          <span class="right" style="margin-right:1rem">
            <a class="waves-effect waves-primary btn-flat light-blue-text modal-trigger"
               href="#modal1">Login
              <i class="material-icons left" style="line-height:inherit">account_box</i>
            </a>
          </span>
        </div>
      </nav>
    <!-- Left edge navigation -->
    <ul id="slide-out-left" class="side-nav">
      <li>
        <div class="userView">
          <img class="background" src="http://materializecss.com/images/office.jpg">
          <a href="#!user">
            <img class="circle" src="http://materializecss.com/images/yuna.jpg">
          </a>
          <a href="#!name">
            <span class="white-text name">John Doe</span>
          </a>
          <a href="#!email">
            <span class="white-text email">jdandturk@gmail.com</span>
          </a>
        </div>
      </li>
      <li class="side-nav-item">
        <a href="#!" class="waves-effect waves-dark">
          <i class="material-icons">home</i> First Link With Icon
        </a>
        
      </li>
      <li class="side-nav-item">
       <a href="#!" class="waves-effect waves-dark">
          <i class="material-icons">settings</i>Settings
        </a>
        
      </li>
      <li>
        <div class="divider"></div>
      </li>
      <li><a class="subheader">Subheader</a></li>
      <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
    </ul>
    <!-- Right edge navigation -->
    <ul id="slide-out-right" class="side-nav sub">
      <li class="side-nav-item"><a href="#">First Sidebar Link</a></li>
      <li class="side-nav-item"><a href="#">Second Sidebar Link</a></li>
      <li class="side-nav-item">
        <ul class="collapsible collapsible-accordion" style="width:100%;margin:0 !important">
          <li class="side-nav-item">
            <a class="collapsible-header">Dropdown
              <i class="material-icons drop-down-icon">arrow_drop_down</i>
            </a>
            <div class="collapsible-body" style="width:100%">
              <ul style="background-color:#e9e9e9;">
                 <li class="side-nav-item">
                   <a href="#" class="waves-effect waves-cyan">First</a>
                </li>
                 <li class="side-nav-item"><a href="#">Second</a></li>
                 <li class="side-nav-item"><a href="#">Third</a></li>
                 <li class="side-nav-item"><a href="#!">Fourth</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>

   <!-- fixed fab -->
  <div class="container-fluid">
    <div class="fixed-action-btn click-to-toggle" style="bottom: 45px; right: 24px;">
      <a class="btn-floating btn-large user-right-btn waves-effect waves-light">
        <i class="large material-icons crossRotate">apps</i>
      </a>
      <ul>
        <li>
          <a class="btn-floating light-blue lighten-3">
            <i class="material-icons">insert_chart</i>
          </a>
        </li>
        <li>
          <a class="btn-floating indigo accent-2">
            <i class="material-icons">format_quote</i>
          </a>
        </li>
        <li>
          <a data-activates="slide-out-right" class="btn-floating button-collapse show-on-large" id="rightNav">
            <i class="material-icons">publish</i>
          </a>
        </li>
        <li>
          <a class="btn-floating deep-purple lighten-2">
            <i class="material-icons">attach_file</i>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div id="modal1" 
       class="modal modal-fixed-footer modal-fixed-header light">
    <div class="modal-header primary">
      <span class="m-title"><i class="material-icons">lock_outline</i>Sign in</span>
      
    </div>
    <div class="modal-content">
     <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
          <input placeholder="Placeholder" id="first_name" type="text" class="validate">
          <label for="first_name">First Name</label>
        </div>
        <div class="input-field col s6">
          <input id="last_name" type="text" class="validate">
          <label for="last_name">Last Name</label>
        </div>
      </div>
      <div class="row">
       <div class="input-field col s12">
    <select class="rt-select" multiple>
      <option value="" disabled selected>Choose your option</option>
      <option value="1" class="accent-text">Option 1</option>
      <option value="2" class="accent-text">Option 2</option>
      <option value="3" class="accent-text">Option 3</option>
    </select>
    <label>Materialize Multiple Select</label>
  </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="password" type="password" class="validate">
          <label for="password">Password</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate">
          <label for="email">Email</label>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          This is an inline input field:
          <div class="input-field inline">
            <input id="email" type="email" class="validate">
            <label for="email" data-error="wrong" data-success="right">Email</label>
          </div>
        </div>
      </div>
    </form>
    </div>
    <div class="modal-footer">
      
      <a class="modal-action modal-close waves-effect waves-primary btn-flat modal-redirect">Agree</a>
    </div>
  </div>
  
</body>

</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/CarlBoneri/a-pen-by-carl-boneri-mOdjoR */
 .tabs .indicator {
   position: absolute;
   bottom: 0;
   height: 2px;
   background-color: #e91e63;
   will-change: left, right;
 }
 
 .tabs.trans {
   background-color: rgba(255, 255, 255, 0.1);
   color: rgba(255, 64, 129, 0.95) !important
 }
 
 .card-panel.trans {
   background-color: rgba(255, 255, 255, 0.36);
 }
 
 .card-panel.promo {
   height: 500px !important;
 }
 
 .promo-example {
   overflow: hidden;
 }
 
 .promo {
   width: 100%;
 }
 
 .promo-caption {
   font-size: 1.7rem;
   font-weight: 500;
   margin-top: 5px;
   margin-bottom: 0;
 }
 
 .promo i {
   margin: 40px 0;
   color: rgba(78, 0, 146, 0.34);
   font-size: 7rem;
   display: block;
 }
 
 .center {
   text-align: center;
   vertical-align: middle;
 }
 
 .light,
 footer.page-footer .footer-copyright {
   font-weight: 300;
 }
 
 body {
   font-family: 'Roboto', sans-serif;
   font-size: 12px;
   font-weight: 400;
   background-color: #E0E0E0;
   margin-top: 10px;
 }
 
 .bg-img {
   background-image: url(https://www.dropbox.com/s/g5ajq8mmubvo8rm/skyline_prime.png?dl=1);
   background-position: center center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   background-color: #999;
 }
 
 div,
 body {
   margin: 0;
   padding: 0;
   font-family: exo, sans-serif;
 }
 
 .wrapper {
   height: 100%;
   width: 100%;
 }
 
 .message {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   width: 100%;
   height: 45%;
   bottom: 0;
   display: block;
   position: absolute;
   background-color: rgba(0, 0, 0, 0.6);
   color: #fff;
   padding: 0.5em;
 }
 
 .body-light {
   background-color: #FAFAFA !important
 }
 
 .body-dark {
   background-color: #303030 !important
 }
 /*Utils*/
 
 ::-webkit-scrollbar {
   width:.35rem;
   height:.25rem;
 }
 
 ::-webkit-scrollbar-button {
   width: 6px;
   height: .25rem;
 }
 
 ::-webkit-scrollbar-thumb {
   background:rgba(3, 169, 244, 0.43) !important;
   border: 2px none rgba(3, 169, 244, 0.43) !important;
   border-radius:1px;
   height:0.25rem;
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(55, 55, 55, 0.35);
 }
 
 ::-webkit-scrollbar-thumb:active {
   background:#03a9f4 !important;
 }
 
 ::-webkit-scrollbar-track {
   background: rgba(0,0,0,0.13);
   border: 22px none #fff;
   border-radius: 5px;
 }
 
 ::-webkit-scrollbar-track:hover {
   background: #fff;
 }
 
 ::-webkit-scrollbar-track:active {
   background: #fff;
 }
 
 ::-webkit-scrollbar-corner {
   background: #03a9f4 !important;
 }
 
 .vcenter {
   vertical-align: -webkit-baseline-middle
 }
 
 .material-icons.md-24 {
   font-size: 24px;
 }
 
 .material-icons.md-left {
   float: left !important;
 }
 
 .side-nav.trans {
   background-color: rgba(255, 255, 255, 0.16);
 }
.side-nav .userView{
  margin-bottom:0px !important;
}

.collapsible-body ul > li.side-nav-item>a,
li.side-nav-item>a{
  line-height:4rem;
  height:4rem;
  font-weight:600;
  font-size:1.1rem;
  color:rgba(0,0,0,0.7) !important;
  text-transform:uppercase;
  width:100% !important;
}

li.side-nav-item:first-of-type{
  margin-top:-6px;
}
.side-nav li > a > i{
  line-height:4rem !important;
  width:2rem !important;
  vertical-align:middle !important;
  color:rgba(0,0,0,0.53) !important;
  font-size:24px !important;
  float:none !important;
  margin: 0 .5rem .25rem 0 !important;
}
.drop-down-icon{
  line-height:1.5rem !important;
  margin:1rem !important;
  float:right !important;
}
li.side-nav-item a.collapsible-header {
  background-color:inherit !important;
  line-height:4rem;
  height:4rem;
}
li.side-nav-item a.collapsible-header >i {
  color:inherit !important;
  font-size:2rem !important;
  float:right !important;
  float:right;
}
 /* NAVBAR */
 
.navbar-fixed {
  z-index:999 !important;
  top:0 !important;
  margin-top:0 !important;
}

 
 nav.trans {
   background-color: rgba(0, 0, 0, 0.13);
 }
 
 nav.light {
   background-color: #FFF !important;
 }
 
 nav.dark {
   background-color: #212121 !important;
 }
 
 nav ul li a {
   color: #E91E63 !important;
 }
 /* Side Nav */
 
 .side-nav::-webkit-scrollbar {
   width: 4px;
 }
 
 .side-nav::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 -1px 6px rgba(0, 0, 0, 0.3);
   box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.3);
   -webkit-border-radius: 4px;
   border-radius: 4px;
 }
 
 .side-nav::-webkit-scrollbar-thumb {
   -webkit-border-radius: 4px;
   border-radius: 4px;
   background: rgba(0, 0, 0, 0.13);
   -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
 }
 
 .side-nav::-webkit-scrollbar-thumb:window-inactive {
   background: rgba(0, 0, 0, 0.13);
 }
 
 .side-nav-header {
   margin-top: 5%;
   margin-left: 50px;
   width: 140px;
 }
 
 .side-nav.dark {
   background-color: #212121 !important;
   color: rgba(255, 255, 255, 0.87) !important;
 }
 
 .side-nav.dark>li a {
   color: rgba(255, 255, 255, 1) !important;
 }
 
 .side-nav.dark>li i {
   color: rgba(255, 255, 255, .5) !important;
 }
 
 .side-nav-wrap {
   width: 100%;
 }
 .side-nav.sub {
  z-index:998 !important;
  background-color:#E0E0E0
}

 .material-icons.side-nav-action {
   color: #E91E63;
   margin-left: 35%;
 }
 
 .material-icons.side-nav-icon {
   margin-top: 20px;
   margin-left: 16px;
   margin-right: 16px;
   float: left;
   color: rgba(0, 0, 0, 0.54);
   font-size: 24px;
 }
 /* MODALS */

.lean-overlay {
    position: fixed;
    z-index: 78;
    top: -100px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    height: 125%;
    width: 100%;
    display: none;
    will-change: opacity;
    opacity:0.48 !important;
    background: rgba(33,33,33,1) !important;
}
.modal {
  border-radius:1px !important;
  padding-right:-10px !important;
}
.modal-xs {
  height:15% !important;
  width:20% !important;
}
.modal-small{
  height:25% !important;
}
.modal-medium{
  height:50% !important;
}
.modal-large{
  height:75% !important;
}
.modal-xl{
  height:90% !important;
}
.modal-header {
    width: 100%;
    height: 56px;
    top: 0;
    background-color:inherit;
    right: 0;
    z-index: 1004;
    /* margin-right: -10px !important; */
    overflow-y: auto;
    display: flex;
    position: fixed;
    margin-left:5%;
  box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),
    0 1px 10px 0 rgba(0,0,0,0.12),
    0 2px 4px -1px rgba(0,0,0,0.3);
    /* padding-bottom: 15px; */
}

.modal-header>.m-title{
  font-weight:200;
  font-size:2rem;
  color:rgba(255,255,255,.87);
 margin:.5rem 1.75rem
}

.modal-header>.m-title i{
  display:inline-block;
  position:relative;
  vertical-align:middle;
  margin-right:.5rem;
  margin-bottom:.25rem;
  font-size:1.7rem;
}
.modal-fixed-header > .modal-content{
  margin-top:56px !important;
}
.modal-content.trans-card,
.trans-card {
   background-color: rgba(0, 0, 0, 0.13) !important;
   color: rgba(255, 255, 255, 0.87) !important;
 }
 
 .modal.light .modal-content {
   background-color: #E0E0E0 !important;
 }
.modal.light .modal-footer{
  background-color:#FAFAFA !important;
}
 
.modal.dark > .modal-content {
  background-color:#303030;
  color:rgba(255,255,255,0.87);
}

.modal.dark > .modal-content p {
  color:rgba(255,255,255,0.73);
}
 .modal.dark > .modal-footer {
   background-color: #212121
 }
 
 .modal.dark > .modal-footer > a {
   color: rgba(255, 255, 255, 0.87)
 }
 
 .modal.light,
 .modal.light >.modal-content>h1,
 .modal.light >.modal-content>h2,
 .modal.light >.modal-content>h3,
 .modal.light >.modal-content>h4,
 .modal.light >.modal-content>h5,
 .modal.light >.modal-content>h6 {
   color: rgba(0, 0, 0, 0.87) !important;
 }
 
 .modal >.modal-content>p {
   color: rgba(0, 0, 0, 0.53);
 }
 
 .modal-dark>.modal-content>h1,
 .modal-dark>.modal-content>h2,
 .modal-dark>.modal-content>h3,
 .modal-dark>.modal-content>h4,
 .modal-dark>.modal-content>h5 {
   color: rgba(255, 255, 255, 1) !important;
 }
 
 .modal-dark>.modal-content>p {
   color: rgba(255, 255, 255, 0.7) !important;
 }
 
 .modal-footer {
   box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3)
 }
 
 .modal-dark>.modal-footer {
   background-color: #212121 !important;
   color: rgba(255, 255, 255, 1) !important;
 }

 .modal-dark>.modal-footer > a.modal-action,
.modal-dark>.modal-footer > a{
  border:none !important;
}
 /* Waves */
 
 .waves-effect.waves-blue .waves-ripple {
   /* The alpha value allows the text and background color
     of the button to still show through. */
   background-color: rgba(3, 169, 244, 0.65);
 }
 
 .waves-effect.waves-pink .waves-ripple {
   /* The alpha value allows the text and background color
     of the button to still show through. */
   background-color: rgba(255, 64, 129, 0.65) !important;
 }
 
 .waves-effect.waves-indigo .waves-ripple {
   /* The alpha value allows the text and background color
     of the button to still show through. */
   background-color: rgba(83, 109, 254, 0.65) !important;
 }
 
 .waves-effect.waves-light-green .waves-ripple {
   background-color: rgba(105, 240, 174, 0.65) !important;
 }
 
 .waves-effect.waves-deep-orange .waves-ripple {
   background-color: rgba(255, 110, 64, 0.65) !important;
 }
 
 .waves-effect.waves-cyan .waves-ripple {
   background-color: rgba(24, 255, 255, 0.65) !important;
   color: rgba(255, 255, 255, 0.87) !important;
 }

 .waves-effect.waves-primary .waves-ripple {
   background-color: rgba(179, 229, 252, 0.65) !important;
   color: rgba(179, 229, 252, 0.87) !important;
 }
 /* translucence */
 
 .trans-card {
   background-color: rgba(250, 250, 250, 0.06) !important;
   color: rgba(255, 255, 255, 0.87) !important;
 }

/*theme*/
/*500*/
.primary {
  background-color:#03a9f4 !important;
}

/*100*/
.primary-light {
   background-color:#b3e5fc !important;
}

/*700*/
.primary-dark {
   background-color:#0288d1 !important;
}

/*A200*/
.accent {
  background-color: #EEFF41 !important;
}
.accent-text{
  color: #EEFF41 !important;
}
/*A100*/
.accent-light {
  background-color: #F4FF81 !important;
}
.accent-text-light {
  color: #F4FF81 !important;
}
/*A400*/
.accent-dark {
  background-color: #C6FF00 !important;
}
.accent-dark-text {
  color: #C6FF00 !important;
}
 /* CHECKBOX

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
  opacity: 0
}

[type="checkbox"]+label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none
}

[type="checkbox"]+label:before,
[type="checkbox"]:not(.filled-in)+label:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  z-index: 0;
  border: 2px solid rgba(0, 0, 0, 0.13);
  border-radius: 1px;
  margin-top: 2px;
  transition: .2s
}

[type="checkbox"]:not(.filled-in)+label:after {
  border: 0;
  -webkit-transform: scale(0);
  transform: scale(0)
}

[type="checkbox"]:not(:checked):disabled+label:before {
  border: none;
  background-color: rgba(0, 0, 0, 0.26)
}

[type="checkbox"].tabbed:focus+label:after {
  -webkit-transform: scale(1);
  transform: scale(1);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.1)
}

[type="checkbox"]:checked+label:before {
  top: -4px;
  left: -5px;
  width: 12px;
  height: 22px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%
}

[type="checkbox"]:checked:disabled+label:before {
  border-right: 2px solid rgba(0, 0, 0, 0.26);
  border-bottom: 2px solid rgba(0, 0, 0, 0.26)
}

[type="checkbox"]:indeterminate+label:before {
  top: -11px;
  left: -12px;
  width: 10px;
  height: 22px;
  border-top: none;
  border-left: none;
  border-right: 2px solid #e91e63 !important;
  border-bottom: none;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%
}

[type="checkbox"]:indeterminate:disabled+label:before {
  border-right: 2px solid rgba(0, 0, 0, 0.26);
  background-color: transparent
}

[type="checkbox"].filled-in+label:after {
  border-radius: 2px
}

[type="checkbox"].filled-in+label:before,
[type="checkbox"].filled-in+label:after {
  content: '';
  left: 0;
  position: absolute;
  transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
  z-index: 1
}

[type="checkbox"].filled-in:not(:checked)+label:before {
  width: 0;
  height: 0;
  border: 3px solid transparent;
  left: 6px;
  top: 10px;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 20% 40%;
  transform-origin: 100% 100%
}

[type="checkbox"].filled-in:not(:checked)+label:after {
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 2px solid rgba(0, 0, 0, 0.28) !important;
  top: 0px;
  z-index: 0
}

[type="checkbox"].filled-in:checked+label:before {
  top: 0;
  left: 1px;
  width: 8px;
  height: 13px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%
}

[type="checkbox"].filled-in:checked+label:after {
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #e91e63 !important;
  background-color: #e91e63 !important;
  z-index: 0
}

[type="checkbox"].filled-in.tabbed:focus+label:after {
  border-radius: 2px;
  border-color: rgba(0, 0, 0, 0.13);
  background-color: rgba(0, 0, 0, 0.1)
}

[type="checkbox"].filled-in.tabbed:checked:focus+label:after {
  border-radius: 2px;
  background-color: #e91e63 !important;
  border-color: #e91e63 !important
}

[type="checkbox"].filled-in:disabled:not(:checked)+label:before {
  background-color: transparent;
  border: 2px solid transparent
}

[type="checkbox"].filled-in:disabled:not(:checked)+label:after {
  border-color: transparent;
  background-color: #BDBDBD
}

[type="checkbox"].filled-in:disabled:checked+label:before {
  background-color: transparent
}

[type="checkbox"].filled-in:disabled:checked+label:after {
  background-color: #BDBDBD;
  border-color: #BDBDBD
}
*/
 /* label color */
 
 .input-field label {
   color: rgba(128, 147, 254, 0.54) !important;
 }
 /* label focus color */
 
 .input-field input[type=text]:focus + label {
   color: #808080 !important;
 }
 /* label underline focus color */
 
 .input-field input[type=text]:focus {
   border-bottom: 1px solid #3d5afe !important;
   box-shadow: 0 1px 0 0 #3d5afe !important;
 }
 /* valid color */
 
 .input-field input[type=text].valid {
   border-bottom: 1px solid #3d5afe !important;
   box-shadow: 0 1px 0 0 #3d5afe !important;
 }
 /* invalid color */
 
 .input-field input[type=text].invalid {
   border-bottom: 1px solid #3d5afe !important;
   box-shadow: 0 1px 0 0 #3d5afe !important;
 }
 /* icon prefix focus color */
 
 .input-field .prefix.active {
   color: #3d5afe !important;
 }
 
 .md-light {
   color: rgba(255, 255, 255, 0.83) !important;
   font-size: 32px !important;
   padding-bottom: 2% !important;
 }
 
 input:not([type]):focus:not([readonly]),
 input[type=text]:focus:not([readonly]),
 input[type=password]:focus:not([readonly]),
 input[type=email]:focus:not([readonly]),
 input[type=url]:focus:not([readonly]),
 input[type=time]:focus:not([readonly]),
 input[type=date]:focus:not([readonly]),
 input[type=datetime]:focus:not([readonly]),
 input[type=datetime-local]:focus:not([readonly]),
 input[type=tel]:focus:not([readonly]),
 input[type=number]:focus:not([readonly]),
 input[type=search]:focus:not([readonly]),
 textarea.materialize-textarea:focus:not([readonly]) {
   border-bottom: 1px solid #3d5afe !important;
   box-shadow: 0 1px 0 0 #3d5afe !important;
 }
 
 blockquote {
   margin: 20px 0;
   padding-left: 1.5rem;
   border-left: 4px solid rgba(255, 23, 68, 0.6) !important;
 }
 
 body {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
 }
 
 main {
   flex: 1 0 auto;
 }
 
 .footer-copyright {
   background-color: #303030;
   opacity: 0.7;
   bottom: 0;
   color: white;
 }
 
 .page-footer {
   background-color: #303030 !important;
 }

.crossRotate {
  -webkit-transition-duration: .25s;
  -moz-transition-duration: .25s;
  -o-transition-duration: .25s;
  transition-duration: .25s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
}
.user-right-btn{
  background-color:#03a9f4 !important;
}
.crossRotate.active {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
  color:#0288d1;
}

.dropdown-content li>a, .dropdown-content li>span {
    font-size: 16px;
  color:inherit !important;
    display: block;
    line-height: 22px;
    padding: 14px 16px;
}
.dropdown-content li.active>a, .dropdown-content li.active>span {
  color:#0288d1 !important;
}



[type="checkbox"]:checked+label:before {
    top: -4px;
    left: -5px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #0288d1 !important;
    border-bottom: 2px solid #0288d1 !important;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    color:#0288d1 !important;
}
[type="checkbox"]:checked+label:after{
  top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #26a69a;
    background-color: #26a69a !important;
    z-index: 0;
}

/*Downloaded from https://www.codeseek.co/CarlBoneri/a-pen-by-carl-boneri-mOdjoR */
$(document).ready(function() {
  //Modal
  $(".modal-trigger").leanModal();
  // DATA TABLE
  $(":checkbox").change(function() {
    $(this).closest("tr").toggleClass("highlight-rows", this.checked);
  });

  $("#all_col").click(function(e) {
    $(this)
      .closest("table")
      .find("input:checkbox")
      .prop("checked", this.checked);
    $(this).closest("table").toggleClass("highlight-rows", this.checked);
  });
  $(":checkbox").click(function() {
    $(".tbl_head_swap").toggle();
  });
  $(".carousel").carousel();
  $(".scrollspy").scrollSpy();
  $("ul.tabs").tabs();
  $(".rt-select").material_select();
  $("#rightNav").sideNav({
    menuWidth: 260, // Default is 240
    edge: "right", // Choose the horizontal origin
    closeOnClick: false // Closes side-nav on <a> clicks, useful for Angular/Meteor
  });
  $("#left-nav").sideNav({
    menuWidth: 260,
    edge: "left",
    closeOnClick: false
  });

  $(".crossRotate").on("click", function() {
    $(this).toggleClass("active");
  });
  
  $(".modal-redirect").on('click', function(){
    var path = 'http://google.com';
    location.replace(path);
    window.top.location.href = path;
  });

  a.fn.material_select = function(b) {
    function c(a, b, c) {
      var e = a.indexOf(b),
        f = -1 === e;
      return f ? a.push(b) : a.splice(e, 1), c
        .siblings("ul.dropdown-content")
        .find("li")
        .eq(b)
        .toggleClass("active"), c.find("option").eq(b).prop("selected", f), d(
        a,
        c
      ), f;
    }
    function d(a, b) {
      for (var c = "", d = 0, e = a.length; e > d; d++) {
        var f = b.find("option").eq(a[d]).text();
        c += 0 === d ? f : ", " + f;
      }
      "" === c && (c = b.find("option:disabled").eq(0).text()), b
        .siblings("input.select-dropdown")
        .val(c);
    }
    a(this).each(function() {
      var d = a(this);
      if (!d.hasClass("browser-default")) {
        var e = d.attr("multiple") ? !0 : !1,
          f = d.data("select-id");
        if (
          (
            f &&
              (
                d.parent().find("span.caret").remove(),
                d.parent().find("input").remove(),
                d.unwrap(),
                a("ul#select-options-" + f).remove()
              ),
            "destroy" === b
          )
        )
          return void d.data("select-id", null).removeClass("initialized");
        var g = Materialize.guid();
        d.data("select-id", g);
        var h = a('<div class="select-wrapper"></div>');
        h.addClass(d.attr("class"));
        var i = a(
          '<ul id="select-options-' +
            g +
            '" class="dropdown-content select-dropdown ' +
            (e ? "multiple-select-dropdown" : "") +
            '"></ul>'
        ),
          j = d.children("option, optgroup"),
          k = [],
          l = !1,
          m =
            d.find("option:selected").html() ||
            d.find("option:first").html() ||
            "",
          n = function(b, c, d) {
            var e = c.is(":disabled") ? "disabled " : "",
              f = "optgroup-option" === d ? "optgroup-option " : "",
              g = c.data("icon"),
              h = c.attr("class");
            if (g) {
              var j = "";
              return h && (j = ' class="' + h + '"'), "multiple" === d
                ? i.append(
                    a(
                      '<li class="' +
                        e +
                        '"><img src="' +
                        g +
                        '"' +
                        j +
                        '><span><input type="checkbox"' +
                        e +
                        "/><label></label>" +
                        c.html() +
                        "</span></li>"
                    )
                  )
                : i.append(
                    a(
                      '<li class="' +
                        e +
                        f +
                        '"><img src="' +
                        g +
                        '"' +
                        j +
                        "><span>" +
                        c.html() +
                        "</span></li>"
                    )
                  ), !0;
            }
            "multiple" === d
              ? i.append(
                  a(
                    '<li class="' +
                      e +
                      '"><span><input type="checkbox"' +
                      e +
                      "/><label></label>" +
                      c.html() +
                      "</span></li>"
                  )
                )
              : i.append(
                  a(
                    '<li class="' +
                      e +
                      f +
                      '"><span>' +
                      c.html() +
                      "</span></li>"
                  )
                );
          };
        j.length &&
          j.each(function() {
            if (a(this).is("option"))
              e ? n(d, a(this), "multiple") : n(d, a(this));
            else if (a(this).is("optgroup")) {
              var b = a(this).children("option");
              i.append(
                a(
                  '<li class="optgroup"><span>' +
                    a(this).attr("label") +
                    "</span></li>"
                )
              ), b.each(function() {
                n(d, a(this), "optgroup-option");
              });
            }
          }), i.find("li:not(.optgroup)").each(function(f) {
          a(this).click(function(g) {
            if (
              !a(this).hasClass("disabled") &&
              !a(this).hasClass("optgroup")
            ) {
              var h = !0;
              e
                ? (
                    a('input[type="checkbox"]', this).prop("checked", function(
                      a,
                      b
                    ) {
                      return !b;
                    }),
                    (h = c(k, a(this).index(), d)),
                    q.trigger("focus")
                  )
                : (
                    i.find("li").removeClass("active"),
                    a(this).toggleClass("active"),
                    q.val(a(this).text())
                  ), r(i, a(this)), d
                .find("option")
                .eq(f)
                .prop("selected", h), d.trigger("change"), "undefined" !=
                typeof b && b();
            }
            g.stopPropagation();
          });
        }), d.wrap(h);
        var o = a('<span class="caret">&#9660;</span>');
        d.is(":disabled") && o.addClass("disabled");
        var p = m.replace(/"/g, "&quot;"),
          q = a(
            '<input type="text" class="select-dropdown" readonly="true" ' +
              (d.is(":disabled") ? "disabled" : "") +
              ' data-activates="select-options-' +
              g +
              '" value="' +
              p +
              '"/>'
          );
        d.before(q), q.before(o), q.after(i), d.is(":disabled") ||
          q.dropdown({
            hover: !1,
            closeOnClick: !1
          }), d.attr("tabindex") &&
          a(q[0]).attr("tabindex", d.attr("tabindex")), d.addClass(
          "initialized"
        ), q.on({
          focus: function() {
            if (
              (
                a("ul.select-dropdown").not(i[0]).is(":visible") &&
                  a("input.select-dropdown").trigger("close"),
                !i.is(":visible")
              )
            ) {
              a(this).trigger("open", ["focus"]);
              var b = a(this).val(),
                c = i.find("li").filter(function() {
                  return a(this).text().toLowerCase() === b.toLowerCase();
                })[0];
              r(i, c);
            }
          },
          click: function(a) {
            a.stopPropagation();
          }
        }), q.on("blur", function() {
          e ||
            a(this).trigger(
              "close"
            ), i.find("li.selected").removeClass("selected");
        }), i.hover(
          function() {
            l = !0;
          },
          function() {
            l = !1;
          }
        ), a(window).on({
          click: function() {
            e && (l || q.trigger("close"));
          }
        }), e &&
          d.find("option:selected:not(:disabled)").each(function() {
            var b = a(this).index();
            c(
              k,
              b,
              d
            ), i.find("li").eq(b).find(":checkbox").prop("checked", !0);
          });
        var r = function(b, c) {
          if (c) {
            b.find("li.selected").removeClass("selected");
            var d = a(c);
            d.addClass("selected"), i.scrollTo(d);
          }
        },
          s = [],
          t = function(b) {
            if (9 == b.which) return void q.trigger("close");
            if (40 == b.which && !i.is(":visible"))
              return void q.trigger("open");
            if (13 != b.which || i.is(":visible")) {
              b.preventDefault();
              var c = String.fromCharCode(b.which).toLowerCase(),
                d = [9, 13, 27, 38, 40];
              if (c && -1 === d.indexOf(b.which)) {
                s.push(c);
                var f = s.join(""),
                  g = i.find("li").filter(function() {
                    return 0 === a(this).text().toLowerCase().indexOf(f);
                  })[0];
                g && r(i, g);
              }
              if (13 == b.which) {
                var h = i.find("li.selected:not(.disabled)")[0];
                h && (a(h).trigger("click"), e || q.trigger("close"));
              }
              40 == b.which &&
                (
                  (g = i.find("li.selected").length
                    ? i.find("li.selected").next("li:not(.disabled)")[0]
                    : i.find("li:not(.disabled)")[0]),
                  r(i, g)
                ), 27 == b.which && q.trigger("close"), 38 == b.which &&
                (
                  (g = i.find("li.selected").prev("li:not(.disabled)")[0]),
                  g && r(i, g)
                ), setTimeout(function() {
                s = [];
              }, 1e3);
            }
          };
        q.on("keydown", t);
      }
    });
  };
});

Comments