Initial commit

This commit is contained in:
Samuel Philipp 2016-10-28 19:33:25 +02:00
commit b953a6c158
326 changed files with 76065 additions and 0 deletions

View file

@ -0,0 +1,40 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
@mixin foundation-form-checkbox {
[type='file'],
[type='checkbox'],
[type='radio'] {
margin: 0 0 $form-spacing;
}
// Styles for input/label siblings
[type='checkbox'] + label,
[type='radio'] + label {
display: inline-block;
margin-#{$global-left}: $form-spacing * 0.5;
margin-#{$global-right}: $form-spacing;
margin-bottom: 0;
vertical-align: baseline;
&[for] {
cursor: pointer;
}
}
// Styles for inputs inside labels
label > [type='checkbox'],
label > [type='radio'] {
margin-#{$global-right}: $form-spacing * 0.5;
}
// Normalize file input width
[type='file'] {
width: 100%;
}
}

View file

@ -0,0 +1,84 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group abide
////
/// Sets if error styles should be added to inputs.
/// @type Boolean
$abide-inputs: true !default;
/// Sets if error styles should be added to labels.
/// @type Boolean
$abide-labels: true !default;
/// Background color to use for invalid text inputs.
/// @type Color
$input-background-invalid: map-get($foundation-palette, alert) !default;
/// Color to use for labels of invalid inputs.
/// @type Color
$form-label-color-invalid: map-get($foundation-palette, alert) !default;
/// Default font color for form error text.
/// @type Color
$input-error-color: map-get($foundation-palette, alert) !default;
/// Default font size for form error text.
/// @type Number
$input-error-font-size: rem-calc(12) !default;
/// Default font weight for form error text.
/// @type Keyword
$input-error-font-weight: $global-weight-bold !default;
/// Styles the background and border of an input field to have an error state.
///
/// @param {Color} $background [$alert-color] - Color to use for the background and border.
/// @param {Number} $background-alpha [0.1] - Transparency level of the background color.
@mixin form-input-error(
$background: $input-background-invalid,
$background-alpha: 0.1
) {
&:not(:focus) {
background-color: rgba($background, $background-alpha);
border-color: $background;
}
}
/// Adds error styles to a form element, using the values in the settings file.
@mixin form-error {
display: none;
margin-top: $form-spacing * -0.5;
margin-bottom: $form-spacing;
font-size: $input-error-font-size;
font-weight: $input-error-font-weight;
color: $input-error-color;
}
@mixin foundation-form-error {
@if $abide-inputs {
// Error class for invalid inputs
.is-invalid-input {
@include form-input-error;
}
}
@if $abide-labels {
// Error class for labels of invalid outputs
.is-invalid-label {
color: $form-label-color-invalid;
}
}
// Form error element
.form-error {
@include form-error;
&.is-visible {
display: block;
}
}
}

View file

@ -0,0 +1,54 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Default border around custom fieldsets.
/// @type Border
$fieldset-border: 1px solid $medium-gray !default;
/// Default padding inside custom fieldsets.
/// @type Number
$fieldset-padding: rem-calc(20) !default;
/// Default margin around custom fieldsets.
/// @type Number
$fieldset-margin: rem-calc(18 0) !default;
/// Default padding between the legend text and fieldset border.
/// @type Number
$legend-padding: rem-calc(0 3) !default;
@mixin fieldset {
border: $fieldset-border;
padding: $fieldset-padding;
margin: $fieldset-margin;
legend {
// Covers up the fieldset's border to create artificial padding
background: $body-background;
padding: $legend-padding;
margin: 0;
margin-#{$global-left}: rem-calc(-3);
}
}
@mixin foundation-form-fieldset {
fieldset {
border: 0;
padding: 0;
margin: 0;
}
legend {
margin-bottom: $form-spacing * 0.5;
max-width: 100%;
}
.fieldset {
@include fieldset;
}
}

View file

