patternlibrary/sass/styleguide-builder/kss-assets/kss.css

205 lines
3.4 KiB
CSS
Raw Normal View History

2018-06-21 01:38:13 +00:00
@charset "UTF-8";
body {
margin: 0;
font-family: sans-serif; }
.kss-section + .kss-section {
margin-top: 60px; }
.kss-title {
margin: 1rem 0;
line-height: 1em;
color: #ccc; }
h1.kss-title {
font-size: 1em; }
h2.kss-title {
font-size: 1em; }
h3.kss-title {
font-size: 1em; }
h4.kss-title {
font-size: 1em; }
.kss-description {
color: #ccc;
font-size: 0.875em;
line-height: 1.6em; }
.kss-pattern__header {
border-bottom: 1px dotted #ccc;
margin-bottom: 2em; }
.kss-code-toggle {
float: right;
color: #ccc; }
.kss-pattern__header:hover .kss-description,
.kss-pattern__header:hover .kss-title,
.kss-pattern__header:hover .kss-code-toggle {
color: #000; }
.kss-sidebar {
box-sizing: border-box;
padding: 0.875em;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 280px;
color: #444;
background: #ccc;
overflow-y: auto; }
.kss-main-wrap {
margin-left: 280px;
box-sizing: border-box; }
.kss-main {
box-sizing: border-box;
padding: 1rem 2em; }
.kss-link,
.kss-nav__menu-link {
text-decoration: none;
color: currentColor; }
.kss-nav__menu-link:hover {
text-decoration: none; }
.kss-nav__menu-link {
font-size: 0.875em; }
.kss-source,
.kss-markup {
margin: 1rem 0; }
.kss-source summary:focus,
.kss-markup summary:focus {
outline: 0;
border: 0; }
.kss-source > summary,
.kss-markup > summary {
margin-bottom: 14px;
font-size: 14px;
color: #999; }
.kss-modifier__heading {
display: block;
font-size: 14px;
color: #999;
margin: 1em 0;
padding: 1em 0; }
.kss-modifier__default-name,
.kss-modifier__name,
.kss-parameters__title {
clear: both;
font-weight: bold;
font-size: 14px;
color: #999;
margin: 1em 0; }
.kss-modifier__description {
color: #999;
font-weight: 400; }
.kss-markup pre {
padding: 1em;
background: #F0F8FF;
overflow-x: auto;
font-size: 14px; }
.kss-modifier__wrapper {
padding-bottom: 2em;
margin-bottom: 2em; }
.kss-nav__menu {
padding: 0;
list-style: none; }
.kss-nav__menu-child {
padding: 0 0 0 1em;
list-style: none; }
.kss-nav__menu-link {
display: block;
padding: 0.5em 0;
border-bottom: 1px dotted #999; }
.kss-nav__menu-link:hover {
background: #ddd; }
.kss-parameters {
padding: 0;
list-style: none; }
.kss-parameters__item + .kss-parameters__item {
margin-top: 1em; }
.kss-parameters__name,
.kss-parameters__description {
display: inline-block; }
.kss-parameters__name > code {
background: #F0F8FF;
margin-right: 1em; }
.kss-nav__ref {
color: #999; }
.kss-section {
overflow: visible; }
.kss-section::after {
display: block;
clear: both;
content: ''; }
.kss-pattern {
box-sizing: border-box; }
.kss-pattern-code {
display: none;
box-sizing: border-box; }
.kss-pattern-code.active {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 280px;
box-sizing: border-box;
padding: 4em;
overflow-y: auto;
background: white;
z-index: +99; }
.kss-source,
.kss-markup {
color: #ccc;
font-size: 0.875em; }
.kss-pattern-code:hover .kss-source,
.kss-pattern-code:hover .kss-markup {
color: #000; }
@media (min-width: 1024px) {
.kss-pattern {
padding-right: 1em;
width: 100%;
float: left; } }
.kss-nav__menu-link {
font-weight: normal; }
.kss-nav__menu-link.kss-design__link {
font-weight: bold; }
.kss-nav__menu-link.kss-design__link::before {
content: '→'; }