You are here

Home » API reference » Open Social 8.8

styleguide.css in Open Social 8.8

Same filename and directory in other branches
  1. 8.9 themes/socialblue/assets/css/styleguide.css
  2. 8 themes/socialblue/assets/css/styleguide.css
  3. 8.2 themes/socialblue/assets/css/styleguide.css
  4. 8.3 themes/socialblue/assets/css/styleguide.css
  5. 8.4 themes/socialblue/assets/css/styleguide.css
  6. 8.5 themes/socialblue/assets/css/styleguide.css
  7. 8.6 themes/socialblue/assets/css/styleguide.css
  8. 8.7 themes/socialblue/assets/css/styleguide.css
/*****************
  Chrome Browser
*****************/
.browser-window {
  text-align: center;
  width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 5px;
  margin: 20px 0px;
  overflow: hidden;
  background-color: #f3f3f3;
}

.browser-window .top-bar {
  height: 30px;
  text-align: left;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(#f3f3f3, #e6e6e6);
}

.browser-window .circles {
  margin: 5px 12px;
}

.browser-window .circle {
  height: 10px;
  width: 10px;
  display: inline-block;
  border-radius: 50%;
  background-color: white;
  margin-right: 1px;
}

.browser-window p {
  text-align: center;
  margin: 0;
}

#close-circle {
  background-color: #FF5C5A;
}

#minimize-circle {
  background-color: #FFBB50;
}

#maximize-circle {
  background-color: #1BC656;
}

.browser-window p.flat-text-header {
  height: 35px;
  width: 80%;
  background-color: rgba(0, 0, 0, 0.25);
  display: block;
  margin: 27px auto;
}

.browser-window p.flat-text {
  height: 25px;
  width: 80%;
  background-color: rgba(0, 0, 0, 0.15);
  display: block;
  margin: 27px auto;
}

.browser-window p.flat-text.small {
  width: 25%;
  height: 25px;
  background-color: rgba(0, 0, 0, 0.15);
}

.browser-window p.flat-text.inline25 {
  width: 22.5%;
  margin-left: 1%;
  margin-right: 1%;
  display: inline-block;
  height: 25px;
  background-color: rgba(0, 0, 0, 0.15);
}

.browser-window p.flat-text.full-width {
  width: 100%;
}

.grid-example {
  border: 1px solid #eee;
  margin: 7px 0;
  text-align: center;
  font-size: 28px;
  background-color: #29abe2;
  color: white;
  padding: 0;
  opacity: 0.5;
}

#kss-node .kss-doc-title {
  margin: 0;
}

#kss-node .lead,
#kss-node .kss-nav__ref {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal;
  margin: -1px;
  padding: 0;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#kss-node .kss-nav__ref:after {
  content: ' ';
}

#kss-node .kss-nav__ref-child + .kss-nav__name {
  margin-left: 0.5rem;
  font-weight: 300;
}

#kss-node .kss-section {
  margin-bottom: 48px;
}

#kss-node .kss-section.is-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  min-width: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
  -o-object-fit: contain;
     object-fit: contain;
  transform: none;
  overflow: auto;
  padding: 20px;
  background-color: #f3f3f3;
  z-index: 99;
}

#kss-node.kss-fullscreen-mode .site-footer,
#kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen) {
  display: none;
}

#kss-node .kss-title {
  padding-bottom: 11px;
  margin: 48px 0 6px;
  border-bottom: 1px solid rgba(119, 119, 119, 0.2);
}

#kss-node .is-fullscreen .kss-title {
  margin-top: 0;
}

#kss-node.kss-fullscreen-mode .navbar-fixed-top {
  z-index: -1;
  display: none;
}

#kss-node .kss-title__ref {
  display: block;
  font-size: 16px;
  line-height: 16px;
  color: #666;
}

#kss-node .kss-title__ref:before {
  content: 'Section ';
}

#kss-node .kss-title__permalink {
  display: block;
  color: #000;
  text-decoration: none;
}

#kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active {
  color: #0645ad;
}

#kss-node .kss-title__permalink-hash {
  display: none;
  color: #ccc;
}