@ -0,0 +1,34 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Global spacing for form elements.
/// @type Number
$form-spacing: rem-calc(16) !default;
@import 'text';
@import 'checkbox';
@import 'label';
@import 'help-text';
@import 'input-group';
@import 'fieldset';
@import 'select';
@import 'range';
@import 'progress';
@import 'meter';
@import 'error';
@mixin foundation-forms {
@include foundation-form-text;
@include foundation-form-checkbox;
@include foundation-form-label;
@include foundation-form-helptext;
@include foundation-form-prepostfix;
@include foundation-form-fieldset;
@include foundation-form-select;
@include foundation-form-error;
}

View file

@ -0,0 +1,30 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Default color for help text.
/// @type Color
$helptext-color: $black !default;
/// Default font size for help text.
/// @type Number
$helptext-font-size: rem-calc(13) !default;
/// Default font style for help text.
/// @type Keyword
$helptext-font-style: italic !default;
@mixin foundation-form-helptext {
.help-text {
$margin-top: ($form-spacing * 0.5) * -1;
margin-top: $margin-top;
font-size: $helptext-font-size;
font-style: $helptext-font-style;
color: $helptext-color;
}
}

View file

@ -0,0 +1,128 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Color of labels prefixed to an input.
/// @type Color
$input-prefix-color: $black !default;
/// Background color of labels prefixed to an input.
/// @type Color
$input-prefix-background: $light-gray !default;
/// Border around labels prefixed to an input.
/// @type Border
$input-prefix-border: 1px solid $medium-gray !default;
/// Left/right padding of an pre/postfixed input label
$input-prefix-padding: 1rem !default;
@mixin foundation-form-prepostfix {
$height: ($input-font-size + $form-spacing * 1.5);
.input-group {
display: if($global-flexbox, flex, table);
width: 100%;
margin-bottom: $form-spacing;
@if $global-flexbox {
align-items: stretch;
}
> :first-child {
border-radius: if($global-text-direction == rtl, 0 $global-radius $global-radius 0, $global-radius 0 0 $global-radius);
}
> :last-child {
> * {
border-radius: if($global-text-direction == rtl, $global-radius 0 0 $global-radius, 0 $global-radius $global-radius 0);
}
}
}
%input-group-child {
margin: 0;
white-space: nowrap;
@if not $global-flexbox {
display: table-cell;
vertical-align: middle;
}
}
.input-group-label {
@extend %input-group-child;
text-align: center;
padding: 0 $input-prefix-padding;
background: $input-prefix-background;
color: $input-prefix-color;
border: $input-prefix-border;
white-space: nowrap;
@if $global-flexbox {
flex: 0 0 auto;
display: flex;
align-items: center;
}
@else {
width: 1%;
height: 100%;
}
@if has-value($input-prefix-border) {
&:first-child {
border-#{$global-right}: 0;
}
&:last-child {
border-#{$global-left}: 0;
}
}
}
.input-group-field {
@extend %input-group-child;
border-radius: 0;
// scss-lint:disable ZeroUnit
@if $global-flexbox {
flex: 1 1 0px;
width: auto;
height: auto;
}
@else {
height: $height;
}
}
.input-group-button {
@extend %input-group-child;
padding-top: 0;
padding-bottom: 0;
text-align: center;
@if $global-flexbox {
flex: 0 0 auto;
}
@else {
height: 100%;
width: 1%;
}
a,
input,
button {
margin: 0;
}
}
// Specificity bump needed to prevent override by buttons
// scss-lint:disable QualifyingSelector
.input-group .input-group-button {
display: table-cell;
}
}

View file

