mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-21 20:35:31 +02:00
Code Issues Releases Wiki Activity

kss - Layouts section

Browse Source
This commit is contained in:
Luis Sacristán
2017-10-13 21:03:44 +02:00
parent e9d9bf973d
commit f31f8045c0
23 changed files with 590 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
doc/kss/templates/default/kss-assets/kss.css
View File

@@ -445,21 +445,33 @@
#kss-node .kss-modifier__example:last-child {
margin-bottom: 0; }
#kss-node .kss-modifier__example .fullscreen {
border: 2px solid #e7e7e9;
border-radius: 6px;
padding-bottom: 50%; }
#kss-node .kss-modifier__example .fullscreen::before {
background: url("./browser_icon.svg") no-repeat 5px center #f3f3f5;
border-bottom: 2px solid #e7e7e9;
content: '';
display: block;
height: 20px; }
#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 {
@@ -564,6 +576,9 @@
font-weight: bold; }
#kss-node .fullscreen > .embed {
position: relative; }
#kss-node #navigation {
opacity: 1;
position: relative; }
.kss-container {
display: grid;
@@ -603,19 +618,20 @@
#kssref-layout-radius .radius {
padding: 2.4rem; }
#kssref-architecture-backgrounds span[class*='bg'] {
#kssref-layout-backgrounds span[class*='bg'] {
display: inline-block;
margin-left: -4px;
padding: 1.2rem; }
padding: 1.2rem;
width: 25%; }
#kssref-architecture-backgrounds-transparent div[class*='bg'] {
#kssref-layout-backgrounds-transparent div[class*='bg'] {
margin: 0;
padding: 2rem; }
#kssref-architecture-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
#kssref-layout-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
margin: 3rem;
padding: 6rem; }
#kssref-architecture-backgrounds-gradient div[class*='bg'] {
#kssref-layout-backgrounds-gradient div[class*='bg'] {
margin: 3rem;
padding: 4rem; }
@@ -630,3 +646,6 @@
.kss-description p {
padding-bottom: 1.2rem; }
.kss-container-background-anim {
clip: rect(0 600px 400px 0); }

53
doc/kss/templates/default/kss-assets/kss.scss
View File

@@ -720,18 +720,9 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
}
.fullscreen {
border: 2px solid $kss-colors-subheader-border;
border-radius: 6px;
padding-bottom: 50%;
&::before {
background: url('./browser_icon.svg') no-repeat 5px center $kss-colors-subheader-bg;
border-bottom: 2px solid $kss-colors-subheader-border;
content: '';
display: block;
height: 20px;
}
.embed {
height: calc(100% - 30px);
left: 5px;
@@ -740,6 +731,34 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
width: calc(100% - 10px);
}
}
section {
padding: 0;
position: relative;
&::before {
position: absolute;
top: 0;
width: 100%;
}
p {
padding: 2.4rem;
}
}
.fullscreen,
section {
border: 2px solid $kss-colors-subheader-border;
&::before {
background: url('./browser_icon.svg') no-repeat 5px center $kss-colors-subheader-bg;
border-bottom: 2px solid $kss-colors-subheader-border;
content: '';
display: block;
height: 20px;
}
}
}
&.kss-guides-mode .kss-modifier__example,
@@ -907,6 +926,11 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
.fullscreen > .embed {
position: relative;
}
#navigation {
opacity: 1;
position: relative;
}
}
.kss-container {
@@ -966,15 +990,16 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
}
}
#kssref-architecture-backgrounds {
#kssref-layout-backgrounds {
& span[class*='bg'] {
display: inline-block;
margin-left: -4px;
padding: 1.2rem;
width: 25%;
}
}
#kssref-architecture-backgrounds-transparent {
#kssref-layout-backgrounds-transparent {
& div[class*='bg'] {
margin: 0;
padding: 2rem;
@@ -986,7 +1011,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
}
}
#kssref-architecture-backgrounds-gradient {
#kssref-layout-backgrounds-gradient {
& div[class*='bg'] {
margin: 3rem;
padding: 4rem;
@@ -1010,3 +1035,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
padding-bottom: 1.2rem;
}
}
.kss-container-background-anim {
clip: rect(0 600px 400px 0);
}

20
doc/styleguide/item-layout-alignment.html
View File

