Upgrade to Bootstrap 3

js/eventMgr.js

@@ -213,7 +213,7 @@ define([
                     settingsBlock: extension.settingsBlock
                 }): "");
             }, "").value();
-            document.getElementById('accordion-extensions').innerHTML = accordionHtml;
+            document.querySelector('.accordion-extensions').innerHTML = accordionHtml;
             
             // Create a button from an extension listener
             function createBtn(listener) {

js/extensions/documentManager.js

@@ -88,7 +88,7 @@ define([
                 fileDesc: fileDesc,
             });
         }, '').value();
-        selectedDocumentListElt.innerHTML = '<ul class="nav">' + selectedDocumentListHtml + '</ul>';
+        selectedDocumentListElt.innerHTML = '<ul class="file-list nav">' + selectedDocumentListHtml + '</ul>';
 
         // Ask user confirmation
         $(modalElt.querySelectorAll('.document-list')).addClass('hide');

js/html/bodyIndex.html

@@ -918,7 +918,7 @@
 						</div>
 					</div>
 					<div class="tab-pane" id="tabpane-settings-extensions">
-						<div class="accordion" id="accordion-extensions"></div>
+						<div class="panel-group accordion-extensions"></div>
 						<span class="help-block pull-right"><a target="_blank"
 							href="https://github.com/benweet/stackedit/blob/master/doc/developer-guide.md#architecture">Create
 								your own extension...</a></span>

js/html/settingsExtensionsAccordion.html

@@ -1,14 +1,16 @@
-<div class="accordion-group">
+<div class="panel">
 	<div class="accordion-heading">
-	<div class="checkbox pull-right">
+		<div class="checkbox pull-right">
-		<label> <input
+			<label> <input id="input-enable-extension-<%= extensionId %>"
-			id="input-enable-extension-<%= extensionId %>" type="checkbox"<%
+				type="checkbox"<% if(!isOptional) print('disabled') %>>
-			if(!isOptional) print('disabled') %>> enabled
+				enabled
-		</label></div><span data-toggle="collapse"
+			</label>
-			data-parent="#accordion-extensions" class="accordion-toggle"
+		</div>
-			href="#collapse-<%= extensionId %>"> <%= extensionName %> </span>
+		<span data-toggle="collapse" data-parent=".accordion-extensions"
+			class="accordion-toggle" href="#accordion-extensions-collapse-<%= extensionId %>">
+			<%= extensionName %> </span>
 	</div>
-	<div id="collapse-<%= extensionId %>" class="accordion-body collapse">
+	<div id="accordion-extensions-collapse-<%= extensionId %>" class="collapse">
 		<div class="accordion-inner clearfix"><%= settingsBlock %></div>
 	</div>
 </div>

js/libs/bootstrap/less/button-groups.less

@@ -18,16 +18,18 @@
     border-top-color: #fff;
   }
 }
-.dropup .caret {
+.dropup {
-  .btn-default & {
+  & .btn-default .caret {
     border-bottom-color: @btn-default-color;
   }
-  .btn-primary &,
+  & .btn-primary,
-  .btn-success &,
+  & .btn-success,
-  .btn-warning &,
+  & .btn-warning,
-  .btn-danger &,
+  & .btn-danger,
-  .btn-info & {
+  & .btn-info {
-    border-bottom-color: #fff;
+   .caret {
+      border-bottom-color: #fff;
+    }
   }
 }
 

js/libs/bootstrap/less/buttons.less

@@ -41,7 +41,7 @@
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
-    cursor: default;
+    cursor: not-allowed;
     pointer-events: none; // Future-proof disabling of clicks
     .opacity(.65);
     .box-shadow(none);

js/libs/bootstrap/less/dropdowns.less

@@ -75,8 +75,7 @@
   &:focus {
     text-decoration: none;
     color: @dropdown-link-hover-color;
-    #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
+    background-color: @dropdown-link-hover-bg;
-    background-color: darken(@dropdown-link-hover-bg, 5%);
   }
 }
 
@@ -88,8 +87,7 @@
     color: @dropdown-link-active-color;
     text-decoration: none;
     outline: 0;
-    #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
+    background-color: @dropdown-link-active-bg;
-    background-color: darken(@dropdown-link-active-bg, 5%);
   }
 }
 

js/libs/bootstrap/less/forms.less