@ -0,0 +1,48 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Color for form labels.
/// @type Color
$form-label-color: $black !default;
/// Font size for form labels.
/// @type Number
$form-label-font-size: rem-calc(14) !default;
/// Font weight for form labels.
/// @type Keyword
$form-label-font-weight: $global-weight-normal !default;
/// Line height for form labels. The higher the number, the more space between the label and its input field.
/// @type Number
$form-label-line-height: 1.8 !default;
@mixin form-label {
display: block;
margin: 0;
font-size: $form-label-font-size;
font-weight: $form-label-font-weight;
line-height: $form-label-line-height;
color: $form-label-color;
}
@mixin form-label-middle {
$input-border-width: get-border-value($input-border, width);
margin: 0 0 $form-spacing;
padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0;
}
@mixin foundation-form-label {
label {
@include form-label;
&.middle {
@include form-label-middle;
}
}
}

View file

@ -0,0 +1,109 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group meter
////
/// Height of a `<meter>` element.
/// @type Length
$meter-height: 1rem !default;
/// Border radius of a `<meter>` element.
/// @type Length
$meter-radius: $global-radius !default;
/// Background color of a `<meter>` element.
/// @type Color
$meter-background: $medium-gray !default;
/// Meter fill for an optimal value in a `<meter>` element.
/// @type Color
$meter-fill-good: $success-color !default;
/// Meter fill for an average value in a `<meter>` element.
/// @type Color
$meter-fill-medium: $warning-color !default;
/// Meter fill for a suboptimal value in a `<meter>` element.
/// @type Color
$meter-fill-bad: $alert-color !default;
@mixin foundation-meter-element {
meter {
-webkit-appearance: none;
-moz-appearance: none;
display: block;
width: 100%;
height: $meter-height;
margin-bottom: 1rem;
@if has-value($meter-radius) {
border-radius: $meter-radius;
}
// For Firefox
background: $meter-background;
border: 0;
// Chrome/Safari
&::-webkit-meter-bar {
background: $meter-background;
@if has-value($meter-radius) {
border-radius: $meter-radius;
}
}
&::-webkit-meter-inner-element {
@if has-value($meter-radius) {
border-radius: $meter-radius;
}
}
&::-webkit-meter-optimum-value {
background: $meter-fill-good;
@if has-value($meter-radius) {
border-radius: $meter-radius;
}
}
&::-webkit-meter-suboptimum-value {
background: $meter-fill-medium;
@if has-value($meter-radius) {
border-radius: $meter-radius;
}
}
&::-webkit-meter-even-less-good-value {
background: $meter-fill-bad;
@if has-value($meter-radius) {
border-radius: $meter-radius;
}
}
&::-moz-meter-bar {
background: $primary-color;
@if has-value($meter-radius) {
border-radius: $meter-radius;
}
}
&:-moz-meter-optimum::-moz-meter-bar {
background: $meter-fill-good;
}
&:-moz-meter-sub-optimum::-moz-meter-bar {
background: $meter-fill-medium;
}
&:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: $meter-fill-bad;
}
}
}

View file

@ -0,0 +1,85 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group progress-bar
////
/// Height of a progress bar.
/// @type Number
$progress-height: 1rem !default;
/// Background color of a progress bar.
/// @type Color
$progress-background: $medium-gray !default;
/// Bottom margin of a progress bar.
/// @type Number
$progress-margin-bottom: $global-margin !default;
/// Default color of a progress bar's meter.
/// @type Color
$progress-meter-background: $primary-color !default;
/// Default radius of a progress bar.
/// @type Number
$progress-radius: $global-radius !default;
@mixin foundation-progress-element {
progress {
-webkit-appearance: none;
-moz-appearance: none;
display: block;
width: 100%;
height: $progress-height;
margin-bottom: $progress-margin-bottom;
@if hasvalue($progress-radius) {
border-radius: $progress-radius;
}
// For Firefox
background: $progress-background;
border: 0;
&::-webkit-progress-bar {
background: $progress-background;
@if hasvalue($progress-radius) {
border-radius: $progress-radius;
}
}
&::-webkit-progress-value {
background: $progress-meter-background;
@if hasvalue($progress-radius) {
border-radius: $progress-radius;
}
}
&::-moz-progress-bar {
background: $progress-meter-background;
@if hasvalue($progress-radius) {
border-radius: $progress-radius;
}
}
@each $name, $color in $foundation-palette {
&.#{$name} {
// Internet Explorer sets the fill with color
color: $color;
&::-webkit-progress-value {
background: $color;
}
&::-moz-progress-bar {
background: $color;
}
}
}
}
}

