Add selects, fix Firefox nav bug, make size 995 bytes

This commit is contained in:
Owen Versteeg 2014-10-28 23:22:26 -04:00
parent 24c8569f71
commit dae6201667
27 changed files with 84 additions and 80 deletions

View file

@ -14,7 +14,7 @@ i="0"
echo "var css = {" >> compiledcss.js
#Begin making compiledcss.js
echo -n "/*Copyright 2014 Owen Versteeg; MIT licensed*/" >> entireframework.min.css
echo -n "/* Copyright 2014 Owen Versteeg; MIT licensed */" >> entireframework.min.css
#Begin making entireframework.min.css; -n is to remove the newline
#For each subtype, we compile the LESS file, minify it, and concatenate it into two files:

View file

@ -7,7 +7,7 @@
cursor: pointer;
display: inline-block;
/* Enables non-inline-block elements like <div>s to be buttons */
margin: .2em .3em .2em 0;
margin: 2px 0;
padding: 12px 30px 14px;
}
.btn:hover {

View file

@ -1 +1 @@
.btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:.2em .3em .2em 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 15px 11px}
.btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:2px 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 15px 11px}

View file

@ -1,24 +1,34 @@
textarea,
input,
label > * {
display: inline;
}
form > * {
display: block;
margin-bottom: 10px;
}
.addon,
.btn-sm,
.nav a {
.nav a,
textarea,
input,
select {
font-size: 14px;
}
textarea,
input {
input,
select {
border: 1px solid #ccc;
padding: 8px;
}
textarea:focus,
input:focus {
input.focus {
border-color: #5ab;
}
textarea,
input[type='text'] {
input[type=text] {
-webkit-appearance: none;
/* make iOS inputs pretty */
width: 13em;
outline: 0;
}
.addon {
box-shadow: 0 0 0 1px #ccc;

View file

@ -1 +1 @@
textarea,input,.addon,.btn-sm,.nav a{font-size:14px}textarea,input{border:1px solid #ccc;padding:8px}textarea:focus,input:focus{border-color:#5ab}textarea,input[type='text']{-webkit-appearance:none;width:13em}.addon{box-shadow:0 0 0 1px #ccc;padding:8px 12px}
label>*{display:inline}form>*{display:block;margin-bottom:10px}.addon,.btn-sm,.nav a,textarea,input,select{font-size:14px}textarea,input,select{border:1px solid #ccc;padding:8px}textarea:focus,input.focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0}.addon{box-shadow:0 0 0 1px #ccc;padding:8px 12px}

View file

@ -1,6 +1,7 @@
body,
textarea,
input {
input,
select {
background: 0;
border-radius: 0;
font: 16px sans-serif;
@ -13,9 +14,6 @@ input {
.nav a {
text-decoration: none;
}
* {
outline: 0;
}
.container {
margin: 0 20px;
width: auto;
@ -26,10 +24,7 @@ input {
width: 1270px;
}
}
label > * {
display: inline;
}
form > * {
display: block;
margin-bottom: 10px;
h2,
.btn {
font-size: 2em;
}

View file

@ -1 +1 @@
body,textarea,input{background:0;border-radius:0;font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}label>*{display:inline}form>*{display:block;margin-bottom:10px}
body,textarea,input,select{background:0;border-radius:0;font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}h2,.btn{font-size:2em}

View file

@ -7,8 +7,8 @@
.col {
float: left;
}
.c12,
.table {
.table,
.c12 {
width: 100%;
}
.c11 {

View file

@ -1 +1 @@
.row{margin:1% 0;overflow:auto}.col{float:left}.c12,.table{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}
.row{margin:1% 0;overflow:auto}.col{float:left}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}

View file

@ -2,7 +2,3 @@
h1 {
font-size: 4em;
}
h2,
.btn {
font-size: 2em;
}

View file

@ -1 +1 @@
h1{font-size:4em}h2,.btn{font-size:2em}
h1{font-size:4em}

View file

@ -1,5 +1,8 @@
.ico {
font: 33px Arial Unicode MS, Lucida Sans Unicode;
/* This combo of Unicode fonts means Min's icons support OSX 10.5+, Windows 98+, and Ubuntu. */
/* We don't use ems because 33px is a great size cross-browser and OS for nice icons */
/*
This combo of Unicode fonts means Min's icons support OSX 10.5+, Windows 98+, and Ubuntu.
We don't use ems because 33px is a great size cross-browser and OS for nice icons
*/
}

View file

@ -1,5 +1,5 @@
.msg {
padding: 1.5em;
background: #def;
border-left: 5px solid #59d;
padding: 1.5em;
}

View file

@ -1 +1 @@
.msg{padding:1.5em;background:#def;border-left:5px solid #59d}
.msg{background:#def;border-left:5px solid #59d;padding:1.5em}

View file

@ -18,6 +18,10 @@
position: relative;
top: -1px;
}
.nav .pagename {
font-size: 22px;
top: 1px;
}
.btn.btn-close {
background: #000;
float: right;
@ -25,10 +29,6 @@
margin-top: -54px;
display: none;
}
.nav .pagename {
font-size: 22px;
top: 1px;
}
@media (max-width: 500px) {
.btn.btn-close {
display: block;
@ -40,6 +40,7 @@
.pagename {
margin-top: -11px;
}
.nav:active,
.nav:focus {
height: auto;
/* Necesary for animations

View file

@ -1 +1 @@
.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin-top:-54px;display:none}.nav .pagename{font-size:22px;top:1px}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}
.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin-top:-54px;display:none}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}

View file

@ -3,7 +3,7 @@
padding: .5em;
text-align: left;
}
.table tbody > *:nth-child(2n-1) {
.table tbody > :nth-child(2n-1) {
/* We use tbody to ensure that we don't shade the heading - this preserves the order of the shading */
background: #ddd;
/* Shade every other table row */

View file

@ -1 +1 @@
.table th,.table td{padding:.5em;text-align:left}.table tbody>*:nth-child(2n-1){background:#ddd}
.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}

View file

@ -1,11 +1,11 @@
var css = {
"general": "body,textarea,input{background:0;border-radius:0;font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}label>*{display:inline}form>*{display:block;margin-bottom:10px}",
"buttons": ".btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:.2em .3em .2em 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 15px 11px}",
"grid": ".row{margin:1% 0;overflow:auto}.col{float:left}.c12,.table{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}",
"headings": "h1{font-size:4em}h2,.btn{font-size:2em}",
"general": "body,textarea,input,select{background:0;border-radius:0;font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}h2,.btn{font-size:2em}",
"buttons": ".btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:2px 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 15px 11px}",
"grid": ".row{margin:1% 0;overflow:auto}.col{float:left}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}",
"headings": "h1{font-size:4em}",
"icons": ".ico{font:33px Arial Unicode MS,Lucida Sans Unicode}",
"forms": "textarea,input,.addon,.btn-sm,.nav a{font-size:14px}textarea,input{border:1px solid #ccc;padding:8px}textarea:focus,input:focus{border-color:#5ab}textarea,input[type='text']{-webkit-appearance:none;width:13em}.addon{box-shadow:0 0 0 1px #ccc;padding:8px 12px}",
"navbar": ".nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin-top:-54px;display:none}.nav .pagename{font-size:22px;top:1px}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}",
"tables": ".table th,.table td{padding:.5em;text-align:left}.table tbody>*:nth-child(2n-1){background:#ddd}",
"messages": ".msg{padding:1.5em;background:#def;border-left:5px solid #59d}"
"forms": "label>*{display:inline}form>*{display:block;margin-bottom:10px}.addon,.btn-sm,.nav a,textarea,input,select{font-size:14px}textarea,input,select{border:1px solid #ccc;padding:8px}textarea:focus,input.focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0}.addon{box-shadow:0 0 0 1px #ccc;padding:8px 12px}",
"navbar": ".nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin-top:-54px;display:none}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}",
"tables": ".table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}",
"messages": ".msg{background:#def;border-left:5px solid #59d;padding:1.5em}"
};

View file

@ -1 +1 @@
/*Copyright 2014 Owen Versteeg; MIT licensed*/body,textarea,input{background:0;border-radius:0;font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}label>*{display:inline}form>*{display:block;margin-bottom:10px}.btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:.2em .3em .2em 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 15px 11px}.row{margin:1% 0;overflow:auto}.col{float:left}.c12,.table{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}h1{font-size:4em}h2,.btn{font-size:2em}.ico{font:33px Arial Unicode MS,Lucida Sans Unicode}textarea,input,.addon,.btn-sm,.nav a{font-size:14px}textarea,input{border:1px solid #ccc;padding:8px}textarea:focus,input:focus{border-color:#5ab}textarea,input[type='text']{-webkit-appearance:none;width:13em}.addon{box-shadow:0 0 0 1px #ccc;padding:8px 12px}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin-top:-54px;display:none}.nav .pagename{font-size:22px;top:1px}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>*:nth-child(2n-1){background:#ddd}.msg{padding:1.5em;background:#def;border-left:5px solid #59d}
/* Copyright 2014 Owen Versteeg; MIT licensed */body,textarea,input,select{background:0;border-radius:0;font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}h2,.btn{font-size:2em}.btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:2px 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 15px 11px}.row{margin:1% 0;overflow:auto}.col{float:left}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}h1{font-size:4em}.ico{font:33px Arial Unicode MS,Lucida Sans Unicode}label>*{display:inline}form>*{display:block;margin-bottom:10px}.addon,.btn-sm,.nav a,textarea,input,select{font-size:14px}textarea,input,select{border:1px solid #ccc;padding:8px}textarea:focus,input.focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0}.addon{box-shadow:0 0 0 1px #ccc;padding:8px 12px}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin-top:-54px;display:none}@media(max-width:870px){.row .col{width:100%}}@media(min-width:1310px){.container{margin:auto;width:1270px}}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}.msg{background:#def;border-left:5px solid #59d;padding:1.5em}

View file

@ -5,7 +5,7 @@
color: #fff;
cursor: pointer;
display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
margin: .2em .3em .2em 0;
margin: 2px 0;
padding: 12px 30px 14px;
}

View file

@ -1,19 +1,29 @@
textarea, input, .addon, .btn-sm, .nav a {
label > * {
display:inline;
}
form > * {
display: block;
margin-bottom: 10px;
}
.addon, .btn-sm, .nav a, textarea, input, select {
font-size: 14px;
}
textarea, input {
textarea, input, select {
border: 1px solid #ccc;
padding: 8px;
&:focus {
border-color: #5ab;
}
}
textarea, input[type='text'] {
textarea:focus, input.focus {
border-color: #5ab;
}
textarea, input[type=text] {
-webkit-appearance: none; /* make iOS inputs pretty */
width: 13em;
outline: 0;
}
.addon {

View file

@ -1,4 +1,4 @@
body, textarea, input {
body, textarea, input, select {
background: 0;
border-radius: 0;
font: 16px sans-serif;
@ -13,10 +13,6 @@ body, textarea, input {
text-decoration: none;
}
* {
outline: 0;
}
.container {
margin: 0 20px;
width: auto;
@ -29,11 +25,7 @@ body, textarea, input {
}
}
label > * {
display:inline;
h2, .btn {
font-size: 2em;
}
form > * {
display: block;
margin-bottom: 10px;
}

View file

@ -9,7 +9,7 @@
float: left;
}
.c12, .table {
.table, .c12 {
width: 100%;
}

View file

@ -3,7 +3,3 @@
h1 {
font-size: 4em;
}
h2, .btn {
font-size: 2em;
}

View file

@ -19,6 +19,11 @@
top: -1px;
}
.nav .pagename {
font-size: 22px;
top: 1px;
}
.btn.btn-close {
background: #000;
float: right;
@ -27,11 +32,6 @@
display: none;
}
.nav .pagename {
font-size: 22px;
top: 1px;
}
@media (max-width:500px) {
.btn.btn-close {
display: block;
@ -43,7 +43,7 @@
.pagename {
margin-top: -11px;
}
.nav:focus {
.nav:active,.nav:focus {
height: auto;
/* Necesary for animations
max-height: 500px;
@ -68,3 +68,4 @@
width: 50%;
}
}

View file

@ -3,7 +3,7 @@
text-align: left;
}
.table tbody>*:nth-child(2n-1) {
.table tbody>:nth-child(2n-1) {
/* We use tbody to ensure that we don't shade the heading - this preserves the order of the shading */
background: #ddd; /* Shade every other table row */
}