astro/examples/snowpack/public/css/components/_copy-button.scss
Matthew Phillips 2082001ff8
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
2021-03-19 17:17:38 -04:00

48 lines
846 B
SCSS

@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% {
}
}