tentakelfabrik
/
crispy-css
1
0
Fork 0
Code Issues 1 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

adding new logic for errors and validation

master
HerrHase 6 years ago
parent
c8476ecd3d
commit
82529b9f04
16 changed files with 239 additions and 91 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      dest/css/styles.css
  2. +100
    -49
      dest/index.html
  3. +1
    -1
      dest/js/app.js
  4. +17
    -9
      src/js/_scrollThenFix.js
  5. +1
    -1
      src/js/index.js
  6. +1
    -5
      src/scss/_base.scss
  7. +15
    -0
      src/scss/components/field/_checkbox.scss
  8. +32
    -0
      src/scss/components/field/_label.scss
  9. +8
    -4
      src/scss/components/field/_panel.scss
  10. +15
    -0
      src/scss/components/field/_radio.scss
  11. +11
    -7
      src/scss/components/field/_select.scss
  12. +10
    -7
      src/scss/components/field/_text.scss
  13. +2
    -1
      src/scss/components/field/field.scss
  14. +1
    -0
      src/scss/example.scss
  15. +8
    -5
      src/scss/example/components/_nav.scss
  16. +16
    -1
      src/scss/example/site/_header.scss

+ 1
- 1
dest/css/styles.css
File diff suppressed because it is too large
View File


+ 100
- 49
dest/index.html View File

