dashing-framework
Version:
Style framework for Dash
57 lines (52 loc) • 2.36 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/example.css" rel="stylesheet">
<title>Footer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../../scripts/scripts.js"></script>
<script src="../../scripts/prism.js"></script>
</head>
<body class="example-body">
<div class="main-content">
<div id="sidebarNavigation" class="example-sidebar"></div>
<div class="sidebar--overlay is-hidden"></div>
<div class="main">
<div class="page-header">
<button class="button--sidebar-icon float-left"><i class="sidebar-icon--menu"></i></button>
<h1>Footer</h1>
</div>
<div class="app-content">
<div class="row">
<div class="column column--full">
<h2 class="example-header no-margin--top">Footer <button class="button button--transparent button--copy-link" data-id="copyurl" id="Footer"></h2>
<div class="row example-container">
<div class="column column--full" style="overflow: auto;">
<footer class="app-footer example--footer" style="position: relative;">
<div class="row no-padding">
<button class="float-left">Save</button>
<button class="button--green float-right">Submit</button>
</div>
</footer>
</div>
</div>
<div class="code-toggle"><i class="icon--code"></i></div>
<pre><code class="language-html"><!-- Apply the fixed class to the app-footer element to fix it to the bottom -->
<footer class="app-footer fixed">
<div class="row no-padding">
<button class="float-left">Save</button>
<button class="button--green float-right">Submit</button>
</div>
</footer></code>
</pre>
<pre><code class="language-scss">//Include these variables in your theme file to change the color theme of your footer
$footer-color: $white !default; //Override this variable to change the color of your footer
$footer-border-color: $gray-200 !default; //Override this variable to change the color of the top border of your footer</code>
</pre>
</div>
</div>
</div>
</body>
</html>