@@ -133,9 +133,9 @@ input[type="number"] {
   .form-control-focus();
 
   // Disabled and read-only inputs
-  // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
+  // Note: HTML5 says that controls under a fieldset > legend:first-child won't
-  //   disabled if the fieldset is disabled. Due to implementation difficulty,
+  // be disabled if the fieldset is disabled. Due to implementation difficulty,
-  //   we don't honor that edge case; we style them as disabled anyway.
+  // we don't honor that edge case; we style them as disabled anyway.
   &[disabled],
   &[readonly],
   fieldset[disabled] & {
@@ -207,6 +207,20 @@ input[type="number"] {
   margin-left: 10px; // space out consecutive inline controls
 }
 
+// Apply same disabled cursor tweak as for inputs
+//
+// Note: Neither radios nor checkboxes can be readonly.
+input[type="radio"],
+input[type="checkbox"],
+.radio,
+.radio-inline,
+.checkbox,
+.checkbox-inline {
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+  }
+}
 
 // Form control sizing
 .input-sm {

js/libs/bootstrap/less/input-groups.less

@@ -32,7 +32,7 @@
 .input-group-lg > .input-group-btn > .btn { .input-lg(); }
 .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
-.input-group-lg > .input-group-btn > .btn { .input-sm(); }
+.input-group-sm > .input-group-btn > .btn { .input-sm(); }
 
 
 // Display as table-cell

js/libs/bootstrap/less/labels.less

@@ -37,18 +37,22 @@
   .label-variant(@label-default-bg);
 }
 
-.label-danger {
+.label-primary {
-  .label-variant(@label-danger-bg);
+  .label-variant(@label-primary-bg);
 }
 
 .label-success {
   .label-variant(@label-success-bg);
 }
 
+.label-info {
+  .label-variant(@label-info-bg);
+}
+
 .label-warning {
   .label-variant(@label-warning-bg);
 }
 
-.label-info {
+.label-danger {
-  .label-variant(@label-info-bg);
+  .label-variant(@label-danger-bg);
 }

js/libs/bootstrap/less/mixins.less

@@ -294,10 +294,10 @@
 
 
 
-// RETINA IMAGE SUPPORT
+// Retina images
-// --------------------------------------------------
+//
-
 // Short retina mixin for setting background-image and -size
+
 .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
   background-image: url("@{file-1x}");
 
@@ -314,6 +314,17 @@
 }
 
 
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+
+.img-responsive(@display: block;) {
+  display: @display;
+  max-width: 100%; // Part 1: Set a maximum relative to the parent
+  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+}
+
+
 // COMPONENT MIXINS
 // --------------------------------------------------
 
@@ -376,7 +387,7 @@
       border-color: @border;
     }
   }
-  
+
   // Hover states for `.table-hover`
   // Note: this is not available for cells or rows within `thead` or `tfoot`.
   .table-hover > tbody > tr {
@@ -710,12 +721,12 @@
   font-size: @font-size;
   line-height: @line-height;
   border-radius: @border-radius;
-  
+
   select& {
     height: @input-height;
     line-height: @input-height;
   }
-  
+
   textarea& {
     height: auto;
   }

js/libs/bootstrap/less/navbar.less

@@ -51,7 +51,8 @@
 // content for the user's viewport.
 
 .navbar-collapse {
-  padding: 5px @navbar-padding-horizontal;
+  padding-right: @navbar-padding-horizontal;
+  padding-left:  @navbar-padding-horizontal;
   border-top: 1px solid darken(@navbar-bg, 7%);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
   // Clear floated elements and prevent collapsing of padding
@@ -66,9 +67,21 @@
 
   @media (min-width: @grid-float-breakpoint) {
     width: auto;
-    padding: 0;
+    padding-right: 0;
+    padding-left:  0;
     border-top: 0;
     box-shadow: none;
+
+    &.collapse {
+      display: block !important;
+      height: auto !important;
+      padding-bottom: 0; // Override default setting
+      overflow: visible !important;
+    }
+
+    &.in {
+      overflow-y: visible;
+    }
   }
 }
 
@@ -114,7 +127,6 @@
 
 .navbar-brand {
   float: left;
-  margin-right: (@navbar-padding-horizontal / 2);
   padding-top: @navbar-padding-vertical;
   padding-bottom: @navbar-padding-vertical;
   font-size: @font-size-large;
@@ -159,6 +171,13 @@
   .icon-bar + .icon-bar {
     margin-top: 4px;
   }
+
+  @media (min-width: @grid-float-breakpoint) {
+    position: relative;
+    top: auto;
+    left: auto;
+    display: none;
+  }
 }
 
 
@@ -168,14 +187,11 @@
 // the nav the full height of the horizontal nav (above 768px).
 
 .navbar-nav {
+  padding-top:    (@navbar-padding-vertical / 2);
+  padding-bottom: (@navbar-padding-vertical / 2);
   margin-left: -@navbar-padding-horizontal;
   margin-right: -@navbar-padding-horizontal;
 
-  @media (min-width: @grid-float-breakpoint) {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
   > li > a {
     padding-top:    10px;
     padding-bottom: 10px;
@@ -205,7 +221,7 @@
   }
 
   @media (max-width: @screen-phone-max) {
-    // Dropdowns get custom display
+    // Dropdowns get custom display when collapsed
     .open .dropdown-menu {
       position: static;
       float: none;
@@ -247,6 +263,22 @@
     }
   }
 
+  // Uncollapse the nav
+  @media (min-width: @grid-float-breakpoint) {
+    float: left;
+    margin: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+
+    > li {
+      float: left;
+      > a {
+        padding-top: ((@navbar-height - @line-height-computed) / 2);
+        padding-bottom: ((@navbar-height - @line-height-computed) / 2);
+      }
+    }
+  }
+
 }
 
 
@@ -278,6 +310,8 @@
   padding: 10px @navbar-padding-horizontal;
   border-top: 1px solid darken(@navbar-bg, 7%);
   border-bottom: 1px solid darken(@navbar-bg, 7%);
+  @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
+  .box-shadow(@shadow);
 
   // Mixin behavior for optimum display
   .form-inline();
@@ -299,6 +333,7 @@
     margin-right: 0;
     padding-top: 0;
     padding-bottom: 0;
+    .box-shadow(none);
   }
 }
 
