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

adding

master
Björn 6 years ago
parent
96faac13e3
commit
e544f89390
11 changed files with 34 additions and 377 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      dist/crispy.css
  2. +6
    -6
      dist/example/index.html
  3. +1
    -1
      dist/example/styles.css
  4. +0
    -6
      src/all.scss
  5. +26
    -61
      src/components/_field.scss
  6. +0
    -70
      src/components/field/_checkbox.scss
  7. +0
    -32
      src/components/field/_label.scss
  8. +0
    -39
      src/components/field/_panel.scss
  9. +0
    -70
      src/components/field/_radio.scss
  10. +0
    -49
      src/components/field/_select.scss
  11. +0
    -42
      src/components/field/_text.scss

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


+ 6
- 6
dist/example/index.html View File

@ -475,22 +475,22 @@
<!-- radio / error --> <!-- radio / error -->
<div class="field field--error"> <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__choice" type="radio" name="field__radio__2[]" value="true" />
<label for="field__radio__3" class="field__label"> <label for="field__radio__3" 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> <use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg> </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" /> <use xlink:href="symbol-defs.svg#icon-checked" />
</svg> </svg>
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__choice" type="radio" name="field__radio__2[]" value="true" />
<label for="field__radio__4" class="field__label"> <label for="field__radio__4" 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> <use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg> </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" /> <use xlink:href="symbol-defs.svg#icon-checked" />
</svg> </svg>
radio item 2 radio item 2


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


+ 0
- 6
src/all.scss View File

@ -15,12 +15,6 @@
@include crispy__modal(); @include crispy__modal();
@include crispy__field(); @include crispy__field();
@include crispy__field__label();
@include crispy__field__checkbox();
@include crispy__field__radio();
@include crispy__field__select();
@include crispy__field__text();
@include crispy__field__panel();
@include crispy__panel(); @include crispy__panel();
@include crispy__table(); @include crispy__table();

+ 26
- 61
src/components/_field.scss View File

@ -24,8 +24,8 @@ $crispy__field__border-color--focus: $crispy__color-primary !default;
$crispy__field__border-color--valid: $crispy__color-success !default; $crispy__field__border-color--valid: $crispy__color-success !default;
$crispy__field__border-color--error: $crispy__color-danger !default; $crispy__field__border-color--error: $crispy__color-danger !default;
$crispy__field__checked: $crispy__color-success !default;
$crispy__field__unchecked: $crispy__color-danger !default;
$crispy__field__choice__checked__color: $crispy__color-success !default;
$crispy__field__choice__unchecked__color: $crispy__color-danger !default;
$crispy__field__input__font-size: $crispy__font-size !default; $crispy__field__input__font-size: $crispy__font-size !default;
$crispy__field__input__padding: toEm(6px 8px) !default; $crispy__field__input__padding: toEm(6px 8px) !default;
@ -33,8 +33,10 @@ $crispy__field__input__color: $crispy__color-text !default;
$crispy__field__select__padding: toEm(8px) !default; $crispy__field__select__padding: toEm(8px) !default;
$crispy__field__panel__padding: toEm(10px) !default;
$crispy__field__select__background-color: white !default; $crispy__field__select__background-color: white !default;
$crispy__field__select__border: $crispy_border !default;
$crispy__field__select__border: $crispy__border !default;
@mixin crispy__field() { @mixin crispy__field() {
.field { .field {
@ -125,66 +127,29 @@ $crispy__field__select__border: $crispy_border !default;
} }
/** /**
* radio
*
*
*/
.field__radio {
position: relative;
display: none;
+ .field__label {
.field__radio__checked {
display: none;
}
&:hover {
cursor: pointer;
}
}
&:checked + .field__label &__checked {
display: inline-block;
}
&:checked + .field__label &__unchecked {
display: none;
}
&__checked {
fill: $crispy__field__checked__color;
}
&__unchecked {
fill: $crispy__field__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;
}
}
/**
* checkbox
* radio & checkbox
* *
* <div class="field">
* <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__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 1
* </label>
* </div>
* *
*/ */
.field__checkbox {
.field__choice {
position: relative; position: relative;
display: none; display: none;
+ .field__label { + .field__label {
.field__checkbox__checked {
.field__choice__checked {
display: none; display: none;
} }
@ -202,22 +167,22 @@ $crispy__field__select__border: $crispy_border !default;
} }
&__checked { &__checked {
fill: $crispy__field__checked__color;
fill: $crispy__field__choice__checked__color;
} }
&__unchecked { &__unchecked {
fill: $crispy__field__unchecked__color;
fill: $crispy__field__choice__unchecked__color;
} }
} }
.field--valid { .field--valid {
.field__checkbox__checked, .field__checkbox__unchecked {
.field__choice__checked, .field__choice__unchecked {
fill: $crispy__field__color--valid; fill: $crispy__field__color--valid;
} }
} }
.field--error { .field--error {
.field__checkbox__checked, .field__checkbox__unchecked {
.field__choice__checked, .field__choice__unchecked {
fill: $crispy__field__color--error; fill: $crispy__field__color--error;
} }
} }
@ -235,14 +200,14 @@ $crispy__field__select__border: $crispy_border !default;
.field--valid { .field--valid {
.field__panel { .field__panel {
color: white; color: white;
background-color: $crispy__field__background-color--valid;
background-color: $crispy__field__color--valid;
} }
} }
.field--error { .field--error {
.field__panel { .field__panel {
color: white; color: white;
background-color: $crispy__field__background-color--error;
background-color: $crispy__field__color--error;
} }
} }
} }

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

