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
552 lines (440 loc) • 10 kB
CSS
/* YUI RESETS */
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong{font-weight:bold;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;} em{font-style:italic;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{border:1px solid #000;padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}p,fieldset,table,pre{margin-bottom:1em;}input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;}
/* MISC RESETS */
em, i {
font-weight: inherit;
}
ul, ol {
margin-right: 0;
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
_white-space: pre;
}
/* LISTS */
div.nav ul, ul.nav {
margin: 0 ;
padding: 0 ;
}
div.nav li, ul.nav li {
list-style: none ;
background: none ;
margin: 0 ;
padding: 0 ;
}
div.nav-inline ul, ul.nav-inline {
width: auto ;
}
div.nav-inline li, ul.nav-inline li {
display: inline ;
}
dl.inline {
margin-left: 0;
}
dl.inline dt,
dl.inline dd {
margin: 0;
display: inline;
}
/* HORIZONTAL RULE */
hr {
height: 1px;
color: #777;
}
div.hr {
height: 1px;
overflow: hidden;
border-bottom: 1px solid #777;
margin: 0.8em 0;
}
/* GENERAL-PURPOSE CLASSES */
.hidden {
display: none ;
}
.inline {
display: inline ;
float: none ;
}
.floatright {
display: inline;
float: right ;
}
.floatleft {
display: inline;
float: left ;
}
.clear {
clear: both ;
display: block;
}
.clearleft {
clear: left ;
display: block;
}
.clearright {
clear: right ;
display: block;
}
.left {
text-align: left ;
}
.right {
text-align: right ;
}
.center {
text-align: center ;
}
.nowrap {
white-space: nowrap ;
}
.uppercase {
text-transform: uppercase ;
}
.lowercase {
text-transform: lowercase ;
}
.nocase {
text-transform: default ;
}
.bold {
font-weight: 700 ;
}
.normal {
font-weight: 400 ;
}
.small {
font-size: 86% ;
}
@media print {
.hidden-print {
display: none ;
}
.nopagebreak {
page-break-inside: avoid ;
}
}
@media screen {
.hidden-screen {
display: none ;
}
}
/* HORIZONTAL + VERTICAL CENTERING */
.center1 {
text-align: center;
}
.center2 {
#left: 50%;
}
.center3 {
margin: 0 auto;
#left: -50%;
}
.center1, .vcenter1 {
display: table;
#display: block;
#text-align: auto;
#position: relative;
}
.center2, .vcenter2 {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
}
.center3, .vcenter3 {
display: block;
#position: relative;
#top: -50%;
}
/*
.center1, .vcenter1 { border: 1px solid #f00 !important; }
.center2, .vcenter2 { border: 1px solid #0f0 !important; }
.center3, .vcenter3 { border: 1px solid #00f !important; }
*/
/* CSS BG IMAGE REPLACEMENT */
.bgfx, .bgfx1, .bgfx2 {
display: block;
width: 300px;
height: 50px;
padding: 0 ;
}
a.bgfx, a.bgfx1, a.bgfx2,
a.bgfx:hover, a.bgfx1:hover, a.bgfx2:hover {
text-decoration: none;
cursor: pointer;
cursor: hand;
}
.bgfx {
position: relative;
overflow: hidden;
background: no-repeat 0 0;
}
.bgfx1, .bgfx2 {
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: no-repeat 0 0;
}
/* "HIT" LINKS */
.hit, .hit .hit1 {
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
cursor: hand;
cursor: pointer;
_width: 100%;
_height: 100%;
}
.hit {
z-index: 1000;
}
.hit .hit1 {
#background: #fff;
#filter: alpha(opacity=1);
}
/* EXAMPLE CSS */
/* http://colorschemedesigner.com/#3s40M--K-BRJD */
.primary-1 { background-color: #008CD0 }
.primary-2 { background-color: #2C7091 }
.primary-3 { background-color: #005178 }
.primary-4 { background-color: #58C0F2 }
.primary-5 { background-color: #9FD7F2 }
.secondary-a-1 { background-color: #0BE700 }
.secondary-a-2 { background-color: #36A131 }
.secondary-a-3 { background-color: #078500 }
.secondary-a-4 { background-color: #62F85A }
.secondary-a-5 { background-color: #A7F8A3 }
.secondary-b-1 { background-color: #FE0006 }
.secondary-b-2 { background-color: #B13639 }
.secondary-b-3 { background-color: #920004 }
.secondary-b-4 { background-color: #FF5D61 }
.secondary-b-5 { background-color: #FFA7A9 }
.complement-1 { background-color: #FF8900 }
.complement-2 { background-color: #B27836 }
.complement-3 { background-color: #934F00 }
.complement-4 { background-color: #FFB45D }
.complement-5 { background-color: #FFD6A7 }
/*
bg: #FDEBDC
bg1: #FFBE7D
bg2: #FFAB59
orange: #FF7F00
brown: #913D00
lt. brown: #C4884F
*/
html, body {
color: #000;
background: #fff;
font-family: Arial;
}
body {
font-size: 0.8em;
margin: 1em;
}
h1, h2 {
font-family: "Gill Sans", "Gill Sans MT", Arial, Helvetica, sans-serif;
}
h1 {
font-size: 140%;
font-weight: 400;
text-transform: uppercase;
color: #FF7F00;
margin: 0 0 0.6em;
}
h1 a {
color: #FF7F00;
}
h1 a:hover {
color: #913D00;
}
h1 .title {
color: #913D00;
}
h1 a.title:hover {
color: #FF7F00;
}
h2 {
font-size: 120%;
color: #913D00;
}
h3 {
font-size: 100%;
}
a {
color: #913D00;
}
a:hover {
color: #FF7F00;
}
.divider {
color: #C4884F;
}
#page {
width: 700px;
}
#header h1 {
white-space: nowrap;
}
#footer {
clear: both;
padding-top: 2em;
font-size: 80%;
color: #C4884F;
}
#footer a {
color: #C4884F;
}
#footer a:hover {
color: #FF7F00;
}
#donate {
color: #000;
background: #fff;
border: 1px solid #3D942F;
font-size: 80%;
padding: 0.5em;
float: right;
width: 11em;
margin: 0 0 1.5em 2em;
-moz-box-shadow: 0 0 6px #3D942F;
-webkit-box-shadow: 0 0 6px #3D942F;
box-shadow: 0 0 6px #3D942F;
}
#donate form {
text-align: center;
}
#donate .submit {
width: 74px;
height: 21px;
}
pre {
overflow-x: auto;
}
pre code {
display: block;
border: 1px solid transparent;
_border: none;
}
/* ROUNDED BORDERS */
#donate,
pre,
.syntaxhighlighter,
.syntaxhighlighter .toolbar {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* PRE/CODE BLOCKS, SYNTAX HIGHLIGHTING */
code, pre {
font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
}
a code {
color: inherit;
}
code {
color: #913D00;
font-size: 12px;
font-weight: inherit;
}
pre {
margin: 0 0 0.6em;
padding: 0 0.6em;
border: 1px solid #C4884F;
background: #fee0c5;
color: #000;
}
pre code {
color: #000;
}
pre,
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span {
font-size: 11px ;
line-height: 1.5em ;
}
pre,
.syntaxhighlighter,
.syntaxhighlighter .line:first-child .content {
min-height: 2.99em;
}
.syntaxhighlighter .line:not(:last-child) .content {
min-height: 0;
}
.syntaxhighlighter .content {
min-height: 0\9 ; /* IE6, IE7, IE8 */
}
.syntaxhighlighter,
.syntaxhighlighter code,
.syntaxhighlighter a {
word-wrap: break-word ;
}
.syntaxhighlighter .line .content .block {
background-position: 0 1.5em ;
}
.syntaxhighlighter {
width: auto ;
margin: 0 0 0.6em ;
padding: 0 1px ;
background: #fee0c5 ;
border: 1px solid #C4884F ;
_zoom: 1;
}
.syntaxhighlighter .toolbar {
right: 3px ;
top: 3px ;
}
.syntaxhighlighter .line .number {
color: #C4884F ;
}
.syntaxhighlighter .lines .content {
border-color: #C4884F ;
}
.syntaxhighlighter .lines .line:first-child,
.syntaxhighlighter .lines .line:first-child .content {
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
}
.syntaxhighlighter .lines .line:last-child,
.syntaxhighlighter .lines .line:last-child .content {
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
.syntaxhighlighter.nogutter .lines .line:first-child,
.syntaxhighlighter.nogutter .lines .line:first-child .content {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
.syntaxhighlighter.nogutter .lines .line:last-child,
.syntaxhighlighter.nogutter .lines .line:last-child .content {
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}