@@ -87,6 +87,26 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;7" title="Example right" target="_blank">Example right</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;6" title="Example left" target="_blank">Example left</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;8" title="Example right" target="_blank">Example right</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;5" title="In the header" target="_blank">In the header</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;58" title="In the footer" target="_blank">In the footer</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

18
doc/styleguide/item-layout-background-anim.html
View File

@@ -87,6 +87,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;100" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -96,7 +104,9 @@
<div class="kss-modifier__example">
<section class="aligncenter bg-black">
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
<div class="kss-container-background-anim">
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
</div>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -108,12 +118,14 @@
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;aligncenter bg-black&quot;&gt;
&lt;span class&#x3D;&quot;background anim&quot; style&#x3D;&quot;background-image:url(&#x27;https://source.unsplash.com/n9WPPWiPPJw/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;div class&#x3D;&quot;kss-container-background-anim&quot;&gt;
&lt;span class&#x3D;&quot;background anim&quot; style&#x3D;&quot;background-image:url(&#x27;https://source.unsplash.com/n9WPPWiPPJw/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides-bg.scss</code>, line 140
Source: <code>modules/_slides-bg.scss</code>, line 152
</div>
</div>

10
doc/styleguide/item-layout-background-video.html
View File

@@ -87,6 +87,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;34" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -125,7 +133,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides-bg.scss</code>, line 92
Source: <code>modules/_slides-bg.scss</code>, line 101
</div>
</div>

54
doc/styleguide/item-layout-background.html
View File

@@ -87,6 +87,32 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;58" title="Example 1" target="_blank">Example 1</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;59" title="Example 2" target="_blank">Example 2</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;60" title="Example 3" target="_blank">Example 3</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;61" title="Example 4" target="_blank">Example 4</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;51" title="Right top" target="_blank">Right top</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;92" title="Right bottom" target="_blank">Right bottom</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;87" title="Left bottom" target="_blank">Left bottom</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -99,7 +125,7 @@
<div class="kss-modifier__example">
<section>
<span class=" bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class=" bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -112,7 +138,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -124,7 +150,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -136,7 +162,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -148,7 +174,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-center bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-center bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -160,7 +186,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-center-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-center-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -172,7 +198,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-left-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-left-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -184,7 +210,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-right-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-right-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -196,7 +222,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-center-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-center-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -208,7 +234,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-left-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-left-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -220,7 +246,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-right-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-right-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -232,7 +258,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-left bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-left bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -244,7 +270,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-right bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-right bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -255,7 +281,7 @@
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
&lt;span class&#x3D;&quot;[modifier class] bg-gray&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/150/150/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;span class&#x3D;&quot;[modifier class] bg-gray&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/800/800/city/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;/section&gt;</code></pre>
</details>

12
doc/styleguide/item-layout-backgrounds-gradient.html
View File

@@ -102,6 +102,10 @@
<div class="bg-gradient-h">Horizontal</div>
<div class="bg-gradient-v">Vertical</div>
<div class="bg-gradient-r">Radial</div>
Demos:
[Horizontal](https://webslides.tv/demos/classes#slide=29)
[Vertical](https://webslides.tv/demos/classes#slide=32)
[Radial](https://webslides.tv/demos/classes#slide=31)
<div class="kss-modifier__example-footer"></div>
</div>
@@ -113,11 +117,15 @@
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html"> &lt;div class&#x3D;&quot;bg-gradient-h&quot;&gt;Horizontal&lt;/div&gt;
&lt;div class&#x3D;&quot;bg-gradient-v&quot;&gt;Vertical&lt;/div&gt;
&lt;div class&#x3D;&quot;bg-gradient-r&quot;&gt;Radial&lt;/div&gt;</code></pre>
&lt;div class&#x3D;&quot;bg-gradient-r&quot;&gt;Radial&lt;/div&gt;
Demos:
[Horizontal](https://webslides.tv/demos/classes#slide&#x3D;29)
[Vertical](https://webslides.tv/demos/classes#slide&#x3D;32)
[Radial](https://webslides.tv/demos/classes#slide&#x3D;31)</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_color.scss</code>, line 193
Source: <code>_color.scss</code>, line 201
</div>
</div>

10
doc/styleguide/item-layout-backgrounds-transparent.html
View File

@@ -91,6 +91,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;28" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -121,7 +129,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_color.scss</code>, line 168
Source: <code>_color.scss</code>, line 173
</div>
</div>

66
doc/styleguide/item-layout-backgrounds.html
View File

@@ -91,6 +91,20 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;24" title="White" target="_blank">White</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;28" title="Several colors" target="_blank">Several colors</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;27" title="Examples" target="_blank">Examples</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -99,19 +113,19 @@
<div class="kss-modifier__example">
<span class="bg-primary size-20">Primary #44d</span>
<span class="bg-secondary size-20">Secondary #67d</span>
<span class="bg-light size-20">Light #f7f9fb</span>
<span class="bg-black size-20">Black #000</span>
<span class="bg-black-blue size-20">Black blue #123</span>
<span class="bg-blue size-20">Blue #346</span>
<span class="bg-brown size-20">Brown #f9f8f2</span>
<span class="bg-gray size-20">Gray #d5d9e2</span>
<span class="bg-green size-20">Green #077</span>
<span class="bg-purple size-20">Purple #62b</span>
<span class="bg-red size-20">Red #c23</span>
<span class="bg-white size-20">White #fff</span>
<span class="bg-facebook size-20">Facebook #3b5998</span>
<span class="bg-primary">Primary #44d</span>
<span class="bg-secondary">Secondary #67d</span>
<span class="bg-light">Light #f7f9fb</span>
<span class="bg-black">Black #000</span>
<span class="bg-black-blue">Black blue #123</span>
<span class="bg-blue">Blue #346</span>
<span class="bg-brown">Brown #f9f8f2</span>
<span class="bg-gray">Gray #d5d9e2</span>
<span class="bg-green">Green #077</span>
<span class="bg-purple">Purple #62b</span>
<span class="bg-red">Red #c23</span>
<span class="bg-white">White #fff</span>
<span class="bg-facebook">Facebook #3b5998</span>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -121,19 +135,19 @@
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;span class&#x3D;&quot;bg-primary size-20&quot;&gt;Primary #44d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-secondary size-20&quot;&gt;Secondary #67d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-light size-20&quot;&gt;Light #f7f9fb&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black size-20&quot;&gt;Black #000&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black-blue size-20&quot;&gt;Black blue #123&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-blue size-20&quot;&gt;Blue #346&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-brown size-20&quot;&gt;Brown #f9f8f2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-gray size-20&quot;&gt;Gray #d5d9e2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-green size-20&quot;&gt;Green #077&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-purple size-20&quot;&gt;Purple #62b&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-red size-20&quot;&gt;Red #c23&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-white size-20&quot;&gt;White #fff&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-facebook size-20&quot;&gt;Facebook #3b5998&lt;/span&gt;</code></pre>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;span class&#x3D;&quot;bg-primary&quot;&gt;Primary #44d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-secondary&quot;&gt;Secondary #67d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-light&quot;&gt;Light #f7f9fb&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black&quot;&gt;Black #000&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black-blue&quot;&gt;Black blue #123&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-blue&quot;&gt;Blue #346&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-brown&quot;&gt;Brown #f9f8f2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-gray&quot;&gt;Gray #d5d9e2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-green&quot;&gt;Green #077&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-purple&quot;&gt;Purple #62b&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-red&quot;&gt;Red #c23&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-white&quot;&gt;White #fff&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-facebook&quot;&gt;Facebook #3b5998&lt;/span&gt;</code></pre>
</details>
<div class="kss-source kss-style">

23
doc/styleguide/item-layout-grid.html
View File

@@ -92,6 +92,29 @@ Auto-fill &amp; Equal height</p>
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;18" title="Example" target="_blank">Example</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;4" title="Example 2" target="_blank">Example 2</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;20" title="Sidebar + main" target="_blank">Sidebar + main</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;21" title="Main + sidebar" target="_blank">Main + sidebar</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;22" title="Sidebar + main + sidebar" target="_blank">Sidebar + main + sidebar</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;9" title="Columns" target="_blank">Columns</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

8
doc/styleguide/item-layout-navbars.html
View File

@@ -91,6 +91,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;8" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

13
doc/styleguide/item-layout-sizes.html
View File

@@ -87,6 +87,17 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;25" title="50%" target="_blank">50%</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;26" title="30%" target="_blank">30%</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -182,7 +193,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 189
Source: <code>_base.scss</code>, line 197
</div>
</div>

19
doc/styleguide/item-layout-slides-bottom.html
View File

@@ -90,12 +90,9 @@
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
Example
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<section class="slide-bottom">
@@ -104,18 +101,6 @@
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
Slide alignment
</div>
<div class="kss-modifier__description kss-style">
bottom
</div>
<div class="kss-modifier__example">
<section class="slide-bottom">
<p>Content</p>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
@@ -128,7 +113,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides.scss</code>, line 74
Source: <code>modules/_slides.scss</code>, line 72
</div>
</div>

17
doc/styleguide/item-layout-slides-top.html
View File

@@ -90,12 +90,9 @@
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
Example
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<section class="slide-top">
@@ -104,18 +101,6 @@
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
Slide alignment
</div>
<div class="kss-modifier__description kss-style">
top
</div>
<div class="kss-modifier__example">
<section class="slide-top">
<p>Content</p>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">

43
doc/styleguide/kss-assets/kss.css
View File

@@ -445,21 +445,33 @@
#kss-node .kss-modifier__example:last-child {
margin-bottom: 0; }
#kss-node .kss-modifier__example .fullscreen {
border: 2px solid #e7e7e9;
border-radius: 6px;
padding-bottom: 50%; }
#kss-node .kss-modifier__example .fullscreen::before {
background: url("./browser_icon.svg") no-repeat 5px center #f3f3f5;
border-bottom: 2px solid #e7e7e9;
content: '';
display: block;
height: 20px; }
#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 {
@@ -564,6 +576,9 @@
font-weight: bold; }
#kss-node .fullscreen > .embed {
position: relative; }
#kss-node #navigation {
opacity: 1;
position: relative; }
.kss-container {
display: grid;
@@ -603,19 +618,20 @@
#kssref-layout-radius .radius {
padding: 2.4rem; }
#kssref-architecture-backgrounds span[class*='bg'] {
#kssref-layout-backgrounds span[class*='bg'] {
display: inline-block;
margin-left: -4px;
padding: 1.2rem; }
padding: 1.2rem;
width: 25%; }
#kssref-architecture-backgrounds-transparent div[class*='bg'] {
#kssref-layout-backgrounds-transparent div[class*='bg'] {
margin: 0;
padding: 2rem; }
#kssref-architecture-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
#kssref-layout-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
margin: 3rem;
padding: 6rem; }
#kssref-architecture-backgrounds-gradient div[class*='bg'] {
#kssref-layout-backgrounds-gradient div[class*='bg'] {
margin: 3rem;
padding: 4rem; }
@@ -630,3 +646,6 @@
.kss-description p {
padding-bottom: 1.2rem; }
.kss-container-background-anim {
clip: rect(0 600px 400px 0); }