@ -30,22 +30,28 @@
</div> </div>
<div class="grid"> <div class="grid">
<div class="col-sm-4"> <div class="col-sm-4">
<h2 class="header__feature-title">Less is more</h2>
<p class="header__feature-text">
Simple basic Components to extends in your own art
</p>
<div class="header__feature">
<h2 class="header__feature-title">Less is more</h2>
<p class="header__feature-text">
Simple basic Components to extends in your own art
</p>
</div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<h2 class="header__feature-title">Structure</h2>
<p class="header__feature-text">
Crispy gives you a Structure to orientate
</p>
<div class="header__feature">
<h2 class="header__feature-title">Structure</h2>
<p class="header__feature-text">
Crispy gives you a Structure to orientate
</p>
</div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<h2 class="header__feature-title">Helper</h2>
<p class="header__feature-text">
Use helper to save up time and coding less
</p>
<div class="header__feature header__feature--last">
<h2 class="header__feature-title">Helper</h2>
<p class="header__feature-text">
Use helper to save up time and coding less
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -109,13 +115,16 @@
<p> <p>
This Site is also a Example to use the Boilerplate. You can find all This Site is also a Example to use the Boilerplate. You can find all
Styles for this site in "/src/scss/example". You see also that there Styles for this site in "/src/scss/example". You see also that there
is a "templates" Directory. The Idea in <strong>BEM</strong> was always
is a <strong>"templates" Directory</strong>. The Idea in <strong>BEM</strong> was always
create all in Components. That is not always Practical. create all in Components. That is not always Practical.
</p> </p>
<p> <p>
Sometimes, the more Bigger Picture, on a Single Site or in App the Sometimes, the more Bigger Picture, on a Single Site or in App the
Stylings that are so special that the belong only there, and are to big
for a templates. For this use the "templates" Directory.
Stylings that are so special that the belong only there and are to complex
for a component. For this use the <strong>"templates" Directory</strong>.
</p>
<p>
Sites also have partials like header and footer, they can put into the <strong>directory "site"</strong>.
</p> </p>
<!-- how to use --> <!-- how to use -->
@ -131,8 +140,18 @@
Typography Typography
</h2> </h2>
<!-- abbr -->
<h3 class="h4 margin-top-2x margin-bottom-0x">a</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;a href=&quot;&quot;&gt;&lt;/a&gt;</code></pre>
<p>
a-tag color is set by <strong>$crispy__color-primary</strong>. :hover is set by
<strong>$crispy__color-text</strong>
</p>
<!-- abbr --> <!-- abbr -->
<h3 class="h4 margin-top-2x margin-bottom-0x">Abbr</h3>
<h3 class="h4 margin-top-2x margin-bottom-0x">abbr</h3>
<h4 class="h6">Html:</h4> <h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;abbr title=&quot;&quot;&gt;&lt;/abbr&gt;</code></pre> <pre class="code"><code>&lt;abbr title=&quot;&quot;&gt;&lt;/abbr&gt;</code></pre>
<p> <p>
@ -140,23 +159,39 @@
</p> </p>
<!-- blockquote --> <!-- blockquote -->
<h3 class="h4 margin-top-2x margin-bottom-0x">Blockquote</h3>
<h3 class="h4 margin-top-2x margin-bottom-0x">blockquote</h3>
<h4 class="h6">Html:</h4> <h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;blockquote&gt;&lt;/blockquote&gt;</code></pre> <pre class="code"><code>&lt;blockquote&gt;&lt;/blockquote&gt;</code></pre>
<blockquote> <blockquote>
Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag. Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.
</blockquote> </blockquote>
<!-- hr -->
<h3 class="h4 margin-top-2x margin-bottom-0x">hr</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;hr&gt;</code></pre>
<p>
<hr>
</p>
<!-- paragraph --> <!-- paragraph -->
<h3 class="h4 margin-top-2x margin-bottom-0x">Paragraph</h3>
<h3 class="h4 margin-top-2x margin-bottom-0x">paragraph</h3>
<h4 class="h6">Html:</h4> <h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;p&gt;&lt;/p&gt;</code></pre> <pre class="code"><code>&lt;p&gt;&lt;/p&gt;</code></pre>
<p> <p>
Glossier viral occupy mixtape pok pok. Glossier viral occupy mixtape pok pok.
</p> </p>
<!-- mark -->
<h3 class="h4 margin-top-2x margin-bottom-0x">mark</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;mark&gt;&lt;/mark&gt;</code></pre>
<p>
Pug before they <mark>four loko</mark> Deep v bespoke
</p>
<!-- list --> <!-- list -->
<h3 class="h4 margin-top-2x margin-bottom-0x">List</h3>
<h3 class="h4 margin-top-2x margin-bottom-0x">list</h3>
<h4 class="h6">Html:</h4> <h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;ul&gt; <pre class="code"><code>&lt;ul&gt;
&lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 1&lt;/li&gt;
@ -202,7 +237,7 @@
<!-- components / button --> <!-- components / button -->
<h3 class="h4 margin-top-2x margin-bottom-0x"> <h3 class="h4 margin-top-2x margin-bottom-0x">
Button
button
</h3> </h3>
<h4 class="h6">Html:</h4> <h4 class="h6">Html:</h4>
<pre class="code margin-top-1x"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt; <pre class="code margin-top-1x"><code>&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;
@ -210,9 +245,16 @@
<button class="button">Default</button> <button class="button">Default</button>
<button class="button button--wide margin-top-1x">Info</button> <button class="button button--wide margin-top-1x">Info</button>
<!-- components / code -->
<h3 class="h4 margin-top-2x margin-bottom-0x">
code
</h3>
<h4 class="h6">Html:</h4>
<pre class="code margin-top-1x"><code>&lt;pre class=&quot;code&quot;&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code></pre>
<!-- components / group --> <!-- components / group -->
<h3 class="h4 margin-top-2x margin-bottom-0x"> <h3 class="h4 margin-top-2x margin-bottom-0x">
Group
group
</h3> </h3>
<h4 class="h6">Html:</h4> <h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;nav class=&quot;group&quot;&gt; <pre class="code"><code>&lt;nav class=&quot;group&quot;&gt;
@ -249,7 +291,7 @@
<!-- components / heading --> <!-- components / heading -->
<h3 class="h4 margin-top-2x margin-bottom-0x"> <h3 class="h4 margin-top-2x margin-bottom-0x">
Heading
heading
</h3> </h3>
<h4 class="h6">Html:</h4> <h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;h2&gt;&lt;/h2&gt; <pre class="code"><code>&lt;h2&gt;&lt;/h2&gt;
@ -273,7 +315,7 @@
<!-- components / hero --> <!-- components / hero -->
<h3 class="h4 margin-top-2x margin-bottom-0x"> <h3 class="h4 margin-top-2x margin-bottom-0x">
Hero
hero
</h3> </h3>
<h4 class="h6">Html:</h4> <h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;div class=&quot;hero hero--bottom&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre> <pre class="code"><code>&lt;div class=&quot;hero hero--bottom&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre>
@ -281,7 +323,7 @@
<!-- components / icon --> <!-- components / icon -->
<h3 class="h4 margin-top-2x margin-bottom-0x"> <h3 class="h4 margin-top-2x margin-bottom-0x">
Icon
icon
</h3> </h3>
<h4 class="h6">Html:</h4> <h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;svg class=&quot;icon icon--small&quot; alt=&quot;beaker&quot; viewBox=&quot;0 0 100 100&quot;&gt; <pre class="code"><code>&lt;svg class=&quot;icon icon--small&quot; alt=&quot;beaker&quot; viewBox=&quot;0 0 100 100&quot;&gt;
@ -312,7 +354,7 @@
<!-- components / modal --> <!-- components / modal -->
<h3 class="h4 margin-top-2x margin-bottom-0x"> <h3 class="h4 margin-top-2x margin-bottom-0x">
Modal
modal
</h3> </h3>
<h4 class="h6">Html:</h4> <h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;div class=&quot;modal modal--bottom width-100&quot;&gt; <pre class="code"><code>&lt;div class=&quot;modal modal--bottom width-100&quot;&gt;
@ -334,7 +376,7 @@
<!-- components / panel --> <!-- components / panel -->
<h3 class="h4 margin-top-2x margin-bottom-0x"> <h3 class="h4 margin-top-2x margin-bottom-0x">
Panel
panel
</h3> </h3>
<h4 class="h6">Html:</h4> <h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;div class=&quot;panel&quot;&gt; <pre class="code"><code>&lt;div class=&quot;panel&quot;&gt;
@ -349,10 +391,10 @@
</div> </div>
<!-- components / table --> <!-- components / table -->
<h3 id="table" class="h4 margin-top-2x margin-bottom-0x">
Table
<h3 class="h4 margin-top-2x margin-bottom-0x">
table
</h3> </h3>
<h4 class="h6 margin-top-1x">Html:</h4>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;table class=&quot;table table--striped&quot;&gt; <pre class="code"><code>&lt;table class=&quot;table table--striped&quot;&gt;
&lt;thead&gt; &lt;thead&gt;
&lt;tr&gt; &lt;tr&gt;
@ -405,7 +447,7 @@
checkbox 1 checkbox 1
</label> </label>
</div> </div>
<div class="field">
<div class="field field--error">
<input id="field__checkbox__2" class="field__checkbox" type="checkbox" name="field__checkbox__2" value="true" /> <input id="field__checkbox__2" class="field__checkbox" type="checkbox" name="field__checkbox__2" value="true" />
<label for="field__checkbox__2" class="field__label"> <label for="field__checkbox__2" class="field__label">
<svg class="icon field__checkbox__unchecked" alt="beaker" viewBox="0 0 100 100"> <svg class="icon field__checkbox__unchecked" alt="beaker" viewBox="0 0 100 100">
@ -416,7 +458,7 @@
</svg> </svg>
checkbox 1 checkbox 1
</label> </label>
<div class="field__panel field__panel--error">
<div class="field__panel">
error item 1 error item 1
</div> </div>
</div> </div>
@ -449,9 +491,9 @@
</div> </div>
<!-- radio / error --> <!-- radio / error -->
<div class="field">
<div class="field field--error">
<input id="field__radio__3" class="field__radio" type="radio" name="field__radio__2[]" value="true" /> <input id="field__radio__3" class="field__radio" type="radio" name="field__radio__2[]" value="true" />
<label for="field__radio__3" class="field__label field__label--error">
<label for="field__radio__3" class="field__label">
<svg class="icon field__radio__unchecked" alt="beaker" viewBox="0 0 100 100"> <svg class="icon field__radio__unchecked" alt="beaker" viewBox="0 0 100 100">
<use xlink:href="/svg/icons.svg#x" /> <use xlink:href="/svg/icons.svg#x" />
</svg> </svg>
@ -461,7 +503,7 @@
radio item 1 radio item 1
</label><br /> </label><br />
<input id="field__radio__4" class="field__radio" type="radio" name="field__radio__2[]" value="true" /> <input id="field__radio__4" class="field__radio" type="radio" name="field__radio__2[]" value="true" />
<label for="field__radio__4" class="field__label field__label--error">
<label for="field__radio__4" class="field__label">
<svg class="icon field__radio__unchecked" alt="beaker" viewBox="0 0 100 100"> <svg class="icon field__radio__unchecked" alt="beaker" viewBox="0 0 100 100">
<use xlink:href="/svg/icons.svg#x" /> <use xlink:href="/svg/icons.svg#x" />
</svg> </svg>
@ -470,7 +512,7 @@
</svg> </svg>
radio item 2 radio item 2
</label> </label>
<div class="field__panel field__panel--error">
<div class="field__panel">
error item 1 error item 1
</div> </div>
</div> </div>
@ -489,15 +531,15 @@
</select> </select>
</label> </label>
</div> </div>
<div class="field">
<div class="field field--error">
<label class="field__label"> <label class="field__label">
Select Item Select Item
<select class="field__select field__select--error">
<select class="field__select">
<option>select item 1</option> <option>select item 1</option>
<option>select item 2</option> <option>select item 2</option>
<option>select item 3</option> <option>select item 3</option>
</select> </select>
<div class="field__panel field__panel--error">
<div class="field__panel">
error item 1 error item 1
</div> </div>
</label> </label>
@ -510,27 +552,36 @@
<div class="field"> <div class="field">
<input class="field__text" type="text" /> <input class="field__text" type="text" />
</div> </div>
<div class="field">
<label class="field__label field__label--error">
<div class="field field--valid">
<label class="field__label">
Text Text
<input type="text" class="field__text field__text--valid" />
<input type="text" class="field__text" />
</label> </label>
<div class="field__panel field__panel--valid">
<div class="field__panel">
error item 1 error item 1
</div> </div>
</div> </div>
<div class="field">
<input type="text" class="field__text field__text--error" />
<div class="field__panel field__panel--error">
<div class="field field--error">
<label class="field__label">
Text
<input type="text" class="field__text" />
</label>
<div class="field__panel">
error item 1 error item 1
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<textarea class="field__text"></textarea>
<label class="field__label">
Textarea
<textarea class="field__text"></textarea>
</label>
</div> </div>
<div class="field">
<textarea class="field__text"></textarea>
<div class="field__panel field__panel--error">
<div class="field field--error">
<label class="field__label">
Textarea
<textarea class="field__text"></textarea>
</label>
<div class="field__panel">
error item 1 error item 1
</div> </div>
</div> </div>


