[IMP] doc: revamp documentation design
A comprehensive theme’s revamp, details: === New features === - Show titles permalink markers on hover - “Scrollspy” effect for the sidebar === Fixes === - Solve an issue causing the sidebar to flicker on scroll - Hide the sidebar if less then two links === Design === - Improve typography vertical rhythm and line height - Visually increase separation between sections - Review alerts and <dl> design - Reduce cover’s size - Reduce overall paddings/margins. Closes #21304
This commit is contained in:
stefanorigano
@@ -22,6 +22,7 @@
|
|||||||
{%- block htmltitle -%}
|
{%- block htmltitle -%}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Work+Sans:500,600" rel="stylesheet">
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{%- endblock -%}
|
{%- endblock -%}
|
||||||
|
|
||||||
@@ -226,10 +227,9 @@
|
|||||||
{% else %}
|
{% else %}
|
||||||
{% set container = 'container' %}
|
{% set container = 'container' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="{{ container}} {{ ' '.join(classes) }}">
|
<main class="container {{ ' '.join(classes) }}">
|
||||||
<main class="container-fluid {{ ' '.join(classes) }}">
|
|
||||||
{% if pagename != master_doc %}
|
{% if pagename != master_doc %}
|
||||||
<div class="row">
|
<div class="o_content row">
|
||||||
{% if 'has-toc' not in meta and not (pagename in toc) %}
|
{% if 'has-toc' not in meta and not (pagename in toc) %}
|
||||||
<aside>
|
<aside>
|
||||||
<div class="navbar-aside text-center">
|
<div class="navbar-aside text-center">
|
||||||
@@ -250,7 +250,6 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
<div id="mask"></div>
|
<div id="mask"></div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="floating_action_container">
|
<div class="floating_action_container">
|
||||||
|
|||||||
@@ -1,59 +0,0 @@
|
|||||||
|
|
||||||
// Animations
|
|
||||||
|
|
||||||
.keyframes(ripple; {
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
.scale(2.5);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
.keyframes(fadeInUp; {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
.translate(0; 60px);
|
|
||||||
}
|
|
||||||
40% { opacity: 1}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
.translate(none; none);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
.keyframes(fadeIn; {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
.fadeInUp {
|
|
||||||
.animation(fadeInUp 1s);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeIn {
|
|
||||||
.animation(fadeIn 1s);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Ripple Buttons
|
|
||||||
|
|
||||||
.ripple {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.inner-ripple {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 100%;
|
|
||||||
opacity: 1;
|
|
||||||
z-index: -1;
|
|
||||||
background: rgba(0, 0, 0, .05);
|
|
||||||
pointer-events: none;
|
|
||||||
.scale(0);
|
|
||||||
}
|
|
||||||
.inner-ripple-animated {
|
|
||||||
.animation(ripple 0.35s ease-in);
|
|
||||||
}
|
|
||||||
@@ -1,113 +1,91 @@
|
|||||||
// ====== Aside =======
|
// ====== Aside =======
|
||||||
// ======================
|
// ======================
|
||||||
|
|
||||||
|
aside {
|
||||||
|
.pseudo-col();
|
||||||
|
width: 100%;
|
||||||
|
max-width: 240px;
|
||||||
|
position: static;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
border-right: 1px solid @gray-lighter;
|
||||||
|
|
||||||
|
@media (max-width:@screen-md-min) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-aside {
|
.navbar-aside {
|
||||||
position : relative;
|
position: relative;
|
||||||
overflow : hidden;
|
overflow: hidden;
|
||||||
font-family : @headings-font-family;
|
font-family: @headings-font-family;
|
||||||
font-size : 0.85em;
|
font-size: 0.85em;
|
||||||
line-height : 1.5;
|
line-height: 1.5;
|
||||||
font-weight : @fw_medium;
|
overflow-y: auto;
|
||||||
overflow-y : auto;
|
|
||||||
height : 100%;
|
|
||||||
|
|
||||||
&.affix {
|
&.affix {
|
||||||
z-index : 2;
|
z-index: 2;
|
||||||
top : @w-sub-nav-height - 1;
|
top: @w-sub-nav-height - 1;
|
||||||
position : fixed;
|
position: fixed;
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
|
|
||||||
@media (max-width:@screen-md-min) {
|
@media (max-width:@screen-md-min) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> ul.list-group {
|
> ul.list-group {
|
||||||
margin : 0;
|
margin: 0;
|
||||||
z-index : 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> h3 {
|
> h3 {
|
||||||
margin : 0;
|
margin: 0;
|
||||||
padding : 15px 0 10px;
|
padding: 15px 0 10px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight : @fw_semibold;
|
font-weight: @fw_semibold;
|
||||||
font-size : 16px;
|
font-size: 16px;
|
||||||
color : @text-color;
|
color: @text-color;
|
||||||
overflow-x : hidden;
|
overflow-x: hidden;
|
||||||
position : relative;
|
position: relative;
|
||||||
z-index : 1;
|
z-index: 1;
|
||||||
.box-shadow(0 10px 9px -10px #d2d2d2);
|
.box-shadow(0 10px 9px -10px #d2d2d2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo_box {
|
|
||||||
width : 100%;
|
|
||||||
background : rgb(253, 253, 253);
|
|
||||||
position : relative;
|
|
||||||
display : block;
|
|
||||||
padding : 15px 30px 10px;
|
|
||||||
border-bottom: 1px solid fadeout(@text-color, 90%);
|
|
||||||
text-align : center;
|
|
||||||
.box-shadow(inset 0px 0 40px rgba(114, 122, 142, .1));
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
float : left;
|
|
||||||
width : 90%;
|
|
||||||
margin : auto auto 10px 5%;
|
|
||||||
height : 50px;
|
|
||||||
background-image : url('img/odoo_logo_rgb.png');
|
|
||||||
background-repeat : no-repeat;
|
|
||||||
background-position: center center;
|
|
||||||
background-size : contain;
|
|
||||||
text-decoration : none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.gith-container {
|
.gith-container {
|
||||||
margin : 0;
|
margin: 0;
|
||||||
z-index : 1;
|
z-index: 1;
|
||||||
position : relative;
|
position: relative;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
.gith-link {
|
.gith-link {
|
||||||
font-weight : 600;
|
color: @text-color;
|
||||||
color : @text-color;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
position : relative;
|
position: relative;
|
||||||
margin : 10px 0;
|
margin: 10px 0;
|
||||||
.transition(color .2s);
|
font-family: @font-family-base;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color : @headings-color;
|
color: @headings-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
.size(20px;20px);
|
.square(1em);
|
||||||
.opacity(.5);
|
content: '';
|
||||||
content : '';
|
position: relative;
|
||||||
position : relative;
|
|
||||||
background-image: url('img/github-square_32.png');
|
background-image: url('img/github-square_32.png');
|
||||||
background-size : 100%;
|
background-size: 100%;
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
vertical-align : middle;
|
vertical-align: middle;
|
||||||
.translate(0;-1px);
|
.translate(0;-1px);
|
||||||
.transition(opacity .2s);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
|
||||||
&:before {
|
|
||||||
.opacity(1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//-- All menu levels
|
//-- All menu levels
|
||||||
ul {
|
ul {
|
||||||
padding : 0;
|
padding: 0;
|
||||||
position : relative;
|
position: relative;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
@@ -120,37 +98,64 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
overflow : hidden;
|
overflow: hidden;
|
||||||
border-radius: 2px 0 0 0;
|
border-radius: 2px 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 5px 15px;
|
padding: 5px 15px;
|
||||||
color : @text-color;
|
color: @text-color;
|
||||||
|
line-height: 1.2;
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:focus, &:hover {
|
||||||
color: @headings-color;
|
color: @headings-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.parent > a:after{
|
||||||
|
content: '\e7c1';
|
||||||
|
font-family: 'Material-Design-Icons';
|
||||||
|
opacity: 0.8;
|
||||||
|
margin-top: -6px;
|
||||||
|
.o-position-absolute(50%, 10px);
|
||||||
|
.rotate(90deg);
|
||||||
|
.transition(transform 0.2s);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.parent.active > a:after{
|
||||||
|
.rotate(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//-- Inner menu list
|
//-- Inner menu list
|
||||||
ul {
|
ul {
|
||||||
max-height : 0;
|
max-height: 0;
|
||||||
background-color: @gray-lighter;
|
background-color: fade(@gray-light, 20%);
|
||||||
padding-left : 15px;
|
padding: 0px;
|
||||||
overflow : hidden;
|
overflow: hidden;
|
||||||
|
margin-left: 0;
|
||||||
|
box-shadow: inset 0 3px 5px -2px @gray-light;
|
||||||
.transition(max-height 0.3s @o-ease);
|
.transition(max-height 0.3s @o-ease);
|
||||||
|
|
||||||
|
> li:not(:last-child) {
|
||||||
|
box-shadow: 0 1px 0 fade(black, 4%);
|
||||||
|
|
||||||
|
&.active > ul > li:not(:first-child) {
|
||||||
|
border-top: 1px solid @gray-lighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//-- Active lis
|
//-- Active lis
|
||||||
li.active {
|
li.active {
|
||||||
&, &:hover, &:focus {
|
&, &:focus, &:hover {
|
||||||
border-color: @gray-lighter;
|
border-color: @gray-lighter;
|
||||||
background : transparent;
|
background: transparent;
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
|
font-weight: bold;
|
||||||
color: @headings-color;
|
color: @headings-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -162,32 +167,44 @@
|
|||||||
|
|
||||||
// First menu level
|
// First menu level
|
||||||
> ul > li {
|
> ul > li {
|
||||||
border-bottom: 1px solid @gray-lighter;
|
background: white;
|
||||||
background : white;
|
border-bottom: 1px solid fade(black, 8%);
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
|
border-left: 3px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:focus, &:hover {
|
||||||
> a {
|
> a {
|
||||||
box-shadow : inset 5px 0 0 -3px @gray-light;
|
border-left: 3px solid @gray-light;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active, &.active:hover, &.active:focus{
|
&.active, &.active:focus, &.active:hover {
|
||||||
> a {
|
> a {
|
||||||
box-shadow : inset 5px 0 0 -3px @brand-primary;
|
border-left: 3px solid @brand-primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.parent {
|
&.active.parent + li {
|
||||||
> a:after {
|
box-shadow: 0 -3px 5px -4px fade(@gray-darker, 40%);
|
||||||
content : '\e7c1';
|
}
|
||||||
font-family: 'Material-Design-Icons';
|
|
||||||
opacity : 0.5;
|
> ul > li {
|
||||||
.o-position-absolute(auto, 10px);
|
> a {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul > li {
|
||||||
|
> a {
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul > li > a {
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -195,25 +212,23 @@
|
|||||||
|
|
||||||
.floating_action_container {
|
.floating_action_container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right : 8px;
|
right: 8px;
|
||||||
bottom : 8px;
|
bottom: 8px;
|
||||||
width : auto;
|
width: auto;
|
||||||
z-index : @zIndex--float_action;
|
z-index: @zIndex--float_action;
|
||||||
|
|
||||||
@media (min-width:@screen-md-min) {
|
@media (min-width:@screen-md-min) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#floating_action {
|
#floating_action {
|
||||||
width : 56px;
|
.square(56px);
|
||||||
height : 56px;
|
display: inline-block;
|
||||||
display : inline-block;
|
z-index: 0;
|
||||||
z-index : 0;
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-radius : 50%;
|
border-radius: 50%;
|
||||||
padding : 16px;
|
padding: 16px;
|
||||||
box-shadow : 0 8px 17px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
|
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
|
||||||
background-color: @brand-primary;
|
background-color: @brand-primary;
|
||||||
.transition(transform 500ms @o-ease);
|
.transition(transform 500ms @o-ease);
|
||||||
|
|
||||||
@@ -222,55 +237,52 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
.transform(~"translateZ(0px) rotateZ(-180deg)");
|
.transform(~ "translateZ(0px) rotateZ(-180deg)");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#floating_action_menu {
|
#floating_action_menu {
|
||||||
position : absolute;
|
.o-position-absolute(auto,0,0);
|
||||||
z-index : 1;
|
z-index: 1;
|
||||||
overflow : hidden;
|
overflow: hidden;
|
||||||
right : 0;
|
width: 380px;
|
||||||
width : 380px;
|
padding: 0;
|
||||||
bottom : 0;
|
display: block;
|
||||||
padding : 0;
|
|
||||||
display : block;
|
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
visibility : hidden;
|
visibility: hidden;
|
||||||
.transition(all 0.5s);
|
.transition(all 0.5s);
|
||||||
.box-shadow(0 0 0 transparent);
|
.box-shadow(0 0 0 transparent);
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
.opacity(0);
|
opacity:0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
border : none;
|
border: none;
|
||||||
border-top: 1px solid #DDD;
|
border-top: 1px solid #DDD;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
cursor : pointer;
|
cursor: pointer;
|
||||||
color : @headings-color;
|
color: @headings-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
float : left;
|
float: left;
|
||||||
width : 100%;
|
width: 100%;
|
||||||
padding : 5px 10px;
|
padding: 5px 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bubble {
|
.bubble {
|
||||||
position : absolute;
|
.o-position-absolute(auto,28px,28px);
|
||||||
.size(1px; 1px);
|
.square(1px);
|
||||||
background : @brand-primary;
|
background: @brand-primary;
|
||||||
content : '';
|
content: '';
|
||||||
bottom : 28px;
|
color: #fff;
|
||||||
right : 28px;
|
|
||||||
color : #fff;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
.transition(all 300ms @o-ease);
|
.transition(all 300ms @o-ease);
|
||||||
}
|
}
|
||||||
@@ -281,17 +293,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
display : block;
|
display: block;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
.transition(all 500ms @o-ease);
|
.transition(all 500ms @o-ease);
|
||||||
|
|
||||||
.bubble, &:before {
|
&:before, .bubble {
|
||||||
.size(1000px; 2000px);
|
.size(1000px; 2000px);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
.opacity(0);
|
opacity: 0;
|
||||||
margin-right : -500px;
|
margin-right: -500px;
|
||||||
margin-bottom: -500px;
|
margin-bottom: -500px;
|
||||||
display : block;
|
display: block;
|
||||||
.transition(all .4s @o-ease);
|
.transition(all .4s @o-ease);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -301,9 +313,27 @@
|
|||||||
|
|
||||||
.content {
|
.content {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index : 1;
|
z-index: 1;
|
||||||
.opacity(1);
|
.opacity(1);
|
||||||
.transition(all 500ms @ease-material-3);
|
.transition(all 500ms @ease-material-3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#mask {
|
||||||
|
.opacity(0);
|
||||||
|
position: fixed;
|
||||||
|
z-index: @zIndex--mask;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
.size(100%; 0);
|
||||||
|
background-color: fade(black, 20%);
|
||||||
|
.transition(opacity .3s);
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.opacity(1);
|
||||||
|
display: block;
|
||||||
|
.square(100%);
|
||||||
|
.transition(opacity .3s);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,515 @@
|
|||||||
|
// ================================================
|
||||||
|
// ================ Components ====================
|
||||||
|
// ================================================
|
||||||
|
|
||||||
|
// Ripple buttons
|
||||||
|
// ----------------------------------------
|
||||||
|
@-webkit-keyframes ripple {
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale(2.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ripple {
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
.scale(2.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ripple {
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
.inner-ripple {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: -1;
|
||||||
|
background: rgba(0, 0, 0, .05);
|
||||||
|
pointer-events: none;
|
||||||
|
.scale(0);
|
||||||
|
|
||||||
|
&.inner-ripple-animated {
|
||||||
|
.animation(ripple 0.35s ease-in);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Code Fields
|
||||||
|
// ----------------------------------------
|
||||||
|
article.doc-body .code-fields {
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
border: 2px solid @gray-lighter;
|
||||||
|
|
||||||
|
.code-field {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-field-body {
|
||||||
|
display: block;
|
||||||
|
padding-left: 15px;
|
||||||
|
@media screen and (min-width: @screen-md-min) {
|
||||||
|
display: table-cell;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-field-name {
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
font-weight: @fw_semibold;
|
||||||
|
color: @headings-color;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: ":";
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: @screen-md-min) {
|
||||||
|
text-align: right;
|
||||||
|
width: 20%;
|
||||||
|
padding-right: 10px;
|
||||||
|
display: table-cell;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0.2em 0;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
padding-left: 0px;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: @headings-color;
|
||||||
|
font-family: @font-family-monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
color: @headings-color;
|
||||||
|
font-family: @font-family-monospace;
|
||||||
|
font-weight: @fw_semibold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Cards
|
||||||
|
// ----------------------------------------
|
||||||
|
.card-img {
|
||||||
|
.o-gradient();
|
||||||
|
.o-position-absolute(0, 0);
|
||||||
|
.translate3d(0;0;0);
|
||||||
|
.square(100%);
|
||||||
|
display: block;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.top {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 2%;
|
||||||
|
.transform-origin(50% 0px 0px);
|
||||||
|
|
||||||
|
@media screen and (min-width: @screen-sm-min) {
|
||||||
|
padding: 12% 0 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: @screen-md-min) {
|
||||||
|
padding: 10% 0 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: @screen-lg-min) {
|
||||||
|
padding: 8% 0 4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.stacked {
|
||||||
|
background: transparent;
|
||||||
|
.transition(background 1s);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
background-image: url("img/banner_bg.png");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: 50%;
|
||||||
|
.o-position-absolute(0, 0);
|
||||||
|
.square(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img {
|
||||||
|
background-image: url("img/banner_bg.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
font-size: 32px;
|
||||||
|
@media screen and (min-width: @screen-sm-min) {
|
||||||
|
&:not(.o_long_title) {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.o_short_title {
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: @fw_light;
|
||||||
|
font-size: 1em;
|
||||||
|
color: white;
|
||||||
|
line-height: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.top.has_banner {
|
||||||
|
background: @footer-bg-color;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img {
|
||||||
|
opacity: 0.35;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Alerts
|
||||||
|
// ----------------------------------------
|
||||||
|
main .alert {
|
||||||
|
padding: 8px 15px;
|
||||||
|
border-radius: 0;
|
||||||
|
margin: 5px auto 15px;
|
||||||
|
border-width: 0 0 0 3px;
|
||||||
|
// 'INFO' is the default style
|
||||||
|
border-color: @brand-info;
|
||||||
|
background-color: lighten(@brand-info, 45%);
|
||||||
|
|
||||||
|
&, p {
|
||||||
|
line-height: 1.3;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
margin: 0.5em 0;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3.alert-title {
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1em;
|
||||||
|
margin: 0 0 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: @font-family-base;
|
||||||
|
color: darken(@brand-info, 5%);
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
.mdi-icon( "\e639");
|
||||||
|
.translate(0, 0.1em);
|
||||||
|
margin-right: 0.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alert-info {
|
||||||
|
> h3.alert-title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alert-go_to {
|
||||||
|
border-color: @o-violet-dark;
|
||||||
|
background-color: lighten(@o-violet-dark, 52%);
|
||||||
|
color: darken(@o-violet-dark, 5%);
|
||||||
|
|
||||||
|
> h3.alert-title {
|
||||||
|
color: darken(@o-violet-dark, 15%);
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "\e70d";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alert-success {
|
||||||
|
border-color: lighten(@brand-success, 30%);
|
||||||
|
background-color: lighten(@brand-success, 45%);
|
||||||
|
|
||||||
|
> h3.alert-title {
|
||||||
|
color: darken(@brand-success, 10%);
|
||||||
|
&:before {
|
||||||
|
content: "\e625";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alert-warning, &.warning {
|
||||||
|
border-color: lighten(@brand-warning, 30%);
|
||||||
|
background-color: lighten(@brand-warning, 35%);
|
||||||
|
|
||||||
|
> h3.alert-title {
|
||||||
|
color: @brand-warning;
|
||||||
|
&:before {
|
||||||
|
content: "\e6a4";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alert-danger {
|
||||||
|
border-color: lighten(@brand-danger, 30%);
|
||||||
|
background-color: lighten(@brand-danger, 40%);
|
||||||
|
|
||||||
|
> h3.alert-title {
|
||||||
|
color: darken(@brand-danger, 10%);
|
||||||
|
&:before {
|
||||||
|
content: "\e6a4";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alert-exercise {
|
||||||
|
border-color: lighten(@doc_exercise, 30%);
|
||||||
|
background-color: lighten(@doc_exercise, 40%);
|
||||||
|
color: darken(@doc_exercise, 35%);
|
||||||
|
|
||||||
|
> h3.alert-title {
|
||||||
|
color: @doc_exercise;
|
||||||
|
}
|
||||||
|
|
||||||
|
> h3.alert-title:before {
|
||||||
|
.translate(0;0);
|
||||||
|
top: 28px;
|
||||||
|
content: "\e709";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.doc-content {
|
||||||
|
@media (min-width: @screen-lg-min) {
|
||||||
|
max-width: 55%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Elements
|
||||||
|
// ----------------------------------------
|
||||||
|
hr.divider {
|
||||||
|
border-color: fadeout(@gray-lightest, 60%);
|
||||||
|
position: absolute;
|
||||||
|
width: 900%;
|
||||||
|
margin-left: -13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.img-responsive {
|
||||||
|
box-shadow: 0 3px 15px @gray-lighter;
|
||||||
|
border: 1px solid @gray-lighter;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.figure {
|
||||||
|
h4 {
|
||||||
|
margin: 0.5em 0 1.5em;
|
||||||
|
padding-left: 1em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pq-patch {
|
||||||
|
em {
|
||||||
|
display: block;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
background: @gray-lighter;
|
||||||
|
padding-left: 10px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-weight: @fw_semibold;
|
||||||
|
|
||||||
|
+ .pq-section .highlight {
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span.menuselection {
|
||||||
|
font-weight: @fw_medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
font-family: @font-family-serif;
|
||||||
|
font-weight: @fw_semibold;
|
||||||
|
font-style: italic;
|
||||||
|
|
||||||
|
footer {
|
||||||
|
font-family: @font-family-base;
|
||||||
|
background: transparent;
|
||||||
|
text-align: left;
|
||||||
|
color: @text-color;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
cite {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width:@screen-md-min) {
|
||||||
|
border-left: 3px solid fade(@brand-primary, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.code, code {
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-weight: @fw_semibold;
|
||||||
|
color: darken(@brand-primary, 30%);
|
||||||
|
background-color: lighten(@brand-primary, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table, table {
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-attribute, .code-class, .code-classmethod, .code-data, .code-function, .code-method, .code-staticmethod {
|
||||||
|
// indents *all* content
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
// except for item title which gets dedented back
|
||||||
|
> h6 {
|
||||||
|
margin-left: -20px;
|
||||||
|
margin-bottom: 0.3em;
|
||||||
|
|
||||||
|
.viewcode-link {
|
||||||
|
display: none;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .viewcode-link {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
article.doc-body {
|
||||||
|
&.index-category {
|
||||||
|
min-height: 300px;
|
||||||
|
min-height: 30vh;
|
||||||
|
|
||||||
|
li.toctree-l1 {
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
article.doc-body .content-switcher {
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
.transition(all .2s ease);
|
||||||
|
|
||||||
|
> li {
|
||||||
|
font-weight: @fw_semibold;
|
||||||
|
color: @gray-light;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
margin: 0 20px 0 0;
|
||||||
|
padding-left: 0;
|
||||||
|
font-size: 1.3em;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
list-style: none;
|
||||||
|
.transition(all .2s);
|
||||||
|
opacity: 0.6;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-bottom: 1px solid @brand-primary;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover > ul > li {
|
||||||
|
.opacity(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .tabs > * {
|
||||||
|
display: none;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .tabs > .active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
background: @doc_code-bg;
|
||||||
|
color: @gray-light;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
margin-bottom: (@line-height-computed / 2);
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-size: 0.8em;
|
||||||
|
color: @gray-light;
|
||||||
|
background: @doc_code-bg;
|
||||||
|
font-family: @font-family-monospace;
|
||||||
|
font-weight: @fw_semibold;
|
||||||
|
position: relative;
|
||||||
|
border: none;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
margin: 0 0 (@line-height-computed / 2);
|
||||||
|
}
|
||||||
@@ -2,6 +2,15 @@
|
|||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
|
|
||||||
|
// -- Initialize fallbacks for requestAnimationFrame
|
||||||
|
window.requestAnimationFrame = window.requestAnimationFrame
|
||||||
|
|| window.webkitRequestAnimationFrame
|
||||||
|
|| window.mozRequestAnimationFrame
|
||||||
|
|| window.msRequestAnimationFrame
|
||||||
|
|| window.oRequestAnimationFrame
|
||||||
|
|| function (callback) { setTimeout(callback, 10); };
|
||||||
|
|
||||||
|
|
||||||
// ======= Define variables =======
|
// ======= Define variables =======
|
||||||
// =================================
|
// =================================
|
||||||
// -- Screen resolutions
|
// -- Screen resolutions
|
||||||
@@ -12,14 +21,33 @@
|
|||||||
win_w = $win.width();
|
win_w = $win.width();
|
||||||
|
|
||||||
// -- Main elements
|
// -- Main elements
|
||||||
var $body = $('body'),
|
var $body = $('body'),
|
||||||
$header = $body.find('> header'),
|
$header = $body.find('> header'),
|
||||||
$sub_nav = $header.find(".o_sub_nav");
|
$sub_nav = $header.find(".o_sub_nav"),
|
||||||
$wrap = $body.find('> #wrap'),
|
$wrap = $body.find('> #wrap'),
|
||||||
$card_top = $wrap.find('> .card.top'),
|
$main = $wrap.find('main'),
|
||||||
$card_top_t = $card_top.find('> .container'),
|
$footer = $body.find('> footer');
|
||||||
$main = $wrap.find('main'),
|
|
||||||
$footer = $body.find('> footer');
|
// -- Detect page type
|
||||||
|
var page_type = (function () {
|
||||||
|
if ($wrap.hasClass('index')) {
|
||||||
|
return 'index';
|
||||||
|
} else if ($main.find('article').hasClass('doc-tocindex-category')){
|
||||||
|
return 'category-index';
|
||||||
|
} else {
|
||||||
|
return 'article';
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
// -- CP > "Card Top"
|
||||||
|
var $cp = $wrap.find('> .card.top'),
|
||||||
|
$cp_image = $cp.find('> .card-img'),
|
||||||
|
$cp_text = $cp.find('> .container'),
|
||||||
|
|
||||||
|
cp_h = $cp.outerHeight(),
|
||||||
|
has_cp_image = $cp_image.length > 0,
|
||||||
|
cp_image_alpha = has_cp_image ? $cp_image.css('opacity') : undefined,
|
||||||
|
cp_end_point = has_cp_image ? cp_h/2 : undefined;
|
||||||
|
|
||||||
// -- Floating action
|
// -- Floating action
|
||||||
var $mask = $body.find('#mask'),
|
var $mask = $body.find('#mask'),
|
||||||
@@ -27,37 +55,34 @@
|
|||||||
$float_menu = $body.find("#floating_action_menu");
|
$float_menu = $body.find("#floating_action_menu");
|
||||||
|
|
||||||
// -- Elements' heights
|
// -- Elements' heights
|
||||||
var body_h = $body.height(),
|
var body_h = $body.height(),
|
||||||
header_h = $header.outerHeight(),
|
header_h = $header.outerHeight(),
|
||||||
sub_nav_h = $sub_nav.height();
|
main_h = $main.height(),
|
||||||
|
sub_nav_h = $sub_nav.height();
|
||||||
|
|
||||||
// -- Aside
|
// -- Aside
|
||||||
var $aside = $main.find('aside'),
|
var $aside = $main.find('aside'),
|
||||||
has_aside = $aside.length > 0,
|
has_aside = $aside.length > 0,
|
||||||
$aside_nav = undefined;
|
$aside_nav = has_aside ? $aside.find('> .navbar-aside') : undefined,
|
||||||
aside_links = undefined;
|
aside_links = has_aside ? $aside_nav.find("li > a") : undefined;
|
||||||
|
|
||||||
|
|
||||||
if (has_aside) {
|
|
||||||
$aside_nav = $aside.find('> .navbar-aside');
|
|
||||||
aside_links = $aside_nav.find("li > a");
|
|
||||||
}
|
|
||||||
|
|
||||||
// ======= Affix =================
|
// ======= Affix =================
|
||||||
// ===============================
|
// ===============================
|
||||||
function set_affix(body_h) {
|
function set_affix() {
|
||||||
var aside_offset = $aside.offset().top - sub_nav_h,
|
var aside_offset_top = $aside.offset().top - sub_nav_h,
|
||||||
aside_width = $aside.width(),
|
aside_offset_bot = parseInt($wrap.css('padding-bottom')),
|
||||||
main_bottom = 40;
|
aside_width = $aside.width();
|
||||||
|
|
||||||
$aside_nav.css('width', aside_width);
|
$aside.css('height', main_h);
|
||||||
$aside_nav.affix({
|
$aside_nav.css('width', aside_width).affix({
|
||||||
target: window,
|
|
||||||
offset: {
|
offset: {
|
||||||
top : aside_offset,
|
top : aside_offset_top,
|
||||||
bottom : main_bottom
|
bottom : aside_offset_bot,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
|
||||||
// ======= Footer animations =====
|
// ======= Footer animations =====
|
||||||
// ===============================
|
// ===============================
|
||||||
@@ -67,22 +92,22 @@
|
|||||||
if (!footer_effect) {
|
if (!footer_effect) {
|
||||||
footer_stop();
|
footer_stop();
|
||||||
return;
|
return;
|
||||||
};
|
}
|
||||||
|
|
||||||
$footer.toggleClass('o_footer_effect', footer_effect);
|
$footer.toggleClass('o_footer_effect', footer_effect);
|
||||||
$body.css('padding-bottom', $footer.outerHeight());
|
$body.css('padding-bottom', $footer.outerHeight());
|
||||||
|
|
||||||
var checkIfSearch = function(e) {
|
var checkIfSearch = function (e) {
|
||||||
if ((e.ctrlKey || e.metaKey) && String.fromCharCode(e.which).toLowerCase() === 'f') {
|
if ((e.ctrlKey || e.metaKey) && String.fromCharCode(e.which).toLowerCase() === 'f') {
|
||||||
footer_stop();
|
footer_stop();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
$win.on('keydown.footer', function(e) {
|
$win.on('keydown.footer', function (e) {
|
||||||
checkIfSearch(e);
|
checkIfSearch(e);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
var footer_stop = function() {
|
var footer_stop = function () {
|
||||||
$footer.removeClass('o_footer_effect');
|
$footer.removeClass('o_footer_effect');
|
||||||
$body.css('padding-bottom', 0);
|
$body.css('padding-bottom', 0);
|
||||||
$win.off('keydown.footer');
|
$win.off('keydown.footer');
|
||||||
@@ -92,24 +117,59 @@
|
|||||||
// ======= Docs Functions ==========
|
// ======= Docs Functions ==========
|
||||||
// =================================
|
// =================================
|
||||||
// -- Layouting
|
// -- Layouting
|
||||||
var layouting = function () {
|
var init = function () {
|
||||||
if ($main.hasClass("index")) {
|
var $floating_container = $body.find("> .floating_action_container");
|
||||||
$main.find("#index .index-tree > .row").each(function() {
|
|
||||||
var childs = $(this).find(".col-md-3");
|
// Adapt Title font size according to its length
|
||||||
if (childs.length == 2) {
|
$cp_text
|
||||||
childs.removeClass("col-md-3").addClass("col-md-6");
|
.toggleClass('o_short_title', $cp_text.text().trim().length < 15)
|
||||||
}
|
.toggleClass('o_long_title', $cp_text.text().trim().length > 45);
|
||||||
if (childs.length == 3) {
|
|
||||||
childs.removeClass("col-md-3").addClass("col-md-4");
|
if (page_type == 'index') {
|
||||||
}
|
var half_cols_selector = '.tutorials,.api';
|
||||||
})
|
|
||||||
$(".floating_action_container").remove();
|
$main.find("#index .index-tree").find(half_cols_selector)
|
||||||
|
.wrap('<div class="o_half_col col-sm-6"/>')
|
||||||
|
.find('.col-md-3').removeClass('col-md-3 col-sm-6').addClass('col-sm-12 col-md-6');
|
||||||
|
|
||||||
|
var half_cols_els = $main.find(".o_half_col");
|
||||||
|
for(var i = 0; i < half_cols_els.length; i+=2) {
|
||||||
|
half_cols_els.slice(i, i+2).wrapAll("<div class='row'></div>");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (has_aside) { $aside_nav.find("li").has("ul").addClass("parent"); };
|
|
||||||
}
|
if (page_type == 'index' || page_type == 'category-index') {
|
||||||
|
$floating_container.add($mask).remove();
|
||||||
|
$main.toggleClass('o_slim_page', page_type == 'category-index');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (page_type == 'article') {
|
||||||
|
attach_permalink_markers();
|
||||||
|
|
||||||
|
// Hide empty-permalink first sections
|
||||||
|
var $f_s = $main.find('article.doc-body > section:first-child');
|
||||||
|
$f_s.toggleClass('hidden', $f_s[0].childElementCount == 1 && $f_s.children().is('i:empty'));
|
||||||
|
|
||||||
|
if (has_aside) {
|
||||||
|
if (aside_links.length < 2) {
|
||||||
|
has_aside = false;
|
||||||
|
$main.addClass("o_aside_removed");
|
||||||
|
$floating_container.add($mask).add($aside).remove();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
floating_menu_layout();
|
||||||
|
set_scroll_to(aside_links);
|
||||||
|
ripple_animation(aside_links);
|
||||||
|
$aside_nav.find("li").has("ul").addClass("parent");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bind_window_events();
|
||||||
|
};
|
||||||
|
|
||||||
// -- Float action menu
|
// -- Float action menu
|
||||||
var floating_menu_layout = function() {
|
var floating_menu_layout = function () {
|
||||||
var lis = $aside_nav.find("> ul > li").clone(true)
|
var lis = $aside_nav.find("> ul > li").clone(true)
|
||||||
.addClass("ripple")
|
.addClass("ripple")
|
||||||
.css({
|
.css({
|
||||||
@@ -117,53 +177,46 @@
|
|||||||
overflow: 'hidden'
|
overflow: 'hidden'
|
||||||
});
|
});
|
||||||
lis.find("ul").remove().end()
|
lis.find("ul").remove().end()
|
||||||
.find("a").removeClass("ripple").on("click", function() {
|
.find("a").removeClass("ripple").on("click", function () {
|
||||||
floating_menu_toggle();
|
_toggle_float();
|
||||||
});
|
});
|
||||||
$float_menu.find(".content").empty().append(lis);
|
$float_menu.find(".content").empty().append(lis);
|
||||||
$float.add($mask).on("click", function () {
|
$float.add($mask).on("click", function () {
|
||||||
floating_menu_toggle();
|
_toggle_float();
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
}
|
|
||||||
var floating_menu_toggle = function() {
|
|
||||||
$float.toggleClass("active");
|
|
||||||
setTimeout(function() {
|
|
||||||
$float_menu.toggleClass("active");
|
|
||||||
$mask.toggleClass("active");
|
|
||||||
}, 300);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// -- Scroll To
|
// -- Scroll To
|
||||||
var scroll_to = function(el_list) {
|
var set_scroll_to = function (el_list) {
|
||||||
var offset = 80;
|
el_list.each(function () {
|
||||||
el_list.each(function() {
|
var $link = $(this),
|
||||||
var $link = $(this),
|
target_id = $link.attr("href");
|
||||||
href = $link.attr("href");
|
|
||||||
|
|
||||||
$link.on("click", function() {
|
$link.on("click", function () {
|
||||||
var val = $(href).offset().top - 60;
|
|
||||||
$('html, body').animate({
|
|
||||||
scrollTop: val
|
|
||||||
}, 400);
|
|
||||||
$aside_nav.find("li").removeClass("active");
|
$aside_nav.find("li").removeClass("active");
|
||||||
$link.parents("li").addClass("active");
|
$link.parents("li").addClass("active");
|
||||||
window.location.hash = $link.prop('hash');
|
_scroll_and_set_hash(target_id);
|
||||||
return false;
|
return false;
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
|
||||||
|
$body.scrollspy({
|
||||||
|
target: 'aside',
|
||||||
|
offset: 200,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// -- Ripple buttons
|
// -- Ripple buttons
|
||||||
var ripple_animation = function(el_list) {
|
var ripple_animation = function (el_list) {
|
||||||
el_list.each(function() {
|
el_list.each(function () {
|
||||||
var btn = $(this);
|
var btn = $(this);
|
||||||
btn
|
btn
|
||||||
.css({
|
.css({
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
overflow: 'hidden'
|
overflow: 'hidden'
|
||||||
})
|
})
|
||||||
.bind('mousedown', function(e) {
|
.bind('mousedown', function (e) {
|
||||||
var ripple;
|
var ripple;
|
||||||
if (btn.find('.inner-ripple').length === 0) {
|
if (btn.find('.inner-ripple').length === 0) {
|
||||||
ripple = $('<span class="inner-ripple"/>');
|
ripple = $('<span class="inner-ripple"/>');
|
||||||
@@ -186,43 +239,17 @@
|
|||||||
top: y + 'px',
|
top: y + 'px',
|
||||||
left: x + 'px'
|
left: x + 'px'
|
||||||
}).addClass('inner-ripple-animated');
|
}).addClass('inner-ripple-animated');
|
||||||
setTimeout(function() {
|
setTimeout(function () {
|
||||||
ripple.removeClass('inner-ripple-animated');
|
ripple.removeClass('inner-ripple-animated');
|
||||||
}, 351);
|
}, 351);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// -- Cards animation
|
|
||||||
var cards_animate = function(type, speed) {
|
|
||||||
type = type || 'in';
|
|
||||||
speed = speed || 2000;
|
|
||||||
var $container = $("main.index"),
|
|
||||||
$cards = $container.find(".card"),
|
|
||||||
$titles = $container.find("h2");
|
|
||||||
|
|
||||||
$cards.each(function() {
|
|
||||||
var $card = $(this),
|
|
||||||
cardOffset = this.getBoundingClientRect(),
|
|
||||||
offset = cardOffset.left * 0.8 + cardOffset.top,
|
|
||||||
delay = parseFloat(offset / speed).toFixed(2);
|
|
||||||
$card.css("transition-delay", delay + "s");
|
|
||||||
});
|
|
||||||
|
|
||||||
if (type === "in") {
|
|
||||||
$titles.fadeTo(0, 0);
|
|
||||||
$titles.fadeTo(1000, 1);
|
|
||||||
$container.addClass("animating");
|
|
||||||
} else {
|
|
||||||
$titles.fadeTo(300, 0);
|
|
||||||
$container.removeClass("animating");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// -- Header buttons
|
// -- Header buttons
|
||||||
var header_buttons = function () {
|
var header_buttons = function () {
|
||||||
var timer;
|
var timer;
|
||||||
$header.on('click', '.o_primary_nav .dropdown-toggle', function(e) {
|
$header.on('click', '.o_primary_nav .dropdown-toggle', function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
var $a = $(this);
|
var $a = $(this);
|
||||||
@@ -233,12 +260,12 @@
|
|||||||
if ($a.closest('.o_primary_nav').children('.open').length > 0) {
|
if ($a.closest('.o_primary_nav').children('.open').length > 0) {
|
||||||
$header.addClass("o_sub_opened");
|
$header.addClass("o_sub_opened");
|
||||||
} else {
|
} else {
|
||||||
timer = setTimeout(function() {
|
timer = setTimeout(function () {
|
||||||
$header.removeClass("o_sub_opened");
|
$header.removeClass("o_sub_opened");
|
||||||
}, 200);
|
}, 200);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$header.on('click', '.o_primary_nav .o_secondary_nav', function(e) {
|
$header.on('click', '.o_primary_nav .o_secondary_nav', function (e) {
|
||||||
if (e.target === e.currentTarget) {
|
if (e.target === e.currentTarget) {
|
||||||
$header.find('.open').removeClass('open');
|
$header.find('.open').removeClass('open');
|
||||||
$header.find('.o_sub_opened').andSelf().removeClass('o_sub_opened');
|
$header.find('.o_sub_opened').andSelf().removeClass('o_sub_opened');
|
||||||
@@ -246,28 +273,53 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// -- Mobile menu opening
|
// -- Mobile menu opening
|
||||||
$header.on('click', '.o_mobile_menu_toggle', function(e) {
|
$header.on('click', '.o_mobile_menu_toggle', function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
$(this).find('i').toggleClass('fa-bars fa-times');
|
$(this).find('i').toggleClass('fa-bars fa-times');
|
||||||
$header.toggleClass('o_mobile_menu_opened');
|
$header.toggleClass('o_mobile_menu_opened');
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
var card_top_animation = function (win_top){
|
// -- Attach permalink markers to sections' title
|
||||||
var scrollFactor = 1.6,
|
var attach_permalink_markers = function () {
|
||||||
bannerHeight = Math.max(450, $card_top.outerHeight(true) - 60),
|
$main.find('article.doc-body > section').each( function () {
|
||||||
top = Math.min(win_top, bannerHeight/scrollFactor),
|
var $section = $(this),
|
||||||
base_value = top * (scrollFactor - 1),
|
$title = $section.find('> h2, > h3, > h4, > h5, > h6'),
|
||||||
opacity = top/bannerHeight * scrollFactor;
|
target_id = $section.attr('id'),
|
||||||
|
$icon = $('<i/>').addClass('mdi-content-link');
|
||||||
|
|
||||||
$card_top.css('transform', 'translateY(' + base_value + 'px)');
|
if ($title.length <= 0) {
|
||||||
$card_top_t.css({
|
return;
|
||||||
'transform' : 'translateY( -' + ( base_value - (top/2)) + 'px)',
|
}
|
||||||
'opacity' : 1 - opacity
|
|
||||||
|
$title.addClass('o_has_permalink_marker').append($icon);
|
||||||
|
|
||||||
|
$icon.on('click', function () {
|
||||||
|
_scroll_and_set_hash("#" + target_id);
|
||||||
|
|
||||||
|
$title.addClass('o_marked').delay(1000).queue(function (){
|
||||||
|
$title.removeClass('o_marked').dequeue();
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
$(".content-switcher").each(function(index, switcher) {
|
var cp_animation = function (win_top, cp_end_point){
|
||||||
|
var top = Math.min(win_top, cp_h);
|
||||||
|
|
||||||
|
$cp_image.css({
|
||||||
|
'opacity' : cp_image_alpha - (top * (cp_image_alpha/cp_end_point)),
|
||||||
|
'transform' : 'scale(' + (1 + (top * (0.1/cp_end_point))) +')'
|
||||||
|
});
|
||||||
|
|
||||||
|
$cp_text.css({
|
||||||
|
'transform' : 'translateY(' + (top/4) + 'px)',
|
||||||
|
'opacity' : 1 - (top/cp_h)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$(".content-switcher").each(function (index, switcher) {
|
||||||
var $switcher = $(switcher),
|
var $switcher = $(switcher),
|
||||||
$links = $switcher.find('> ul > li'),
|
$links = $switcher.find('> ul > li'),
|
||||||
$tabs = $switcher.find('> .tabs > *'),
|
$tabs = $switcher.find('> .tabs > *'),
|
||||||
@@ -278,66 +330,76 @@
|
|||||||
$links.eq(index).add($tabs.eq(index)).addClass('active');
|
$links.eq(index).add($tabs.eq(index)).addClass('active');
|
||||||
}
|
}
|
||||||
select(0);
|
select(0);
|
||||||
$switcher.on('click', '> ul > li', function() {
|
$switcher.on('click', '> ul > li', function () {
|
||||||
select($(this).index());
|
select($(this).index());
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// ======= Utils ==================
|
||||||
|
// =================================
|
||||||
|
var _scroll_and_set_hash = function (target_id) {
|
||||||
|
$('html, body').animate({
|
||||||
|
scrollTop: $(target_id).offset().top - 60
|
||||||
|
}, 100);
|
||||||
|
window.location.hash = target_id;
|
||||||
|
};
|
||||||
|
|
||||||
|
var _toggle_float = function () {
|
||||||
|
$float.toggleClass("active");
|
||||||
|
setTimeout(function () {
|
||||||
|
$float_menu.toggleClass("active");
|
||||||
|
$mask.toggleClass("active");
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var bind_window_events = function () {
|
||||||
|
// ======= On resize ==============
|
||||||
|
// Update properties and conditionally call functions according to resolution
|
||||||
|
$win.on('resize', function () {
|
||||||
|
// Update size variables
|
||||||
|
win_w = $win.width();
|
||||||
|
body_h = $body.height();
|
||||||
|
cp_h = $cp.outerHeight();
|
||||||
|
main_h = $main.height();
|
||||||
|
cp_end_point = has_cp_image ? cp_h/2 : undefined;
|
||||||
|
|
||||||
|
if (win_w >= screen_md){
|
||||||
|
footer_animation();
|
||||||
|
(has_aside)? set_affix(): '';
|
||||||
|
} else {
|
||||||
|
footer_stop();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ======= On scroll ==============
|
||||||
|
$win.on('scroll', function () {
|
||||||
|
var win_top = $win.scrollTop();
|
||||||
|
|
||||||
|
$win[0].requestAnimationFrame(function () {
|
||||||
|
cp_animation(win_top, cp_end_point);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (win_w >= screen_md) {
|
||||||
|
$header.toggleClass('o_scrolled', win_top > header_h);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
// ======= Onload ==================
|
// ======= Onload ==================
|
||||||
// =================================
|
// =================================
|
||||||
// -- Call default functions
|
// -- Call default functions
|
||||||
layouting();
|
init();
|
||||||
cards_animate();
|
|
||||||
header_buttons();
|
header_buttons();
|
||||||
ripple_animation($(".ripple"));
|
ripple_animation($(".ripple"));
|
||||||
|
|
||||||
if (has_aside) {
|
|
||||||
floating_menu_layout();
|
|
||||||
scroll_to(aside_links);
|
|
||||||
ripple_animation(aside_links);
|
|
||||||
}
|
|
||||||
|
|
||||||
// -- Conditionally call specific functions according to resolution
|
// -- Conditionally call specific functions according to resolution
|
||||||
if (win_w >= screen_md){
|
if (win_w >= screen_md){
|
||||||
footer_animation();
|
footer_animation();
|
||||||
|
(has_aside)? set_affix(): '';
|
||||||
if (has_aside) {
|
}
|
||||||
$win.load(function (){
|
|
||||||
// wait until page load before affix
|
|
||||||
body_h = $body.height();
|
|
||||||
set_affix(body_h);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// ======= On resize ==============
|
|
||||||
// ================================
|
|
||||||
// Update properties and conditionally call functions according to resolution
|
|
||||||
$win.on('resize', function () {
|
|
||||||
win_w = $win.width();
|
|
||||||
body_h = $body.height();
|
|
||||||
|
|
||||||
if (win_w >= screen_md){
|
|
||||||
footer_animation();
|
|
||||||
if (has_aside) { set_affix(body_h); };
|
|
||||||
} else {
|
|
||||||
footer_stop();
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// ======= On scroll ==============
|
|
||||||
// ================================
|
|
||||||
$win.on('scroll', function () {
|
|
||||||
if (win_w >= screen_md) {
|
|
||||||
var win_top = $win.scrollTop();
|
|
||||||
header_h = $header.outerHeight();
|
|
||||||
|
|
||||||
$header.toggleClass('o_scrolled', win_top > header_h);
|
|
||||||
card_top_animation(win_top);
|
|
||||||
} else {
|
|
||||||
$card_top.css('transform', '');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|||||||
@@ -53,7 +53,7 @@
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
background-color: fade(white, 60%);
|
background-color: fade(white, 60%);
|
||||||
color: @header-link-normal;
|
color: @header-link-normal;
|
||||||
font-family: @headings-font-family;
|
font-family: "Work Sans", sans-serif;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
.transition(all .2s ease);
|
.transition(all .2s ease);
|
||||||
.transition-property(~'background, box-shadow' );
|
.transition-property(~'background, box-shadow' );
|
||||||
|
|||||||
@@ -0,0 +1,114 @@
|
|||||||
|
// ================================================
|
||||||
|
// ======= Index pages (covers and toctree) =======
|
||||||
|
// ================================================
|
||||||
|
|
||||||
|
#wrap.index {
|
||||||
|
@media screen and (min-width: @screen-md-min) {
|
||||||
|
> .card.top {
|
||||||
|
padding: 10% 0 2%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> main.index {
|
||||||
|
margin: 10px auto;
|
||||||
|
|
||||||
|
.o_content {
|
||||||
|
box-shadow: none;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main.index {
|
||||||
|
.toc-section h2 {
|
||||||
|
// section title
|
||||||
|
padding: 0 0 4px;
|
||||||
|
border-bottom: 1px solid @gray-lighter;
|
||||||
|
margin: 1.4em 0 0.8em;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: @font-family-base;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
color: @text-muted;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border-radius: 4px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: @card_margin-bottom;
|
||||||
|
padding-top: 56%;
|
||||||
|
background-color: @doc_paper;
|
||||||
|
.deep-1;
|
||||||
|
|
||||||
|
.card-img {
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: 50%;
|
||||||
|
.square(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
color: @text-color;
|
||||||
|
box-shadow: inset 0 1px 0 @gray-lighter;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.2;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: white;
|
||||||
|
padding: 8px 12px 6px;
|
||||||
|
.o-position-absolute(0, -1px, auto, -1px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-single-entry .card figcaption {
|
||||||
|
@media screen and(min-width: @screen-md) {
|
||||||
|
font-size: 1.5em;
|
||||||
|
padding: 20px 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toctree-wrapper > ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
&.toctree-l1, &.toctree-l3 {
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toctree-l1 {
|
||||||
|
margin: 0 0 15px;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toctree-l2 {
|
||||||
|
> span {
|
||||||
|
font-weight: @fw_medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
margin: 0 0 15px;
|
||||||
|
|
||||||
|
&:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,210 +1,164 @@
|
|||||||
.pseudo-col(){
|
// ================================================
|
||||||
position: relative;
|
// ================ Layout =======================
|
||||||
min-height: 1px;
|
// ================================================
|
||||||
padding-right: 15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
float: left;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-col(){
|
|
||||||
content: "";
|
|
||||||
background: @doc_code-bg;
|
|
||||||
.box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3));
|
|
||||||
position: absolute;
|
|
||||||
width: 43%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
// Bootrstrap adaptations
|
||||||
|
// ------------------------------------------------------------------
|
||||||
body, header {
|
body, header {
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Index layout
|
|
||||||
#wrap {
|
|
||||||
> .container.index {
|
|
||||||
background-color: @gray-lightest;
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
> .index {
|
|
||||||
.container;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#main_title {
|
|
||||||
margin: 10px;
|
|
||||||
@media (min-width:@screen-md-min) {
|
|
||||||
margin: 0 0 9px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.container .container {
|
.container .container {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding:0;
|
padding: 0;
|
||||||
margin:0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
article.doc-content *[class^="col-"] {
|
.img-responsive {
|
||||||
padding:0;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
main{
|
.img-responsive.center-block {
|
||||||
|
display: block;
|
||||||
aside, article.doc-body, .doc-content, .doc-aside {
|
|
||||||
.pseudo-col();
|
|
||||||
}
|
|
||||||
.doc-content, .doc-aside {
|
|
||||||
position:relative;
|
|
||||||
}
|
|
||||||
aside {
|
|
||||||
width: 25%;
|
|
||||||
max-width: 300px;
|
|
||||||
position:static;
|
|
||||||
padding:0;
|
|
||||||
display:block;
|
|
||||||
float:left;
|
|
||||||
@media (max-width:@screen-md-min) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
article.doc-body {
|
|
||||||
background: @doc_paper;
|
|
||||||
border-left: 1px solid @gray-lighter;
|
|
||||||
padding: 15px 30px;
|
|
||||||
@media (min-width: @screen-md-min) {
|
|
||||||
width: 75%;
|
|
||||||
&.doc-toc {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> *{
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main.has_code_col{
|
article.doc-content *[class*="col-"] {
|
||||||
.container;
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
aside {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
article.doc-body {
|
// Main Components
|
||||||
width: 100%;
|
// ------------------------------------------------------------------
|
||||||
|
#wrap {
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
background: @gray-lightest;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
> *{
|
main {
|
||||||
max-width: 100%;
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
.o_content {
|
||||||
|
background-color: @doc_paper;
|
||||||
|
.deep-1;
|
||||||
|
|
||||||
|
@media (min-width: @screen-sm-min) {
|
||||||
|
margin: -40px auto 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
> section {
|
|
||||||
position: relative;
|
article.doc-body {
|
||||||
display:block;
|
.pseudo-col();
|
||||||
float: left;
|
padding: 15px;
|
||||||
width: 100%;
|
|
||||||
|
@media (min-width: @screen-sm-min) {
|
||||||
|
padding: 15px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: @screen-md-min) {
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: @screen-lg-min) {
|
||||||
|
margin-left: 7%;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main.o_aside_removed, main.o_slim_page {
|
||||||
|
max-width: 700px;
|
||||||
|
|
||||||
@media (min-width: @screen-lg-min) {
|
@media (min-width: @screen-lg-min) {
|
||||||
width: 100%;
|
max-width: 760px;
|
||||||
padding-right: 0;
|
}
|
||||||
&:before {
|
|
||||||
.code-col();
|
article.doc-body {
|
||||||
}
|
@media (min-width: @screen-md-min) {
|
||||||
> section {
|
padding-left: 30px;
|
||||||
> * {
|
}
|
||||||
width: 54.633333%;
|
|
||||||
max-width: 600px;
|
|
||||||
float: left;
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
> h1, > h2, > h3, > h4, > h5, > h6 {
|
|
||||||
width: 100%;
|
|
||||||
float: none;
|
|
||||||
clear: none;
|
|
||||||
}
|
|
||||||
.doc-aside {
|
|
||||||
width: 41%;
|
|
||||||
float: none;
|
|
||||||
clear: none;
|
|
||||||
margin-right: 15px;
|
|
||||||
margin-left: 57%;
|
|
||||||
|
|
||||||
.content-switcher{
|
|
||||||
margin-top:0;
|
|
||||||
> ul {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
> ul > li {
|
|
||||||
color: @gray-light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main.index .toctree-wrapper {
|
main.has_code_col {
|
||||||
display: flex;
|
max-width: 700px;
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
> .row {
|
@media (min-width: @screen-lg-min) {
|
||||||
flex: 1 0 100%;
|
max-width: @container-lg;
|
||||||
}
|
|
||||||
@media screen and(min-width: @screen-md){
|
|
||||||
// display these 2 as 2x2 squares
|
|
||||||
> .row.tutorials, .row.api {
|
|
||||||
flex: 0 0 50%;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
> div {
|
|
||||||
flex: 0 0 50%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: reimplement a single big box (.toc-single-entry)
|
.doc-aside, .doc-content {
|
||||||
}
|
.pseudo-col();
|
||||||
|
|
||||||
|
@media (max-width: @screen-md-max) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
article.doc-body {
|
||||||
|
> section {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: @screen-lg-min) {
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
margin:0;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
.code-col();
|
||||||
|
}
|
||||||
|
|
||||||
|
> section {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
width: 48%;
|
||||||
|
float: left;
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
> h2, > h3, > h4, > h5, > h6, > h1 {
|
||||||
|
width: 48%;
|
||||||
|
float: none;
|
||||||
|
clear: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-aside {
|
||||||
|
width: 49%;
|
||||||
|
float: none;
|
||||||
|
clear: none;
|
||||||
|
margin-left: 51%;
|
||||||
|
color: @gray-light;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.45;
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
article.doc-toc .toctree-wrapper > ul > li > span {
|
article.doc-toc .toctree-wrapper > ul > li > span {
|
||||||
display: block;
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-fields{
|
|
||||||
display: table;
|
|
||||||
width: 100%;
|
|
||||||
.code-field{
|
|
||||||
display: table-row;
|
|
||||||
}
|
|
||||||
.code-field-body{
|
|
||||||
display: block;
|
display: block;
|
||||||
padding-left: 15px;
|
font-size: 28px;
|
||||||
@media screen and (min-width: @screen-md-min){
|
|
||||||
display: table-cell;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.code-field-name{
|
|
||||||
width:auto;
|
|
||||||
display:block;
|
|
||||||
@media screen and (min-width: @screen-md-min){
|
|
||||||
width:20%;
|
|
||||||
padding-right: 20px;
|
|
||||||
display: table-cell;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
margin: .2em 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,6 +2,25 @@
|
|||||||
// ================ Mixins =======================
|
// ================ Mixins =======================
|
||||||
// ================================================
|
// ================================================
|
||||||
|
|
||||||
|
// Code column layout mixins
|
||||||
|
// ------------------------------------------------------------------
|
||||||
|
.pseudo-col() {
|
||||||
|
position: relative;
|
||||||
|
min-height: 1px;
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-col() {
|
||||||
|
content: "";
|
||||||
|
background: @doc_code-bg;
|
||||||
|
.box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3));
|
||||||
|
.o-position-absolute(0,0);
|
||||||
|
.size(50%, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
// Utilities
|
// Utilities
|
||||||
// ------------------------------------------------------------------
|
// ------------------------------------------------------------------
|
||||||
.o-no-select {
|
.o-no-select {
|
||||||
@@ -131,65 +150,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Elevation Shadows
|
// Shadows
|
||||||
// Visual cue indicating the amount of separation between surfaces.
|
// --------------------------------------------------
|
||||||
// An object’s elevation determines the appearance of its shadow.
|
.deep-1() {
|
||||||
// ------------------------------------------------------------------
|
|
||||||
.deep-1-shadow() {
|
|
||||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17);
|
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17);
|
||||||
}
|
}
|
||||||
.deep-2-shadow() {
|
|
||||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
.deep-3-shadow() {
|
|
||||||
box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.1), 0 11px 7px 0 rgba(0, 0, 0, 0.09);
|
|
||||||
}
|
|
||||||
.deep-4-shadow() {
|
|
||||||
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1), 0 14px 12px 0 rgba(0, 0, 0, 0.07);
|
|
||||||
}
|
|
||||||
.deep-5-shadow() {
|
|
||||||
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.1), 0 17px 17px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
.deep-transition() {
|
|
||||||
.o-transition(box-shadow, 0.3s, @o-ease);
|
|
||||||
}
|
|
||||||
|
|
||||||
.deep-1() {
|
|
||||||
.deep-1-shadow();
|
|
||||||
|
|
||||||
&.deep_hover:hover {
|
|
||||||
.deep-transition();
|
|
||||||
.deep-2-shadow();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.deep-2() {
|
|
||||||
.deep-2-shadow();
|
|
||||||
|
|
||||||
&.deep_hover:hover {
|
|
||||||
.deep-transition();
|
|
||||||
.deep-3-shadow();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.deep-3() {
|
|
||||||
.deep-3-shadow();
|
|
||||||
|
|
||||||
&.deep_hover:hover {
|
|
||||||
.deep-transition();
|
|
||||||
.deep-4-shadow();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.deep-4() {
|
|
||||||
.deep-4-shadow();
|
|
||||||
|
|
||||||
&.deep_hover:hover {
|
|
||||||
.deep-transition();
|
|
||||||
.deep-5-shadow();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.deep-5() {
|
|
||||||
.deep-5-shadow();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.transform(@args) {
|
.transform(@args) {
|
||||||
-webkit-transform : @args;
|
-webkit-transform : @args;
|
||||||
@@ -199,7 +164,8 @@
|
|||||||
transform : @args;
|
transform : @args;
|
||||||
}
|
}
|
||||||
|
|
||||||
//-- Material Design Icons
|
// Material Design Icons
|
||||||
|
// --------------------------------------------------
|
||||||
.mdi-icon(@content) {
|
.mdi-icon(@content) {
|
||||||
font-family: 'Material-Design-Icons';
|
font-family: 'Material-Design-Icons';
|
||||||
content: @content;
|
content: @content;
|
||||||
@@ -210,13 +176,8 @@
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
.keyframes(@name; @arguments) {
|
// Documentation Dropdown style
|
||||||
@-moz-keyframes @name { @arguments(); }
|
// --------------------------------------------------
|
||||||
@-webkit-keyframes @name { @arguments(); }
|
|
||||||
@keyframes @name { @arguments(); }
|
|
||||||
}
|
|
||||||
|
|
||||||
//-- Documentation Dropdown style
|
|
||||||
.o-doc-dropdown {
|
.o-doc-dropdown {
|
||||||
> a.dropdown-toggle {
|
> a.dropdown-toggle {
|
||||||
padding: 0 5px 0 10px;
|
padding: 0 5px 0 10px;
|
||||||
@@ -314,35 +275,3 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Shadows
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
.shadow-none {
|
|
||||||
.box-shadow(none);
|
|
||||||
}
|
|
||||||
|
|
||||||
.deep-1 {
|
|
||||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17);
|
|
||||||
}
|
|
||||||
.deep-2 {
|
|
||||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
.deep-3 {
|
|
||||||
box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.1), 0 11px 7px 0 rgba(0, 0, 0, 0.09);
|
|
||||||
}
|
|
||||||
.deep-4 {
|
|
||||||
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1), 0 14px 12px 0 rgba(0, 0, 0, 0.07);
|
|
||||||
}
|
|
||||||
.deep-5 {
|
|
||||||
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.1), 0 17px 17px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
// overwrite bootstrap inline forcing
|
|
||||||
.img-responsive {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.img-responsive.center-block {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -5,10 +5,6 @@
|
|||||||
header, footer{
|
header, footer{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.fadeInUp, .fadeIn{
|
|
||||||
.opacity(1)!important;
|
|
||||||
.animation(none);
|
|
||||||
}
|
|
||||||
|
|
||||||
#main_navbar{
|
#main_navbar{
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
+1116
-1509
File diff suppressed because it is too large
Load Diff
@@ -6,9 +6,10 @@
|
|||||||
@import "variables";
|
@import "variables";
|
||||||
|
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
@import "animations";
|
|
||||||
@import "typography";
|
@import "typography";
|
||||||
|
@import "components";
|
||||||
@import "layout";
|
@import "layout";
|
||||||
|
@import "index";
|
||||||
@import "header";
|
@import "header";
|
||||||
@import "footer";
|
@import "footer";
|
||||||
@import "aside";
|
@import "aside";
|
||||||
@@ -71,7 +72,6 @@
|
|||||||
line-height: @w-sub-nav-height;
|
line-height: @w-sub-nav-height;
|
||||||
letter-spacing: -0.1px;
|
letter-spacing: -0.1px;
|
||||||
word-spacing: -1px;
|
word-spacing: -1px;
|
||||||
font-size: 0.9em;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-width: 80px;
|
max-width: 80px;
|
||||||
@@ -252,570 +252,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#wrap {
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
background: @gray-lightest;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
z-index: 0;
|
|
||||||
position: relative;
|
|
||||||
margin: -10px auto 0;
|
|
||||||
display: block;
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: @doc_paper;
|
|
||||||
.deep-1;
|
|
||||||
|
|
||||||
@media screen and(min-width: @screen-sm) {
|
|
||||||
margin: -40px auto 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
main.index {
|
|
||||||
.box-shadow(none);
|
|
||||||
padding-top: 50px;
|
|
||||||
background:transparent;
|
|
||||||
|
|
||||||
.row > h2 { // section title
|
|
||||||
margin-bottom: 1em;
|
|
||||||
margin-top: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
border-radius: 2px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: @card_margin-bottom;
|
|
||||||
min-height: @card_min-height;
|
|
||||||
background-color: @doc_paper;
|
|
||||||
will-change: transform;
|
|
||||||
.deep-2;
|
|
||||||
.transform(scale3d(0, 0, 0) translate3d(50px, 0, 0));
|
|
||||||
.transition( all .5s @o-ease );
|
|
||||||
|
|
||||||
a, a:hover {
|
|
||||||
color: @text-color;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 2px 2px 0 0;
|
|
||||||
}
|
|
||||||
.card-img{
|
|
||||||
.transition(all .5s @o-ease);
|
|
||||||
overflow:hidden;
|
|
||||||
span {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: 50%;
|
|
||||||
will-change: transform;
|
|
||||||
.square(100%);
|
|
||||||
.transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
|
|
||||||
.transform-origin(50%);
|
|
||||||
.opacity(1);
|
|
||||||
.transition(all .5s @o-ease);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
figcaption {
|
|
||||||
.opacity(1);
|
|
||||||
display: block;
|
|
||||||
font-weight: @fw_regular;
|
|
||||||
font-family: @headings-font-family;
|
|
||||||
color: @headings-color;
|
|
||||||
margin: 0;
|
|
||||||
background-color: white;
|
|
||||||
font-size: 1.2em;
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 12px;
|
|
||||||
.o-position-absolute(0);
|
|
||||||
.transition(all .5s @o-ease );
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .card-img span{
|
|
||||||
.transform(scale3d(1.02, 1.02, 1.02) translate3d(0, 0, 0));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.animating .card {
|
|
||||||
.transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img {
|
|
||||||
.o-gradient();
|
|
||||||
.o-position-absolute(0, 0);
|
|
||||||
.translate3d(0;0;0);
|
|
||||||
.square(100%);
|
|
||||||
display: block;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card.top {
|
|
||||||
padding: 10% 0 8%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0;
|
|
||||||
.o-gradient();
|
|
||||||
.animation(fadeIn 1s);
|
|
||||||
.box-shadow(none);
|
|
||||||
.transform-origin(50% 0px 0px);
|
|
||||||
|
|
||||||
@media screen and (min-width: @screen-sm-min) and (max-width: (@screen-md-min - 1)) {
|
|
||||||
padding-top: 12%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#wrap.index & {
|
|
||||||
padding: 0 0 4%;
|
|
||||||
|
|
||||||
@media screen and (min-width: @screen-sm-min) {
|
|
||||||
padding-top: 12%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: @screen-lg-min) {
|
|
||||||
padding-top: 8%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.stacked{
|
|
||||||
background:transparent;
|
|
||||||
.transition(background 1s);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content:"";
|
|
||||||
display: block;
|
|
||||||
background-image: url("img/banner_bg.png");
|
|
||||||
background-size: cover;
|
|
||||||
background-position: 50%;
|
|
||||||
.o-position-absolute(0, 0);
|
|
||||||
.square(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.box-shadow(none);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img {
|
|
||||||
background-image: url("img/banner_bg.png");
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: @screen-sm-min) and (max-width: (@screen-md-min - 1)) {
|
|
||||||
padding: 12% 0 8%;
|
|
||||||
|
|
||||||
#wrap.index & {
|
|
||||||
padding: 12% 0 4%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position: relative;
|
|
||||||
h1 {
|
|
||||||
.h2;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
@media screen and (min-width: @screen-sm-min) {
|
|
||||||
.h1;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card.top.has_banner {
|
|
||||||
background: @footer-bg-color;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img {
|
|
||||||
opacity: 0.35;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// the first level of an application toctree should look more like sections
|
|
||||||
|
|
||||||
.toctree-wrapper > ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
> li.toctree-l1 > span {
|
|
||||||
font-family: @headings-font-family;
|
|
||||||
// copy h2 content :/
|
|
||||||
.h2()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Elements
|
|
||||||
// -----------------------------------------------
|
|
||||||
|
|
||||||
hr.divider {
|
|
||||||
border-color: fadeout(@gray-lightest, 60%);
|
|
||||||
position: absolute;
|
|
||||||
width: 900%;
|
|
||||||
margin-left: -13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main .alert {
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 0;
|
|
||||||
border-width: 0 0 0 3px;
|
|
||||||
position: relative;
|
|
||||||
max-width: 95%;
|
|
||||||
display: inline-block;;
|
|
||||||
@media (min-width: @screen-sm-min){
|
|
||||||
padding-left: 5.5em;
|
|
||||||
}
|
|
||||||
> p, > ul {
|
|
||||||
margin: .5em 0;
|
|
||||||
}
|
|
||||||
.alert-info; // 'INFO' is the default style
|
|
||||||
|
|
||||||
> h3, > .alert-title {
|
|
||||||
font-size: 1.642857143em;
|
|
||||||
line-height: 1em;
|
|
||||||
margin: 0 0 10px 0;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: @fw_bold;
|
|
||||||
font-family: @headings-font-family;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
.mdi-icon("\e639");
|
|
||||||
.o-position-absolute(50%, auto, auto, 6px);
|
|
||||||
.translate(0, -0.15em);
|
|
||||||
font-size: 4em;
|
|
||||||
|
|
||||||
@media (max-width: @screen-sm-min){
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.alert-success {
|
|
||||||
border-color: lighten(@brand-success, 30%);
|
|
||||||
background-color: lighten(@brand-success, 45%);
|
|
||||||
color: darken(@brand-success, 35%);
|
|
||||||
|
|
||||||
> .alert-title, > h3 {
|
|
||||||
color: @brand-success
|
|
||||||
}
|
|
||||||
> .alert-title:before, > h3:before {
|
|
||||||
content: "\e625";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.alert-info, &.tip {
|
|
||||||
border-color: lighten(@brand-info, 30%);
|
|
||||||
background-color: lighten(@brand-info, 45%);
|
|
||||||
color: darken(@brand-info, 35%);
|
|
||||||
|
|
||||||
> .alert-title, > h3 {
|
|
||||||
color: @brand-info
|
|
||||||
}
|
|
||||||
> .alert-title:before, > h3:before {
|
|
||||||
content: "\e639";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.alert-warning, &.warning {
|
|
||||||
border-color: lighten(@brand-warning, 30%);
|
|
||||||
background-color: lighten(@brand-warning, 35%);
|
|
||||||
color: darken(@brand-warning, 35%);
|
|
||||||
|
|
||||||
> .alert-title, > h3 {
|
|
||||||
color: @brand-warning
|
|
||||||
}
|
|
||||||
> .alert-title:before, > h3:before {
|
|
||||||
content: "\e6a4";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.alert-danger {
|
|
||||||
border-color: lighten(@brand-danger, 30%);
|
|
||||||
background-color: lighten(@brand-danger, 40%);
|
|
||||||
color: darken(@brand-danger, 35%);
|
|
||||||
|
|
||||||
> .alert-title, > h3 {
|
|
||||||
color: @brand-danger
|
|
||||||
}
|
|
||||||
> .alert-title:before, > h3:before {
|
|
||||||
content: "\e6a4";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.alert-exercise {
|
|
||||||
border-color: lighten(@doc_exercise, 30%);
|
|
||||||
background-color: lighten(@doc_exercise, 40%);
|
|
||||||
color: darken(@doc_exercise, 35%);
|
|
||||||
|
|
||||||
> .alert-title, > h3 {
|
|
||||||
color: @doc_exercise;
|
|
||||||
}
|
|
||||||
> .alert-title:before, > h3:before {
|
|
||||||
.translate(0;0);
|
|
||||||
top: 28px;
|
|
||||||
content: "\e709";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.alert-go_to {
|
|
||||||
border-color: lighten(@brand-info, 30%);
|
|
||||||
background-color: lighten(@brand-info, 45%);
|
|
||||||
border-width: 2px;
|
|
||||||
margin: 2em auto;
|
|
||||||
a{
|
|
||||||
color: darken(@brand-info, 25%);
|
|
||||||
}
|
|
||||||
> .alert-title, > h3 {
|
|
||||||
color: @brand-info
|
|
||||||
}
|
|
||||||
> .alert-title:before, > h3:before {
|
|
||||||
content: "\e70d";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.doc-content{
|
|
||||||
@media (min-width: @screen-lg-min) {
|
|
||||||
max-width: 55%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img.img-responsive {
|
|
||||||
margin-bottom: (@line-height-computed / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.figure {
|
|
||||||
h4 {
|
|
||||||
margin: 0.5em 0 1.5em;
|
|
||||||
padding-left: 1em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pq-patch{
|
|
||||||
background: @gray-light;
|
|
||||||
em {padding-left: 10px;}
|
|
||||||
}
|
|
||||||
|
|
||||||
span.menuselection{
|
|
||||||
font-weight: @fw_semibold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group-item {
|
|
||||||
border: none;
|
|
||||||
background:transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt { margin: .5em 0 .3em; font-weight: normal; }
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
font-family: @font-family-serif;
|
|
||||||
font-weight: @fw_semibold;
|
|
||||||
font-style: italic;
|
|
||||||
|
|
||||||
footer {
|
|
||||||
font-family: @font-family-base;
|
|
||||||
background: transparent;
|
|
||||||
text-align: left;
|
|
||||||
color: @text-color;
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
cite {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width:@screen-md-min) {
|
|
||||||
border-left: 3px solid fade(@brand-primary, 50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
code, .code {
|
|
||||||
font-size: 0.8em;
|
|
||||||
font-weight: @fw_semibold;
|
|
||||||
color: darken(@brand-primary, 30%);
|
|
||||||
background-color: lighten(@brand-primary, 50%);
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
dd {
|
|
||||||
margin-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-fields {
|
|
||||||
font-size: .9em;
|
|
||||||
border: 2px solid @gray-light;
|
|
||||||
|
|
||||||
.code-field {
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-field-body {
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-field-name {
|
|
||||||
font-weight: @fw_semibold;
|
|
||||||
color: @headings-color;
|
|
||||||
|
|
||||||
&:after{
|
|
||||||
content:":";
|
|
||||||
}
|
|
||||||
@media screen and (min-width: @screen-md-min){
|
|
||||||
font-size: .9em;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: @headings-color;
|
|
||||||
font-family:@font-family-monospace;
|
|
||||||
}
|
|
||||||
em {
|
|
||||||
color: @headings-color;
|
|
||||||
font-family:@font-family-monospace;
|
|
||||||
font-weight: @fw_semibold;
|
|
||||||
font-size: .9em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table, .table {
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-namespace, .code-module, .code-class,
|
|
||||||
.code-staticmethod, .code-classmethod, .code-method, .code-function,
|
|
||||||
.code-attribute, .code-data {
|
|
||||||
// indents *all* content
|
|
||||||
padding-left: 20px;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
// except for item title which gets dedented back
|
|
||||||
> h6 {
|
|
||||||
margin-left: -20px;
|
|
||||||
margin-bottom: 0.3em;
|
|
||||||
.viewcode-link {
|
|
||||||
display: none;
|
|
||||||
float: right
|
|
||||||
}
|
|
||||||
&:hover .viewcode-link {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-bottom: .5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
main.has_code_col{
|
|
||||||
@media (min-width: @screen-lg-min) {
|
|
||||||
.doc-aside {
|
|
||||||
color: @gray-light;
|
|
||||||
|
|
||||||
pre{
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
article.doc-body {
|
|
||||||
background: @doc_paper;
|
|
||||||
section.doc-content:first-of-type{
|
|
||||||
> p:first-child{
|
|
||||||
.lead;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.index-category {
|
|
||||||
min-height: 300px;
|
|
||||||
min-height: 30vh;
|
|
||||||
|
|
||||||
li.toctree-l1 {
|
|
||||||
padding: 5px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-switcher {
|
|
||||||
margin-top: 1.5em;
|
|
||||||
> ul {
|
|
||||||
font-size: 10px;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 0 10px;
|
|
||||||
.transition(all .2s ease);
|
|
||||||
|
|
||||||
> li {
|
|
||||||
color: text-color;
|
|
||||||
font-weight: @fw_semibold;
|
|
||||||
border-bottom: 1px solid transparent;
|
|
||||||
margin: 5px;
|
|
||||||
font-size: 1.3em;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
list-style: none;
|
|
||||||
.transition(all .2s);
|
|
||||||
.opacity(0.6);
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-bottom: 1px solid @brand-primary;
|
|
||||||
.opacity(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover > ul > li {
|
|
||||||
.opacity(1);
|
|
||||||
}
|
|
||||||
> .tabs > * {
|
|
||||||
display: none;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
> .tabs > .active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
background: @doc_code-bg;
|
|
||||||
color: @gray-light;
|
|
||||||
border-radius: @border-radius-base;
|
|
||||||
margin-bottom: (@line-height-computed / 2);
|
|
||||||
pre {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
font-size: 0.8em;
|
|
||||||
color: @gray-light;
|
|
||||||
background: @doc_code-bg;
|
|
||||||
font-family: @font-family-monospace;
|
|
||||||
font-weight: @fw_semibold;
|
|
||||||
position: relative;
|
|
||||||
border: none;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: (@line-height-computed / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
#mask {
|
|
||||||
.opacity(0);
|
|
||||||
position: fixed;
|
|
||||||
z-index: @zIndex--mask;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
.size(100%; 0);
|
|
||||||
background-color: fade(black, 20%);
|
|
||||||
.transition(opacity .3s);
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
.opacity(1);
|
|
||||||
display: block;
|
|
||||||
.square(100%);
|
|
||||||
.transition(opacity .3s);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Special Pages
|
// Special Pages
|
||||||
@@ -823,6 +259,4 @@ pre {
|
|||||||
// Theme tutorial
|
// Theme tutorial
|
||||||
#thinking-modular > .clearfix.themes {
|
#thinking-modular > .clearfix.themes {
|
||||||
margin-bottom: 3em;
|
margin-bottom: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -1,21 +1,20 @@
|
|||||||
// =============================================================================
|
// =============================================================================
|
||||||
// Typography
|
// Typography
|
||||||
// =============================================================================
|
// =============================================================================
|
||||||
|
@margin-base: 5px;
|
||||||
|
|
||||||
// Font rendering
|
// Font rendering
|
||||||
// ----------------------------------------
|
// ----------------------------------------
|
||||||
body {
|
body {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Headings
|
// Headings
|
||||||
// ----------------------------------------
|
// ----------------------------------------
|
||||||
h1, h2, h3, h4, h5, h6,
|
h1, h2, h3, h4, h5, h6 {
|
||||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
|
||||||
text-rendering: geometricPrecision;
|
text-rendering: geometricPrecision;
|
||||||
letter-spacing: -0.01em;
|
|
||||||
line-height: 1.4;
|
|
||||||
|
|
||||||
@media (min-width: @screen-lg-min) {
|
@media (min-width: @screen-lg-min) {
|
||||||
.has_code_col .doc-aside &{
|
.has_code_col .doc-aside &{
|
||||||
@@ -24,35 +23,152 @@ h1, h2, h3, h4, h5, h6,
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, .h1, .h2 {
|
.headings-margin-small () {
|
||||||
margin-top: @line-height-computed * 1.5;
|
> h2, > h3, > h4, > h5, > h6 {
|
||||||
font-weight: @fw_light;
|
margin-top: @margin-base*2;
|
||||||
b, strong, a {
|
|
||||||
font-weight: @fw_regular;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.headings-bordered () {
|
||||||
h3, .h3, h4, .h4, h5, h6, .h5, .h6 {
|
padding-bottom: @margin-base;
|
||||||
font-weight: @fw_regular;
|
border-bottom: 2px solid #f4f6f7;
|
||||||
b, strong, a {
|
|
||||||
font-weight: @fw_medium;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h4, .h4, h5, h6, .h5, .h6 {
|
|
||||||
margin-top: @line-height-computed;
|
|
||||||
margin-bottom: (@line-height-computed / 3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Lists
|
article.doc-body {
|
||||||
// ----------------------------------------
|
|
||||||
|
|
||||||
ul, ol {
|
// Vertical rhythm
|
||||||
&:not(:empty) {
|
> section {
|
||||||
margin-bottom: (@line-height-computed / 2);
|
padding-bottom: @margin-base*2;
|
||||||
}
|
|
||||||
ul, ol {
|
> :last-child {
|
||||||
&:not(:empty) {
|
margin-bottom: 0;
|
||||||
margin-bottom: (@line-height-computed / 3);
|
}
|
||||||
|
|
||||||
|
> h2, > h3, > h4, > h5, > h6 {
|
||||||
|
margin-bottom: @margin-base;
|
||||||
|
margin-top: @margin-base*8;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: -@margin-base*6;
|
||||||
|
.headings-bordered();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> h2 {
|
||||||
|
.headings-bordered();
|
||||||
|
}
|
||||||
|
|
||||||
|
> h5, > h6 {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
.headings-margin-small();
|
||||||
|
|
||||||
|
&:empty, &.hidden {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
+ section {
|
||||||
|
.headings-margin-small();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
// Typography components
|
||||||
|
> section {
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 26px;
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dl {
|
||||||
|
dt code {
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin: 2px 0 @grid-gutter-width/2 @grid-gutter-width/2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ol, ul {
|
||||||
|
line-height: 26px;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
counter-reset: a;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 5px 0;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 30px;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
.o-position-absolute(9px, @left: 10px);
|
||||||
|
.square(6px);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #939da3;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3, h4, h5, h6 {
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ol > li:before {
|
||||||
|
counter-increment: a;
|
||||||
|
content: counter(a);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 4px 0;
|
||||||
|
.square(20px);
|
||||||
|
border-radius: 10px;
|
||||||
|
.o-position-absolute(3px, @left: 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.o_has_permalink_marker {
|
||||||
|
transition: all, 0.3s;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
i {
|
||||||
|
cursor: pointer;
|
||||||
|
visibility: hidden;
|
||||||
|
margin-left: 0.1em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding: 0.2em;
|
||||||
|
.rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
i {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.o_marked {
|
||||||
|
padding-left: 10px;
|
||||||
|
background-color: #fff7d1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -78,11 +78,8 @@
|
|||||||
// Typography
|
// Typography
|
||||||
// ===============================================
|
// ===============================================
|
||||||
|
|
||||||
//== Fonts
|
|
||||||
@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&subset=latin,latin-ext);
|
|
||||||
|
|
||||||
//== Font sizes/weigths
|
//== Font sizes/weigths
|
||||||
@font-size-base : 15px;
|
@font-size-base : 16px;
|
||||||
|
|
||||||
@fw_light : 300;
|
@fw_light : 300;
|
||||||
@fw_regular : 400;
|
@fw_regular : 400;
|
||||||
@@ -91,19 +88,20 @@
|
|||||||
@fw_bold : 700;
|
@fw_bold : 700;
|
||||||
|
|
||||||
//== Paragraphs
|
//== Paragraphs
|
||||||
@font-family-base : -apple-system, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif;
|
@font-family-base : -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
@text-color : saturate(@gray-dark, 5%);
|
@text-color : #373e42;
|
||||||
|
|
||||||
//== Headings
|
//== Headings
|
||||||
@headings-color : saturate(@gray-darker, 15%);
|
@headings-color : saturate(@gray-darker, 15%);
|
||||||
@headings-font-family : "Work Sans", sans-serif;
|
@headings-font-family : @font-family-base;
|
||||||
@headings-font-weight : @fw_light;
|
@headings-font-weight : @fw_regular;
|
||||||
@headings-small-color : @headings-color;
|
@headings-small-color : @headings-color;
|
||||||
|
|
||||||
@display1-size : 6rem;
|
@font-size-h2: 30px;
|
||||||
@display2-size : 5.5rem;
|
@font-size-h3: 24px;
|
||||||
@display3-size : 4.5rem;
|
@font-size-h4: 19px;
|
||||||
@display4-size : 3.5rem;
|
@font-size-h5: 17px;
|
||||||
|
@font-size-h6: 17px;
|
||||||
|
|
||||||
//== Global textual link color.
|
//== Global textual link color.
|
||||||
@link-color : @o-violet-dark;
|
@link-color : @o-violet-dark;
|
||||||
@@ -160,8 +158,7 @@
|
|||||||
|
|
||||||
// Cards
|
// Cards
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
@card_min-height: 200px;
|
@card_margin-bottom: 25px;
|
||||||
@card_margin-bottom: 20px;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -312,9 +312,9 @@ class BootstrapTranslator(nodes.NodeVisitor, object):
|
|||||||
|
|
||||||
def visit_title(self, node):
|
def visit_title(self, node):
|
||||||
parent = node.parent
|
parent = node.parent
|
||||||
closing = u'</p>'
|
closing = u'</h3>'
|
||||||
if isinstance(parent, nodes.Admonition):
|
if isinstance(parent, nodes.Admonition):
|
||||||
self.body.append(self.starttag(node, 'p', CLASS='alert-title'))
|
self.body.append(self.starttag(node, 'h3', CLASS='alert-title'))
|
||||||
elif isinstance(node.parent, nodes.document):
|
elif isinstance(node.parent, nodes.document):
|
||||||
self.body.append(self.starttag(node, 'h1'))
|
self.body.append(self.starttag(node, 'h1'))
|
||||||
closing = u'</h1>'
|
closing = u'</h1>'
|
||||||
@@ -633,9 +633,9 @@ class BootstrapTranslator(nodes.NodeVisitor, object):
|
|||||||
classes = env.metadata[ref].get('types', 'tutorials')
|
classes = env.metadata[ref].get('types', 'tutorials')
|
||||||
classes += ' toc-single-entry' if not toc else ' toc-section'
|
classes += ' toc-single-entry' if not toc else ' toc-section'
|
||||||
self.body.append(self.starttag(node, 'div', CLASS="row " + classes))
|
self.body.append(self.starttag(node, 'div', CLASS="row " + classes))
|
||||||
self.body.append(u'<h2 class="col-sm-12">')
|
self.body.append(u'<div class="col-sm-12"><h2>')
|
||||||
self.body.append(title if title else util.nodes.clean_astext(env.titles[ref]))
|
self.body.append(title if title else util.nodes.clean_astext(env.titles[ref]))
|
||||||
self.body.append(u'</h2>')
|
self.body.append(u'</h2></div>')
|
||||||
|
|
||||||
entries = [(title, ref)] if not toc else ((e[0], e[1]) for e in toc[0]['entries'])
|
entries = [(title, ref)] if not toc else ((e[0], e[1]) for e in toc[0]['entries'])
|
||||||
for subtitle, subref in entries:
|
for subtitle, subref in entries:
|
||||||
|
|||||||
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB After Width: | Height: | Size: 100 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 30 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 107 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 42 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 84 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 33 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 83 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 22 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 385 KiB After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 47 KiB |
Vendored
BIN
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Vendored
BIN
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 187 KiB After Width: | Height: | Size: 82 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 28 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 172 KiB After Width: | Height: | Size: 86 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 34 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 238 KiB After Width: | Height: | Size: 139 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 50 KiB |
Vendored
BIN
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Vendored
BIN
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Vendored
BIN
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 358 KiB After Width: | Height: | Size: 133 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 102 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 274 KiB After Width: | Height: | Size: 173 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 59 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 65 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 31 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 46 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 89 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 42 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 300 KiB After Width: | Height: | Size: 195 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 456 KiB After Width: | Height: | Size: 183 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 54 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 309 KiB After Width: | Height: | Size: 140 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 43 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 250 KiB After Width: | Height: | Size: 156 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 47 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 286 KiB After Width: | Height: | Size: 253 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 24 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 222 KiB After Width: | Height: | Size: 135 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 46 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 238 KiB After Width: | Height: | Size: 104 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 32 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 242 KiB After Width: | Height: | Size: 124 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 28 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 246 KiB After Width: | Height: | Size: 161 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 45 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 221 KiB After Width: | Height: | Size: 87 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 169 KiB After Width: | Height: | Size: 81 KiB |
Vendored
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 299 KiB After Width: | Height: | Size: 140 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 48 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 397 KiB After Width: | Height: | Size: 244 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 69 KiB |
+76
-68
@@ -37,56 +37,60 @@ From common CMS to Odoo
|
|||||||
|
|
||||||
This is usually the first question from a web designer used to working with Wordpress or Joomla and coming to Odoo for the first time.
|
This is usually the first question from a web designer used to working with Wordpress or Joomla and coming to Odoo for the first time.
|
||||||
|
|
||||||
.. container:: col-sm-4
|
.. container:: row
|
||||||
|
|
||||||
.. image:: theme_tutorial_assets/img/cms.jpg
|
.. container:: col-sm-4
|
||||||
|
|
||||||
.. container:: col-sm-7
|
.. image:: theme_tutorial_assets/img/cms.jpg
|
||||||
|
|
||||||
Indeed, when using common CMSs, you have to code several files (like header.php, page.php, post.php, etc.) in order to create a basic structure for your website. With those systems, this base structure acts as a design foundation that you have to update over time to ensure compatibility within your CMS. So, even after you have spent hours coding the files, you have not even started on the design yet.
|
.. container:: col-sm-7
|
||||||
|
|
||||||
This **does not** apply to creating Odoo themes.
|
Indeed, when using common CMSs, you have to code several files (like header.php, page.php, post.php, etc.) in order to create a basic structure for your website. With those systems, this base structure acts as a design foundation that you have to update over time to ensure compatibility within your CMS. So, even after you have spent hours coding the files, you have not even started on the design yet.
|
||||||
|
|
||||||
|
This **does not** apply to creating Odoo themes.
|
||||||
|
|
||||||
|
|
||||||
.. note::
|
.. note::
|
||||||
:class: col-sm-12
|
|
||||||
|
|
||||||
We think that theme design should be simple (and powerful). When we created our Website Builder, we decided to start from scratch instead of relying on what already existed. This approach gave us the freedom to focus on the things that are really important for designers: styles, content and the logic behind them. No more struggling with technical stuff.
|
We think that theme design should be simple (and powerful). When we created our Website Builder, we decided to start from scratch instead of relying on what already existed. This approach gave us the freedom to focus on the things that are really important for designers: styles, content and the logic behind them. No more struggling with technical stuff.
|
||||||
|
|
||||||
Odoo default theme structure
|
Odoo default theme structure
|
||||||
----------------------------
|
----------------------------
|
||||||
|
|
||||||
.. container:: col-sm-8
|
.. container:: row
|
||||||
|
|
||||||
Odoo comes with a default theme structure.
|
.. container:: col-sm-8
|
||||||
It is a very basic “theme” that provides minimal structure and layout. When you create a new theme, you are actually extending this.
|
|
||||||
Indeed it’s always enabled in your setup and it acts exactly like the CMS’s base structure we mentioned above, except that you don’t have to create or maintain it.
|
|
||||||
It will upgrade automatically within your Odoo installation and, since it is included in the Website Builder module, everything is smoothly integrated by default.
|
|
||||||
|
|
||||||
As a result, you are totally free to focus on design while this structure does the job of providing integrations and functionality.
|
Odoo comes with a default theme structure.
|
||||||
|
It is a very basic “theme” that provides minimal structure and layout. When you create a new theme, you are actually extending this.
|
||||||
|
Indeed it’s always enabled in your setup and it acts exactly like the CMS’s base structure we mentioned above, except that you don’t have to create or maintain it.
|
||||||
|
It will upgrade automatically within your Odoo installation and, since it is included in the Website Builder module, everything is smoothly integrated by default.
|
||||||
|
|
||||||
.. container:: col-sm-4
|
As a result, you are totally free to focus on design while this structure does the job of providing integrations and functionality.
|
||||||
|
|
||||||
.. image:: theme_tutorial_assets/img/def_structure.jpg
|
.. container:: col-sm-4
|
||||||
|
|
||||||
.. container:: col-md-6
|
.. image:: theme_tutorial_assets/img/def_structure.jpg
|
||||||
|
|
||||||
**Main features:**
|
.. container:: row
|
||||||
|
|
||||||
* Basic layouts for pages, blog and eCommerce
|
.. container:: col-md-6
|
||||||
* Website Builder integration
|
|
||||||
* Basic Snippets
|
|
||||||
* Automatic Less/Sass compiling
|
|
||||||
* Automatic Js and CSS minification and combination
|
|
||||||
|
|
||||||
.. container:: col-md-6
|
**Main features:**
|
||||||
|
|
||||||
**Main technologies:**
|
* Basic layouts for pages, blog and eCommerce
|
||||||
|
* Website Builder integration
|
||||||
|
* Basic Snippets
|
||||||
|
* Automatic Less/Sass compiling
|
||||||
|
* Automatic Js and CSS minification and combination
|
||||||
|
|
||||||
* Twitter Bootstrap
|
.. container:: col-md-6
|
||||||
* jQuery
|
|
||||||
* jQuery UI
|
**Main technologies:**
|
||||||
* underscore.js
|
|
||||||
|
* Twitter Bootstrap
|
||||||
|
* jQuery
|
||||||
|
* jQuery UI
|
||||||
|
* underscore.js
|
||||||
|
|
||||||
Thinking "modular"
|
Thinking "modular"
|
||||||
==================
|
==================
|
||||||
@@ -103,42 +107,42 @@ As a designer, your goal is to style these elements in order to achieve a wonder
|
|||||||
|
|
||||||
Let’s take a tour of our “list” elements:
|
Let’s take a tour of our “list” elements:
|
||||||
|
|
||||||
.. row
|
.. container:: row
|
||||||
|
|
||||||
.. figure:: theme_tutorial_assets/img/snippet.jpg
|
.. figure:: theme_tutorial_assets/img/snippet.jpg
|
||||||
:figclass: col-sm-6
|
:figclass: col-sm-6
|
||||||
|
|
||||||
Snippets (or building-blocks)
|
Snippets (or building-blocks)
|
||||||
|
|
||||||
A piece of HTML code. The user will drag&drop, modify and combine them using our built-in Website Builder interface. You can define sets of options and styles for each snippet. The user will choose from them according to their needs.
|
A piece of HTML code. The user will drag&drop, modify and combine them using our built-in Website Builder interface. You can define sets of options and styles for each snippet. The user will choose from them according to their needs.
|
||||||
|
|
||||||
.. figure:: theme_tutorial_assets/img/page.jpg
|
.. figure:: theme_tutorial_assets/img/page.jpg
|
||||||
:figclass: col-sm-6
|
:figclass: col-sm-6
|
||||||
|
|
||||||
Pages
|
Pages
|
||||||
|
|
||||||
These are normal web pages, except that they will be editable by the final user and that you can define an empty area that the user can “fill” by dragging snippets into it.
|
These are normal web pages, except that they will be editable by the final user and that you can define an empty area that the user can “fill” by dragging snippets into it.
|
||||||
|
|
||||||
.. /row
|
|
||||||
.. raw:: html
|
.. raw:: html
|
||||||
|
|
||||||
<div class="clearfix themes"></div>
|
<div class="clearfix themes"></div>
|
||||||
|
|
||||||
.. figure:: theme_tutorial_assets/img/styles.jpg
|
.. container:: row
|
||||||
:figclass: col-sm-6
|
|
||||||
|
|
||||||
Styles
|
.. figure:: theme_tutorial_assets/img/styles.jpg
|
||||||
|
:figclass: col-sm-6
|
||||||
|
|
||||||
Styles are defined using standard CSS files (or Less/Sass). You can define a style as **default** or **optional**. The default styles are always active in your theme, the optional styles can be enabled or disabled by the user.
|
Styles
|
||||||
|
|
||||||
.. figure:: theme_tutorial_assets/img/functionalities.jpg
|
Styles are defined using standard CSS files (or Less/Sass). You can define a style as **default** or **optional**. The default styles are always active in your theme, the optional styles can be enabled or disabled by the user.
|
||||||
:figclass: col-sm-6
|
|
||||||
|
|
||||||
Functionalities
|
.. figure:: theme_tutorial_assets/img/functionalities.jpg
|
||||||
|
:figclass: col-sm-6
|
||||||
|
|
||||||
Thanks to Odoo’s modularity, everything can be personalized even more. This means there are endless possibilities for your creativity. Adding functionalities is easy and it’s simple to provide the end user with customizable options.
|
Functionalities
|
||||||
|
|
||||||
|
Thanks to Odoo’s modularity, everything can be personalized even more. This means there are endless possibilities for your creativity. Adding functionalities is easy and it’s simple to provide the end user with customizable options.
|
||||||
|
|
||||||
.. /row
|
|
||||||
|
|
||||||
Odoo's XML files, an overview
|
Odoo's XML files, an overview
|
||||||
-----------------------------
|
-----------------------------
|
||||||
@@ -182,17 +186,19 @@ Keep reading the tutorial to learn to how properly extend it with your own code.
|
|||||||
Update your theme
|
Update your theme
|
||||||
-----------------
|
-----------------
|
||||||
|
|
||||||
.. container:: col-sm-6
|
.. container:: row
|
||||||
|
|
||||||
Since XML files are only loaded when you install the theme, you will have to force reloading every time you make changes on an xml file.
|
.. container:: col-sm-6
|
||||||
|
|
||||||
To do that, click on the Upgrade button in the module’s page.
|
Since XML files are only loaded when you install the theme, you will have to force reloading every time you make changes on an xml file.
|
||||||
|
|
||||||
.. image:: theme_tutorial_assets/img/restart.png
|
To do that, click on the Upgrade button in the module’s page.
|
||||||
|
|
||||||
.. container:: col-sm-5
|
.. image:: theme_tutorial_assets/img/restart.png
|
||||||
|
|
||||||
.. image:: theme_tutorial_assets/img/upgrade_module.png
|
.. container:: col-sm-5
|
||||||
|
|
||||||
|
.. image:: theme_tutorial_assets/img/upgrade_module.png
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -659,13 +665,13 @@ Options group properties
|
|||||||
|
|
||||||
Options are wrapped in groups. Groups can have properties that define how the included options will interact with the user interface.
|
Options are wrapped in groups. Groups can have properties that define how the included options will interact with the user interface.
|
||||||
|
|
||||||
``data-selector=" css selector(s) "``
|
``data-selector="[css selector(s)]"``
|
||||||
Bind all the options included into the group to a particular element.
|
Bind all the options included into the group to a particular element.
|
||||||
``data-js=" custom method name "``
|
``data-js=" custom method name "``
|
||||||
Is used to bind custom Javascript methods.
|
Is used to bind custom Javascript methods.
|
||||||
``data-drop-in=" css selector(s) "``
|
``data-drop-in="[css selector(s)]"``
|
||||||
Defines the list of elements where the snippet can be dropped into.
|
Defines the list of elements where the snippet can be dropped into.
|
||||||
``data-drop-near=" css selector(s) "``
|
``data-drop-near="[css selector(s)]"``
|
||||||
Defines the list of elements that the snippet can be dropped beside.
|
Defines the list of elements that the snippet can be dropped beside.
|
||||||
|
|
||||||
Default option methods
|
Default option methods
|
||||||
@@ -673,10 +679,10 @@ Default option methods
|
|||||||
|
|
||||||
Options apply standard CSS classes to the snippet. Depending on the method that you choose, the UI will behave differently.
|
Options apply standard CSS classes to the snippet. Depending on the method that you choose, the UI will behave differently.
|
||||||
|
|
||||||
``data-select-class=" class name "``
|
``data-select-class="[class name]"``
|
||||||
More data-select-class in the same group defines a list of classes that the user can choose to apply. Only one option can be enabled at a time.
|
More data-select-class in the same group defines a list of classes that the user can choose to apply. Only one option can be enabled at a time.
|
||||||
|
|
||||||
``data-toggle-class=" class name "``
|
``data-toggle-class="[class name]"``
|
||||||
The data-toggle-class is used to apply one or more CSS classes from the list to a snippet. Multiple selections can be applied at once.
|
The data-toggle-class is used to apply one or more CSS classes from the list to a snippet. Multiple selections can be applied at once.
|
||||||
|
|
||||||
Let's demonstrate how default options work with a basic example.
|
Let's demonstrate how default options work with a basic example.
|
||||||
@@ -903,27 +909,29 @@ As content is so important for SEO, you should concentrate on giving publishers
|
|||||||
|
|
||||||
Let’s have a look to this example of a classic two column snippet, implemented in two different ways.
|
Let’s have a look to this example of a classic two column snippet, implemented in two different ways.
|
||||||
|
|
||||||
|
.. container:: row
|
||||||
|
|
||||||
.. container:: col-sm-7
|
.. container:: col-sm-7
|
||||||
|
|
||||||
.. image:: theme_tutorial_assets/img/seo_snippet_wrong.png
|
.. image:: theme_tutorial_assets/img/seo_snippet_wrong.png
|
||||||
|
|
||||||
.. container:: col-sm-5
|
.. container:: col-sm-5
|
||||||
|
|
||||||
Bad
|
**Bad**
|
||||||
|
|
||||||
Using fixed image, the publisher will be forced to limit the text in order to follow the layout.
|
Using fixed image, the publisher will be forced to limit the text in order to follow the layout.
|
||||||
|
|
||||||
|
.. container:: row
|
||||||
|
|
||||||
.. container:: col-sm-7
|
.. container:: col-sm-7
|
||||||
|
|
||||||
.. image:: theme_tutorial_assets/img/seo_snippet_good.png
|
.. image:: theme_tutorial_assets/img/seo_snippet_good.png
|
||||||
|
|
||||||
.. container:: col-sm-5
|
.. container:: col-sm-5
|
||||||
|
|
||||||
Good
|
**Good**
|
||||||
|
|
||||||
Using background images that fit the column height, the publisher will be free to add the content regardless of the image’s height.
|
Using background images that fit the column height, the publisher will be free to add the content regardless of the image’s height.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
:banner: banners/cdn.jpg
|
||||||
|
|
||||||
========================================
|
========================================
|
||||||
Deploying with Content Delivery Networks
|
Deploying with Content Delivery Networks
|
||||||
========================================
|
========================================
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
:banner: banners/enterprise.jpg
|
||||||
.. _setup/enterprise:
|
.. _setup/enterprise:
|
||||||
|
|
||||||
============================
|
============================
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
:banner: banners/iap.jpg
|
||||||
:types: api
|
:types: api
|
||||||
|
|
||||||
.. _webservices/iap:
|
.. _webservices/iap:
|
||||||
|
|||||||
Reference in New Issue
Block a user