caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade to Bootstrap 3

Browse Source
This commit is contained in:
benweet 2013-08-05 00:49:07 +01:00
parent 2e45c0921c
commit be3150f18e
15 changed files with 321 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js/core.js
View File

@ -200,9 +200,9 @@ define([
$(".navbar").click(function() { $(".navbar").click(function() {
layout.allowOverflow('north'); layout.allowOverflow('north');
}); });
$(".ui-layout-toggler-north").addClass("btn").append($("<b>").addClass("caret")); $(".ui-layout-toggler-north").addClass("btn btn-info").append($("<b>").addClass("caret"));
$(".ui-layout-toggler-south").addClass("btn").append($("<b>").addClass("caret")); $(".ui-layout-toggler-south").addClass("btn btn-info").append($("<b>").addClass("caret"));
$(".ui-layout-toggler-east").addClass("btn").append($("<b>").addClass("caret")); $(".ui-layout-toggler-east").addClass("btn btn-info").append($("<b>").addClass("caret"));
eventMgr.onLayoutCreated(layout); eventMgr.onLayoutCreated(layout);
} }
@ -334,7 +334,7 @@ define([
editor.undoManager.reinit(initDocumentContent, fileDesc.editorStart, fileDesc.editorEnd, fileDesc.editorScrollTop); editor.undoManager.reinit(initDocumentContent, fileDesc.editorStart, fileDesc.editorEnd, fileDesc.editorScrollTop);
// Hide default buttons // Hide default buttons
$(".wmd-button-row").addClass("btn-group").find("li:not(.wmd-spacer)").addClass("btn").css("left", 0).find("span").hide(); $(".wmd-button-row").addClass("btn-group").find("li:not(.wmd-spacer)").addClass("btn btn-default").css("left", 0).find("span").hide();
// Add customized buttons // Add customized buttons
$("#wmd-bold-button").append($('<i class="icon-bold">')); $("#wmd-bold-button").append($('<i class="icon-bold">'));

2
js/extensions/dialogManagePublication.js
View File

@ -13,7 +13,7 @@ define([
}; };
var fileDesc = undefined; var fileDesc = undefined;
var removeButtonTemplate = '<a class="btn" title="Remove this location"><i class="icon-trash"></i></a>'; var removeButtonTemplate = '<a class="btn btn-default" title="Remove this location"><i class="icon-trash"></i></a>';
var refreshDialog = function(fileDescParameter) { var refreshDialog = function(fileDescParameter) {
if(fileDescParameter !== undefined && fileDescParameter !== fileDesc) { if(fileDescParameter !== undefined && fileDescParameter !== fileDesc) {
return; return;

6
js/extensions/dialogManageSynchronization.js
View File

@ -18,7 +18,7 @@ define([
}; };
var fileDesc = undefined; var fileDesc = undefined;
var removeButtonTemplate = '<a class="btn" title="Remove this location"><i class="icon-trash"></i></a>'; var removeButtonTemplate = '<a class="btn btn-info" title="Remove this location"><i class="icon-trash"></i></a>';
var refreshDialog = function(fileDescParameter) { var refreshDialog = function(fileDescParameter) {
if(fileDescParameter !== undefined && fileDescParameter !== fileDesc) { if(fileDescParameter !== undefined && fileDescParameter !== fileDesc) {
return; return;
@ -40,11 +40,11 @@ define([
syncDesc: syncDesc, syncDesc: syncDesc,
isRealtime: syncAttributes.isRealtime isRealtime: syncAttributes.isRealtime
})); }));
lineElement.append($(removeButtonTemplate).click(function() { lineElement.append($('<div class="input-group-btn">').append($(removeButtonTemplate).click(function() {
synchronizer.tryStopRealtimeSync(); synchronizer.tryStopRealtimeSync();
fileDesc.removeSyncLocation(syncAttributes); fileDesc.removeSyncLocation(syncAttributes);
eventMgr.onSyncRemoved(fileDesc, syncAttributes); eventMgr.onSyncRemoved(fileDesc, syncAttributes);
})); })));
syncList.append(lineElement); syncList.append(lineElement);
}); });
}; };

36
js/html/bodyIndex.html
View File

@ -6,15 +6,15 @@
</ul> </ul>
<ul class="nav pull-right" id="menu-bar"> <ul class="nav pull-right" id="menu-bar">
<li id="extension-buttons"></li> <li id="extension-buttons"></li>
<li class="btn-group"><button class="btn action-create-file" <li class="btn-group"><button class="btn btn-default action-create-file"
title="New local document"> title="New local document">
<i class="icon-file"></i> <i class="icon-file"></i>
</button> </button>
<button class="btn" title="Delete local document" <button class="btn btn-default" title="Delete local document"
data-toggle="modal" data-target="#modal-remove-file-confirm"> data-toggle="modal" data-target="#modal-remove-file-confirm">
<i class="icon-trash"></i> <i class="icon-trash"></i>
</button> </button>
<button class="btn dropdown-toggle action-open-file" <button class="btn btn-default dropdown-toggle action-open-file"
data-toggle="dropdown" title="Open local document"> data-toggle="dropdown" title="Open local document">
<i class="icon-folder-open"></i> <i class="icon-folder-open"></i>
</button> </button>
@ -26,7 +26,7 @@
</div> </div>
</li> </li>
</ul></li> </ul></li>
<li class="btn-group"><button class="btn dropdown-toggle" <li class="btn-group"><button class="btn btn-default dropdown-toggle"
data-toggle="dropdown" title="Menu"> data-toggle="dropdown" title="Menu">
<i class="icon-stackedit"></i>&nbsp;&nbsp;<i class="icon-down-dir"></i> <i class="icon-stackedit"></i>&nbsp;&nbsp;<i class="icon-down-dir"></i>
</button> </button>
@ -121,7 +121,7 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#" <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-insert-link" data-dismiss="modal">OK</a> class="btn btn-primary action-insert-link" data-dismiss="modal">OK</a>
</div> </div>
</div> </div>
@ -147,9 +147,9 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn action-import-image-gplus" <a href="#" class="btn btn-default action-import-image-gplus"
data-dismiss="modal"><i class="icon-gplus"></i> Import from data-dismiss="modal"><i class="icon-gplus"></i> Import from
Google+</a> <a href="#" class="btn" data-dismiss="modal">Cancel</a> <a Google+</a> <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a
href="#" class="btn btn-primary action-insert-image" href="#" class="btn btn-primary action-insert-image"
data-dismiss="modal">OK</a> data-dismiss="modal">OK</a>
</div> </div>
@ -193,7 +193,7 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#" <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-import-image" data-dismiss="modal">OK</a> class="btn btn-primary action-import-image" data-dismiss="modal">OK</a>
</div> </div>
</div> </div>
@ -220,7 +220,7 @@
</blockquote> </blockquote>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#" <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-remove-file" data-dismiss="modal">Delete</a> class="btn btn-primary action-remove-file" data-dismiss="modal">Delete</a>
</div> </div>
</div> </div>
@ -277,7 +277,7 @@
<textarea id="input-convert-html"></textarea> <textarea id="input-convert-html"></textarea>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#" <a href="#" class="btn btn-default" data-dismiss="modal">Close</a> <a href="#"
class="btn btn-primary action-convert-html" data-dismiss="modal">OK</a> class="btn btn-primary action-convert-html" data-dismiss="modal">OK</a>
</div> </div>
</div> </div>
@ -332,7 +332,7 @@
</blockquote> </blockquote>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#" <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
data-dismiss="modal" data-dismiss="modal"
class="btn btn-primary action-sync-export-gdrive">OK</a> class="btn btn-primary action-sync-export-gdrive">OK</a>
</div> </div>
@ -374,7 +374,7 @@
</blockquote> </blockquote>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#" <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
data-dismiss="modal" data-dismiss="modal"
class="btn btn-primary action-sync-export-dropbox">OK</a> class="btn btn-primary action-sync-export-dropbox">OK</a>
</div> </div>
@ -397,7 +397,7 @@
"<span class="file-title"></span>" is synchronized with the "<span class="file-title"></span>" is synchronized with the
following location(s): following location(s):
</p> </p>
<div id="manage-sync-list"></div> <p id="manage-sync-list"></p>
<blockquote class="msg-sync-list hide muted"> <blockquote class="msg-sync-list hide muted">
<b>NOTE:</b> Removing a synchronized location will not delete any <b>NOTE:</b> Removing a synchronized location will not delete any
file. file.
@ -411,14 +411,14 @@
class="icon-gdrive"></i></span><input id="input-sync-manual-gdrive-id" class="icon-gdrive"></i></span><input id="input-sync-manual-gdrive-id"
type="text" class="col-lg-5 form-control" type="text" class="col-lg-5 form-control"
placeholder="GoogleDriveFileID"></input> <a placeholder="GoogleDriveFileID"></input> <a
class="btn action-sync-manual-gdrive" title="Add location" class="btn btn-default action-sync-manual-gdrive" title="Add location"
data-dismiss="modal"><i class="icon-ok"></i></a> data-dismiss="modal"><i class="icon-ok"></i></a>
</div> </div>
<div class="input-prepend input-append sync-manual"> <div class="input-prepend input-append sync-manual">
<span class="add-on" title="Dropbox"><i class="icon-dropbox"></i></span><input <span class="add-on" title="Dropbox"><i class="icon-dropbox"></i></span><input
id="input-sync-manual-dropbox-path" type="text" id="input-sync-manual-dropbox-path" type="text"
class="col-lg-5 form-control" placeholder="/dropbox/file/path"></input> class="col-lg-5 form-control" placeholder="/dropbox/file/path"></input>
<a class="btn action-sync-manual-dropbox" title="Add location" <a class="btn btn-default action-sync-manual-dropbox" title="Add location"
data-dismiss="modal"><i class="icon-ok"></i></a> data-dismiss="modal"><i class="icon-ok"></i></a>
</div> </div>
<blockquote class="muted"> <blockquote class="muted">
@ -653,7 +653,7 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#" <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
data-dismiss="modal" class="btn btn-primary action-process-publish">OK</a> data-dismiss="modal" class="btn btn-primary action-process-publish">OK</a>
</div> </div>
</div> </div>
@ -836,7 +836,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#" <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-apply-settings" data-dismiss="modal">OK</a> class="btn btn-primary action-apply-settings" data-dismiss="modal">OK</a>
</div> </div>
</div> </div>
@ -896,7 +896,7 @@
<blockquote class="muted">Are you sure?</blockquote> <blockquote class="muted">Are you sure?</blockquote>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#" <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-app-reset" data-dismiss="modal">OK</a> class="btn btn-primary action-app-reset" data-dismiss="modal">OK</a>
</div> </div>
</div> </div>