View file

@ -0,0 +1,144 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group slider
////
/// Default height of the slider.
/// @type Number
$slider-height: 0.5rem !default;
/// Default background color of the slider's track.
/// @type Color
$slider-background: $light-gray !default;
/// Default color of the active fill color of the slider.
/// @type Color
$slider-fill-background: $medium-gray !default;
/// Default height of the handle of the slider.
/// @type Number
$slider-handle-height: 1.4rem !default;
/// Default width of the handle of the slider.
/// @type Number
$slider-handle-width: 1.4rem !default;
/// Default color of the handle for the slider.
/// @type Color
$slider-handle-background: $primary-color !default;
/// Default fade amount of a disabled slider.
/// @type Number
$slider-opacity-disabled: 0.25 !default;
/// Default radius for slider.
/// @type Number
$slider-radius: $global-radius !default;
@mixin foundation-range-input {
// scss-lint:disable QualifyingElement
input[type="range"] {
$margin: ($slider-handle-height - $slider-height) / 2;
-webkit-appearance: none;
-moz-appearance: none;
display: block;
width: 100%;
height: auto;
cursor: pointer;
margin-top: $margin;
margin-bottom: $margin;
border: 0;
line-height: 1;
@if has-value($slider-radius) {
border-radius: $slider-radius;
}
&:focus {
outline: 0;
}
&[disabled] {
opacity: $slider-opacity-disabled;
}
// Chrome/Safari
&::-webkit-slider-runnable-track {
height: $slider-height;
background: $slider-background;
}
&::-webkit-slider-handle {
-webkit-appearance: none;
background: $slider-handle-background;
width: $slider-handle-width;
height: $slider-handle-height;
margin-top: -$margin;
@if has-value($slider-radius) {
border-radius: $slider-radius;
}
}
// Firefox
&::-moz-range-track {
-moz-appearance: none;
height: $slider-height;
background: $slider-background;
}
&::-moz-range-thumb {
-moz-appearance: none;
background: $slider-handle-background;
width: $slider-handle-width;
height: $slider-handle-height;
margin-top: -$margin;
@if has-value($slider-radius) {
border-radius: $slider-radius;
}
}
// Internet Explorer
&::-ms-track {
height: $slider-height;
background: $slider-background;
color: transparent;
border: 0;
overflow: visible;
border-top: $margin solid $body-background;
border-bottom: $margin solid $body-background;
}
&::-ms-thumb {
background: $slider-handle-background;
width: $slider-handle-width;
height: $slider-handle-height;
border: 0;
@if has-value($slider-radius) {
border-radius: $slider-radius;
}
}
&::-ms-fill-lower {
background: $slider-fill-background;
}
&::-ms-fill-upper {
background: $slider-background;
}
@at-root {
output {
line-height: $slider-handle-height;
vertical-align: middle;
margin-left: 0.5em;
}
}
}
}

View file

