fleet/frontend/components/forms/fields/InputField/_styles.scss
Mike Stone f099b2ae22 Create packs (#516)
* Creates new PackComposerPage at /packs/new

* Creates PackForm component

* Adds PackForm to PackComposerPage

* Creates QueriesListItem

* Creates QueriesList

* Creates QueriesListWrapper

* Get all queries when the Packs Composer Page loads

* Form HOC handles updates to formData prop

* Creates form to configure scheduled queries

* QueriesListWrapper renders ConfigurePackQueryForm

* search queries input filters queries list

* Empty state text

* create pack when user submits the new pack form

* Adds Edit pack page to /packs/:pack_id/edit

* API client - get scheduled queries for a pack

* API client - create scheduled query

* Redux config for scheduled queries

* Remove scheduled queries from packs

* Add labels to pack on create

* Add disabled state to the select targets dropdown

* Adds edit route and pushes to new route on edit click

* Adds cancel button to edit pack form

* Adds Checkbox that selects all scheduled queries in table
2016-12-21 12:25:54 -05:00

81 lines
1.6 KiB
SCSS

.input-field {
@include transition(border 150ms ease-in-out, box-shadow 150ms ease-in-out);
line-height: 34px;
border-radius: 2px;
background-color: $white;
border: solid 1px $accent-medium;
font-size: 16px;
padding: $pad-xsmall 12px;
color: $text-dark;
font-family: 'Oxygen', sans-serif;
box-sizing: border-box;
height: 40px;
@include placeholder {
color: $accent-text;
}
&:focus {
outline: none;
box-shadow: inset 0 0 8px 0 rgba($black, 0.1);
border-color: $link-light;
border-bottom-color: $brand;
}
&--error {
@include transition(background 150ms ease-in-out, color 150ms ease-in-out);
border-color: $alert;
background-color: $alert;
color: $white;
box-shadow: inset 0 -4px 4px 0 rgba($black, 0.1);
&:focus {
box-shadow: inset 0 0 8px 0 rgba($black, 0.1);
border-bottom-color: $alert;
background-color: $white;
color: $text-dark;
}
}
&--password {
letter-spacing: 7px;
}
&__textarea {
min-height: 100px;
max-width: 100%;
display: block;
}
&__label {
display: block;
font-size: $base;
font-weight: $light;
color: $text-dark;
margin-bottom: $pad-xsmall;
&--error {
color: $alert;
}
}
&__wrapper {
margin-bottom: $pad-base;
}
&__hint {
font-size: 14px;
font-weight: $normal;
line-height: 1.57;
letter-spacing: 1px;
color: $accent-text;
code {
color: $brand-light;
background-color: $accent-light;
padding: 2px;
font-family: 'SourceCodePro', $monospace;
}
}
}