53
doc/styleguide/kss-assets/kss.scss
View File

@@ -720,18 +720,9 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
}
.fullscreen {
border: 2px solid $kss-colors-subheader-border;
border-radius: 6px;
padding-bottom: 50%;
&::before {
background: url('./browser_icon.svg') no-repeat 5px center $kss-colors-subheader-bg;
border-bottom: 2px solid $kss-colors-subheader-border;
content: '';
display: block;
height: 20px;
}
.embed {
height: calc(100% - 30px);
left: 5px;
@@ -740,6 +731,34 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
width: calc(100% - 10px);
}
}
section {
padding: 0;
position: relative;
&::before {
position: absolute;
top: 0;
width: 100%;
}
p {
padding: 2.4rem;
}
}
.fullscreen,
section {
border: 2px solid $kss-colors-subheader-border;
&::before {
background: url('./browser_icon.svg') no-repeat 5px center $kss-colors-subheader-bg;
border-bottom: 2px solid $kss-colors-subheader-border;
content: '';
display: block;
height: 20px;
}
}
}
&.kss-guides-mode .kss-modifier__example,
@@ -907,6 +926,11 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
.fullscreen > .embed {
position: relative;
}
#navigation {
opacity: 1;
position: relative;
}
}
.kss-container {
@@ -966,15 +990,16 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
}
}
#kssref-architecture-backgrounds {
#kssref-layout-backgrounds {
& span[class*='bg'] {
display: inline-block;
margin-left: -4px;
padding: 1.2rem;
width: 25%;
}
}
#kssref-architecture-backgrounds-transparent {
#kssref-layout-backgrounds-transparent {
& div[class*='bg'] {
margin: 0;
padding: 2rem;
@@ -986,7 +1011,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
}
}
#kssref-architecture-backgrounds-gradient {
#kssref-layout-backgrounds-gradient {
& div[class*='bg'] {
margin: 3rem;
padding: 4rem;
@@ -1010,3 +1035,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
padding-bottom: 1.2rem;
}
}
.kss-container-background-anim {
clip: rect(0 600px 400px 0);
}

