kss-scheibo/kss_styleguide/scheibo-template/kss-assets/kss.css

A custom template for the kss-node living styleguide.

@tailwind components;
@tailwind utilities;

.kss-scheibo__body {
  @apply overflow-auto m-0 bg-gray-50;
}

a {
  @apply text-current;
}

.kss-header {
  background-color: var(--kss-scheibo--maincolor);
  color: var(--kss-scheibo--maincolor-con);
  @apply font-arial px-4 py-1 overflow-hidden;
}

.kss-doc-title {
  @apply text-2xl font-normal border-none mx-auto my-4 px-4;
  color: var(--kss-scheibo--maincolor-con);
  text-shadow: none;
}

.kss-style {
  @apply font-arial text-gray-700;
}

.kss-style--header {
  @apply bg-gray-300 p-8;
}

.kss-style--maincolor {
   background-color: var(--kss-scheibo--maincolor);
   color: var(--kss-scheibo--maincolor-con);
}

.kss-style--maincolor.kss-style--colorlist {
  @apply bg-white text-gray-700;
}

.kss-container {
  @apply my-6 mx-auto px-4;
}

.kss-nav__menu {
  @apply p-0;
  list-style: none;
}

.kss-nav__menu > li > ul {
  list-style: none;
}

.kss-nav__menu-child {
  @apply p-0 ml-4;
  list-style: none;
}

.kss-nav__menu-item {
  @apply border-gray-300 border-solid border-0 border-t;
}

.kss-nav__menu-link {
  @apply text-current block p-2 no-underline flex flex-row-reverse justify-between cursor-pointer text-base;
}

.kss-nav__menu-link:hover {
  @apply text-current no-underline;
}

.kss-nav__ref {
  @apply pr-2 opacity-75;
}

.kss-main {
  @apply bg-white shadow-md rounded-t-lg overflow-auto;
}

.kss-title {
  @apply font-arial border-none font-normal my-2;
  text-shadow: none;
}

.kss-title--level-1 {
  @apply text-2xl;
}

.kss-title--level-2 {
  @apply text-xl italic;
}

.kss-title__permalink {
  @apply no-underline;
}

.kss-title--onmaincolor {
  color: var(--kss-scheibo--maincolor-con);
}

.kss-style--colorlist .kss-title--onmaincolor {
  @apply text-gray-700;
}

.kss-toolbar__link {
  @apply inline-block rounded bg-gray-300 block p-2 px-4 m-1 text-center leading-none;
}

.kss-toolbar__link:hover {
  @apply bg-gray-200;
}

.kss-guides-mode .kss-toolbar__link--guides,
.kss-fullscreen-mode .kss-toolbar__link--fullscreen,
.kss-markup-mode .kss-toolbar__link--markup {
  @apply bg-blue-100;
}

.kss-toolbar__tooltip {
  @apply hidden;
}

.kss-toolbar__on {
  @apply hidden;
}

.kss-fullscreen-mode .kss-toolbar__on {
  @apply inline;
}

.kss-fullscreen-mode .kss-toolbar__off {
  @apply hidden;
}

.kss-toolbar__svg {
  @apply w-4 h-4;
}

.kss-toolbar__icon-fill {
  @apply text-black fill-current;
}

.kss-source,
.kss-markup {
  @apply p-8 bg-gray-100 text-base;
}

.kss-source {
  @apply pt-0;
}

.kss-modifier__example {
  @apply p-3 mb-8 py-10 border-solid border-gray-300 border-0 border-b relative;
}

.kss-modifier__defaultinsertmarkuptext {
  @apply italic text-sm font-normal;
}

.kss-modifier__defaultheader {
  @apply flex justify-between items-center;
}

.kss-modifier__heading {
  @apply font-bold mb-4;
}

.kss-modifier__header {
  @apply flex justify-between items-center opacity-75;
  transition: opacity 0.5s;
}

.kss-modifier__header:hover {
  @apply opacity-100;
}

.kss-modifier__default-name,
.kss-modifier__name {
  @apply font-bold px-3;
}

.kss-modifier__name {
  @apply text-base;
}

.kss-modifier__description,
.kss-modifier__insertmarkuptext {
  @apply px-3 italic text-sm;
}

.kss-modifier__wrapper {
  @apply p-8;
}

.kss-section {
  @apply border-gray-300 border-0 border-b border-solid;
}

.kss-section--hidden {
   @apply hidden;
}

.kss-description {
  @apply text-sm;
}

.kss-fullscreen-mode .kss-header,
.kss-fullscreen-mode .kss-sidebar,
.kss-fullscreen-mode .kss-section:not(.is-fullscreen),
.kss-fullscreen-mode .kss-github {
  @apply hidden;
}

.kss-fullscreen-mode .kss-container,
.kss-fullscreen-mode .kss-main {
  @apply w-full max-w-full p-0;
}

.kss-fullscreen-mode .kss-modifier__example {
  @apply px-0;
}

.kss-guides-mode .kss-modifier__example {
  @apply border-dotted border-gray-700 border p-0;
}

.kss-overview {
  @apply p-8 text-base;
}

.kss-overview h1 {
  @apply text-2xl py-12 px-8 -mx-8 -mt-8 font-normal;
  background-color: var(--kss-scheibo--maincolor);
  color: var(--kss-scheibo--maincolor-con);
}

.kss-overview h2 {
  @apply pt-8 leading-snug;
}

.kss-overview h2:after {
  content: '';
  @apply block w-1/2 border-solid border-0 border-b-4 mt-3;
  border-color: var(--kss-scheibo--maincolor);
}

.kss-overview h4 {
  @apply border-solid border-0 border-l-4 py-3 pl-3;
  border-color: var(--kss-scheibo--maincolor);
}

.kss-overview td {
  @apply px-3;
}

.kss-overview th {
  @apply text-sm;
}

.kss-overview hr {
  @apply border-0 h-px;
  background-color: var(--kss-scheibo--maincolor);
}

.kss-colors {
  @apply flex flex-wrap justify-between p-0 text-base;
  list-style: none;
}

.kss-colors:after {
  content: '';
  flex: auto;
}

.kss-colors__item {
  @apply mb-8 px-2;
  width: calc(50% - 1rem);
}

.kss-colors__colorbox {
  @apply w-full;
  height: 100px;
}

.kss-colors__value {
  @apply mb-2;
}

.kss-colors__variable {
  @apply italic mb-2;
}

.kss-search__input {
  @apply box-border border border-black border-solid w-full p-2 text-base;
}

.kss-search__list {
  @apply bg-gray-100 mt-0 p-2 hidden;
}

.kss-search__list--display {
  @apply block;
}
.kss-search__desc {
  display: none !important;
}

@screen md {

  .kss-doc-title {
    @apply font-arial container mx-auto;
  }

  .kss-container {
    @apply container flex justify-between;
  }

  .kss-nav__menu-child {
    @apply mt-2;
  }

  .kss-nav__menu-item {
    @apply border-none mb-2;
  }

  .kss-nav__menu-link:hover,
  .kss-nav__menu-link--active,
  .kss-nav__menu-child .kss-nav__menu-link:hover {
    @apply border-solid border-0 border-l-4;
    border-color: var(--kss-scheibo--maincolor);
  }

  .kss-sidebar {
    @apply w-1/5;
  }

  .kss-main {
    width: calc(80% - 2rem);
  }
}

@screen lg {

  .kss-colors__item {
    width: calc(25% - 1rem);
  }

  .kss-colors__colorbox {
    height: 150px
  }
}