+ 1
- 1
dest/js/app.js
File diff suppressed because it is too large
View File


+ 17
- 9
src/js/_scrollThenFix.js View File

@ -10,22 +10,30 @@ import $ from 'cash-dom';
* @param string destinationSelector * @param string destinationSelector
*/ */
export default function scrollThenFix(sourceSelector, destinationSelector, addClass, offset) {
export default function scrollThenFix(sourceSelector, destinationSelector, addClass) {
let destination = $(destinationSelector); let destination = $(destinationSelector);
let source = $(sourceSelector); let source = $(sourceSelector);
let pageY = document.documentElement.scrollTop;
if (offset === undefined) {
offset = 0;
}
// adding fixed position
destination.css('top', (source.outerHeight() + offset) + 'px');
// set position
scrollTo(pageY);
// adding event for scrolling
window.addEventListener('scroll', function(event) { window.addEventListener('scroll', function(event) {
if (event.pageY > source.outerHeight()) {
scrollTo(event.pageY);
});
/**
* scroll to if source Height is smaller then pageY
*
* @param integer pageY
*/
function scrollTo(pageY)
{
if (pageY > source.outerHeight()) {
destination.addClass(addClass); destination.addClass(addClass);
} else { } else {
destination.removeClass(addClass); destination.removeClass(addClass);
} }
});
}
} }

