Reduce size substantially+add messages

This commit is contained in:
Owen Versteeg 2014-09-06 17:41:23 -04:00
parent c3493c6d1d
commit 02cf36b33f
20 changed files with 69 additions and 55 deletions

View file

@ -3,7 +3,7 @@
mkdir compiled -p
#The compiled folder holds all the separate compiled CSS files.
subtypes=(general buttons grid headings icons forms navbar tables)
subtypes=(general buttons grid headings icons forms navbar tables messages)
#You can change the subtypes used by changing this.
rm -f compiledcss.js

View file

@ -2,13 +2,11 @@
background: #999;
border-radius: 6px;
/* rounded corners */
border: 0;
color: #fff;
cursor: pointer;
display: inline-block;
/* Enables non-inline-block elements like <div>s to be buttons */
margin: .2em .3em .2em 0;
padding: 12px 30px 14px;
}
@ -25,13 +23,11 @@
.btn-a:hover {
background: #09d;
/* darken(@btn-a-bg, 5%) */
}
.btn-a:active,
.btn-a:focus {
background: #08b;
/* darken(@btn-a-bg, 10%) */
}
.btn-b {
background: #3c5;
@ -39,13 +35,11 @@
.btn-b:hover {
background: #2b4;
/* darken(@btn-b-bg, 5%) */
}
.btn-b:active,
.btn-b:focus {
background: #2a4;
/* darken(@btn-b-bg, 10%) */
}
.btn-c {
background: #d33;
@ -53,17 +47,14 @@
.btn-c:hover {
background: #c22;
/* darken(@btn-c-bg, 5%) */
}
.btn-c:active,
.btn-c:focus {
background: #b22;
/* darken(@btn-c-bg, 10%) */
}
.btn-sm {
border-radius: 4px;
/* rounded corners */
padding: 10px 15px 11px;
}

26
compiled/forms.css Normal file
View file

@ -0,0 +1,26 @@
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;
/* make iOS inputs pretty */
width: 13em;
}
.addon {
box-shadow: 0 0 0 1px #ccc;
padding: 8px 12px;
}

1
compiled/forms.min.css vendored Normal file
View file

@ -0,0 +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}

View file

@ -1,10 +1,10 @@
body,
textarea,
input {
background: 0;
border-radius: 0;
font: 16px sans-serif;
margin: 0;
border-radius: 0;
background: 0;
}
.smooth {
transition: all .2s;
@ -22,8 +22,8 @@ input {
}
@media (min-width: 1310px) {
.container {
width: 1270px;
margin: auto;
width: 1270px;
}
}
label > * {

View file

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

View file

@ -3,7 +3,6 @@
margin: 1% 0;
overflow: auto;
/* required - without this, the page layout is screwed up */
}
.col {
float: left;

View file

@ -1,7 +1,5 @@
.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 */
}

5
compiled/messages.css Normal file
View file

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

1
compiled/messages.min.css vendored Normal file
View file

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

View file

@ -8,24 +8,22 @@
height: 24px;
padding: 11px 0 15px;
/* TODO: migrate to ems (currently we don't use them because of iOS compatibility problems (has to do with unicode icon for close)) */
/* Uncomment for animations
max-height: 1.5em;
*/
}
.nav a {
padding-right: 1em;
color: #aaa;
top: -1px;
padding-right: 1em;
position: relative;
top: -1px;
}
.btn.btn-close {
background: #000;
visibility: hidden;
float: right;
margin-top: -54px;
font-size: 25px;
margin-top: -54px;
display: none;
}
.nav .pagename {
font-size: 22px;
@ -33,39 +31,37 @@
}
@media (max-width: 500px) {
.btn.btn-close {
visibility: visible;
display: block;
}
.nav {
/* transition: max-height .5s ease-in-out, height .5s ease-in-out; */
overflow: hidden;
}
.pagename {
margin-top: -11px;
}
.nav:focus {
/* Necesary for animations
max-height: 500px;
height: 100%;
*/
height: auto;
/* Necesary for animations
max-height: 500px;
height: 100%;
*/
}
.nav div:before {
content: '';
border-top: 3px solid;
background: #000;
border-bottom: 10px double;
border-top: 3px solid;
content: '';
float: right;
height: 4px;
position: relative;
right: 3px;
top: 14px;
width: 20px;
position: relative;
background: #000;
}
.nav a {
display: block;
padding: .5em 0;
width: 50%;
display: block;
}
}

View file

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

View file

@ -1,6 +1,3 @@
.table {
border-spacing: 0;
}
.table th,
.table td {
padding: .5em;
@ -8,8 +5,6 @@
}
.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{border-spacing:0}.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,10 +1,11 @@
var css = {
"general": "body,textarea,input{font:16px sans-serif;margin:0;border-radius:0;background:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{width:1270px;margin:auto}}label>*{display:inline}form>*{display:block;margin-bottom:10px}",
"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}",
"icons": ".ico{font:33px Arial Unicode MS,Lucida Sans Unicode}",
"inputs": "textarea,input,.addon-front,.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']{width:13em;-webkit-appearance:none}.addon-front{padding:8px 12px;box-shadow:0 0 0 1px #ccc}",
"navbar": ".nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{padding-right:1em;color:#aaa;top:-1px;position:relative}.btn.btn-close{background:#000;visibility:hidden;float:right;margin-top:-54px;font-size:25px}.nav .pagename{font-size:22px;top:1px}@media(max-width:500px){.btn.btn-close{visibility:visible}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:focus{height:auto}.nav div:before{content:'';border-top:3px solid;border-bottom:10px double;float:right;height:4px;right:3px;top:14px;width:20px;position:relative;background:#000}.nav a{padding:.5em 0;width:50%;display:block}}",
"tables": ".table{border-spacing:0}.table th,.table td{padding:.5em;text-align:left}.table tbody>*:nth-child(2n-1){background:#ddd}"
"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}"
};

View file

@ -1 +1 @@
/*Copyright 2014 Owen Versteeg; MIT licensed*/body,textarea,input{font:16px sans-serif;margin:0;border-radius:0;background:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{width:1270px;margin:auto}}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-front,.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']{width:13em;-webkit-appearance:none}.addon-front{padding:8px 12px;box-shadow:0 0 0 1px #ccc}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{padding-right:1em;color:#aaa;top:-1px;position:relative}.btn.btn-close{background:#000;visibility:hidden;float:right;margin-top:-54px;font-size:25px}.nav .pagename{font-size:22px;top:1px}@media(max-width:500px){.btn.btn-close{visibility:visible}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:focus{height:auto}.nav div:before{content:'';border-top:3px solid;border-bottom:10px double;float:right;height:4px;right:3px;top:14px;width:20px;position:relative;background:#000}.nav a{padding:.5em 0;width:50%;display:block}}.table{border-spacing:0}.table th,.table td{padding:.5em;text-align:left}.table tbody>*:nth-child(2n-1){background:#ddd}
/*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}

View file

@ -1,4 +1,4 @@
textarea, input, .addon-front, .btn-sm, .nav a {
textarea, input, .addon, .btn-sm, .nav a {
font-size: 14px;
}
@ -16,7 +16,7 @@ textarea, input[type='text'] {
width: 13em;
}
.addon-front {
.addon {
box-shadow: 0 0 0 1px #ccc;
padding: 8px 12px;
}

5
less/messages.less Normal file
View file

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

View file

@ -24,7 +24,7 @@
float: right;
font-size: 25px;
margin-top: -54px;
visibility: hidden;
display: none;
}
.nav .pagename {
@ -34,7 +34,7 @@
@media (max-width:500px) {
.btn.btn-close {
visibility: visible;
display: block;
}
.nav {
/* transition: max-height .5s ease-in-out, height .5s ease-in-out; */

View file

@ -1,7 +1,3 @@
.table {
border-spacing: 0;
}
.table th, .table td {
padding: .5em;
text-align: left;