2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00

Replace ZeroClipboard with clipboard.js (backported from v4).

This commit is contained in:
XhmikosR
2018-09-22 10:53:23 +03:00
parent c7033212b6
commit 25d017a2ee
9 changed files with 91 additions and 86 deletions
+39
View File
@@ -0,0 +1,39 @@
// clipboard.js
//
// JS-based `Copy` buttons for code snippets.
.bs-clipboard {
position: relative;
display: none;
float: right;
+ .highlight {
margin-top: 0;
}
}
.btn-clipboard {
position: absolute;
top: 0;
right: 0;
z-index: 10;
display: block;
padding: .25rem .5rem;
font-size: 12px;
color: #818a91;
cursor: pointer;
background-color: transparent;
border: 0;
border-radius: .25rem;
&:hover {
color: #fff;
background-color: #027de7;
}
}
@media (min-width: @screen-sm-min) {
.bs-clipboard {
display: block;
}
}
+1 -1
View File
@@ -34,7 +34,7 @@
@import "glyphicons.less";
@import "customizer.less";
@import "brand.less";
@import "zero-clipboard.less";
@import "clipboard-js.less";
@import "anchor.less";
@import "algolia.less";
@import "misc.less";
+6 -2
View File
@@ -50,7 +50,7 @@
// Tweak display of the code snippets when following an example
.bs-example + .highlight,
.bs-example + .zero-clipboard + .highlight {
.bs-example + .bs-clipboard + .highlight {
margin: -15px -15px 15px;
border-width: 0 0 1px;
border-radius: 0;
@@ -68,7 +68,7 @@
box-shadow: none;
}
.bs-example + .highlight,
.bs-example + .zero-clipboard + .highlight {
.bs-example + .bs-clipboard + .highlight {
margin-top: -16px;
margin-right: 0;
margin-left: 0;
@@ -76,6 +76,10 @@
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.bs-example + .bs-clipboard .btn-clipboard {
top: -15px; // due to padding .bs-example has
border-top-right-radius: 0;
}
.bs-example-standalone {
border-radius: 4px;
}
-33
View File
@@ -1,33 +0,0 @@
.zero-clipboard {
position: relative;
display: none;
}
.btn-clipboard {
position: absolute;
top: 0;
right: 0;
z-index: 10;
display: block;
padding: 5px 8px;
font-size: 12px;
color: #767676;
cursor: pointer;
background-color: #fff;
border: 1px solid #e1e1e8;
border-radius: 0 4px;
}
.btn-clipboard-hover {
color: #fff;
background-color: #563d7c;
border-color: #563d7c;
}
@media (min-width: @screen-sm-min) {
.zero-clipboard {
display: block;
}
.bs-example + .zero-clipboard .btn-clipboard {
top: -16px;
border-top-right-radius: 0;
}
}