remove some custom css

mainly in navbars, where we were doing custom
things that bootstrap already did with classes.

This did require the removal of multiple class LESS inheritance for
navbar buttons, because it doesn't work properly. Seems like a LESS bug, but I'm not sure.
This commit is contained in:
Min RK 2014-12-04 17:26:02 -08:00
parent a84f35373f
commit 0b46e2aff2
12 changed files with 81 additions and 318 deletions

View File

@ -33,7 +33,10 @@ define([
* @method style
*/
NotificationWidget.prototype.style = function () {
this.element.addClass('notification_widget');
// use explicit bootstrap classes here,
// because multiple inheritance in LESS doesn't work
// for this particular combination
this.element.addClass('notification_widget btn btn-xs navbar-btn');
};
/**

View File

@ -20,20 +20,15 @@ body {
div#header {
/* Initially hidden to prevent FLOUC */
display: none;
margin-bottom: -6px;
position: fixed;
top: 0;
width: 100%;
background-color: @body-bg;
min-height: 31px;
/* Display over codemirror */
z-index: 100;
#header-container {
margin-bottom: 0px;
padding-left: 30px;
padding-bottom: 5px;
padding-top: 5px;
.border-box-sizing();
}
@ -51,6 +46,8 @@ div#header {
#ipython_notebook {
padding-left: 0px;
padding-top: (@navbar-height - @logo_height) / 2;
padding-bottom: (@navbar-height - @logo_height) / 2;
}
#noscript {
@ -65,8 +62,8 @@ div#header {
#ipython_notebook img {
font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
height: 24px;
text-decoration:none;
height: @logo_height;
text-decoration: none;
color: black;
}
@ -85,9 +82,6 @@ div#header {
input.ui-button {
padding: 0.3em 0.9em;
}
.navbar span {
margin-top: 3px;
}
span#login_widget {
float: right;
@ -96,9 +90,7 @@ span#login_widget {
span#login_widget > .button,
#logout
{
.btn();
.btn-default();
.btn-sm();
}
.nav-header {

View File

@ -4,11 +4,12 @@
@text-color: @black;
@font-size-base: 13px;
@font-family-monospace: monospace; // to allow user to customize their fonts
@navbar-height: 36px;
@navbar-height: 30px;
@breadcrumb-color: darken(@border_color, 30%);
@blockquote-font-size: inherit;
@modal-inner-padding: 15px;
@grid-float-breakpoint: 540px;
@logo_height: 24px;
// Disable modal slide-in from top animation.
.modal {

View File

@ -1,11 +1,9 @@
#kernel_selector_widget {
margin-right: 1em;
float:right;
float: right;
& > button {
.btn();
.btn-default();
.btn-sm();
& > span.caret {
margin-top:0px;

View File

@ -1,13 +1,10 @@
#menubar {
margin-top: 0px;
margin-bottom: -24px;
position: relative;
.border-box-sizing();
.navbar {
border-top: 1px;
border-radius: 0px 0px @border-radius-base @border-radius-base;
margin-bottom: 23px;
margin-bottom: 6px;
}
.navbar-toggle {
@ -17,19 +14,6 @@
clear: left;
}
li.dropdown {
line-height: 12px;
a {
padding-top: 6px;
padding-bottom: 5px;
}
}
ul.navbar-right {
padding-top: 2px;
margin-bottom: 0px;
}
}
.nav-wrapper {
@ -49,10 +33,6 @@ ul#help_menu li a{
}
}
#menus {
min-height: 30px;
}
// Make sub menus work in BS3.
// Credit: http://www.bootply.com/86684
.dropdown-submenu{position:relative;}

View File

@ -1,13 +1,12 @@
#notification_area {
.pull-right();
z-index: 10;
}
.indicator_area {
color: @navbar-default-link-color;
padding: 4px 3px;
margin: 0px;
margin-left: 5px;
margin-right: 5px;
width: 11px;
z-index: 10;
text-align: center;
@ -16,15 +15,11 @@
#kernel_indicator {
.pull-right();
.indicator_area();
margin-right: 12px;
}
#modal_indicator {
.pull-right();
.indicator_area();
margin-right: 5px;
}
.edit_mode_icon:before {

View File

@ -1,19 +1,8 @@
.notification_widget {
color: @navbar-default-link-color;
padding: 1px 12px;
margin: 2px 4px;
z-index: 10;
border-radius: @border-radius-base;
background: @notification_widget_bg;
.pull-right();
.border-box-sizing();
.btn();
.btn-default();
.btn-xs();
&.span {
padding-right:2px;
}
}
.notification_widget.warning {

View File

@ -1,6 +1,5 @@
span#save_widget {
padding: 0px 5px;
margin-top: 12px;
margin-top: 6px;
}
span#checkpoint_status, span#autosave_status {

View File

@ -495,7 +495,7 @@ div.input {
}
/* input_area and input_prompt must match in top border and margin for alignment */
div.input_prompt {
color: #000080;
color: navy;
border-top: 1px solid transparent;
}
div.input_area > div.highlight {
@ -767,7 +767,7 @@ div.out_prompt_overlay:hover {
background: rgba(240, 240, 240, 0.5);
}
div.output_prompt {
color: #8b0000;
color: darkred;
}
/* This class is the outer container of all output sections. */
div.output_area {
@ -840,7 +840,7 @@ div.output_area pre {
padding: 0;
border: 0;
vertical-align: baseline;
color: #000000;
color: black;
background-color: transparent;
border-radius: 0;
}
@ -1033,8 +1033,8 @@ div.output_unrecognized a:hover {
margin-top: 1em;
}
.rendered_html hr {
color: #000000;
background-color: #000000;
color: black;
background-color: black;
}
.rendered_html pre {
margin: 1em 2em;
@ -1053,13 +1053,13 @@ div.output_unrecognized a:hover {
.rendered_html table {
margin-left: auto;
margin-right: auto;
border: 1px solid #000000;
border: 1px solid black;
border-collapse: collapse;
}
.rendered_html tr,
.rendered_html th,
.rendered_html td {
border: 1px solid #000000;
border: 1px solid black;
border-collapse: collapse;
margin: 1em 2em;
}
@ -1559,4 +1559,4 @@ h6:hover .anchor-link {
left: 0px !important;
margin-left: 0px !important;
}
/*# sourceMappingURL=../style/ipython.min.css.map */
/*# sourceMappingURL=ipython.min.css.map */

View File

@ -3636,7 +3636,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar {
position: relative;
min-height: 36px;
min-height: 30px;
margin-bottom: 18px;
border: 1px solid transparent;
}
@ -3733,10 +3733,10 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar-brand {
float: left;
padding: 9px 15px;
padding: 6px 15px;
font-size: 17px;
line-height: 18px;
height: 36px;
height: 30px;
}
.navbar-brand:hover,
.navbar-brand:focus {
@ -3753,8 +3753,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
float: right;
margin-right: 15px;
padding: 9px 10px;
margin-top: 1px;
margin-bottom: 1px;
margin-top: -2px;
margin-bottom: -2px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
@ -3778,7 +3778,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
}
.navbar-nav {
margin: 4.5px -15px;
margin: 3px -15px;
}
.navbar-nav > li > a {
padding-top: 10px;
@ -3816,8 +3816,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
float: left;
}
.navbar-nav > li > a {
padding-top: 9px;
padding-bottom: 9px;
padding-top: 6px;
padding-bottom: 6px;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px;
@ -3841,8 +3841,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
border-bottom: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
margin-top: 2px;
margin-bottom: 2px;
margin-top: -1px;
margin-bottom: -1px;
}
@media (min-width: 768px) {
.navbar-form .form-group {
@ -3909,20 +3909,20 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
border-bottom-left-radius: 0;
}
.navbar-btn {
margin-top: 2px;
margin-bottom: 2px;
margin-top: -1px;
margin-bottom: -1px;
}
.navbar-btn.btn-sm {
margin-top: 3px;
margin-bottom: 3px;
margin-top: 0px;
margin-bottom: 0px;
}
.navbar-btn.btn-xs {
margin-top: 7px;
margin-bottom: 7px;
margin-top: 4px;
margin-bottom: 4px;
}
.navbar-text {
margin-top: 9px;
margin-bottom: 9px;
margin-top: 6px;
margin-bottom: 6px;
}
@media (min-width: 540px) {
.navbar-text {
@ -7751,19 +7751,17 @@ body {
div#header {
/* Initially hidden to prevent FLOUC */
display: none;
margin-bottom: -6px;
position: fixed;
top: 0;
width: 100%;
background-color: #ffffff;
min-height: 31px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
/* Display over codemirror */
z-index: 100;
}
div#header #header-container {
margin-bottom: 0px;
padding-left: 30px;
padding-bottom: 5px;
padding-top: 5px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@ -7779,6 +7777,8 @@ div#header .header-bar {
}
#ipython_notebook {
padding-left: 0px;
padding-top: 3px;
padding-bottom: 3px;
}
#noscript {
width: auto;
@ -7810,77 +7810,14 @@ div#header .header-bar {
input.ui-button {
padding: 0.3em 0.9em;
}
.navbar span {
margin-top: 3px;
}
span#login_widget {
float: right;
}
span#login_widget > .button,
#logout {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 13px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333333;
background-color: #ffffff;
border-color: #cccccc;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
span#login_widget > .button:focus,
#logout:focus,
span#login_widget > .button:active:focus,
#logout:active:focus,
span#login_widget > .button.active:focus,
#logout.active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
span#login_widget > .button:hover,
#logout:hover,
span#login_widget > .button:focus,
#logout:focus {
color: #333333;
text-decoration: none;
}
span#login_widget > .button:active,
#logout:active,
span#login_widget > .button.active,
#logout.active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
span#login_widget > .button.disabled,
#logout.disabled,
span#login_widget > .button[disabled],
#logout[disabled],
fieldset[disabled] span#login_widget > .button,
fieldset[disabled] #logout {
cursor: not-allowed;
pointer-events: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
span#login_widget > .button:hover,
#logout:hover,
@ -8401,7 +8338,7 @@ div.input {
}
/* input_area and input_prompt must match in top border and margin for alignment */
div.input_prompt {
color: #000080;
color: navy;
border-top: 1px solid transparent;
}
div.input_area > div.highlight {
@ -8673,7 +8610,7 @@ div.out_prompt_overlay:hover {
background: rgba(240, 240, 240, 0.5);
}
div.output_prompt {
color: #8b0000;
color: darkred;
}
/* This class is the outer container of all output sections. */
div.output_area {
@ -8746,7 +8683,7 @@ div.output_area pre {
padding: 0;
border: 0;
vertical-align: baseline;
color: #000000;
color: black;
background-color: transparent;
border-radius: 0;
}
@ -8939,8 +8876,8 @@ div.output_unrecognized a:hover {
margin-top: 1em;
}
.rendered_html hr {
color: #000000;
background-color: #000000;
color: black;
background-color: black;
}
.rendered_html pre {
margin: 1em 2em;
@ -8959,13 +8896,13 @@ div.output_unrecognized a:hover {
.rendered_html table {
margin-left: auto;
margin-right: auto;
border: 1px solid #000000;
border: 1px solid black;
border-collapse: collapse;
}
.rendered_html tr,
.rendered_html th,
.rendered_html td {
border: 1px solid #000000;
border: 1px solid black;
border-collapse: collapse;
margin: 1em 2em;
}
@ -9700,59 +9637,9 @@ select[multiple].celltoolbar select {
float: right;
}
#kernel_selector_widget > button {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 13px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333333;
background-color: #ffffff;
border-color: #cccccc;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
#kernel_selector_widget > button:focus,
#kernel_selector_widget > button:active:focus,
#kernel_selector_widget > button.active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
#kernel_selector_widget > button:hover,
#kernel_selector_widget > button:focus {
color: #333333;
text-decoration: none;
}
#kernel_selector_widget > button:active,
#kernel_selector_widget > button.active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
#kernel_selector_widget > button.disabled,
#kernel_selector_widget > button[disabled],
fieldset[disabled] #kernel_selector_widget > button {
cursor: not-allowed;
pointer-events: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
#kernel_selector_widget > button:hover,
#kernel_selector_widget > button:focus,
@ -9795,8 +9682,6 @@ fieldset[disabled] #kernel_selector_widget > button.active {
}
#menubar {
margin-top: 0px;
margin-bottom: -24px;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@ -9804,7 +9689,7 @@ fieldset[disabled] #kernel_selector_widget > button.active {
#menubar .navbar {
border-top: 1px;
border-radius: 0px 0px 4px 4px;
margin-bottom: 23px;
margin-bottom: 6px;
}
#menubar .navbar-toggle {
float: left;
@ -9812,17 +9697,6 @@ fieldset[disabled] #kernel_selector_widget > button.active {
#menubar .navbar-collapse {
clear: left;
}
#menubar li.dropdown {
line-height: 12px;
}
#menubar li.dropdown a {
padding-top: 6px;
padding-bottom: 5px;
}
#menubar ul.navbar-right {
padding-top: 2px;
margin-bottom: 0px;
}
.nav-wrapper {
border-bottom: 1px solid #e7e7e7;
}
@ -9836,9 +9710,6 @@ ul#help_menu li a {
ul#help_menu li a i {
margin-right: -1.2em;
}
#menus {
min-height: 30px;
}
.dropdown-submenu {
position: relative;
}
@ -9887,8 +9758,8 @@ ul#help_menu li a i {
}
.indicator_area {
color: #777777;
padding: 4px 3px;
margin: 0px;
margin-left: 5px;
margin-right: 5px;
width: 11px;
z-index: 10;
text-align: center;
@ -9897,23 +9768,21 @@ ul#help_menu li a i {
float: right !important;
float: right;
color: #777777;
padding: 4px 3px;
margin: 0px;
margin-left: 5px;
margin-right: 5px;
width: 11px;
z-index: 10;
text-align: center;
margin-right: 12px;
}
#modal_indicator {
float: right !important;
float: right;
color: #777777;
padding: 4px 3px;
margin: 0px;
margin-left: 5px;
margin-right: 5px;
width: 11px;
z-index: 10;
text-align: center;
margin-right: 5px;
}
.edit_mode_icon:before {
display: inline-block;
@ -10007,68 +9876,11 @@ ul#help_menu li a i {
}
.notification_widget {
color: #777777;
padding: 1px 12px;
margin: 2px 4px;
z-index: 10;
background: rgba(240, 240, 240, 0.5);
float: right !important;
float: right;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 13px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333333;
background-color: #ffffff;
border-color: #cccccc;
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.notification_widget:focus,
.notification_widget:active:focus,
.notification_widget.active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.notification_widget:hover,
.notification_widget:focus {
color: #333333;
text-decoration: none;
}
.notification_widget:active,
.notification_widget.active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.notification_widget.disabled,
.notification_widget[disabled],
fieldset[disabled] .notification_widget {
cursor: not-allowed;
pointer-events: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
.notification_widget:hover,
.notification_widget:focus,
@ -10106,9 +9918,6 @@ fieldset[disabled] .notification_widget.active {
color: #ffffff;
background-color: #333333;
}
.notification_widget.span {
padding-right: 2px;
}
.notification_widget.warning {
color: #ffffff;
background-color: #f0ad4e;
@ -10351,8 +10160,7 @@ div#pager .ui-resizable-handle {
flex: 1;
}
span#save_widget {
padding: 0px 5px;
margin-top: 12px;
margin-top: 6px;
}
span#checkpoint_status,
span#autosave_status {
@ -10583,4 +10391,4 @@ span#autosave_status {
#terminado-container {
margin: 8px;
}
/*# sourceMappingURL=../style/style.min.css.map */
/*# sourceMappingURL=style.min.css.map */

