Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

indentation fixes, minor cleanup of markup and css

  • Loading branch information...
commit f8f427cb20c64b240b0734adef0047c15e6a550c 1 parent 141bef7
Addy Osmani addyosmani authored
119 css/custom-theme/jquery-ui-1.8.16.custom.css
View
@@ -1,9 +1,14 @@
-/*
- * jQuery UI Bootstrap
- * Portions copyright Addy Osmani, jQuery UI & Twitter Bootstrap
- * Released under MIT/GPL.
+/*!
+ * jQuery UI Bootstrap (0.22)
+ * http://addyosmani.github.com/jquery-ui-bootstrap
+ *
+ * Copyright 2012, Addy Osmani
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Portions copyright jQuery UI & Twitter Bootstrap
*/
+
/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
@@ -599,20 +604,7 @@
}
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
-button.ui-button-icon-only {
- /*
- width: 2.4em;
- margin-right: -.3em;
- display: inline-block;
-position: relative;
-margin-right: .1em;
-text-decoration: none !important;
-cursor: pointer;
-text-align: center;
-zoom: 1;
-overflow: visible;
-*/
- } /* button elements seem to need a little more width */
+button.ui-button-icon-only { } /* button elements seem to need a little more width */
.ui-button-icons-only { width: 3.4em; }
button.ui-button-icons-only { width: 3.7em; }
@@ -696,7 +688,6 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
}
.ui-dialog .ui-dialog-title {
float: left;
- /*margin: .1em 16px .1em 0; */
color:#404040;
font-weight:bold;
margin-top:5px;
@@ -705,26 +696,27 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
}
.ui-dialog .ui-dialog-titlebar-close {
-position: absolute;
-right: .3em;
-top: 50%;
-width: 19px;
-margin: -10px 0 0 0;
-padding: 1px;
-height: 18px;
-font-size: 20px;
-font-weight: bold;
-line-height: 13.5px;
-text-shadow: 0 1px 0 #ffffff;
-filter: alpha(opacity=25);
--khtml-opacity: 0.25;
--moz-opacity: 0.25;
-opacity: 0.25;
+ position: absolute;
+ right: .3em;
+ top: 50%;
+ width: 19px;
+ margin: -10px 0 0 0;
+ padding: 1px;
+ height: 18px;
+ font-size: 20px;
+ font-weight: bold;
+ line-height: 13.5px;
+ text-shadow: 0 1px 0 #ffffff;
+ filter: alpha(opacity=25);
+ -khtml-opacity: 0.25;
+ -moz-opacity: 0.25;
+ opacity: 0.25;
}
+
.ui-dialog .ui-dialog-titlebar-close span {
-display: block;
-margin: 1px;
-text-indent: 9999px;
+ display: block;
+ margin: 1px;
+ text-indent: 9999px;
}
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; filter: alpha(opacity=90);
@@ -758,7 +750,7 @@ text-indent: 9999px;
.ui-draggable .ui-dialog-titlebar { cursor: move; }
.ui-dialog-buttonpane .ui-dialog-buttonset .ui-button{
- color: #ffffff;
+ color: #ffffff;
background-color: #0064cd;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
@@ -786,9 +778,7 @@ text-indent: 9999px;
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0;
-
-/*this can be removed if ui-widget-header is blue*/
- color: #ffffff;
+ color: #ffffff;
background-color: #0064cd;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
@@ -830,7 +820,6 @@ text-indent: 9999px;
.ui-tabs { position: relative; padding: .2em; zoom: 1; border:0px;} /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
-
.ui-tabs .ui-tabs-nav li:hover, .ui-tabs .ui-tabs-nav li a:hover{
background:whiteSmoke;
border-bottom:1px solid #ddd;
@@ -882,15 +871,8 @@ text-indent: 9999px;
outline:none;
}
-.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
-cursor: pointer;
-color:#0069D6;
-background:none;
-font-weight:normal;
-margin-bottom:-1px;
-
-
-} /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
+.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; color:#0069D6; background:none; font-weight:normal; margin-bottom:-1px;}
+/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs-panel .ui-button{text-decoration:none;}
.ui-tabs .ui-tabs-hide { display: none !important; }
@@ -913,16 +895,7 @@ margin-bottom:-1px;
* http://docs.jquery.com/UI/Datepicker#theming
*/
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
-.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; border:0px;
-
- font-weight: bold;
- width: 100%;
- padding: 4px 0;
- background-color: #f5f5f5;
- color: #808080;
-
-
- }
+.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; border:0px; font-weight: bold; width: 100%; padding: 4px 0; background-color: #f5f5f5; color: #808080; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { /*top: 1px;*/ }
@@ -973,15 +946,15 @@ margin-bottom:-1px;
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
- display: none; /*sorry for IE5*/
- display/**/: block; /*sorry for IE5*/
- position: absolute; /*must have*/
- z-index: -1; /*must have*/
- filter: mask(); /*must have*/
- top: -4px; /*must have*/
- left: -4px; /*must have*/
- width: 200px; /*must have*/
- height: 200px; /*must have*/
+ display: none; /*sorry for IE5*/
+ display/**/: block; /*sorry for IE5*/
+ position: absolute; /*must have*/
+ z-index: -1; /*must have*/
+ filter: mask(); /*must have*/
+ top: -4px; /*must have*/
+ left: -4px; /*must have*/
+ width: 200px; /*must have*/
+ height: 200px; /*must have*/
}
.ui-datepicker th{
@@ -1120,7 +1093,7 @@ textarea,
/**Toolbar**/
.ui-toolbar{
- padding: 7px 14px;
+ padding: 7px 14px;
margin: 0 0 18px;
background-color: #f5f5f5;
background-repeat: repeat-x;
@@ -1264,8 +1237,8 @@ div.wijmo-wijmenu .wijmo-wijmenu-item .wijmo-wijmenu-child{
}
div.wijmo-wijmenu .wijmo-wijmenu-item{
- margin:0;
- border:0;
+ margin:0;
+ border:0;
}
.wijmo-wijmenu a.wijmo-wijmenu-link{
15 css/demo.css
View
@@ -1,3 +1,14 @@
+/*!
+ * jQuery UI Bootstrap (0.22)
+ * http://addyosmani.github.com/jquery-ui-bootstrap
+ *
+ * Copyright 2012, Addy Osmani
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Portions copyright jQuery UI & Twitter Bootstrap
+ */
+
+
.demoHeaders {
margin-top: 1.5em;
margin-bottom: 1em;
@@ -92,6 +103,10 @@ ul#icons span.ui-icon {
margin-bottom:18px;
}
+#toolbar {
+padding: 10px 4px;
+}
+
input[type="text"],
input[type="password"],
.ui-autocomplete-input,
211 index.html
View
@@ -13,10 +13,9 @@
- <!-- Le styles -->
+ <!-- Styles -->
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link href="bootstrap/bootstrap.css" rel="stylesheet">
-
<link href="css/demo.css" rel="stylesheet">
<style type="text/css">
/* Override some defaults */
@@ -107,20 +106,19 @@
<div class="span10">
- <div class="alert-message block-message warning">
-
- <p>
-
- <p><strong>Welcome!</strong> This is a live preview of new the jQuery UI Bootstrap theme - a project I started to bring the beauty of Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> to jQuery UI widgets.
- </p>
- <p>
- With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually. </p>
- <p>
- It's still a work-in-progress, but I hope you find it useful. Issues and pull requests are always welcome - <a href="http://twitter.com/addyosmani">@addyosmani</a>
- </p>
- </p>
-
- </div>
+ <!--welcome-->
+ <div class="alert-message block-message warning">
+ <p>
+ <p><strong>Welcome!</strong> This is a live preview of new the jQuery UI Bootstrap theme - a project I started to bring the beauty of Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> to jQuery UI widgets.
+ </p>
+ <p>
+ With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually. </p>
+ <p>
+ It's still a work-in-progress, but I hope you find it useful. Issues and pull requests are always welcome - <a href="http://twitter.com/addyosmani">@addyosmani</a>
+ </p>
+ </p>
+ </div>
+ <!--end welcome-->
<!-- Accordion -->
@@ -156,7 +154,7 @@ <h2 class="demoHeaders">Tabs</h2>
<!--end tabs-->
- <!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
+ <!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
<h2 class="demoHeaders">Dialog</h2>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
&nbsp;
@@ -386,7 +384,6 @@ <h2 class="demoHeaders">Framework Icons (content color preview)</h2>
<!--Dynamic tabs-->
-
<style>
#dialog2 label, #dialog2 input { display:block; }
#dialog2 label { margin-top: 0.5em; }
@@ -454,16 +451,14 @@ <h2 class="demoHeaders">Combination examples</h2>
<!--start filamentgroup datepicker-->
-
-
<link href="third-party/jQuery-UI-Date-Range-Picker/css/ui.daterangepicker.css" media="screen" rel="Stylesheet" type="text/css" />
<p>&nbsp;</p>
<h2>FilamentGroup Date Range Picker</h2>
<p>&nbsp;</p>
<p>
- The date range picker plugin code is open source and available in a git repository, <a href="https://github.com/filamentgroup/jQuery-UI-Date-Range-Picker">jQuery-UI-Date-Range-Picker</a>. For demonstration sakes it is included in this theme pack with style updates.
- </p>
+ The date range picker plugin code is open source and available in a git repository, <a href="https://github.com/filamentgroup/jQuery-UI-Date-Range-Picker">jQuery-UI-Date-Range-Picker</a>. For demonstration sakes it is included in this theme pack with style updates.
+ </p>
<p>
<h3>Default Rangepicker</h3>
<div>
@@ -477,51 +472,50 @@ <h2 class="demoHeaders">Combination examples</h2>
</div>
</p>
-
<!--end filament group datepicker-->
- <!--begin wijmo menu-->
- <link href="third-party/wijmo/jquery.wijmo-open.1.5.0.css" rel="stylesheet" type="text/css" />
- <style>
- .wijmo-container
- {
- display: block;
- clear: both;
- width: 600px;
- }
- </style>
- <div class="wijmo-container">
- <p>
- &nbsp;</p>
- <h2 class="demoHeaders">
- Wijmo Menu</h2>
- <p>
- This is an example of how to retheme one of the Wijmo jQuery UI components to match the Twitter Bootstrap theme. Whilst a menu component will be arriving to jQueryUI soon, you can find the menu in <a href="http://wijmo.com/widgets/wijmo-open/">Wijmo Open</a>.</p>
- <ul id="menu1">
- <li>
- <h3>
- <a href="">Project Name</a></h3>
- </li>
- <li><a href="#">Home</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Dropdown</a>
- <ul>
- <li><a href="#">Secondary link</a> </li>
- <li><a href="#">Something else here</a> </li>
- <li></li>
- <li><a href="#">Another link</a> </li>
- </ul>
- </li>
- <li>
- <input type="text" placeholder="Search">
- </li>
- </ul>
- <!-- End demo markup -->
- </div>
- <!--end wijmo menu-->
+ <!--begin wijmo menu-->
+ <link href="third-party/wijmo/jquery.wijmo-open.1.5.0.css" rel="stylesheet" type="text/css" />
+ <style>
+ .wijmo-container
+ {
+ display: block;
+ clear: both;
+ width: 600px;
+ }
+ </style>
+ <div class="wijmo-container">
+ <p>
+ &nbsp;</p>
+ <h2 class="demoHeaders">
+ Wijmo Menu</h2>
+ <p>
+ This is an example of how to retheme one of the Wijmo jQuery UI components to match the Twitter Bootstrap theme. Whilst a menu component will be arriving to jQueryUI soon, you can find the menu in <a href="http://wijmo.com/widgets/wijmo-open/">Wijmo Open</a>.</p>
+ <ul id="menu1">
+ <li>
+ <h3>
+ <a href="">Project Name</a></h3>
+ </li>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Dropdown</a>
+ <ul>
+ <li><a href="#">Secondary link</a> </li>
+ <li><a href="#">Something else here</a> </li>
+ <li></li>
+ <li><a href="#">Another link</a> </li>
+ </ul>
+ </li>
+ <li>
+ <input type="text" placeholder="Search">
+ </li>
+ </ul>
+ <!-- End demo markup -->
+ </div>
+ <!--end wijmo menu-->
<p>&nbsp;</p>
@@ -542,13 +536,10 @@ <h2 class="demoHeaders">
<!-- Buttons -->
<h2 class="demoHeaders">Buttons</h2>
<div id="buttons">
- <button>Default</button>
+ <button>Default</button>
<button class="ui-button-primary">Primary</button>
-
<button class="ui-button-success">Success</button>
-
-
</br>
</br>
<button class="ui-button-error">Danger</button>
@@ -645,29 +636,22 @@ <h2 class="demoHeaders">Datepicker</h2>
<!--start toolbar-->
- <style>
- #toolbar {
- padding: 10px 4px;
- }
- </style>
<div class="demo">
+ <p>&nbsp;</p>
+ <h2 class="demoHeaders">Simple toolbar</h2>
+ <p></p>
+ <span id="toolbar" class="ui-toolbar ui-widget-header ui-corner-all">
+
+ <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
+
+ <span id="repeat">
+ <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
+ <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
+ <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
+ </span>
- <p>&nbsp;</p>
- <h2 class="demoHeaders">Simple toolbar</h2>
- <p></p>
- <span id="toolbar" class="ui-toolbar ui-widget-header ui-corner-all">
-
- <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
-
- <span id="repeat">
- <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
- <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
- <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
</span>
-
- </span>
-
</div><!-- End demo -->
<!--end toolbar-->
@@ -686,7 +670,6 @@ <h2 class="demoHeaders">Vertical Slider</h2>
<div id="slider-vertical" style="height:200px;"></div>
-
</div>
<!--end col-->
@@ -701,43 +684,43 @@ <h2 class="demoHeaders">Vertical Slider</h2>
</div> <!-- /container -->
- <!--static dialog-->
- <div id="dialog-message" title="Modal Dialog">
- <p>
- <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
- Your files have downloaded successfully into the My Downloads folder.
- </p>
- <p>
- Currently using <b>36% of your storage space</b>.
- </p>
- </div>
- <!--end static dialog-->
+ <!--static dialog-->
+ <div id="dialog-message" title="Modal Dialog">
+ <p>
+ <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
+ Your files have downloaded successfully into the My Downloads folder.
+ </p>
+ <p>
+ Currently using <b>36% of your storage space</b>.
+ </p>
+ </div>
+ <!--end static dialog-->
- <!--scripts-->
+ <!--scripts-->
- <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
- <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
-
+ <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
+
- <!--daterangepicker-->
- <script type="text/javascript" src="third-party/jQuery-UI-Date-Range-Picker/js/date.js"></script>
- <script type="text/javascript" src="third-party/jQuery-UI-Date-Range-Picker/js/daterangepicker.jQuery.js"></script>
+ <!--daterangepicker-->
+ <script type="text/javascript" src="third-party/jQuery-UI-Date-Range-Picker/js/date.js"></script>
+ <script type="text/javascript" src="third-party/jQuery-UI-Date-Range-Picker/js/daterangepicker.jQuery.js"></script>
- <!--wijmo-->
- <script src="third-party/wijmo/jquery.mousewheel.min.js" type="text/javascript"></script>
- <script src="third-party/wijmo/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
- <script src="third-party/wijmo/jquery.wijmo-open.1.5.0.min.js" type="text/javascript"></script>
+ <!--wijmo-->
+ <script src="third-party/wijmo/jquery.mousewheel.min.js" type="text/javascript"></script>
+ <script src="third-party/wijmo/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
+ <script src="third-party/wijmo/jquery.wijmo-open.1.5.0.min.js" type="text/javascript"></script>
- <!-- FileInput -->
- <script src="third-party/jQuery-UI-FileInput/js/enhance.min.js" type="text/javascript"></script>
- <script src="third-party/jQuery-UI-FileInput/js/fileinput.jquery.js" type="text/javascript"></script>
+ <!-- FileInput -->
+ <script src="third-party/jQuery-UI-FileInput/js/enhance.min.js" type="text/javascript"></script>
+ <script src="third-party/jQuery-UI-FileInput/js/fileinput.jquery.js" type="text/javascript"></script>
- <!--init for this page-->
- <script type="text/javascript" src="js/demo.js"></script>
+ <!--init for this page-->
+ <script type="text/javascript" src="js/demo.js"></script>
8 js/demo.js
View
@@ -120,9 +120,6 @@ $(function () {
}).click(function () {
alert("Could display a menu to select an action");
}).parent().buttonset();
-});
-
-
var $tab_title_input = $("#tab_title"),
@@ -274,4 +271,7 @@ $(function () {
//Toolbar
$("#play, #shuffle").button();
- $("#repeat").buttonset();
+ $("#repeat").buttonset();
+
+
+});
Please sign in to comment.
Something went wrong with that request. Please try again.