@ -0,0 +1,67 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Background color for select menus.
/// @type Color
$select-background: $white !default;
/// Color of the dropdown triangle inside select menus. Set to `transparent` to remove it entirely.
/// @type Color
$select-triangle-color: $dark-gray !default;
/// Default radius for select menus.
/// @type Color
$select-radius: $global-radius !default;
@mixin form-select {
$height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
height: $height;
padding: ($form-spacing / 2);
border: $input-border;
margin: 0 0 $form-spacing;
font-size: $input-font-size;
font-family: $input-font-family;
line-height: normal;
color: $input-color;
background-color: $select-background;
border-radius: $select-radius;
-webkit-appearance: none;
-moz-appearance: none;
@if $select-triangle-color != transparent {
@include background-triangle($select-triangle-color);
background-size: 9px 6px;
background-position: $global-right (-$form-spacing) center;
background-origin: content-box;
background-repeat: no-repeat;
padding-#{$global-right}: ($form-spacing * 1.5);
}
// Disabled state
&:disabled {
background-color: $input-background-disabled;
cursor: $input-cursor-disabled;
}
// Hide the dropdown arrow shown in newer IE versions
&::-ms-expand {
display: none;
}
&[multiple] {
height: auto;
background-image: none;
}
}
@mixin foundation-form-select {
select {
@include form-select;
}
}

View file

@ -0,0 +1,163 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Font color of text inputs.
/// @type Color
$input-color: $black !default;
/// Font color of placeholder text within text inputs.
/// @type Color
$input-placeholder-color: $medium-gray !default;
/// Font family of text inputs.
/// @type Font
$input-font-family: inherit !default;
/// Font size of text inputs.
/// @type Number
$input-font-size: rem-calc(16) !default;
/// Background color of text inputs.
/// @type Color
$input-background: $white !default;
/// Background color of focused of text inputs.
/// @type Color
$input-background-focus: $white !default;
/// Background color of disabled text inputs.
/// @type Color
$input-background-disabled: $light-gray !default;
/// Border around text inputs.
/// @type Border
$input-border: 1px solid $medium-gray !default;
/// Border around focused text inputs.
/// @type Color
$input-border-focus: 1px solid $dark-gray !default;
/// Box shadow inside text inputs when not focused.
/// @type Shadow
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default;
/// Box shadow outside text inputs when focused.
/// @type Shadow
$input-shadow-focus: 0 0 5px $medium-gray !default;
/// Cursor to use when hovering over a disabled text input.
/// @type Cursor
$input-cursor-disabled: not-allowed !default;
/// Properties to transition on text inputs.
/// @type Transition
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out !default;
/// Enables the up/down buttons that Chrome and Firefox add to `<input type='number'>` elements.
/// @type Boolean
$input-number-spinners: true !default;
/// Radius for text inputs.
/// @type Border
$input-radius: $global-radius !default;
@mixin form-element {
$height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
display: block;
box-sizing: border-box;
width: 100%;
height: $height;
padding: $form-spacing / 2;
border: $input-border;
margin: 0 0 $form-spacing;
font-family: $input-font-family;
font-size: $input-font-size;
color: $input-color;
background-color: $input-background;
box-shadow: $input-shadow;
border-radius: $input-radius;
@if has-value($input-transition) {
transition: $input-transition;
}
// Focus state
&:focus {
border: $input-border-focus;
background-color: $input-background-focus;
outline: none;
box-shadow: $input-shadow-focus;
@if has-value($input-transition) {
transition: $input-transition;
}
}
}
@mixin foundation-form-text {
// Text inputs
#{text-inputs()},
textarea {
@include form-element;
-webkit-appearance: none;
-moz-appearance: none;
}
// Text areas
textarea {
max-width: 100%;
&[rows] {
height: auto;
}
}
input,
textarea {
// Placeholder text
&::placeholder {
color: $input-placeholder-color;
}
// Disabled/readonly state
&:disabled,
&[readonly] {
background-color: $input-background-disabled;
cursor: $input-cursor-disabled;
}
}
// Reset styles on button-like inputs
[type='submit'],
[type='button'] {
border-radius: $button-radius;
-webkit-appearance: none;
-moz-appearance: none;
}
// Reset Normalize setting content-box to search elements
// scss-lint:disable QualifyingElement
input[type='search'] {
box-sizing: border-box;
}
// Number input styles
[type='number'] {
@if not $input-number-spinners {
-moz-appearance: textfield;
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
}
}