270
doc/styleguide/section-layout.html
View File

@@ -185,6 +185,26 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;7" title="Example right" target="_blank">Example right</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;6" title="Example left" target="_blank">Example left</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;8" title="Example right" target="_blank">Example right</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;5" title="In the header" target="_blank">In the header</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;58" title="In the footer" target="_blank">In the footer</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -271,6 +291,32 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;58" title="Example 1" target="_blank">Example 1</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;59" title="Example 2" target="_blank">Example 2</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;60" title="Example 3" target="_blank">Example 3</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;61" title="Example 4" target="_blank">Example 4</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;51" title="Right top" target="_blank">Right top</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;92" title="Right bottom" target="_blank">Right bottom</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;87" title="Left bottom" target="_blank">Left bottom</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -283,7 +329,7 @@
<div class="kss-modifier__example">
<section>
<span class=" bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class=" bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -296,7 +342,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -308,7 +354,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -320,7 +366,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -332,7 +378,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-center bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-center bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -344,7 +390,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-center-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-center-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -356,7 +402,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-left-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-left-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -368,7 +414,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-right-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-right-top bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -380,7 +426,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-center-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-center-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -392,7 +438,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-left-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-left-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -404,7 +450,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-right-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-right-bottom bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -416,7 +462,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-left bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-left bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -428,7 +474,7 @@
</div>
<div class="kss-modifier__example">
<section>
<span class="background-right bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
<span class="background-right bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -439,7 +485,7 @@
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
&lt;span class&#x3D;&quot;[modifier class] bg-gray&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/150/150/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;span class&#x3D;&quot;[modifier class] bg-gray&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/800/800/city/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;/section&gt;</code></pre>
</details>
@@ -460,6 +506,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;100" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -469,7 +523,9 @@
<div class="kss-modifier__example">
<section class="aligncenter bg-black">
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
<div class="kss-container-background-anim">
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
</div>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -481,12 +537,14 @@
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;aligncenter bg-black&quot;&gt;
&lt;span class&#x3D;&quot;background anim&quot; style&#x3D;&quot;background-image:url(&#x27;https://source.unsplash.com/n9WPPWiPPJw/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;div class&#x3D;&quot;kss-container-background-anim&quot;&gt;
&lt;span class&#x3D;&quot;background anim&quot; style&#x3D;&quot;background-image:url(&#x27;https://source.unsplash.com/n9WPPWiPPJw/&#x27;)&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides-bg.scss</code>, line 140
Source: <code>modules/_slides-bg.scss</code>, line 152
</div>
</div>
@@ -502,6 +560,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;34" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -540,7 +606,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides-bg.scss</code>, line 92
Source: <code>modules/_slides-bg.scss</code>, line 101
</div>
</div>
@@ -576,6 +642,20 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;24" title="White" target="_blank">White</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;28" title="Several colors" target="_blank">Several colors</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;27" title="Examples" target="_blank">Examples</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -584,19 +664,19 @@
<div class="kss-modifier__example">
<span class="bg-primary size-20">Primary #44d</span>
<span class="bg-secondary size-20">Secondary #67d</span>
<span class="bg-light size-20">Light #f7f9fb</span>
<span class="bg-black size-20">Black #000</span>
<span class="bg-black-blue size-20">Black blue #123</span>
<span class="bg-blue size-20">Blue #346</span>
<span class="bg-brown size-20">Brown #f9f8f2</span>
<span class="bg-gray size-20">Gray #d5d9e2</span>
<span class="bg-green size-20">Green #077</span>
<span class="bg-purple size-20">Purple #62b</span>
<span class="bg-red size-20">Red #c23</span>
<span class="bg-white size-20">White #fff</span>
<span class="bg-facebook size-20">Facebook #3b5998</span>
<span class="bg-primary">Primary #44d</span>
<span class="bg-secondary">Secondary #67d</span>
<span class="bg-light">Light #f7f9fb</span>
<span class="bg-black">Black #000</span>
<span class="bg-black-blue">Black blue #123</span>
<span class="bg-blue">Blue #346</span>
<span class="bg-brown">Brown #f9f8f2</span>
<span class="bg-gray">Gray #d5d9e2</span>
<span class="bg-green">Green #077</span>
<span class="bg-purple">Purple #62b</span>
<span class="bg-red">Red #c23</span>
<span class="bg-white">White #fff</span>
<span class="bg-facebook">Facebook #3b5998</span>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -606,19 +686,19 @@
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;span class&#x3D;&quot;bg-primary size-20&quot;&gt;Primary #44d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-secondary size-20&quot;&gt;Secondary #67d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-light size-20&quot;&gt;Light #f7f9fb&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black size-20&quot;&gt;Black #000&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black-blue size-20&quot;&gt;Black blue #123&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-blue size-20&quot;&gt;Blue #346&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-brown size-20&quot;&gt;Brown #f9f8f2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-gray size-20&quot;&gt;Gray #d5d9e2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-green size-20&quot;&gt;Green #077&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-purple size-20&quot;&gt;Purple #62b&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-red size-20&quot;&gt;Red #c23&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-white size-20&quot;&gt;White #fff&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-facebook size-20&quot;&gt;Facebook #3b5998&lt;/span&gt;</code></pre>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;span class&#x3D;&quot;bg-primary&quot;&gt;Primary #44d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-secondary&quot;&gt;Secondary #67d&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-light&quot;&gt;Light #f7f9fb&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black&quot;&gt;Black #000&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-black-blue&quot;&gt;Black blue #123&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-blue&quot;&gt;Blue #346&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-brown&quot;&gt;Brown #f9f8f2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-gray&quot;&gt;Gray #d5d9e2&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-green&quot;&gt;Green #077&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-purple&quot;&gt;Purple #62b&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-red&quot;&gt;Red #c23&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-white&quot;&gt;White #fff&lt;/span&gt;
&lt;span class&#x3D;&quot;bg-facebook&quot;&gt;Facebook #3b5998&lt;/span&gt;</code></pre>
</details>
<div class="kss-source kss-style">
@@ -653,6 +733,10 @@
<div class="bg-gradient-h">Horizontal</div>
<div class="bg-gradient-v">Vertical</div>
<div class="bg-gradient-r">Radial</div>
Demos:
[Horizontal](https://webslides.tv/demos/classes#slide=29)
[Vertical](https://webslides.tv/demos/classes#slide=32)
[Radial](https://webslides.tv/demos/classes#slide=31)
<div class="kss-modifier__example-footer"></div>
</div>
@@ -664,11 +748,15 @@
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html"> &lt;div class&#x3D;&quot;bg-gradient-h&quot;&gt;Horizontal&lt;/div&gt;
&lt;div class&#x3D;&quot;bg-gradient-v&quot;&gt;Vertical&lt;/div&gt;
&lt;div class&#x3D;&quot;bg-gradient-r&quot;&gt;Radial&lt;/div&gt;</code></pre>
&lt;div class&#x3D;&quot;bg-gradient-r&quot;&gt;Radial&lt;/div&gt;
Demos:
[Horizontal](https://webslides.tv/demos/classes#slide&#x3D;29)
[Vertical](https://webslides.tv/demos/classes#slide&#x3D;32)
[Radial](https://webslides.tv/demos/classes#slide&#x3D;31)</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_color.scss</code>, line 193
Source: <code>_color.scss</code>, line 201
</div>
</div>
@@ -688,6 +776,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;28" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -718,7 +814,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_color.scss</code>, line 168
Source: <code>_color.scss</code>, line 173
</div>
</div>
@@ -739,6 +835,29 @@ Auto-fill &amp; Equal height</p>
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;18" title="Example" target="_blank">Example</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;4" title="Example 2" target="_blank">Example 2</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;20" title="Sidebar + main" target="_blank">Sidebar + main</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;21" title="Main + sidebar" target="_blank">Main + sidebar</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;22" title="Sidebar + main + sidebar" target="_blank">Sidebar + main + sidebar</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;9" title="Columns" target="_blank">Columns</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -824,6 +943,14 @@ Auto-fill &amp; Equal height</p>
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;8" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -970,6 +1097,17 @@ Auto-fill &amp; Equal height</p>
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;25" title="50%" target="_blank">50%</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;26" title="30%" target="_blank">30%</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -1065,7 +1203,7 @@ Auto-fill &amp; Equal height</p>
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 189
Source: <code>_base.scss</code>, line 197
</div>
</div>
@@ -1178,12 +1316,9 @@ All HTML elements will have those styles</p>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
Example
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<section class="slide-bottom">
@@ -1192,18 +1327,6 @@ All HTML elements will have those styles</p>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
Slide alignment
</div>
<div class="kss-modifier__description kss-style">
bottom
</div>
<div class="kss-modifier__example">
<section class="slide-bottom">
<p>Content</p>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
@@ -1216,7 +1339,7 @@ All HTML elements will have those styles</p>
</details>
<div class="kss-source kss-style">
Source: <code>modules/_slides.scss</code>, line 74
Source: <code>modules/_slides.scss</code>, line 72
</div>
</div>
@@ -1281,12 +1404,9 @@ All HTML elements will have those styles</p>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples
Example
</div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<section class="slide-top">
@@ -1295,18 +1415,6 @@ All HTML elements will have those styles</p>
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
Slide alignment
</div>
<div class="kss-modifier__description kss-style">
top
</div>
<div class="kss-modifier__example">
<section class="slide-top">
<p>Content</p>
</section>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">

14
src/scss/_base.scss
View File

@@ -124,7 +124,7 @@ footer nav {
.frame,
.shadow {
padding: 2.4rem;
}
}https://webslides.tv/demos/classes#slide=5
.radius {
border-radius: .4rem;
@@ -142,6 +142,14 @@ footer nav {
// .alignleft - Align left.
// .aligncenter - Align center.
//
// Demos:
// [Example right](https://webslides.tv/demos/classes#slide=7)
// [Example left](https://webslides.tv/demos/classes#slide=6)
// [Example right](https://webslides.tv/demos/classes#slide=8)
// [In the header](https://webslides.tv/demos/classes#slide=5)
// [In the footer](https://webslides.tv/demos/components#slide=58)
//
//
// Styleguide Layout.Alignment
.alignright {
float: right;
@@ -199,6 +207,10 @@ figure.alignleft {
// .size-30 - resize to 30%.
// .size-20 - resize to 20%.
//
// Demos:
// [50%](https://webslides.tv/demos/components#slide=25)
// [30%](https://webslides.tv/demos/components#slide=26)
//
// Styleguide Layout.Sizes
$sizes: 80, 70, 60, 50, 40, 30, 20;

39
src/scss/_color.scss
View File

@@ -109,19 +109,24 @@ Slides - Backgrounds <section class="bg-primary">
// Colors we use for backgrounds.
//
// Markup:
// <span class="bg-primary size-20">Primary #44d</span>
// <span class="bg-secondary size-20">Secondary #67d</span>
// <span class="bg-light size-20">Light #f7f9fb</span>
// <span class="bg-black size-20">Black #000</span>
// <span class="bg-black-blue size-20">Black blue #123</span>
// <span class="bg-blue size-20">Blue #346</span>
// <span class="bg-brown size-20">Brown #f9f8f2</span>
// <span class="bg-gray size-20">Gray #d5d9e2</span>
// <span class="bg-green size-20">Green #077</span>
// <span class="bg-purple size-20">Purple #62b</span>
// <span class="bg-red size-20">Red #c23</span>
// <span class="bg-white size-20">White #fff</span>
// <span class="bg-facebook size-20">Facebook #3b5998</span>
// <span class="bg-primary">Primary #44d</span>
// <span class="bg-secondary">Secondary #67d</span>
// <span class="bg-light">Light #f7f9fb</span>
// <span class="bg-black">Black #000</span>
// <span class="bg-black-blue">Black blue #123</span>
// <span class="bg-blue">Blue #346</span>
// <span class="bg-brown">Brown #f9f8f2</span>
// <span class="bg-gray">Gray #d5d9e2</span>
// <span class="bg-green">Green #077</span>
// <span class="bg-purple">Purple #62b</span>
// <span class="bg-red">Red #c23</span>
// <span class="bg-white">White #fff</span>
// <span class="bg-facebook">Facebook #3b5998</span>
//
// Demos:
// [White](https://webslides.tv/demos/classes#slide=24)
// [Several colors](https://webslides.tv/demos/classes#slide=28)
// [Examples](https://webslides.tv/demos/components#slide=27)
//
// Styleguide Layout.Backgrounds
@each $name, $color in $bg-colors {
@@ -176,6 +181,9 @@ Slides - Backgrounds <section class="bg-primary">
// <div class="bg-trans-gradient">Gradient</div>
// </div>
//
// Demos:
// [Example](https://webslides.tv/demos/components#slide=28)
//
// Styleguide Layout.backgrounds.transparent
.bg-trans-dark {
background: rgba($black, .8);
@@ -198,9 +206,12 @@ Slides - Backgrounds <section class="bg-primary">
// <div class="bg-gradient-h">Horizontal</div>
// <div class="bg-gradient-v">Vertical</div>
// <div class="bg-gradient-r">Radial</div>
// Demos:
// [Horizontal](https://webslides.tv/demos/classes#slide=29)
// [Vertical](https://webslides.tv/demos/classes#slide=32)
// [Radial](https://webslides.tv/demos/classes#slide=31)
//
// Styleguide Layout.backgrounds.gradient
/*Horizontal Gradient*/
.bg-gradient-h {
background: linear-gradient(134deg, #32b 0, #62b 100%);
}

8
src/scss/modules/_grid.scss
View File

@@ -16,6 +16,14 @@
// </div>
// </div>
//
// Demos:
// [Example](https://webslides.tv/demos/classes#slide=18)
// [Example 2](https://webslides.tv/demos/classes#slide=4)
// [Sidebar + main](https://webslides.tv/demos/classes#slide=20)
// [Main + sidebar](https://webslides.tv/demos/classes#slide=21)
// [Sidebar + main + sidebar](https://webslides.tv/demos/classes#slide=22)
// [Columns](https://webslides.tv/demos/components#slide=9)
//
// .vertical-align - Vertical align
//
// Styleguide Layout.Grid

3
src/scss/modules/_navigation.scss
View File

@@ -20,6 +20,9 @@
// </ul>
// </nav>
//
// Demos:
// [Example](https://webslides.tv/demos/components#slide=8)
//
// .navbar - Navigation bar
// .aligncenter - Center alignment
// .alignright - Right alignment

21
src/scss/modules/_slides-bg.scss
View File

@@ -16,7 +16,7 @@
//
// Markup:
// <section>
// <span class="{{modifier_class}} bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
// <span class="{{modifier_class}} bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
// </section>
//
// .background - Center.
@@ -32,6 +32,15 @@
// .background-left - Left.
// .background-right - Right.
//
// Demos:
// [Example 1](https://webslides.tv/demos/components#slide=58)
// [Example 2](https://webslides.tv/demos/components#slide=59)
// [Example 3](https://webslides.tv/demos/components#slide=60)
// [Example 4](https://webslides.tv/demos/components#slide=61)
// [Right top](https://webslides.tv/demos/components#slide=51)
// [Right bottom](https://webslides.tv/demos/components#slide=92)
// [Left bottom](https://webslides.tv/demos/components#slide=87)
//
// Styleguide Layout.Background
.background {
background-position: center;
@@ -102,6 +111,9 @@
// </div>
// </section>
//
// Demos:
// [Example](https://webslides.tv/demos/classes#slide=34)
//
// Styleguide Layout.Background.Video
&-video {
height: 100%;
@@ -141,9 +153,14 @@
//
// Markup:
// <section class="aligncenter bg-black">
// <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
// <div class="kss-container-background-anim">
// <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
// </div>
// </section>
//
// Demos:
// [Example](https://webslides.tv/demos/components#slide=100)
//
// Styleguide Layout.Background.Anim
.background.anim {
animation: anim 80s linear infinite;

4
src/scss/modules/_slides.scss
View File

@@ -59,8 +59,6 @@ section,
// Align top
//
// Slide alignment - top
//
// Markup:
// <section class="slide-top">
// <p>Content</p>
@@ -73,8 +71,6 @@ section,
// Align bottom
//
// Slide alignment - bottom
//
// Markup:
// <section class="slide-bottom">
// <p>Content</p>