ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-20 19:55:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add arrows to external links (WIP)

Browse Source
This commit is contained in:
mDuo13
2021-06-16 11:25:16 -07:00
parent 918b12fff1
commit 1e3721672d
5 changed files with 40 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/devportal2020.css
View File

File diff suppressed because one or more lines are too long

38
styles/_external-links.scss
View File

@@ -1,10 +1,36 @@
.external-link{
&::after {
content: "\00a0";
background-image: url(../img/icons/arrow-up-right.svg);
background-repeat: no-repeat;
display: inline-block;
background-size: 1em;
padding: 0 .5em;
background-position: left 0 bottom .2em;
transition: background-position 100ms ease-in-out;
/* Reduce external link icon size */
.fa.fa-external-link:before {
font-size: 80%;
// TODO: the background position is based on the padding, so it might
// need adjustments for elements with more padding to make it line up
// with the text. I thought background-origin: content-box might fix this
// but it doesn't seem to.
}
.external-link .fa-external-link,
.related-projects a .fa-external-link {
padding-left: 3px;
&:hover::after {
background-position: left .2em bottom .4em;
}
.fa-external-link {
display: none;
}
}
// /* Reduce external link icon size */
// .fa.fa-external-link:before {
// font-size: 80%;
// }
//
// .external-link .fa-external-link,
// .related-projects a .fa-external-link {
// padding-left: 3px;
// }

14
styles/_top-nav.scss
View File

@@ -29,19 +29,6 @@
text-decoration: none;
font-weight: 600;
&.active a {
font-weight: 700;
box-shadow: inset 0 -1px 0 0 #000;
}
&.active-parent a {
font-weight: 700;
box-shadow: inset 0 -1px 0 0 #000;
}
&:focus {
outline: none;
}
@include media-breakpoint-only(lg) {
&.github-edit {
@@ -181,7 +168,6 @@
.dropdown-item {
line-height: 2rem;
padding: 0;
}
}
}

4
styles/xrpl.scss
View File

@@ -8,11 +8,13 @@ $nav-link-padding-x: 1.25rem;
$nav-link-padding-y: 1rem;
$navbar-brand-padding-y: 1rem;
$navbar-nav-link-padding-x: 2rem;
$navbar-nav-link-padding-y: 1rem;
$navbar-nav-link-padding-y: .75rem;
$border-radius: 0;
$border-radius-lg: 8px;
$border-radius-sm: 4px;
$dropdown-border-width: 1px;
$enable-shadows: true;
$dropdown-box-shadow: 0px 5px 40px $gray-900;
$caret-width: .4em;
$input-btn-padding-y: 1rem;

4
template/component-top-nav.html.jinja
View File

@@ -39,14 +39,14 @@
<h5 class="dropdown-item">{{link.top_nav_grouping}}</h5>
{% set _ = printed_groupings.append(link.top_nav_grouping) %}
{% endif %}
<a class="dropdown-item {% if currentpage == link %} active{% endif %}" href="{{link.html}}">{% if link.top_nav_name is defined %}{{link.top_nav_name}}{% else %}{{link.name}}{% endif %}</a>
<a class="dropdown-item{% if currentpage == link %} active{% endif %}{% if "//" in link.html %} external-link{% endif %}" href="{{link.html}}">{% if link.top_nav_name is defined %}{{link.top_nav_name}}{% else %}{{link.name}}{% endif %}</a>
{% endfor %}
</div><!--./col-->
</div><!--/.dropdown-menu-->
</li>
{% elif not top_page.top_nav_omit %}
<li class="nav-item">
<a class="nav-link" href="{{top_page.html}}"><span>{{top_page.name}}</span></a>
<a class="nav-link{% if "//" in link.html %} external-link{% endif %}" href="{{top_page.html}}"><span>{{top_page.name}}</span></a>
</li>
{% endif %}
{% endmacro %}