@@ -351,6 +386,43 @@
 }
 
 
+// Buttons in navbars
+//
+// Vertically center a button within a navbar (when *not* in a form).
+
+.navbar-btn {
+  .navbar-vertical-align(@input-height-base);
+}
+
+
+// Text in navbars
+//
+// Add a class to make any element properly align itself vertically within the navbars.
+
+.navbar-text {
+  float: left;
+  color: @navbar-color;
+  .navbar-vertical-align(@line-height-computed);
+
+  @media (min-width: @grid-float-breakpoint) {
+    margin-left: @navbar-padding-horizontal;
+    margin-right: @navbar-padding-horizontal;
+  }
+}
+
+
+// Links in navbars
+//
+// Add a class to ensure links outside the navbar nav are colored correctly.
+
+// Default navbar variables
+.navbar-link {
+  color: @navbar-link-color;
+  &:hover {
+    color: @navbar-link-hover-color;
+  }
+}
+
 
 // Inverse navbar
 // --------------------------------------------------
@@ -412,8 +484,9 @@
     }
   }
 
-  .navbar-collapse {
+  .navbar-collapse,
-    border-top-color: darken(@navbar-inverse-bg, 7%);
+  .navbar-form {
+    border-color: darken(@navbar-inverse-bg, 7%);
   }
 
   // Dropdowns
@@ -479,85 +552,11 @@
     }
   }
 
