deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-22 23:46:47 +02:00
Code Issues Projects Releases Wiki Activity

paperize buttons

Browse source
This commit is contained in:
rhyneav 2018-06-22 09:16:30 -04:00
parent 7eb5c12227
commit 0021424e63
2 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
docs/content/docs/components/navbar.md
View file

@ -9,7 +9,7 @@ description: PaperCSS Navbar
</div>
<div class="collapsible">
<input id="collapsible0" type="checkbox" name="collapsible0">
<button class="btn-small btn-mobile">
<button>
<label for="collapsible0">
<div class="bar1"></div>
<div class="bar2"></div>
@ -32,7 +32,7 @@ description: PaperCSS Navbar
</div>
<div class="collapsible">
<input id="collapsible1" type="checkbox" name="collapsible1">
<button class="btn-small btn-mobile">
<button>
<label for="collapsible1">
<div class="bar1"></div>
<div class="bar2"></div>
@ -60,7 +60,7 @@ Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the
</div>
<div class="collapsible">
<input id="collapsible1" type="checkbox" name="collapsible1">
<button class="btn-small btn-mobile">
<button>
<label for="collapsible1">
<div class="bar1"></div>
<div class="bar2"></div>
@ -82,11 +82,11 @@ Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the
<nav class="border">
<div class="nav-brand">
<h4><a href="#">Get PaperCSS</a></h4>
<h3><a href="#">Get PaperCSS</a></h3>
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible2">
<button class="btn-small btn-mobile">
<button>
<label for="collapsible2">
<div class="bar1"></div>
<div class="bar2"></div>
@ -112,7 +112,7 @@ Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible2">
<button class="btn-small btn-mobile">
<button>
<label for="collapsible2">
<div class="bar1"></div>
<div class="bar2"></div>

14
src/components/_navbar.scss
View file

@ -14,7 +14,10 @@ nav {
.bar2,
.bar3 {
background-color: $primary;
height: 0.3rem;
border-bottom: 5px solid $primary;
border-bottom-left-radius: 15px 5px;
border-bottom-right-radius: 15px 3px;
color: $primary;
margin: 6px 0;
transition: 0.4s;
width: 2rem;
@ -131,14 +134,15 @@ nav {
padding: 0;
}
.btn-mobile {
.collapsible > button {
background-color: $main-background;
display: none;
margin-right: 1.5rem;
margin-top: 0.01rem;
font-size: 0.5rem;
margin-right: 1rem;
padding: 0.25rem;
position: absolute;
right: 0;
top: 0;
top: 0.2rem;
@include resp(small) {
display: block;