mirror of https://github.com/docker/docs.git
Various post-launch fixes (#2549)
* WIP #2052 - Adding sass - Test components - Night mode - docker con banner - archive legacy css * add compressed css * Update branding for cloud api docs * split out global header * rescale mods * adjust viewport rescaling * sync * test * testing deploy * john rules, please update man * test: removing all styles * trying to make netlify work * add min-height to sidebars * testing * Update style.css manually add css * testing * test * Update style.css * adding dockercon svg * add svgs add svgs * remove css * re-add * s/container-fluid/container
This commit is contained in:
Josh south
John Mulhausen
parent
c72a0d7e27
commit
492074c717
|
|
@ -163,3 +163,10 @@ defaults:
|
|||
path: "apidocs/v2.0.1"
|
||||
values:
|
||||
hide_from_sitemap: true
|
||||
|
||||
# Assets
|
||||
#
|
||||
# We specify the directory for Jekyll so we can use @imports.
|
||||
sass:
|
||||
sass_dir: _scss
|
||||
style: :compressed
|
||||
|
|
@ -1,51 +1,55 @@
|
|||
<div class="header">
|
||||
<div class="fan"></div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<nav class="nav-primary">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<img class="logo" src="../images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs">
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="primary nav navbar-nav">
|
||||
<li><a href="https://docker.com/what-docker">What is Docker?</a></li>
|
||||
<li><a href="https://docker.com/get-docker">Product</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Get Docker <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu nav-main">
|
||||
<h6 class="dropdown-header">For Desktops</h6>
|
||||
<li><a href="https://docker.com/docker-mac">Mac</a></li>
|
||||
<li><a href="https://docker.com/docker-windows">Windows</a></li>
|
||||
<h6 class="dropdown-header">For Cloud Providers</h6>
|
||||
<li><a href="https://docker.com/docker-aws">AWS</a></li>
|
||||
<li><a href="https://docker.com/docker-microsoft-azure">Azure</a></li>
|
||||
<h6 class="dropdown-header">For Servers</h6>
|
||||
<li><a href="https://docker.com/docker-windows-server">Windows Server</a></li>
|
||||
<li><a href="https://docker.com/docker-centos">CentOS</a></li>
|
||||
<li><a href="https://docker.com/docker-debian">Debian</a></li>
|
||||
<li><a href="https://docker.com/docker-fedora">Fedora</a></li>
|
||||
<li><a href="https://docker.com/docker-oracle-linux">Oracle Enterprise Linux</a></li>
|
||||
<li><a href="https://docker.com/docker-rhel">RHEL</a></li>
|
||||
<li><a href="https://docker.com/docker-sles">SLES</a></li>
|
||||
<li><a href="https://docker.com/docker-ubuntu">Ubuntu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://docs.docker.com">Docs</a></li>
|
||||
<li><a href="https://docker.com/docker-community">Community</a></li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right user-nav">
|
||||
<li><a href="https://cloud.docker.com/">Create Docker ID</a></li>
|
||||
<li><a href="https://cloud.docker.com/login">Sign In</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.nav-collapse -->
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<nav class="nav-primary">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<img class="logo" src="../images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs">
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="primary nav navbar-nav">
|
||||
<li><a href="https://docker.com/what-docker">What is Docker?</a></li>
|
||||
<li><a href="https://docker.com/get-docker">Product</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Get Docker <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu nav-main">
|
||||
<h6 class="dropdown-header">For Desktops</h6>
|
||||
<li><a href="https://docker.com/docker-mac">Mac</a></li>
|
||||
<li><a href="https://docker.com/docker-windows">Windows</a></li>
|
||||
<h6 class="dropdown-header">For Cloud Providers</h6>
|
||||
<li><a href="https://docker.com/docker-aws">AWS</a></li>
|
||||
<li><a href="https://docker.com/docker-microsoft-azure">Azure</a></li>
|
||||
<h6 class="dropdown-header">For Servers</h6>
|
||||
<li><a href="https://docker.com/docker-windows-server">Windows Server</a></li>
|
||||
<li><a href="https://docker.com/docker-centos">CentOS</a></li>
|
||||
<li><a href="https://docker.com/docker-debian">Debian</a></li>
|
||||
<li><a href="https://docker.com/docker-fedora">Fedora</a></li>
|
||||
<li><a href="https://docker.com/docker-oracle-linux">Oracle Enterprise Linux</a></li>
|
||||
<li><a href="https://docker.com/docker-rhel">RHEL</a></li>
|
||||
<li><a href="https://docker.com/docker-sles">SLES</a></li>
|
||||
<li><a href="https://docker.com/docker-ubuntu">Ubuntu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://docs.docker.com">Docs</a></li>
|
||||
<li><a href="https://docker.com/docker-community">Community</a></li>
|
||||
<li><a href="https://cloud.docker.com/">Create Docker ID</a></li>
|
||||
<li><a href="https://cloud.docker.com/login">Sign In</a></li>
|
||||
</ul>
|
||||
<!-- <div class="user-nav hidden-sm">
|
||||
<ul>
|
||||
<li><a href="https://cloud.docker.com/">Create Docker ID</a></li>
|
||||
<li><a href="https://cloud.docker.com/login">Sign In</a></li>
|
||||
</ul>
|
||||
</div> -->
|
||||
</div>
|
||||
<!--/.nav-collapse -->
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- hero banner text -->
|
||||
<div class="container">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="hero-text">
|
||||
<div class="hero-text-centered">
|
||||
|
|
@ -58,30 +62,36 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="http://2017.dockercon.com/" target="_blank">
|
||||
<div class="banner">
|
||||
<img src="images/dockercon.svg">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- nav-secondary -->
|
||||
<nav class="nav-secondary-tabs" data-spy="affix" data-offset-top="490">
|
||||
<div class="container-fluid">
|
||||
<!-- <div class="affix-logo">
|
||||
<img class="logo" src="../images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs">
|
||||
</div> -->
|
||||
<div class="search-form">
|
||||
<form class="search-form form-inline ng-pristine ng-valid" id="searchForm" action="/search/">
|
||||
<input class="search-field form-control ds-input" id="st-search-input" value="" name="q" placeholder="Search the docs" type="search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
|
||||
<div id="autocompleteContainer">
|
||||
<div id="autocompleteResults"></div>
|
||||
<div class="container-fluid-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
|
||||
<div class="search-form">
|
||||
<form class="search form-inline ng-pristine ng-valid" id="searchForm" action="/search/">
|
||||
<input class="search-field form-control ds-input" id="st-search-input" value="" name="q" placeholder="Search the docs" type="search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
|
||||
<div id="autocompletecontainer-fluid">
|
||||
<div id="autocompleteResults"></div>
|
||||
</div>
|
||||
<!-- <button type="submit" class="search-submit btn btn-default">Search</button> -->
|
||||
</form>
|
||||
</div>
|
||||
<!-- <button type="submit" class="search-submit btn btn-default">Search</button> -->
|
||||
</form>
|
||||
</div>
|
||||
<div class="sidebar-toggle">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="sidebar-toggle">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tabs">
|
||||
<!-- <ul class="tabs nav navbar-nav navbar-collapse collapse navbar-left"> -->
|
||||
<ul class="tabs nav navbar-nav navbar-collapse navbar-left">
|
||||
|
|
@ -92,5 +102,5 @@
|
|||
{% include archive-list.html %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<nav class="nav-secondary navbar navbar-fixed-top">
|
||||
<div class="fan"></div>
|
||||
<div class="container-fluid">
|
||||
<!-- <div class="ctrl-left">
|
||||
<!-- <div class="ctrl-left">
|
||||
<a href="javascript:void(0)" id="menu-toggle-left"><i class="fa fa-outdent" aria-hidden="true"></i></a>
|
||||
</div> -->
|
||||
<div class="navbar-header">
|
||||
|
|
@ -18,23 +18,24 @@
|
|||
<!-- <button type="submit" class="search-submit btn btn-default">Search</button> -->
|
||||
</form>
|
||||
</div>
|
||||
<div class="sidebar-toggle">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="sidebar-toggle">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div id="tabs">
|
||||
<ul class="tabs nav navbar-nav">
|
||||
<ul class="tabs">
|
||||
{% include treebuilder.html %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ctrl-right">
|
||||
<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>
|
||||
</nav>
|
||||
</nav>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{% if page.landing == true %}<div id="navbar" class="nav-sidebar navbar-collapse collapse affix" data-spy="affix" data-offset-top="490">{%else%}<div id="navbar" class="nav-sidebar navbar-collapse collapse">{% endif %}
|
||||
<ul class="nav navbar-collapse" id="stacked-menu">
|
||||
{% if page.landing == true %}<div id="navbar" class="nav-sidebar">{%else%}<div id="navbar" class="nav-sidebar">{% endif %}
|
||||
<ul class="nav" affix" {% if page.landing == true %}data-spy="affix" data-offset-top="490"{% endif %}>
|
||||
{{ leftnav }}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ else %}{% assign edit_url = "" %}{% endif %} {% break %} {% endif %} {% endfor %
|
|||
}
|
||||
</script>
|
||||
{% if page.noratings != true %}
|
||||
<div style="text-align: center; margin-top: 50px">
|
||||
<div style="color:#b9c2cc; text-align: center; margin-top: 150px">
|
||||
<img src="/images/chat.png" alt="chat icon" style="display:inline">
|
||||
<b>Feedback?</b> Suggestions? Can't find something in the docs?<br/> {% if edit_url != "" %}
|
||||
<a href="{{ edit_url }}">Edit this page</a> <span>●</span> {% endif %}
|
||||
|
|
@ -141,7 +141,7 @@ else %}{% assign edit_url = "" %}{% endif %} {% break %} {% endif %} {% endfor %
|
|||
</div>
|
||||
</nav>
|
||||
<div class="col-toc">
|
||||
<div id="{% if page.landing == true %}sidebar-wrapper-home{%else%}sidebar-wrapper{% endif %}" class="{% if page.landing == true %} affix-top{%else%}sidebar-wrapper toc-nav{% endif %}" {% if page.landing == true %} data-spy="affix" data-offset-top="490"{% endif %}>
|
||||
<div id="{% if page.landing == true %}sidebar-right{%else%}sidebar-wrapper{% endif %}" class="{% if page.landing == true %} affix-top hidden-xs hidden-sm{%else%}sidebar-wrapper hidden-xs hidden-sm{% endif %}" {% if page.landing == true %} data-spy="affix" data-offset-top="490"{% endif %}>
|
||||
<div class="toc-nav">
|
||||
<div class="feedback-links">
|
||||
<ul>
|
||||
|
|
@ -150,8 +150,8 @@ else %}{% assign edit_url = "" %}{% endif %} {% break %} {% endif %} {% endfor %
|
|||
<li><a href="https://github.com/docker/docker.github.io/issues/new?assignee={% if page.assignee %}{{ page.assignee }}{% else %}{{ page.defaultassignee }}{% endif %}&body=File: [{{ page.path }}](https://docs.docker.com{{ page.url }}), CC @{{ assignee }}"
|
||||
class="nomunge"><i class="fa fa-check" aria-hidden="true"></i> Request docs changes</a></li>
|
||||
<li><a href="https://www.docker.com/docker-support-services"><i class="fa fa-question" aria-hidden="true"></i> Get support</a></li>
|
||||
<!-- day/night switch
|
||||
<li>
|
||||
<!-- toggle mode -->
|
||||
<!-- <li>
|
||||
<div class="toggle-mode">
|
||||
<div class="icon">
|
||||
<i class="fa fa-sun-o" aria-hidden="true"></i>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,158 @@
|
|||
/*
|
||||
*
|
||||
* globals
|
||||
*
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $bg-body;
|
||||
color: $body-text-color;
|
||||
font-family: $font;
|
||||
font-size: $body-text-size;
|
||||
margin: $clear;
|
||||
padding: $clear;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-links;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* images
|
||||
*
|
||||
*/
|
||||
|
||||
.content img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* global footer ***********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
footer {
|
||||
background: $white;
|
||||
border-top: 1px solid #E0E4E7;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top_footer {
|
||||
padding: 50px 0 35px;
|
||||
}
|
||||
|
||||
.footer_links {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
color: #637986;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer_sub_nav {
|
||||
float: right;
|
||||
padding: 10px 30px 20px 0;
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
padding-bottom: 6px;
|
||||
a {
|
||||
color: #637986;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_footer {
|
||||
clear: both;
|
||||
padding: 30px 0 20px;
|
||||
border-top: 1px solid #E0E4E7;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.footer-copyright p {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
color: #637986;
|
||||
margin-bottom: 0;
|
||||
padding: 0 0 15px;
|
||||
}
|
||||
|
||||
.footer_social_nav {
|
||||
float: right;
|
||||
padding: 0 15px 0 0;
|
||||
}
|
||||
|
||||
.footer_social_nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer_social_nav ul li {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer_social_nav ul li:before {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.footer_social_nav ul li+li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.footer_social_nav ul li a {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #82949E;
|
||||
border-radius: 50px;
|
||||
color: #fff;
|
||||
display: block;
|
||||
text-indent: 9999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.break {
|
||||
margin-bottom: 20px!important;
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
*
|
||||
* Buttons ***********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
ul.buttons {
|
||||
list-style: none;
|
||||
width: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
a.button {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a.button.outline-btn {
|
||||
color: #0087C8;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 10px 10px 10px 0;
|
||||
font-family: Geomanist Book;
|
||||
padding: 12px 35px 10px;
|
||||
min-width: 200px;
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
float: left;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background: #1488C6;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.transparent-btn {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.outline-btn {
|
||||
background: #fff;
|
||||
border: 1px solid;
|
||||
border-color: #0087C8;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.outline-btn:hover,
|
||||
.primary-btn:hover,
|
||||
.secondary-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.outline-btn:hover {
|
||||
color: #1488C6;
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
/*
|
||||
*
|
||||
* Custom Content Docs ******************************************
|
||||
*
|
||||
*/
|
||||
|
||||
/** code formatting **/
|
||||
|
||||
pre {
|
||||
background-color: #F5F8FA!important;
|
||||
display: block;
|
||||
padding: 20.5px!important;
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
word-break: normal !important;
|
||||
word-wrap: break-word;
|
||||
border: 0!important;
|
||||
border-radius: 4px;
|
||||
overflow-x: scroll !important;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #F5F8FA!important;
|
||||
border-radius: 2px;
|
||||
color: #0c5176 !important;
|
||||
font-size: 90%;
|
||||
padding: 3px 7px;
|
||||
overflow-x: scroll;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
pre code {
|
||||
overflow-x: auto;
|
||||
overflow-wrap: normal;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* Guides : components
|
||||
*
|
||||
*/
|
||||
|
||||
.component-container {
|
||||
padding: 0;
|
||||
margin: 0 0 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.component {
|
||||
padding: 15px 25px 5px 15px;
|
||||
text-align: center;
|
||||
margin: 0 8px 15px;
|
||||
float: left;
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.component-full {
|
||||
padding: 5px 0 10px 20px;
|
||||
float: left;
|
||||
min-height: 100px;
|
||||
margin: 0px 0 15px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.component,
|
||||
.component-full {
|
||||
background: #FBFBFC;
|
||||
// border: 1px solid rgba(204, 204, 204, 0.21);
|
||||
}
|
||||
|
||||
.component-full-icon {
|
||||
float: left;
|
||||
padding: 5px 15px 0 7px;
|
||||
}
|
||||
|
||||
.component-full p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.component-full h3 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.component img,
|
||||
.component-full-icon img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.component-icon {
|
||||
margin: 0 auto;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.component-full-copy {
|
||||
float: left;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.component h3,
|
||||
.component p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a.anchorLink {
|
||||
margin-left: 5px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.highlighter-rouge {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 3px 7px;
|
||||
font-size: 90%;
|
||||
color: #0c5176!important;
|
||||
background-color: rgba(12, 81, 118, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
padding: 9.5px;
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
word-break: normal!important;
|
||||
word-wrap: break-word;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
overflow-x: scroll!important;
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
/*
|
||||
|
||||
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
// color: #333;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
// color: #998;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-subst {
|
||||
// color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-literal,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-tag .hljs-attr {
|
||||
// color: #008080;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-doctag {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-selector-id {
|
||||
// color: #900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-type,
|
||||
.hljs-class .hljs-title {
|
||||
// color: #458;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-attribute {
|
||||
// color: #000080;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-link {
|
||||
// color: #009926;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-bullet {
|
||||
// color: #990073;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name {
|
||||
// color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-meta {
|
||||
// color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
// background: #fdd;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
// background: #dfd;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/*
|
||||
*
|
||||
* hero banner text *************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
.hero-text {
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
min-height: 20em;
|
||||
min-width: 400px;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
& h1 {
|
||||
color: $white;
|
||||
}
|
||||
& ul {
|
||||
padding: 0;
|
||||
li {
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $white;
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-text-centered {
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
text-align: center;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
|
||||
/** dockercon banner **/
|
||||
|
||||
.banner {
|
||||
width: 270px;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 55px;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
/*
|
||||
*
|
||||
* layout
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
*
|
||||
* branding *********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
.logo {
|
||||
margin: 12px 10px 0 10px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* Header ***********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
.header {
|
||||
animation: gradientswitch 80s infinite;
|
||||
-webkit-animation: gradientswitch 80 sinfinite;
|
||||
height: $global-header-height;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
@keyframes gradientswitch {
|
||||
0% {
|
||||
background: #0087C9;
|
||||
}
|
||||
16% {
|
||||
background: #EF4A53;
|
||||
}
|
||||
32% {
|
||||
background: #FFB463;
|
||||
}
|
||||
49% {
|
||||
background: #33D5D4;
|
||||
}
|
||||
65% {
|
||||
background: #254356;
|
||||
}
|
||||
81% {
|
||||
background: #5B4097
|
||||
}
|
||||
100% {
|
||||
background: #0087C9
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes gradientswitch {
|
||||
0% {
|
||||
background: #0087C9;
|
||||
}
|
||||
16% {
|
||||
background: #EF4A53;
|
||||
}
|
||||
32% {
|
||||
background: #FFB463;
|
||||
}
|
||||
49% {
|
||||
background: #33D5D4;
|
||||
}
|
||||
65% {
|
||||
background: #254356;
|
||||
}
|
||||
81% {
|
||||
background: #5B4097
|
||||
}
|
||||
100% {
|
||||
background: #0087C9
|
||||
}
|
||||
}
|
||||
|
||||
.fan {
|
||||
background: linear-gradient(-120deg, rgba(245, 33, 33, 0) 87%, rgba(255, 255, 255, 0.08) 15%), linear-gradient(-110deg, rgba(27, 0, 255, 0) 85%, rgba(255, 255, 255, 0.08) 15%), linear-gradient(-103deg, rgba(255, 33, 33, 0) 84%, rgba(255, 255, 255, 0.08) 15%), radial-gradient(circle, rgba(0, 135, 201, 0) 0%, rgba(0, 135, 201, 0) 100%);
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.columns,
|
||||
.col-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.col-nav {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.col-content {}
|
||||
|
||||
.col-body {
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
min-height: 555px;
|
||||
}
|
||||
.col-content {
|
||||
flex: 1;
|
||||
}
|
||||
.col-nav,
|
||||
.col-toc {
|
||||
flex: 0 0 0;
|
||||
}
|
||||
|
||||
.col-toc-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 1000px) {
|
||||
.col-nav,
|
||||
.col-toc {
|
||||
flex: 0 0 17em;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 60px 50px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 0 35px 25px 30px;
|
||||
}
|
||||
|
||||
section.section {
|
||||
max-width: 980px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content ul {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* sidebar ***********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
#sidebar-wrapper {
|
||||
background-color: $bg-sidebar;
|
||||
border-left: 1px solid rgba(204, 204, 204, 0.29);
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
padding: 70px 0 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
margin-right: -250px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
#sidebar-right {
|
||||
background-color: $bg-sidebar;
|
||||
border-left: 1px solid rgba(204, 204, 204, 0.29);
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
width: 255px;
|
||||
min-height: 800px;
|
||||
}
|
||||
|
||||
#sidebar-right.affix {
|
||||
top: 10px;
|
||||
position: fixed;
|
||||
min-height: 800px;
|
||||
}
|
||||
|
||||
.wrapper.right-open #sidebar-wrapper {
|
||||
width: 255px;
|
||||
}
|
||||
|
||||
|
||||
.wrapper.right-open .page-content {
|
||||
padding-right: 190px;
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
.sidebar-home {
|
||||
background-color: $bg-sidebar;
|
||||
border-right: 1px solid rgba(204, 204, 204, 0.29);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
min-height: 800px;
|
||||
height: 100%;
|
||||
width: 270px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.sidebar-home .affix {
|
||||
background-color: $bg-sidebar;
|
||||
border-right: 1px solid rgba(204, 204, 204, 0.29);
|
||||
top: 55px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 100px;
|
||||
height: 100%;
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
|
||||
/*.sidebar-home .affix {}*/
|
||||
|
||||
.sidebar,.sidebar.affix {
|
||||
background-color: $bg-sidebar;
|
||||
border-right: 1px solid rgba(204,204,204,0.29);
|
||||
top: 51px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 20px 10px 100px 0;
|
||||
position: fixed;
|
||||
height: 100% !important;
|
||||
width: 270px;
|
||||
}
|
||||
|
|
@ -0,0 +1,409 @@
|
|||
/*
|
||||
*
|
||||
* for rescaling **********************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
@media only screen
|
||||
and (min-width : 376px)
|
||||
and (max-width : 1024px) {
|
||||
.nav-primary,
|
||||
.hero-text,
|
||||
.banner,
|
||||
.ctrl-right,
|
||||
ul.primary.nav.navbar-nav,
|
||||
.nav-secondary .logo {
|
||||
display: none;
|
||||
}
|
||||
.header,
|
||||
.nav-secondary-tabs {
|
||||
height: 55px;
|
||||
}
|
||||
.tabs li a {
|
||||
font-size: 13px;
|
||||
padding: 19px 10px 11px;
|
||||
}
|
||||
.sidebar-home,
|
||||
.sidebar-home.affix,
|
||||
.sidebar,
|
||||
.sidebar.affix {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
overflow: scroll;
|
||||
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
// .block {
|
||||
// text-align: center;
|
||||
// }
|
||||
.nav-secondary-tabs .search-form input[type=search] {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@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;
|
||||
}
|
||||
.tabs {
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.tabs li a {
|
||||
font-size: 13px;
|
||||
padding: 19px 10px 11px;
|
||||
}
|
||||
.sidebar-home,
|
||||
.sidebar-home.affix,
|
||||
.sidebar,
|
||||
.sidebar.affix {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
overflow: scroll;
|
||||
|
||||
}
|
||||
.content {
|
||||
padding: 108px 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 **********************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
/* Portrait and Landscape */
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 670px) {
|
||||
.logo,
|
||||
.hero-text,
|
||||
.banner,
|
||||
.ctrl-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Portrait */
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 667px)
|
||||
and (orientation: portrait) {
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.header {
|
||||
height: 100px;
|
||||
}
|
||||
.nav-secondary-tabs,
|
||||
.nav-secondary {
|
||||
background-color: $black;
|
||||
height: 100px;
|
||||
}
|
||||
.nav-secondary input[type=search] {
|
||||
background: rgb(78, 77, 77) url(/images/search.png) no-repeat;
|
||||
background-position: 10px 9px;
|
||||
}
|
||||
.nav-sidebar a {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
.tabs {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 5px 0 0 17px;
|
||||
}
|
||||
.tabs li a {
|
||||
color: #fff;
|
||||
padding: 15px 12px 10px 6px;
|
||||
float: left;
|
||||
opacity: 0.7;
|
||||
font-size: 12px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.content {
|
||||
padding: 110px 25px;
|
||||
}
|
||||
.main-content {
|
||||
padding: 10px 25px;
|
||||
}
|
||||
.sidebar,
|
||||
.sidebar-home {
|
||||
background-color: #15212e;
|
||||
border-right: 1px solid rgba(204,204,204,0.29);
|
||||
top: 51px;
|
||||
left: 0;
|
||||
display: block;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 60px 10px 100px 15px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar-home,
|
||||
.sidebar-home .affix {
|
||||
background: #192837;
|
||||
width: 100%;
|
||||
}
|
||||
.search-form {
|
||||
display: block!important;
|
||||
width: 230px;
|
||||
}
|
||||
.component-full {
|
||||
text-align: center;
|
||||
}
|
||||
.component-full-copy {
|
||||
width: 100%;
|
||||
}
|
||||
.component-full-icon {
|
||||
float: none;
|
||||
}
|
||||
.top_footer {
|
||||
padding: 50px 0 35px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape */
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 667px)
|
||||
and (orientation: landscape) {
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.header,
|
||||
.nav-secondary-tabs {
|
||||
height: 100px;
|
||||
}
|
||||
.nav-secondary {
|
||||
background: $black;
|
||||
// height: 55px;
|
||||
}
|
||||
.content {
|
||||
padding: 120px 20px;
|
||||
}
|
||||
.main-content {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
.tabs {
|
||||
padding-left: 22px;
|
||||
}
|
||||
.tabs li a {
|
||||
padding: 17px 9px 12px 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-sidebar a {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
.sidebar,
|
||||
.sidebar-home {
|
||||
background-color: #15212e;
|
||||
border-right: 1px solid rgba(204,204,204,0.29);
|
||||
top: 51px;
|
||||
left: 0;
|
||||
display: block;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 10px 10px 100px 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.component-full {
|
||||
text-align: center;
|
||||
}
|
||||
.component-full-copy {
|
||||
width: 100%;
|
||||
}
|
||||
.component-full-icon {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Portrait and Landscape iphone 4 + S */
|
||||
// @media only screen
|
||||
// and (min-device-width: 320px)
|
||||
// and (max-device-width: 480px)
|
||||
// and (-webkit-min-device-pixel-ratio: 2) {
|
||||
// .tabs {
|
||||
// padding: 5px 0 0 8px;
|
||||
// }
|
||||
// .tabs li a {
|
||||
// padding: 15px 9px 10px 4px;
|
||||
// }
|
||||
// }
|
||||
|
||||
/*
|
||||
*
|
||||
* medium displays mobile **********************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
@media only screen
|
||||
and (min-device-width: 768px)
|
||||
and (max-device-width: 1110px) {
|
||||
.logo {
|
||||
margin: 12px 10px 0 10px;
|
||||
width: 130px;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.tabs li a {
|
||||
font-size: 12px;
|
||||
padding: 20px 7px 11px 5px;
|
||||
}
|
||||
.toc-nav a {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Portrait */
|
||||
@media only screen
|
||||
and (min-device-width: 768px)
|
||||
and (max-device-width: 1024px)
|
||||
and (orientation: portrait) {
|
||||
|
||||
// .tabs li a {
|
||||
// color: #fff;
|
||||
// padding: 17px 9px 12px 5px;
|
||||
// float: left;
|
||||
// opacity: 0.8;
|
||||
// }
|
||||
// .navbar-toggle {
|
||||
// display: block!important;
|
||||
// }
|
||||
.nav-secondary input[type=search] {
|
||||
background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat;
|
||||
background-position: 10px 9px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Landscape */
|
||||
@media only screen
|
||||
and (min-device-width: 768px)
|
||||
and (max-device-width: 1024px)
|
||||
and (orientation: landscape) {
|
||||
.search-form {
|
||||
float: left;
|
||||
margin: 10px 15px 0 0px;
|
||||
width: 160px;
|
||||
}
|
||||
.navbar-toggle {
|
||||
display: none!important;
|
||||
}
|
||||
.ctrl-right {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar, .sidebar.affix {
|
||||
width: 270px;
|
||||
}
|
||||
.nav-secondary input[type=search] {
|
||||
background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat;
|
||||
background-position: 10px 9px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,372 @@
|
|||
/*
|
||||
*
|
||||
* Primary navigation - top header **********************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
.primary {
|
||||
padding: 5px 0 0 20px;
|
||||
}
|
||||
|
||||
.nav-primary {
|
||||
background: transparent;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
li:nth-child(5n) {
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
margin: 4px 0 0 0;
|
||||
float: right;
|
||||
padding: 16px 15px 0 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* user-nav ***********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
.user-nav {
|
||||
padding: 20px 0 0;
|
||||
float: right;
|
||||
ul {
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: inline;
|
||||
padding-right: 10px;
|
||||
a {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* Secondary Navigation **********************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
.nav-secondary {
|
||||
background: $bg-secondary;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* nav-secondary-tabs ***********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
.nav-secondary-tabs {
|
||||
background-color: $bg-secondary-tabs;
|
||||
bottom: 0;
|
||||
height: 55px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
&.affix {
|
||||
background: #0C5176;
|
||||
// box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
|
||||
top: 0;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* NAV SIDEBAR ***********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
.nav-sidebar>li>a {
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.nav-sidebar>.active>a,
|
||||
.nav-sidebar>.active>a:focus,
|
||||
.nav-sidebar>.active>a:hover {
|
||||
color: #2089C4;
|
||||
background-color: #428bca;
|
||||
}
|
||||
|
||||
.nav-sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sidebar ul li a:hover {
|
||||
opacity: 0.7;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nav-sidebar ul li a,
|
||||
.nav-sidebar ul li a:focus,
|
||||
.nav-sidebar ul li a:hover {
|
||||
border-bottom: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-sidebar ul li a.active,
|
||||
.nav-sidebar.nav>li>a:focus {
|
||||
cursor: default;
|
||||
color: #2089C4;
|
||||
border-left: 4px solid #21cbc9;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-sidebar ul li li a {
|
||||
border-left: 1px solid #21cbc9;
|
||||
font-size: 12px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.nav-sidebar .caret {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.leftnav {
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* Table of contents menu ***********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
.toc-nav {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toc-toggle {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.toc-nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 60px 0 0;
|
||||
width: 300px;
|
||||
line-height: 24px;
|
||||
li {
|
||||
padding: 2px 8px 2px 15px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
a {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
padding: 0 10px 0 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toc-nav li a.active {
|
||||
color: #2089C4;
|
||||
border-left: 4px solid #21cbc9;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toc-nav i.fa {
|
||||
font-size: 14px;
|
||||
margin: 0px 8px 0 0;
|
||||
color: #4fa1d0;
|
||||
}
|
||||
|
||||
i.fa.fa-question {
|
||||
font-size: 21px;
|
||||
margin: 0 11px 0 0;
|
||||
}
|
||||
|
||||
div#side-toc-title {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin: 11px 0 10px 13px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.edit {
|
||||
margin: 10px 0 20px 15px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* Toggle Switches **************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
.toggle-mode {
|
||||
float: left;
|
||||
padding: 0 0 0 10px;
|
||||
width: 100%;
|
||||
.icon {
|
||||
width: 25px;
|
||||
float: left;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.toggle-switch {
|
||||
float: left;
|
||||
height: 40px;
|
||||
width: 60px;
|
||||
padding: 3px 7px 0 2px;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 47px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $slider-bg;
|
||||
border: 1px solid #c3e4f7;
|
||||
// transition: 0.4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
background-color: $slider-btn;
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
left: 2px;
|
||||
bottom: 1px;
|
||||
// transition: 0.4s;
|
||||
}
|
||||
|
||||
input:focus+.slider {
|
||||
box-shadow: 0 0 1px #2196F3;
|
||||
}
|
||||
|
||||
input:checked+.slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* Tabs ***********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
.tabs {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tabs li {
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tabs li a {
|
||||
color: $white;
|
||||
padding: 17px 15px 11px;
|
||||
float: left;
|
||||
opacity: 0.8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tabs li a:hover {
|
||||
background: rgba(0, 0, 0, 0.17) !important;
|
||||
border-bottom: 4px solid #fff;
|
||||
}
|
||||
|
||||
.tabs li.active a {
|
||||
background: transparent !important;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
border-bottom: 4px solid #fff;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* feedback links ***********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
#sidebar-right.affix .feedback-links {
|
||||
margin: 50px 0 10px 0;
|
||||
}
|
||||
|
||||
|
||||
/* polldaddy */
|
||||
|
||||
#rating_info_8453675 {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.rating-msg {
|
||||
font: inherit !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* Controls ***********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
.ctrl-left {
|
||||
float: left;
|
||||
width: 20px;
|
||||
margin: 3px 0px 0px 0;
|
||||
}
|
||||
|
||||
.ctrl-right {
|
||||
float: right;
|
||||
padding: 5px 2px 12px;
|
||||
}
|
||||
|
||||
.ctrl-right .btn-group {
|
||||
float: left;
|
||||
margin: 2px 24px 0 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
/*
|
||||
*
|
||||
* night mode
|
||||
*
|
||||
*/
|
||||
|
||||
body.night {
|
||||
background-color: $bg-body-night;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.component h3,
|
||||
.component p,
|
||||
p,
|
||||
.rating-nero-value,
|
||||
.reading-time {
|
||||
color: $body-text-color-night!important;
|
||||
}
|
||||
a,
|
||||
.toc-nav i.fa {
|
||||
color: $primary-links-night;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
color: #c7c9ca;
|
||||
}
|
||||
.header {
|
||||
background-color: #101c29!important;
|
||||
animation: none!important;
|
||||
}
|
||||
.hero-text h1,
|
||||
div#side-toc-title {
|
||||
color: $white;
|
||||
}
|
||||
.nav-secondary {
|
||||
background: $bg-secondary-night;
|
||||
}
|
||||
.nav-secondary input[type=search] {
|
||||
background: rgba(76, 76, 76, 0.47) url(/images/search.png) no-repeat;
|
||||
background-position: 10px 9px;
|
||||
color: #fff;
|
||||
}
|
||||
.nav-secondary-tabs .search-form input[type=search] {
|
||||
background: rgba(16, 28, 41, 0.6) url(/images/search.png) no-repeat;
|
||||
background-position: 10px 9px;
|
||||
}
|
||||
.nav-secondary-tabs .search-form input[type=search]:focus {
|
||||
background: rgba(255,255,255,0.17) url(/images/search.png) no-repeat;
|
||||
background-position: 10px 9px;
|
||||
}
|
||||
.nav-secondary .search-form input[type=search]:focus {
|
||||
background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat!important;
|
||||
background-position: 10px 9px!important;
|
||||
}
|
||||
.sidebar-home,
|
||||
.sidebar,
|
||||
#sidebar-wrapper,
|
||||
#sidebar-wrapper-home,
|
||||
.sidebar-home .affix,
|
||||
#sidebar-right,
|
||||
#sidebar-right.affix {
|
||||
background-color: $bg-sidebar-night;
|
||||
border: none;
|
||||
}
|
||||
.nav-secondary-tabs {
|
||||
background-color: rgba(255, 255, 255, 0.04);
|
||||
border-top: 1px solid rgba(68, 77, 87, 0.38);
|
||||
border-bottom: 1px solid #29343f;
|
||||
}
|
||||
.nav-secondary-tabs.affix {
|
||||
background: $black;
|
||||
}
|
||||
.nav-sidebar ul li a.active,
|
||||
.nav-sidebar.nav>li>a:focus,
|
||||
.toc-nav li a.active {
|
||||
color: $active-sidebar-night;
|
||||
border-left: 4px solid #21cbc9;
|
||||
}
|
||||
.tabs li.active a {
|
||||
border-bottom: 4px solid #21cbc9;
|
||||
}
|
||||
.slider {
|
||||
background-color: #344658;
|
||||
border: 1px solid #192837;
|
||||
}
|
||||
.slider:before {
|
||||
background-color: rgb(26, 162, 161);
|
||||
}
|
||||
ul {
|
||||
color: $body-text-night;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 6px solid #439FD1;
|
||||
background: #1f3341;
|
||||
}
|
||||
table {
|
||||
border: 1px solid #1b1a1a;
|
||||
color: #cbdbe6;
|
||||
}
|
||||
table>tbody>tr:nth-of-type(even) {
|
||||
background-color: #1f3341;
|
||||
}
|
||||
thead {
|
||||
background: #2b4252;
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
padding: 9.5px;
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.42857143;
|
||||
color: #f3f3f3;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
background-color: rgba(0, 0, 0, 0.71) !important;
|
||||
border: 1px solid $black;
|
||||
border-radius: 4px;
|
||||
}
|
||||
code {
|
||||
padding: 3px 7px;
|
||||
font-size: 90%;
|
||||
color: #ffffff!important;
|
||||
border-radius: 2px;
|
||||
background: transparent !important;
|
||||
}
|
||||
.nav-secondary .dropdown-btn {
|
||||
color: #6e6f6f;
|
||||
}
|
||||
.outline-btn {
|
||||
background: #101c29;
|
||||
border: 1px solid;
|
||||
border-color: #37404a;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
}
|
||||
a.button.outline-btn {
|
||||
color: #a7e2ff;
|
||||
}
|
||||
.component img, .component-full-icon img {
|
||||
opacity: 1;
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.hljs {
|
||||
color: #f5f5f5!important;
|
||||
}
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-attribute {
|
||||
color: #e3e3f2!important;
|
||||
font-weight: normal;
|
||||
}
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-subst {
|
||||
color: #f5f5f5!important;
|
||||
}
|
||||
div#autocompleteResults {
|
||||
background: $bg-search-results-night;
|
||||
border: 1px solid $black;
|
||||
color: #fff;
|
||||
padding: 20px 55px 15px 15px;
|
||||
margin: 10px 0 0 0;
|
||||
position: absolute;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
width: 800px;
|
||||
}
|
||||
ul.autocompleteList {
|
||||
list-style: none;
|
||||
}
|
||||
.autocompleteList li {
|
||||
color: #b4c3d2;
|
||||
padding: 5px 0 7px 0;
|
||||
}
|
||||
div#autocompleteResults span {
|
||||
background-color: rgba(32, 137, 196, 0.34) !important;
|
||||
color: #b7a4de;
|
||||
}
|
||||
.autocompleteTitle {
|
||||
font-weight: bold;
|
||||
}
|
||||
.autocompleteUrl,
|
||||
.autocompleteKeywords,
|
||||
.autocompleteDescription {
|
||||
line-height: normal;
|
||||
}
|
||||
span.reading-time {
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
color: #bfabe5;
|
||||
}
|
||||
/** for google results styles - forgive us css gods **/
|
||||
.gsc-control-cse {
|
||||
border-color: #192837!important;
|
||||
background-color: #192837!important;
|
||||
}
|
||||
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
|
||||
border-color: #192837!important;
|
||||
background-color: #192837!important;
|
||||
}
|
||||
.gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {
|
||||
border-color: #25374a!important;
|
||||
background-color: #192837!important;
|
||||
}
|
||||
a.gs-title {
|
||||
color: #cccccc !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
.gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
|
||||
color: #a8b0b7!important;
|
||||
}
|
||||
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {
|
||||
color: #a9e4ff!important;
|
||||
}
|
||||
.component {
|
||||
background: #101c29;
|
||||
}
|
||||
.component-full {
|
||||
background: #101c29;
|
||||
}
|
||||
.transparent-btn {
|
||||
background-color: rgb(0, 135, 200);
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.footer {
|
||||
background-color: $bg-footer-night;
|
||||
border-top: 1px solid rgba(33, 203, 201, 0.45);
|
||||
}
|
||||
.bottom_footer {
|
||||
border-top: 1px solid rgba(33, 203, 201, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* night mode component overrides
|
||||
*
|
||||
*/
|
||||
|
||||
body.night {
|
||||
/* accordion */
|
||||
.panel-default {
|
||||
border-color: #374656;
|
||||
>.panel-heading {
|
||||
color: #333;
|
||||
background-color: #101c29;
|
||||
border-color: #ddd;
|
||||
}
|
||||
}
|
||||
.panel-body {
|
||||
padding: 15px;
|
||||
background: rgb(35, 54, 72);
|
||||
color: #bcbfc3;
|
||||
}
|
||||
/** tabs **/
|
||||
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
background-color: #4e6071;
|
||||
border: 1px solid transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
/*
|
||||
*
|
||||
* Bootstrap Overrides ***********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
.nav-secondary-tabs .dropdown-btn {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
padding: 6px 12px;
|
||||
margin-top: 7px;
|
||||
border: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-secondary .dropdown-btn {
|
||||
background: transparent;
|
||||
color: #b4d4e4;
|
||||
padding: 6px 12px;
|
||||
margin-top: 7px;
|
||||
border: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.navbar-toggle {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.navbar-nav .open .dropdown-menu .dropdown-header,
|
||||
.navbar-nav .open .dropdown-menu>li>a {
|
||||
padding: 5px 15px 5px 25px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse,
|
||||
.navbar-form {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.nav>li>a:focus,
|
||||
.nav>li>a:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dropdown-menu>li>a {
|
||||
font-size: 13.5px;
|
||||
line-height: 16px;
|
||||
color: #1488c6;
|
||||
padding: 5px 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-default:hover {
|
||||
color: #fff!important;
|
||||
background-color: transparent!important;
|
||||
border-color: none!important;
|
||||
box-shadow: none!important;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.btn-group.open .dropdown-toggle {
|
||||
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
|
||||
background: trr;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-default:focus,
|
||||
.btn-default.active,
|
||||
.btn-default:active,
|
||||
.open>.dropdown-toggle.btn-default:focus,
|
||||
.open>.dropdown-toggle.btn-default:hover {
|
||||
color: #fff!important;
|
||||
background-color: transparent!important;
|
||||
border-color: none!important;
|
||||
box-shadow: none!important
|
||||
}
|
||||
|
||||
.nav .open>a,
|
||||
.nav .open>a:focus,
|
||||
.nav .open>a:hover {
|
||||
background-color: transparent;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
|
||||
.dropdown-menu>li>a:focus,
|
||||
.dropdown-menu>li>a:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
background-color: #0c5176;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* override google results +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||||
*
|
||||
*/
|
||||
|
||||
a.gs-title {
|
||||
color: #2089C4!important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
|
||||
color: #82949E!important;
|
||||
}
|
||||
|
||||
.gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
|
||||
font-size: 14px!important;
|
||||
}
|
||||
|
||||
img.with-border {
|
||||
border: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.cse input.gsc-search-button:focus,
|
||||
input.gsc-search-button:focus {
|
||||
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
|
||||
-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
|
||||
-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.cse .gsc-search-button input.gsc-search-button-v2,
|
||||
input.gsc-search-button-v2 {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
padding: 6px 27px;
|
||||
min-width: 13px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
*
|
||||
* Fonts ***********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geomanist Book';
|
||||
src: url("../fonts/geomanist/hinted-Geomanist-Book.eot");
|
||||
src: url("../fonts/geomanist/hinted-Geomanist-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/geomanist/hinted-Geomanist-Book.woff2") format("woff2"), url("../fonts/geomanist/hinted-Geomanist-Book.woff") format("woff"), url("../fonts/geomanist/hinted-Geomanist-Book.ttf") format("truetype"), url("../fonts/geomanist/hinted-Geomanist-Book.svg#Geomanist-Book") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $headings;
|
||||
color: $body-text-color;
|
||||
clear: both;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #82949e;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $body-text-color;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
dd, dt {
|
||||
line-height: 25px;
|
||||
}
|
||||
|
|
@ -0,0 +1,267 @@
|
|||
/*
|
||||
*
|
||||
* utilities
|
||||
*
|
||||
*/
|
||||
|
||||
.reading-time {
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
color: rgba(13, 86, 125, 0.55);
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* tables
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
table {
|
||||
border: 1px solid rgba(204, 204, 204, 0.29);
|
||||
margin: 0 0 15px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table>tbody>tr:nth-of-type(even) {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
th,
|
||||
td.th {
|
||||
font-weight: bold;
|
||||
padding: 7px 10px 7px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: rgba(96, 125, 139, 0.16);
|
||||
}
|
||||
|
||||
i.fa.fa-indent,
|
||||
i.fa.fa-outdent {
|
||||
color: #fff;
|
||||
padding: 16px 15px 0 0;
|
||||
font-size: 1.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.block {
|
||||
padding: 0px 15px 10px 15px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Search *********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
.search-form {
|
||||
float: left;
|
||||
margin: 10px 15px 0 0px!important;
|
||||
width: 210px;
|
||||
& input[type=text] {
|
||||
background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat;
|
||||
background-position: 10px 9px;
|
||||
border: 0;
|
||||
color: #0C5176;
|
||||
border-radius: 0px;
|
||||
margin: 0;
|
||||
transition: all 0.2s ease;
|
||||
width: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-secondary-tabs .search-form input[type=search] {
|
||||
background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat;
|
||||
background-position: 10px 9px;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
border-radius: 0;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
padding: 0px 0 0 35px;
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
.nav-secondary-tabs .search-form {
|
||||
// width: 240px;
|
||||
margin: 10px 0 0 10px!important;
|
||||
}
|
||||
|
||||
.search-form input[type=text]:focus {
|
||||
background: #fff;
|
||||
box-shadow: 0;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
.nav-secondary-tabs.affix input[type=text] {
|
||||
background: #10628e;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-form input[type=text]::-webkit-input-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-form input[type=text]:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-form input[type=text]::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-form input[type=text]:-ms-input-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-secondary-tabs .search-form input[type=search]:focus {
|
||||
background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat;
|
||||
background-position: 10px 9px;
|
||||
}
|
||||
|
||||
.nav-secondary-tabs.affix input[type=search],
|
||||
input[type=text] {
|
||||
background: rgba(0, 0, 0, 0.17) url(/images/search.png) no-repeat;
|
||||
background-position: 10px 9px;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-secondary input[type=search] {
|
||||
background: rgba(0, 0, 0, 0.17) url(/images/search.png) no-repeat;
|
||||
background-position: 10px 9px;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
// color: #fff;
|
||||
padding: 0px 0 0 35px;
|
||||
}
|
||||
|
||||
.nav-secondary .search-form input[type=search]:focus {
|
||||
background: rgb(51, 112, 144) url(/images/search.png) no-repeat;
|
||||
background-position: 10px 9px;
|
||||
border: 1px solid rgba(91, 149, 179, 0.44);
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-form input[type=search]::-webkit-input-placeholder {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.search-form input[type=search]:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.search-form input[type=search]::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.search-form input[type=search]:-ms-input-placeholder {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* autocompleteResults **********************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
div#autocompleteResults {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#autocompleteResults {
|
||||
background: #f6fcff;
|
||||
border: 1px solid #eee;
|
||||
padding: 20px 0 15px 0px;
|
||||
margin: 10px 0 0 0;
|
||||
position: absolute;
|
||||
width: 600px!important;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
ul.autocompleteList {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.autocompleteList li {
|
||||
padding: 5px 0 7px 0;
|
||||
}
|
||||
|
||||
div#autocompleteResults span {
|
||||
background: #b8e2f9!important;
|
||||
color: #518cad;
|
||||
}
|
||||
|
||||
.autocompleteTitle {
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.autocompleteSelected {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.autocompleteList
|
||||
{
|
||||
list-style-type: none;
|
||||
width: 400px;
|
||||
padding:0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.autoCompleteResult {
|
||||
border-bottom: 1px solid #6db9d1;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#autocompleteShowAll {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.autocompleteList li {
|
||||
width: 380px;
|
||||
border: 0px;
|
||||
padding-right: 20px;
|
||||
margin: 0px;
|
||||
}
|
||||
/*
|
||||
*
|
||||
* google-Results **********************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
// .cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2,input.gsc-search-button {
|
||||
// width: auto!important
|
||||
// height: auto!important;
|
||||
// }
|
||||
|
||||
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
|
||||
/*
|
||||
*
|
||||
* global +++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||||
*
|
||||
*/
|
||||
|
||||
$headings: "Geomanist Book", sans-serif;
|
||||
|
||||
$font: "Open Sans", sans-serif;
|
||||
|
||||
$body-text-size: 15px;
|
||||
|
||||
$global-header-height: 440px;
|
||||
|
||||
$bg-secondary-tabs: rgba(0, 0, 0, 0.05);
|
||||
|
||||
$white: #fff;
|
||||
|
||||
$black: #000;
|
||||
|
||||
$clear: 0;
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* standard mode
|
||||
*
|
||||
*/
|
||||
|
||||
$bg-body: #fff;
|
||||
|
||||
$heading-color: #254356;
|
||||
|
||||
$body-text-color: #254356;
|
||||
|
||||
$bg-footer: #fff;
|
||||
|
||||
$bg-secondary: #0C5176;
|
||||
|
||||
$bg-sidebar: #FBFBFC;
|
||||
|
||||
$bdr-sidebar: rgba(204, 204, 204, 0.29);
|
||||
|
||||
$primary-links: #2089C4;
|
||||
|
||||
$slider-bg: #c3e4f7;
|
||||
|
||||
$slider-btn: #4fa1d0;
|
||||
|
||||
$code-blocks: rgba(12, 81, 118, 0.1);
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* night mode
|
||||
*
|
||||
*/
|
||||
|
||||
$bg-body-night: #192837;
|
||||
|
||||
$body-text-color-night: #d3d4d4;
|
||||
|
||||
$bg-secondary-night: #000;
|
||||
|
||||
$bg-sidebar-night: #101c29;
|
||||
|
||||
$active-sidebar-night: #21cbc9;
|
||||
|
||||
$heading-color-night: #b9c2cc;
|
||||
|
||||
$body-text-night: #cbdbe6;
|
||||
|
||||
$primary-links-night: rgba(255, 255, 255, 0.75);
|
||||
|
||||
$bg-footer-night: #000;
|
||||
|
||||
$bg-search-results-night: rgba(10, 10, 10, 0.95);
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -32,7 +32,9 @@
|
|||
</span>
|
||||
</a>
|
||||
<div class="tocify-wrapper">
|
||||
<img src="images/logo.png" />
|
||||
<div class="logo">
|
||||
<img src="images/docker-cloud.svg" />
|
||||
</div>
|
||||
<div class="lang-selector">
|
||||
<a href="#" data-language-name="http">http</a>
|
||||
<a href="#" data-language-name="go">go</a>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,148 @@
|
|||
---
|
||||
description: Componenets page
|
||||
title: Components
|
||||
hide_from_sitemap: true
|
||||
---
|
||||
|
||||
For components and controls we are using [Bootstrap](http://getbootstrap.com/)
|
||||
|
||||
|
||||
<!-- ### Dropdowns
|
||||
<div class="dropdown">
|
||||
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown trigger
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu" aria-labelledby="dLabel">
|
||||
...
|
||||
</ul>
|
||||
</div> -->
|
||||
|
||||
### Tooltips
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||
|
||||
|
||||
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||
```
|
||||
<hr>
|
||||
|
||||
<!-- ### Popover
|
||||
|
||||
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
||||
|
||||
<hr> -->
|
||||
|
||||
|
||||
### Accordion
|
||||
[Bootstrap docs](http://getbootstrap.com/javascript/#collapse)
|
||||
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingOne">
|
||||
<h4 class="panel-title">
|
||||
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Collapsible Group Item #1
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
|
||||
<div class="panel-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingTwo">
|
||||
<h4 class="panel-title">
|
||||
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Collapsible Group Item #2
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
|
||||
<div class="panel-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingThree">
|
||||
<h4 class="panel-title">
|
||||
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Collapsible Group Item #3
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
||||
<div class="panel-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingOne">
|
||||
<h4 class="panel-title">
|
||||
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Collapsible Group Item #1
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
|
||||
<div class="panel-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingTwo">
|
||||
<h4 class="panel-title">
|
||||
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Collapsible Group Item #2
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
|
||||
<div class="panel-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingThree">
|
||||
<h4 class="panel-title">
|
||||
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Collapsible Group Item #3
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
||||
<div class="panel-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
1338
css/main.css
1338
css/main.css
File diff suppressed because it is too large
Load Diff
1913
css/style.css
1913
css/style.css
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
# Docker Documentation Theme
|
||||
---
|
||||
|
||||
@import "variables";
|
||||
@import "night-mode";
|
||||
@import "base";
|
||||
@import "typography";
|
||||
@import "layout";
|
||||
@import "global-header";
|
||||
@import "navigation";
|
||||
@import "buttons";
|
||||
@import "content";
|
||||
@import "utilities";
|
||||
@import "github";
|
||||
@import "overrides";
|
||||
@import "mobile";
|
||||
83
css/temp.css
83
css/temp.css
|
|
@ -37,93 +37,10 @@
|
|||
opacity: .2;
|
||||
margin: 10px 15px 0 0;
|
||||
}
|
||||
/*
|
||||
*
|
||||
* toc **********************************************************
|
||||
*
|
||||
*/
|
||||
div#side-toc-title {
|
||||
font-weight: bold;
|
||||
margin: 0 0 10px 13px;
|
||||
}
|
||||
.offcanvas a:focus, .toc-nav a:hover {
|
||||
color: opacity: .8;
|
||||
}
|
||||
/*
|
||||
*
|
||||
* MOBILE VIEWS
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
*
|
||||
* override google results.....
|
||||
*
|
||||
*/
|
||||
|
||||
a.gs-title {
|
||||
color: #2089C4!important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
|
||||
color: #82949E!important;
|
||||
}
|
||||
|
||||
.gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
|
||||
font-size: 14px!important;
|
||||
}
|
||||
|
||||
img.with-border {
|
||||
border: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.cse input.gsc-search-button:focus,
|
||||
input.gsc-search-button:focus {
|
||||
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
|
||||
-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
|
||||
-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.cse .gsc-search-button input.gsc-search-button-v2,
|
||||
input.gsc-search-button-v2 {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
padding: 6px 27px;
|
||||
min-width: 13px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Make table headings bold, give tables some breathing room */
|
||||
|
||||
th, td.th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content table {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Without this, if the CTA button is used right before a header,
|
||||
the header is on the same line */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* This needs some space at the bottom */
|
||||
.button.outline-btn {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* Clearfix of floated elements within p tags */
|
||||
p:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 62 KiB |
14
index.md
14
index.md
|
|
@ -10,7 +10,7 @@ Docker packages your app with its dependencies, freeing you from worrying about
|
|||
your system configuration, and making your app more portable.
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-6">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 block">
|
||||
{% capture basics %}
|
||||
### Learn Docker basics
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ tutorial stops short of teaching you how to deploy applications.
|
|||
{% capture basics %}[Start the basic tutorial](/engine/getstarted/){: class="button outline-btn"}{% endcapture %}{{ basics | markdownify }}
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 col-md-12 col-lg-6 block">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 block">
|
||||
{% capture apps %}
|
||||
### Define and deploy apps in Swarm Mode
|
||||
|
||||
|
|
@ -38,9 +38,7 @@ environment. Highlights Compose Version 3 new features and swarm mode.
|
|||
<div class="component-container">
|
||||
<!--start row-->
|
||||
<div class="row">
|
||||
<!--organic row 1-->
|
||||
<!--Docker for Mac-->
|
||||
<div class="col-sm-4 col-md-12 col-lg-3 block">
|
||||
<div class="col-sm-4 col-md-12 col-lg-4 block">
|
||||
<div class="component">
|
||||
<div class="component-icon">
|
||||
<a href="docker-for-mac/"> <img src="../images/apple_48.svg" alt="Docker for Mac"> </a>
|
||||
|
|
@ -49,8 +47,7 @@ environment. Highlights Compose Version 3 new features and swarm mode.
|
|||
<p>A native application using the macOS sandbox security model which delivers all Docker tools to your Mac.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Docker for Windows-->
|
||||
<div class="col-sm-4 col-md-12 col-lg-3 block">
|
||||
<div class="col-sm-4 col-md-12 col-lg-4 block">
|
||||
<div class="component">
|
||||
<div class="component-icon">
|
||||
<a href="docker-for-windows/"> <img src="../images/windows_48.svg" alt="Docker for Windows"> </a>
|
||||
|
|
@ -59,8 +56,7 @@ environment. Highlights Compose Version 3 new features and swarm mode.
|
|||
<p>A native Windows application which delivers all Docker tools to your Windows computer.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--Docker for Linux-->
|
||||
<div class="col-sm-4 col-md-12 col-lg-3 block">
|
||||
<div class="col-sm-4 col-md-12 col-lg-4 block">
|
||||
<div class="component">
|
||||
<div class="component-icon">
|
||||
<a href="engine/installation/linux/ubuntu/"> <img src="../images/linux_48.svg" alt="Docker for Linux"> </a>
|
||||
|
|
|
|||
45
js/docs.js
45
js/docs.js
|
|
@ -127,15 +127,15 @@ function readCookie(name) {
|
|||
function eraseCookie(name) {
|
||||
createCookie(name,"",-1);
|
||||
}
|
||||
/*
|
||||
|
||||
if (readCookie("night") == "true") {
|
||||
document.getElementById('pagestyle').setAttribute('href', '/css/style-alt.css');
|
||||
applyNight();
|
||||
$('#switch-style').prop('checked', true);
|
||||
} else {
|
||||
document.getElementById('pagestyle').setAttribute('href', '/css/style.css');
|
||||
applyDay();
|
||||
$('#switch-style').prop('checked', false);
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
|
@ -147,6 +147,11 @@ if (readCookie("night") == "true") {
|
|||
$("#menu-toggle").click(function(e) {
|
||||
e.preventDefault();
|
||||
$(".wrapper").toggleClass("right-open");
|
||||
$(".col-toc").toggleClass("col-toc-hidden");
|
||||
});
|
||||
$("#menu-toggle-left").click(function(e) {
|
||||
e.preventDefault();
|
||||
$(".col-nav").toggleClass("col-toc-hidden");
|
||||
});
|
||||
$(".navbar-toggle").click(function(){
|
||||
$(".sidebar, .sidebar-home").each(function(){
|
||||
|
|
@ -248,22 +253,32 @@ $('ul.nav li.dropdown').hover(function() {
|
|||
*
|
||||
*/
|
||||
|
||||
function swapStyleSheet(sheet) {
|
||||
document.getElementById('pagestyle').setAttribute('href', sheet);
|
||||
// function swapStyleSheet(sheet) {
|
||||
// document.getElementById('pagestyle').setAttribute('href', sheet);
|
||||
// }
|
||||
|
||||
function applyNight()
|
||||
{
|
||||
$( "body" ).addClass( "night" );
|
||||
}
|
||||
|
||||
function applyDay() {
|
||||
$( "body" ).removeClass( "night" );
|
||||
}
|
||||
|
||||
$('#switch-style').change(function() {
|
||||
|
||||
if ($(this).is(':checked')) {
|
||||
swapStyleSheet('/css/style-alt.css');
|
||||
applyNight();
|
||||
createCookie("night",true,999)
|
||||
} else {
|
||||
swapStyleSheet('/css/style.css');
|
||||
} else {
|
||||
applyDay();
|
||||
// swapStyleSheet('/css/style.css');
|
||||
eraseCookie("night")
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* TEMP HACK For side menu*********************************************************************
|
||||
|
|
@ -281,8 +296,18 @@ if($('.nav-sidebar ul a.active').length != 0)
|
|||
});
|
||||
}
|
||||
|
||||
// sync tabs with the same data-group
|
||||
|
||||
/*
|
||||
*
|
||||
* Components *********************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
$(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
|
||||
// sync tabs with the same data-group
|
||||
window.onload = function() {
|
||||
$('.nav-tabs > li > a').click(function(e) {
|
||||
var group = $(this).attr('data-group');
|
||||
|
|
|
|||
Loading…
Reference in New Issue