-}
+  .navbar-link {
-
+    color: @navbar-inverse-link-color;
-
+    &:hover {
-
+      color: @navbar-inverse-link-hover-color;
-// Responsive navbar
-// --------------------------------------------------
-
-@media screen and (min-width: @grid-float-breakpoint) {
-
-  .navbar-nav {
-    float: left;
-    // undo margin to make nav extend full height of navbar
-    margin-top: 0;
-    margin-bottom: 0;
-
-    > li {
-      float: left;
-      > a {
-        padding-top: ((@navbar-height - @line-height-computed) / 2);
-        padding-bottom: ((@navbar-height - @line-height-computed) / 2);
-      }
     }
   }
 
-  // Required to make the collapsing navbar work on regular desktops
-  .navbar-toggle {
-    position: relative;
-    top: auto;
-    left: auto;
-    display: none;
-  }
-  .navbar-collapse.collapse {
-    display: block !important;
-    height: auto !important;
-    padding-bottom: 0; // Override default setting
-    overflow: visible !important;
-  }
-
-}
-
-
-
-// Buttons in navbars
-//
-// Vertically center a button within a navbar (when *not* in a form).
-
-.navbar-btn {
-  margin-top: ((@navbar-height - @input-height-base) / 2);
-}
-
-
-
-// Text in navbars
-//
-// Add a class to make any element properly align itself vertically within the navbars.
-
-.navbar-text {
-  float: left;
-  .navbar-vertical-align(@line-height-computed);
-}
-
-
-
-// Links in navbars
-//
-// Add a class to ensure links outside the navbar nav are colored correctly.
-
-// Default navbar variables
-.navbar-link {
-  color: @navbar-link-color;
-  &:hover {
-    color: @navbar-link-hover-color;
-  }
-}
-
-// Use the inverse navbar variables
-.navbar-inverse .navbar-link {
-  color: @navbar-inverse-link-color;
-  &:hover {
-    color: @navbar-inverse-link-hover-color;
-  }
 }

js/libs/bootstrap/less/navs.less

@@ -19,7 +19,7 @@
     > a {
       position: relative;
       display: block;
-      padding: 10px 15px;
+      padding: @nav-link-padding;
       &:hover,
       &:focus {
         text-decoration: none;
@@ -87,7 +87,7 @@
       border: 1px solid transparent;
       border-radius: @border-radius-base @border-radius-base 0 0;
       &:hover {
-        border-color: @nav-tabs-link-hover-border-color;
+        border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
       }
     }
 

js/libs/bootstrap/less/pagination.less

@@ -11,18 +11,19 @@
     display: inline; // Remove list-style and block-level defaults
     > a,
     > span {
+      position: relative;
       float: left; // Collapse white-space
       padding: @padding-base-vertical @padding-base-horizontal;
       line-height: @line-height-base;
       text-decoration: none;
       background-color: @pagination-bg;
       border: 1px solid @pagination-border;
-      border-left-width: 0;
+      margin-left: -1px;
     }
     &:first-child {
       > a,
       > span {
-        border-left-width: 1px;
+        margin-left: 0;
         .border-left-radius(@border-radius-base);
       }
     }
@@ -34,16 +35,25 @@
     }
   }
 
-  > li > a:hover,
+  > li > a,
-  > li > a:focus,
+  > li > span {
-  > .active > a,
+    &:hover,
-  > .active > span {
+    &:focus {
-    background-color: @pagination-active-bg;
+      background-color: @pagination-hover-bg;
+    }
   }
+
   > .active > a,
   > .active > span {
-    color: @pagination-active-color;
+    &,
-    cursor: default;
+    &:hover,
+    &:focus {
+      z-index: 2;
+      color: @pagination-active-color;
+      background-color: @pagination-active-bg;
+      border-color: @pagination-active-bg;
+      cursor: default;
+    }
   }
 
   > .disabled {
@@ -53,6 +63,7 @@
     > a:focus {
       color: @pagination-disabled-color;
       background-color: @pagination-bg;
+      border-color: @pagination-border;
       cursor: not-allowed;
     }
   }

js/libs/bootstrap/less/progress-bars.less

@@ -78,22 +78,18 @@
 // Variations
 // -------------------------
 
-// Danger (red)
-.progress-bar-danger {
-  .progress-bar-variant(@progress-bar-danger-bg);
-}
-
-// Success (green)
 .progress-bar-success {
   .progress-bar-variant(@progress-bar-success-bg);
 }
 
-// Warning (orange)
+.progress-bar-info {
+  .progress-bar-variant(@progress-bar-info-bg);
+}
+
 .progress-bar-warning {
   .progress-bar-variant(@progress-bar-warning-bg);
 }
 
-// Info (teal)
+.progress-bar-danger {
-.progress-bar-info {
+  .progress-bar-variant(@progress-bar-danger-bg);
-  .progress-bar-variant(@progress-bar-info-bg);
 }

js/libs/bootstrap/less/scaffolding.less

@@ -39,6 +39,14 @@ textarea {
   line-height: inherit;
 }
 
+// Reset unusual Firefox-on-Android default style, see https://github.com/necolas/normalize.css/issues/214
+button,
+input,
+select[multiple],
+textarea {
+  background-image: none;
+}
+
 
 // Links
 // -------------------------
@@ -66,9 +74,7 @@ img {
 
 // Responsive images (ensure images don't scale beyond their parents)
 .img-responsive {
-  display: inline-block;
+  .img-responsive();
-  max-width: 100%; // Part 1: Set a maximum relative to the parent
-  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
 }
 
 // Rounded corners

js/libs/bootstrap/less/thumbnails.less

@@ -20,10 +20,12 @@
 .thumbnail {
   display: block;
 }
-.thumbnail > img,
+.thumbnail > img {
-.img-thumbnail {
   .img-responsive();
 }
+.img-thumbnail {
+  .img-responsive(inline-block);
+}
 
 // Add a hover state for linked versions only
 a.thumbnail:hover,

js/libs/bootstrap/less/variables.less

@@ -296,6 +296,7 @@
 // Navs
 // -------------------------
 
+@nav-link-padding:                          10px 15px;
 @nav-link-hover-bg:                         @gray-lighter;
 
 @nav-disabled-link-color:                   @gray-light;
@@ -326,10 +327,15 @@
 
 @pagination-bg:                        #fff;
 @pagination-border:                    #ddd;
-@pagination-active-bg:                 #f5f5f5;
+
-@pagination-active-color:              @gray-light;
+@pagination-hover-bg:                  @gray-lighter;
+
+@pagination-active-bg:                 @brand-primary;
+@pagination-active-color:              #fff;
+
 @pagination-disabled-color:            @gray-light;
 
+
 // Pager
 // -------------------------
 
@@ -396,6 +402,7 @@
 // -------------------------
 
 @label-default-bg:            @gray-light;
+@label-primary-bg:            @brand-primary;
 @label-success-bg:            @brand-success;
 @label-info-bg:               @brand-info;
 @label-warning-bg:            @brand-warning;

js/styles/default.less

@@ -20,6 +20,7 @@
 @navbar-border: @transparent;
 @nav-disabled-link-color: #ccc;
 @nav-disabled-link-hover-color: #bbb;
+@nav-tabs-border-color: @transparent;
 @dropdown-link-hover-bg: #888;
 @dropdown-link-active-color: #fff;
 @list-group-link-color: #333;
@@ -42,6 +43,7 @@
 @modal-content-border-color: #e8e8e8;
 @modal-footer-border-color: #e8e8e8;
 @modal-content-separator-color: #eee;
+@tooltip-max-width: 220px;
 
 
 body {
@@ -369,9 +371,10 @@ body {
 		    position: absolute;
 		    line-height: 10px;
 		    margin-left: -30px;
-		    margin-top: 5px;
+		    margin-top: 2px;
-		    padding: 8px;
+			padding: 0 8px 4px;
-		    font-weight: normal;
+			font-weight: normal;
+			height: 34px;
 		}
 	}		
 	.list-group-item {
@@ -433,6 +436,9 @@ body {
 			}
 		}
 	}
+	.file-list .list-group-item {
+		padding: 0 3px;
+	}
 	.folder {
 		font-weight: bold;
 		color: @folder-color;
@@ -569,20 +575,19 @@ body {
 		min-height: 100px;
 	}
 	
-	.accordion-group {
+	.panel {
 		border: 0;
-		border-bottom: 1px solid @bg-light;
 		border-radius: inherit;
-		margin-bottom: 10px;
+		background: @modal-content-bg;
-		clear: both;
 	}
 	
 	.accordion-heading {
-		padding: 8px 15px;
+		padding: 12px 15px;
 		.accordion-toggle {
 			display: inline;
 			padding: 0;
-			font-weight: 500;
+			font-weight: bold;
+			cursor: pointer;
 			&:hover {
 				text-decoration: underline;
 			}
@@ -595,7 +600,7 @@ body {
 	
 	.accordion-inner {
 		border: 0;
-		padding: 10px 40px;
+		padding: 10px 40px 20px;
 		.form-horizontal {
 			.control-label {
 				text-align: left;
@@ -607,7 +612,7 @@ body {
 	}
 	
 	.tab-pane-button-container {
-		width: 200px;
+		width: 220px;
 		margin: 10px auto 20px;
 	}
 	
@@ -617,7 +622,6 @@ body {
 	}
 	
 	.nav-tabs {
-		border-bottom: 1px solid transparent;
 		margin: 15px 0 0;
 		
 		& > li > a {
@@ -787,40 +791,6 @@ hr {
 	display: none;
 }
 
-.wmd-prompt-dialog {
-	border: 1px solid #999999;
-	background-color: @body-bg;
-}
-
-.wmd-prompt-dialog>div {
-	font-size: 0.8em;
-	font-family: arial, helvetica, sans-serif;
-}
-
-.wmd-prompt-dialog>form>input[type="text"] {
-	border: 1px solid #999999;
-	color: black;
-}
-
-.wmd-prompt-dialog>form>input[type="button"] {
-	border: 1px solid #888888;
-	font-family: trebuchet MS, helvetica, sans-serif;
-	font-size: 0.8em;
-	font-weight: bold;
-}
-
-.dropdown-menu .divider.with-text {
-	height: auto;
-	margin-bottom: 2px;
-	background-color: transparent;
-	border-top: 1px solid #e5e5e5;
-	color: #ccc;
-	font-variant: small-caps;
-	font-weight: bold;
-	padding-left: 20px;
-	cursor: default;
-}
-
 div.dropdown-menu {
 	padding: 5px 20px;
 }