src/assets/scss/styleguide.scss
@charset 'UTF-8';
@import "tools/function";
@import "settings";
@import "tools/mixin";
// =======================================
// Styleguide
// =======================================
$styleguideSidebar: 20rem;
.hf-styleguide {
min-height: 100vh;
position: relative;
overflow-y: scroll;
> header {
position: fixed;
overflow-y: auto;
top: 0;
left: 0;
bottom: 0;
width: $styleguideSidebar;
padding: 4rem 2rem;
background: $clr-0-darker;
nav {
display: flex;
flex-direction: column;
margin-top: 3rem;
font-size: 14px;
p {
color: #fff;
font-size: 1.8rem;
margin-bottom: 1rem;
&:not(:first-child) {
margin-top: 3rem;
}
}
a {
color: rgba(255, 255, 255, 0.5);
&:not(:first-child) {
margin-top: 1rem;
}
}
}
}
> main {
padding: 0 2rem 2rem $styleguideSidebar + 2rem;
background: #fff;
counter-reset: section;
}
}
.hf-styleguide-title {
color: #fff;
text-transform: uppercase;
font-size: 2.2rem;
}
.hf-styleguide-linkBack {
color: $clr-1;
display: inline-flex;
margin: 2rem 0;
align-items: center;
font-size: 1.4rem;
transition: color 0.3s ease-in-out;
&:before {
content: "";
display: block;
width: 0.8rem;
height: 0.8rem;
margin-right: 0.2rem;
background: $clr-0-darker;
box-shadow: -2px 2px 0 $clr-1;
transform: rotate(45deg);
transition: box-shadow 0.3s ease-in-out;
}
&:hover {
color: $clr-1-light;
&:before {
box-shadow: -2px 2px 0 $clr-1-light;
}
}
}
// =======================================
// hf
// =======================================
.hf-content {
margin-top: 4rem;
* {
line-height: 1.5;
}
h2 {
font-size: 2.6rem;
font-weight: $font-weight-bold;
border-bottom: 1px solid #ededed;
padding: 0 0 15px;
+ * {
margin-top: 3rem;
}
}
h3 {
font-size: 2rem;
font-weight: $font-weight-bold;
margin-bottom: 20px;
&:before {
display: inline-block;
margin-right: 6px;
font-weight: 400;
color: complement($clr-1);
content: counter(section) " -";
counter-increment: section;
}
}
ul {
margin: 2rem 0;
}
li {
list-style-type: none;
&:before {
content: "- ";
}
}
a {
color: $clr-1;
transition: color 0.3s ease-in-out;
&:hover {
color: $clr-1-light;
}
}
code {
color: darken(complement($clr-1), 30%);
background-color: lighten(complement($clr-1), 25%);
padding: 2px 6px;
font-size: 90%;
vertical-align: middle;
border-radius: 3px;
border: 1px solid lighten(complement($clr-1), 15%);
}
pre code {
background: $clr-0-darker;
display: block;
color: #fff;
padding: 20px;
border-radius: 3px;
}
table {
margin: 30px 0;
width: 100%;
border: 1px solid #f2f2f2;
background: #fff;
tr:nth-child(even) {
background: #fafafa;
}
th {
padding: 10px 20px;
border-bottom: 2px solid #f2f2f2;
font-weight: $font-weight-bold;
}
td {
padding: 10px 20px;
font-size: 14px;
border-bottom: 1px solid #f2f2f2;
&:not(:first-child) {
border-left: 1px solid #f2f2f2;
}
&:first-child {
width: 300px;
}
code {
white-space: nowrap;
}
}
}
}
.hf-bullet {
display: inline-block;
width: 60px;
height: 20px;
margin-right: 10px;
vertical-align: middle;
border: 1px solid #ededed;
border-radius: 20px;
}
.hf-gridItem {
height: 20px;
background: #ccc;
}
.hf-wrapper {
max-width: 900px;
margin-right: auto;
margin-left: auto;
padding-left: 20px;
padding-right: 20px;
}
.hf-head {
margin: 0 -2rem;
padding: 3.5rem 0;
background: $clr-1;
color: #fff;
.hf-wrapper {
display: flex;
justify-content: space-between;
}
h1 {
font-size: 2.4rem;
margin: 0.5rem 0;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: $font-weight-bold;
}
nav {
a {
font-size: 14px;
letter-spacing: 1px;
display: inline-block;
padding: 8px 20px;
color: #fff;
background: rgba(#fff, 0.1);
border-radius: 666px;
transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
&:hover {
background: #fff;
color: $clr-1;
}
+ a {
margin-left: 10px;
}
}
}
}
.hf-box {
background: $clr-1;
padding: 2rem;
}
.hf-exemple {
&:not(:first-child) {
margin-top: 2rem;
}
}
.hf-preview {
margin-top: 20px;
padding: 20px;
border-left: 2px solid #282a36;
border-right: 2px solid #282a36;
border-top: 2px solid #282a36;
background: #fff;
border-radius: 0.3rem 0.3rem 0 0;
&:last-child {
margin-bottom: 0.2rem;
border-radius: 0.3rem;
border-bottom: 2px solid #f7f7f9;
border-radius: 0.3rem;
}
.l-grid__item {
background: $clr-0-lighter;
padding: 10px;
text-align: center;
font-weight: bold;
box-shadow: inset 0 0 0 1px $clr-0-light;
}
& + .hf-code {
border-radius: 0 0 0.3rem 0.3rem;
}
}
.hf-code {
font-size: 80%;
background: #282a36;
margin: 0;
padding: 2rem;
overflow: auto;
line-height: 1.5;
border-radius: 0.3rem;
white-space: pre-wrap;
.hljs {
color: #f2f6f2;
}
.hljs-comment,
.hljs-quote {
color: #5c6370;
font-style: italic;
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
color: #c678dd;
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
color: #ff6ec6;
}
.hljs-literal {
color: #56b6c2;
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
color: #eeee69;
}
.hljs-built_in,
.hljs-class .hljs-title {
color: #00fa58;
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
color: #00fa58;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
color: #61aeee;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
}
}