Lightweight CSS Framework for Building Apps and Websites
https://crispy-css.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
238 lines
6.0 KiB
238 lines
6.0 KiB
/**
|
|
* components: field
|
|
*
|
|
* <div class="field">
|
|
* <label class="field__label">
|
|
* text
|
|
* <input type="text" class="field__text" />
|
|
* <label>
|
|
* </div>
|
|
*
|
|
*
|
|
* @author Björn Hase, Tentakelfabrik
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
* @link https://github.com/tentakelfabrik/crispy-css
|
|
*
|
|
*/
|
|
|
|
$crispy__field__font-family: $crispy__font-family !default;
|
|
$crispy__field__font-weight: $crispy__font-weight !default;
|
|
$crispy__field__font-size: $crispy__font-size !default;
|
|
$crispy__field__font-size-breakpoints: $crispy__font-size-breakpoints !default;
|
|
|
|
$crispy__field__border: $crispy__border !default;
|
|
|
|
$crispy__field__color--valid: $crispy__color-success !default;
|
|
$crispy__field__color--error: $crispy__color-danger !default;
|
|
|
|
$crispy__field__border-color--focus: $crispy__color-primary !default;
|
|
$crispy__field__border-color--valid: $crispy__color-success !default;
|
|
$crispy__field__border-color--error: $crispy__color-danger !default;
|
|
|
|
$crispy__field__choice__checked__color: $crispy__color-success !default;
|
|
$crispy__field__choice__unchecked__color: $crispy__color-danger !default;
|
|
|
|
$crispy__field__padding: 0.5em 0.6em !default;
|
|
$crispy__field__padding-breakpoints: (
|
|
$crispy__md: 0.7em 0.8em
|
|
) !default;
|
|
|
|
$crispy__field__select__padding: 0.5em 0.3em !default;
|
|
$crispy__field__select__padding-breakpoints: (
|
|
$crispy__md: 0.7em 0.6em
|
|
) !default;
|
|
|
|
$crispy__field__margin: $crispy__margin !default;
|
|
$crispy__field__margin-breakpoints: $crispy__margin-breakpoints !default;
|
|
|
|
$crispy__field__input__color: $crispy__color-text !default;
|
|
|
|
$crispy__field__select__background-color: white !default;
|
|
$crispy__field__select__border: $crispy__border !default;
|
|
|
|
@mixin crispy__field() {
|
|
.field {
|
|
margin: $crispy__field__margin;
|
|
@include crispy__media__breakpoints('margin', $crispy__field__margin-breakpoints);
|
|
}
|
|
|
|
.field__text, .field__select, .field__select, .field__label {
|
|
font-family: $crispy__field__font-family;
|
|
font-weight: $crispy__field__font-weight;
|
|
|
|
font-size: $crispy__field__font-size;
|
|
@include crispy__media__breakpoints('font-size', $crispy__field__font-size-breakpoints);
|
|
}
|
|
|
|
// basic style for input elements, will be used to @extend
|
|
.field__text, .field__select, .field__select {
|
|
display: block;
|
|
width: 100%;
|
|
|
|
color: $crispy__field__input__color;
|
|
appearance: none;
|
|
|
|
padding: $crispy__field__padding;
|
|
@include crispy__media__breakpoints('padding', $crispy__field__padding-breakpoints);
|
|
}
|
|
|
|
/**
|
|
* label
|
|
*
|
|
*
|
|
*/
|
|
|
|
.field__label {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.field--valid {
|
|
.field__label {
|
|
color: $crispy__field__color--valid;
|
|
}
|
|
}
|
|
|
|
.field--error {
|
|
.field__label {
|
|
color: $crispy__field__color--error;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* input & textarea
|
|
*
|
|
*
|
|
*/
|
|
|
|
.field__text {
|
|
margin: 0;
|
|
border: $crispy__field__border;
|
|
|
|
&:focus {
|
|
border-color: $crispy__field__border-color--focus;
|
|
}
|
|
}
|
|
|
|
.field--valid {
|
|
.field__text, .field__select {
|
|
border-color: $crispy__field__border-color--valid;
|
|
}
|
|
}
|
|
|
|
.field--error {
|
|
.field__text, .field__select {
|
|
border-color: $crispy__field__border-color--error;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* select
|
|
*
|
|
*
|
|
*/
|
|
|
|
.field__select {
|
|
padding: $crispy__field__select__padding;
|
|
border: $crispy__field__select__border;
|
|
background-color: $crispy__field__select__background-color;
|
|
|
|
padding: $crispy__field__select__padding;
|
|
@include crispy__media__breakpoints('padding', $crispy__field__select__padding-breakpoints);
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
border-color: $crispy__field__border-color--focus;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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__choice {
|
|
position: relative;
|
|
display: none;
|
|
|
|
+ .field__label {
|
|
.field__choice__checked {
|
|
display: none;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&:checked + .field__label &__checked {
|
|
display: inline-block;
|
|
}
|
|
|
|
&:checked + .field__label &__unchecked {
|
|
display: none;
|
|
}
|
|
|
|
&__checked {
|
|
fill: $crispy__field__choice__checked__color;
|
|
}
|
|
|
|
&__unchecked {
|
|
fill: $crispy__field__choice__unchecked__color;
|
|
}
|
|
|
|
+ .field__label + .field__panel {
|
|
margin: 0.3em 0 0 0;
|
|
}
|
|
}
|
|
|
|
.field--valid {
|
|
.field__choice__checked, .field__choice__unchecked {
|
|
fill: $crispy__field__color--valid;
|
|
}
|
|
}
|
|
|
|
.field--error {
|
|
.field__choice__checked, .field__choice__unchecked {
|
|
fill: $crispy__field__color--error;
|
|
}
|
|
}
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
|
|
.field__panel {
|
|
padding: $crispy__field__padding;
|
|
@include crispy__media__breakpoints('padding', $crispy__field__padding-breakpoints);
|
|
}
|
|
|
|
.field--valid {
|
|
.field__panel {
|
|
color: white;
|
|
background-color: $crispy__field__color--valid;
|
|
}
|
|
}
|
|
|
|
.field--error {
|
|
.field__panel {
|
|
color: white;
|
|
background-color: $crispy__field__color--error;
|
|
}
|
|
}
|
|
}
|