Add label icon to code snippet header
This commit is contained in:
parent
89b76dc2a0
commit
4ad0a76789
2 changed files with 33 additions and 16 deletions
|
@ -119,14 +119,20 @@
|
|||
|
||||
{% if _left contains 'file="' %}
|
||||
{% assign _text = _left | split: 'file="' | last | split: '"' | first %}
|
||||
{% assign _label_icon = 'far fa-file' %}
|
||||
{% else %}
|
||||
{% assign _text = _left | split: 'language-' | last | split: ' ' | first %}
|
||||
{% assign _label_icon = 'fas fa-code small' %}
|
||||
{% endif %}
|
||||
|
||||
{% capture _label %}
|
||||
<span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
|
||||
{% endcapture %}
|
||||
|
||||
{% assign _new_content = _new_content | append: _snippet
|
||||
| append: '<div class="code-header" text-data="'
|
||||
| append: _text
|
||||
| append: '"><button aria-label="copy" data-original-title="'
|
||||
| append: '<div class="code-header">'
|
||||
| append: _label
|
||||
| append: '<button aria-label="copy" data-original-title="'
|
||||
| append: site.data.locales[lang].post.button.copy_code.succeed
|
||||
| append: '"><i class="far fa-clone"></i></button></div>'
|
||||
| append: '<div class="highlight"><code>'
|
||||
|
|
|
@ -172,24 +172,33 @@ div {
|
|||
align-items: center;
|
||||
line-height: 1.85rem;
|
||||
|
||||
// text data
|
||||
&::before {
|
||||
content: attr(text-data);
|
||||
// the label
|
||||
span {
|
||||
color: var(--lang-badge-color);
|
||||
padding-left: 1em;
|
||||
padding-left: 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
|
||||
// language
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
&:after {
|
||||
content: attr(text-data);
|
||||
margin-left: 0.3rem;
|
||||
font-weight: 600;
|
||||
|
||||
// file name
|
||||
@at-root [file] #{&} {
|
||||
font-size: 0.85rem;
|
||||
text-transform: none;
|
||||
// language
|
||||
@at-root .highlighter-rouge:not([file]) #{&} {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
} // :after
|
||||
|
||||
@at-root [file] #{&} > i { // center the file icon
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// clipboard
|
||||
button {
|
||||
border: 1px solid var(--code-header-bg);
|
||||
|
@ -208,7 +217,9 @@ div {
|
|||
|
||||
&:not([timeout]):hover {
|
||||
background-color: gray;
|
||||
color: white;
|
||||
> i {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
Loading…
Reference in a new issue