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

bugfix colors

master
HerrHase 6 years ago
parent
1906df7032
commit
070315bb6e
4 changed files with 69 additions and 115 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      dest/css/styles.css
  2. +1
    -1
      dest/css/styles.min.css
  3. +65
    -111
      dest/index.html
  4. +1
    -1
      src/scss/example.scss

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


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


+ 65
- 111
dest/index.html View File

@ -121,6 +121,62 @@
Typography Typography
</h2> </h2>
<!-- blockquote -->
<h3 class="h4 margin-top-2x margin-bottom-0x">blockquote</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;blockquote&gt;&lt;/blockquote&gt;</code></pre>
<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.
</blockquote>
<!-- abbr -->
<h3 class="h4 margin-top-2x margin-bottom-0x">>abbr</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;abbr title=&quot;&quot;&gt;&lt;/abbr&gt;</code></pre>
<p>
Glossier viral occupy mixtape pok pok cornhole, <abbr title="vape affogato hella">vape affogato hella</abbr> knausgaard thundercats
</p>
<!-- list -->
<h3 class="h4 margin-top-2x margin-bottom-0x">>Lists</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;ul&gt;
&lt;li&gt;item 1&lt;/li&gt;
&lt;li&gt;
item 2
&lt;ul&gt;
&lt;li&gt;child item 1&lt;/li&gt;
&lt;li&gt;child item 2&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
&lt;li&gt;item 1&lt;/li&gt;
&lt;li&gt;item 2&lt;/li&gt;
&lt;/ol&gt;
&lt;dl&gt;
&lt;dt&gt;defined title 1&lt;/dt&gt;
&lt;dd&gt;defined item 1&lt;/dd&gt;
&lt;/dl&gt;</code></pre>
<ul>
<li>item 1</li>
<li>
item 2
<ul>
<li>child item 1</li>
<li>child item 2</li>
</ul>
</li>
</ul>
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
<dl>
<dt>defined title 1</dt><dd>defined item 1</dd>
</dl>
<!-- components --> <!-- components -->
<hr> <hr>
<h2 id="components" class="margin-top-1x"> <h2 id="components" class="margin-top-1x">
@ -432,109 +488,8 @@ toRem(10px 10px 0 0);
<div class="panel panel__inner width-75 margin-bottom-1x">width-75</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> <div class="panel panel__inner width-100 margin-bottom-1x">width-100</div>
<!-- blockquote -->
<h3 class="h4 margin-top-2x margin-bottom-0x">blockquote</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;blockquote&gt;&lt;/blockquote&gt;</code></pre>
<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.
</blockquote>
<!-- abbr -->
<h3 class="h4 margin-top-2x margin-bottom-0x">>abbr</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;abbr title=&quot;&quot;&gt;&lt;/abbr&gt;</code></pre>
<p>
Glossier viral occupy mixtape pok pok cornhole, <abbr title="vape affogato hella">vape affogato hella</abbr> knausgaard thundercats
</p>
<!-- list -->
<h3 class="h4 margin-top-2x margin-bottom-0x">>Lists</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;ul&gt;
&lt;li&gt;item 1&lt;/li&gt;
&lt;li&gt;
item 2
&lt;ul&gt;
&lt;li&gt;child item 1&lt;/li&gt;
&lt;li&gt;child item 2&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
&lt;li&gt;item 1&lt;/li&gt;
&lt;li&gt;item 2&lt;/li&gt;
&lt;/ol&gt;
&lt;dl&gt;
&lt;dt&gt;defined title 1&lt;/dt&gt;
&lt;dd&gt;defined item 1&lt;/dd&gt;
&lt;/dl&gt;</code></pre>
<ul>
<li>item 1</li>
<li>
item 2
<ul>
<li>child item 1</li>
<li>child item 2</li>
</ul>
</li>
</ul>
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
<dl>
<dt>defined title 1</dt><dd>defined item 1</dd>
</dl>
<!-- Typography -->
<hr />
<h2 id="base" class="margin-top-1x">
</h2>
<!-- helpers -->
<hr />
<h2 id="helpers" class="margin-top-1x">
Helpers
</h2>
<!-- helpers / align -->
<h3 class="h4 margin-top-2x margin-bottom-0x">>
align
</h3>
<pre class="code"><code>&lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
&lt;figure&gt;
&lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
&lt;figcaption class=&quot;text-center&quot;&gt;Lorem Ipsum&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
<div class="grid">
<div class="col-4">
<div class="text-left panel">
Left
</div>
</div>
<div class="col-4">
<div class="text-center panel">
Center
</div>
</div>
<div class="col-4">
<div class="text-right panel">
Right
</div>
</div>
</div>
<!-- helpers / Media -->
<h3 class="h4 margin-top-2x margin-bottom-0x">>
Media
</h3>
<!-- Reflex Grid --> <!-- Reflex Grid -->
<hr />
<hr class="margin-top-3x">
<h2 id="reflex-grid" class="margin-top-1x"> <h2 id="reflex-grid" class="margin-top-1x">
Reflex Grid Reflex Grid
</h2> </h2>
@ -549,18 +504,18 @@ toRem(10px 10px 0 0);
</p> </p>
<!-- Reflex Grid / media queries --> <!-- Reflex Grid / media queries -->
<h3 class="h4 margin-top-2x margin-bottom-0x">>
<h3 class="h4 margin-top-2x margin-bottom-0x">
Media Queries Media Queries
</h3> </h3>
<p> <p>
For Media Queries uses the Breakpoints from the <strong>Reflex Grid</strong>. For Media Queries uses the Breakpoints from the <strong>Reflex Grid</strong>.
</p> </p>
<ul> <ul>
<li>xs: 576px</li>
<li>sm: 768px</li>
<li>md: 992px</li>
<li>lg: 1200px</li>
<li>xlg: 1600px</li>
<li><strong>xs</strong> 576px</li>
<li><strong>sm</strong> 768px</li>
<li><strong>md</strong> 992px</li>
<li><strong>lg</strong> 1200px</li>
<li><strong>xlg</strong> 1600px</li>
</ul> </ul>
<p> <p>
You can uses a Mixin to add styles to an Breakpoint.If you want You can uses a Mixin to add styles to an Breakpoint.If you want
@ -572,13 +527,12 @@ toRem(10px 10px 0 0);
Sass: Sass:
</h4> </h4>
<pre class="code"><code class="margin-bottom-1x">@include crispy__media-md() { <pre class="code"><code class="margin-bottom-1x">@include crispy__media-md() {
&lt;!-- your code --&gt;
&lt;!-- your code --&gt;
} }
@include crispy__media-md-only() { @include crispy__media-md-only() {
&lt;!-- your code --&gt;
&lt;!-- your code --&gt;
}</code></pre> }</code></pre>
</div> </div>
</div> </div>
</div> </div>


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

@ -23,7 +23,7 @@
} }
.panel { .panel {
border: 1px solid $crispy__color-secondary;
border: 1px solid lighten($crispy__color-secondary, 10%);
background-color: lighten($crispy__color-secondary, 25%); background-color: lighten($crispy__color-secondary, 25%);
} }


Write Preview
Loading…
Cancel
Save