3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-04 10:58:22 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Adds highlightjs dependency.

Browse source
This commit is contained in:
alonso.torres 2020-10-29 14:16:57 +01:00 • committed by Hirunatan
parent 486f2b6ba5
commit 5d6b07f2a7
8 changed files with 274 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

106
frontend/resources/styles/main/partials/handoff.scss
View file

@ -15,6 +15,30 @@
justify-content: center;
}
.attributes-copy-button {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
position: absolute;
right: 0;
top: 0;
background: none;
border: none;
padding: 0;
cursor: pointer;
svg {
width: 16px;
height: 16px;
fill: $color-gray-20;
transition: fill 0.3s;
&:hover {
fill: $color-primary;
}
}
}
.attributes-block {
user-select: text;
@ -30,30 +54,6 @@
border-bottom: none;
}
.attributes-copy-button {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
position: absolute;
right: 0;
top: 0;
background: none;
border: none;
padding: 0;
cursor: pointer;
svg {
width: 16px;
height: 16px;
fill: $color-gray-20;
transition: fill 0.3s;
&:hover {
fill: $color-primary;
}
}
}
.attributes-label {
color: $color-gray-20;
}
@ -263,3 +263,61 @@
border-top: none;
}
}
.code-block {
.code-row-lang {
position: relative;
display: flex;
flex-direction: row;
margin: 0.5rem;
&:hover .attributes-copy-button {
visibility: visible;
opacity: 1;
}
.code-selection {
height: 100%;
margin: 0;
padding: 0.5rem;
width: 4.5rem;
font-size: $fs12;
background: $color-gray-50;
color: $color-gray-10;
border-radius: 2px;
border: 1px solid $color-gray-30;
background-image: url("/images/icons/arrow-down-white.svg");
background-repeat: no-repeat;
background-position: 90% 48%;
background-size: 8px;
}
.attributes-copy-button {
margin-top: 8px;
}
}
.code-row-display {
margin: 0.5rem;
font-size: $fs12;
.code-display {
border-radius: 4px;
padding: 1rem;
overflow: hidden;
white-space: pre-wrap;
background: $color-gray-60;
.hljs-attr {
color: #a6e22e;
}
.hljs-comment {
color: $color-gray-30;
}
.hljs-string {
color: #66d9ef;
}
}
}
}