artistry/src/styl/input/input-settings.styl

A powerful and configurable stylesheet

@require "../settings.styl";
$input-padding ?= $default-padding;
$input-padding-small ?= $default-padding-small;
$input-padding-large ?= $default-padding-large;
$input-margin ?= $default-margin;
$input-border-width ?= $default-border-width;
$input-border-radius ?= $default-border-radius;
$input-box-shadow-height-0 ?= $box-shadow-height-0;//0 1px 5px 0 #333;
$input-box-shadow-height-1 ?= $box-shadow-height-1;//0 2px 10px 0 #333;
$input-color-variance ?= $darker / 2;
$input-font-size ?= $default-font-size;
$input-font-size-small ?= $default-font-size-small;
$input-font-size-large ?= $default-font-size-large;

$input-default-background-color ?= $basic-color;
$input-default-color ?= $basic-color-alt;
$input-default-border-color ?= $default-border-color;

//$input-selected-background-color ?= darken($widget-color, $input-color-variance);
//$input-selected-color ?= $widget-color-alt;
//$input-selected-border-color ?= darken($default-border-color, $input-color-variance);

$input-focus-border-color ?= darken($default-border-color, $input-color-variance);
//$input-focus-box-shadow ?= 0 0 6px 0 #003;
//$input-disabled-opacity ?= 0.65;

$button-bar-margin ?= $default-padding;
$button-bar-margin-small ?= $default-padding-small;
$button-bar-margin-large ?= $default-padding-large;
$button-bar-background-color ?= $default-header-background-color;

$button-text-transform ?= uppercase;

$input-required-border-color ?= $black;

$input-success-background-color ?= $success-color;
$input-success-color ?= $success-color-alt;
$input-info-background-color ?= $info-color;
$input-info-color ?= $info-color-alt;
$input-warning-background-color ?= $warning-color;
$input-warning-color ?= $warning-color-alt;
$input-danger-background-color ?= $danger-color;
$input-danger-color ?= $danger-color-alt;

$button-default-background-color ?= $widget-color;
$button-default-color ?= $widget-color-alt;
$button-default-border-color ?= darken($widget-color, $input-color-variance);

$button-primary-background-color ?= $primary-color;
$button-primary-color ?= $primary-color-alt;
$button-primary-border-color ?= darken($primary-color, $input-color-variance);

$button-danger-background-color ?= $danger-color;
$button-danger-color ?= $danger-color-alt;
$button-danger-border-color ?= darken($danger-color, $input-color-variance);

$button-textonly-background-color ?= $widget-color;
$button-textonly-default-color ?= lighten($widget-color-alt, $input-color-variance);
$button-textonly-primary-color ?= lighten($primary-color, $input-color-variance);
$button-textonly-danger-color ?= lighten($danger-color, $input-color-variance);

$button-outline-border-color ?= lighten($widget-color-alt, $input-color-variance);
$button-outline-border-width ?= 1px;

:root {
    // Colors
    --button-default-border-color: $button-default-border-color;
    --button-default-color: $button-default-color;
    --button-default-background-color: $button-default-background-color;

    --button-primary-border-color: $button-primary-border-color;
    --button-primary-color: $button-primary-color;
    --button-primary-background-color: $button-primary-background-color;

    --button-danger-border-color: $button-danger-border-color;
    --button-danger-color: $button-danger-color;
    --button-danger-background-color: $button-danger-background-color;

    // Button Colors
    --button-textonly-default-color: $button-textonly-default-color;
    --button-textonly-primary-color: $button-textonly-primary-color;
    --button-textonly-danger-color: $button-textonly-danger-color;

    --button-textonly-background-color: $button-textonly-background-color;
    --button-outline-border-color: $button-outline-border-color;

    // Color Focus
    --input-focus-border-color: $input-focus-border-color;

    // All
    --input-padding: $input-padding;
    --input-font-size: $input-font-size;

    --input-padding-small: $input-padding-small;
    --input-font-size-small: $input-font-size-small;
    --input-padding-large: $input-padding-large;
    --input-font-size-large: $input-font-size-large;

    // Button
    --input-color-variance: $input-color-variance;
    --input-brighter: brightness(calc(100% + var(--input-color-variance)));
    --input-darker: brightness(calc(100% - var(--input-color-variance)));
    --input-locked: contrast(40%) brightness(110%);
}