Improvements

- Add .contrast variant
- Separate _button-styles.scss
- Edit .secondary, mark, figcaption, hgroup, tooltips
- Docs: Add More about grids, External links icon, Second theme switcher
This commit is contained in:
Lucas 2019-11-30 12:43:20 +07:00
parent 066c0a04fd
commit 73237bdcd4
26 changed files with 516 additions and 229 deletions

View file

@ -35,7 +35,7 @@ body > main {
// Anchors hacks for internal links
//
a[name]:not([href])::before {
div[role="document"] > section::before {
display: block;
height: map-get($spacing-factor, "xs") + $navHeight;
margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
@ -62,3 +62,20 @@ a[name]:not([href])::before {
margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
}
}
// External links
//
div[role="document"] section a[href^="https://"]:not([href*="https://picocss.com"]):not([role])::after {
display: inline-block;
width: 1rem;
height: 1rem;
// Source: https://feathericons.com/
$caret-icon-color: "808080"; // Without '#' !important
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
background-position: top center;
background-repeat: no-repeat;
background-size: .66rem auto;
content: '';
}