remove static popovers, modals, and twipsies from components in favor of full javascript page
This commit is contained in:
Mark Otto
parent
83c0896999
commit
5032ef9b54
|
|
@ -6,7 +6,7 @@
|
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Sun Jan 8 19:32:37 PST 2012
|
||||
* Date: Sun Jan 8 21:54:13 PST 2012
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
|
|
@ -1577,6 +1577,7 @@ i {
|
|||
filter: alpha(opacity=40);
|
||||
-moz-opacity: 0.4;
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
}
|
||||
.navbar {
|
||||
overflow: visible;
|
||||
|
|
|
|||
|
|
@ -309,7 +309,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
|
|||
.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;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 blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
|
||||
.fade{-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;}.fade.in{opacity:1;}
|
||||
.collapse{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;position:relative;overflow:hidden;height:0;}.collapse.in{height:auto;}
|
||||
.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;}
|
||||
.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;cursor:pointer;}
|
||||
.navbar{overflow:visible;}
|
||||
.navbar-inner{background-color:#222222;background-color:#222222;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
|
||||
.navbar .brand:hover{color:#ffffff;text-decoration:none;}
|
||||
|
|
|
|||
|
|
@ -1010,26 +1010,26 @@
|
|||
</div>
|
||||
<div class="span9">
|
||||
<div class="alert-message warning">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
|
||||
</div>
|
||||
<div class="alert-message error">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
|
||||
</div>
|
||||
<div class="alert-message success">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Well done!</strong> You successfully read this alert message.</p>
|
||||
</div>
|
||||
<div class="alert-message info">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
|
||||
</div>
|
||||
|
||||
<h4>Example code</h4>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="alert-message warning">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
|
||||
</div>
|
||||
</pre>
|
||||
|
|
@ -1048,14 +1048,14 @@
|
|||
</div>
|
||||
<div class="span9">
|
||||
<div class="alert-message block-message warning">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</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>
|
||||
<div class="alert-message block-message error">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again.</p>
|
||||
<ul>
|
||||
<li>Duis mollis est non commodo luctus</li>
|
||||
|
|
@ -1067,14 +1067,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="alert-message block-message success">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</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>
|
||||
<div class="alert-message block-message info">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
|
||||
<div class="alert-actions">
|
||||
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
|
||||
|
|
@ -1084,7 +1084,7 @@
|
|||
<h4>Example code</h4>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="alert-message block-message warning">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
|
||||
<div class="alert-actions">
|
||||
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
|
||||
|
|
@ -1096,101 +1096,6 @@
|
|||
</section>
|
||||
|
||||
|
||||
<!-- Modals
|
||||
================================================== -->
|
||||
<section id="popovers">
|
||||
<div class="page-header">
|
||||
<h1>Modals <small></small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Modals</h2>
|
||||
<p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="well" style="background-color: #888; border: none; ">
|
||||
<!-- Modal -->
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
|
||||
<div class="modal-header">
|
||||
<a href="#" class="close js-dismiss">×</a>
|
||||
<h3>Modal Heading</h3>
|
||||
</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</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Twipsies
|
||||
================================================== -->
|
||||
<section id="carousel">
|
||||
<div class="page-header">
|
||||
<h1>Twipsy tooltips <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Tooltips</h2>
|
||||
<p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript »</a></p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="twipsies well">
|
||||
<div style="position: relative">
|
||||
<p class="muted" style="margin-bottom: 0">
|
||||
Lorem ipsum dolar sit amet illo error <a href="#" title="bottom">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="top">rem</a> quae aut veritatis quasi quae.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Popovers
|
||||
================================================== -->
|
||||
<section id="popovers">
|
||||
<div class="page-header">
|
||||
<h1>Popovers <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Popovers</h2>
|
||||
<p>Use popovers to provide subtextual information to a page without affecting layout.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript »</a></p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="well popover-well">
|
||||
<div class="popover-wrapper">
|
||||
<div class="popover left">
|
||||
<div class="arrow"></div>
|
||||
<div class="inner">
|
||||
<h3 class="title">Popover Title</h3>
|
||||
<div class="content">
|
||||
<p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img class="large-bird" src="assets/img/bird.png" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
<!-- Progress bars
|
||||
================================================== -->
|
||||
|
|
|
|||
|
|
@ -13,5 +13,6 @@
|
|||
color: @black;
|
||||
text-decoration: none;
|
||||
.opacity(40);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue