Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
417 lines (345 sloc) 7.18 KB
$gf-form-margin: 3px;
$input-border: 1px solid $input-border-color;
.gf-form {
margin-bottom: $gf-form-margin;
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
position: relative;
&--offset-1 {
margin-left: $spacer;
}
&--grow {
flex-grow: 1;
}
&--flex-end {
justify-content: flex-end;
}
&--alt {
flex-direction: column;
align-items: flex-start;
.gf-form-label {
padding: 4px 0;
}
}
}
.gf-form--has-input-icon {
position: relative;
margin-right: $gf-form-margin;
.gf-form-input-icon {
position: absolute;
top: 50%;
margin-top: -9px;
font-size: $font-size-lg;
left: 10px;
color: $input-color-placeholder;
}
> input {
padding-left: 35px;
&:focus + .gf-form-input-icon {
color: $text-muted;
}
}
.Select--multi .Select-multi-value-wrapper,
.Select-placeholder {
padding-left: 30px;
}
}
.gf-form-disabled {
color: $text-color-weak;
.gf-form-select-wrapper::after {
color: $text-color-weak;
}
a,
.gf-form-input {
color: $text-color-weak;
}
}
.gf-form-group {
margin-bottom: $spacer * 2.5;
}
.gf-form-inline {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
.gf-form + .gf-form {
margin-right: $gf-form-margin;
}
}
.gf-form-button-row {
padding-top: $spacer * 1.5;
a,
button {
margin-right: $spacer;
}
}
.gf-form-label {
padding: $input-padding-y $input-padding-x;
flex-shrink: 0;
font-weight: $font-weight-semi-bold;
font-size: $font-size-sm;
background-color: $input-label-bg;
display: block;
border: $input-btn-border-width solid $input-label-border-color;
border-right: none;
border-radius: $label-border-radius;
&--grow {
flex-grow: 1;
min-height: 2.6rem;
}
&--error {
color: $critical;
}
&:disabled {
color: $text-color-weak;
}
}
.gf-form-label + .gf-form-label {
margin-right: $gf-form-margin;
}
.gf-form-pre {
display: block;
flex-grow: 1;
margin: 0;
margin-right: $gf-form-margin;
border: $input-btn-border-width solid transparent;
border-left: none;
@include border-radius($label-border-radius-sm);
}
.gf-form-checkbox {
flex-shrink: 0;
padding: $input-padding-y $input-padding-x;
line-height: $input-line-height;
.checkbox-label {
display: inline;
cursor: pointer;
padding: $input-padding-y 0.4rem;
line-height: $input-line-height;
}
}
.gf-form-textarea {
max-width: 650px;
}
.gf-form-input {
display: block;
width: 100%;
padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
font-size: $font-size-md;
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
background-image: none;
background-clip: padding-box;
border: $input-border;
border-radius: $input-border-radius;
@include box-shadow($input-box-shadow);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// text areas should be scrollable
@at-root textarea#{&} {
overflow: auto;
white-space: pre-wrap;
}
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
background-color: transparent;
border: 0;
display: none;
}
&.gf-input-small {
padding: $input-padding-y/3 $input-padding-x/3;
font-size: $font-size-xs;
}
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus();
// Placeholder
&::placeholder {
color: $input-color-placeholder;
opacity: 1;
}
&:disabled,
&[readonly] {
background-color: $input-bg-disabled;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
&:disabled {
cursor: $cursor-disabled;
}
&.gf-size-auto {
width: auto;
}
&--dropdown {
padding-right: $input-padding-x*2;
&::after {
position: absolute;
top: 36%;
right: 11px;
font-size: 11px;
background-color: transparent;
color: $text-color;
font: normal normal normal $font-size-sm/1 FontAwesome;
content: '\f0d7';
pointer-events: none;
}
}
&--small {
padding-top: 4px;
padding-bottom: 4px;
font-size: $font-size-sm;
}
&--plaintext {
white-space: unset;
}
}
.gf-form-hint {
width: 100%;
}
.gf-form-hint-text {
display: block;
text-align: right;
padding-top: 0.5em;
}
.gf-form-select-wrapper {
margin-right: $gf-form-margin;
position: relative;
background-color: $input-bg;
.gf-form-select-icon {
position: absolute;
z-index: 1;
left: $input-padding-x;
top: 50%;
margin-top: -7px;
& + .gf-form-input {
position: relative;
z-index: 2;
padding-left: $input-padding-x*3;
background-color: transparent;
option {
// Firefox
color: $black;
}
}
}
.gf-form-input {
margin-right: 0;
}
select.gf-form-input {
text-indent: 0.01px;
text-overflow: '';
padding-right: $input-padding-x*3;
appearance: none;
&:-moz-focusring {
outline: none;
color: transparent;
text-shadow: 0 0 0 $text-color;
}
&.ng-empty {
color: $text-color-weak;
}
}
&::after {
position: absolute;
top: 36%;
right: 11px;
background-color: transparent;
color: $text-color;
font: normal normal normal $font-size-sm/1 FontAwesome;
content: '\f0d7';
pointer-events: none;
font-size: 11px;
}
&--has-help-icon {
&::after {
right: $input-padding-x*3;
}
}
}
.gf-form--v-stretch {
align-items: stretch;
}
.gf-form-btn {
padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
line-height: $input-line-height;
font-size: $font-size-sm;
flex-shrink: 0;
flex-grow: 0;
}
.natural-language-input {
&input[type='number'] {
font-size: $font-size-base;
line-height: $input-line-height;
margin: -6px -5px 0 5px;
padding: $input-padding-y/2 $input-padding-x/2;
}
}
.gf-form-dropdown-typeahead {
margin-right: $gf-form-margin;
position: relative;
background-color: $input-bg;
border: $input-border;
border-radius: $input-border-radius;
&::after {
position: absolute;
top: 35%;
right: $input-padding-x;
background-color: transparent;
color: $input-color;
font: normal normal normal $font-size-sm/1 FontAwesome;
content: '\f0d7';
pointer-events: none;
font-size: 11px;
}
.gf-form-input {
border: none;
}
}
.gf-form-help-icon {
flex-grow: 0;
padding-left: $spacer;
color: $text-color-weak;
&--bold {
color: $text-color-emphasis;
padding-left: 0;
}
&--right-absolute {
position: absolute;
right: $spacer;
top: 10px;
}
&--right-normal {
float: right;
}
&--header {
margin-bottom: $gf-form-margin;
}
&--no-padding {
padding-left: 0;
}
}
select.gf-form-input ~ .gf-form-help-icon {
right: 10px;
}
.gf-form-icon--right-absolute {
position: absolute;
right: $spacer;
top: 10px;
color: $text-muted;
}
.cta-form {
position: relative;
padding: 1.5rem;
background-color: $empty-list-cta-bg;
margin-bottom: 2rem;
border-top: 3px solid $green;
}
.cta-form__close {
position: absolute;
right: 0;
top: 0;
}