+ 1
- 1
src/js/index.js View File

@ -2,4 +2,4 @@
import scrollThenFix from './_scrollThenFix.js'; import scrollThenFix from './_scrollThenFix.js';
scrollThenFix('.header', '.nav', 'nav--fixed', 48);
scrollThenFix('.header', '.nav', 'nav--fixed');

+ 1
- 5
src/scss/_base.scss View File

@ -61,12 +61,8 @@ abbr[title] {
text-decoration: none; text-decoration: none;
} }
kbd {
// @TODO do something
}
mark { mark {
padding: toEm(10px);
padding: toEm(5px);
} }
// blockquote // blockquote


+ 15
- 0
src/scss/components/field/_checkbox.scss View File

@ -21,6 +21,9 @@ $crispy__field__checkbox__disabled__color: $crispy__color-secondary !default;
$crispy__field__checkbox__checked__color: $crispy__color-success !default; $crispy__field__checkbox__checked__color: $crispy__color-success !default;
$crispy__field__checkbox__unchecked__color: $crispy__color-text !default; $crispy__field__checkbox__unchecked__color: $crispy__color-text !default;
$crispy__field__checkbox__color--valid: $crispy__color-success !default;
$crispy__field__checkbox__color--error: $crispy__color-danger !default;
@mixin crispy__field__checkbox() { @mixin crispy__field__checkbox() {
.field__checkbox { .field__checkbox {
position: relative; position: relative;
@ -52,4 +55,16 @@ $crispy__field__checkbox__unchecked__color: $crispy__color-text !default;
fill: $crispy__field__checkbox__unchecked__color; fill: $crispy__field__checkbox__unchecked__color;
} }
} }
.field--valid {
.field__checkbox__checked, .field__checkbox__unchecked {
fill: $crispy__field__checkbox__color--valid;
}
}
.field--error {
.field__checkbox__checked, .field__checkbox__unchecked {
fill: $crispy__field__checkbox__color--error;
}
}
} }

