You are here

Home » API reference » Open Social 8

styleguide.css in Open Social 8

Same filename and directory in other branches
  1. 8.9 themes/socialblue/assets/css/styleguide.css
  2. 8.2 themes/socialblue/assets/css/styleguide.css
  3. 8.3 themes/socialblue/assets/css/styleguide.css
  4. 8.4 themes/socialblue/assets/css/styleguide.css
  5. 8.5 themes/socialblue/assets/css/styleguide.css
  6. 8.6 themes/socialblue/assets/css/styleguide.css
  7. 8.7 themes/socialblue/assets/css/styleguide.css
  8. 8.8 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: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#e6e6e6));
  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;
  -webkit-transform: none;
          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 {
  -webkit-box-sizing: content-box;
          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;
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  color: #000;
  background: #fff;
  cursor: help;
  opacity: 0;
  -webkit-transition: opacity 0.25s;
  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;
  -webkit-box-sizing: border-box;
          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;
  -webkit-transition: color 0.5s;
  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;
  -webkit-transition: background-color .3s, width .3s;
  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: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#e6e6e6));

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

  21. }

  22. 

  23. .browser-window .circles {

  24.   margin: 5px 12px;

  25. }

  26. 

  27. .browser-window .circle {

  28.   height: 10px;

  29.   width: 10px;

  30.   display: inline-block;

  31.   border-radius: 50%;

  32.   background-color: white;

  33.   margin-right: 1px;

  34. }

  35. 

  36. .browser-window p {

  37.   text-align: center;

  38.   margin: 0;

  39. }

  40. 

  41. #close-circle {

  42.   background-color: #FF5C5A;

  43. }

  44. 

  45. #minimize-circle {

  46.   background-color: #FFBB50;

  47. }

  48. 

  49. #maximize-circle {

  50.   background-color: #1BC656;

  51. }

  52. 

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

  54.   height: 35px;

  55.   width: 80%;

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

  57.   display: block;

  58.   margin: 27px auto;

  59. }

  60. 

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

  62.   height: 25px;

  63.   width: 80%;

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

  65.   display: block;

  66.   margin: 27px auto;

  67. }

  68. 

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

  70.   width: 25%;

  71.   height: 25px;

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

  73. }

  74. 

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

  76.   width: 22.5%;

  77.   margin-left: 1%;

  78.   margin-right: 1%;

  79.   display: inline-block;

  80.   height: 25px;

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

  82. }

  83. 

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

  85.   width: 100%;

  86. }

  87. 

  88. .grid-example {

  89.   border: 1px solid #eee;

  90.   margin: 7px 0;

  91.   text-align: center;

  92.   font-size: 28px;

  93.   background-color: #29abe2;

  94.   color: white;

  95.   padding: 0;

  96.   opacity: 0.5;

  97. }

  98. 

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

  100.   margin: 0;

  101. }

  102. 

  103. #kss-node .lead,

  104. #kss-node .kss-nav__ref {

  105.   position: absolute;

  106.   height: 1px;

  107.   width: 1px;

  108.   overflow: hidden;

  109.   word-wrap: normal;

  110.   margin: -1px;

  111.   padding: 0;

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

  113.   border: 0;

  114. }

  115. 

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

  117.   content: ' ';

  118. }

  119. 

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

  121.   margin-left: 0.5rem;

  122.   font-weight: 300;

  123. }

  124. 

  125. #kss-node .kss-section {

  126.   margin-bottom: 48px;

  127. }

  128. 

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

  130.   position: fixed;

  131.   top: 0;

  132.   left: 0;

  133.   right: 0;

  134.   bottom: 0;

  135.   width: 100%;

  136.   height: 100%;

  137.   margin: 0;

  138.   min-width: 0;

  139.   max-width: none;

  140.   min-height: 0;

  141.   max-height: none;

  142.   -o-object-fit: contain;

  143.      object-fit: contain;

  144.   -webkit-transform: none;

  145.           transform: none;

  146.   overflow: auto;

  147.   padding: 20px;

  148.   background-color: #f3f3f3;

  149.   z-index: 99;

  150. }

  151. 

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

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

  154.   display: none;

  155. }

  156. 

  157. #kss-node .kss-title {

  158.   padding-bottom: 11px;

  159.   margin: 48px 0 6px;

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

  161. }

  162. 

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

  164.   margin-top: 0;

  165. }

  166. 

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

  168.   z-index: -1;

  169.   display: none;

  170. }

  171. 

  172. #kss-node .kss-title__ref {

  173.   display: block;

  174.   font-size: 16px;

  175.   line-height: 16px;

  176.   color: #666;

  177. }

  178. 

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

  180.   content: 'Section ';

  181. }

  182. 

  183. #kss-node .kss-title__permalink {

  184.   display: block;

  185.   color: #000;

  186.   text-decoration: none;

  187. }

  188. 

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

  190.   color: #0645ad;

  191. }

  192. 

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

  194.   display: none;

  195.   color: #ccc;

  196. }

  197. 

  198. #kss-node .kss-toolbar {

  199.   margin: 6px 0 24px;

  200.   display: inline-block;

  201.   border: 1px solid #eee;

  202.   background-color: #f9f9f9;

  203.   border-right-color: #e0e0e0;

  204.   border-bottom-color: #e0e0e0;

  205.   line-height: 1;

  206.   padding: 3px;

  207. }

  208. 

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

  210.   -webkit-box-sizing: content-box;

  211.           box-sizing: content-box;

  212.   display: inline-block;

  213.   width: 16px;

  214.   height: 16px;

  215.   padding: 3px;

  216.   vertical-align: top;

  217.   position: relative;

  218.   overflow: visible;

  219. }

  220. 

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

  222.   margin-left: 6px;

  223. }

  224. 

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

  226.   fill: #ccc;

  227. }

  228. 

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

  230.   display: none;

  231. }

  232. 

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

  234.   border-color: #000;

  235. }

  236. 

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

  238.   fill: #000;

  239. }

  240. 

  241. #kss-node .kss-toolbar__tooltip {

  242.   position: absolute;

  243.   z-index: 1;

  244.   display: inline-block;

  245.   bottom: 100%;

  246.   left: -10px;

  247.   margin-bottom: 5px;

  248.   border: solid 1px #666;

  249.   padding: 8px 10px 6px;

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

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

  252.   white-space: nowrap;

  253.   color: #000;

  254.   background: #fff;

  255.   cursor: help;

  256.   opacity: 0;

  257.   -webkit-transition: opacity 0.25s;

  258.   transition: opacity 0.25s;

  259.   height: 1px;

  260.   width: 1px;

  261.   overflow: hidden;

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

  263.   word-wrap: normal;

  264. }

  265. 

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

  267.   content: '';

  268.   position: absolute;

  269.   bottom: -8px;

  270.   left: 15px;

  271.   width: 0;

  272.   height: 0;

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

  274.   border-color: #666 transparent;

  275.   border-style: solid;

  276. }

  277. 

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

  279.   bottom: -6px;

  280.   border-top-color: #fff;

  281. }

  282. 

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

  284.   opacity: 1;

  285.   clip: auto;

  286.   height: auto;

  287.   width: auto;

  288.   overflow: visible;

  289. }

  290. 

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

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

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

  294.   border-color: #666;

  295.   background-color: #666;

  296. }

  297. 

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

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

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

  301.   fill: #fff;

  302. }

  303. 

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

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

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

  307.   display: block;

  308. }

  309. 

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

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

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

  313.   display: none;

  314. }

  315. 

  316. #kss-node .kss-parameters {

  317.   display: table;

  318.   list-style-type: none;

  319.   margin-top: 0;

  320.   margin-left: 0;

  321.   padding-left: 0;

  322. }

  323. 

  324. #kss-node .kss-parameters__title {

  325.   font-weight: bold;

  326. }

  327. 

  328. #kss-node .kss-parameters__item {

  329.   display: table-row;

  330. }

  331. 

  332. #kss-node .kss-parameters__name {

  333.   display: table-cell;

  334.   padding-right: 20px;

  335.   white-space: nowrap;

  336. }

  337. 

  338. #kss-node .kss-parameters__description {

  339.   display: table-cell;

  340. }

  341. 

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

  343.   white-space: nowrap;

  344. }

  345. 

  346. #kss-node .kss-modifier__wrapper {

  347.   border: 1px solid #ccc;

  348.   padding: 10px;

  349. }

  350. 

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

  352.   margin-left: -20px;

  353.   margin-right: -20px;

  354.   padding-left: 0;

  355.   padding-right: 0;

  356.   border: none;

  357. }

  358. 

  359. #kss-node .kss-modifier__heading {

  360.   margin: -10px -10px 10px -10px;

  361.   padding: 10px;

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

  363.   background-color: #eee;

  364.   font-weight: bold;

  365. }

  366. 

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

  368.   margin: 0 20px 10px;

  369.   border: 1px solid #ccc;

  370. }

  371. 

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

  373.   font-weight: bold;

  374.   margin-bottom: 12px;

  375. }

  376. 

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

  378.   margin-left: 20px;

  379.   margin-right: 20px;

  380. }

  381. 

  382. #kss-node .kss-modifier__name {

  383.   float: left;

  384.   padding-right: 10px;

  385.   font-weight: bold;

  386. }

  387. 

  388. #kss-node .kss-modifier__description {

  389.   margin-bottom: 12px;

  390. }

  391. 

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

  393.   margin-right: 20px;

  394. }

  395. 

  396. #kss-node .kss-modifier__example {

  397.   clear: left;

  398.   border: 2px dashed transparent;

  399.   z-index: 0;

  400.   position: relative;

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

  402. }

  403. 

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

  405.   margin: 0;

  406. }

  407. 

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

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

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

  411.   z-index: -1;

  412.   -webkit-box-sizing: border-box;

  413.           box-sizing: border-box;

  414.   content: '';

  415.   position: absolute;

  416.   width: 5px;

  417.   height: 5px;

  418.   border: 2px solid #000;

  419. }

  420. 

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

  422.   border-color: #000;

  423. }

  424. 

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

  426.   top: -5px;

  427.   left: -5px;

  428.   border-top: 0;

  429.   border-left: 0;

  430. }

  431. 

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

  433.   top: -5px;

  434.   right: -5px;

  435.   border-top: 0;

  436.   border-right: 0;

  437. }

  438. 

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

  440.   left: auto;

  441.   right: 0;

  442. }

  443. 

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

  445.   right: auto;

  446.   left: 0;

  447. }

  448. 

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

  450.   clear: both;

  451. }

  452. 

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

  454.   bottom: -5px;

  455.   left: -5px;

  456.   border-bottom: 0;

  457.   border-left: 0;

  458. }

  459. 

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

  461.   bottom: -5px;

  462.   right: -5px;

  463.   border-right: 0;

  464.   border-bottom: 0;

  465. }

  466. 

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

  468.   left: auto;

  469.   right: 0;

  470. }

  471. 

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

  473.   right: auto;

  474.   left: 0;

  475. }

  476. 

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

  478.   background-color: #fbfbe5;

  479. }

  480. 

  481. #kss-node .kss-markup {

  482.   margin: 24px 0;

  483.   border: 1px solid #ccc;

  484. }

  485. 

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

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

  488. }

  489. 

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

  491.   padding-left: 10px;

  492. }

  493. 

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

  495.   margin: 0;

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

  497. }

  498. 

  499. #kss-node .kss-source {

  500.   font-size: 80%;

  501. }

  502. 

  503. #kss-node .kss-github {

  504.   display: none;

  505. }

  506. 

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

  508.   border: 0;

  509. }

  510. 

  511. /*

  512.  * Side navigation

  513.  *

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

  515.  * sections of docs content.

  516.  */

  517. .toc-wrapper.affix {

  518.   position: static;

  519. }

  520. 

  521. .toc-wrapper .nav li a {

  522.   position: relative;

  523.   display: inline-block;

  524.   font-size: 14px;

  525.   color: #555555;

  526.   -webkit-transition: color 0.5s;

  527.   transition: color 0.5s;

  528.   padding-top: 0;

  529.   padding-bottom: 0;

  530. }

  531. 

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

  533.   content: '';

  534.   position: absolute;

  535.   left: -20px;

  536.   top: 0;

  537.   width: 3px;

  538.   height: 100%;

  539.   background-color: #f3f3f3;

  540.   -webkit-transition: background-color .3s, width .3s;

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

  542. }

  543. 

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

  545.   color: #29abe2;

  546.   font-weight: 500;

  547. }

  548. 

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

  550.   color: #29abe2;

  551.   font-weight: 500;

  552. }

  553. 

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

  555.   background-color: #29abe2;

  556. }

  557. 

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

  559.   display: none;

  560.   color: #777;

  561.   margin-top: 1rem;

  562. }

  563. 

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

  565. 

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

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

  568.   display: block;

  569.   white-space: pre;

  570.   word-spacing: normal;

  571.   word-break: normal;

  572.   word-wrap: normal;

  573.   -moz-tab-size: 2;

  574.     -o-tab-size: 2;

  575.        tab-size: 2;

  576. }

  577. 

  578. /* Code blocks */

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

  580.   overflow: auto;

  581.   position: relative;

  582.   padding: 1em;

  583.   border: 0;

  584. }

  585. 

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

  587.   overflow: auto;

  588.   padding: 10px;

  589. }

  590. 

  591. .token.comment,

  592. .token.prolog,

  593. .token.doctype,

  594. .token.cdata {

  595.   color: slategray;

  596. }

  597. 

  598. .token.punctuation {

  599.   color: #999;

  600. }

  601. 

  602. .namespace {

  603.   opacity: .7;

  604. }

  605. 

  606. .token.property,

  607. .token.tag,

  608. .token.boolean,

  609. .token.number,

  610. .token.constant,

  611. .token.symbol,

  612. .token.deleted {

  613.   color: #905;

  614. }

  615. 

  616. .token.selector,

  617. .token.attr-name,

  618. .token.string,

  619. .token.char,

  620. .token.builtin,

  621. .token.inserted {

  622.   color: #690;

  623. }

  624. 

  625. .token.operator,

  626. .token.entity,

  627. .token.url,

  628. .language-css .token.string,

  629. .style .token.string {

  630.   color: #a67f59;

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

  632. }

  633. 

  634. .token.atrule,

  635. .token.attr-value,

  636. .token.keyword {

  637.   color: #07a;

  638. }

  639. 

  640. .token.function {

  641.   color: #DD4A68;

  642. }

  643. 

  644. .token.regex,

  645. .token.important,

  646. .token.variable {

  647.   color: #e90;

  648. }

  649. 

  650. .token.important,

  651. .token.bold {

  652.   font-weight: bold;

  653. }

  654. 

  655. .token.italic {

  656.   font-style: italic;

  657. }

  658. 

  659. .token.entity {

  660.   cursor: help;

  661. }

  662. 

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

  664.   #kss-node .kss-github {

  665.     display: block;

  666.     position: absolute;

  667.     top: 0;

  668.     right: 0;

  669.   }

  670. }

  671. 

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

  673.   #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 {

  674.     display: inline;

  675.   }

  676. }

  677. 

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

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

  680.     font-size: 1.5em;

  681.   }

  682.   #kss-node .kss-header,

  683.   #kss-node .kss-nav {

  684.     margin-top: 2em;

  685.   }

  686. }

  687. 

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

  689.   .toc-wrapper {

  690.     padding-left: 40px;

  691.   }

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

  693.     display: block;

  694.   }

  695.   /* Widen the fixed sidebar */

  696.   .toc-wrapper.affix,

  697.   .toc-wrapper.affix-bottom {

  698.     width: 320px;

  699.   }

  700.   .toc-wrapper.affix {

  701.     position: fixed;

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

  703.     top: 74px;

  704.   }

  705.   .toc-wrapper.affix-bottom {

  706.     position: absolute;

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

  708.   }

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

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

  711.     margin-top: 0;

  712.     margin-bottom: 0;

  713.   }

  714.   .back-to-top {

  715.     display: block;

  716.   }

  717. }

  718. 

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

  720.   .hidden-xs {

  721.     display: none;

  722.   }

  723. }