Upgrade to Bootstrap 3

This commit is contained in:
benweet 2013-08-16 00:17:16 +01:00
parent 63e7f9f029
commit 5561b2a1fd
19 changed files with 224 additions and 202 deletions

View File

@ -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) {

View File

@ -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');

View File

@ -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>

View File

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

View File

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

View File

@ -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);

View File

@ -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: darken(@dropdown-link-hover-bg, 5%);
background-color: @dropdown-link-hover-bg;
}
}
@ -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: darken(@dropdown-link-active-bg, 5%);
background-color: @dropdown-link-active-bg;
}
}

View File

@ -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
// disabled if the fieldset is disabled. Due to implementation difficulty,
// we don't honor that edge case; we style them as disabled anyway.
// Note: HTML5 says that controls under a fieldset > legend:first-child won't
// be disabled if the fieldset is disabled. Due to implementation difficulty,
// 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 {

View File

@ -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

View File

@ -37,18 +37,22 @@
.label-variant(@label-default-bg);
}
.label-danger {
.label-variant(@label-danger-bg);
.label-primary {
.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-variant(@label-info-bg);
.label-danger {
.label-variant(@label-danger-bg);
}

View File

@ -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;
}

View File

@ -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 {
border-top-color: darken(@navbar-inverse-bg, 7%);
.navbar-collapse,
.navbar-form {
border-color: darken(@navbar-inverse-bg, 7%);
}
// Dropdowns
@ -479,85 +552,11 @@
}
}
}
// 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);
}
.navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}
// 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;
}
}

View File

@ -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;
}
}

View File

@ -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:focus,
> .active > a,
> .active > span {
background-color: @pagination-active-bg;
> li > a,
> li > span {
&:hover,
&:focus {
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;
}
}

View File

@ -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-info {
.progress-bar-variant(@progress-bar-info-bg);
.progress-bar-danger {
.progress-bar-variant(@progress-bar-danger-bg);
}

View File

@ -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;
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
.img-responsive();
}
// Rounded corners

View File

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

View File

@ -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;

View File

@ -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;
padding: 8px;
font-weight: normal;
margin-top: 2px;
padding: 0 8px 4px;
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;
clear: both;
background: @modal-content-bg;
}
.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;
}