8
js/html/bodyViewer.html
View File

@ -4,13 +4,13 @@
<ul class="nav pull-right hide" id="menu-bar"> <ul class="nav pull-right hide" id="menu-bar">
<li class="btn-group"> <li class="btn-group">
<button class="btn action-edit-document hide" <button class="btn btn-default action-edit-document hide"
title="Edit this document"> title="Edit this document">
<i class="icon-pencil"></i> <i class="icon-pencil"></i>
</button> </button>
</li> </li>
<li class="btn-group"> <li class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown" <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"
title="Save this document"> title="Save this document">
<i class="icon-download-alt"></i> <i class="icon-download-alt"></i>
</button> </button>
@ -24,7 +24,7 @@
</ul> </ul>
</li> </li>
<li class="btn-group"> <li class="btn-group">
<button class="btn dropdown-toggle action-open-file" <button class="btn btn-default dropdown-toggle action-open-file"
data-toggle="dropdown" title="Open local document"> data-toggle="dropdown" title="Open local document">
<i class="icon-folder-open"></i> <i class="icon-folder-open"></i>
</button> </button>
@ -37,7 +37,7 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="btn-group"><button class="btn action-open-stackedit" <li class="btn-group"><button class="btn btn-default action-open-stackedit"
title="Open StackEdit"> title="Open StackEdit">
<i class="icon-stackedit"></i> <i class="icon-stackedit"></i>
</button></li> </button></li>

2
js/html/buttonHtmlCode.html
View File

@ -1,4 +1,4 @@
<button class="btn dropdown-toggle action-html-code" title="HTML code" data-toggle="dropdown"> <button class="btn btn-default dropdown-toggle action-html-code" title="HTML code" data-toggle="dropdown">
<i class="icon-code"></i> <i class="icon-code"></i>
</button> </button>
<div class="dropdown-menu pull-right"> <div class="dropdown-menu pull-right">

2
js/html/buttonMarkdownSyntax.html
View File

@ -1,4 +1,4 @@
<button class="btn dropdown-toggle" title="Markdown syntax" data-toggle="dropdown"> <button class="btn btn-default dropdown-toggle" title="Markdown syntax" data-toggle="dropdown">
<i class="icon-help-circled"></i> <i class="icon-help-circled"></i>
</button> </button>
<div class="dropdown-menu pull-right"> <div class="dropdown-menu pull-right">

