213 lines
5.7 KiB
SCSS
Executable File
213 lines
5.7 KiB
SCSS
Executable File
// Variables
|
|
//------------------------------------------------------
|
|
$form-normal: $mediumgray-dark !default;
|
|
$form-default: $white !default;
|
|
$form-primary: $aqua-dark !default;
|
|
$form-success: $grass-dark !default;
|
|
$form-danger: $grapefruit-dark !default;
|
|
$form-warning: $sunflower-dark !default;
|
|
$form-info: $mint-dark !default;
|
|
|
|
$message-success: $grass-dark !default;
|
|
$message-danger: $grapefruit-dark !default;
|
|
$message-warning: $sunflower-dark !default;
|
|
|
|
$form-font-color: $darkgray-dark !default;
|
|
$form-placeholder-font-color: $lightgray-dark !default;
|
|
|
|
$form-disabled-color: $lightgray-dark !default;
|
|
|
|
$search-query-value: 17px !default;
|
|
|
|
$search-icon-width: 30px !default;
|
|
$search-icon-line-height: 30px !default;
|
|
|
|
// Exports
|
|
//------------------------------------------------------
|
|
|
|
@include exports("form") {
|
|
|
|
/**
|
|
* form
|
|
* --------------------------------------------------
|
|
*/
|
|
.form-control {
|
|
color: $form-font-color;
|
|
border-color: $form-normal;
|
|
|
|
&,
|
|
&:focus {
|
|
@include box-shadow($value: none);
|
|
}
|
|
&:focus {
|
|
border-color: $form-primary;
|
|
}
|
|
&::-moz-placeholder,
|
|
&:-ms-input-placeholder,
|
|
&::-webkit-input-placeholder {
|
|
color: $form-placeholder-font-color;
|
|
}
|
|
|
|
&.disabled,
|
|
&[disabled] {
|
|
border-color: $form-disabled-color;
|
|
background-color: $form-disabled-color;
|
|
}
|
|
}
|
|
|
|
.input-group-btn {
|
|
& .btn + .btn {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: darken($form-normal, 7%);
|
|
}
|
|
& .btn + .btn.btn-default {
|
|
border-color: darken($form-default, 7%);
|
|
}
|
|
& .btn + .btn.btn-primary {
|
|
border-color: darken($form-primary, 7%);
|
|
}
|
|
& .btn + .btn.btn-info {
|
|
border-color: darken($form-info, 7%);
|
|
}
|
|
& .btn + .btn.btn-success {
|
|
border-color: darken($form-success, 7%);
|
|
}
|
|
& .btn + .btn.btn-warning {
|
|
border-color: darken($form-warning, 7%);
|
|
}
|
|
& .btn + .btn.btn-danger {
|
|
border-color: darken($form-danger, 7%);
|
|
}
|
|
}
|
|
|
|
.input-group-addon {
|
|
background-color: $form-normal;
|
|
border-color: darken($form-normal, 7%);
|
|
color: $form-default;
|
|
|
|
& .radio,
|
|
& .checkbox {
|
|
margin: -3px 0 -4px !important;
|
|
}
|
|
}
|
|
|
|
.form-search {
|
|
& .search-query,
|
|
& .search-query:first-child,
|
|
& .search-query:last-child {
|
|
padding: 0 $search-query-value;
|
|
@include radius($type: border-radius, $value: $search-query-value);
|
|
}
|
|
@at-root .input-group .form-control:last-child {
|
|
// padding: 0 $search-query-value 0 10px;
|
|
@include radius($type: border-top-left-radius, $value: 0);
|
|
@include radius($type: border-bottom-left-radius, $value: 0);
|
|
}
|
|
@at-root .input-group .form-control:first-child {
|
|
@include radius($type: border-top-right-radius, $value: 0);
|
|
@include radius($type: border-bottom-right-radius, $value: 0);
|
|
}
|
|
& .btn {
|
|
@include radius($type: border-radius, $value: $search-query-value);
|
|
}
|
|
}
|
|
|
|
.search-only {
|
|
position: relative;
|
|
& .search-icon {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: $search-query-value / 2;
|
|
width: $search-icon-width;
|
|
line-height: $search-icon-line-height;
|
|
text-align: center;
|
|
font-size: $search-query-value;
|
|
color: $form-placeholder-font-color;
|
|
z-index: 20;
|
|
}
|
|
& .form-control:last-child {
|
|
padding-left: $search-icon-width + 10;
|
|
}
|
|
}
|
|
|
|
.has-success {
|
|
& .help-block,
|
|
& .control-label,
|
|
& .radio,
|
|
& .checkbox,
|
|
& .radio-inline,
|
|
& .checkbox-inline {
|
|
color: $message-success;
|
|
}
|
|
& .form-control {
|
|
border-color: $message-success;
|
|
@include box-shadow($value: none);
|
|
}
|
|
& .form-control:focus {
|
|
border-color: $message-success;
|
|
@include box-shadow($value: none);
|
|
}
|
|
& .input-group-addon {
|
|
background-color: $message-success;
|
|
border-color: $message-success;
|
|
}
|
|
& .form-control-feedback {
|
|
color: $message-success;
|
|
}
|
|
}
|
|
.has-warning {
|
|
& .help-block,
|
|
& .control-label,
|
|
& .radio,
|
|
& .checkbox,
|
|
& .radio-inline,
|
|
& .checkbox-inline {
|
|
color: $message-warning;
|
|
}
|
|
& .form-control {
|
|
border-color: $message-warning;
|
|
@include box-shadow($value: none);
|
|
}
|
|
& .form-control:focus {
|
|
border-color: $message-warning;
|
|
@include box-shadow($value: none);
|
|
}
|
|
& .input-group-addon {
|
|
background-color: $message-warning;
|
|
border-color: $message-warning;
|
|
}
|
|
& .form-control-feedback {
|
|
color: $message-warning;
|
|
}
|
|
}
|
|
.has-error {
|
|
& .help-block,
|
|
& .control-label,
|
|
& .radio,
|
|
& .checkbox,
|
|
& .radio-inline,
|
|
& .checkbox-inline {
|
|
color: $message-danger;
|
|
}
|
|
& .form-control {
|
|
border-color: $message-danger;
|
|
@include box-shadow($value: none);
|
|
}
|
|
& .form-control:focus {
|
|
border-color: $message-danger;
|
|
@include box-shadow($value: none);
|
|
}
|
|
& .input-group-addon {
|
|
background-color: $message-danger;
|
|
border-color: $message-danger;
|
|
}
|
|
& .form-control-feedback {
|
|
color: $message-danger;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|