mirror of
https://github.com/papercss/papercss
synced 2024-06-28 02:10:02 +02:00
paperize buttons
This commit is contained in:
parent
7eb5c12227
commit
0021424e63
|
@ -9,7 +9,7 @@ description: PaperCSS Navbar
|
||||||
</div>
|
</div>
|
||||||
<div class="collapsible">
|
<div class="collapsible">
|
||||||
<input id="collapsible0" type="checkbox" name="collapsible0">
|
<input id="collapsible0" type="checkbox" name="collapsible0">
|
||||||
<button class="btn-small btn-mobile">
|
<button>
|
||||||
<label for="collapsible0">
|
<label for="collapsible0">
|
||||||
<div class="bar1"></div>
|
<div class="bar1"></div>
|
||||||
<div class="bar2"></div>
|
<div class="bar2"></div>
|
||||||
|
@ -32,7 +32,7 @@ description: PaperCSS Navbar
|
||||||
</div>
|
</div>
|
||||||
<div class="collapsible">
|
<div class="collapsible">
|
||||||
<input id="collapsible1" type="checkbox" name="collapsible1">
|
<input id="collapsible1" type="checkbox" name="collapsible1">
|
||||||
<button class="btn-small btn-mobile">
|
<button>
|
||||||
<label for="collapsible1">
|
<label for="collapsible1">
|
||||||
<div class="bar1"></div>
|
<div class="bar1"></div>
|
||||||
<div class="bar2"></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>
|
||||||
<div class="collapsible">
|
<div class="collapsible">
|
||||||
<input id="collapsible1" type="checkbox" name="collapsible1">
|
<input id="collapsible1" type="checkbox" name="collapsible1">
|
||||||
<button class="btn-small btn-mobile">
|
<button>
|
||||||
<label for="collapsible1">
|
<label for="collapsible1">
|
||||||
<div class="bar1"></div>
|
<div class="bar1"></div>
|
||||||
<div class="bar2"></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">
|
<nav class="border">
|
||||||
<div class="nav-brand">
|
<div class="nav-brand">
|
||||||
<h4><a href="#">Get PaperCSS</a></h4>
|
<h3><a href="#">Get PaperCSS</a></h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="collapsible">
|
<div class="collapsible">
|
||||||
<input id="collapsible2" type="checkbox" name="collapsible2">
|
<input id="collapsible2" type="checkbox" name="collapsible2">
|
||||||
<button class="btn-small btn-mobile">
|
<button>
|
||||||
<label for="collapsible2">
|
<label for="collapsible2">
|
||||||
<div class="bar1"></div>
|
<div class="bar1"></div>
|
||||||
<div class="bar2"></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>
|
||||||
<div class="collapsible">
|
<div class="collapsible">
|
||||||
<input id="collapsible2" type="checkbox" name="collapsible2">
|
<input id="collapsible2" type="checkbox" name="collapsible2">
|
||||||
<button class="btn-small btn-mobile">
|
<button>
|
||||||
<label for="collapsible2">
|
<label for="collapsible2">
|
||||||
<div class="bar1"></div>
|
<div class="bar1"></div>
|
||||||
<div class="bar2"></div>
|
<div class="bar2"></div>
|
||||||
|
|
|
@ -14,7 +14,10 @@ nav {
|
||||||
.bar2,
|
.bar2,
|
||||||
.bar3 {
|
.bar3 {
|
||||||
background-color: $primary;
|
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;
|
margin: 6px 0;
|
||||||
transition: 0.4s;
|
transition: 0.4s;
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
|
@ -131,14 +134,15 @@ nav {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-mobile {
|
.collapsible > button {
|
||||||
background-color: $main-background;
|
background-color: $main-background;
|
||||||
display: none;
|
display: none;
|
||||||
margin-right: 1.5rem;
|
font-size: 0.5rem;
|
||||||
margin-top: 0.01rem;
|
margin-right: 1rem;
|
||||||
|
padding: 0.25rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0.2rem;
|
||||||
|
|
||||||
@include resp(small) {
|
@include resp(small) {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
Loading…
Reference in a new issue