2
js/html/buttonPublish.html
View File

@ -1,3 +1,3 @@
<button class="btn" title="Publish this document"> <button class="btn btn-default" title="Publish this document">
<i class="icon-share"></i> <i class="icon-share"></i>
</button> </button>

2
js/html/buttonShare.html
View File

@ -1,4 +1,4 @@
<button class="btn dropdown-toggle" data-toggle="dropdown" <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"
title="Share this document"> title="Share this document">
<i class="icon-link"></i> <i class="icon-link"></i>
</button> </button>

2
js/html/buttonStat.html
View File

@ -1,4 +1,4 @@
<button class="btn dropdown-toggle" title="Document statistics" data-toggle="dropdown"> <button class="btn btn-default dropdown-toggle" title="Document statistics" data-toggle="dropdown">
<i class="icon-chart-bar"></i> <i class="icon-chart-bar"></i>
</button> </button>
<div class="dropdown-menu pull-right"> <div class="dropdown-menu pull-right">

2
js/html/buttonSync.html
View File

@ -1,3 +1,3 @@
<button class="btn" title="Synchronize all documents"> <button class="btn btn-default" title="Synchronize all documents">
<i class="icon-refresh"></i> <i class="icon-refresh"></i>
</button> </button>

2
js/html/buttonToc.html
View File

@ -1,4 +1,4 @@
<button class="btn dropdown-toggle" title="Table of contents" data-toggle="dropdown"> <button class="btn btn-default dropdown-toggle" title="Table of contents" data-toggle="dropdown">
<i class="icon-list"></i> <i class="icon-list"></i>
</button> </button>
<div class="dropdown-menu pull-right"> <div class="dropdown-menu pull-right">

2
js/html/buttonViewer.html
View File

@ -1,4 +1,4 @@
<a href="viewer.html" class="btn dropdown-toggle" <a href="viewer.html" class="btn btn-default dropdown-toggle"
title="Open in viewer"> title="Open in viewer">
<i class="icon-resize-full"></i> <i class="icon-resize-full"></i>
</a> </a>

6
js/html/dialogManageSynchronizationLocation.html
View File

@ -1,5 +1,5 @@
<div class="input-prepend input-append"> <div class="input-group">
<span class="add-on" title="<%= provider.providerName %><%= isRealtime ? ' (real time)' : '' %>"> <i <span class="input-group-addon" title="<%= provider.providerName %><%= isRealtime ? ' (real time)' : '' %>"> <i
class="icon-<%= provider.providerId %><%= isRealtime ? ' realtime' : '' %>"></i> class="icon-<%= provider.providerId %><%= isRealtime ? ' realtime' : '' %>"></i>
</span> <input class="span5" type="text" value="<%= syncDesc %>" disabled /> </span> <input class="col-lg-6 form-control" type="text" value="<%= syncDesc %>" disabled />
</div> </div>

562
js/styles/default.less
View File