+ 32
- 0
src/scss/components/field/_label.scss View File

@ -0,0 +1,32 @@
/**
* component: label
*
* <label class="field">
*
* </label>
*
* @author Björn Hase
*
*/
$crispy__field__label__color--valid: $crispy__color-success !default;
$crispy__field__label__color--error: $crispy__color-danger !default;
@mixin crispy__field__label() {
.field__label {
display: inline-block;
width: 100%;
}
.field--valid {
.field__label {
color: $crispy__field__label__color--valid;
}
}
.field--error {
.field__label {
color: $crispy__field__label__color--error;
}
}
}

+ 8
- 4
src/scss/components/field/_panel.scss View File

@ -21,15 +21,19 @@ $crispy__field__panel__background-color--error: $crispy__color-danger !default;
@mixin crispy__field__panel() { @mixin crispy__field__panel() {
.field__panel { .field__panel {
padding: $crispy__field__panel__padding; padding: $crispy__field__panel__padding;
}
&--error {
.field--valid {
.field__panel {
color: white; color: white;
background-color: $crispy__field__panel__background-color--error;
background-color: $crispy__field__panel__background-color--valid;
} }
}
&--valid {
.field--error {
.field__panel {
color: white; color: white;
background-color: $crispy__field__panel__background-color--valid;
background-color: $crispy__field__panel__background-color--error;
} }
} }
} }

+ 15
- 0
src/scss/components/field/_radio.scss View File

@ -21,6 +21,9 @@ $crispy__field__radio__disabled__color: $crispy__color-secondary !default;
$crispy__field__radio__checked__color: $crispy__color-success !default; $crispy__field__radio__checked__color: $crispy__color-success !default;
$crispy__field__radio__unchecked__color: $crispy__color-text !default; $crispy__field__radio__unchecked__color: $crispy__color-text !default;
$crispy__field__radio__color--valid: $crispy__color-success !default;
$crispy__field__radio__color--error: $crispy__color-danger !default;
@mixin crispy__field__radio() { @mixin crispy__field__radio() {
.field__radio { .field__radio {
position: relative; position: relative;
@ -52,4 +55,16 @@ $crispy__field__radio__unchecked__color: $crispy__color-text !default;
fill: $crispy__field__radio__unchecked__color; fill: $crispy__field__radio__unchecked__color;
} }
} }
.field--valid {
.field__radio__checked, .field__radio__unchecked {
fill: $crispy__field__radio__color--valid;
}
}
.field--error {
.field__radio__checked, .field__radio__unchecked {
fill: $crispy__field__radio__color--error;
}
}
} }

