mirror of
https://github.com/papercss/papercss
synced 2024-06-15 20:25:10 +02:00
Adding a back to top button feature
This commit is contained in:
parent
2330dbf887
commit
e21ea5cc88
|
@ -27,7 +27,7 @@
|
|||
<body>
|
||||
<div class="container paper">
|
||||
|
||||
<div class="demo-title">
|
||||
<div id="top" class="demo-title">
|
||||
<div class="row flex-center">
|
||||
<div class="text-center">
|
||||
<h1>PaperCSS</h1>
|
||||
|
@ -62,7 +62,9 @@
|
|||
<li><a href="#alerts">Alerts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="to-top">
|
||||
<a href="#top" class="paper-btn margin">^</a>
|
||||
</div>
|
||||
<div id="flexbox" class="section">
|
||||
<h2>Flexbox</h2>
|
||||
<h4>Flexgrid</h4>
|
||||
|
|
20
src/back2top.less
Normal file
20
src/back2top.less
Normal file
|
@ -0,0 +1,20 @@
|
|||
.to-top {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
.paper-btn {
|
||||
padding: 0.6em 1em;
|
||||
background: white;
|
||||
border-top-left-radius: 185px 160px;
|
||||
border-top-right-radius: 200px 195px;
|
||||
border-bottom-right-radius: 160px 195px;
|
||||
border-bottom-left-radius: 185px 190px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-title:hover + .to-top {
|
||||
opacity: 0;
|
||||
}
|
|
@ -17,3 +17,4 @@
|
|||
@import (less) "./cards.less";
|
||||
@import (less) "./badges.less";
|
||||
@import (less) "./alerts.less";
|
||||
@import (less) "./back2top.less";
|
||||
|
|
Loading…
Reference in a new issue