#kss-node .kss-toolbar {
  margin: 6px 0 24px;
  display: inline-block;
  border: 1px solid #eee;
  background-color: #f9f9f9;
  border-right-color: #e0e0e0;
  border-bottom-color: #e0e0e0;
  line-height: 1;
  padding: 3px;
}

#kss-node .kss-toolbar a {
  box-sizing: content-box;
  display: inline-block;
  width: 16px;
  height: 16px;
  padding: 3px;
  vertical-align: top;
  position: relative;
  overflow: visible;
}

#kss-node .kss-toolbar a + a {
  margin-left: 6px;
}

#kss-node .kss-toolbar a .kss-toolbar__icon-fill {
  fill: #ccc;
}

#kss-node .kss-toolbar a svg.on {
  display: none;
}

#kss-node .kss-toolbar a:focus, #kss-node .kss-toolbar a:hover {
  border-color: #000;
}

#kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill, #kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill {
  fill: #000;
}

#kss-node .kss-toolbar__tooltip {
  position: absolute;
  z-index: 1;
  display: inline-block;
  bottom: 100%;
  left: -10px;
  margin-bottom: 5px;
  border: solid 1px #666;
  padding: 8px 10px 6px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  color: #000;
  background: #fff;
  cursor: help;
  opacity: 0;
  transition: opacity 0.25s;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal;
}

#kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 15px;
  width: 0;
  height: 0;
  border-width: 7px 5px 0;
  border-color: #666 transparent;
  border-style: solid;
}

#kss-node .kss-toolbar__tooltip:after {
  bottom: -6px;
  border-top-color: #fff;
}

#kss-node a:hover > .kss-toolbar__tooltip {
  opacity: 1;
  clip: auto;
  height: auto;
  width: auto;
  overflow: visible;
}

#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen],
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides],
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] {
  border-color: #666;
  background-color: #666;
}

#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill,
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill,
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill {
  fill: #fff;
}

#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.on,
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.on,
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.on {
  display: block;
}

#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.off,
#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.off,
#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.off {
  display: none;
}

#kss-node .kss-parameters {
  display: table;
  list-style-type: none;
  margin-top: 0;
  margin-left: 0;
  padding-left: 0;
}

#kss-node .kss-parameters__title {
  font-weight: bold;
}

#kss-node .kss-parameters__item {
  display: table-row;
}

#kss-node .kss-parameters__name {
  display: table-cell;
  padding-right: 20px;
  white-space: nowrap;
}

#kss-node .kss-parameters__description {
  display: table-cell;
}

#kss-node .kss-parameters__default-value code {
  white-space: nowrap;
}

#kss-node .kss-modifier__wrapper {
  border: 1px solid #ccc;
  padding: 10px;
}

#kss-node .is-fullscreen .kss-modifier__wrapper {
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 0;
  padding-right: 0;
  border: none;
}

#kss-node .kss-modifier__heading {
  margin: -10px -10px 10px -10px;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  background-color: #eee;
  font-weight: bold;
}

#kss-node .is-fullscreen .kss-modifier__heading {
  margin: 0 20px 10px;
  border: 1px solid #ccc;
}

#kss-node .kss-modifier__default-name {
  font-weight: bold;
  margin-bottom: 12px;
}

#kss-node .is-fullscreen .kss-modifier__default-name {
  margin-left: 20px;
  margin-right: 20px;
}

#kss-node .kss-modifier__name {
  float: left;
  padding-right: 10px;
  font-weight: bold;
}

#kss-node .kss-modifier__description {
  margin-bottom: 12px;
}

#kss-node .is-fullscreen .kss-modifier__description {
  margin-right: 20px;
}

#kss-node .kss-modifier__example {
  clear: left;
  border: 2px dashed transparent;
  z-index: 0;
  position: relative;
  margin: -2px -2px 22px;
}

#kss-node .kss-modifier__example:last-child {
  margin: 0;
}

#kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after,
#kss-node.kss-guides-mode .kss-modifier__example-footer:before,
#kss-node.kss-guides-mode .kss-modifier__example-footer:after {
  z-index: -1;
  box-sizing: border-box;
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border: 2px solid #000;
}

#kss-node.kss-guides-mode .kss-modifier__example {
  border-color: #000;
}

