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

adding styles

master
HerrHase 6 years ago
parent
59772a6542
commit
c8476ecd3d
3 changed files with 119 additions and 52 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      dest/css/styles.css
  2. +110
    -49
      dest/index.html
  3. +8
    -2
      src/scss/components/field/_panel.scss

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


+ 110
- 49
dest/index.html View File

@ -65,7 +65,6 @@
<li><a href="#get-started">Get Started</a></li> <li><a href="#get-started">Get Started</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
<li><a href="#components">Components</a></li> <li><a href="#components">Components</a></li>
<li><a href="#form">Form</a></li>
<li><a href="#functions">Functions</a></li> <li><a href="#functions">Functions</a></li>
<li><a href="#helpers">Helpers</a></li> <li><a href="#helpers">Helpers</a></li>
<li><a href="#mixins">Mixins</a></li> <li><a href="#mixins">Mixins</a></li>
@ -390,35 +389,7 @@
</tbody> </tbody>
</table> </table>
<!-- field -->
<hr class="margin-top-3x">
<h2 id="functions" class="margin-top-1x">
Fields
</h2>
<!-- field / input -->
<h3 class="h4 margin-top-0x margin-bottom-0x">
Input
</h3>
<div class="field">
<input class="field__text" type="text" />
</div>
<div class="field">
<input type="text" class="field__text field__text--error" />
<div class="field__panel field__panel--error">
error item 1
</div>
</div>
<!-- field / textarea -->
<h3 class="h4 margin-top-0x margin-bottom-0x">
Textarea
</h3>
<div class="field">
<textarea class="field__text"></textarea>
</div>
<!-- field / checkbox -->
<!-- components / field / checkbox -->
<h3 class="h4 margin-top-0x margin-bottom-0x"> <h3 class="h4 margin-top-0x margin-bottom-0x">
Checkbox Checkbox
</h3> </h3>
@ -434,8 +405,23 @@
checkbox 1 checkbox 1
</label> </label>
</div> </div>
<div class="field">
<input id="field__checkbox__2" class="field__checkbox" type="checkbox" name="field__checkbox__2" value="true" />
<label for="field__checkbox__2" class="field__label">
<svg class="icon field__checkbox__unchecked" alt="beaker" viewBox="0 0 100 100">
<use xlink:href="/svg/icons.svg#x" />
</svg>
<svg class="icon field__checkbox__checked" alt="beaker" viewBox="0 0 100 100">
<use xlink:href="/svg/icons.svg#check" />
</svg>
checkbox 1
</label>
<div class="field__panel field__panel--error">
error item 1
</div>
</div>
<!-- field / radio -->
<!-- components / field / radio -->
<h3 class="h4 margin-top-0x margin-bottom-0x"> <h3 class="h4 margin-top-0x margin-bottom-0x">
Radio Radio
</h3> </h3>
@ -462,7 +448,34 @@
</label> </label>
</div> </div>
<!-- field / radio -->
<!-- radio / error -->
<div class="field">
<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">
<svg class="icon field__radio__unchecked" alt="beaker" viewBox="0 0 100 100">
<use xlink:href="/svg/icons.svg#x" />
</svg>
<svg class="icon field__radio__checked" alt="beaker" viewBox="0 0 100 100">
<use xlink:href="/svg/icons.svg#check" />
</svg>
radio item 1
</label><br />
<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">
<svg class="icon field__radio__unchecked" alt="beaker" viewBox="0 0 100 100">
<use xlink:href="/svg/icons.svg#x" />
</svg>
<svg class="icon field__radio__checked" alt="beaker" viewBox="0 0 100 100">
<use xlink:href="/svg/icons.svg#check" />
</svg>
radio item 2
</label>
<div class="field__panel field__panel--error">
error item 1
</div>
</div>
<!-- components / field / select -->
<h3 class="h4 margin-top-0x margin-bottom-0x"> <h3 class="h4 margin-top-0x margin-bottom-0x">
Select Select
</h3> </h3>
@ -476,6 +489,51 @@
</select> </select>
</label> </label>
</div> </div>
<div class="field">
<label class="field__label">
Select Item
<select class="field__select field__select--error">
<option>select item 1</option>
<option>select item 2</option>
<option>select item 3</option>
</select>
<div class="field__panel field__panel--error">
error item 1
</div>
</label>
</div>
<!-- components / field / input textarea -->
<h3 class="h4 margin-top-0x margin-bottom-0x">
Input / Textarea
</h3>
<div class="field">
<input class="field__text" type="text" />
</div>
<div class="field">
<label class="field__label field__label--error">
Text
<input type="text" class="field__text field__text--valid" />
</label>
<div class="field__panel field__panel--valid">
error item 1
</div>
</div>
<div class="field">
<input type="text" class="field__text field__text--error" />
<div class="field__panel field__panel--error">
error item 1
</div>
</div>
<div class="field">
<textarea class="field__text"></textarea>
</div>
<div class="field">
<textarea class="field__text"></textarea>
<div class="field__panel field__panel--error">
error item 1
</div>
</div>
<!-- functions --> <!-- functions -->
<hr class="margin-top-3x"> <hr class="margin-top-3x">
@ -501,7 +559,6 @@ toRem(10px 10px 0 0);
<h3 class="h4 margin-top-0x margin-bottom-0x"> <h3 class="h4 margin-top-0x margin-bottom-0x">
stripUnit() stripUnit()
</h3> </h3>
<span class="background-warning">/functions</span>
<h4 class="h6 margin-top-1x">Sass:</h4> <h4 class="h6 margin-top-1x">Sass:</h4>
<pre class="code"><code>toEm(10px);</code></pre> <pre class="code"><code>toEm(10px);</code></pre>
<p> <p>
@ -538,11 +595,15 @@ toRem(10px 10px 0 0);
<pre class="code">&lt;div class=&quot;panel margin-bottom-0x&quot;&gt;margin-bottom-0x&lt;/div&gt; <pre class="code">&lt;div class=&quot;panel margin-bottom-0x&quot;&gt;margin-bottom-0x&lt;/div&gt;
&lt;div class=&quot;margin-bottom-1x&quot;&gt;margin-bottom-1x&lt;/div&gt; &lt;div class=&quot;margin-bottom-1x&quot;&gt;margin-bottom-1x&lt;/div&gt;
&lt;div class=&quot;margin-bottom-2x&quot;&gt;margin-bottom-2x&lt;/div&gt; &lt;div class=&quot;margin-bottom-2x&quot;&gt;margin-bottom-2x&lt;/div&gt;
&lt;div class=&quot;margin-bottom-3x&quot;&gt;margin-bottom-3x&lt;/div&gt;</code></pre>
&lt;div class=&quot;margin-bottom-3x&quot;&gt;margin-bottom-3x&lt;/div&gt;
&lt;div class=&quot;margin-bottom-4x&quot;&gt;margin-bottom-4x&lt;/div&gt;
&lt;div class=&quot;margin-bottom-5x&quot;&gt;margin-bottom-5x&lt;/div&gt;</code></pre>
<div class="panel panel__inner margin-bottom-0x">margin-bottom-0x</div> <div class="panel panel__inner margin-bottom-0x">margin-bottom-0x</div>
<div class="panel panel__inner margin-bottom-1x">margin-bottom-1x</div> <div class="panel panel__inner margin-bottom-1x">margin-bottom-1x</div>
<div class="panel panel__inner margin-bottom-2x">margin-bottom-2x</div> <div class="panel panel__inner margin-bottom-2x">margin-bottom-2x</div>
<div class="panel panel__inner margin-bottom-3x">margin-bottom-3x</div> <div class="panel panel__inner margin-bottom-3x">margin-bottom-3x</div>
<div class="panel panel__inner margin-bottom-4x">margin-bottom-4x</div>
<div class="panel panel__inner margin-bottom-5x">margin-bottom-5x</div>
<!-- helpers / media --> <!-- helpers / media -->
<h3 class="h4 margin-top-1x"> <h3 class="h4 margin-top-1x">
@ -575,19 +636,6 @@ toRem(10px 10px 0 0);
</div> </div>
</div> </div>
<!-- helpers / media -->
<h3 class="h4 margin-top-1x">
Width
</h3>
<pre class="code"><code>&lt;div class=&quot;panel width-25&quot;&gt;width-25&lt;/div&gt;
&lt;div class=&quot;width-50&quot;&gt;width-50&lt;/div&gt;
&lt;div class=&quot;width-75&quot;&gt;width-75&lt;/div&gt;
&lt;div class=&quot;width-100&quot;&gt;width-100&lt;/div&gt;</code></pre>
<div class="panel panel__inner width-25 margin-bottom-1x">width-25</div>
<div class="panel panel__inner width-50 margin-bottom-1x">width-50</div>
<div class="panel panel__inner width-75 margin-bottom-1x">width-75</div>
<div class="panel panel__inner width-100 margin-bottom-1x">width-100</div>
<!-- helpers / text --> <!-- helpers / text -->
<h3 class="h4 margin-top-1x"> <h3 class="h4 margin-top-1x">
Text Text
@ -605,14 +653,27 @@ toRem(10px 10px 0 0);
&lt;div class=&quot;text-crossed&quot;&gt;&lt;/div&gt;</code></pre> &lt;div class=&quot;text-crossed&quot;&gt;&lt;/div&gt;</code></pre>
<p> <p>
Also it will be create classes $crispy__font-sizes
Also it will be create classes for,
</p> </p>
<ul> <ul>
<li>text-* with $crispy__font-sizes for "font-size"</li> <li>text-* with $crispy__font-sizes for "font-size"</li>
<li>text-* with $crispy__colors for "color"</li> <li>text-* with $crispy__colors for "color"</li>
<li>background- with $crispy__font-sizes for "background-color"</li>
<li>background-* with $crispy__font-sizes for "background-color"</li>
</ul> </ul>
<!-- helpers / media -->
<h3 class="h4 margin-top-1x">
Width
</h3>
<pre class="code"><code>&lt;div class=&quot;panel width-25&quot;&gt;width-25&lt;/div&gt;
&lt;div class=&quot;width-50&quot;&gt;width-50&lt;/div&gt;
&lt;div class=&quot;width-75&quot;&gt;width-75&lt;/div&gt;
&lt;div class=&quot;width-100&quot;&gt;width-100&lt;/div&gt;</code></pre>
<div class="panel panel__inner width-25 margin-bottom-1x">width-25</div>
<div class="panel panel__inner width-50 margin-bottom-1x">width-50</div>
<div class="panel panel__inner width-75 margin-bottom-1x">width-75</div>
<div class="panel panel__inner width-100 margin-bottom-1x">width-100</div>
<!-- mixins --> <!-- mixins -->
<hr class="margin-top-3x"> <hr class="margin-top-3x">
<h2 id="mixins" class="margin-top-1x"> <h2 id="mixins" class="margin-top-1x">


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

@ -15,7 +15,8 @@
$crispy__field__panel__padding: toEm($crispy__margin) !default; $crispy__field__panel__padding: toEm($crispy__margin) !default;
$crispy__field__panel__color: white !default; $crispy__field__panel__color: white !default;
$crispy__field__panel__background-color: $crispy__color-danger !default;
$crispy__field__panel__background-color--valid: $crispy__color-success !default;
$crispy__field__panel__background-color--error: $crispy__color-danger !default;
@mixin crispy__field__panel() { @mixin crispy__field__panel() {
.field__panel { .field__panel {
@ -23,7 +24,12 @@ $crispy__field__panel__background-color: $crispy__color-danger !default;
&--error { &--error {
color: white; color: white;
background-color: $crispy__field__panel__background-color;
background-color: $crispy__field__panel__background-color--error;
}
&--valid {
color: white;
background-color: $crispy__field__panel__background-color--valid;
} }
} }
} }

Write Preview
Loading…
Cancel
Save