mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-09-01 09:03:04 +02:00
Code Issues Releases Wiki Activity
Files
feature/kss
webslides/doc/styleguide/kss-assets/kss.css
Luis Sacristán 194d3fe788 kss - longforms
2017-10-16 21:24:45 +02:00

655 lines
18 KiB
CSS
Raw Permalink Blame History

[class*='kss-'] {
font-family: 'San Francisco'; }
.kss-style {
color: #60676f;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 24px; }
.kss-style a {
color: #d1783e;
text-decoration: none;
transition-duration: .5s;
transition-property: color; }
.kss-style a:visited {
color: #d1783e; }
.kss-style a:focus {
color: #e5b290; }
.kss-style a:active, .kss-style a:hover {
color: #d1783e; }
.kss-style a:hover, .kss-style a:active {
outline: 0; }
.kss-style a.kss-nav__menu-link {
color: #2e3337;
font-size: 1.3rem;
font-weight: 900; }
.kss-style a.kss-nav__menu-link-active {
color: #93cdcf; }
.kss-style p {
margin: 12px 0 24px; }
.kss-style h1,
.kss-style h2,
.kss-style h3,
.kss-style h4,
.kss-style h5,
.kss-style h6 {
color: #111;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
font-weight: 900;
line-height: 1.15em;
margin: 24px 0 0; }
.kss-style h4,
.kss-style h5,
.kss-style h6 {
font-weight: bold; }
.kss-style h1::before,
.kss-style h2::before {
color: #e2e3e5;
font-size: 17.6px;
position: absolute; }
.kss-style h1::after,
.kss-style h2::after {
border-bottom: 1px solid #f4f3f8;
content: '';
display: block;
height: 2.4rem;
margin-left: -90px;
width: 74vw; }
.kss-style h1 {
font-size: 40px; }
.kss-style h1::before {
content: ' #';
margin-left: -20px; }
.kss-style h2 {
font-size: 32px; }
.kss-style h2::before {
content: '##';
margin-left: -30px; }
.kss-style h3 {
font-size: 34px; }
.kss-style h4 {
font-size: 32px; }
.kss-style h5 {
font-size: 30px; }
.kss-style h6 {
font-size: 28px; }
.kss-style blockquote {
border-left: 0.5em #e6e6e6 solid;
color: #999;
margin: 0;
padding-left: 24px; }
.kss-style hr {
border: 0;
border-bottom: 1px solid #e6e6e6;
border-top: 1px solid white;
display: block;
height: 2px;
margin: 24px 0;
padding: 0; }
.kss-style pre,
.kss-style code,
.kss-style kbd,
.kss-style samp {
color: #393c40;
font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace;
font-size: 1em; }
.kss-style pre {
overflow: scroll;
white-space: pre; }
.kss-style ins {
background: #ff9;
color: #111;
text-decoration: none; }
.kss-style mark {
background: #ff0;
color: #111;
font-weight: bold; }
.kss-style sub,
.kss-style sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
.kss-style sup {
top: -.5em; }
.kss-style sub {
bottom: -.25em; }
.kss-style ul,
.kss-style ol {
margin: 24px 0;
padding: 0 0 0 24px; }
.kss-style li p:last-child {
margin: 0; }
.kss-style dd {
margin: 0 0 0 24px; }
.kss-style img {
border: 0;
max-width: 100%;
vertical-align: middle; }
.kss-style table {
border-collapse: collapse;
border-spacing: 0; }
.kss-style td {
vertical-align: top; }
@media print {
.kss-style a,
.kss-style a:visited {
text-decoration: underline; }
.kss-style hr {
border: 0;
border-bottom: 1px solid #000;
height: 1px; }
.kss-style a[href]:after {
content: " (" attr(href) ")"; }
.kss-style a[href^='javascript:']:after,
.kss-style a[href^='#']:after {
content: ''; }
.kss-style abbr[title]:after {
content: " (" attr(title) ")"; }
.kss-style pre,
.kss-style blockquote {
border: 1px solid #999;
padding-right: 1em;
page-break-inside: avoid; }
.kss-style tr,
.kss-style img {
page-break-inside: avoid; }
.kss-style img {
max-width: 100%; }
.kss-style p,
.kss-style h2,
.kss-style h3 {
orphans: 3;
widows: 3; }
.kss-style h2,
.kss-style h3 {
page-break-after: avoid; } }
#kss-node {
background: #fff;
margin: 0;
padding: 20px;
/* SPAN elements with the classes below are added by prettyprint. */
/* Specify class=linenums on a pre to get line numbering */ }
#kss-node.kss-fullscreen-mode .kss-sidebar,
#kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen),
#kss-node.kss-fullscreen-mode .kss-github {
display: none; }
@media screen and (min-width: 769px) {
#kss-node {
padding: 0; }
#kss-node .kss-main,
#kss-node .kss-sidebar {
border: 0;
border-right: 1px solid #e2e3e5;
box-sizing: border-box; } }
@media screen and (min-width: 769px) {
#kss-node .kss-main {
padding: 140px 90px; } }
#kss-node .kss-sidebar {
border-right: 1px solid #e2e3e5; }
@media screen and (min-width: 769px) {
#kss-node .kss-sidebar {
border-bottom: 0;
padding: 150px 10px 0 20px; } }
#kss-node .kss-doc-title {
margin: 0; }
#kss-node .kss-doc-title img {
max-width: 40px;
vertical-align: middle; }
@media screen and (min-width: 769px) {
#kss-node .kss-doc-title {
font-size: 1.5em; } }
#kss-node .kss-nav {
position: relative; }
@media screen and (min-width: 769px) {
#kss-node .kss-nav {
margin-top: 2em; } }
#kss-node .kss-nav ul,
#kss-node .kss-nav ol,
#kss-node .kss-nav li {
display: block;
float: none; }
#kss-node .kss-nav li {
margin-left: 3.2rem; }
#kss-node .kss-nav .kss-nav-has-children > a::before {
content: url("./arrow_down.svg"); }
#kss-node .kss-nav .kss-nav-has-children > a.kss-nav__menu-link-active::before {
content: url("./arrow_up.svg"); }
#kss-node .kss-nav__menu {
list-style-type: none;
margin-bottom: 12px;
margin-top: 12px;
padding: 0; }
#kss-node .kss-nav__menu-item {
display: inline-block;
padding-right: 24px; }
@media screen and (min-width: 769px) {
#kss-node .kss-nav__menu-item {
display: list-item;
padding-right: 0; } }
#kss-node .kss-nav__menu-link {
display: inline-block;
position: relative; }
@media screen and (min-width: 769px) {
#kss-node .kss-nav__menu-link:before {
background-color: transparent;
content: ' ';
height: 100%;
left: -20px;
position: absolute;
width: 0; } }
#kss-node .kss-nav__menu-child {
display: none; }
@media screen and (min-width: 769px) {
#kss-node .kss-nav__menu-child {
display: block;
list-style-type: none;
margin: 0;
padding: 0; }
#kss-node .kss-nav__menu-child li {
padding: 15px 0 0; }
#kss-node .kss-nav__menu-child li:last-child {
padding: 15px 0; } }
#kss-node .kss-nav__ref {
color: #6a737a; }
#kss-node .kss-nav__ref:after {
content: ' '; }
#kss-node .kss-nav__ref-child {
font-weight: normal;
padding-left: 1.2rem; }
#kss-node .kss-section {
padding-bottom: 2.4rem;
padding-top: 2.4rem; }
#kss-node .kss-section.is-fullscreen {
bottom: 0;
box-sizing: border-box;
height: 100%;
left: 0;
margin: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
object-fit: contain;
overflow: auto;
padding: 20px;
position: fixed;
right: 0;
top: 0;
transform: none;
width: 100%; }
#kss-node .kss-title {
margin-bottom: 0; }
#kss-node .is-fullscreen .kss-title {
margin-top: 0; }
#kss-node .kss-title__ref {
color: #333;
display: block;
font-size: 16px;
line-height: 16px; }
#kss-node .kss-title__ref:before {
content: 'Section '; }
#kss-node .kss-title__permalink {
color: #000;
display: block;
text-decoration: none; }
#kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active {
color: #d1783e; }
@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; } }
#kss-node .kss-title__permalink-hash {
color: #999;
display: none; }
#kss-node .kss-toolbar {
display: inline-block;
line-height: 1;
margin: 6px 0 24px;
padding: 3px; }
#kss-node .kss-toolbar a {
box-sizing: content-box;
display: inline-block;
height: 16px;
overflow: visible;
padding: 3px;
position: relative;
vertical-align: top;
width: 16px; }
#kss-node .kss-toolbar a + a {
margin-left: 6px; }
#kss-node .kss-toolbar a .kss-toolbar__icon-fill {
fill: #999; }
#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 {
background: #fff;
border: solid 1px #999;
bottom: 100%;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
clip: rect(1px, 1px, 1px, 1px);
color: #000;
cursor: help;
display: inline-block;
height: 1px;
left: -10px;
margin-bottom: 5px;
opacity: 0;
overflow: hidden;
padding: 8px 10px 6px;
position: absolute;
transition: opacity .25s;
white-space: nowrap;
width: 1px;
word-wrap: normal;
z-index: 1; }
#kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after {
border-color: #999 transparent;
border-style: solid;
border-width: 7px 5px 0;
bottom: -8px;
content: '';
height: 0;
left: 15px;
position: absolute;
width: 0; }
#kss-node .kss-toolbar__tooltip:after {
border-top-color: #fff;
bottom: -6px; }
#kss-node a:focus > .kss-toolbar__tooltip,
#kss-node a:hover > .kss-toolbar__tooltip {
clip: auto;
height: auto;
opacity: 1;
overflow: visible;
width: auto; }
#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] {
background-color: #999;
border-color: #999; }
#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-left: 0;
margin-top: 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 .is-fullscreen .kss-modifier__wrapper {
border: 0;
margin-left: -20px;
margin-right: -20px;
padding-left: 0;
padding-right: 0; }
#kss-node .kss-modifier__heading {
margin: 2.4rem 0;
padding: 1.2rem 0; }
#kss-node .kss-modifier__heading::after {
border-bottom: 4px solid #f3f3f5;
content: '';
display: block;
padding-top: 1.2rem;
width: 40%; }
#kss-node .is-fullscreen .kss-modifier__heading {
border: 1px solid #999;
margin: 0 20px 10px; }
#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;
font-weight: bold;
padding-right: 10px; }
#kss-node .is-fullscreen .kss-modifier__name {
margin-left: 20px; }
#kss-node .kss-modifier__description {
margin-bottom: 12px; }
#kss-node .is-fullscreen .kss-modifier__description {
margin-right: 20px; }
#kss-node .kss-modifier__example {
border: 2px dashed transparent;
clear: left;
margin: -2px -2px 22px;
position: relative;
z-index: 0; }
#kss-node .kss-modifier__example:last-child {
margin-bottom: 0; }
#kss-node .kss-modifier__example .fullscreen {
border-radius: 6px;
padding-bottom: 50%; }
#kss-node .kss-modifier__example .fullscreen .embed {
height: calc(100% - 30px);
left: 5px;
position: absolute;
top: 25px;
width: calc(100% - 10px); }
#kss-node .kss-modifier__example section {
padding: 0;
position: relative; }
#kss-node .kss-modifier__example section::before {
position: absolute;
top: 0;
width: 100%; }
#kss-node .kss-modifier__example section p {
padding: 2.4rem; }
#kss-node .kss-modifier__example .fullscreen,
#kss-node .kss-modifier__example section {
border: 2px solid #e7e7e9; }
#kss-node .kss-modifier__example .fullscreen::before,
#kss-node .kss-modifier__example section::before {
background: url("./browser_icon.svg") no-repeat 5px center #f3f3f5;
border-bottom: 2px solid #e7e7e9;
content: '';
display: block;
height: 20px; }
#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 {
border: 2px solid #000;
box-sizing: border-box;
content: '';
height: 5px;
position: absolute;
width: 5px;
z-index: -1; }
#kss-node.kss-guides-mode .kss-modifier__example {
border-color: #000; }
#kss-node.kss-guides-mode .kss-modifier__example:before {
border-left: 0;
border-top: 0;
left: -5px;
top: -5px; }
#kss-node.kss-guides-mode .kss-modifier__example:after {
border-right: 0;
border-top: 0;
right: -5px;
top: -5px; }
#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 {
left: 0;
right: auto; }
#kss-node .kss-modifier__example-footer {
clear: both; }
#kss-node.kss-guides-mode .kss-modifier__example-footer:before {
border-bottom: 0;
border-left: 0;
bottom: -5px;
left: -5px; }
#kss-node.kss-guides-mode .kss-modifier__example-footer:after {
border-bottom: 0;
border-right: 0;
bottom: -5px;
right: -5px; }
#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 {
left: 0;
right: auto; }
#kss-node .kss-markup {
border: 1px solid #e0e4e7;
border-radius: 3px;
margin: 24px 0;
padding: 20px; }
#kss-node .kss-markup[open] summary {
background: url("./arrow_up.svg") no-repeat right center; }
#kss-node .kss-markup summary {
background: url("./arrow_down.svg") no-repeat right center;
cursor: pointer; }
#kss-node .kss-markup pre {
background: #1d1f20;
overflow: auto;
padding: 20px; }
#kss-node .kss-markup pre code {
background: transparent; }
#kss-node .kss-source {
font-size: 70%;
font-style: italic; }
#kss-node .kss-github {
display: none; }
@media screen and (min-width: 501px) {
#kss-node .kss-github {
display: block;
position: absolute;
right: 0;
top: 0; } }
#kss-node .kss-github img {
border: 0; }
#kss-node .tag {
color: #a7925a; }
#kss-node .atn {
color: #ddca7e; }
#kss-node .pun {
color: #fff; }
#kss-node .atv {
color: #96b38a; }
#kss-node .pln {
color: #fff; }
#kss-node ol.linenums {
list-style-type: none;
margin: 0;
padding: 0; }
#kss-node ol.linenums li {
line-height: 2rem;
margin: 0;
min-height: 24px;
padding: 0 10px; }
#kss-node .kss__demos {
list-style: none; }
#kss-node .kss__demos li {
margin-left: 0; }
#kss-node .kss__demos a {
color: #d1783e;
font-size: 13.33333px;
font-weight: bold; }
#kss-node .fullscreen > .embed {
position: relative; }
#kss-node #navigation {
opacity: 1;
position: relative; }
#kss-node #kssref-longforms-interviews .text-interview {
margin-left: 34%;
width: 66%; }
.kss-container {
display: grid;
grid-template-columns: 25% 75%; }
.kss-header {
background-color: #2f3742;
display: flex;
padding: 0 2.4rem;
position: fixed; }
.kss-header h1,
.kss-header li a {
color: #fff;
display: inline-block;
font-family: 'San Francisco';
font-size: .8em;
font-weight: bold;
line-height: 7.2rem;
padding: 0; }
.kss-header li a:hover {
color: #93cdcf; }
.kss-header .kss-menu-active {
border-bottom: 4px solid #93cdcf;
box-sizing: border-box;
color: #93cdcf; }
.kss-sub-header {
background: #f3f3f5;
border-bottom: 4px solid #e7e7e9;
font-size: 14px;
padding: 1rem 2.4rem;
position: fixed;
top: 72px;
width: 100%;
z-index: 1; }
#kssref-layout-radius .radius {
padding: 2.4rem; }
#kssref-layout-backgrounds span[class*='bg'] {
display: inline-block;
margin-left: -4px;
padding: 1.2rem;
width: 25%; }
#kssref-layout-backgrounds-transparent div[class*='bg'] {
margin: 0;
padding: 2rem; }
#kssref-layout-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
margin: 3rem;
padding: 6rem; }
#kssref-layout-backgrounds-gradient div[class*='bg'] {
margin: 3rem;
padding: 4rem; }
#kssref-slide-background-anim .slide {
clip: rect(0, 200px, 200px, 0);
position: absolute; }
#kssref-slide-background-anim .kss-modifier__example {
height: 200px;
margin: 0 auto;
width: 200px; }
.kss-description p {
padding-bottom: 1.2rem; }
.kss-container-background-anim {
clip: rect(0 600px 400px 0); }
Reference in New Issue View Git Blame Copy Permalink