mirror of
https://github.com/flutter/flutter
synced 2024-10-14 04:02:56 +00:00
65d3ddd5d1
This creates a custom dartdoc tool that will generate snippet blocks in our API docs that allow the user to copy easily to the clipboard, and will also embed the snippet code into a template to show it in a larger context with an app. This PR adds the snippet tool, a template, and a couple of HTML skeleton files, one for snippets that are designed to be in an application setting, and one where it simply puts a nice container around existing snippets, making them easier to copy to the clipboard.
109 lines
1.6 KiB
CSS
109 lines
1.6 KiB
CSS
/* Styles for handling custom code snippets */
|
|
.snippet-container {
|
|
background-color: #45aae8;
|
|
padding: 10px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.snippet-container pre {
|
|
max-height: 500px;
|
|
overflow: auto;
|
|
padding: 10px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.snippet-container ::-webkit-scrollbar {
|
|
width: 12px;
|
|
}
|
|
|
|
.snippet-container ::-webkit-scrollbar-thumb {
|
|
width: 12px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.snippet {
|
|
position: relative;
|
|
}
|
|
|
|
.snippet-description {
|
|
padding: 10px;
|
|
color: white;
|
|
}
|
|
|
|
.snippet-buttons button {
|
|
background-color: #45aae8;
|
|
border-style: none;
|
|
color: white;
|
|
padding: 10px 24px;
|
|
cursor: pointer;
|
|
float: left;
|
|
}
|
|
|
|
.snippet-buttons:after {
|
|
content: "";
|
|
clear: both;
|
|
display: table;
|
|
}
|
|
|
|
.snippet-buttons button:focus { outline: none; }
|
|
|
|
.snippet-buttons button:hover {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.snippet-buttons :not([selected]) {
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.snippet-buttons [selected] {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.snippet-container [hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.snippet-create-command {
|
|
text-align: end;
|
|
font-size: smaller;
|
|
font-style: normal;
|
|
font-family: courier, lucidia;
|
|
}
|
|
|
|
/* Styles for the copy-to-clipboard button */
|
|
.copyable-container {
|
|
position: relative;
|
|
}
|
|
|
|
.copy-button-overlay {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 14px;
|
|
height: 28px;
|
|
width: 28px;
|
|
transition: .3s ease;
|
|
background-color: #45aae8;
|
|
}
|
|
|
|
.copy-button {
|
|
border-style: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.copy-button :focus {
|
|
outline: 0px;
|
|
}
|
|
|
|
.copy-button :hover {
|
|
transition: .3s ease;
|
|
color: #222;
|
|
}
|
|
|
|
.copy-image {
|
|
opacity: 0.65;
|
|
color: #45aae8;
|
|
font-size: 28px;
|
|
padding-top: 4px;
|
|
}
|