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

kss - Multipurpose blocks

Browse Source
This commit is contained in:
Luis Sacristán
2017-10-19 21:39:31 +02:00
parent dbafa9fb10
commit 4e3e49768f
22 changed files with 308 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
doc/styleguide/item-multipurpose-blocks-activity.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;43" title="CVs" target="_blank">CVs</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

11
doc/styleguide/item-multipurpose-blocks-clients.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/components#slide&#x3D;37" title="Clients" target="_blank">Clients</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;38" title="With border" target="_blank">With border</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

8
doc/styleguide/item-multipurpose-blocks-features.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;40" title="Features" target="_blank">Features</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

2
doc/styleguide/item-multipurpose-blocks-gallery-overlay.html
View File

@@ -169,7 +169,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-gallery.scss</code>, line 44
Source: <code>modules/_flexblock-gallery.scss</code>, line 47
</div>
</div>

8
doc/styleguide/item-multipurpose-blocks-gallery.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;44" title="Portfolio" target="_blank">Portfolio</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

8
doc/styleguide/item-multipurpose-blocks-metrics.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;47" title="Metrics" target="_blank">Metrics</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

8
doc/styleguide/item-multipurpose-blocks-plans.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;48" title="Plans" target="_blank">Plans</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

8
doc/styleguide/item-multipurpose-blocks-reasons.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/classes#slide&#x3D;55" title="Reasons" target="_blank">Reasons</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

84
doc/styleguide/item-multipurpose-blocks-specs.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/classes#slide&#x3D;37" title="Specs" target="_blank">Specs</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -100,25 +108,25 @@
<div class="kss-modifier__example">
<ul class="flexblock specs">
<li>
<div>
<h2>Ultra-Fast WiFi</h2>
Simple and secure file sharing.
</div>
</li>
<li>
<div>
<h2>All day battery life</h2>
Your battery worries may be over.
</div>
</li>
<li>
<div>
<h2>Lifetime Warranty </h2>
We'll fix it or if we can't, we'll replace it.
</div>
</li>
</ul>
<li>
<div>
<h2>Ultra-Fast WiFi</h2>
Simple and secure file sharing.
</div>
</li>
<li>
<div>
<h2>All day battery life</h2>
Your battery worries may be over.
</div>
</li>
<li>
<div>
<h2>Lifetime Warranty </h2>
We'll fix it or if we can't, we'll replace it.
</div>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -129,25 +137,25 @@
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock specs&quot;&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Ultra-Fast WiFi&lt;/h2&gt;
Simple and secure file sharing.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;All day battery life&lt;/h2&gt;
Your battery worries may be over.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Lifetime Warranty &lt;/h2&gt;
We&#x27;ll fix it or if we can&#x27;t, we&#x27;ll replace it.
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Ultra-Fast WiFi&lt;/h2&gt;
Simple and secure file sharing.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;All day battery life&lt;/h2&gt;
Your battery worries may be over.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Lifetime Warranty &lt;/h2&gt;
We&#x27;ll fix it or if we can&#x27;t, we&#x27;ll replace it.
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">

8
doc/styleguide/item-multipurpose-blocks-steps.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;39" title="Steps" target="_blank">Steps</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

14
doc/styleguide/item-multipurpose-blocks.html
View File

@@ -143,6 +143,20 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;27" title="Normal" target="_blank">Normal</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;34" title="Block link" target="_blank">Block link</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;29" title="Border" target="_blank">Border</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

167
doc/styleguide/section-multipurpose-blocks.html
View File

@@ -143,6 +143,20 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;27" title="Normal" target="_blank">Normal</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;34" title="Block link" target="_blank">Block link</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;29" title="Border" target="_blank">Border</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -292,6 +306,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;43" title="CVs" target="_blank">CVs</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -418,6 +440,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;37" title="Clients" target="_blank">Clients</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;38" title="With border" target="_blank">With border</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -542,6 +575,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;40" title="Features" target="_blank">Features</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -663,6 +704,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;44" title="Portfolio" target="_blank">Portfolio</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -851,7 +900,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>modules/_flexblock-gallery.scss</code>, line 44
Source: <code>modules/_flexblock-gallery.scss</code>, line 47
</div>
</div>
@@ -871,6 +920,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;47" title="Metrics" target="_blank">Metrics</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -974,6 +1031,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;48" title="Plans" target="_blank">Plans</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -1122,6 +1187,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;55" title="Reasons" target="_blank">Reasons</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -1182,6 +1255,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;37" title="Specs" target="_blank">Specs</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -1191,25 +1272,25 @@
<div class="kss-modifier__example">
<ul class="flexblock specs">
<li>
<div>
<h2>Ultra-Fast WiFi</h2>
Simple and secure file sharing.
</div>
</li>
<li>
<div>
<h2>All day battery life</h2>
Your battery worries may be over.
</div>
</li>
<li>
<div>
<h2>Lifetime Warranty </h2>
We'll fix it or if we can't, we'll replace it.
</div>
</li>
</ul>
<li>
<div>
<h2>Ultra-Fast WiFi</h2>
Simple and secure file sharing.
</div>
</li>
<li>
<div>
<h2>All day battery life</h2>
Your battery worries may be over.
</div>
</li>
<li>
<div>
<h2>Lifetime Warranty </h2>
We'll fix it or if we can't, we'll replace it.
</div>
</li>
</ul>
<div class="kss-modifier__example-footer"></div>
</div>
@@ -1220,25 +1301,25 @@
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock specs&quot;&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Ultra-Fast WiFi&lt;/h2&gt;
Simple and secure file sharing.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;All day battery life&lt;/h2&gt;
Your battery worries may be over.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Lifetime Warranty &lt;/h2&gt;
We&#x27;ll fix it or if we can&#x27;t, we&#x27;ll replace it.
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Ultra-Fast WiFi&lt;/h2&gt;
Simple and secure file sharing.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;All day battery life&lt;/h2&gt;
Your battery worries may be over.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div&gt;
&lt;h2&gt;Lifetime Warranty &lt;/h2&gt;
We&#x27;ll fix it or if we can&#x27;t, we&#x27;ll replace it.
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="kss-source kss-style">
@@ -1262,6 +1343,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;39" title="Steps" target="_blank">Steps</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

