andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use feather-icon for back-to-top-button

Browse Source
This commit is contained in:
atomiks
2018-03-07 20:54:41 +10:00
parent 2a469b9427
commit 2f32e99fb7
6 changed files with 22 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/3df57813b7ec2de885ea6075ff46ed46.css
View File

File diff suppressed because one or more lines are too long

20
docs/3df57813b7ec2de885ea6075ff46ed46.js
View File

File diff suppressed because one or more lines are too long

2
docs/index.html
View File

File diff suppressed because one or more lines are too long

4
index.html
View File

@ -10,7 +10,9 @@
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<button class="back-to-top-button" aria-label="back to top">↑</button>
<button class="back-to-top-button" aria-label="back to top">
<i data-feather="arrow-up"></i>
</button>
<nav class="sidebar" aria-label="Table of Contents">
<button class="hamburger hamburger--spin sidebar__menu" type="button" aria-label="Menu" aria-expanded="false">
<span class="hamburger-box">

7
src/css/components/back-to-top-button.scss
View File

@ -3,7 +3,6 @@
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 2rem;
font-weight: bold;
background: white;
width: 4rem;
@ -20,6 +19,7 @@
z-index: 1;
border: 1px solid rgba(0, 32, 128, 0.1);
outline: 0;
color: inherit;
&:hover,
&:focus {
@ -37,4 +37,9 @@
visibility: visible;
opacity: 1;
}
.feather {
width: 2rem;
height: 2rem;
}
}

2
src/html/components/back-to-top-button.html
View File

@ -1 +1 @@
<button class="back-to-top-button" aria-label="back to top">↑</button>
<button class="back-to-top-button" aria-label="back to top"><i data-feather="arrow-up"></i></button>