Skip to content

Instantly share code, notes, and snippets.

@CarlBoneri

CarlBoneri/index.html

Last active July 22, 2016 14:30
Show Gist options
  • Save CarlBoneri/21c796f42831e4dcd70e7cc8b5589f5a to your computer and use it in GitHub Desktop.
Save CarlBoneri/21c796f42831e4dcd70e7cc8b5589f5a to your computer and use it in GitHub Desktop.
Download ZIP
mtrlz R master sidenav
Raw
index.html
<meta charset="utf-8">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/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.6/js/materialize.min.js"></script>
</head>
<body class="body-light">
<script src="//d3js.org/d3.v3.min.js"></script>
<!-- NAVBAR -->
<div class="navbar-fixed">
<nav class="light">
<div class="nav-wrapper">
<!-- SIDEBAR TOGGLE BUTTON -->
<a href="#" data-activates="slide-out" class="button-collapse show-on-large">
<i class="material-icons side-nav-action">menu</i>
</a>
<ul class="right">
<li><a href="sass.html">Admin</a></li>
<li><a href="badges.html">Google Analytics</a></li>
</ul>
</div>
</nav>
</div>
<!-- SIDEBAR -->
<ul id="slide-out" class="side-nav">
<!-- Sidebar Header -->
<li>
<img class="side-nav-header" src="https://www.dropbox.com/s/plwnq8q55ghi4zs/home_circle.png?dl=1">
</li>
<!-- Sidebar Items -->
<li>
<!-- Sidebar Item Container -->
<span class="waves-effect waves-pink side-nav-wrap">
<!-- Sidebar Item Icon -->
<i class="material-icons side-nav-icon" style="">assessment</i>
<!-- Sidebar Item Link and Text -->
<a href="#!">
Pink Ripple
</a>
</span>
</li>
<li>
<span class="waves-effect waves-indigo side-nav-wrap">
<i class="material-icons side-nav-icon" style="">mail</i>
<a href="#!">
Indigo Ripple
</a>
</span>
</li>
<li>
<span class="waves-effect waves-light-green side-nav-wrap">
<i class="material-icons side-nav-icon" style="">mail</i>
<a href="#!">
Light Green Ripple
</a>
</span>
</li>
<li>
<span class="waves-effect waves-deep-orange side-nav-wrap">
<i class="material-icons side-nav-icon" style="">mail</i>
<a href="#!">
Deep Orange Ripple
</a>
</span>
</li>
<li>
<span class="waves-effect waves-cyan side-nav-wrap">
<i class="material-icons side-nav-icon" style="">mail</i>
<a href="#!">
Cyan Ripple
</a>
</span>
</li>
</ul>
<!-- BODY -->
<div class="container" style="margin-top:15px;">
<div id="modal_add_row" class="modal modal-fixed-footer dark">
<div class="modal-content">
<h4>Add new record</h4>
<div class="row">
<div class="input-field col s4">
<input placeholder="MPG Data" id="add_mpg" type="text" class="validate">
<label class="vcenter" for="add_mpg">mpg</label>
</div>
<div class="input-field col s4">
<input placeholder="CYL Data" id="add_cyl" type="text" class="validate">
<label class="vcenter" for="add_cyl">cyl</label>
</div>
<div class="input-field col s4">
<input placeholder="DISP Data" id="add_disp" type="text" class="validate">
<label class="vcenter" for="add_disp">disp</label>
</div>
</div>
<div class="row">
<div class="input-field col s4">
<input placeholder="HP Data" id="add_hp" type="text" class="validate">
<label class="vcenter" for="add_hp">hp</label>
</div>
<div class="input-field col s4">
<input placeholder="DRAT Data" id="add_drat" type="text" class="validate">
<label class="vcenter" for="add_drat">drat</label>
</div>
<div class="input-field col s4">
<input placeholder="WT Data" id="add_wt" type="text" class="validate">
<label class="vcenter" for="add_wt">wt</label>
</div>
</div>
<div class="row">
<div class="input-field col s4">
<input placeholder="QSEC Data" id="add_qsec" type="text" class="validate">
<label class="vcenter" for="add_qsec">qsec</label>
</div>
<div class="input-field col s4">
<input placeholder="VS Data" id="add_vs" type="text" class="validate">
<label class="vcenter" for="add_vs">vs</label>
</div>
<div class="input-field col s4">
<input placeholder="AM Data" id="add_am" type="text" class="validate">
<label class="vcenter" for="add_am">am</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input placeholder="CARB Data" id="add_carb" type="text" class="validate">
<label class="vcenter" for="add_carb">carb</label>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<!-- Fixed Fab Button -->
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a class="btn-floating waves-effect waves-light btn modal-trigger btn-large pink accent-2" href="#modal1">
<i class="large material-icons">mode_edit</i>
</a>
</div>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-blue btn-flat">Agree</a>
</div>
</div>
</body>
Raw
script.js
$(document).ready(function() {
// Sidenav
$(".button-collapse").sideNav();
//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();
});
})
Raw
style.css
body {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: 400;
background-color: #E0E0E0;
width: 960px;
height: 700px;
margin-top: 10px;
}
.body-light {
background-color: #FAFAFA !important
}
.body-dark {
background-color: #303030 !important
}
/*Utils*/
::-webkit-scrollbar {
width: 6px;
height: 4px;
}
::-webkit-scrollbar-button {
width: 6px;
height: 4px;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.54);
border: 2px none rgba(0, 0, 0, 0.54);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.64);
}
::-webkit-scrollbar-thumb:active {
background: rgba(0, 0, 0, 0.54);
}
::-webkit-scrollbar-track {
background: #fff;
border: 22px none #fff;
border-radius: 5px;
}
::-webkit-scrollbar-track:hover {
background: #fff;
}
::-webkit-scrollbar-track:active {
background: #fff;
}
::-webkit-scrollbar-corner {
background: transparent;
}
.vcenter {
vertical-align: -webkit-baseline-middle
}
.material-icons.md-24 {
font-size: 24px;
}
.material-icons.md-left {
float: left !important;
}
/* NAVBAR */
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%;
}
.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 */
.modal.light {
background-color: #E0E0E0 !important;
}
.modal-dark {
background-color: #303030 !important;
}
.modal.dark > .modal-footer {
background-color: #212121
}
.modal.dark > .modal-footer > a {
color: rgba(255, 255, 255, 0.87)
}
.modal .modal-content,
.modal >.modal-content>h1,
.modal >.modal-content>h2,
.modal >.modal-content>h3,
.modal >.modal-content>h4,
.modal >.modal-content>h5,
.modal >.modal-content>h6 {
background: #E0E0E0 !important;
color: rgba(0, 0, 0, 0.87) !important;
}
.modal >.modal-content>p {
color: rgba(0, 0, 0, 0.53) !important;
}
.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-dark>.modal-footer {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}
.modal-dark>.modal-footer,
.modal-dark>.modal-footer>a {
background-color: #212121 !important;
color: rgba(255, 255, 255, 1) !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;
}
/* 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
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment