diff --git a/_includes/icons.html b/_includes/icons.html index 31528db8939a07f65b7b7278b1c60d778f711866..6b75f650160d5b17318a72233c28084019f9e84f 100644 --- a/_includes/icons.html +++ b/_includes/icons.html @@ -2,8 +2,13 @@ <div class="container icons-container"> {% for icon in site.data['icons-manifest'] %} {% capture icon_path %}icons/{{ icon }}.svg{% endcapture %} - <div class="feather-icon"> + <div class="feather-icon" tabindex="0"> {% 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> {% endfor %} </div> diff --git a/assets/tooltip-arrow.svg b/assets/tooltip-arrow.svg new file mode 100644 index 0000000000000000000000000000000000000000..9e8fb07792cebb98e2e87f50ca48cefb9809c9ea --- /dev/null +++ b/assets/tooltip-arrow.svg @@ -0,0 +1,4 @@ +<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 diff --git a/style.scss b/style.scss index 402e404f3ec602e88ca0633f32bde2a994197cc0..7500d9cadd0833469f8b10fa2ccd8575661e92bf 100644 --- a/style.scss +++ b/style.scss @@ -164,10 +164,15 @@ a { .feather-icon { display: inline-block; + position: relative; + box-sizing: content-box; width: 1.5rem; height: 1.5rem; - margin: 1rem; + margin: 0.25rem; + padding: 0.75rem; stroke-width: 2px; + outline: none; + cursor: pointer; > svg { width: 100%; @@ -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-container {