3
src/scss/modules/_flexblock-activity.scss
View File

@@ -47,6 +47,9 @@
// </li>
// </ul>
//
// Demos:
// [CVs](https://webslides.tv/demos/components#slide=43)
//
// Styleguide Multipurpose blocks.Activity
.flexblock.activity {
flex-direction: column;

4
src/scss/modules/_flexblock-clients.scss
View File

@@ -28,6 +28,10 @@
// </li>
// </ul>
//
// Demos:
// [Clients](https://webslides.tv/demos/components#slide=37)
// [With border](https://webslides.tv/demos/components#slide=38)
//
// .border - with border
//
// Styleguide Multipurpose blocks.Clients

3
src/scss/modules/_flexblock-features.scss
View File

@@ -27,6 +27,9 @@
// </li>
// </ul>
//
// Demos:
// [Features](https://webslides.tv/demos/components#slide=40)
//
// .border - with border
//
// Styleguide Multipurpose blocks.Features

3
src/scss/modules/_flexblock-gallery.scss
View File

@@ -39,6 +39,9 @@
// </li>
// </ul>
//
// Demos:
// [Portfolio](https://webslides.tv/demos/components#slide=44)
//
// Styleguide Multipurpose blocks.Gallery
// Gallery + Overflow

3
src/scss/modules/_flexblock-metrics.scss
View File

@@ -21,6 +21,9 @@
// </li>
// </ul>
//
// Demos:
// [Metrics](https://webslides.tv/demos/components#slide=47)
//
// .border - with border
//
// Styleguide Multipurpose blocks.Metrics

3
src/scss/modules/_flexblock-plans.scss
View File

@@ -36,6 +36,9 @@
// </li>
// </ul>
//
// Demos:
// [Plans](https://webslides.tv/demos/components#slide=48)
//
// .blink - block linkable
//
// Styleguide Multipurpose blocks.Plans

3
src/scss/modules/_flexblock-reasons.scss
View File

@@ -14,6 +14,9 @@
// </li>
// </ul>
//
// Demos:
// [Reasons](https://webslides.tv/demos/classes#slide=55)
//
// Styleguide Multipurpose blocks.Reasons
.flexblock.reasons {
li {

41
src/scss/modules/_flexblock-specs.scss
View File

@@ -4,25 +4,28 @@
//
// Markup:
// <ul class="flexblock specs">
// <li>
// <div>
// <h2>Ultra-Fast WiFi</h2>
// Simple and secure file sharing.
// </div>
// </li>
// <li>
// <div>
// <h2>All day battery life</h2>
// Your battery worries may be over.
// </div>
// </li>
// <li>
// <div>
// <h2>Lifetime Warranty </h2>
// We'll fix it or if we can't, we'll replace it.
// </div>
// </li>
// </ul>
// <li>
// <div>
// <h2>Ultra-Fast WiFi</h2>
// Simple and secure file sharing.
// </div>
// </li>
// <li>
// <div>
// <h2>All day battery life</h2>
// Your battery worries may be over.
// </div>
// </li>
// <li>
// <div>
// <h2>Lifetime Warranty </h2>
// We'll fix it or if we can't, we'll replace it.
// </div>
// </li>
// </ul>
//
// Demos:
// [Specs](https://webslides.tv/demos/classes#slide=37)
//
// Styleguide Multipurpose blocks.Specs

3
src/scss/modules/_flexblock-steps.scss
View File

@@ -30,6 +30,9 @@
// </li>
// </ul>
//
// Demos:
// [Steps](https://webslides.tv/demos/components#slide=39)
//
// Styleguide Multipurpose blocks.Steps
.steps li {
width: 100%;

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

@@ -26,6 +26,11 @@
// </li>
// </ul>
//
// Demos:
// [Normal](https://webslides.tv/demos/components#slide=27)
// [Block link](https://webslides.tv/demos/components#slide=34)
// [Border](https://webslides.tv/demos/components#slide=29)
//
// .blink - Linkable block
// .border - With border
//