paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

css: Extract copy_button_base from copy_codeblock class.

Browse Source 
The base class will contain common styling which is used by both
copy_codeblock and copy_message buttons. This sets us up nicely
for following commit(s) which aims to unify the two button styling.
This commit is contained in:
Sumanth V Rao
2020-08-27 20:11:30 +05:30
committed by Tim Abbott
parent 4e8f5b5b31
commit 26ff6db751
3 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
static/styles/rendered_markdown.css
View File

@@ -460,24 +460,11 @@
/* Style copy-to-clipboard button inside codeblocks */ /* Style copy-to-clipboard button inside codeblocks */
.copy_codeblock { .copy_codeblock {
visibility: hidden; visibility: hidden;
outline-color: hsl(0, 0%, 73%);
height: 18px;
width: 10px;
padding: 6px 6px;
/* Having absolute positioning here ensures that the element /* Having absolute positioning here ensures that the element
doesn't scroll along with the code div in narrow windows */ doesn't scroll along with the code div in narrow windows */
position: absolute; position: absolute;
right: 0; right: 0;
margin-top: -6px; margin-top: -6px;
display: block;
/* The below two avoids the padded element from displaying
it's own border and background color */
border: none;
background-clip: content-box;
}
.copy_codeblock:hover svg path {
fill: hsl(200, 100%, 40%);
} }
.code_external_link { .code_external_link {

17
static/styles/zulip.css
View File

@@ -430,6 +430,23 @@ li,
line-height: 100%; line-height: 100%;
} }
/* Classes which style copy buttons */
.copy_button_base {
outline-color: hsl(0, 0%, 73%);
height: 18px;
width: 10px;
padding: 6px 6px;
display: block;
/* The below two avoids the padded element from displaying
it's own border and background color */
border: none;
background-clip: content-box;
&:hover svg path {
fill: hsl(200, 100%, 40%);
}
}
.copy_message, .copy_message,
.copy_message:focus { .copy_message:focus {
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);

2
static/templates/copy_code_button.hbs
View File

@@ -1,4 +1,4 @@
<button class="btn pull-left copy_codeblock" data-toggle="tooltip" title="{{t "Copy code" }}" aria-label="{{t "Copy code" }}"> <button class="btn pull-left copy_button_base copy_codeblock" data-toggle="tooltip" title="{{t "Copy code" }}" aria-label="{{t "Copy code" }}">
<svg height="17" width="14" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" id="clipboard_image"> <svg height="17" width="14" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" id="clipboard_image">
<path fill="#777" d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" /> <path fill="#777" d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
</svg> </svg>