+ 11
- 7
src/scss/components/field/_select.scss View File

@ -30,18 +30,22 @@ $crispy__field__select__border-color--error: $crispy__color-danger !default;
padding: $crispy__field__select__padding; padding: $crispy__field__select__padding;
border: $crispy__field__select__border; border: $crispy__field__select__border;
background-color: $crispy__field__select__background-color; background-color: $crispy__field__select__background-color;
&:focus {
outline: 0;
border-color: $crispy__field__select__border-color--focus;
}
}
&--valid {
.field--valid {
.field__select {
border-color: $crispy__field__select__border-color--valid; border-color: $crispy__field__select__border-color--valid;
} }
}
&--error {
.field--error {
.field__select {
border-color: $crispy__field__select__border-color--error; border-color: $crispy__field__select__border-color--error;
} }
&:focus {
outline: 0;
border-color: $crispy__field__select__border-color--focus;
}
} }
} }

+ 10
- 7
src/scss/components/field/_text.scss View File

@ -21,19 +21,22 @@ $crispy__field__text__border-color--error: $crispy__color-danger !default;
@mixin crispy__field__text() { @mixin crispy__field__text() {
.field__text { .field__text {
@extend .field__input; @extend .field__input;
border: $crispy__field__text__border; border: $crispy__field__text__border;
&--valid {
border-color: $crispy__field__text__border-color--valid;
&:focus {
border-color: $crispy__field__text__border-color--focus;
} }
}
&--error {
border-color: $crispy__field__text__border-color--error;
.field--valid {
.field__text {
border-color: $crispy__field__text__border-color--valid;
} }
}
&:focus {
border-color: $crispy__field__text__border-color--focus;
.field--error {
.field__text {
border-color: $crispy__field__text__border-color--error;
} }
} }
} }

+ 2
- 1
src/scss/components/field/field.scss View File

@ -1,7 +1,8 @@
@import @import
'checkbox',
'label',
'panel', 'panel',
'text', 'text',
'checkbox',
'radio', 'radio',
'select'; 'select';


+ 1
- 0
src/scss/example.scss View File

@ -19,6 +19,7 @@
@include crispy__field__radio(); @include crispy__field__radio();
@include crispy__field__select(); @include crispy__field__select();
@include crispy__field__panel(); @include crispy__field__panel();
@include crispy__field__label();
// helpers // helpers
@include crispy__float(); @include crispy__float();


+ 8
- 5
src/scss/example/components/_nav.scss View File

@ -3,7 +3,7 @@
* *
* *
* @author Björn Hase * @author Björn Hase
*
*
*/ */
@mixin example__nav() @mixin example__nav()
@ -12,18 +12,21 @@
position: relative; position: relative;
a { a {
font-style: italic;
@include crispy__font-size(18px); @include crispy__font-size(18px);
} }
ul {
margin-left: 0;
}
@include crispy__media-sm() { @include crispy__media-sm() {
position: fixed;
transition: top 0.3s;
position: absolute;
} }
&--fixed { &--fixed {
@include crispy__media-sm() { @include crispy__media-sm() {
top: 50px !important;
position: fixed;
top: 40px !important;
} }
} }
} }


+ 16
- 1
src/scss/example/site/_header.scss View File

@ -27,6 +27,21 @@
width: 50px; width: 50px;
} }
&__feature {
padding: toEm(15px 10px);
border: 1px solid #929292;
background-color: #fff;
border-radius: 5px;
&--last {
margin: toEm(0 0 30px);
}
@include crispy__media-sm() {
margin: toEm(0 0 30px);
}
}
&__feature-text, &__feature-title { &__feature-text, &__feature-title {
text-align: center; text-align: center;
padding: toEm(0 20px); padding: toEm(0 20px);
@ -37,7 +52,7 @@
} }
&__feature-text { &__feature-text {
margin: toEm(0 0 30px);
margin: 0;
@include crispy__font-size(18px); @include crispy__font-size(18px);
} }
} }


Write Preview
Loading…
Cancel
Save