EZ initial struct

EZ initial struct

by pj_js15

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://dnasir.com/jquery-cascading-dropdown/dist/jquery.cascadingdropdown.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <!-- <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
    <link type="text/css" rel="stylesheet" href="css/main.css"  media="screen,projection"/> -->

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>Materialize Elements</title>
  </head>

  <body>
    <div class="row">
    <!--
      <nav class="main-nav">
        <div class="nav-wrapper">
          <div class="pl-20 col s8">              
            EZ-Header              
          </div>
          <div class="right col s3 right-align">
            <i class="material-icons d-ib">shopping_cart</i> <div class="cart-total d-ib">$1,300.12</div>
          </div>
        </div>
      </nav>
      -->
      
      <ul id="dropdown1" class="dropdown-content">
        <li><a href="#">Logout</a></li>
      </ul>
      
      <nav class="main-nav">
        <div class="nav-wrapper">  
          <div class="pl-20 col s8">              
            EZ-Header              
          </div>
          <ul class="right">            
            <li><a href="#"><i class="material-icons d-ib">shopping_cart</i> <div class="cart-total d-ib">$1,300.12</div></a></li>
            <!-- Dropdown Trigger -->
            <li>
              <a class="dropdown-trigger user-account" href="#!" data-target="dropdown1">
                <i class="material-icons d-ib">account_box</i>
        ...

SCSS

/*@import "materialize/components/color-variables";

$primary-color: color("blue", "lighten-2") !default;
$secondary-color: color("yellow", "base") !default;
$input-focus-color: color("red", "base") !default;
*/
$primary-color: #2680EB;

input.browser-default{
  background-color: rgba(255,255,255,0.9);
    width: 100%;
    padding: 5px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    height: 3rem;
}

nav{
  &.main-nav{
//    background-color: #282F34;
      background-image: linear-gradient(to right, #282F34, #005B9C 70%, #005B9C);

    -webkit-box-shadow: 0 1px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 0px 0 rgba(0,0,0,0.2);
    box-shadow: 0 1px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 0px 0 rgba(0,0,0,0.2);

  }
  
  &.main-nav2{
    background-color: #FFF;
    -webkit-box-shadow: 0 1px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 0px 0 rgba(0,0,0,0.2);
    box-shadow: 0 1px 0px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 0px 0 rgba(0,0,0,0.2);

  }
  
  ul{
      
    li{
      & > a:hover{
        background-color: unset;
        height: 60px;
        
        &.user-account{
          border: 1px solid #7fa2ba;
        }
      }
    
      &.active{
        height: 1px;
        background-color: transparent;
        
        &:after{
          content: '';
          position: relative;
          width: 0;
          height: 0;
          left: 0;
          top: -50px;
          border-left: 10px outset transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid #eeeeee ;
        }
        
        a{
          color: #2680EB !important;      
        }
      }
    }
  }
  
  .cart-total{
    vertical-align: top;
  }
  
  .dropdown-content {
    top: 100% !important;
  }
}


//change focus color
input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]),...

JavaScript

$(document).ready(function() {
  M.updateTextFields();

  $(".dropdown-trigger").dropdown();

  $('select').formSelect();

  $('.collapsible').collapsible();
  
  $('#car-make-filter').on('keyup', function(){
  	filterSelect($(this).val(), '#car-makes-list');
  });
  
  console.log($('#car-makes-list').find('option').length);
  
  function filterSelect(strKey, selectId){  	
    $(selectId).find('option').each(function(index,element){    	 
       if(element.text.toLowerCase().indexOf(strKey.toLowerCase()) >= 0){
       	$(this).show();
       }else{
       	$(this).hide();
       }       
  	});
  }
		
  
  
  });