alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
832 lines (622 loc) • 14.4 kB
CSS
/** Added to outer field elements to hide them **/
.alpaca-hidden
{
display: none;
}
/** Added to every field outer element **/
.alpaca-field
{
}
/** Added to every container outer field element **/
.alpaca-container
{
}
/** Added to the optional label (or legend) accompanying any container **/
.alpaca-container-label
{
}
/** Added to every container item field within a container **/
.alpaca-container-item
{
}
/** Added to the first container item field within a container **/
.alpaca-container-item-first
{
}
/** Added to the last container item field within a container **/
.alpaca-container-item-last
{
}
/** Added to a container to indicate it is empty **/
.alpaca-container-empty
{
}
/** Added to the dom element holding the toolbar for an array **/
.alpaca-array-toolbar
{
}
/** Added to a button in the array toolbar that triggers an action **/
.alpaca-array-toolbar-action
{
}
/** Added to the dom element holding the actionbar for each array item **/
.alpaca-array-actionbar
{
}
/** Added to a button in an array item actionbar that triggers an action **/
.alpaca-array-actionbar-action
{
}
/** Added to every control outer field element **/
.alpaca-control
{
}
/** Added to the optional label accompanying any control **/
.alpaca-control-label
{
}
/** ******************************************************** **/
/** STATE LABELS **/
/** ******************************************************** **/
/** Added to top-most control when rendering in display mode **/
.alpaca-display
{
}
/** Added to top-most control when rendering in create mode **/
.alpaca-create
{
}
/** Added to top-most control when rendering in edit mode **/
.alpaca-edit
{
}
/** Added to any field that is optional **/
.alpaca-required
{
}
/** Added to any field that is required **/
.alpaca-optional
{
}
/** Added to any field that is readonly **/
.alpaca-readonly
{
}
/** Added to any field that is disabled **/
.alpaca-disabled
{
}
/** Added to the container that holds Alpaca field helper text **/
.alpaca-helper
{
}
/** Added to form containers that are rendering in horizontal mode **/
.alpaca-horizontal
{
}
/** Added to form containers that are rendering in vertical mode **/
.alpaca-vertical
{
}
/** Added to the top most container element **/
.alpaca-top
{
}
/** Added to fields that are valid **/
.alpaca-valid
{
}
/** Added to fields that have run through validation and are invalid **/
.alpaca-invalid
{
}
/** Added to fields that have run through validation and are invalid but are currently hiding invalidation errors **/
.alpaca-invalid-hidden
{
}
/* Added to additional DOM elements to mark validation messages */
.alpaca-message
{
}
/** Added to messages that are for invalidation states that are current hidden (hideInitValidationError) **/
.alpaca-message-hidden
{
}
/** Added to buttons that are marked disabled */
.alpaca-button-disabled
{
}
/** ******************************************************** **/
/** ICONS **/
/** ******************************************************** **/
.alpaca-icon-helper
{
}
.alpaca-icon-required
{
}
/** ******************************************************** **/
/** OTHER **/
/** ******************************************************** **/
.alpaca-autocomplete
{
}
/** Added to indicate hover state **/
.alpaca-hover
{
}
/** General purpose HTML clear **/
.alpaca-clear
{
clear: both;
}
.alpaca-float-right
{
float: right;
}
/** ************************************** **/
/** TWITTER TYPEAHEAD **/
/** ************************************** **/
.twitter-typeahead .tt-dropdown-menu
{
background-color: white;
border: 1px #ccc solid;
padding: 10px;
color: #999;
width: 100%;
padding-bottom: 0px;
}
.twitter-typeahead .tt-dropdown-menu P
{
font-size: 1em;
}
.tt-suggestion.tt-is-under-cursor
{
background-color: #ccc;
color: #333;
}
.tt-dropdown-menu
{
background-color: white;
border: 1px solid rgb(204, 204, 204);
width: 100%;
}
/** ************************************** **/
/** EDITOR FIELD **/
/** ************************************** **/
.alpaca-controlfield-editor
{
position: relative;
width: 100%;
height: 300px;
border: 1px #ccc solid;
}
.alpaca-controlfield-editor .control-field-editor-el
{
position:absolute;
top:0;
bottom:0;
left: 0;
right:0
}
/** ************************************** **/
/** DATEPICKER (jQueryUI) **/
/** ************************************** **/
#ui-datepicker-div
{
display: none;
background-color:white;
z-index: 9999999 ;
width: 22em ;
}
/* Fix for Chrome issue with Button text */
.ui-button .ui-button-text {
white-space: nowrap;
}
.ui-datepicker
{
z-index: 100;
}
/** ************************************** **/
/** FILE UPLOAD (jQueryUI) **/
/** ************************************** **/
.alpaca-fileupload-container
{
border: 1px #ccc solid;
padding: 10px;
border-radius: 5px;
}
.alpaca-fileupload-container .row
{
margin-bottom: 10px;
}
.alpaca-fileupload-well
{
/*border: 1px #ccc solid;*/
padding: 10px;
border-radius: 5px;
min-height: 100px;
}
.alpaca-fileupload-container table
{
border: 1px #ccc solid;
padding: 10px;
border-radius: 5px;
}
.alpaca-fileupload-well p
{
padding-top: 20px;
color: #888;
}
.alpaca-fileupload-well table tbody.files tr td.name
{
word-wrap: break-word;
}
/** ************************************** **/
/** ACE EDITOR **/
/** ************************************** **/
.ace_editor
{
border: 1px solid rgb(204, 204, 204);
}
/** ************************************** **/
/** CK EDITOR **/
/** ************************************** **/
.alpaca-field-ckeditor.alpaca-invalid > .cke
{
border-color: #f04124;
}
/** ************************************** **/
/** OPTIONTREE **/
/** ************************************** **/
.alpaca-field-optiontree {
}
.alpaca-field-optiontree .optiontree {
}
.alpaca-field-optiontree .optiontree .optiontree-selector {
}
.alpaca-field-optiontree.optiontree-horizontal {
}
.alpaca-field-optiontree.optiontree-horizontal .optiontree {
display: inline-block;
}
.alpaca-field-optiontree.optiontree-horizontal .optiontree .optiontree-selector {
display: inline-block;
padding-left: 4px;
}
.alpaca-field-optiontree.optiontree-horizontal input {
display: inline-block;
width: auto;
}
.alpaca-field-optiontree.optiontree-horizontal label {
display: block;
}
/** ************************************** **/
/** TABLE **/
/** ************************************** **/
.alpaca-field-table .alpaca-field-tablerow label.control-label,
table.dt-rowReorder-float .alpaca-field-tablerow label.control-label
{
display: none;
}
.alpaca-field-table .actionbar, .table .actionbar,
table.dt-rowReorder-float .actionbar, .table .actionbar
{
white-space: nowrap;
text-align: center;
}
.alpaca-field-table table tr td .alpaca-field,
table.dt-rowReorder-float tr td .alpaca-field
{
width: 100%;
}
.alpaca-field-table table tr td .alpaca-field .form-control,
table.dt-rowReorder-float tr td .alpaca-field .form-control
{
width: 100%;
}
.alpaca-field-table .form-group,
table.dt-rowReorder-float .form-group
{
margin-bottom: 0px;
}
.alpaca-field-table .form-group.alpaca-field-checkbox,
table.dt-rowReorder-float .form-group.alpaca-field-checkbox
{
text-align: center;
}
.alpaca-field-table .alpaca-control.checkbox,
table.dt-rowReorder-float .alpaca-control.checkbox
{
padding-top: 6px;
}
.alpaca-field-table table tr td.actionbar .alpaca-array-actionbar,
table.dt-rowReorder-float tr td.actionbar .alpaca-array-actionbar
{
padding-bottom: 0px;
display: inline-block;
}
.alpaca-field-table .actionbar .alpaca-array-actionbar.btn-group,
table.dt-rowReorder-float .actionbar .alpaca-array-actionbar.btn-group
{
width: auto;
}
.alpaca-field-table .alpaca-table-column-hidden,
table.dt-rowReorder-float .alpaca-table-column-hidden
{
display: none;
}
.alpaca-field-table .alpaca-table-reorder-index-header,
table.dt-rowReorder-float .alpaca-table-reorder-index-header
{
display: none;
}
.alpaca-field-table .alpaca-table-reorder-index-cell,
table.dt-rowReorder-float .alpaca-table-reorder-index-cell
{
display: none;
}
.alpaca-field-table .alpaca-table-reorder-draggable-header,
table.dt-rowReorder-float .alpaca-table-reorder-draggable-header
{
}
.alpaca-field-table .alpaca-table-reorder-draggable-cell,
table.dt-rowReorder-float .alpaca-table-reorder-draggable-cell
{
color: #bbb;
font-size: 20px;
text-align: center;
vertical-align: middle;
padding-top: 11px;
cursor: pointer;
}
.alpaca-field-radio.disabled .alpaca-control.radio
{
color: grey;
}
.alpaca-field-radio.disabled .alpaca-control.radio label
{
cursor: inherit;
}
.alpaca-control.radio
{
min-height: inherit;
height: inherit;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin-left: 10px;
}
.alpaca-control.radio label
{
line-height: 20px;
}
/** multiselect **/
.has-error .multiselect
{
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.btn.multiselect
{
white-space: normal;
}
.alpaca-field-table > legend
{
display: none;
}
/*** CHOOSER **/
.alpaca-field-chooser
{
}
.alpaca-field-chooser .alpaca-control
{
}
.alpaca-field-chooser .alpaca-control .chooser-panel .chooser-panel-header
{
min-height: 34px;
margin-bottom: 20px;
}
.alpaca-field-chooser .alpaca-control .chooser-panel .chooser-panel-items
{
background-color: white;
border: 1px #ccc solid;
border-radius: 4px;
overflow-y: scroll;
overflow-y: -moz-scrollbars-vertical;
}
.alpaca-field-chooser .alpaca-control .chooser-panel .chooser-panel-items .chooser-item
{
min-height: 34px;
}
.alpaca-field-chooser .alpaca-control .chooser-panel .chooser-panel-items .chooser-item.disabled .chooser-item-text
{
color: #ccc;
}
.alpaca-field-chooser .alpaca-control .chooser-panel .chooser-panel-items .chooser-item:not(:last-child)
{
border-bottom: 1px #ddd solid;
}
.alpaca-field-chooser .alpaca-control .chooser-panel .chooser-panel-items .chooser-item .chooser-item-text
{
margin-left: 10px;
line-height: 34px;
display: inline-block;
}
.alpaca-field-chooser .alpaca-control .chooser-panel .chooser-panel-items .chooser-item .chooser-item-buttons
{
float: right;
margin: 5px;
}
.alpaca-field-chooser .chooser-item-message
{
color: #aaa;
}
.alpaca-icon-required
{
display: inline-block;
}
.alpaca-icon-helper
{
display: inline-block;
}
.alpaca-container.alpaca-vertical .alpaca-control-label
{
display: block;
}
.alpaca-container.alpaca-vertical .alpaca-control
{
display: block;
}
.alpaca-control-label
{
font-weight: 600;
}
/*!
* Gridpak Beta CSS
*
* Generator - http://gridpak.com/
* Created by @erskinedesign
*/
/* Reusable column setup */
.col {
border:0px solid rgba(0,0,0,0);
float:left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-moz-background-clip:padding-box ;
-webkit-background-clip:padding-box ;
background-clip:padding-box ;
}
/* 1. 12 Column Grid 0px - 959px
-----------------------------------------------------------------------------
Span 1: 8.33333333333%
Span 2: 16.6666666667%
Span 3: 25.0%
Span 4: 33.3333333333%
Span 5: 41.6666666667%
Span 6: 50.0%
Span 7: 58.3333333333%
Span 8: 66.6666666667%
Span 9: 75.0%
Span 10: 83.3333333333%
Span 11: 91.6666666667%
Span 12: 100%
----------------------------------------------------------------------------- */
@media screen and (min-width: 0px) and (max-width: 959px) {
.col {
margin-left:0%;
padding:0 0%;
}
.row .col:first-child {
margin-left:0;
}
/*
Add your semantic classnames in alongside their corresponding spans here. e.g.
.span_3,
.my_semantic_class_name {
...
}
*/
.span_1 {
width:8.33333333333%;
}
.span_2 {
width:16.6666666667%;
}
.span_3 {
width:25.0%;
}
.span_4 {
width:33.3333333333%;
}
.span_5 {
width:41.6666666667%;
}
.span_6 {
width:50.0%;
}
.span_7 {
width:58.3333333333%;
}
.span_8 {
width:66.6666666667%;
}
.span_9 {
width:75.0%;
}
.span_10 {
width:83.3333333333%;
}
.span_11 {
width:91.6666666667%;
}
.span_12 {
margin-left:0;
width:100%;
}
}
/* 2. 12 Column Grid 960px - Infinity
-----------------------------------------------------------------------------
Span 1: 8.33333333333%
Span 2: 16.6666666667%
Span 3: 25.0%
Span 4: 33.3333333333%
Span 5: 41.6666666667%
Span 6: 50.0%
Span 7: 58.3333333333%
Span 8: 66.6666666667%
Span 9: 75.0%
Span 10: 83.3333333333%
Span 11: 91.6666666667%
Span 12: 100%
----------------------------------------------------------------------------- */
@media screen and (min-width: 960px) {
.col {
margin-left:0%;
padding:0 0%;
}
.row .col:first-child {
margin-left:0;
}
.span_1 {
width:8.33333333333%;
}
.span_2 {
width:16.6666666667%;
}
.span_3 {
width:25.0%;
}
.span_4 {
width:33.3333333333%;
}
.span_5 {
width:41.6666666667%;
}
.span_6 {
width:50.0%;
}
.span_7 {
width:58.3333333333%;
}
.span_8 {
width:66.6666666667%;
}
.span_9 {
width:75.0%;
}
.span_10 {
width:83.3333333333%;
}
.span_11 {
width:91.6666666667%;
}
.span_12 {
margin-left:0;
width:100%;
}
}