summaryrefslogtreecommitdiff
path: root/examples/snowpack/public/css/components/_copy-button.scss
diff options
context:
space:
mode:
authorGravatar Matthew Phillips <matthew@matthewphillips.info> 2021-03-19 17:17:38 -0400
committerGravatar GitHub <noreply@github.com> 2021-03-19 17:17:38 -0400
commit2082001ff8702ec48072b59caafe85573a3b2891 (patch)
treed160341cc51dd39e562a209cad6db168f768a259 /examples/snowpack/public/css/components/_copy-button.scss
parent17c3c98f07628b43b941b84831e8e1f9bcd7ca46 (diff)
downloadastro-2082001ff8702ec48072b59caafe85573a3b2891.tar.gz
astro-2082001ff8702ec48072b59caafe85573a3b2891.tar.zst
astro-2082001ff8702ec48072b59caafe85573a3b2891.zip
Add snowpack as an example project. (#11)
* Initial tests set up This adds tests using uvu (we can switch if people want) and restructures things a bit so that it's easier to test. Like in snowpack you set up a little project. In our tests you can say: ```js const result = await runtime.load('/blog/hello-world') ``` And analyze the result. I included a `test-helpers.js` which has a function that will turn HTML into a cheerio instance, for inspecting the result HTML. * Bring snowpack example in * Formatting
Diffstat (limited to 'examples/snowpack/public/css/components/_copy-button.scss')
-rw-r--r--examples/snowpack/public/css/components/_copy-button.scss48
1 files changed, 48 insertions, 0 deletions
diff --git a/examples/snowpack/public/css/components/_copy-button.scss b/examples/snowpack/public/css/components/_copy-button.scss
new file mode 100644
index 000000000..3a27b9087
--- /dev/null
+++ b/examples/snowpack/public/css/components/_copy-button.scss
@@ -0,0 +1,48 @@
+@use '../var' as *;
+@use '../animations' as *;
+
+.copy-button {
+ display: flex;
+ flex: none;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ min-width: 292px;
+ padding: 0.75rem 1.25rem;
+ padding-bottom: 0.75rem;
+ font-size: 100%;
+ font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas,
+ Liberation Mono, Courier New, monospace;
+ line-height: 1.5rem;
+ background-color: white;
+ border: 1px solid #0006;
+ border-radius: 4px;
+ cursor: pointer;
+ @include animation-copy-button;
+
+ svg,
+ .faded {
+ color: #ccc;
+ transition: color 0.1s ease-out;
+ }
+}
+
+// I don't think this is used
+.copy-button.active {
+ animation: pulse 0.5s;
+ animation-iteration-count: 1;
+
+ svg {
+ color: #ccc;
+ }
+}
+
+@keyframes pulse {
+ 0% {
+ color: #2a85ca;
+ border-color: #2a85ca;
+ }
+
+ 100% {
+ }
+}