[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 -%}
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<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() }}
|
||||
{%- endblock -%}
|
||||
|
||||
@@ -226,10 +227,9 @@
|
||||
{% else %}
|
||||
{% set container = 'container' %}
|
||||
{% endif %}
|
||||
<div class="{{ container}} {{ ' '.join(classes) }}">
|
||||
<main class="container-fluid {{ ' '.join(classes) }}">
|
||||
<main class="container {{ ' '.join(classes) }}">
|
||||
{% if pagename != master_doc %}
|
||||
<div class="row">
|
||||
<div class="o_content row">
|
||||
{% if 'has-toc' not in meta and not (pagename in toc) %}
|
||||
<aside>
|
||||
<div class="navbar-aside text-center">
|
||||
@@ -250,7 +250,6 @@
|
||||
{% endif %}
|
||||
<div id="mask"></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 {
|
||||
.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 {
|
||||
position : relative;
|
||||
overflow : hidden;
|
||||
font-family : @headings-font-family;
|
||||
font-size : 0.85em;
|
||||
line-height : 1.5;
|
||||
font-weight : @fw_medium;
|
||||
overflow-y : auto;
|
||||
height : 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: @headings-font-family;
|
||||
font-size: 0.85em;
|
||||
line-height: 1.5;
|
||||
overflow-y: auto;
|
||||
|
||||
&.affix {
|
||||
z-index : 2;
|
||||
top : @w-sub-nav-height - 1;
|
||||
position : fixed;
|
||||
z-index: 2;
|
||||
top: @w-sub-nav-height - 1;
|
||||
position: fixed;
|
||||
backface-visibility: hidden;
|
||||
|
||||
@media (max-width:@screen-md-min) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> ul.list-group {
|
||||
margin : 0;
|
||||
z-index : 0;
|
||||
margin: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
margin : 0;
|
||||
padding : 15px 0 10px;
|
||||
margin: 0;
|
||||
padding: 15px 0 10px;
|
||||
text-transform: uppercase;
|
||||
font-weight : @fw_semibold;
|
||||
font-size : 16px;
|
||||
color : @text-color;
|
||||
overflow-x : hidden;
|
||||
position : relative;
|
||||
z-index : 1;
|
||||
font-weight: @fw_semibold;
|
||||
font-size: 16px;
|
||||
color: @text-color;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.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 {
|
||||
margin : 0;
|
||||
z-index : 1;
|
||||
position : relative;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
|
||||
.gith-link {
|
||||
font-weight : 600;
|
||||
color : @text-color;
|
||||
color: @text-color;
|
||||
text-decoration: none;
|
||||
display : inline-block;
|
||||
position : relative;
|
||||
margin : 10px 0;
|
||||
.transition(color .2s);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
font-family: @font-family-base;
|
||||
|
||||
&:hover {
|
||||
color : @headings-color;
|
||||
color: @headings-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
.size(20px;20px);
|
||||
.opacity(.5);
|
||||
content : '';
|
||||
position : relative;
|
||||
.square(1em);
|
||||
content: '';
|
||||
position: relative;
|
||||
background-image: url('img/github-square_32.png');
|
||||
background-size : 100%;
|
||||
display : inline-block;
|
||||
vertical-align : middle;
|
||||
background-size: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
.translate(0;-1px);
|
||||
.transition(opacity .2s);
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
&:before {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//-- All menu levels
|
||||
ul {
|
||||
padding : 0;
|
||||
position : relative;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
li {
|
||||
@@ -120,37 +98,64 @@
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
overflow : hidden;
|
||||
overflow: hidden;
|
||||
border-radius: 2px 0 0 0;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
padding: 5px 15px;
|
||||
color : @text-color;
|
||||
color: @text-color;
|
||||
line-height: 1.2;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:focus, &:hover {
|
||||
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
|
||||
ul {
|
||||
max-height : 0;
|
||||
background-color: @gray-lighter;
|
||||
padding-left : 15px;
|
||||
overflow : hidden;
|
||||
max-height: 0;
|
||||
background-color: fade(@gray-light, 20%);
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
margin-left: 0;
|
||||
box-shadow: inset 0 3px 5px -2px @gray-light;
|
||||
.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
|
||||
li.active {
|
||||
&, &:hover, &:focus {
|
||||
&, &:focus, &:hover {
|
||||
border-color: @gray-lighter;
|
||||
background : transparent;
|
||||
background: transparent;
|
||||
|
||||
> a {
|
||||
font-weight: bold;
|
||||
color: @headings-color;
|
||||
}
|
||||
}
|
||||
@@ -162,32 +167,44 @@
|
||||
|
||||
// First menu level
|
||||
> ul > li {
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
background : white;
|
||||
background: white;
|
||||
border-bottom: 1px solid fade(black, 8%);
|
||||
|
||||
> a {
|
||||
padding: 10px 15px;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
&:focus, &:hover {
|
||||
> a {
|
||||
box-shadow : inset 5px 0 0 -3px @gray-light;
|
||||
border-left: 3px solid @gray-light;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.active, &.active:hover, &.active:focus{
|
||||
&.active, &.active:focus, &.active:hover {
|
||||
> a {
|
||||
box-shadow : inset 5px 0 0 -3px @brand-primary;
|
||||
border-left: 3px solid @brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.parent {
|
||||
> a:after {
|
||||
content : '\e7c1';
|
||||
font-family: 'Material-Design-Icons';
|
||||
opacity : 0.5;
|
||||
.o-position-absolute(auto, 10px);
|
||||
&.active.parent + li {
|
||||
box-shadow: 0 -3px 5px -4px fade(@gray-darker, 40%);
|
||||
}
|
||||
|
||||
> ul > li {
|
||||
> a {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
> ul > li {
|
||||
> a {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
> ul > li > a {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -195,25 +212,23 @@
|
||||
|
||||
.floating_action_container {
|
||||
position: fixed;
|
||||
right : 8px;
|
||||
bottom : 8px;
|
||||
width : auto;
|
||||
z-index : @zIndex--float_action;
|
||||
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
width: auto;
|
||||
z-index: @zIndex--float_action;
|
||||
@media (min-width:@screen-md-min) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#floating_action {
|
||||
width : 56px;
|
||||
height : 56px;
|
||||
display : inline-block;
|
||||
z-index : 0;
|
||||
.square(56px);
|
||||
display: inline-block;
|
||||
z-index: 0;
|
||||
background-color: transparent;
|
||||
border-radius : 50%;
|
||||
padding : 16px;
|
||||
box-shadow : 0 8px 17px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
padding: 16px;
|
||||
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;
|
||||
.transition(transform 500ms @o-ease);
|
||||
|
||||
@@ -222,55 +237,52 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
.transform(~"translateZ(0px) rotateZ(-180deg)");
|
||||
.transform(~ "translateZ(0px) rotateZ(-180deg)");
|
||||
}
|
||||
}
|
||||
|
||||
#floating_action_menu {
|
||||
position : absolute;
|
||||
z-index : 1;
|
||||
overflow : hidden;
|
||||
right : 0;
|
||||
width : 380px;
|
||||
bottom : 0;
|
||||
padding : 0;
|
||||
display : block;
|
||||
.o-position-absolute(auto,0,0);
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
width: 380px;
|
||||
padding: 0;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
visibility : hidden;
|
||||
visibility: hidden;
|
||||
.transition(all 0.5s);
|
||||
.box-shadow(0 0 0 transparent);
|
||||
|
||||
.content {
|
||||
margin: 0;
|
||||
.opacity(0);
|
||||
opacity:0;
|
||||
|
||||
li {
|
||||
border : none;
|
||||
border: none;
|
||||
border-top: 1px solid #DDD;
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display : inline-block;
|
||||
cursor : pointer;
|
||||
color : @headings-color;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color: @headings-color;
|
||||
text-decoration: none;
|
||||
float : left;
|
||||
width : 100%;
|
||||
padding : 5px 10px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position : absolute;
|
||||
.size(1px; 1px);
|
||||
background : @brand-primary;
|
||||
content : '';
|
||||
bottom : 28px;
|
||||
right : 28px;
|
||||
color : #fff;
|
||||
.o-position-absolute(auto,28px,28px);
|
||||
.square(1px);
|
||||
background: @brand-primary;
|
||||
content: '';
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
.transition(all 300ms @o-ease);
|
||||
}
|
||||
@@ -281,17 +293,17 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
display : block;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
.transition(all 500ms @o-ease);
|
||||
|
||||
.bubble, &:before {
|
||||
&:before, .bubble {
|
||||
.size(1000px; 2000px);
|
||||
border-radius: 50%;
|
||||
.opacity(0);
|
||||
margin-right : -500px;
|
||||
opacity: 0;
|
||||
margin-right: -500px;
|
||||
margin-bottom: -500px;
|
||||
display : block;
|
||||
display: block;
|
||||
.transition(all .4s @o-ease);
|
||||
}
|
||||
|
||||
@@ -301,9 +313,27 @@
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index : 1;
|
||||
z-index: 1;
|
||||
.opacity(1);
|
||||
.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 () {
|
||||
|
||||
// -- Initialize fallbacks for requestAnimationFrame
|
||||
window.requestAnimationFrame = window.requestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| window.oRequestAnimationFrame
|
||||
|| function (callback) { setTimeout(callback, 10); };
|
||||
|
||||
|
||||
// ======= Define variables =======
|
||||
// =================================
|
||||
// -- Screen resolutions
|
||||
@@ -12,14 +21,33 @@
|
||||
win_w = $win.width();
|
||||
|
||||
// -- Main elements
|
||||
var $body = $('body'),
|
||||
$header = $body.find('> header'),
|
||||
$sub_nav = $header.find(".o_sub_nav");
|
||||
$wrap = $body.find('> #wrap'),
|
||||
$card_top = $wrap.find('> .card.top'),
|
||||
$card_top_t = $card_top.find('> .container'),
|
||||
$main = $wrap.find('main'),
|
||||
$footer = $body.find('> footer');
|
||||
var $body = $('body'),
|
||||
$header = $body.find('> header'),
|
||||
$sub_nav = $header.find(".o_sub_nav"),
|
||||
$wrap = $body.find('> #wrap'),
|
||||
$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
|
||||
var $mask = $body.find('#mask'),
|
||||
@@ -27,37 +55,34 @@
|
||||
$float_menu = $body.find("#floating_action_menu");
|
||||
|
||||
// -- Elements' heights
|
||||
var body_h = $body.height(),
|
||||
header_h = $header.outerHeight(),
|
||||
sub_nav_h = $sub_nav.height();
|
||||
var body_h = $body.height(),
|
||||
header_h = $header.outerHeight(),
|
||||
main_h = $main.height(),
|
||||
sub_nav_h = $sub_nav.height();
|
||||
|
||||
// -- Aside
|
||||
var $aside = $main.find('aside'),
|
||||
has_aside = $aside.length > 0,
|
||||
$aside_nav = undefined;
|
||||
aside_links = undefined;
|
||||
$aside_nav = has_aside ? $aside.find('> .navbar-aside') : 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 =================
|
||||
// ===============================
|
||||
function set_affix(body_h) {
|
||||
var aside_offset = $aside.offset().top - sub_nav_h,
|
||||
aside_width = $aside.width(),
|
||||
main_bottom = 40;
|
||||
function set_affix() {
|
||||
var aside_offset_top = $aside.offset().top - sub_nav_h,
|
||||
aside_offset_bot = parseInt($wrap.css('padding-bottom')),
|
||||
aside_width = $aside.width();
|
||||
|
||||
$aside_nav.css('width', aside_width);
|
||||
$aside_nav.affix({
|
||||
target: window,
|
||||
$aside.css('height', main_h);
|
||||
$aside_nav.css('width', aside_width).affix({
|
||||
offset: {
|
||||
top : aside_offset,
|
||||
bottom : main_bottom
|
||||
top : aside_offset_top,
|
||||
bottom : aside_offset_bot,
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// ======= Footer animations =====
|
||||
// ===============================
|
||||
@@ -67,22 +92,22 @@
|
||||
if (!footer_effect) {
|
||||
footer_stop();
|
||||
return;
|
||||
};
|
||||
}
|
||||
|
||||
$footer.toggleClass('o_footer_effect', footer_effect);
|
||||
$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') {
|
||||
footer_stop();
|
||||
}
|
||||
};
|
||||
$win.on('keydown.footer', function(e) {
|
||||
$win.on('keydown.footer', function (e) {
|
||||
checkIfSearch(e);
|
||||
});
|
||||
};
|
||||
|
||||
var footer_stop = function() {
|
||||
var footer_stop = function () {
|
||||
$footer.removeClass('o_footer_effect');
|
||||
$body.css('padding-bottom', 0);
|
||||
$win.off('keydown.footer');
|
||||
@@ -92,24 +117,59 @@
|
||||
// ======= Docs Functions ==========
|
||||
// =================================
|
||||
// -- Layouting
|
||||
var layouting = function () {
|
||||
if ($main.hasClass("index")) {
|
||||
$main.find("#index .index-tree > .row").each(function() {
|
||||
var childs = $(this).find(".col-md-3");
|
||||
if (childs.length == 2) {
|
||||
childs.removeClass("col-md-3").addClass("col-md-6");
|
||||
}
|
||||
if (childs.length == 3) {
|
||||
childs.removeClass("col-md-3").addClass("col-md-4");
|
||||
}
|
||||
})
|
||||
$(".floating_action_container").remove();
|
||||
var init = function () {
|
||||
var $floating_container = $body.find("> .floating_action_container");
|
||||
|
||||
// Adapt Title font size according to its length
|
||||
$cp_text
|
||||
.toggleClass('o_short_title', $cp_text.text().trim().length < 15)
|
||||
.toggleClass('o_long_title', $cp_text.text().trim().length > 45);
|
||||
|
||||
if (page_type == 'index') {
|
||||
var half_cols_selector = '.tutorials,.api';
|
||||
|
||||
$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
|
||||
var floating_menu_layout = function() {
|
||||
var floating_menu_layout = function () {
|
||||
var lis = $aside_nav.find("> ul > li").clone(true)
|
||||
.addClass("ripple")
|
||||
.css({
|
||||
@@ -117,53 +177,46 @@
|
||||
overflow: 'hidden'
|
||||
});
|
||||
lis.find("ul").remove().end()
|
||||
.find("a").removeClass("ripple").on("click", function() {
|
||||
floating_menu_toggle();
|
||||
.find("a").removeClass("ripple").on("click", function () {
|
||||
_toggle_float();
|
||||
});
|
||||
$float_menu.find(".content").empty().append(lis);
|
||||
$float.add($mask).on("click", function () {
|
||||
floating_menu_toggle();
|
||||
_toggle_float();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
var floating_menu_toggle = function() {
|
||||
$float.toggleClass("active");
|
||||
setTimeout(function() {
|
||||
$float_menu.toggleClass("active");
|
||||
$mask.toggleClass("active");
|
||||
}, 300);
|
||||
};
|
||||
|
||||
// -- Scroll To
|
||||
var scroll_to = function(el_list) {
|
||||
var offset = 80;
|
||||
el_list.each(function() {
|
||||
var $link = $(this),
|
||||
href = $link.attr("href");
|
||||
var set_scroll_to = function (el_list) {
|
||||
el_list.each(function () {
|
||||
var $link = $(this),
|
||||
target_id = $link.attr("href");
|
||||
|
||||
$link.on("click", function() {
|
||||
var val = $(href).offset().top - 60;
|
||||
$('html, body').animate({
|
||||
scrollTop: val
|
||||
}, 400);
|
||||
$link.on("click", function () {
|
||||
$aside_nav.find("li").removeClass("active");
|
||||
$link.parents("li").addClass("active");
|
||||
window.location.hash = $link.prop('hash');
|
||||
_scroll_and_set_hash(target_id);
|
||||
return false;
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$body.scrollspy({
|
||||
target: 'aside',
|
||||
offset: 200,
|
||||
});
|
||||
};
|
||||
|
||||
// -- Ripple buttons
|
||||
var ripple_animation = function(el_list) {
|
||||
el_list.each(function() {
|
||||
var ripple_animation = function (el_list) {
|
||||
el_list.each(function () {
|
||||
var btn = $(this);
|
||||
btn
|
||||
.css({
|
||||
position: 'relative',
|
||||
overflow: 'hidden'
|
||||
})
|
||||
.bind('mousedown', function(e) {
|
||||
.bind('mousedown', function (e) {
|
||||
var ripple;
|
||||
if (btn.find('.inner-ripple').length === 0) {
|
||||
ripple = $('<span class="inner-ripple"/>');
|
||||
@@ -186,43 +239,17 @@
|
||||
top: y + 'px',
|
||||
left: x + 'px'
|
||||
}).addClass('inner-ripple-animated');
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
ripple.removeClass('inner-ripple-animated');
|
||||
}, 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
|
||||
var header_buttons = function () {
|
||||
var timer;
|
||||
$header.on('click', '.o_primary_nav .dropdown-toggle', function(e) {
|
||||
$header.on('click', '.o_primary_nav .dropdown-toggle', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var $a = $(this);
|
||||
@@ -233,12 +260,12 @@
|
||||
if ($a.closest('.o_primary_nav').children('.open').length > 0) {
|
||||
$header.addClass("o_sub_opened");
|
||||
} else {
|
||||
timer = setTimeout(function() {
|
||||
timer = setTimeout(function () {
|
||||
$header.removeClass("o_sub_opened");
|
||||
}, 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) {
|
||||
$header.find('.open').removeClass('open');
|
||||
$header.find('.o_sub_opened').andSelf().removeClass('o_sub_opened');
|
||||
@@ -246,28 +273,53 @@
|
||||
});
|
||||
|
||||
// -- Mobile menu opening
|
||||
$header.on('click', '.o_mobile_menu_toggle', function(e) {
|
||||
$header.on('click', '.o_mobile_menu_toggle', function (e) {
|
||||
e.preventDefault();
|
||||
$(this).find('i').toggleClass('fa-bars fa-times');
|
||||
$header.toggleClass('o_mobile_menu_opened');
|
||||
});
|
||||
};
|
||||
|
||||
var card_top_animation = function (win_top){
|
||||
var scrollFactor = 1.6,
|
||||
bannerHeight = Math.max(450, $card_top.outerHeight(true) - 60),
|
||||
top = Math.min(win_top, bannerHeight/scrollFactor),
|
||||
base_value = top * (scrollFactor - 1),
|
||||
opacity = top/bannerHeight * scrollFactor;
|
||||
// -- Attach permalink markers to sections' title
|
||||
var attach_permalink_markers = function () {
|
||||
$main.find('article.doc-body > section').each( function () {
|
||||
var $section = $(this),
|
||||
$title = $section.find('> h2, > h3, > h4, > h5, > h6'),
|
||||
target_id = $section.attr('id'),
|
||||
$icon = $('<i/>').addClass('mdi-content-link');
|
||||
|
||||
$card_top.css('transform', 'translateY(' + base_value + 'px)');
|
||||
$card_top_t.css({
|
||||
'transform' : 'translateY( -' + ( base_value - (top/2)) + 'px)',
|
||||
'opacity' : 1 - opacity
|
||||
if ($title.length <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
$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),
|
||||
$links = $switcher.find('> ul > li'),
|
||||
$tabs = $switcher.find('> .tabs > *'),
|
||||
@@ -278,66 +330,76 @@
|
||||
$links.eq(index).add($tabs.eq(index)).addClass('active');
|
||||
}
|
||||
select(0);
|
||||
$switcher.on('click', '> ul > li', function() {
|
||||
$switcher.on('click', '> ul > li', function () {
|
||||
select($(this).index());
|
||||
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 ==================
|
||||
// =================================
|
||||
// -- Call default functions
|
||||
layouting();
|
||||
cards_animate();
|
||||
init();
|
||||
header_buttons();
|
||||
ripple_animation($(".ripple"));
|
||||
|
||||
if (has_aside) {
|
||||
floating_menu_layout();
|
||||
scroll_to(aside_links);
|
||||
ripple_animation(aside_links);
|
||||
}
|
||||
|
||||
// -- Conditionally call specific functions according to resolution
|
||||
if (win_w >= screen_md){
|
||||
footer_animation();
|
||||
|
||||
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', '');
|
||||
}
|
||||
});
|
||||
(has_aside)? set_affix(): '';
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
z-index: 2;
|
||||
background-color: fade(white, 60%);
|
||||
color: @header-link-normal;
|
||||
font-family: @headings-font-family;
|
||||
font-family: "Work Sans", sans-serif;
|
||||
font-size: 12px;
|
||||
.transition(all .2s ease);
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
// ================================================
|
||||
// ================ Layout =======================
|
||||
// ================================================
|
||||
|
||||
|
||||
// Bootrstrap adaptations
|
||||
// ------------------------------------------------------------------
|
||||
body, header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Index layout
|
||||
#wrap {
|
||||
> .container.index {
|
||||
background-color: @gray-lightest;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
> .index {
|
||||
.container;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main_title {
|
||||
margin: 10px;
|
||||
@media (min-width:@screen-md-min) {
|
||||
margin: 0 0 9px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.container .container {
|
||||
max-width: 100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
article.doc-content *[class^="col-"] {
|
||||
padding:0;
|
||||
.img-responsive {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
main{
|
||||
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-responsive.center-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
main.has_code_col{
|
||||
.container;
|
||||
article.doc-content *[class*="col-"] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
aside {
|
||||
display: none;
|
||||
}
|
||||
|
||||
article.doc-body {
|
||||
width: 100%;
|
||||
// Main Components
|
||||
// ------------------------------------------------------------------
|
||||
#wrap {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
background: @gray-lightest;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
> *{
|
||||
max-width: 100%;
|
||||
main {
|
||||
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;
|
||||
display:block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
|
||||
article.doc-body {
|
||||
.pseudo-col();
|
||||
padding: 15px;
|
||||
|
||||
@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) {
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
&:before {
|
||||
.code-col();
|
||||
}
|
||||
> section {
|
||||
> * {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
article.doc-body {
|
||||
@media (min-width: @screen-md-min) {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main.index .toctree-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
main.has_code_col {
|
||||
max-width: 700px;
|
||||
|
||||
> .row {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
@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%;
|
||||
}
|
||||
@media (min-width: @screen-lg-min) {
|
||||
max-width: @container-lg;
|
||||
}
|
||||
|
||||
// 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 {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.code-fields{
|
||||
display: table;
|
||||
width: 100%;
|
||||
.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;
|
||||
@media screen and (min-width: @screen-md-min){
|
||||
width:20%;
|
||||
padding-right: 20px;
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: .2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
@@ -2,6 +2,25 @@
|
||||
// ================ 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
|
||||
// ------------------------------------------------------------------
|
||||
.o-no-select {
|
||||
@@ -131,65 +150,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Elevation Shadows
|
||||
// Visual cue indicating the amount of separation between surfaces.
|
||||
// An object’s elevation determines the appearance of its shadow.
|
||||
// ------------------------------------------------------------------
|
||||
.deep-1-shadow() {
|
||||
// Shadows
|
||||
// --------------------------------------------------
|
||||
.deep-1() {
|
||||
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) {
|
||||
-webkit-transform : @args;
|
||||
@@ -199,7 +164,8 @@
|
||||
transform : @args;
|
||||
}
|
||||
|
||||
//-- Material Design Icons
|
||||
// Material Design Icons
|
||||
// --------------------------------------------------
|
||||
.mdi-icon(@content) {
|
||||
font-family: 'Material-Design-Icons';
|
||||
content: @content;
|
||||
@@ -210,13 +176,8 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.keyframes(@name; @arguments) {
|
||||
@-moz-keyframes @name { @arguments(); }
|
||||
@-webkit-keyframes @name { @arguments(); }
|
||||
@keyframes @name { @arguments(); }
|
||||
}
|
||||
|
||||
//-- Documentation Dropdown style
|
||||
// Documentation Dropdown style
|
||||
// --------------------------------------------------
|
||||
.o-doc-dropdown {
|
||||
> a.dropdown-toggle {
|
||||
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{
|
||||
display: none;
|
||||
}
|
||||
.fadeInUp, .fadeIn{
|
||||
.opacity(1)!important;
|
||||
.animation(none);
|
||||
}
|
||||
|
||||
#main_navbar{
|
||||
position: relative;
|
||||
|
||||
+1116
-1509
File diff suppressed because it is too large
Load Diff
@@ -6,9 +6,10 @@
|
||||
@import "variables";
|
||||
|
||||
@import "mixins";
|
||||
@import "animations";
|
||||
@import "typography";
|
||||
@import "components";
|
||||
@import "layout";
|
||||
@import "index";
|
||||
@import "header";
|
||||
@import "footer";
|
||||
@import "aside";
|
||||
@@ -71,7 +72,6 @@
|
||||
line-height: @w-sub-nav-height;
|
||||
letter-spacing: -0.1px;
|
||||
word-spacing: -1px;
|
||||
font-size: 0.9em;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
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
|
||||
@@ -823,6 +259,4 @@ pre {
|
||||
// Theme tutorial
|
||||
#thinking-modular > .clearfix.themes {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -1,21 +1,20 @@
|
||||
// =============================================================================
|
||||
// Typography
|
||||
// =============================================================================
|
||||
@margin-base: 5px;
|
||||
|
||||
// Font rendering
|
||||
// ----------------------------------------
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
// Headings
|
||||
// ----------------------------------------
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-rendering: geometricPrecision;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.4;
|
||||
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.has_code_col .doc-aside &{
|
||||
@@ -24,35 +23,152 @@ h1, h2, h3, h4, h5, h6,
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, .h1, .h2 {
|
||||
margin-top: @line-height-computed * 1.5;
|
||||
font-weight: @fw_light;
|
||||
b, strong, a {
|
||||
font-weight: @fw_regular;
|
||||
.headings-margin-small () {
|
||||
> h2, > h3, > h4, > h5, > h6 {
|
||||
margin-top: @margin-base*2;
|
||||
}
|
||||
}
|
||||
|
||||
h3, .h3, h4, .h4, h5, h6, .h5, .h6 {
|
||||
font-weight: @fw_regular;
|
||||
b, strong, a {
|
||||
font-weight: @fw_medium;
|
||||
}
|
||||
}
|
||||
h4, .h4, h5, h6, .h5, .h6 {
|
||||
margin-top: @line-height-computed;
|
||||
margin-bottom: (@line-height-computed / 3);
|
||||
.headings-bordered () {
|
||||
padding-bottom: @margin-base;
|
||||
border-bottom: 2px solid #f4f6f7;
|
||||
}
|
||||
|
||||
// Lists
|
||||
// ----------------------------------------
|
||||
article.doc-body {
|
||||
|
||||
ul, ol {
|
||||
&:not(:empty) {
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
}
|
||||
ul, ol {
|
||||
&:not(:empty) {
|
||||
margin-bottom: (@line-height-computed / 3);
|
||||
// Vertical rhythm
|
||||
> section {
|
||||
padding-bottom: @margin-base*2;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> 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
|
||||
// ===============================================
|
||||
|
||||
//== Fonts
|
||||
@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&subset=latin,latin-ext);
|
||||
|
||||
//== Font sizes/weigths
|
||||
@font-size-base : 15px;
|
||||
@font-size-base : 16px;
|
||||
|
||||
@fw_light : 300;
|
||||
@fw_regular : 400;
|
||||
@@ -91,19 +88,20 @@
|
||||
@fw_bold : 700;
|
||||
|
||||
//== Paragraphs
|
||||
@font-family-base : -apple-system, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif;
|
||||
@text-color : saturate(@gray-dark, 5%);
|
||||
@font-family-base : -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
@text-color : #373e42;
|
||||
|
||||
//== Headings
|
||||
@headings-color : saturate(@gray-darker, 15%);
|
||||
@headings-font-family : "Work Sans", sans-serif;
|
||||
@headings-font-weight : @fw_light;
|
||||
@headings-font-family : @font-family-base;
|
||||
@headings-font-weight : @fw_regular;
|
||||
@headings-small-color : @headings-color;
|
||||
|
||||
@display1-size : 6rem;
|
||||
@display2-size : 5.5rem;
|
||||
@display3-size : 4.5rem;
|
||||
@display4-size : 3.5rem;
|
||||
@font-size-h2: 30px;
|
||||
@font-size-h3: 24px;
|
||||
@font-size-h4: 19px;
|
||||
@font-size-h5: 17px;
|
||||
@font-size-h6: 17px;
|
||||
|
||||
//== Global textual link color.
|
||||
@link-color : @o-violet-dark;
|
||||
@@ -160,8 +158,7 @@
|
||||
|
||||
// Cards
|
||||
// --------------------------------------------------
|
||||
@card_min-height: 200px;
|
||||
@card_margin-bottom: 20px;
|
||||
@card_margin-bottom: 25px;
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -312,9 +312,9 @@ class BootstrapTranslator(nodes.NodeVisitor, object):
|
||||
|
||||
def visit_title(self, node):
|
||||
parent = node.parent
|
||||
closing = u'</p>'
|
||||
closing = u'</h3>'
|
||||
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):
|
||||
self.body.append(self.starttag(node, 'h1'))
|
||||
closing = u'</h1>'
|
||||
@@ -633,9 +633,9 @@ class BootstrapTranslator(nodes.NodeVisitor, object):
|
||||
classes = env.metadata[ref].get('types', 'tutorials')
|
||||
classes += ' toc-single-entry' if not toc else ' toc-section'
|
||||
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(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'])
|
||||
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.
|
||||
|
||||
.. 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::
|
||||
: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.
|
||||
|
||||
Odoo default theme structure
|
||||
----------------------------
|
||||
|
||||
.. container:: col-sm-8
|
||||
.. container:: row
|
||||
|
||||
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-8
|
||||
|
||||
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
|
||||
* Website Builder integration
|
||||
* Basic Snippets
|
||||
* Automatic Less/Sass compiling
|
||||
* Automatic Js and CSS minification and combination
|
||||
.. container:: col-md-6
|
||||
|
||||
.. 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
|
||||
* jQuery
|
||||
* jQuery UI
|
||||
* underscore.js
|
||||
.. container:: col-md-6
|
||||
|
||||
**Main technologies:**
|
||||
|
||||
* Twitter Bootstrap
|
||||
* jQuery
|
||||
* jQuery UI
|
||||
* underscore.js
|
||||
|
||||
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:
|
||||
|
||||
.. row
|
||||
.. container:: row
|
||||
|
||||
.. figure:: theme_tutorial_assets/img/snippet.jpg
|
||||
:figclass: col-sm-6
|
||||
.. figure:: theme_tutorial_assets/img/snippet.jpg
|
||||
: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
|
||||
:figclass: col-sm-6
|
||||
.. figure:: theme_tutorial_assets/img/page.jpg
|
||||
: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
|
||||
|
||||
<div class="clearfix themes"></div>
|
||||
|
||||
.. figure:: theme_tutorial_assets/img/styles.jpg
|
||||
:figclass: col-sm-6
|
||||
.. container:: row
|
||||
|
||||
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
|
||||
: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.
|
||||
|
||||
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
|
||||
-----------------------------
|
||||
@@ -182,17 +186,19 @@ Keep reading the tutorial to learn to how properly extend it with your own code.
|
||||
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.
|
||||
|
||||
``data-selector=" css selector(s) "``
|
||||
``data-selector="[css selector(s)]"``
|
||||
Bind all the options included into the group to a particular element.
|
||||
``data-js=" custom method name "``
|
||||
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.
|
||||
``data-drop-near=" css selector(s) "``
|
||||
``data-drop-near="[css selector(s)]"``
|
||||
Defines the list of elements that the snippet can be dropped beside.
|
||||
|
||||
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.
|
||||
|
||||
``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.
|
||||
|
||||
``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.
|
||||
|
||||
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.
|
||||
|
||||
.. 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
|
||||
========================================
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
:banner: banners/enterprise.jpg
|
||||
.. _setup/enterprise:
|
||||
|
||||
============================
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
:banner: banners/iap.jpg
|
||||
:types: api
|
||||
|
||||
.. _webservices/iap:
|
||||
|
||||
Reference in New Issue
Block a user