mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-26 11:34:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

added shadows to demo

Browse Source
This commit is contained in:
FezVrasta 2014-12-03 10:53:32 +01:00
parent 72357a2e26
commit 295064bafe
1 changed files with 73 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
index.html
View File

@ -143,6 +143,10 @@ push = +refs/heads/master:refs/heads/master
</style> </style>
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head> </head>
<body> <body>
@ -177,6 +181,7 @@ push = +refs/heads/master:refs/heads/master
<li class="withripple" data-target="#dropdown">Dropdown (Work in progress)</li> <li class="withripple" data-target="#dropdown">Dropdown (Work in progress)</li>
<li class="withripple" data-target="#dropdown-menu">Dropdown Menu</li> <li class="withripple" data-target="#dropdown-menu">Dropdown Menu</li>
<li class="withripple" data-target="#dialog">Dialog</li> <li class="withripple" data-target="#dialog">Dialog</li>
<li class="withripple" data-target="#shadow">Shadow</li>
</ul> </ul>
</nav> </nav>
<div class="pages col-xs-9"> <div class="pages col-xs-9">
@ -841,7 +846,7 @@ push = +refs/heads/master:refs/heads/master
</div> </div>
</div> </div>
<style> <style>
#dropdown-menu h2 { #dialog h2 {
padding: 14px; padding: 14px;
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
@ -849,6 +854,73 @@ push = +refs/heads/master:refs/heads/master
} }
</style> </style>
</div> </div>
<div class="well page" id="shadow">
<h1 class="header">Shadow</h1>
<h2>Shadows</h2>
<div class="sample">z = 0</div>
<div class="sample shadow-z-1">z = 1</div>
<div class="sample shadow-z-2">z = 2</div>
<div class="sample shadow-z-3">z = 3</div>
<div class="sample shadow-z-4">z = 4</div>
<div class="sample shadow-z-5">z = 5</div>
<h2>Animated</h2>
<div id="shadow-sample2" data-tap="0">tap</div>
<div id="shadow-sample3" data-tap="0">tap</div>
<script>
$(document).on("click", "#shadow-sample2, #shadow-sample3", function() {
var tap = ($(this).data("tap") * 1) + 1;
if (tap === 6) {
tap = 0;
}
$(this).data("tap", tap);
var shadow = "shadow-z-" + tap;
$(this).attr("class", shadow);
});
</script>
<style>
#shadow h2 {
padding: 14px;
margin: 0;
font-size: 16px;
font-weight: 400;
}
#shadow .sample {
width: 100px;
height: 100px;
margin: 16px;
padding: 16px;
display: inline-block;
}
#shadow-sample2 {
display: inline-block;
width: 100px;
height: 100px;
margin: 16px;
padding: 16px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#shadow-sample3 {
display: inline-block;
width: 100px;
height: 100px;
margin: 16px;
padding: 16px;
border-radius: 100px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
</style>
</div>
</div> </div>
<div class="col-xs-2"> <div class="col-xs-2">
<button class="btn btn-fab btn-material-lightgrey" id="opensource"><i class="mdi-action-open-in-new"></i></button></div> <button class="btn btn-fab btn-material-lightgrey" id="opensource"><i class="mdi-action-open-in-new"></i></button></div>
@ -870,8 +942,6 @@ push = +refs/heads/master:refs/heads/master
</div> </div>
</div> </div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- Open source code --> <!-- Open source code -->
<script> <script>