@ -1,7 +1,11 @@
@bg-light: #f2f2f2; @bg-light: #f2f2f2;
@preview-bg-light: #e8e8e8;
@bg-navbar-hover: #eee; @bg-navbar-hover: #eee;
@border: #ddd;
@text-inv: #fff; @text-inv: #fff;
@text-light: #888;
@error-border: #ff8661;
@icon-color: #525252;
@icon-color-inv: #fff;
/* Bootstrap */ /* Bootstrap */
@body-bg: #f5f5f5; @body-bg: #f5f5f5;
@ -11,6 +15,16 @@
@dropdown-link-hover-bg: #888; @dropdown-link-hover-bg: #888;
@dropdown-link-active-color: #fff; @dropdown-link-active-color: #fff;
@input-color-placeholder: #ccc; @input-color-placeholder: #ccc;
@btn-default-color: #333333;
@btn-default-bg: #fff;
@btn-default-border: fade(#000, 0%);
@btn-primary-color: #fff;
@btn-primary-bg: #777;
@btn-primary-border: fade(#000, 0%);
@btn-info-bg: @body-bg;
@btn-info-border: fade(#000, 0%);
@gray-lighter: @body-bg;
body { body {
tab-size: 4; tab-size: 4;
@ -38,17 +52,46 @@ body {
Override Bootstrap Override Bootstrap
*/ */
/* /*******************
div,span,a,ul,li,textarea,input,button { * Buttons
background-image: none !important; *******************/
filter: none !important;
-webkit-box-shadow: none !important; .btn {
-moz-box-shadow: none !important; padding: 8px 11px;
box-shadow: none !important; }
text-shadow: none !important;
}
*/
.btn-primary:hover {
color: @btn-primary-color;
}
.btn-group {
margin-right: 10px;
}
// Last dropdown-toggle in a button-group (Bootstrap override)
.btn-group>.btn+.dropdown-toggle {
padding-right: 11px;
padding-left: 11px;
}
/*******************
* Modal
*******************/
.modal-backdrop {
background-color: fade(#999, 60%);
}
.modal-content {
border-width: 0;
}
/********************
* Input
********************/
// Fix form-inline broken since v3
.form-inline { .form-inline {
.col-lg-1 { width: percentage((1 / @grid-columns)); } .col-lg-1 { width: percentage((1 / @grid-columns)); }
.col-lg-2 { width: percentage((2 / @grid-columns)); } .col-lg-2 { width: percentage((2 / @grid-columns)); }
@ -65,24 +108,6 @@ div,span,a,ul,li,textarea,input,button {
* {float:none;} * {float:none;}
} }
.btn,.navbar-inner,.add-on {
border: none !important;
}
/*******************
* Modal
*******************/
.modal-backdrop {
background-color: fade(#999, 60%);
}
.modal-content {
border-width: 0;
}
/********************
* Input
********************/
.form-control:focus { .form-control:focus {
border-color: @input-border; border-color: @input-border;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(128, 128, 128, 0.6)"); .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(128, 128, 128, 0.6)");
@ -93,143 +118,212 @@ div,span,a,ul,li,textarea,input,button {
} }
.modal textarea.error,.modal input.error { .modal textarea.error,.modal input.error {
border-color: #ff8661 !important; border-color: @error-border;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 134, 97, 0.6)");
rgba(255, 134, 97, 0.6) !important;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px
rgba(255, 134, 97, 0.6) !important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px
rgba(255, 134, 97, 0.6) !important;
} }
.nav > li { // Fix add-on support
display: inline-block; .input-group-btn .btn {
border: 1px solid @input-border;
} }
.navbar-inner .btn, .input-group-btn:last-child .btn {
#extension-preview-buttons .btn { border-left: 0;
background-color: #ddd;
} }
#extension-preview-buttons .dropdown-menu, .input-group-addon, .input-group-btn .btn {
#extension-preview-buttons .btn-group.open .btn, .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
#extension-preview-buttons .btn-group.open:hover .btn {
background-color: #e8e8e8;
} }
.navbar-inner .btn:hover, /*******************
.navbar-inner .btn:focus, * Navbar
.navbar-inner .btn:active, *******************/
.navbar-inner .btn.active,
.btn-group.open .btn.dropdown-toggle, .navbar {
#extension-preview-buttons .btn-group:hover .btn { position: static;
color: #333333; .nav {
background-color: @bg-navbar-hover; float: left;
} margin: 6px 0 0;
& > li {
.nav .dropdown-toggle .caret, display: inline-block;
.nav .dropdown-toggle:hover .caret, }
.nav .dropdown-toggle:focus .caret { // Dropdown submenu
border-top-color: #525252; &.pull-right {
border-bottom-color: #525252; float: right;
} & > li > .dropdown-menu {
right: 0;
.navbar .nav.hide { left: auto;
display: none; .dropdown-menu {
} right: 100%;
left: auto;
.navbar-inner .btn{ margin-right: -1px;
&.disabled, margin-left: 0;
&.blocked, }
&[disabled] { }
* { }
color: fade(#333333, 30%); }
.btn {
background-color: @navbar-bg;
border-color: @navbar-bg;
&:hover,
&:focus,
&:active,
&.active {
background-color: @bg-navbar-hover;
}
&.disabled,
&.blocked,
&[disabled] {
* {
color: fade(@btn-default-color, 30%);
}
}
}
.btn-group.open .dropdown-toggle {
background-color: @bg-navbar-hover;
}
// Support for dropdown submenu (from Bootstrap v2)
.dropdown-submenu {
position: relative;
& > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
}
&:hover {
& > a {
color: @dropdown-link-hover-color;
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
&:after {
border-left-color: @dropdown-link-hover-color;
}
}
& > .dropdown-menu {
display: block;
}
}
& > a:after {
display: block;
float: right;
width: 0;
height: 0;
margin-top: 5px;
margin-right: -10px;
border-color: transparent;
border-left-color: #cccccc;
border-style: solid;
border-width: 5px 0 5px 5px;
content: " ";
} }
} }
} }
/********************
* Extensions buttons
********************/
#extension-buttons {
margin-right: 15px;
.btn-group {
margin: 0;
}
.navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right {
right: 0;
left: auto;
} }
.navbar .pull-right > li > .dropdown-menu .dropdown-menu, // Hack for nested btn-group
.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu { #extension-buttons>.btn-group>.btn,
right: 100%; #extension-preview-buttons>.btn-group>.btn {
left: auto; border-radius: 0;
margin-right: -1px; }
margin-left: 0; #extension-buttons>.btn-group:first-child>.btn,
#extension-preview-buttons>.btn-group:first-child>.btn {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#extension-buttons>.btn-group:last-child>.btn,
#extension-preview-buttons>.btn-group:last-child>.btn {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
} }
.dropdown-submenu { /********************
position: relative; * Preview extensions buttons
} ********************/
.dropdown-submenu > .dropdown-menu { #extension-preview-buttons {
top: 0; &,
left: 100%; .dropdown-menu {
margin-top: -6px; position: fixed;
margin-left: -1px; right: 25px;
} top: auto;
z-index: 1;
.dropdown-submenu:hover > .dropdown-menu { }
display: block; .dropdown-menu {
} border: 0 !important;
margin-top: 1px;
.dropup .dropdown-submenu > .dropdown-menu { }
top: auto; .btn {
bottom: 0; background-color: fade(@navbar-bg, 50%);
margin-top: 0; float: none;
margin-bottom: -2px; i {
} color: fade(@icon-color, 30%);
}
.dropdown-submenu > a:after { &:hover,
display: block; &:focus,
float: right; &:active,
width: 0; &.active {
height: 0; i {
margin-top: 5px; color: @icon-color
margin-right: -10px; }
border-color: transparent; }
border-left-color: #cccccc; }
border-style: solid; .btn-group {
border-width: 5px 0 5px 5px; margin: 0 0 0 1px;
content: " "; .btn {
} position: initial;
}
.dropdown-submenu:hover > a:after { &.open .btn{
border-left-color: #ffffff; background-color: @preview-bg-light;
} i {
color: @icon-color
.dropdown-submenu.pull-left { }
float: none; }
} }
.dropdown-menu {
.dropdown-submenu.pull-left > .dropdown-menu { background-color: @preview-bg-light;
left: -100%; padding-bottom: 20px;
margin-left: 10px; }
}
.markdown-syntax, .table-of-contents {
.dropdown-menu>li>a:hover, overflow-y: auto;
.dropdown-menu>li>a:focus, overflow-x: hidden;
.dropdown-submenu:hover>a, padding-right: 20px;
.dropdown-submenu:focus>a, margin-right: -20px;
.dropdown-menu>.active>a, width: 300px;
.dropdown-menu>.active>a:hover, }
.dropdown-menu>.active>a:focus {
background-color: #888; .markdown-syntax {
} white-space: normal;
max-height: 350px;
.dropdown-menu>.disabled>a, }
.dropdown-menu>.disabled>a:hover,
.dropdown-menu>.disabled>a:focus { .table-of-contents {
color: #bbb; margin-left: -10px;
} max-height: 400px;
ul {
.btn-primary { margin-left: 10px;
background-color: #777; padding-left: 10px;
}
}
} }
/*
input[disabled],select[disabled],textarea[disabled],.input-prepend .add-on input[disabled],select[disabled],textarea[disabled],.input-prepend .add-on
{ {
background-color: @body-bg; background-color: @body-bg;
@ -239,107 +333,11 @@ input[readonly],select[readonly],textarea[readonly] {
background-color: transparent; background-color: transparent;
cursor: text; cursor: text;
} }
*/
.btn-primary:hover, /*********************
.btn-primary:focus, * Markdown
.btn-primary:active, *********************/
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled],
.btn-group.open .btn.btn-primary.dropdown-toggle {
color: #fff;
background-color: #888;
}
.btn-group {
margin-right: 10px;
}
#extension-preview-buttons,
#extension-preview-buttons .dropdown-menu {
position: fixed;
right: 25px;
top: auto;
z-index: 1;
}
#extension-preview-buttons .dropdown-menu {
border: 0 !important;
margin-top: 1px;
}
#extension-preview-buttons .btn-group:hover .btn,
#extension-preview-buttons .btn-group.open .btn {
opacity: 1;
filter: none;
}
#extension-buttons {
margin-right: 15px;
}
#extension-buttons>.btn-group {
margin: 0;
}
#extension-preview-buttons>.btn-group {
margin: 0 0 0 1px;
}
#extension-buttons>.btn-group>.btn,
#extension-preview-buttons>.btn-group>.btn {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#extension-buttons>.btn-group:first-child>.btn,
#extension-preview-buttons>.btn-group:first-child>.btn {
-webkit-top-left-border-radius: 4px;
-webkit-bottom-left-border-radius: 4px;
-moz-top-left-border-radius: 4px;
-moz-bottom-left-border-radius: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#extension-buttons>.btn-group:last-child>.btn,
#extension-preview-buttons>.btn-group:last-child>.btn {
-webkit-top-right-border-radius: 4px;
-webkit-bottom-right-border-radius: 4px;
-moz-top-right-border-radius: 4px;
-moz-bottom-right-border-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.markdown-syntax, .table-of-contents {
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
margin: 0 -20px 10px 0;
}
.markdown-syntax {
width: 300px;
white-space: normal;
max-height: 350px;
}
.table-of-contents {
width: 250px;
margin-left: -10px;
max-height: 400px;
}
.table-of-contents ul {
margin-left: 10px;
}
.btn-group>.btn+.dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
code { code {
color: #333333; color: #333333;
@ -388,30 +386,13 @@ hr {
} }
#file-title i { #file-title i {
margin: 4px 5px 0; margin-right: 10px;
} }
.dropdown-menu i { .dropdown-menu i {
margin-right: 5px; margin-right: 5px;
} }
.navbar {
position: static;
}
.navbar .nav {
float: left;
margin: 6px 0 0;
}
.navbar .nav.pull-right {
float: right;
}
.navbar .pull-right > li > .dropdown-menu {
right: 0;
left: auto;
}
#menu-bar { #menu-bar {
margin-left: 15px; margin-left: 15px;
@ -507,7 +488,7 @@ div.dropdown-menu textarea {
} }
#link-container { #link-container {
min-width: 210px; min-width: 280px;
white-space: normal; white-space: normal;
} }
@ -527,21 +508,30 @@ div.dropdown-menu textarea {
***********************/ ***********************/
[class^="icon-"], [class*=" icon-"] { [class^="icon-"], [class*=" icon-"] {
color: #525252; color: @icon-color;
display: inline-block; display: inline-block;
line-height: 14px; line-height: 14px;
vertical-align: middle; vertical-align: middle;
background-repeat: no-repeat; background-repeat: no-repeat;
&.icon-white,
.dropdown-menu > li:hover > a > & {
color: #fff;
}
} }
.icon-white { .icon-down-dir {
color: #fff; margin-right: -5px;
} }
.icon-code { .icon-code {
font-size: 80%; font-size: 80%;
margin-left: -3px; margin-left: -1px;
margin-right: 3px; margin-right: 5px;
}
.icon-chart-bar {
font-size: 90%;
margin-right: 2px;
} }
.icon-trash { .icon-trash {
@ -755,8 +745,8 @@ div.dropdown-menu textarea {
& > li.active > a { & > li.active > a {
&, &:hover, &:focus { &, &:hover, &:focus {
color: @text-inv; color: @text-inv;
background-color: #777; background-color: @btn-primary-bg;
border-color: #777; border-color: @btn-primary-bg;
} }
} }
} }
@ -820,17 +810,25 @@ table tbody+tbody {
border-top: 2px solid #dddddd; border-top: 2px solid #dddddd;
} }
// Duplicate from .well blockquote
#preview-contents blockquote { #preview-contents blockquote {
border-color: @border; border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15); border-color: rgba(0, 0, 0, 0.15);
} }
blockquote p { blockquote {
margin-bottom: 20px; p {
font-size: 14px; margin-bottom: 20px;
font-weight: 300; font-size: 14px;
line-height: 20px; font-weight: 300;
} line-height: 20px;
}
ul:last-child,
ol:last-child {
margin-bottom: 0;
}
}
ul,ol { ul,ol {
margin-bottom: 20px; margin-bottom: 20px;