Fix various browser bugs (closes #30)
This commit is contained in:
Owen Versteeg
parent
544c3d8919
commit
f1ab995c24
12 changed files with 43 additions and 100 deletions
|
|
@ -4,6 +4,7 @@ input {
|
|||
font: 16px sans-serif;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background: 0;
|
||||
}
|
||||
.smooth {
|
||||
transition: all .2s;
|
||||
|
|
@ -16,13 +17,13 @@ input {
|
|||
outline: 0;
|
||||
}
|
||||
.container {
|
||||
width: 1270px;
|
||||
margin: auto;
|
||||
margin: 0 20px;
|
||||
width: auto;
|
||||
}
|
||||
@media (max-width: 1310px) {
|
||||
@media (min-width: 1310px) {
|
||||
.container {
|
||||
margin: 0 20px;
|
||||
width: auto;
|
||||
width: 1270px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
label > * {
|
||||
|
|
|
|||
2
compiled/general.min.css
vendored
2
compiled/general.min.css
vendored
|
|
@ -1 +1 @@
|
|||
body,textarea,input{font:16px sans-serif;margin:0;border-radius:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{width:1270px;margin:auto}@media(max-width:1310px){.container{margin:0 20px;width:auto}}label>*{display:inline}form>*{display:block;margin-bottom:10px}
|
||||
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}
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
/* Grid system responsive code is in general.less */
|
||||
/*
|
||||
Since every column has 2% padding (1% on each side) its width is (((its number/12) * 100)-2) percent (truncated, to avoid spillage.) Thus, c12 has width 98%.
|
||||
*/
|
||||
.row {
|
||||
margin-top: 2%;
|
||||
margin: 1% 0;
|
||||
overflow: auto;
|
||||
/* required - without this, the page layout is screwed up */
|
||||
|
||||
|
|
|
|||
2
compiled/grid.min.css
vendored
2
compiled/grid.min.css
vendored
|
|
@ -1 +1 @@
|
|||
.row{margin-top:2%;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}.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%}}
|
||||
|
|
@ -3,7 +3,7 @@ input,
|
|||
.addon-front,
|
||||
.btn-sm,
|
||||
.nav a {
|
||||
font-size: .9em;
|
||||
font-size: 14px;
|
||||
}
|
||||
textarea,
|
||||
input {
|
||||
|
|
|
|||
2
compiled/inputs.min.css
vendored
2
compiled/inputs.min.css
vendored
|
|
@ -1 +1 @@
|
|||
textarea,input,.addon-front,.btn-sm,.nav a{font-size:.9em}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}
|
||||
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}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
var css = {
|
||||
"general": "body,textarea,input{font:16px sans-serif;margin:0;border-radius:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{width:1270px;margin:auto}@media(max-width:1310px){.container{margin:0 20px;width:auto}}label>*{display:inline}form>*{display:block;margin-bottom:10px}",
|
||||
"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}",
|
||||
"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-top:2%;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%}}",
|
||||
"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:.9em}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}",
|
||||
"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}"
|
||||
};
|
||||
|
|
|
|||
92
docs.html
92
docs.html
|
|
@ -2,42 +2,23 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
|
||||
|
||||
<script>
|
||||
document.createElement("nav"); document.createElement("button");
|
||||
</script>
|
||||
|
||||
<!--[if IE 7]>
|
||||
<style>
|
||||
.col { margin: 0 0.9% !important; }
|
||||
</style>
|
||||
<![endif]-->
|
||||
|
||||
<script>
|
||||
document.createElement("nav"); document.createElement("button");
|
||||
</script>
|
||||
|
||||
<!--[if IE 7]>
|
||||
<style>
|
||||
.col { margin: 0 0.9% !important; }
|
||||
</style>
|
||||
<![endif]-->
|
||||
|
||||
<title>min - docs</title>
|
||||
|
||||
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style>
|
||||
/*.container{width:1270px;margin:auto}@media(max-width:1310px){.container{margin:0 20px;width:auto}}*/
|
||||
/* when we're at least 1310px wide, screen width is 1270px */
|
||||
.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{width:1270px;margin:auto}}
|
||||
|
||||
button.btn-close.btn-sm { padding: 0; margin: -49px 25px !important; }
|
||||
|
||||
input,textarea { background: 0; line-height: 16px; }
|
||||
|
||||
.c12{width:98%}.c11{width:89.66%}.c10{width:81.33%}.c9{width:73%}.c8{width:64.66%}.c7{width:56.33%}.c6{width:48%}.c5{width:39.66%}.c4{width:31.33%}.c3{width:23%}.c2{width:14.66%}.c1{width:6.33%}
|
||||
.col { margin: 0 1%; }
|
||||
@media (max-width: 870px) {
|
||||
.row .col {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style type="text/css">
|
||||
/* Min+ plugin*/
|
||||
message {
|
||||
|
|
@ -106,9 +87,9 @@
|
|||
}
|
||||
|
||||
/* normally, the button would extend past the page top and be invisible but when it's in the middle of the page it shows */
|
||||
button.btn-close.btn-sm {
|
||||
.navbar button.btn-close.btn-sm {
|
||||
padding-top: 4px;
|
||||
margin-top: -50px;
|
||||
margin-top: -49px;
|
||||
}
|
||||
|
||||
/* this fixes the display of the demo-navbar when the page is resized */
|
||||
|
|
@ -147,52 +128,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* End this-page-only styles, start beta styles */
|
||||
nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* IE styles */
|
||||
.c12{width:98%}.c11{width:89.66%}.c10{width:81.33%}.c9{width:73%}.c8{width:64.66%}.c7{width:56.33%}.c6{width:48%}.c5{width:39.66%}.c4{width:31.33%}.c3{width:23%}.c2{width:14.66%}.c1{width:6.33%}
|
||||
|
||||
/*
|
||||
.btn-sm {
|
||||
font-size:1em;
|
||||
margin-top: 0;
|
||||
padding-top: 1000px;
|
||||
.col { margin: 0 1%; }
|
||||
|
||||
@media (max-width: 870px) {
|
||||
.row .col {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
line-height: .65em;
|
||||
}
|
||||
|
||||
a.btn {
|
||||
margin-top: -84px;
|
||||
}
|
||||
|
||||
a.btn-sm, div.btn-sm {
|
||||
margin-top: -49px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
button.btn-sm {
|
||||
line-height: .7em;
|
||||
padding-top: 11px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: auto;
|
||||
display: inline;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
/* Changes to the main CSS:
|
||||
- move media query from max-width to min-width
|
||||
*/
|
||||
|
||||
/* new beta styles */
|
||||
|
||||
</style>
|
||||
|
||||
<!--[if lte IE 6]>
|
||||
|
|
@ -321,7 +269,7 @@
|
|||
<a href="#">One</a>
|
||||
<a href="#">Two</a>
|
||||
<a href="#">Three</a>
|
||||
<a href="#">Four</a>
|
||||
<a href="#">Four</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn-close btn btn-sm">×</button>
|
||||
|
|
|
|||
2
entireframework.min.css
vendored
2
entireframework.min.css
vendored
|
|
@ -1 +1 @@
|
|||
/*Copyright 2014 Owen Versteeg; MIT licensed*/body,textarea,input{font:16px sans-serif;margin:0;border-radius:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{width:1270px;margin:auto}@media(max-width:1310px){.container{margin:0 20px;width: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-top:2%;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:.9em}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{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}
|
||||
|
|
@ -2,6 +2,7 @@ body, textarea, input {
|
|||
font: 16px sans-serif;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background: 0;
|
||||
}
|
||||
|
||||
.smooth {
|
||||
|
|
@ -17,14 +18,14 @@ body, textarea, input {
|
|||
}
|
||||
|
||||
.container {
|
||||
width: 1270px;
|
||||
margin: auto;
|
||||
margin: 0 20px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@media(max-width:1310px) {
|
||||
@media(min-width:1310px) {
|
||||
.container {
|
||||
margin: 0 20px;
|
||||
width: auto;
|
||||
width: 1270px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
/* Grid system responsive code is in general.less */
|
||||
|
||||
/*
|
||||
Since every column has 2% padding (1% on each side) its width is (((its number/12) * 100)-2) percent (truncated, to avoid spillage.) Thus, c12 has width 98%.
|
||||
*/
|
||||
|
||||
.row {
|
||||
margin-top: 2%;
|
||||
margin: 1% 0;
|
||||
overflow: auto; /* required - without this, the page layout is screwed up */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
textarea, input, .addon-front, .btn-sm, .nav a {
|
||||
font-size: .9em;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
textarea, input {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue