docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

#2627 (#2804) 

- Fix right sidebar overflow on rescale
This commit is contained in:
Josh south 2017-04-16 19:38:30 -07:00 committed by John Mulhausen
parent 4a8bdb1b63
commit ffc32f301f
5 changed files with 59 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
_includes/header.html
View File

@ -27,14 +27,16 @@
</button>
</div>
<div>
<div id="tabs">
<ul class="tabs">
{% include treebuilder.html %}
</ul>
</div>
<div class="ctrl-right hidden-xs hidden-sm">
<a href="javascript:void(0)" id="menu-toggle"><i class="fa fa-indent" aria-hidden="true"></i></a>
{% include archive-list.html %}
<div class="nav-container">
<div id="tabs">
<ul class="tabs">
{% include treebuilder.html %}
</ul>
</div>
<div class="ctrl-right hidden-xs hidden-sm">
<a href="javascript:void(0)" id="menu-toggle"><i class="fa fa-indent" aria-hidden="true"></i></a>
{% include archive-list.html %}
</div>
</div>
</div>
</div>

30
_scss/_layout.scss
View File

@ -3,7 +3,9 @@
* layout
*
*/
#wrapper {
transition: all 0.5s ease;
}
/*
*
* branding *********************************************************************
@ -98,7 +100,7 @@
order: -1;
}
.col-content {}
// .col-content {}
.col-body {
flex-direction: row;
@ -126,7 +128,10 @@
}
.content {
padding: 60px 50px;
padding: 50px 50px 20px 50px;
max-width: 1024px;
min-width: 300px;
min-height: 500px;
}
.main-content {
@ -134,7 +139,8 @@
}
section.section {
max-width: 980px;
// min-width: 380px;
// max-width: 850px;
margin: 0 auto;
}
@ -150,22 +156,24 @@ section.section {
#sidebar-wrapper {
background-color: $bg-sidebar;
border-left: 1px solid rgba(204, 204, 204, 0.29);
// border-left: 1px solid rgba(204, 204, 204, 0.29);
height: 100%;
position: fixed;
padding: 70px 0 0;
overflow-y: auto;
overflow-x: hidden;
right: 250px;
margin-right: -250px;
width: 0;
transition: all 0.5s ease;
}
#sidebar-right {
background-color: $bg-sidebar;
border-left: 1px solid rgba(204, 204, 204, 0.29);
// border-left: 1px solid rgba(204, 204, 204, 0.29);
height: 100%;
padding-top: 20px;
width: 255px;
width: 270px;
min-height: 800px;
}
@ -176,7 +184,7 @@ section.section {
}
.wrapper.right-open #sidebar-wrapper {
width: 255px;
width: 270px;
}
@ -191,7 +199,7 @@ section.section {
.sidebar-home {
background-color: $bg-sidebar;
border-right: 1px solid rgba(204, 204, 204, 0.29);
// border-right: 1px solid rgba(204, 204, 204, 0.29);
overflow-x: hidden;
overflow-y: auto;
min-height: 800px;
@ -202,7 +210,7 @@ section.section {
.sidebar-home .affix {
background-color: $bg-sidebar;
border-right: 1px solid rgba(204, 204, 204, 0.29);
// border-right: 1px solid rgba(204, 204, 204, 0.29);
top: 55px;
overflow-x: hidden;
overflow-y: auto;
@ -216,7 +224,7 @@ section.section {
.sidebar,.sidebar.affix {
background-color: $bg-sidebar;
border-right: 1px solid rgba(204,204,204,0.29);
// border-right: 1px solid rgba(204,204,204,0.29);
top: 51px;
bottom: 0;
left: 0;

52
_scss/_mobile.scss
View File

@ -23,16 +23,16 @@
font-size: 13px;
padding: 19px 10px 11px;
}
.sidebar-home,
.sidebar-home.affix,
.sidebar,
.sidebar.affix {
position: absolute;
width: 100%;
height: 500px;
overflow: scroll;
// .sidebar-home,
// .sidebar-home.affix,
// .sidebar,
// .sidebar.affix {
// position: absolute;
// width: 100%;
// height: 500px;
// overflow: scroll;
}
// }
h1,
h2,
h3 {
@ -60,24 +60,9 @@
}
}
@media only screen
and (min-width : 376px)
and (max-width : 775px) {
.nav-primary,
.hero-text,
.banner,
.ctrl-right,
ul.primary.nav.navbar-nav,
// .nav-secondary .search-form,
.nav-secondary .logo {
display: none;
}
.header,
.nav-secondary-tabs,
.nav-secondary {
height: 100px;
}
and (max-width : 900px) {
.tabs {
padding: 0 0 0 10px;
}
@ -96,20 +81,14 @@
}
.content {
padding: 108px 50px;
padding: 50px;
}
.main-content {
padding: 22px 35px 25px 30px;
}
.search-form {
width: 81%;
}
.nav-secondary input[type=search] {
background: rgb(78, 77, 77) url(/images/search.png) no-repeat;
background-position: 10px 9px;
}
}
/*
*
* small displays mobile **********************************************************
@ -126,7 +105,10 @@
.ctrl-right {
display: none;
}
.nav-container {
overflow: visible;
height: auto;
}
}
/* Portrait */
@ -182,7 +164,7 @@
margin-left: -10px;
}
.content {
padding: 110px 25px;
padding: 120px 25px;
}
.main-content {
padding: 10px 25px;

16
_scss/_navigation.scss
View File

@ -3,6 +3,10 @@
* Primary navigation - top header **********************************************************
*
*/
.nav-container {
overflow: hidden;
height: 50px;
}
.primary {
@ -58,7 +62,9 @@
.nav-secondary {
background: $bg-secondary;
box-shadow: 0 1px 13px rgba(0, 0, 0, 0.24);
height: 55px;
overflow: hidden;
}
@ -74,9 +80,10 @@
height: 55px;
position: absolute;
width: 100%;
overflow: hidden;
&.affix {
background: #0C5176;
// box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
box-shadow: 0 1px 13px rgba(0, 0, 0, 0.24);
top: 0;
position: fixed;
z-index: 100;
@ -172,6 +179,7 @@
margin: 0;
padding: 0 60px 0 0;
width: 300px;
line-height: 24px;
li {
padding: 2px 8px 2px 15px;
float: left;
@ -179,7 +187,7 @@
a {
display: block;
font-size: 12px;
padding: 5px;
padding: 0 10px 0 10px;
text-decoration: none;
}
}
@ -311,7 +319,7 @@ input:checked+.slider:before {
.tabs li a {
color: $white;
padding: 17px 15px 11px;
padding: 17px 13px 11px;
float: left;
opacity: 0.8;
font-weight: 600;
@ -372,5 +380,5 @@ input:checked+.slider:before {
.ctrl-right .btn-group {
float: left;
margin: 2px 24px 0 0;
margin: 2px 0 0;
}

2
_scss/_utilities.scss
View File

@ -68,7 +68,7 @@ i.fa.fa-outdent {
.search-form {
float: left;
margin: 10px 15px 0 0px!important;
width: 210px;
width: 200px;
& input[type=text] {
background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat;
background-position: 10px 9px;