View File

@ -42,12 +42,12 @@ class="notebook_app"
</span>
<span id="kernel_selector_widget" class="pull-right dropdown">
<button class="dropdown-toggle" data-toggle="dropdown" type='button' id="current_kernel_spec">
<span class='kernel_name'>Kernel</span>
<span class="caret"></span>
</button>
<ul id="kernel_selector" class="dropdown-menu">
</ul>
<button class="dropdown-toggle btn btn-sm navbar-btn" data-toggle="dropdown" type='button' id="current_kernel_spec">
<span class='kernel_name'>Kernel</span>
<span class="caret"></span>
</button>
<ul id="kernel_selector" class="dropdown-menu">
</ul>
</span>
{% endblock headercontainer %}
@ -57,19 +57,17 @@ class="notebook_app"
<div id="menubar">
<div id="menus" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<button type="button" class="btn btn-default navbar-btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
<span class="navbar-text">Menu</span>
</button>
<ul class="nav navbar-nav navbar-right">
<li id="kernel_indicator">
<i id="kernel_indicator_icon"></i>
</li>
<li id="modal_indicator">
<i id="modal_indicator_icon"></i>
</li>
<li id="notification_area"></li>
</ul>
<p id="kernel_indicator" class="navbar-text">
<i id="kernel_indicator_icon"></i>
</p>
<p id="modal_indicator" class="navbar-text">
<i id="modal_indicator_icon"></i>
</p>
<span id="notification_area"></span>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>

View File

@ -80,7 +80,7 @@
</div>
</noscript>
<div id="header" class="navbar navbar-static-top">
<div id="header" class="navbar navbar-fixed-top">
<div id="header-container" class="container">
<div id="ipython_notebook" class="nav navbar-brand pull-left"><a href="{{base_url}}tree" alt='dashboard'>{% block logo %}<img src='{{static_url("base/images/logo.png") }}' alt='Jupyter Notebook'/>{% endblock %}</a></div>
@ -88,9 +88,9 @@
<span id="login_widget">
{% if logged_in %}
<button id="logout">Logout</button>
<button id="logout" class="btn btn-sm navbar-btn">Logout</button>
{% elif login_available and not logged_in %}
<button id="login">Login</button>
<button id="login" class="btn btn-sm navbar-btn">Login</button>
{% endif %}
</span>