#kss-node.kss-guides-mode .kss-modifier__example:before {
  top: -5px;
  left: -5px;
  border-top: 0;
  border-left: 0;
}

#kss-node.kss-guides-mode .kss-modifier__example:after {
  top: -5px;
  right: -5px;
  border-top: 0;
  border-right: 0;
}

#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before {
  left: auto;
  right: 0;
}

#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after {
  right: auto;
  left: 0;
}

#kss-node .kss-modifier__example-footer {
  clear: both;
}

#kss-node.kss-guides-mode .kss-modifier__example-footer:before {
  bottom: -5px;
  left: -5px;
  border-bottom: 0;
  border-left: 0;
}

#kss-node.kss-guides-mode .kss-modifier__example-footer:after {
  bottom: -5px;
  right: -5px;
  border-right: 0;
  border-bottom: 0;
}

#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before {
  left: auto;
  right: 0;
}

#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after {
  right: auto;
  left: 0;
}

#kss-node.kss-markup-mode .kss-markup pre {
  background-color: #fbfbe5;
}

#kss-node .kss-markup {
  margin: 24px 0;
  border: 1px solid #ccc;
}

#kss-node .kss-markup[open] summary {
  border-bottom: 1px solid #ccc;
}

#kss-node .kss-markup summary {
  padding-left: 10px;
}

#kss-node .kss-markup pre {
  margin: 0;
  border-radius: 0 0 10px 10px;
}

#kss-node .kss-source {
  font-size: 80%;
}

#kss-node .kss-github {
  display: none;
}

#kss-node .kss-github img {
  border: 0;
}

/*
 * Side navigation
 *
 * Scrollspy and affixed enhanced navigation to highlight sections and secondary
 * sections of docs content.
 */
.toc-wrapper.affix {
  position: static;
}

.toc-wrapper .nav li a {
  position: relative;
  display: inline-block;
  font-size: 14px;
  color: #555555;
  transition: color 0.5s;
  padding-top: 0;
  padding-bottom: 0;
}

.toc-wrapper .nav li a:before {
  content: '';
  position: absolute;
  left: -20px;
  top: 0;
  width: 3px;
  height: 100%;
  background-color: #f3f3f3;
  transition: background-color .3s, width .3s;
}

.toc-wrapper .nav li a:hover, .toc-wrapper .nav li a:focus {
  color: #29abe2;
  font-weight: 500;
}

.toc-wrapper .nav li.active a {
  color: #29abe2;
  font-weight: 500;
}

.toc-wrapper .nav li.active a:before {
  background-color: #29abe2;
}

.toc-wrapper .nav li a.back-to-top {
  display: none;
  color: #777;
  margin-top: 1rem;
}

/* Show and affix the side nav when space allows it */

code[class*="language-"],
pre[class*="language-"] {
  display: block;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -moz-tab-size: 2;
    -o-tab-size: 2;
       tab-size: 2;
}

/* Code blocks */
pre[class*="language-"] {
  overflow: auto;
  position: relative;
  padding: 1em;
  border: 0;
}

pre[class*="language-"] code {
  overflow: auto;
  padding: 10px;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #999;
}

.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #a67f59;
  background: rgba(255, 255, 255, 0.5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #07a;
}

.token.function {
  color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
  color: #e90;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

@media screen and (min-width: 501px) {
  #kss-node .kss-github {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }
}

@media screen and (min-width: 607px) {
  #kss-node .kss-title__permalink:hover .kss-title__permalink-hash, #kss-node .kss-title__permalink:focus .kss-title__permalink-hash, #kss-node .kss-title__permalink:active .kss-title__permalink-hash {
    display: inline;
  }
}

@media screen and (min-width: 769px) {
  #kss-node .kss-doc-title {
    font-size: 1.5em;
  }
  #kss-node .kss-header,
  #kss-node .kss-nav {
    margin-top: 2em;
  }
}

