Skip to content

Commit

Permalink
Merge pull request #78 from choldgraf/button_background
Browse files Browse the repository at this point in the history
  • Loading branch information
@choldgraf
choldgraf authored Apr 28, 2020
2 parents 4efb85f + 73336c2 commit a5df5a9
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 33 deletions.
41 changes: 28 additions & 13 deletions sphinx_book_theme/static/sphinx-book-theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ code {
max-width: 100%; } }

main.bd-content {
padding-top: 3.5em !important;
padding-top: 3em !important;
padding-bottom: 0px !important; }
main.bd-content.single-page {
max-width: 1100px;
Expand Down Expand Up @@ -181,21 +181,25 @@ dl.footnote dd p {
*********************************************/
.topbar {
margin: 0em auto 1em auto !important;
padding-top: .75em;
padding-bottom: .75em;
padding-top: .25em;
padding-bottom: .25em;
background-color: white;
height: 3.5em;
height: 3em;
transition: left .2s; }
.topbar > div {
height: 2.5em;
top: 0px; }
.topbar .topbar-main button.navbar-toggler, .topbar .topbar-main .dropdown-buttons-trigger {
.topbar .topbar-main > button, .topbar .topbar-main > div, .topbar .topbar-main > a {
float: left;
height: 100%; }
.topbar .topbar-main button.topbarbtn {
margin: 0 .2em;
background-color: #5a5a5a;
font-size: .9em; }
margin: 0 .1em;
background-color: white;
color: #5a5a5a;
font-size: 1.4em;
border: none;
padding-top: .1rem;
padding-bottom: .1rem; }

.bd-topbar-whitespace {
padding-right: none; }
Expand All @@ -211,9 +215,14 @@ div.dropdown-buttons-trigger div.dropdown-buttons {
display: none;
position: absolute;
max-width: 120px; }
div.dropdown-buttons-trigger div.dropdown-buttons button {
div.dropdown-buttons-trigger div.dropdown-buttons button.topbarbtn {
padding-top: .35rem;
padding-bottom: .35rem;
min-width: 120px !important;
border: 1px white solid !important; }
border: 1px white solid !important;
background-color: #5a5a5a;
color: white;
font-size: 1em; }

div.dropdown-buttons-trigger:hover div.dropdown-buttons {
display: block; }
Expand All @@ -229,7 +238,8 @@ button.topbarbtn img {
#navbar-toggler {
position: relative;
margin-right: 1em;
margin-left: .5em; }
margin-left: .5em;
color: #5a5a5a; }
#navbar-toggler i {
transition: opacity .3s, transform .3s;
position: absolute;
Expand Down Expand Up @@ -271,6 +281,8 @@ button.topbarbtn img {
right: 0;
z-index: 999;
transition: height .35s ease; }
.bd-toc div.onthispage, .bd-toc .toc-entry a {
color: #5a5a5a; }
.bd-toc nav {
opacity: 0;
transition: opacity 0.2s ease; }
Expand Down Expand Up @@ -302,6 +314,8 @@ button.topbarbtn img {
overflow-y: auto;
height: 100vh !important;
scrollbar-width: thin; }
.bd-sidebar nav ul.nav li a, .bd-sidebar nav ul.nav ul li a {
color: #5a5a5a; }
.bd-sidebar nav ul.nav a:hover, .bd-sidebar nav ul.nav li.active > a, .bd-sidebar nav ul.nav li.active > a:hover {
color: #0071bc; }
.bd-sidebar::-webkit-scrollbar {
Expand Down Expand Up @@ -330,7 +344,8 @@ button.topbarbtn img {
.bd-sidebar p.navbar_footer {
text-align: center;
font-size: .9em;
padding-top: .5em; }
padding-top: .5em;
color: #5a5a5a; }
.bd-sidebar.collapsing {
border: none;
overflow: hidden;
Expand All @@ -351,7 +366,7 @@ button.topbarbtn img {
@media (max-width: 768px) {
#site-navigation {
position: fixed;
margin-top: 3.5em;
margin-top: 3em;
z-index: 2000;
background: white; } }

Expand Down
38 changes: 30 additions & 8 deletions sphinx_book_theme/static/sphinx-book-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,14 @@ $breakpoint-lg: 992px;
$breakpoint-md: 768px;
$breakpoint-sm: 576px;

// Colors
$non-content-grey: #5a5a5a;

/*********************************************
* Whole page *
*********************************************/

$topbar-height: 3.5em;
$topbar-height: 3em;

body {
padding-top: 0px !important;
Expand Down Expand Up @@ -324,8 +327,8 @@ dl.footnote {
*********************************************/
.topbar {
margin: 0em auto 1em auto !important;
padding-top: .75em;
padding-bottom: .75em;
padding-top: .25em;
padding-bottom: .25em;
background-color: white;
height: $topbar-height;
transition: left .2s;
Expand All @@ -336,15 +339,19 @@ dl.footnote {
}

.topbar-main {
button.navbar-toggler, .dropdown-buttons-trigger {
> button, > div, > a {
float: left;
height: 100%;
}

button.topbarbtn {
margin: 0 .2em;
background-color: #5a5a5a;
font-size: .9em;
margin: 0 .1em;
background-color: white;
color: $non-content-grey;
font-size: 1.4em;
border: none;
padding-top: .1rem;
padding-bottom: .1rem;
}
}
}
Expand Down Expand Up @@ -372,9 +379,14 @@ div.dropdown-buttons-trigger {
position: absolute;
max-width: 120px;

button {
button.topbarbtn {
padding-top: .35rem;
padding-bottom: .35rem;
min-width: 120px !important;
border: 1px white solid !important;
background-color: $non-content-grey;
color: white;
font-size: 1em;
}
}

Expand All @@ -397,6 +409,7 @@ button.topbarbtn img {
position: relative;
margin-right: 1em;
margin-left: .5em;
color: $non-content-grey;

i {
transition: opacity .3s, transform .3s;
Expand Down Expand Up @@ -466,6 +479,11 @@ button.topbarbtn img {
z-index: 999;
transition: height .35s ease;

// Colors
div.onthispage, .toc-entry a {
color: $non-content-grey;
}

// By default the nav is hidden unless a few conditions are met
nav {
opacity: 0;
Expand Down Expand Up @@ -521,6 +539,9 @@ button.topbarbtn img {

// Sidebar link color
nav ul.nav {
li a, ul li a {
color: $non-content-grey;
}
a:hover, li.active > a, li.active > a:hover {
color: #0071bc;
}
Expand Down Expand Up @@ -573,6 +594,7 @@ button.topbarbtn img {
text-align: center;
font-size: .9em;
padding-top: .5em;
color: $non-content-grey;
}

&.collapsing {
Expand Down
1 change: 1 addition & 0 deletions sphinx_book_theme/theme.conf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ launch_buttons = {}
home_page_in_toc = False
number_toc_sections = False
expand_sections = []
search_bar_text = Search this book...
24 changes: 12 additions & 12 deletions sphinx_book_theme/topbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,47 +3,47 @@
</div>
<div class="col pl-2 topbar-main">
{% if theme_single_page != True %}
<button id="navbar-toggler" class="navbar-toggler ml-0" type="button" data-toggle="collapse" data-target=".site-navigation" aria-controls="navbar-menu" aria-expanded="true" aria-label="Toggle navigation" aria-controls="site-navigation">
<button id="navbar-toggler" class="navbar-toggler ml-0" type="button" data-toggle="collapse" data-target=".site-navigation" aria-controls="navbar-menu" aria-expanded="true" aria-label="Toggle navigation" aria-controls="site-navigation" title="Toggle navigation">
<i class="fas fa-bars"></i>
<i class="fas fa-arrow-left"></i>
<i class="fas fa-arrow-up"></i>
</button>
<div class="dropdown-buttons-trigger">
<button id="dropdown-buttons-trigger" class="btn btn-secondary topbarbtn"><i class="fas fa-download"></i><span class="topbar-button-text">Download</span></button>
<button id="dropdown-buttons-trigger" class="btn btn-secondary topbarbtn" title="Download this page"><i class="fas fa-download"></i></button>

{% if page_source_suffix %}
<div class="dropdown-buttons">
<!-- ipynb file if we had a myst markdown file -->
{% if ipynb_source %}<a class="dropdown-buttons" href="{{ pathto('_sources', 1) }}/{{ ipynb_source }}"><button type="button" class="btn btn-secondary topbarbtn">.ipynb</button></a>{% endif %}
{% if ipynb_source %}<a class="dropdown-buttons" href="{{ pathto('_sources', 1) }}/{{ ipynb_source }}"><button type="button" class="btn btn-secondary topbarbtn" title="Download notebook file">.ipynb</button></a>{% endif %}
<!-- Download raw file -->
<a class="dropdown-buttons" href="{{ pathto('_sources', 1) }}/{{ sourcename }}"><button type="button" class="btn btn-secondary topbarbtn">{{ page_source_suffix }}</button></a>
<a class="dropdown-buttons" href="{{ pathto('_sources', 1) }}/{{ sourcename }}"><button type="button" class="btn btn-secondary topbarbtn" title="Download source file">{{ page_source_suffix }}</button></a>
<!-- Download PDF via print -->
<button type="button" id="download-print" class="btn btn-secondary topbarbtn" onClick="window.print()">.pdf</button>
<button type="button" id="download-print" class="btn btn-secondary topbarbtn" title="Print to PDF" onClick="window.print()">.pdf</button>
</div>
{% endif %}
</div>

<!-- Edit this page -->
{% if theme_use_edit_page_button and github_repo %}<a class="edit-button" href="{{ get_edit_url() }}"><button type="button" class="btn btn-secondary topbarbtn" title="Edit this page"><i class="fas fa-pencil-alt"></i></button></a>{% endif %}

<!-- Launch buttons -->
{% if binder_url or jupyterhub_url or use_thebelab %}
<div class="dropdown-buttons-trigger">
<button id="dropdown-buttons-trigger" class="btn btn-secondary topbarbtn"><i class="fas fa-rocket"></i><span class="topbar-button-text">Launch</span></button>
<button id="dropdown-buttons-trigger" class="btn btn-secondary topbarbtn" title="Launch interactive content"><i class="fas fa-rocket"></i></button>
<div class="dropdown-buttons">
{% if binder_url %}
<a class="binder-button" href="{{ binder_url }}"><button type="button" class="btn btn-secondary topbarbtn"><img class="binder-button-logo" src="{{ pathto('_static/images/logo_binder.svg', 1) }}" alt="Interact on binder">Binder</button></a>
<a class="binder-button" href="{{ binder_url }}"><button type="button" class="btn btn-secondary topbarbtn" title="Launch Binder"><img class="binder-button-logo" src="{{ pathto('_static/images/logo_binder.svg', 1) }}" alt="Interact on binder">Binder</button></a>
{% endif %}
{% if jupyterhub_url %}
<a class="jupyterhub-button" href="{{ jupyterhub_url }}"><button type="button" class="btn btn-secondary topbarbtn"><img class="jupyterhub-button-logo" src="{{ pathto('_static/images/logo_jupyterhub.svg', 1) }}" alt="Interact on JupyterHub">JupyterHub</button></a>
<a class="jupyterhub-button" href="{{ jupyterhub_url }}"><button type="button" class="btn btn-secondary topbarbtn" title="Launch JupyterHub"><img class="jupyterhub-button-logo" src="{{ pathto('_static/images/logo_jupyterhub.svg', 1) }}" alt="Interact on JupyterHub">JupyterHub</button></a>
{% endif %}
{% if use_thebelab -%}
<button type="button" class="btn btn-secondary topbarbtn thebelab-launch-button" onclick="initThebelab()"><i class="fas fa-rocket"></i><span style="margin-left: .4em;">ThebeLab</span></button>
<button type="button" class="btn btn-secondary topbarbtn thebelab-launch-button" onclick="initThebelab()" title="Launch Thebelab"><i class="fas fa-rocket"></i><span style="margin-left: .4em;">ThebeLab</span></button>
{% endif %}
</div>
</div>
{% endif %}

<!-- Extra buttons -->
{% if theme_use_edit_page_button and github_repo %}<a class="edit-button" href="{{ get_edit_url() }}"><button type="button" class="btn btn-secondary topbarbtn"><i class="fas fa-pencil-alt"></i><span class="topbar-button-text">Edit</span></button></a>{% endif %}

{% endif %}
</div>
<div class="d-none d-md-block col-md-2 bd-toc {{ show_if_no_margin() }}">
Expand Down

0 comments on commit a5df5a9

Please sign in to comment.