mirror of
https://github.com/papercss/papercss
synced 2024-06-27 09:50:14 +02:00
Merge pull request #79 from afzalsayed96/feature-back2top
Adding a back to top button feature
This commit is contained in:
commit
837c7bb826
19
demo.css
19
demo.css
|
@ -14,3 +14,22 @@ body {
|
||||||
.summary a {
|
.summary a {
|
||||||
color: #41403e;
|
color: #41403e;
|
||||||
}
|
}
|
||||||
|
.to-top {
|
||||||
|
opacity: 1;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1em;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 1em;
|
||||||
|
right: 1em
|
||||||
|
}
|
||||||
|
.to-top .paper-btn {
|
||||||
|
padding: .6em 1em;
|
||||||
|
background: #fff;
|
||||||
|
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
|
||||||
|
}
|
|
@ -30,7 +30,7 @@
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class=" paper">
|
<div class=" paper">
|
||||||
<div class="demo-title">
|
<div id="top" class="demo-title">
|
||||||
<div class="row flex-center">
|
<div class="row flex-center">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h1>PaperCSS</h1>
|
<h1>PaperCSS</h1>
|
||||||
|
@ -67,7 +67,9 @@
|
||||||
<li><a href="#article">Article</a></li>
|
<li><a href="#article">Article</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="to-top">
|
||||||
|
<a href="#top" class="paper-btn margin">^</a>
|
||||||
|
</div>
|
||||||
<div id="flexbox" class="section">
|
<div id="flexbox" class="section">
|
||||||
<h2>Flexbox</h2>
|
<h2>Flexbox</h2>
|
||||||
<h4>Flexgrid</h4>
|
<h4>Flexgrid</h4>
|
||||||
|
|
Loading…
Reference in a new issue