@media (min-width: 900px) {
  .toc-wrapper {
    padding-left: 40px;
  }
  .toc-wrapper .nav > .active > ul {
    display: block;
  }
  /* Widen the fixed sidebar */
  .toc-wrapper.affix,
  .toc-wrapper.affix-bottom {
    width: 320px;
  }
  .toc-wrapper.affix {
    position: fixed;
    /* Undo the static from mobile first approach */
    top: 74px;
  }
  .toc-wrapper.affix-bottom {
    position: absolute;
    /* Undo the static from mobile first approach */
  }
  .toc-wrapper.affix-bottom .table-of-contents,
  .toc-wrapper.affix .table-of-contents {
    margin-top: 0;
    margin-bottom: 0;
  }
  .back-to-top {
    display: block;
  }
}

@media (max-width: 599px) {
  .hidden-xs {
    display: none;
  }
}

File

themes/socialblue/assets/css/styleguide.css
View source 
  1. /*****************

  2.   Chrome Browser

  3. *****************/

  4. .browser-window {

  5.   text-align: center;

  6.   width: 100%;

  7.   height: auto;

  8.   display: inline-block;

  9.   border-radius: 5px;

  10.   margin: 20px 0px;

  11.   overflow: hidden;

  12.   background-color: #f3f3f3;

  13. }

  14. 

  15. .browser-window .top-bar {

  16.   height: 30px;

  17.   text-align: left;

  18.   border-radius: 5px 5px 0 0;

  19.   background: linear-gradient(#f3f3f3, #e6e6e6);

  20. }

  21. 

  22. .browser-window .circles {

  23.   margin: 5px 12px;

  24. }

  25. 

  26. .browser-window .circle {

  27.   height: 10px;

  28.   width: 10px;

  29.   display: inline-block;

  30.   border-radius: 50%;

  31.   background-color: white;

  32.   margin-right: 1px;

  33. }

  34. 

  35. .browser-window p {

  36.   text-align: center;

  37.   margin: 0;

  38. }

  39. 

  40. #close-circle {

  41.   background-color: #FF5C5A;

  42. }

  43. 

  44. #minimize-circle {

  45.   background-color: #FFBB50;

  46. }

  47. 

  48. #maximize-circle {

  49.   background-color: #1BC656;

  50. }

  51. 

  52. .browser-window p.flat-text-header {

  53.   height: 35px;

  54.   width: 80%;

  55.   background-color: rgba(0, 0, 0, 0.25);

  56.   display: block;

  57.   margin: 27px auto;

  58. }

  59. 

  60. .browser-window p.flat-text {

  61.   height: 25px;

  62.   width: 80%;

  63.   background-color: rgba(0, 0, 0, 0.15);

  64.   display: block;

  65.   margin: 27px auto;

  66. }

  67. 

  68. .browser-window p.flat-text.small {

  69.   width: 25%;

  70.   height: 25px;

  71.   background-color: rgba(0, 0, 0, 0.15);

  72. }

  73. 

  74. .browser-window p.flat-text.inline25 {

  75.   width: 22.5%;

  76.   margin-left: 1%;

  77.   margin-right: 1%;

  78.   display: inline-block;

  79.   height: 25px;

  80.   background-color: rgba(0, 0, 0, 0.15);

  81. }

  82. 

  83. .browser-window p.flat-text.full-width {

  84.   width: 100%;

  85. }

  86. 

  87. .grid-example {

  88.   border: 1px solid #eee;

  89.   margin: 7px 0;

  90.   text-align: center;

  91.   font-size: 28px;

  92.   background-color: #29abe2;

  93.   color: white;

  94.   padding: 0;

  95.   opacity: 0.5;

  96. }

  97. 

  98. #kss-node .kss-doc-title {

  99.   margin: 0;

  100. }

  101. 

  102. #kss-node .lead,

  103. #kss-node .kss-nav__ref {

  104.   position: absolute;

  105.   height: 1px;

  106.   width: 1px;

  107.   overflow: hidden;

  108.   word-wrap: normal;

  109.   margin: -1px;

  110.   padding: 0;

  111.   clip: rect(0, 0, 0, 0);

  112.   border: 0;

  113. }

  114. 

  115. #kss-node .kss-nav__ref:after {

  116.   content: ' ';

  117. }

  118. 

  119. #kss-node .kss-nav__ref-child + .kss-nav__name {

  120.   margin-left: 0.5rem;

  121.   font-weight: 300;

  122. }

  123. 

  124. #kss-node .kss-section {

  125.   margin-bottom: 48px;

  126. }

  127. 

  128. #kss-node .kss-section.is-fullscreen {

  129.   position: fixed;

  130.   top: 0;

  131.   left: 0;

  132.   right: 0;

  133.   bottom: 0;

  134.   width: 100%;

  135.   height: 100%;

  136.   margin: 0;

  137.   min-width: 0;

  138.   max-width: none;

  139.   min-height: 0;

  140.   max-height: none;

  141.   -o-object-fit: contain;

  142.      object-fit: contain;

  143.   transform: none;

  144.   overflow: auto;

  145.   padding: 20px;

  146.   background-color: #f3f3f3;

  147.   z-index: 99;

  148. }

  149. 

  150. #kss-node.kss-fullscreen-mode .site-footer,

  151. #kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen) {

  152.   display: none;

  153. }

  154. 

  155. #kss-node .kss-title {

  156.   padding-bottom: 11px;

  157.   margin: 48px 0 6px;

  158.   border-bottom: 1px solid rgba(119, 119, 119, 0.2);

  159. }

  160. 

  161. #kss-node .is-fullscreen .kss-title {

  162.   margin-top: 0;

  163. }

  164. 

  165. #kss-node.kss-fullscreen-mode .navbar-fixed-top {

  166.   z-index: -1;

  167.   display: none;

  168. }

  169. 

  170. #kss-node .kss-title__ref {

  171.   display: block;

  172.   font-size: 16px;

  173.   line-height: 16px;

  174.   color: #666;

  175. }

  176. 

  177. #kss-node .kss-title__ref:before {

  178.   content: 'Section ';

  179. }

  180. 

  181. #kss-node .kss-title__permalink {

  182.   display: block;

  183.   color: #000;

  184.   text-decoration: none;

  185. }

  186. 

  187. #kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active {

  188.   color: #0645ad;

  189. }

  190. 

  191. #kss-node .kss-title__permalink-hash {

  192.   display: none;

  193.   color: #ccc;

  194. }

  195. 

  196. #kss-node .kss-toolbar {

  197.   margin: 6px 0 24px;

  198.   display: inline-block;

  199.   border: 1px solid #eee;

  200.   background-color: #f9f9f9;

  201.   border-right-color: #e0e0e0;

  202.   border-bottom-color: #e0e0e0;

  203.   line-height: 1;

  204.   padding: 3px;

  205. }

  206. 

  207. #kss-node .kss-toolbar a {

  208.   box-sizing: content-box;

  209.   display: inline-block;

  210.   width: 16px;

  211.   height: 16px;

  212.   padding: 3px;

  213.   vertical-align: top;

  214.   position: relative;

  215.   overflow: visible;

  216. }

  217. 

  218. #kss-node .kss-toolbar a + a {

  219.   margin-left: 6px;

  220. }

  221. 

  222. #kss-node .kss-toolbar a .kss-toolbar__icon-fill {

  223.   fill: #ccc;

  224. }

  225. 

  226. #kss-node .kss-toolbar a svg.on {

  227.   display: none;

  228. }

  229. 

  230. #kss-node .kss-toolbar a:focus, #kss-node .kss-toolbar a:hover {

  231.   border-color: #000;

  232. }

  233. 

  234. #kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill, #kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill {

  235.   fill: #000;

  236. }

  237. 

  238. #kss-node .kss-toolbar__tooltip {

  239.   position: absolute;

  240.   z-index: 1;

  241.   display: inline-block;

  242.   bottom: 100%;

  243.   left: -10px;

  244.   margin-bottom: 5px;

  245.   border: solid 1px #666;

  246.   padding: 8px 10px 6px;

  247.   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);

  248.   white-space: nowrap;

  249.   color: #000;

  250.   background: #fff;

  251.   cursor: help;

  252.   opacity: 0;

  253.   transition: opacity 0.25s;

  254.   height: 1px;

  255.   width: 1px;

  256.   overflow: hidden;

  257.   clip: rect(1px, 1px, 1px, 1px);

  258.   word-wrap: normal;

  259. }

  260. 

  261. #kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after {

  262.   content: '';

  263.   position: absolute;

  264.   bottom: -8px;

  265.   left: 15px;

  266.   width: 0;

  267.   height: 0;

  268.   border-width: 7px 5px 0;

  269.   border-color: #666 transparent;

  270.   border-style: solid;

  271. }

  272. 

  273. #kss-node .kss-toolbar__tooltip:after {

  274.   bottom: -6px;

  275.   border-top-color: #fff;

  276. }

  277. 

  278. #kss-node a:hover > .kss-toolbar__tooltip {

  279.   opacity: 1;

  280.   clip: auto;

  281.   height: auto;

  282.   width: auto;

  283.   overflow: visible;

  284. }

  285. 

  286. #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen],

  287. #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides],

  288. #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] {

  289.   border-color: #666;

  290.   background-color: #666;

  291. }

  292. 

  293. #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill,

  294. #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill,

  295. #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill {

  296.   fill: #fff;

  297. }

  298. 

  299. #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.on,

  300. #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.on,

  301. #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.on {

  302.   display: block;

  303. }

  304. 

  305. #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.off,

  306. #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.off,

  307. #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.off {

  308.   display: none;

  309. }

  310. 

  311. #kss-node .kss-parameters {

  312.   display: table;

  313.   list-style-type: none;

  314.   margin-top: 0;

  315.   margin-left: 0;

  316.   padding-left: 0;

  317. }

  318. 

  319. #kss-node .kss-parameters__title {

  320.   font-weight: bold;

  321. }

  322. 

  323. #kss-node .kss-parameters__item {

  324.   display: table-row;

  325. }

  326. 

  327. #kss-node .kss-parameters__name {

  328.   display: table-cell;

  329.   padding-right: 20px;

  330.   white-space: nowrap;

  331. }

  332. 

  333. #kss-node .kss-parameters__description {

  334.   display: table-cell;

  335. }

  336. 

  337. #kss-node .kss-parameters__default-value code {

  338.   white-space: nowrap;

  339. }

  340. 

  341. #kss-node .kss-modifier__wrapper {

  342.   border: 1px solid #ccc;

  343.   padding: 10px;

  344. }

  345. 

  346. #kss-node .is-fullscreen .kss-modifier__wrapper {

  347.   margin-left: -20px;

  348.   margin-right: -20px;

  349.   padding-left: 0;

  350.   padding-right: 0;

  351.   border: none;

  352. }

  353. 

  354. #kss-node .kss-modifier__heading {

  355.   margin: -10px -10px 10px -10px;

  356.   padding: 10px;

  357.   border-bottom: 1px solid #ccc;

  358.   background-color: #eee;

  359.   font-weight: bold;

  360. }

  361. 

  362. #kss-node .is-fullscreen .kss-modifier__heading {

  363.   margin: 0 20px 10px;

  364.   border: 1px solid #ccc;

  365. }

  366. 

  367. #kss-node .kss-modifier__default-name {

  368.   font-weight: bold;

  369.   margin-bottom: 12px;

  370. }

  371. 

  372. #kss-node .is-fullscreen .kss-modifier__default-name {

  373.   margin-left: 20px;

  374.   margin-right: 20px;

  375. }

  376. 

  377. #kss-node .kss-modifier__name {

  378.   float: left;

  379.   padding-right: 10px;

  380.   font-weight: bold;

  381. }

  382. 

  383. #kss-node .kss-modifier__description {

  384.   margin-bottom: 12px;

  385. }

  386. 

  387. #kss-node .is-fullscreen .kss-modifier__description {

  388.   margin-right: 20px;

  389. }

  390. 

  391. #kss-node .kss-modifier__example {

  392.   clear: left;

  393.   border: 2px dashed transparent;

  394.   z-index: 0;

  395.   position: relative;

  396.   margin: -2px -2px 22px;

  397. }

  398. 

  399. #kss-node .kss-modifier__example:last-child {

  400.   margin: 0;

  401. }

  402. 

  403. #kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after,

  404. #kss-node.kss-guides-mode .kss-modifier__example-footer:before,

  405. #kss-node.kss-guides-mode .kss-modifier__example-footer:after {

  406.   z-index: -1;

  407.   box-sizing: border-box;

  408.   content: '';

  409.   position: absolute;

  410.   width: 5px;

  411.   height: 5px;

  412.   border: 2px solid #000;

  413. }

  414. 

  415. #kss-node.kss-guides-mode .kss-modifier__example {

  416.   border-color: #000;

  417. }

  418. 

  419. #kss-node.kss-guides-mode .kss-modifier__example:before {

  420.   top: -5px;

  421.   left: -5px;

  422.   border-top: 0;

  423.   border-left: 0;

  424. }

  425. 

  426. #kss-node.kss-guides-mode .kss-modifier__example:after {

  427.   top: -5px;

  428.   right: -5px;

  429.   border-top: 0;

  430.   border-right: 0;

  431. }

  432. 

  433. #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before {

  434.   left: auto;

  435.   right: 0;

  436. }

  437. 

  438. #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after {

  439.   right: auto;

  440.   left: 0;

  441. }

  442. 

  443. #kss-node .kss-modifier__example-footer {

  444.   clear: both;

  445. }

  446. 

  447. #kss-node.kss-guides-mode .kss-modifier__example-footer:before {

  448.   bottom: -5px;

  449.   left: -5px;

  450.   border-bottom: 0;

  451.   border-left: 0;

  452. }

  453. 

  454. #kss-node.kss-guides-mode .kss-modifier__example-footer:after {

  455.   bottom: -5px;

  456.   right: -5px;

  457.   border-right: 0;

  458.   border-bottom: 0;

  459. }

  460. 

  461. #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before {

  462.   left: auto;

  463.   right: 0;

  464. }

  465. 

  466. #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after {

  467.   right: auto;

  468.   left: 0;

  469. }

  470. 

  471. #kss-node.kss-markup-mode .kss-markup pre {

  472.   background-color: #fbfbe5;

  473. }

  474. 

  475. #kss-node .kss-markup {

  476.   margin: 24px 0;

  477.   border: 1px solid #ccc;

  478. }

  479. 

  480. #kss-node .kss-markup[open] summary {

  481.   border-bottom: 1px solid #ccc;

  482. }

  483. 

  484. #kss-node .kss-markup summary {

  485.   padding-left: 10px;

  486. }

  487. 

  488. #kss-node .kss-markup pre {

  489.   margin: 0;

  490.   border-radius: 0 0 10px 10px;

  491. }

  492. 

  493. #kss-node .kss-source {

  494.   font-size: 80%;

  495. }

  496. 

  497. #kss-node .kss-github {

  498.   display: none;

  499. }

  500. 

  501. #kss-node .kss-github img {

  502.   border: 0;

  503. }

  504. 

  505. /*

  506.  * Side navigation

  507.  *

  508.  * Scrollspy and affixed enhanced navigation to highlight sections and secondary

  509.  * sections of docs content.

  510.  */

  511. .toc-wrapper.affix {

  512.   position: static;

  513. }

  514. 

  515. .toc-wrapper .nav li a {

  516.   position: relative;

  517.   display: inline-block;

  518.   font-size: 14px;

  519.   color: #555555;

  520.   transition: color 0.5s;

  521.   padding-top: 0;

  522.   padding-bottom: 0;

  523. }

  524. 

  525. .toc-wrapper .nav li a:before {

  526.   content: '';

  527.   position: absolute;

  528.   left: -20px;

  529.   top: 0;

  530.   width: 3px;

  531.   height: 100%;

  532.   background-color: #f3f3f3;

  533.   transition: background-color .3s, width .3s;

  534. }

  535. 

  536. .toc-wrapper .nav li a:hover, .toc-wrapper .nav li a:focus {

  537.   color: #29abe2;

  538.   font-weight: 500;

  539. }

  540. 

  541. .toc-wrapper .nav li.active a {

  542.   color: #29abe2;

  543.   font-weight: 500;

  544. }

  545. 

  546. .toc-wrapper .nav li.active a:before {

  547.   background-color: #29abe2;

  548. }

  549. 

  550. .toc-wrapper .nav li a.back-to-top {

  551.   display: none;

  552.   color: #777;

  553.   margin-top: 1rem;

  554. }

  555. 

  556. /* Show and affix the side nav when space allows it */

  557. 

  558. code[class*="language-"],

  559. pre[class*="language-"] {

  560.   display: block;

  561.   white-space: pre;

  562.   word-spacing: normal;

  563.   word-break: normal;

  564.   word-wrap: normal;

  565.   -moz-tab-size: 2;

  566.     -o-tab-size: 2;

  567.        tab-size: 2;

  568. }

  569. 

  570. /* Code blocks */

  571. pre[class*="language-"] {

  572.   overflow: auto;

  573.   position: relative;

  574.   padding: 1em;

  575.   border: 0;

  576. }

  577. 

  578. pre[class*="language-"] code {

  579.   overflow: auto;

  580.   padding: 10px;

  581. }

  582. 

  583. .token.comment,

  584. .token.prolog,

  585. .token.doctype,

  586. .token.cdata {

  587.   color: slategray;

  588. }

  589. 

  590. .token.punctuation {

  591.   color: #999;

  592. }

  593. 

  594. .namespace {

  595.   opacity: .7;

  596. }

  597. 

  598. .token.property,

  599. .token.tag,

  600. .token.boolean,

  601. .token.number,

  602. .token.constant,

  603. .token.symbol,

  604. .token.deleted {

  605.   color: #905;

  606. }

  607. 

  608. .token.selector,

  609. .token.attr-name,

  610. .token.string,

  611. .token.char,

  612. .token.builtin,

  613. .token.inserted {

  614.   color: #690;

  615. }

  616. 

  617. .token.operator,

  618. .token.entity,

  619. .token.url,

  620. .language-css .token.string,

  621. .style .token.string {

  622.   color: #a67f59;

  623.   background: rgba(255, 255, 255, 0.5);

  624. }

  625. 

  626. .token.atrule,

  627. .token.attr-value,

  628. .token.keyword {

  629.   color: #07a;

  630. }

  631. 

  632. .token.function {

  633.   color: #DD4A68;

  634. }

  635. 

  636. .token.regex,

  637. .token.important,

  638. .token.variable {

  639.   color: #e90;

  640. }

  641. 

  642. .token.important,

  643. .token.bold {

  644.   font-weight: bold;

  645. }

  646. 

  647. .token.italic {

  648.   font-style: italic;

  649. }

  650. 

  651. .token.entity {

  652.   cursor: help;

  653. }

  654. 

  655. @media screen and (min-width: 501px) {

  656.   #kss-node .kss-github {

  657.     display: block;

  658.     position: absolute;

  659.     top: 0;

  660.     right: 0;

  661.   }

  662. }

  663. 

  664. @media screen and (min-width: 607px) {

  665.   #kss-node .kss-title__permalink:hover .kss-title__permalink-hash, #kss-node .kss-title__permalink:focus .kss-title__permalink-hash, #kss-node .kss-title__permalink:active .kss-title__permalink-hash {

  666.     display: inline;

  667.   }

  668. }

  669. 

  670. @media screen and (min-width: 769px) {

  671.   #kss-node .kss-doc-title {

  672.     font-size: 1.5em;

  673.   }

  674.   #kss-node .kss-header,

  675.   #kss-node .kss-nav {

  676.     margin-top: 2em;

  677.   }

  678. }

  679. 

  680. @media (min-width: 900px) {

  681.   .toc-wrapper {

  682.     padding-left: 40px;

  683.   }

  684.   .toc-wrapper .nav > .active > ul {

  685.     display: block;

  686.   }

  687.   /* Widen the fixed sidebar */

  688.   .toc-wrapper.affix,

  689.   .toc-wrapper.affix-bottom {

  690.     width: 320px;

  691.   }

  692.   .toc-wrapper.affix {

  693.     position: fixed;

  694.     /* Undo the static from mobile first approach */

  695.     top: 74px;

  696.   }

  697.   .toc-wrapper.affix-bottom {

  698.     position: absolute;

  699.     /* Undo the static from mobile first approach */

  700.   }

  701.   .toc-wrapper.affix-bottom .table-of-contents,

  702.   .toc-wrapper.affix .table-of-contents {

  703.     margin-top: 0;

  704.     margin-bottom: 0;

  705.   }

  706.   .back-to-top {

  707.     display: block;

  708.   }

  709. }

  710. 

  711. @media (max-width: 599px) {

  712.   .hidden-xs {

  713.     display: none;

  714.   }

  715. }