.styleguide-item {
margin-bottom: 2rem; .copy-link { > h2, > h4, > h5, > h3 { padding-top: 2rem; } } .styleguide-item-inner { position: relative; padding: 1rem; margin: 1rem 0 0; border: solid #f7f7f9; border-width: 0.2rem 0 0; border-width: 0.2rem; } .styleguide-item-html { position: relative; padding: 1rem; border: solid #f7f7f9; background-color: #f7f7f9; border-width: 0.2rem 0 0; border-width: 0.2rem; @media (max-width: 768px) { padding: 1rem 0; } pre { margin-bottom: 0; } }
}
.copy-link {
h4 { padding-top: 2rem; }
}
.styleguide-item-inner {
h1, h2, h2, h3, h4, h5, h6 { margin-bottom: 0.7rem; padding-bottom: 0; }
}
.styleguide-btn-list {
.btn { margin-bottom: 5px; }
}
.s {
color: #d44950;
}
.mf {
color: #f60;
}
.na {
color: #4f9fcf;
}
.nt {
color: #2f6f9f;
}
.sidebar-styleguide {
margin-top: 1.5rem; margin-left: -64px; .navbar { padding: 0; }
}
.copy-link {
display: block; &:after { content: ""; height: 1rem; width: 1rem; margin-left: 0.25rem; display: inline-block; background-image: url("../assets/images/icons/icon-unlink.svg"); } h1, h2, h3, h4, h5, h6 { display: inline-block; }
}
// CODE SYNTAX HIGHLIGHTING .highlight pre, pre {
background-color: #f8f8f8; border: 1px solid #ccc; padding: 6px 10px; border-radius: 3px;
}
.highlight {
.hll { background-color: #f8f8f8; border: 1px solid #ccc; padding: 6px 10px; border-radius: 3px; } .c { color: #999988; font-style: italic; } .err { color: #a61717; background-color: #e3d2d2; } .k, .o { font-weight: bold; } .cm { color: #999988; font-style: italic; } .cp { color: #999999; font-weight: bold; } .c1 { color: #999988; font-style: italic; } .cs { color: #999999; font-weight: bold; font-style: italic; } .gd { color: #000000; background-color: #ffdddd; .x { color: #000000; background-color: #ffaaaa; } } .ge { font-style: italic; } .gr { color: #aa0000; } .gh { color: #999999; } .gi { color: #000000; background-color: #ddffdd; .x { color: #000000; background-color: #aaffaa; } } .go { color: #888888; } .gp { color: #555555; } .gs { font-weight: bold; } .gu { color: #800080; font-weight: bold; } .gt { color: #aa0000; } .kc, .kd, .kn, .kp, .kr { font-weight: bold; } .kt { color: #445588; font-weight: bold; } .m { color: #009999; } .s { color: #dd1144; } .n { color: #333333; } .na { color: teal; } .nb { color: #0086b3; } .nc { color: #445588; font-weight: bold; } .no { color: teal; } .ni { color: purple; } .ne, .nf { color: #990000; font-weight: bold; } .nn { color: #555555; } .nt { color: navy; } .nv { color: teal; } .ow { font-weight: bold; } .w { color: #bbbbbb; } .mf, .mh, .mi, .mo { color: #009999; } .sb, .sc, .sd, .s2, .se, .sh, .si, .sx { color: #dd1144; } .sr { color: #009926; } .s1 { color: #dd1144; } .ss { color: #990073; } .bp { color: #999999; } .vc, .vg, .vi { color: teal; } .il { color: #009999; } .gc { color: #999; background-color: #EAF2F5; }
}