mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-14 00:54:09 +02:00
Code Issues Releases Wiki Activity

kss - Adding Media

Browse Source
This commit is contained in:
Luis Sacristán
2017-10-19 20:26:12 +02:00
parent a5ac5aae00
commit dbafa9fb10
6 changed files with 78 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
doc/styleguide/item-media-embed.html
View File

@@ -91,6 +91,17 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/netflix-culture#slide&#x3D;16" title="Patty McCord" target="_blank">Patty McCord</a>
</li>
<li>
<a href="https://webslides.tv/demos/keynote#slide&#x3D;33" title="Keynote" target="_blank">Keynote</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

13
doc/styleguide/item-media-fullscreen-embed.html
View File

@@ -92,6 +92,17 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/netflix-culture#slide&#x3D;12" title="Netflix" target="_blank">Netflix</a>
</li>
<li>
<a href="https://webslides.tv/demos/keynote#slide&#x3D;33" title="Keynote" target="_blank">Keynote</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -126,7 +137,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>modules/_media.scss</code>, line 35
Source: <code>modules/_media.scss</code>, line 39
</div>
</div>

12
doc/styleguide/item-media-screenshots.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;114" title="Screenshot" target="_blank">Screenshot</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -100,7 +108,7 @@
<div class="kss-modifier__example">
<figure class="browser">
<img src="http://lorempixel.com/500/500/food/" />
<img src="http://lorempixel.com/1000/500/food/" />
<figcaption>Foddie</figcaption>
</figure>
<div class="kss-modifier__example-footer"></div>
@@ -113,7 +121,7 @@
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;figure class&#x3D;&quot;browser&quot;&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/500/500/food/&quot; /&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/1000/500/food/&quot; /&gt;
&lt;figcaption&gt;Foddie&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
</details>

36
doc/styleguide/section-media.html
View File

@@ -197,6 +197,17 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/netflix-culture#slide&#x3D;16" title="Patty McCord" target="_blank">Patty McCord</a>
</li>
<li>
<a href="https://webslides.tv/demos/keynote#slide&#x3D;33" title="Keynote" target="_blank">Keynote</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -264,6 +275,17 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/netflix-culture#slide&#x3D;12" title="Netflix" target="_blank">Netflix</a>
</li>
<li>
<a href="https://webslides.tv/demos/keynote#slide&#x3D;33" title="Keynote" target="_blank">Keynote</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -298,7 +320,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>modules/_media.scss</code>, line 35
Source: <code>modules/_media.scss</code>, line 39
</div>
</div>
@@ -318,6 +340,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;114" title="Screenshot" target="_blank">Screenshot</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -327,7 +357,7 @@
<div class="kss-modifier__example">
<figure class="browser">
<img src="http://lorempixel.com/500/500/food/" />
<img src="http://lorempixel.com/1000/500/food/" />
<figcaption>Foddie</figcaption>
</figure>
<div class="kss-modifier__example-footer"></div>
@@ -340,7 +370,7 @@
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;figure class&#x3D;&quot;browser&quot;&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/500/500/food/&quot; /&gt;
&lt;img src&#x3D;&quot;http://lorempixel.com/1000/500/food/&quot; /&gt;
&lt;figcaption&gt;Foddie&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
</details>

5
src/scss/modules/_browser.scss
View File

@@ -4,10 +4,13 @@
//
// Markup:
// <figure class="browser">
// <img src="http://lorempixel.com/500/500/food/" />
// <img src="http://lorempixel.com/1000/500/food/" />
// <figcaption>Foddie</figcaption>
// </figure>
//
// Demos:
// [Screenshot](https://webslides.tv/demos/components#slide=114)
//
// Styleguide Media.Screenshots
.browser {
border-radius: .3rem;

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

@@ -9,6 +9,10 @@
// </video>
// </div>
//
// Demos:
// [Patty McCord](https://webslides.tv/demos/netflix-culture#slide=16)
// [Keynote](https://webslides.tv/demos/keynote#slide=33)
//
// Styleguide Media.Embed
.embed {
height: 0;
@@ -46,6 +50,10 @@
// </div>
// </div>
//
// Demos:
// [Netflix](https://webslides.tv/demos/netflix-culture#slide=12)
// [Keynote](https://webslides.tv/demos/keynote#slide=33)
//
// Styleguide Media.Fullscreen.Embed
.fullscreen > & {
bottom: 0;