@ -1,70 +0,0 @@
/**
* component: checkbox
*
* <div class="field">
* <input id="" type="text" class="field__checkbox" />
* <label for="" class="field__label">
* <svg class="icon field__checkbox__checked" viewBox="0 0 100 100">
* <use src="#"></use>
* </svg>
* <svg class="icon field__checkbox__checked" viewBox="0 0 100 100">
* <use src="#"></use>
* </svg>
* </label>
* </div>
*
* @author Björn Hase
*
*/
$crispy__field__checkbox__disabled__color: $crispy__color-secondary !default;
$crispy__field__checkbox__checked__color: $crispy__color-success !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() {
.field__checkbox {
position: relative;
display: none;
+ .field__label {
.field__checkbox__checked {
display: none;
}
&:hover {
cursor: pointer;
}
}
&:checked + .field__label &__checked {
display: inline-block;
}
&:checked + .field__label &__unchecked {
display: none;
}
&__checked {
fill: $crispy__field__checkbox__checked__color;
}
&__unchecked {
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;
}
}
}

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

@ -1,32 +0,0 @@
/**
* 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;
}
}
}

+ 0
- 39
src/components/field/_panel.scss View File

@ -1,39 +0,0 @@
/**
* component: panel
*
* <div class="field">
* <div class="field__panel">
* <ul>
* <li>item 1<li>
* </ul>
* </div>
* </div>
*
* @author Björn Hase
*
*/
$crispy__field__panel__padding: toEm($crispy__spacing) !default;
$crispy__field__panel__color: white !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() {
.field__panel {
padding: $crispy__field__panel__padding;
}
.field--valid {
.field__panel {
color: white;
background-color: $crispy__field__panel__background-color--valid;
}
}
.field--error {
.field__panel {
color: white;
background-color: $crispy__field__panel__background-color--error;
}
}
}

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

@ -1,70 +0,0 @@
/**
* component: radio
*
* <div class="field">
* <input id="" type="text" class="field__radio" />
* <label for="" class="field__label">
* <i class="icon field__radio__checked">
*
* </i>
* <i class="icon field__radio__checked">
*
* </i>
* </label>
* </div>
*
* @author Björn Hase
*
*/
$crispy__field__radio__disabled__color: $crispy__color-secondary !default;
$crispy__field__radio__checked__color: $crispy__color-success !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() {
.field__radio {
position: relative;
display: none;
+ .field__label {
.field__radio__checked {
display: none;
}
&:hover {
cursor: pointer;
}
}
&:checked + .field__label &__checked {
display: inline-block;
}
&:checked + .field__label &__unchecked {
display: none;
}
&__checked {
fill: $crispy__field__radio__checked__color;
}
&__unchecked {
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;
}
}
}

+ 0
- 49
src/components/field/_select.scss View File

@ -1,49 +0,0 @@
/**
* component: select
*
* <div class="field">
* <label class="field__label">
* <select class="field__select">
*
* </select>
* </label>
* </div>
*
* @author Björn Hase
*
*/
$crispy__field__select__padding: toEm(8px) !default;
$crispy__field__select__background-color: white !default;
$crispy__field__select__border: 1px solid $crispy__color-secondary !default;
$crispy__field__select__border-color--focus: $crispy__color-primary !default;
$crispy__field__select__border-color--valid: $crispy__color-success !default;
$crispy__field__select__border-color--error: $crispy__color-danger !default;
@mixin crispy__field__select()
{
.field__select {
padding: $crispy__field__select__padding;
border: $crispy__field__select__border;
background-color: $crispy__field__select__background-color;
&:focus {
outline: 0;
border-color: $crispy__field__select__border-color--focus;
}
}
.field--valid {
.field__select {
border-color: $crispy__field__select__border-color--valid;
}
}
.field--error {
.field__select {
border-color: $crispy__field__select__border-color--error;
}
}
}

+ 0
- 42
src/components/field/_text.scss View File

@ -1,42 +0,0 @@
/**
* component: text
*
* <div class="field">
* <label class="field__label">
* input
* <input type="text" class="field__text" />
* </label>
* </div>
*
* @author Björn Hase
*
*/
$crispy__field__text__border: 1px solid $crispy__color-secondary !default;
$crispy__field__text__border-color--focus: $crispy__color-primary !default;
$crispy__field__text__border-color--valid: $crispy__color-success !default;
$crispy__field__text__border-color--error: $crispy__color-danger !default;
@mixin crispy__field__text() {
.field__text {
margin: 0;
border: $crispy__field__text__border;
&:focus {
border-color: $crispy__field__text__border-color--focus;
}
}
.field--valid {
.field__text {
border-color: $crispy__field__text__border-color--valid;
}
}
.field--error {
.field__text {
border-color: $crispy__field__text__border-color--error;
}
}
}

Write Preview
Loading…
Cancel
Save