Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
F
feather
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kulya
feather
Commits
1300d780
Commit
1300d780
authored
7 years ago
by
Cole Bemis
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add icon download tooltip
parent
eee04071
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
83 additions
and
2 deletions
+83
-2
icons.html
_includes/icons.html
+6
-1
tooltip-arrow.svg
assets/tooltip-arrow.svg
+4
-0
style.scss
style.scss
+73
-1
No files found.
_includes/icons.html
View file @
1300d780
...
@@ -2,8 +2,13 @@
...
@@ -2,8 +2,13 @@
<div
class=
"container icons-container"
>
<div
class=
"container icons-container"
>
{% for icon in site.data['icons-manifest'] %}
{% for icon in site.data['icons-manifest'] %}
{% capture icon_path %}icons/{{ icon }}.svg{% endcapture %}
{% capture icon_path %}icons/{{ icon }}.svg{% endcapture %}
<div
class=
"feather-icon"
>
<div
class=
"feather-icon"
tabindex=
"0"
>
{% include_relative {{ icon_path }} %}
{% include_relative {{ icon_path }} %}
<div
class=
"tooltip"
>
<p
class=
"tooltip-icon-name"
>
{{ icon }}
</p>
<!-- TODO: remove tabindex="-1" -->
<a
class=
"tooltip-download"
href=
"{{ icon_path }}"
download
tabindex=
"-1"
>
Download
</a>
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
...
...
This diff is collapsed.
Click to expand it.
assets/tooltip-arrow.svg
0 → 100644
View file @
1300d780
<svg
xmlns=
"http://www.w3.org/2000/svg"
width=
"36"
height=
"20"
viewBox=
"0 0 36 20"
>
<title>
tooltip-arrow
</title>
<path
d=
"M20.12,2.12,31.24,13.24A6,6,0,0,0,35.49,15H36v5H0V15H.51a6,6,0,0,0,4.24-1.76L15.88,2.12A3,3,0,0,1,20.12,2.12Z"
fill=
"#424242"
/>
</svg>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
style.scss
View file @
1300d780
...
@@ -164,10 +164,15 @@ a {
...
@@ -164,10 +164,15 @@ a {
.feather-icon
{
.feather-icon
{
display
:
inline-block
;
display
:
inline-block
;
position
:
relative
;
box-sizing
:
content-box
;
width
:
1
.5rem
;
width
:
1
.5rem
;
height
:
1
.5rem
;
height
:
1
.5rem
;
margin
:
1rem
;
margin
:
0
.25rem
;
padding
:
0
.75rem
;
stroke-width
:
2px
;
stroke-width
:
2px
;
outline
:
none
;
cursor
:
pointer
;
>
svg
{
>
svg
{
width
:
100%
;
width
:
100%
;
...
@@ -177,6 +182,73 @@ a {
...
@@ -177,6 +182,73 @@ a {
}
}
}
}
.tooltip
{
display
:
flex
;
flex-direction
:
column
;
position
:
absolute
;
top
:
calc
(
100%
+
15px
);
left
:
50%
;
min-width
:
8rem
;
transform
:
translateX
(
-50%
)
scale
(
0
.75
);
transform-origin
:
50%
0
;
color
:
#fff
;
background-color
:
#424242
;
text-align
:
center
;
border-radius
:
0
.375rem
;
opacity
:
0
;
visibility
:
hidden
;
z-index
:
10
;
cursor
:
default
;
transition
:
transform
$transition-duration
,
opacity
$transition-duration
,
visibility
$transition-duration
;
@include
for-tablet-portrait-up
{
min-width
:
12rem
;
}
.feather-icon
:focus
&
{
transform
:
translateX
(
-50%
)
scale
(
1
);
opacity
:
1
;
visibility
:
visible
;
}
}
.
tooltip
:
:
before
{
content
:
""
;
display
:
block
;
position
:
absolute
;
top
:
0
;
left
:
50%
;
transform
:
translate
(
-50%
,
-15px
);
width
:
36px
;
height
:
20px
;
background-image
:
url("assets/tooltip-arrow.svg")
;
background-size
:
100%
;
}
.tooltip-icon-name
{
display
:
inline-block
;
margin
:
0
;
padding
:
1rem
1
.5rem
;
}
.tooltip-download
{
display
:
inline-block
;
padding
:
1rem
1
.5rem
;
background-color
:
#212121
;
border-radius
:
0
0
0
.375rem
0
.375rem
;
font-size
:
0
.875rem
;
text-transform
:
uppercase
;
letter-spacing
:
1px
;
transition
:
background-color
$transition-duration
;
&
:hover
{
background-color
:
#000
;
}
}
/* Request */
/* Request */
.request-container
{
.request-container
{
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment