mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
add boostrap-twipsy and bootstrap-alerts
This commit is contained in:
Jacob Thornton
parent
b68b53dca2
commit
11721f376d
8 changed files with 534 additions and 307 deletions
145
bootstrap-1.1.1.css
vendored
145
bootstrap-1.1.1.css
vendored
|
|
@ -6,7 +6,7 @@
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
*
|
*
|
||||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||||
* Date: Sat Aug 27 00:28:54 PDT 2011
|
* Date: Sat Aug 27 13:02:54 PDT 2011
|
||||||
*/
|
*/
|
||||||
/* Reset.less
|
/* Reset.less
|
||||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||||
|
|
@ -421,6 +421,12 @@ body {
|
||||||
max-width: 1180px;
|
max-width: 1180px;
|
||||||
margin-left: 240px;
|
margin-left: 240px;
|
||||||
}
|
}
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
a {
|
a {
|
||||||
color: #0069d6;
|
color: #0069d6;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -431,115 +437,6 @@ a:hover {
|
||||||
color: #0050a3;
|
color: #0050a3;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
|
||||||
background-color: #e6e6e6;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));
|
|
||||||
background-image: -webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
|
||||||
background-image: -moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
|
||||||
background-image: -ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
|
||||||
background-image: -o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
|
||||||
background-image: linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
|
|
||||||
padding: 4px 14px;
|
|
||||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
|
||||||
color: #333;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 18px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-bottom-color: #bbb;
|
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
||||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
.btn:hover {
|
|
||||||
background-position: 0 -15px;
|
|
||||||
color: #333;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.primary {
|
|
||||||
background-color: #0064cd;
|
|
||||||
background-repeat: repeat-x;
|
|
||||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
|
|
||||||
background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
|
|
||||||
background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
|
|
||||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
|
|
||||||
background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
|
|
||||||
background-image: -o-linear-gradient(top, #049cdb, #0064cd);
|
|
||||||
background-image: linear-gradient(top, #049cdb, #0064cd);
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
|
||||||
border: 1px solid #004b9a;
|
|
||||||
border-bottom-color: #003f81;
|
|
||||||
}
|
|
||||||
.primary:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
-webkit-transition: 0.1s linear all;
|
|
||||||
-moz-transition: 0.1s linear all;
|
|
||||||
-ms-transition: 0.1s linear all;
|
|
||||||
-o-transition: 0.1s linear all;
|
|
||||||
transition: 0.1s linear all;
|
|
||||||
}
|
|
||||||
.btn.primary {
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
|
||||||
border-color: #0064cd #0064cd #003f81;
|
|
||||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
||||||
}
|
|
||||||
.btn.primary:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.btn.large {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 28px;
|
|
||||||
-webkit-border-radius: 6px;
|
|
||||||
-moz-border-radius: 6px;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
.btn.small {
|
|
||||||
padding-right: 9px;
|
|
||||||
padding-left: 9px;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
.btn.disabled {
|
|
||||||
background-image: none;
|
|
||||||
filter: alpha(opacity=65);
|
|
||||||
-khtml-opacity: 0.65;
|
|
||||||
-moz-opacity: 0.65;
|
|
||||||
opacity: 0.65;
|
|
||||||
cursor: default;
|
|
||||||
-webkit-box-shadow: none;
|
|
||||||
-moz-box-shadow: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
.btn:disabled {
|
|
||||||
background-image: none;
|
|
||||||
filter: alpha(opacity=65);
|
|
||||||
-khtml-opacity: 0.65;
|
|
||||||
-moz-opacity: 0.65;
|
|
||||||
opacity: 0.65;
|
|
||||||
cursor: default;
|
|
||||||
-webkit-box-shadow: none;
|
|
||||||
-moz-box-shadow: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
.btn:disabled.primary {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.btn:active {
|
|
||||||
-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
||||||
-moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
||||||
box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
/* Typography.less
|
/* Typography.less
|
||||||
* Headings, body text, lists, code, and more for a versatile and durable typography system
|
* Headings, body text, lists, code, and more for a versatile and durable typography system
|
||||||
* ---------------------------------------------------------------------------------------- */
|
* ---------------------------------------------------------------------------------------- */
|
||||||
|
|
@ -1781,17 +1678,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
.modal-backdrop, .modal {
|
|
||||||
-webkit-transition: opacity 0.15s linear;
|
|
||||||
-moz-transition: opacity 0.15s linear;
|
|
||||||
-ms-transition: opacity 0.15s linear;
|
|
||||||
-o-transition: opacity 0.15s linear;
|
|
||||||
transition: opacity 0.15s linear;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.modal-backdrop.open, .modal.open {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.modal-backdrop {
|
.modal-backdrop {
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -2007,3 +1893,20 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||||
.popover .content p, .popover .content ul, .popover .content ol {
|
.popover .content p, .popover .content ul, .popover .content ol {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
.modal-backdrop,
|
||||||
|
.modal,
|
||||||
|
.twipsy,
|
||||||
|
.alert-message {
|
||||||
|
-webkit-transition: opacity 0.15s linear;
|
||||||
|
-moz-transition: opacity 0.15s linear;
|
||||||
|
-ms-transition: opacity 0.15s linear;
|
||||||
|
-o-transition: opacity 0.15s linear;
|
||||||
|
transition: opacity 0.15s linear;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.modal-backdrop.show,
|
||||||
|
.modal.show,
|
||||||
|
.twipsy.show,
|
||||||
|
.alert-message.show {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
|
||||||
13
bootstrap-1.1.1.min.css
vendored
13
bootstrap-1.1.1.min.css
vendored
|
|
@ -67,16 +67,9 @@ body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:
|
||||||
.container-fluid:after{clear:both;}
|
.container-fluid:after{clear:both;}
|
||||||
.container-fluid .sidebar{float:left;width:220px;}
|
.container-fluid .sidebar{float:left;width:220px;}
|
||||||
.container-fluid .content{min-width:700px;max-width:1180px;margin-left:240px;}
|
.container-fluid .content{min-width:700px;max-width:1180px;margin-left:240px;}
|
||||||
|
.hide{display:none;}
|
||||||
|
.show{display:block;}
|
||||||
a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#0050a3;text-decoration:underline;}
|
a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#0050a3;text-decoration:underline;}
|
||||||
.btn{display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);padding:4px 14px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:18px;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
|
|
||||||
.primary{background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border:1px solid #004b9a;border-bottom-color:#003f81;}.primary:hover{color:#fff;}
|
|
||||||
.btn{-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn.primary{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}.btn.primary:hover{color:#fff;}
|
|
||||||
.btn.large{font-size:16px;line-height:28px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
|
|
||||||
.btn.small{padding-right:9px;padding-left:9px;font-size:11px;}
|
|
||||||
.btn.disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
|
|
||||||
.btn:disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.btn:disabled.primary{color:#fff;}
|
|
||||||
.btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);}
|
|
||||||
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
|
|
||||||
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
|
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
|
||||||
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
|
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
|
||||||
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
|
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
|
||||||
|
|
@ -233,7 +226,6 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
||||||
.pagination ul li.disabled a,.pagination ul li.disabled a:hover{background-color:transparent;color:#bfbfbf;}
|
.pagination ul li.disabled a,.pagination ul li.disabled a:hover{background-color:transparent;color:#bfbfbf;}
|
||||||
.pagination ul li.next a{border:0;}
|
.pagination ul li.next a{border:0;}
|
||||||
.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}
|
.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}
|
||||||
.modal-backdrop,.modal{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.modal-backdrop.open,.modal.open{opacity:1;}
|
|
||||||
.modal-backdrop{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;}
|
.modal-backdrop{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;}
|
||||||
.modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-280px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .modal-header{border-bottom:1px solid #eee;padding:5px 20px;}.modal .modal-header .close{position:absolute;right:10px;top:10px;color:#999;line-height:10px;font-size:18px;}
|
.modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-280px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .modal-header{border-bottom:1px solid #eee;padding:5px 20px;}.modal .modal-header .close{position:absolute;right:10px;top:10px;color:#999;line-height:10px;font-size:18px;}
|
||||||
.modal .modal-body{padding:20px;}
|
.modal .modal-body{padding:20px;}
|
||||||
|
|
@ -254,3 +246,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
||||||
.popover .inner{background-color:#333;background-color:rgba(0, 0, 0, 0.8);*background-color:#333;padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
|
.popover .inner{background-color:#333;background-color:rgba(0, 0, 0, 0.8);*background-color:#333;padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
|
||||||
.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
|
.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
|
||||||
.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
|
.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
|
||||||
|
.modal-backdrop,.modal,.twipsy,.alert-message{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.modal-backdrop.show,.modal.show,.twipsy.show,.alert-message.show{opacity:1;}
|
||||||
|
|
|
||||||
73
examples/assets/js/bootstrap-alerts.js
vendored
Normal file
73
examples/assets/js/bootstrap-alerts.js
vendored
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
(function( $ ){
|
||||||
|
|
||||||
|
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
|
||||||
|
* ======================================================= */
|
||||||
|
|
||||||
|
$.support.transition = (function () {
|
||||||
|
var thisBody = document.body || document.documentElement
|
||||||
|
, thisStyle = thisBody.style
|
||||||
|
, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
|
||||||
|
return support
|
||||||
|
})()
|
||||||
|
|
||||||
|
|
||||||
|
/* SHARED VARS
|
||||||
|
* =========== */
|
||||||
|
|
||||||
|
var transitionEnd
|
||||||
|
|
||||||
|
// set CSS transition event type
|
||||||
|
if ( $.support.transition ) {
|
||||||
|
transitionEnd = "TransitionEnd"
|
||||||
|
if ( $.browser.webkit ) {
|
||||||
|
transitionEnd = "webkitTransitionEnd"
|
||||||
|
} else if ( $.browser.mozilla ) {
|
||||||
|
transitionEnd = "transitionend"
|
||||||
|
} else if ( $.browser.opera ) {
|
||||||
|
transitionEnd = "oTransitionEnd"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ALERT CLASS DEFINITION
|
||||||
|
* ====================== */
|
||||||
|
|
||||||
|
var Alert = function ( content ) {
|
||||||
|
var that = this
|
||||||
|
this.$element = $(content)
|
||||||
|
this.$element.delegate('.close', 'click', function (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
that.close()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
Alert.prototype = {
|
||||||
|
|
||||||
|
close: function () {
|
||||||
|
var that = this
|
||||||
|
|
||||||
|
function removeElement () {
|
||||||
|
that.$element.remove()
|
||||||
|
that.$element = null
|
||||||
|
}
|
||||||
|
|
||||||
|
$.support.transition ?
|
||||||
|
this.$element.bind(transitionEnd, removeElement) :
|
||||||
|
removeElement()
|
||||||
|
|
||||||
|
this.$element.removeClass('show')
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ALERT PLUGIN DEFINITION
|
||||||
|
* ======================= */
|
||||||
|
|
||||||
|
$.fn.alert = function ( options ) {
|
||||||
|
return this.each(function () {
|
||||||
|
new Alert(this)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
})( jQuery || ender )
|
||||||
|
|
@ -34,11 +34,7 @@
|
||||||
* ============================= */
|
* ============================= */
|
||||||
|
|
||||||
var Modal = function ( options ) {
|
var Modal = function ( options ) {
|
||||||
this.settings = {
|
this.settings = $.extend({}, $.fn.modal.defaults)
|
||||||
backdrop: false
|
|
||||||
, closeOnEscape: false
|
|
||||||
, content: false
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( typeof options == 'string' ) {
|
if ( typeof options == 'string' ) {
|
||||||
this.settings.content = options
|
this.settings.content = options
|
||||||
|
|
@ -59,8 +55,8 @@
|
||||||
var that = this
|
var that = this
|
||||||
this.isOpen = true
|
this.isOpen = true
|
||||||
|
|
||||||
_private.escape.call(this)
|
_.escape.call(this)
|
||||||
_private.backdrop.call(this)
|
_.backdrop.call(this)
|
||||||
|
|
||||||
this.$element = $(this.settings.content)
|
this.$element = $(this.settings.content)
|
||||||
.delegate('.close', 'click', function (e) { e.preventDefault(); that.close() })
|
.delegate('.close', 'click', function (e) { e.preventDefault(); that.close() })
|
||||||
|
|
@ -68,8 +64,8 @@
|
||||||
.show()
|
.show()
|
||||||
|
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
that.$element.addClass('open')
|
that.$element.addClass('show')
|
||||||
that.$backdrop && that.$backdrop.addClass('open')
|
that.$backdrop && that.$backdrop.addClass('show')
|
||||||
}, 1)
|
}, 1)
|
||||||
|
|
||||||
return this
|
return this
|
||||||
|
|
@ -80,10 +76,10 @@
|
||||||
|
|
||||||
this.isOpen = false
|
this.isOpen = false
|
||||||
|
|
||||||
_private.escape.call(this)
|
_.escape.call(this)
|
||||||
_private.backdrop.call(this)
|
_.backdrop.call(this)
|
||||||
|
|
||||||
this.$element.removeClass('open')
|
this.$element.removeClass('show')
|
||||||
|
|
||||||
function removeElement () {
|
function removeElement () {
|
||||||
that.$element.remove()
|
that.$element.remove()
|
||||||
|
|
@ -103,7 +99,7 @@
|
||||||
/* MODAL PRIVATE METHODS
|
/* MODAL PRIVATE METHODS
|
||||||
* ===================== */
|
* ===================== */
|
||||||
|
|
||||||
var _private = {
|
var _ = {
|
||||||
|
|
||||||
backdrop: function () {
|
backdrop: function () {
|
||||||
var that = this
|
var that = this
|
||||||
|
|
@ -112,7 +108,7 @@
|
||||||
.click(function () { that.close() })
|
.click(function () { that.close() })
|
||||||
.appendTo(document.body)
|
.appendTo(document.body)
|
||||||
} else if ( !this.isOpen && this.$backdrop ) {
|
} else if ( !this.isOpen && this.$backdrop ) {
|
||||||
this.$backdrop.removeClass('open')
|
this.$backdrop.removeClass('show')
|
||||||
|
|
||||||
function removeElement() {
|
function removeElement() {
|
||||||
that.$backdrop.remove()
|
that.$backdrop.remove()
|
||||||
|
|
@ -144,14 +140,16 @@
|
||||||
/* MODAL PLUGIN DEFINITION
|
/* MODAL PLUGIN DEFINITION
|
||||||
* ======================= */
|
* ======================= */
|
||||||
|
|
||||||
$.modal = function ( options ) {
|
|
||||||
return new Modal(options)
|
|
||||||
}
|
|
||||||
|
|
||||||
$.fn.modal = function ( options ) {
|
$.fn.modal = function ( options ) {
|
||||||
options = options || {}
|
options = options || {}
|
||||||
options.content = this
|
options.content = this
|
||||||
return new Modal(options)
|
return new Modal(options)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$.fn.modal.defaults = {
|
||||||
|
backdrop: false
|
||||||
|
, closeOnEscape: false
|
||||||
|
, content: false
|
||||||
|
}
|
||||||
|
|
||||||
})( jQuery || ender )
|
})( jQuery || ender )
|
||||||
272
examples/assets/js/bootstrap-twipsy.js
vendored
Normal file
272
examples/assets/js/bootstrap-twipsy.js
vendored
Normal file
|
|
@ -0,0 +1,272 @@
|
||||||
|
/* Based on the original tipsy by Jason Frame */
|
||||||
|
|
||||||
|
(function( $ ) {
|
||||||
|
|
||||||
|
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
|
||||||
|
* ======================================================= */
|
||||||
|
|
||||||
|
$.support.transition = (function () {
|
||||||
|
var thisBody = document.body || document.documentElement
|
||||||
|
, thisStyle = thisBody.style
|
||||||
|
, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
|
||||||
|
return support
|
||||||
|
})()
|
||||||
|
|
||||||
|
|
||||||
|
/* SHARED VARS
|
||||||
|
* =========== */
|
||||||
|
|
||||||
|
var transitionEnd
|
||||||
|
|
||||||
|
// set CSS transition event type
|
||||||
|
if ( $.support.transition ) {
|
||||||
|
transitionEnd = "TransitionEnd"
|
||||||
|
if ( $.browser.webkit ) {
|
||||||
|
transitionEnd = "webkitTransitionEnd"
|
||||||
|
} else if ( $.browser.mozilla ) {
|
||||||
|
transitionEnd = "transitionend"
|
||||||
|
} else if ( $.browser.opera ) {
|
||||||
|
transitionEnd = "oTransitionEnd"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* TWIPSY PUBLIC CLASS DEFINITION
|
||||||
|
* ============================== */
|
||||||
|
|
||||||
|
var Twipsy = function ( element, options ) {
|
||||||
|
this.$element = $(element)
|
||||||
|
this.options = options
|
||||||
|
this.enabled = true
|
||||||
|
this.fixTitle()
|
||||||
|
}
|
||||||
|
|
||||||
|
Twipsy.prototype = {
|
||||||
|
|
||||||
|
show: function() {
|
||||||
|
var title = this.getTitle()
|
||||||
|
, pos
|
||||||
|
, actualWidth
|
||||||
|
, actualHeight
|
||||||
|
, placement
|
||||||
|
, $tip
|
||||||
|
, tp
|
||||||
|
|
||||||
|
if (title && this.enabled) {
|
||||||
|
$tip = this.tip()
|
||||||
|
$tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](title)
|
||||||
|
$tip[0].className = 'twipsy'
|
||||||
|
$tip
|
||||||
|
.remove()
|
||||||
|
.css({ top: 0, left: 0, display: 'block' })
|
||||||
|
.prependTo(document.body)
|
||||||
|
|
||||||
|
pos = $.extend({}, this.$element.offset(), {
|
||||||
|
width: this.$element[0].offsetWidth
|
||||||
|
, height: this.$element[0].offsetHeight
|
||||||
|
})
|
||||||
|
|
||||||
|
actualWidth = $tip[0].offsetWidth
|
||||||
|
actualHeight = $tip[0].offsetHeight
|
||||||
|
placement = _.maybeCall(this.options.placement, this.$element[0])
|
||||||
|
|
||||||
|
switch (placement) {
|
||||||
|
case 'below':
|
||||||
|
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
|
||||||
|
break
|
||||||
|
case 'above':
|
||||||
|
tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
|
||||||
|
break
|
||||||
|
case 'left':
|
||||||
|
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}
|
||||||
|
break
|
||||||
|
case 'right':
|
||||||
|
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
$tip
|
||||||
|
.css(tp)
|
||||||
|
.addClass(placement)
|
||||||
|
.addClass('show')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
, hide: function() {
|
||||||
|
var that = this
|
||||||
|
, $tip = this.tip()
|
||||||
|
|
||||||
|
$tip.removeClass('show')
|
||||||
|
|
||||||
|
function removeElement () {
|
||||||
|
$tip.remove()
|
||||||
|
}
|
||||||
|
|
||||||
|
$.support.transition ?
|
||||||
|
$tip.bind(transitionEnd, removeElement) :
|
||||||
|
removeElement()
|
||||||
|
}
|
||||||
|
|
||||||
|
, fixTitle: function() {
|
||||||
|
var $e = this.$element
|
||||||
|
if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
|
||||||
|
$e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
, getTitle: function() {
|
||||||
|
var title
|
||||||
|
, $e = this.$element
|
||||||
|
, o = this.options
|
||||||
|
|
||||||
|
this.fixTitle()
|
||||||
|
|
||||||
|
if (typeof o.title == 'string') {
|
||||||
|
title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title)
|
||||||
|
} else if (typeof o.title == 'function') {
|
||||||
|
title = o.title.call($e[0])
|
||||||
|
}
|
||||||
|
|
||||||
|
title = ('' + title).replace(/(^\s*|\s*$)/, "")
|
||||||
|
|
||||||
|
return title || o.fallback
|
||||||
|
}
|
||||||
|
|
||||||
|
, tip: function() {
|
||||||
|
if (!this.$tip) {
|
||||||
|
this.$tip = $('<div class="twipsy" />').html('<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>')
|
||||||
|
}
|
||||||
|
return this.$tip
|
||||||
|
}
|
||||||
|
|
||||||
|
, validate: function() {
|
||||||
|
if (!this.$element[0].parentNode) {
|
||||||
|
this.hide()
|
||||||
|
this.$element = null
|
||||||
|
this.options = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
, enable: function() {
|
||||||
|
this.enabled = true
|
||||||
|
}
|
||||||
|
|
||||||
|
, disable: function() {
|
||||||
|
this.enabled = false
|
||||||
|
}
|
||||||
|
|
||||||
|
, toggleEnabled: function() {
|
||||||
|
this.enabled = !this.enabled
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* TWIPSY PRIVATE METHODS
|
||||||
|
* ====================== */
|
||||||
|
|
||||||
|
var _ = {
|
||||||
|
|
||||||
|
maybeCall: function ( thing, ctx ) {
|
||||||
|
return (typeof thing == 'function') ? (thing.call(ctx)) : thing
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* MODAL PLUGIN DEFINITION
|
||||||
|
* ======================= */
|
||||||
|
|
||||||
|
$.fn.twipsy = function(options) {
|
||||||
|
|
||||||
|
var twipsy
|
||||||
|
, binder
|
||||||
|
, eventIn
|
||||||
|
, eventOut
|
||||||
|
|
||||||
|
if (options === true) {
|
||||||
|
return this.data('twipsy')
|
||||||
|
} else if (typeof options == 'string') {
|
||||||
|
twipsy = this.data('twipsy')
|
||||||
|
if (twipsy) {
|
||||||
|
twipsy[options]()
|
||||||
|
}
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
options = $.extend({}, $.fn.twipsy.defaults, options)
|
||||||
|
|
||||||
|
function get(ele) {
|
||||||
|
var twipsy = $.data(ele, 'twipsy')
|
||||||
|
|
||||||
|
if (!twipsy) {
|
||||||
|
twipsy = new Twipsy(ele, $.fn.twipsy.elementOptions(ele, options))
|
||||||
|
$.data(ele, 'twipsy', twipsy)
|
||||||
|
}
|
||||||
|
|
||||||
|
return twipsy
|
||||||
|
}
|
||||||
|
|
||||||
|
function enter() {
|
||||||
|
var twipsy = get(this)
|
||||||
|
twipsy.hoverState = 'in'
|
||||||
|
|
||||||
|
if (options.delayIn == 0) {
|
||||||
|
twipsy.show()
|
||||||
|
} else {
|
||||||
|
twipsy.fixTitle()
|
||||||
|
setTimeout(function() {
|
||||||
|
if (twipsy.hoverState == 'in') {
|
||||||
|
twipsy.show()
|
||||||
|
}
|
||||||
|
}, options.delayIn)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function leave() {
|
||||||
|
var twipsy = get(this)
|
||||||
|
twipsy.hoverState = 'out'
|
||||||
|
if (options.delayOut == 0) {
|
||||||
|
twipsy.hide()
|
||||||
|
} else {
|
||||||
|
setTimeout(function() {
|
||||||
|
if (twipsy.hoverState == 'out') {
|
||||||
|
twipsy.hide()
|
||||||
|
}
|
||||||
|
}, options.delayOut)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!options.live) {
|
||||||
|
this.each(function() {
|
||||||
|
get(this)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.trigger != 'manual') {
|
||||||
|
binder = options.live ? 'live' : 'bind'
|
||||||
|
eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus'
|
||||||
|
eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'
|
||||||
|
this[binder](eventIn, enter)[binder](eventOut, leave)
|
||||||
|
}
|
||||||
|
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.twipsy.defaults = {
|
||||||
|
delayIn: 0
|
||||||
|
, delayOut: 0
|
||||||
|
, fallback: ''
|
||||||
|
, placement: 'above'
|
||||||
|
, html: false
|
||||||
|
, live: false
|
||||||
|
, offset: 0
|
||||||
|
, title: 'title'
|
||||||
|
, trigger: 'hover'
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.twipsy.elementOptions = function(ele, options) {
|
||||||
|
return $.metadata ? $.extend({}, options, $(ele).metadata()) : options
|
||||||
|
}
|
||||||
|
|
||||||
|
})( jQuery || ender )
|
||||||
|
|
@ -13,9 +13,9 @@
|
||||||
|
|
||||||
<!-- Le javascript -->
|
<!-- Le javascript -->
|
||||||
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
|
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
|
||||||
<script src="assets/js/bootstrap-modals.js"></script>
|
<script src="assets/js/bootstrap-modal.js"></script>
|
||||||
<!-- <script src="assets/js/bootstrap-alerts.js"></script> -->
|
<script src="assets/js/bootstrap-alerts.js"></script>
|
||||||
<!-- <script src="assets/js/bootstrap-tips.js"></script> -->
|
<script src="assets/js/bootstrap-twipsy.js"></script>
|
||||||
<!-- <script src="assets/js/bootstrap-popovers.js"></script> -->
|
<!-- <script src="assets/js/bootstrap-popovers.js"></script> -->
|
||||||
|
|
||||||
<!-- Le styles -->
|
<!-- Le styles -->
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body style="padding-top: 60px">
|
<body style="padding: 60px 0">
|
||||||
|
|
||||||
<!-- Topbar
|
<!-- Topbar
|
||||||
================================================== -->
|
================================================== -->
|
||||||
|
|
@ -37,8 +37,10 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h3><a href="#">Bootstrap JS</a></h3>
|
<h3><a href="#">Bootstrap JS</a></h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li class="active"><a href="#modal">Getting Started</a></li>
|
<li class="active"><a href="#javascript">Getting Started</a></li>
|
||||||
<li><a href="#modal">Modals</a></li>
|
<li><a href="#modal">Modals</a></li>
|
||||||
|
<li><a href="#alerts">Alerts</a></li>
|
||||||
|
<li><a href="#twipsy">Twipsy</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -71,17 +73,18 @@
|
||||||
<!-- Modal
|
<!-- Modal
|
||||||
================================================== -->
|
================================================== -->
|
||||||
|
|
||||||
<section id="javascript">
|
<section id="modal">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Modals <small>bootstrap-modals.js</small></h1>
|
<h1>Modals <small>bootstrap-modal.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span4 columns">
|
<div class="span4 columns">
|
||||||
<p>Our Modal plugin is <strong>super</strong> slim! We took special care to only include the bare functionality that we require at twitter, however we look forward to seeing all the cool stuff you do with it!</p>
|
<p>Our Modal plugin is <strong>super</strong> slim! We took special care to only include the bare functionality that we require at twitter, however we look forward to seeing all the cool stuff you do with it!</p>
|
||||||
|
<a href="assets/js/bootstrap-modal.js" class="btn primary">Download</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="span12 columns">
|
<div class="span12 columns">
|
||||||
<h2>Using bootstrap-modal</h2>
|
<h2>Using bootstrap-modal</h2>
|
||||||
<pre class="prettyprint linenums">$('#modal-content').modal();</pre>
|
<pre class="prettyprint linenums">$('#modal-content').modal(options)</pre>
|
||||||
<h3>Options</h3>
|
<h3>Options</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>backdrop</strong> (<code>boolean</code>) - if true, it will include a modal-backdrop element.</li>
|
<li><strong>backdrop</strong> (<code>boolean</code>) - if true, it will include a modal-backdrop element.</li>
|
||||||
|
|
@ -89,23 +92,12 @@
|
||||||
<li><strong>content</strong> (<code>string</code>) - alternative way of supplying modal class with HTML content.</li>
|
<li><strong>content</strong> (<code>string</code>) - alternative way of supplying modal class with HTML content.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
<h4>$.modal</h4>
|
|
||||||
<p>Returns an instance of the modal class. It accepts either a <code>string</code> or an options <code>object</code>.</p>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
// Accepts HTML string
|
|
||||||
$.modal(modalHTML)
|
|
||||||
|
|
||||||
// Accepts Options
|
|
||||||
$.modal({
|
|
||||||
backdrop: true
|
|
||||||
, content: modalHTML
|
|
||||||
})</pre>
|
|
||||||
<h4>$().modal</h4>
|
<h4>$().modal</h4>
|
||||||
<p>Returns an instance of the modal class. Accepts an optional options <code>object</code>.</p>
|
<p>Returns an instance of the modal class. Accepts an optional options <code>object</code>.</p>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
$('#modal-content').modal({
|
$('#modal-content').modal({
|
||||||
closeOnEscape: true
|
closeOnEscape: true
|
||||||
});</pre>
|
})</pre>
|
||||||
<h4>.toggle</h4>
|
<h4>.toggle</h4>
|
||||||
<p>Returns an instance of the modal class. Toggle the modal open state.</p>
|
<p>Returns an instance of the modal class. Toggle the modal open state.</p>
|
||||||
<pre class="prettyprint linenums">$('#modal-content').modal().toggle()</pre>
|
<pre class="prettyprint linenums">$('#modal-content').modal().toggle()</pre>
|
||||||
|
|
@ -118,7 +110,7 @@ $('#modal-content').modal({
|
||||||
<h3>Demo</h3>
|
<h3>Demo</h3>
|
||||||
|
|
||||||
<!-- sample modal content -->
|
<!-- sample modal content -->
|
||||||
<div id="modal-from-dom" style="display: none" class="modal">
|
<div id="modal-from-dom" class="modal hide">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3>Modal Heading</h3>
|
<h3>Modal Heading</h3>
|
||||||
<a href="#" class="close">×</a>
|
<a href="#" class="close">×</a>
|
||||||
|
|
@ -132,50 +124,17 @@ $('#modal-content').modal({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button id="modal-basic" class="btn">Basic Modal</button>
|
<button id="modal-from-element" class="btn">Launch Modal</button>
|
||||||
<button id="modal-options" class="btn">Modal Options</button>
|
|
||||||
<button id="modal-from-element" class="btn">Modal From Element</button>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$(function () {
|
$(function () {
|
||||||
|
var domModal = $("#modal-from-dom").modal({
|
||||||
var modalHTML =
|
backdrop: true
|
||||||
'<div class="modal">'
|
, closeOnEscape: true
|
||||||
+ '<div class="modal-header">'
|
})
|
||||||
+ '<h3>Modal Heading</h3>'
|
|
||||||
+ '<a href="#" class="close">×</a>'
|
|
||||||
+ '</div>'
|
|
||||||
+ '<div class="modal-body">'
|
|
||||||
+ '<p>One fine body…</p>'
|
|
||||||
+ '</div>'
|
|
||||||
+ '<div class="modal-footer">'
|
|
||||||
+ '<a href="#" class="btn primary">Primary</a>'
|
|
||||||
+ '<a href="#" class="btn secondary">Secondary</a>'
|
|
||||||
+ '</div>'
|
|
||||||
+ '</div>'
|
|
||||||
|
|
||||||
var simpleModal = $.modal(modalHTML)
|
|
||||||
, optionModal = $.modal({
|
|
||||||
backdrop: true
|
|
||||||
, content: modalHTML
|
|
||||||
, closeOnEscape: true
|
|
||||||
})
|
|
||||||
, domModal = $("#modal-from-dom").modal({
|
|
||||||
backdrop: true
|
|
||||||
, content: modalHTML
|
|
||||||
, closeOnEscape: true
|
|
||||||
})
|
|
||||||
|
|
||||||
$('#modal-basic').click(function () {
|
|
||||||
simpleModal.toggle()
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#modal-options').click(function () {
|
|
||||||
optionModal.toggle();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#modal-from-element').click(function () {
|
$('#modal-from-element').click(function () {
|
||||||
domModal.toggle();
|
domModal.toggle()
|
||||||
})
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
@ -184,6 +143,110 @@ $('#modal-content').modal({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Alerts
|
||||||
|
================================================== -->
|
||||||
|
|
||||||
|
<section id="alerts">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Alerts <small>bootstrap-alerts.js</small></h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="span4 columns">
|
||||||
|
<p>The alert plugin is a super tiny class for adding close functionality to alerts.</p>
|
||||||
|
<a href="assets/js/bootstrap-alerts.js" class="btn primary">Download</a>
|
||||||
|
</div>
|
||||||
|
<div class="span12 columns">
|
||||||
|
<h2>Using bootstrap-alert</h2>
|
||||||
|
<pre class="prettyprint linenums">$(".alert-message").alert()</pre>
|
||||||
|
<h3>Methods</h3>
|
||||||
|
<h4>$().alert</h4>
|
||||||
|
<p>Wraps all alerts with close functionality.</p>
|
||||||
|
<h3>Demo</h3>
|
||||||
|
<div class="alert-message show warning">
|
||||||
|
<a class="close" href="#">×</a>
|
||||||
|
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
|
||||||
|
</div>
|
||||||
|
<div class="alert-message show block-message error">
|
||||||
|
<a class="close" href="#">×</a>
|
||||||
|
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||||
|
<div class="alert-actions">
|
||||||
|
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
$(".alert-message").alert()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Tips
|
||||||
|
================================================== -->
|
||||||
|
|
||||||
|
<section id="twipsy">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Twipsy <small>bootstrap-twipsy.js</small></h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="span4 columns">
|
||||||
|
<p>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!</p>
|
||||||
|
<a href="assets/js/bootstrap-twipsy.js" class="btn primary">Download</a>
|
||||||
|
</div>
|
||||||
|
<div class="span12 columns">
|
||||||
|
<h2>Using bootstrap-twipsy.js</h2>
|
||||||
|
<pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
|
||||||
|
<h3>Options</h3>
|
||||||
|
<ul>
|
||||||
|
<li><strong>delayIn</strong> (<code>number</code>) - delay before showing tooltip (ms).</li>
|
||||||
|
<li><strong>delayOut</strong> (<code>number</code>) - delay before hiding tooltip (ms).</li>
|
||||||
|
<li><strong>fallback</strong> (<code>string</code>) - fallback text to use when no tooltip text.</li>
|
||||||
|
<li><strong>placement</strong> (<code>string</code>) - position of tooltip - above | below | left | right.</li>
|
||||||
|
<li><strong>html</strong> (<code>boolean</code>) - is tooltip content HTML?</li>
|
||||||
|
<li><strong>live</strong> (<code>boolean</code>) - use live event support?</li>
|
||||||
|
<li><strong>offset</strong> (<code>number</code>) - pixel offset of tooltip from element.</li>
|
||||||
|
<li><strong>title</strong> (<code>string|function</code>) - attribute/callback containing tooltip text.</li>
|
||||||
|
<li><strong>trigger</strong> (<code>string</code>) - how tooltip is triggered - hover | focus | manual.</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Methods</h3>
|
||||||
|
<h4>$().twipsy</h4>
|
||||||
|
<p>Attaches a twipsy handler to an element collection.</p>
|
||||||
|
<h3>Demo</h3>
|
||||||
|
<p>Mustache next level keffiyeh you <a href="#" rel='twipsy' title='Some title text'>probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown you probably haven't heard of them before they sold out. Farm-to-table <a href="#" rel='twipsy' title='i <3 cardigans'>cardigans</a> seitan tofu, mcsweeney's fixie sustainable quinoa 8-bit american apparel terry richardson vinyl chambray. Fap beard stumptown, <a href="#" rel='twipsy' title='Another twipsy'>williamsburg</a> banh mi lomo thundercats. DIY tofu biodiesel marfa, four loko mcsweeney's master cleanse vegan chambray. Etsy fap ethical, wes anderson farm-to-table +1 whatever bicycle rights mixtape portland readymade letterpress artisan. Four loko artisan whatever keytar, scenester farm-to-table <a href="#" rel='twipsy' title='The last tip!'>PBR</a> banksy Austin freegan cred raw denim single-origin coffee viral.
|
||||||
|
</p>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
$("a[rel=twipsy]").twipsy({
|
||||||
|
live: true
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Section
|
||||||
|
================================================== -->
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<section id="section">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1></h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="span4 columns">
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
<div class="span12 columns">
|
||||||
|
<h3></h3>
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
-->
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -291,7 +291,6 @@ footer {
|
||||||
// BUTTON STYLES
|
// BUTTON STYLES
|
||||||
// -------------
|
// -------------
|
||||||
|
|
||||||
|
|
||||||
// Base .btn styles
|
// Base .btn styles
|
||||||
.btn {
|
.btn {
|
||||||
// Button Base
|
// Button Base
|
||||||
|
|
@ -422,7 +421,6 @@ input[type=submit].btn {
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
border-color: #fceec1;
|
border-color: #fceec1;
|
||||||
.box-shadow(none);
|
.box-shadow(none);
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
}
|
}
|
||||||
|
|
@ -579,15 +577,6 @@ input[type=submit].btn {
|
||||||
// MODALS
|
// MODALS
|
||||||
// ------
|
// ------
|
||||||
|
|
||||||
.modal-backdrop,
|
|
||||||
.modal {
|
|
||||||
.transition(opacity .15s linear);
|
|
||||||
opacity: 0;
|
|
||||||
&.open {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-backdrop {
|
.modal-backdrop {
|
||||||
background-color: rgba(0,0,0,.5);
|
background-color: rgba(0,0,0,.5);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -758,3 +747,18 @@ input[type=submit].btn {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Pattern Animations
|
||||||
|
// ------------------
|
||||||
|
|
||||||
|
.modal-backdrop,
|
||||||
|
.modal,
|
||||||
|
.twipsy,
|
||||||
|
.alert-message {
|
||||||
|
.transition(opacity .15s linear);
|
||||||
|
opacity: 0;
|
||||||
|
&.show {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -101,6 +101,13 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
// BASE STYLES
|
// BASE STYLES
|
||||||
// -----------
|
// -----------
|
||||||
|
|
@ -115,90 +122,4 @@ a {
|
||||||
color: @linkColorHover;
|
color: @linkColorHover;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Buttons
|
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
|
||||||
#gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%));
|
|
||||||
padding: 4px 14px;
|
|
||||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
|
||||||
color: #333;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: @baseline;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-bottom-color: #bbb;
|
|
||||||
.border-radius(4px);
|
|
||||||
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
|
||||||
.box-shadow(@shadow);
|
|
||||||
&:hover {
|
|
||||||
background-position: 0 -15px;
|
|
||||||
color: #333;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.primary {
|
|
||||||
#gradient > .vertical(#049CDB, #0064CD);
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
||||||
border: 1px solid darken(#0064CD, 10%);
|
|
||||||
border-bottom-color: darken(#0064CD, 15%);
|
|
||||||
&:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
//.button(#1174C6);
|
|
||||||
.transition(.1s linear all);
|
|
||||||
&.primary {
|
|
||||||
//#gradient > .vertical(@blue, @blueDark);
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
||||||
border-color: @blueDark @blueDark darken(@blueDark, 15%);
|
|
||||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
|
||||||
&:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.large {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 28px;
|
|
||||||
.border-radius(6px);
|
|
||||||
}
|
|
||||||
&.small {
|
|
||||||
padding-right: 9px;
|
|
||||||
padding-left: 9px;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
&.disabled {
|
|
||||||
background-image: none;
|
|
||||||
.opacity(65);
|
|
||||||
cursor: default;
|
|
||||||
.box-shadow(none);
|
|
||||||
}
|
|
||||||
|
|
||||||
// this can't be included with the .disabled def because IE8 and below will drop it ;_;
|
|
||||||
&:disabled {
|
|
||||||
background-image: none;
|
|
||||||
.opacity(65);
|
|
||||||
cursor: default;
|
|
||||||
.box-shadow(none);
|
|
||||||
&.primary {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
@shadow: inset 0 3px 7px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
|
||||||
.box-shadow(@shadow);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Help Firefox not be a jerk about adding extra padding to buttons
|
|
||||||
button.btn,
|
|
||||||
input[type=submit].btn {
|
|
||||||
&::-moz-focus-inner {
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue