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

adding

master
Björn 5 years ago
parent
e544f89390
commit
e03de62bea
8 changed files with 97 additions and 27 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      dist/crispy.css
  2. +49
    -16
      dist/example/index.html
  3. +1
    -1
      dist/example/styles.css
  4. +12
    -9
      src/_variables.scss
  5. +1
    -0
      src/all.scss
  6. +4
    -0
      src/components/_field.scss
  7. +28
    -0
      src/components/_overlay.scss
  8. +1
    -0
      src/crispy.scss

+ 1
- 1
dist/crispy.css
File diff suppressed because it is too large
View File


+ 49
- 16
dist/example/index.html View File

@ -4,12 +4,9 @@
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Crispy</title>
<title>Crispy - a minimal CSS-Framework</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
@ -307,6 +304,32 @@
<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>
<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
<!-- icons -->
<h3 class="h4 margin-top-2 margin-bottom-0">
Icon
</h3>
<h4 class="h6">Html:</h4>
<pre class="code"><code></code></pre>
<div class="panel">
<div class="panel__inner">
<svg class="icon text-size-small" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg>
<svg class="icon text-size-large" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg>
<svg class="icon text-size-big" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg>
<svg class="icon text-size-mega" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg>
</div>
</div>
<!-- components / panel -->
<h3 class="h4 margin-top-2 margin-bottom-0">
Panel
@ -419,24 +442,34 @@
Checkbox
</h3>
<div class="field">
<input id="field__checkbox__1" class="field__checkbox" type="checkbox" name="field__checkbox__1" value="true" />
<input id="field__checkbox__1" class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
<label for="field__checkbox__1" class="field__label">
<svg class="icon field__checkbox__unchecked" aria-hidden="true">
<svg class="icon field__choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg>
<svg class="icon field__checkbox__checked" aria-hidden="true">
<svg class="icon field__choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-checked"></use>
</svg>
checkbox 1
</label>
<input id="field__checkbox__2" class="field__choice" type="checkbox" name="field__checkbox__2" value="true" />
<label for="field__checkbox__2" class="field__label">
<svg class="icon field__choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg>
<svg class="icon field__choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-checked"></use>
</svg>
checkbox 2
</label>
</div>
<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__choice" type="checkbox" name="field__checkbox__2" value="true" />
<label for="field__checkbox__2" class="field__label">
<svg class="icon field__checkbox__unchecked" aria-hidden="true">
<svg class="icon field__choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg>
<svg class="icon field__checkbox__checked" aria-hidden="true">
<svg class="icon field__choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-checked"></use>
</svg>
checkbox 1
@ -451,22 +484,22 @@
Radio
</h3>
<div class="field">
<input id="field__radio__1" class="field__radio" type="radio" name="field__radio__1[]" value="true" />
<input id="field__radio__1" class="field__choice" type="radio" name="field__radio__1[]" value="true" />
<label for="field__radio__1" class="field__label">
<svg class="icon field__radio__unchecked" aria-hidden="true">
<svg class="icon field__choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg>
<svg class="icon field__radio__checked" aria-hidden="true">
<svg class="icon field__choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-checked" />
</svg>
radio item 1
</label><br />
<input id="field__radio__2" class="field__radio" type="radio" name="field__radio__1[]" value="true" />
<input id="field__radio__2" class="field__choice" type="radio" name="field__radio__1[]" value="true" />
<label for="field__radio__2" class="field__label">
<svg class="icon field__radio__unchecked" aria-hidden="true">
<svg class="icon field__choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg>
<svg class="icon field__radio__checked" aria-hidden="true">
<svg class="icon field__choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-checked" />
</svg>
radio item 2


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


+ 12
- 9
src/_variables.scss View File

@ -25,7 +25,7 @@ $crispy__spacing: 10px !default;
$crispy__spacing__steps: 5 !default;
// colors
$crispy__color-primary: #f0c209 !default;
$crispy__color-primary: #f18f01 !default;
$crispy__color-secondary: #b3b2af !default;
$crispy__color-success: #5cb85c !default;
$crispy__color-warning: #f0ad4e !default;
@ -38,11 +38,11 @@ $crispy__color-background: #ffffff !default;
$crispy__color-panel: #d0d0d0 !default;
$crispy__color-link: #ffffff !default;
$crispy__color-link-hover: #ffffff !default;
$crispy__color-link-visited: #ffffff !default;
$crispy__color-link-focus: #ffffff !default;
$crispy__color-link-active: #ffffff !default;
$crispy__color-link: $crispy__color-primary !default;
$crispy__color-link-hover: $crispy__color-secondary !default;
$crispy__color-link-visited: $crispy__color-primary !default;
$crispy__color-link-focus: $crispy__color-primary !default;
$crispy__color-link-active: $crispy__color-primary !default;
// borders
$crispy__border-radius: 0 !default;
@ -68,13 +68,16 @@ $crispy__colors: (
// font-sizes as map
$crispy__font-sizes: (
'default': $crispy__font-size,
'small': 16px,
'large': 20px
'small': toRem(12px),
'large': toRem(20px),
'big' : toRem(24px),
'mega' : toRem(28px)
) !default;
// z-index
$crispy__z-index: (
'modal': 100
'overlay': 90,
'modal' : 100
) !default;
$crispy__width: (


+ 1
- 0
src/all.scss View File

@ -13,6 +13,7 @@
@include crispy__icon();
@include crispy__media();
@include crispy__modal();
@include crispy__overlay();
@include crispy__field();


+ 4
- 0
src/components/_field.scss View File

@ -173,6 +173,10 @@ $crispy__field__select__border: $crispy__border !default;
&__unchecked {
fill: $crispy__field__choice__unchecked__color;
}
+ .field__label + .field__panel {
margin: $crispy__spacing 0 0 0;
}
}
.field--valid {


+ 28
- 0
src/components/_overlay.scss View File

@ -0,0 +1,28 @@
/**
* component: overlay
*
* <div class="overlay">
* </div>
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
*
*/
$crispy__overlay__z-index: zIndex('overlay') !default;
$crispy__overlay__background-color: rgba(0, 0, 0, 10) !default;
@mixin crispy__overlay {
.overlay {
position: fixed;
top: 0;
left: 0;
z-index: $crispy__overlay__z-index;
width: 100%;
height: 100%;
background-color: $crispy__overlay__background-color;
}
}

+ 1
- 0
src/crispy.scss View File

@ -17,6 +17,7 @@
'components/icon',
'components/media',
'components/modal',
'components/overlay',
'components/panel',
'components/table',
'components/field';

Write Preview
Loading…
Cancel
Save