kosta (kts)
Antoine Vandevenne (anv)
parent
52e49eda47
commit
4203285f93
@ -201,16 +201,6 @@
|
|||||||
<a href="http://www.odoo.com/trial" class="btn btn-primary">Start Now</a>
|
<a href="http://www.odoo.com/trial" class="btn btn-primary">Start Now</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="navbar-nav navbar-right nav o_sub_nav_actions">
|
|
||||||
{% if pagename != master_doc %}
|
|
||||||
<li class="divider"></li>
|
|
||||||
{% endif%}
|
|
||||||
|
|
||||||
{% block switchers_desktop %}
|
|
||||||
{% include "switchers_list.html" %}
|
|
||||||
{% endblock %}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<ul class="nav navbar-nav navbar-right">
|
||||||
{% if languages or versions %}
|
{% if languages or versions %}
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
@ -224,6 +214,16 @@
|
|||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<ul class="navbar-nav navbar-right nav o_sub_nav_actions">
|
||||||
|
{% if pagename != master_doc %}
|
||||||
|
<li class="divider"></li>
|
||||||
|
{% endif%}
|
||||||
|
|
||||||
|
{% block switchers_desktop %}
|
||||||
|
{% include "switchers_list.html" %}
|
||||||
|
{% endblock %}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
@ -247,10 +247,9 @@
|
|||||||
{% else %}
|
{% else %}
|
||||||
{% set container = 'container' %}
|
{% set container = 'container' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="{{ container}} {{ ' '.join(classes) }}">
|
<main class="container {{ ' '.join(classes) }}">
|
||||||
<main class="container-fluid {{ ' '.join(classes) }}">
|
|
||||||
{% if pagename != master_doc %}
|
{% if pagename != master_doc %}
|
||||||
<div class="row">
|
<div class="o_content row">
|
||||||
{% if 'has-toc' not in meta and not (pagename in toc) %}
|
{% if 'has-toc' not in meta and not (pagename in toc) %}
|
||||||
<aside>
|
<aside>
|
||||||
<div class="navbar-aside text-center">
|
<div class="navbar-aside text-center">
|
||||||
@ -263,7 +262,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<article class="doc-body {% if 'has-toc' in meta %}doc-toc{% endif %} {% if pagename in toc%}index-category{% endif %}">
|
<article class="doc-body {% if 'has-toc' in meta %}doc-toc{% endif %}{% if pagename in toc%}index-category{% endif %}">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% block body %} {% endblock %}
|
{% block body %} {% endblock %}
|
||||||
{% if pagename != master_doc %}</article>
|
{% if pagename != master_doc %}</article>
|
||||||
@ -271,7 +270,6 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
<div id="mask"></div>
|
<div id="mask"></div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="floating_action_container">
|
<div class="floating_action_container">
|
||||||
@ -311,29 +309,33 @@
|
|||||||
<div class="col-xs-6 col-sm-4">
|
<div class="col-xs-6 col-sm-4">
|
||||||
<span class="menu_title">Services</span>
|
<span class="menu_title">Services</span>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="http://www.odoo.com/pricing">Editions</a></li>
|
<li><a href="https://www.odoo.sh">Odoo Cloud Platform</a></li>
|
||||||
<li><a href="http://www.odoo.com/pricing-online">Cloud Pricing</a></li>
|
<li class="divider"></li>
|
||||||
<li><a href="http://www.odoo.com/page/upgrade">Upgrade</a></li>
|
<li><a href="http://www.odoo.com/help">Support</a></li>
|
||||||
|
<li><a href="https://upgrade.odoo.com">Upgrade</a></li>
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
<li><a href="http://www.odoo.com/partners">Find a partner</a></li>
|
<li><a href="http://www.odoo.com/partners">Find a partner</a></li>
|
||||||
<li><a href="http://www.odoo.com/page/become-a-partner">Become a partner</a></li>
|
<li><a href="http://www.odoo.com/page/become-a-partner">Become a partner</a></li>
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
|
<li><a href="http://training.odoo.com/courses/odoo-functional">Training Center</a></li>
|
||||||
<li><a href="http://www.odoo.com/page/education-program">Education</a></li>
|
<li><a href="http://www.odoo.com/page/education-program">Education</a></li>
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
<li><a href="http://www.odoo.com/page/security">Security</a></li>
|
<li><a href="http://www.odoo.com/page/security">Security</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-4 mb64">
|
<div class="col-xs-12 col-sm-4 mb64">
|
||||||
<span class="menu_title">About us</span>
|
<span class="menu_title">About us</span>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="http://www.odoo.com/page/about-us">Our company</a></li>
|
<li><a href="http://www.odoo.com/page/about-us">Our company</a></li>
|
||||||
<li><a href="http://www.odoo.com/page/contactus">Contact</a></li>
|
<li><a href="http://www.odoo.com/page/contactus">Contact</a></li>
|
||||||
<li class="divider" />
|
<li class="divider" />
|
||||||
<li><a href="http://www.odoo.com/event">Events</a></li>
|
<li><a href="http://www.odoo.com/event">Events</a></li>
|
||||||
<li><a href="http://www.odoo.com/blog/">Blog</a></li>
|
<li><a href="http://www.odoo.com/blog">Blog</a></li>
|
||||||
<li><a href="http://www.odoo.com/blog/6">Customers</a></li>
|
<li><a href="http://www.odoo.com/blog/6">Customers</a></li>
|
||||||
<li class="divider" />
|
<li class="divider" />
|
||||||
<li><a href="http://www.odoo.com/jobs">Jobs</a></li>
|
<li><a href="http://www.odoo.com/jobs">Jobs</a></li>
|
||||||
|
<li class="divider" />
|
||||||
|
<li><a href="http://www.odoo.com/page/legal">Legal</a> | <a href="http://www.odoo.com/privacy">Privacy</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -362,3 +364,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
{%- endblock -%}
|
{%- endblock -%}
|
||||||
|
|
||||||
|
|||||||
@ -1,113 +1,91 @@
|
|||||||
// ====== Aside =======
|
// ====== Aside =======
|
||||||
// ======================
|
// ======================
|
||||||
|
|
||||||
|
aside {
|
||||||
|
.pseudo-col();
|
||||||
|
width: 100%;
|
||||||
|
max-width: 240px;
|
||||||
|
position: static;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
border-right: 1px solid @gray-lighter;
|
||||||
|
|
||||||
|
@media (max-width:@screen-md-min) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-aside {
|
.navbar-aside {
|
||||||
position : relative;
|
position: relative;
|
||||||
overflow : hidden;
|
overflow: hidden;
|
||||||
font-family : @headings-font-family;
|
font-family: @headings-font-family;
|
||||||
font-size : 0.85em;
|
font-size: 0.85em;
|
||||||
line-height : 1.5;
|
line-height: 1.5;
|
||||||
font-weight : @fw_medium;
|
overflow-y: auto;
|
||||||
overflow-y : auto;
|
|
||||||
height : 100%;
|
|
||||||
|
|
||||||
&.affix {
|
&.affix {
|
||||||
z-index : 2;
|
z-index: 2;
|
||||||
top : @w-sub-nav-height - 1;
|
top: @w-sub-nav-height - 1;
|
||||||
position : fixed;
|
position: fixed;
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
|
|
||||||
@media (max-width:@screen-md-min) {
|
@media (max-width:@screen-md-min) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> ul.list-group {
|
> ul.list-group {
|
||||||
margin : 0;
|
margin: 0;
|
||||||
z-index : 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> h3 {
|
> h3 {
|
||||||
margin : 0;
|
margin: 0;
|
||||||
padding : 15px 0 10px;
|
padding: 15px 0 10px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight : @fw_semibold;
|
font-weight: @fw_semibold;
|
||||||
font-size : 16px;
|
font-size: 16px;
|
||||||
color : @text-color;
|
color: @text-color;
|
||||||
overflow-x : hidden;
|
overflow-x: hidden;
|
||||||
position : relative;
|
position: relative;
|
||||||
z-index : 1;
|
z-index: 1;
|
||||||
.box-shadow(0 10px 9px -10px #d2d2d2);
|
.box-shadow(0 10px 9px -10px #d2d2d2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo_box {
|
|
||||||
width : 100%;
|
|
||||||
background : rgb(253, 253, 253);
|
|
||||||
position : relative;
|
|
||||||
display : block;
|
|
||||||
padding : 15px 30px 10px;
|
|
||||||
border-bottom: 1px solid fadeout(@text-color, 90%);
|
|
||||||
text-align : center;
|
|
||||||
.box-shadow(inset 0px 0 40px rgba(114, 122, 142, .1));
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
float : left;
|
|
||||||
width : 90%;
|
|
||||||
margin : auto auto 10px 5%;
|
|
||||||
height : 50px;
|
|
||||||
background-image : url('img/odoo_logo_rgb.png');
|
|
||||||
background-repeat : no-repeat;
|
|
||||||
background-position: center center;
|
|
||||||
background-size : contain;
|
|
||||||
text-decoration : none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.gith-container {
|
.gith-container {
|
||||||
margin : 0;
|
margin: 0;
|
||||||
z-index : 1;
|
z-index: 1;
|
||||||
position : relative;
|
position: relative;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
.gith-link {
|
.gith-link {
|
||||||
font-weight : 600;
|
color: @text-color;
|
||||||
color : @text-color;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
position : relative;
|
position: relative;
|
||||||
margin : 10px 0;
|
margin: 10px 0;
|
||||||
.transition(color .2s);
|
font-family: @font-family-base;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color : @headings-color;
|
color: @headings-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
.size(20px;20px);
|
.square(1em);
|
||||||
.opacity(.5);
|
content: '';
|
||||||
content : '';
|
position: relative;
|
||||||
position : relative;
|
|
||||||
background-image: url('img/github-square_32.png');
|
background-image: url('img/github-square_32.png');
|
||||||
background-size : 100%;
|
background-size: 100%;
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
vertical-align : middle;
|
vertical-align: middle;
|
||||||
.translate(0;-1px);
|
.translate(0;-1px);
|
||||||
.transition(opacity .2s);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
|
||||||
&:before {
|
|
||||||
.opacity(1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//-- All menu levels
|
//-- All menu levels
|
||||||
ul {
|
ul {
|
||||||
padding : 0;
|
padding: 0;
|
||||||
position : relative;
|
position: relative;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
@ -120,37 +98,64 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
overflow : hidden;
|
overflow: hidden;
|
||||||
border-radius: 2px 0 0 0;
|
border-radius: 2px 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 5px 15px;
|
padding: 5px 15px;
|
||||||
color : @text-color;
|
color: @text-color;
|
||||||
|
line-height: 1.2;
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:focus, &:hover {
|
||||||
color: @headings-color;
|
color: @headings-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.parent > a:after{
|
||||||
|
content: '\e7c1';
|
||||||
|
font-family: 'Material-Design-Icons';
|
||||||
|
opacity: 0.8;
|
||||||
|
margin-top: -6px;
|
||||||
|
.o-position-absolute(50%, 10px);
|
||||||
|
.rotate(90deg);
|
||||||
|
.transition(transform 0.2s);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.parent.active > a:after{
|
||||||
|
.rotate(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//-- Inner menu list
|
//-- Inner menu list
|
||||||
ul {
|
ul {
|
||||||
max-height : 0;
|
max-height: 0;
|
||||||
background-color: @gray-lighter;
|
background-color: fade(@gray-light, 20%);
|
||||||
padding-left : 15px;
|
padding: 0px;
|
||||||
overflow : hidden;
|
overflow: hidden;
|
||||||
|
margin-left: 0;
|
||||||
|
box-shadow: inset 0 3px 5px -2px @gray-light;
|
||||||
.transition(max-height 0.3s @o-ease);
|
.transition(max-height 0.3s @o-ease);
|
||||||
|
|
||||||
|
> li:not(:last-child) {
|
||||||
|
box-shadow: 0 1px 0 fade(black, 4%);
|
||||||
|
|
||||||
|
&.active > ul > li:not(:first-child) {
|
||||||
|
border-top: 1px solid @gray-lighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//-- Active lis
|
//-- Active lis
|
||||||
li.active {
|
li.active {
|
||||||
&, &:hover, &:focus {
|
&, &:focus, &:hover {
|
||||||
border-color: @gray-lighter;
|
border-color: @gray-lighter;
|
||||||
background : transparent;
|
background: transparent;
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
|
font-weight: bold;
|
||||||
color: @headings-color;
|
color: @headings-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -162,32 +167,44 @@
|
|||||||
|
|
||||||
// First menu level
|
// First menu level
|
||||||
> ul > li {
|
> ul > li {
|
||||||
border-bottom: 1px solid @gray-lighter;
|
background: white;
|
||||||
background : white;
|
border-bottom: 1px solid fade(black, 8%);
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
|
border-left: 3px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:focus, &:hover {
|
||||||
> a {
|
> a {
|
||||||
box-shadow : inset 5px 0 0 -3px @gray-light;
|
border-left: 3px solid @gray-light;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active, &.active:hover, &.active:focus{
|
&.active, &.active:focus, &.active:hover {
|
||||||
> a {
|
> a {
|
||||||
box-shadow : inset 5px 0 0 -3px @brand-primary;
|
border-left: 3px solid @brand-primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.parent {
|
&.active.parent + li {
|
||||||
> a:after {
|
box-shadow: 0 -3px 5px -4px fade(@gray-darker, 40%);
|
||||||
content : '\e7c1';
|
}
|
||||||
font-family: 'Material-Design-Icons';
|
|
||||||
opacity : 0.5;
|
> ul > li {
|
||||||
.o-position-absolute(auto, 10px);
|
> a {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul > li {
|
||||||
|
> a {
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul > li > a {
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -195,25 +212,23 @@
|
|||||||
|
|
||||||
.floating_action_container {
|
.floating_action_container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right : 8px;
|
right: 8px;
|
||||||
bottom : 8px;
|
bottom: 8px;
|
||||||
width : auto;
|
width: auto;
|
||||||
z-index : @zIndex--float_action;
|
z-index: @zIndex--float_action;
|
||||||
|
|
||||||
@media (min-width:@screen-md-min) {
|
@media (min-width:@screen-md-min) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#floating_action {
|
#floating_action {
|
||||||
width : 56px;
|
.square(56px);
|
||||||
height : 56px;
|
display: inline-block;
|
||||||
display : inline-block;
|
z-index: 0;
|
||||||
z-index : 0;
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-radius : 50%;
|
border-radius: 50%;
|
||||||
padding : 16px;
|
padding: 16px;
|
||||||
box-shadow : 0 8px 17px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
|
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
|
||||||
background-color: @brand-primary;
|
background-color: @brand-primary;
|
||||||
.transition(transform 500ms @o-ease);
|
.transition(transform 500ms @o-ease);
|
||||||
|
|
||||||
@ -222,55 +237,52 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
.transform(~"translateZ(0px) rotateZ(-180deg)");
|
.transform(~ "translateZ(0px) rotateZ(-180deg)");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#floating_action_menu {
|
#floating_action_menu {
|
||||||
position : absolute;
|
.o-position-absolute(auto,0,0);
|
||||||
z-index : 1;
|
z-index: 1;
|
||||||
overflow : hidden;
|
overflow: hidden;
|
||||||
right : 0;
|
width: 380px;
|
||||||
width : 380px;
|
padding: 0;
|
||||||
bottom : 0;
|
display: block;
|
||||||
padding : 0;
|
|
||||||
display : block;
|
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
visibility : hidden;
|
visibility: hidden;
|
||||||
.transition(all 0.5s);
|
.transition(all 0.5s);
|
||||||
.box-shadow(0 0 0 transparent);
|
.box-shadow(0 0 0 transparent);
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
.opacity(0);
|
opacity:0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
border : none;
|
border: none;
|
||||||
border-top: 1px solid #DDD;
|
border-top: 1px solid #DDD;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
cursor : pointer;
|
cursor: pointer;
|
||||||
color : @headings-color;
|
color: @headings-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
float : left;
|
float: left;
|
||||||
width : 100%;
|
width: 100%;
|
||||||
padding : 5px 10px;
|
padding: 5px 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bubble {
|
.bubble {
|
||||||
position : absolute;
|
.o-position-absolute(auto,28px,28px);
|
||||||
.size(1px; 1px);
|
.square(1px);
|
||||||
background : @brand-primary;
|
background: @brand-primary;
|
||||||
content : '';
|
content: '';
|
||||||
bottom : 28px;
|
color: #fff;
|
||||||
right : 28px;
|
|
||||||
color : #fff;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
.transition(all 300ms @o-ease);
|
.transition(all 300ms @o-ease);
|
||||||
}
|
}
|
||||||
@ -281,17 +293,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
display : block;
|
display: block;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
.transition(all 500ms @o-ease);
|
.transition(all 500ms @o-ease);
|
||||||
|
|
||||||
.bubble, &:before {
|
&:before, .bubble {
|
||||||
.size(1000px; 2000px);
|
.size(1000px; 2000px);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
.opacity(0);
|
opacity: 0;
|
||||||
margin-right : -500px;
|
margin-right: -500px;
|
||||||
margin-bottom: -500px;
|
margin-bottom: -500px;
|
||||||
display : block;
|
display: block;
|
||||||
.transition(all .4s @o-ease);
|
.transition(all .4s @o-ease);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -301,9 +313,27 @@
|
|||||||
|
|
||||||
.content {
|
.content {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index : 1;
|
z-index: 1;
|
||||||
.opacity(1);
|
.opacity(1);
|
||||||
.transition(all 500ms @ease-material-3);
|
.transition(all 500ms @ease-material-3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#mask {
|
||||||
|
.opacity(0);
|
||||||
|
position: fixed;
|
||||||
|
z-index: @zIndex--mask;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
.size(100%; 0);
|
||||||
|
background-color: fade(black, 20%);
|
||||||
|
.transition(opacity .3s);
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.opacity(1);
|
||||||
|
display: block;
|
||||||
|
.square(100%);
|
||||||
|
.transition(opacity .3s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
516
_extensions/odoo/static/components.less
Normal file
516
_extensions/odoo/static/components.less
Normal file
@ -0,0 +1,516 @@
|
|||||||
|
// ================================================
|
||||||
|
// ================ 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);
|
||||||
|
.o-gradient();
|
||||||
|
|
||||||
|
@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);
|
||||||
|
}
|
||||||
@ -1,6 +1,15 @@
|
|||||||
(function ($) {
|
(function ($) {
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(function () {
|
||||||
|
|
||||||
|
// -- Initialize fallbacks for requestAnimationFrame
|
||||||
|
window.requestAnimationFrame = window.requestAnimationFrame
|
||||||
|
|| window.webkitRequestAnimationFrame
|
||||||
|
|| window.mozRequestAnimationFrame
|
||||||
|
|| window.msRequestAnimationFrame
|
||||||
|
|| window.oRequestAnimationFrame
|
||||||
|
|| function (callback) { setTimeout(callback, 10); };
|
||||||
|
|
||||||
|
|
||||||
// ======= Define variables =======
|
// ======= Define variables =======
|
||||||
// =================================
|
// =================================
|
||||||
@ -12,14 +21,33 @@
|
|||||||
win_w = $win.width();
|
win_w = $win.width();
|
||||||
|
|
||||||
// -- Main elements
|
// -- Main elements
|
||||||
var $body = $('body'),
|
var $body = $('body'),
|
||||||
$header = $body.find('> header'),
|
$header = $body.find('> header'),
|
||||||
$sub_nav = $header.find(".o_sub_nav");
|
$sub_nav = $header.find(".o_sub_nav"),
|
||||||
$wrap = $body.find('> #wrap'),
|
$wrap = $body.find('> #wrap'),
|
||||||
$card_top = $wrap.find('> .card.top'),
|
$main = $wrap.find('main'),
|
||||||
$card_top_t = $card_top.find('> .container'),
|
$footer = $body.find('> footer');
|
||||||
$main = $wrap.find('main'),
|
|
||||||
$footer = $body.find('> footer');
|
// -- Detect page type
|
||||||
|
var page_type = (function () {
|
||||||
|
if ($wrap.hasClass('index')) {
|
||||||
|
return 'index';
|
||||||
|
} else if ($main.find('article').hasClass('doc-tocindex-category')){
|
||||||
|
return 'category-index';
|
||||||
|
} else {
|
||||||
|
return 'article';
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
// -- CP > "Card Top"
|
||||||
|
var $cp = $wrap.find('> .card.top'),
|
||||||
|
$cp_image = $cp.find('> .card-img'),
|
||||||
|
$cp_text = $cp.find('> .container'),
|
||||||
|
|
||||||
|
cp_h = $cp.outerHeight(),
|
||||||
|
has_cp_image = $cp_image.length > 0,
|
||||||
|
cp_image_alpha = has_cp_image ? $cp_image.css('opacity') : undefined,
|
||||||
|
cp_end_point = has_cp_image ? cp_h/2 : undefined;
|
||||||
|
|
||||||
// -- Floating action
|
// -- Floating action
|
||||||
var $mask = $body.find('#mask'),
|
var $mask = $body.find('#mask'),
|
||||||
@ -27,37 +55,34 @@
|
|||||||
$float_menu = $body.find("#floating_action_menu");
|
$float_menu = $body.find("#floating_action_menu");
|
||||||
|
|
||||||
// -- Elements' heights
|
// -- Elements' heights
|
||||||
var body_h = $body.height(),
|
var body_h = $body.height(),
|
||||||
header_h = $header.outerHeight(),
|
header_h = $header.outerHeight(),
|
||||||
sub_nav_h = $sub_nav.height();
|
main_h = $main.height(),
|
||||||
|
sub_nav_h = $sub_nav.height();
|
||||||
|
|
||||||
// -- Aside
|
// -- Aside
|
||||||
var $aside = $main.find('aside'),
|
var $aside = $main.find('aside'),
|
||||||
has_aside = $aside.length > 0,
|
has_aside = $aside.length > 0,
|
||||||
$aside_nav = undefined;
|
$aside_nav = has_aside ? $aside.find('> .navbar-aside') : undefined,
|
||||||
aside_links = undefined;
|
aside_links = has_aside ? $aside_nav.find("li > a") : undefined;
|
||||||
|
|
||||||
|
|
||||||
if (has_aside) {
|
|
||||||
$aside_nav = $aside.find('> .navbar-aside');
|
|
||||||
aside_links = $aside_nav.find("li > a");
|
|
||||||
}
|
|
||||||
|
|
||||||
// ======= Affix =================
|
// ======= Affix =================
|
||||||
// ===============================
|
// ===============================
|
||||||
function set_affix(body_h) {
|
function set_affix() {
|
||||||
var aside_offset = $aside.offset().top - sub_nav_h,
|
var aside_offset_top = $aside.offset().top - sub_nav_h,
|
||||||
aside_width = $aside.width(),
|
aside_offset_bot = parseInt($wrap.css('padding-bottom')),
|
||||||
main_bottom = 40;
|
aside_width = $aside.width();
|
||||||
|
|
||||||
$aside_nav.css('width', aside_width);
|
$aside.css('height', main_h);
|
||||||
$aside_nav.affix({
|
$aside_nav.css('width', aside_width).affix({
|
||||||
target: window,
|
|
||||||
offset: {
|
offset: {
|
||||||
top : aside_offset,
|
top : aside_offset_top,
|
||||||
bottom : main_bottom
|
bottom : aside_offset_bot,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
|
||||||
// ======= Footer animations =====
|
// ======= Footer animations =====
|
||||||
// ===============================
|
// ===============================
|
||||||
@ -67,22 +92,22 @@
|
|||||||
if (!footer_effect) {
|
if (!footer_effect) {
|
||||||
footer_stop();
|
footer_stop();
|
||||||
return;
|
return;
|
||||||
};
|
}
|
||||||
|
|
||||||
$footer.toggleClass('o_footer_effect', footer_effect);
|
$footer.toggleClass('o_footer_effect', footer_effect);
|
||||||
$body.css('padding-bottom', $footer.outerHeight());
|
$body.css('padding-bottom', $footer.outerHeight());
|
||||||
|
|
||||||
var checkIfSearch = function(e) {
|
var checkIfSearch = function (e) {
|
||||||
if ((e.ctrlKey || e.metaKey) && String.fromCharCode(e.which).toLowerCase() === 'f') {
|
if ((e.ctrlKey || e.metaKey) && String.fromCharCode(e.which).toLowerCase() === 'f') {
|
||||||
footer_stop();
|
footer_stop();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
$win.on('keydown.footer', function(e) {
|
$win.on('keydown.footer', function (e) {
|
||||||
checkIfSearch(e);
|
checkIfSearch(e);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
var footer_stop = function() {
|
var footer_stop = function () {
|
||||||
$footer.removeClass('o_footer_effect');
|
$footer.removeClass('o_footer_effect');
|
||||||
$body.css('padding-bottom', 0);
|
$body.css('padding-bottom', 0);
|
||||||
$win.off('keydown.footer');
|
$win.off('keydown.footer');
|
||||||
@ -92,24 +117,59 @@
|
|||||||
// ======= Docs Functions ==========
|
// ======= Docs Functions ==========
|
||||||
// =================================
|
// =================================
|
||||||
// -- Layouting
|
// -- Layouting
|
||||||
var layouting = function () {
|
var init = function () {
|
||||||
if ($main.hasClass("index")) {
|
var $floating_container = $body.find("> .floating_action_container");
|
||||||
$main.find("#index .index-tree > .row").each(function() {
|
|
||||||
var childs = $(this).find(".col-md-3");
|
// Adapt Title font size according to its length
|
||||||
if (childs.length == 2) {
|
$cp_text
|
||||||
childs.removeClass("col-md-3").addClass("col-md-6");
|
.toggleClass('o_short_title', $cp_text.text().trim().length < 15)
|
||||||
}
|
.toggleClass('o_long_title', $cp_text.text().trim().length > 45);
|
||||||
if (childs.length == 3) {
|
|
||||||
childs.removeClass("col-md-3").addClass("col-md-4");
|
if (page_type == 'index') {
|
||||||
}
|
var half_cols_selector = '.tutorials,.api';
|
||||||
})
|
|
||||||
$(".floating_action_container").remove();
|
$main.find("#index .index-tree").find(half_cols_selector)
|
||||||
|
.wrap('<div class="o_half_col col-sm-6"/>')
|
||||||
|
.find('.col-md-3').removeClass('col-md-3 col-sm-6').addClass('col-sm-12 col-md-6');
|
||||||
|
|
||||||
|
var half_cols_els = $main.find(".o_half_col");
|
||||||
|
for(var i = 0; i < half_cols_els.length; i+=2) {
|
||||||
|
half_cols_els.slice(i, i+2).wrapAll("<div class='row'></div>");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (has_aside) { $aside_nav.find("li").has("ul").addClass("parent"); };
|
|
||||||
}
|
if (page_type == 'index' || page_type == 'category-index') {
|
||||||
|
$floating_container.add($mask).remove();
|
||||||
|
$main.toggleClass('o_slim_page', page_type == 'category-index');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (page_type == 'article') {
|
||||||
|
attach_permalink_markers();
|
||||||
|
|
||||||
|
// Hide empty-permalink first sections
|
||||||
|
var $f_s = $main.find('article.doc-body > section:first-child');
|
||||||
|
$f_s.toggleClass('hidden', $f_s[0].childElementCount == 1 && $f_s.children().is('i:empty'));
|
||||||
|
|
||||||
|
if (has_aside) {
|
||||||
|
if (aside_links.length < 2) {
|
||||||
|
has_aside = false;
|
||||||
|
$main.addClass("o_aside_removed");
|
||||||
|
$floating_container.add($mask).add($aside).remove();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
floating_menu_layout();
|
||||||
|
set_scroll_to(aside_links);
|
||||||
|
ripple_animation(aside_links);
|
||||||
|
$aside_nav.find("li").has("ul").addClass("parent");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bind_window_events();
|
||||||
|
};
|
||||||
|
|
||||||
// -- Float action menu
|
// -- Float action menu
|
||||||
var floating_menu_layout = function() {
|
var floating_menu_layout = function () {
|
||||||
var lis = $aside_nav.find("> ul > li").clone(true)
|
var lis = $aside_nav.find("> ul > li").clone(true)
|
||||||
.addClass("ripple")
|
.addClass("ripple")
|
||||||
.css({
|
.css({
|
||||||
@ -117,53 +177,46 @@
|
|||||||
overflow: 'hidden'
|
overflow: 'hidden'
|
||||||
});
|
});
|
||||||
lis.find("ul").remove().end()
|
lis.find("ul").remove().end()
|
||||||
.find("a").removeClass("ripple").on("click", function() {
|
.find("a").removeClass("ripple").on("click", function () {
|
||||||
floating_menu_toggle();
|
_toggle_float();
|
||||||
});
|
});
|
||||||
$float_menu.find(".content").empty().append(lis);
|
$float_menu.find(".content").empty().append(lis);
|
||||||
$float.add($mask).on("click", function () {
|
$float.add($mask).on("click", function () {
|
||||||
floating_menu_toggle();
|
_toggle_float();
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
}
|
|
||||||
var floating_menu_toggle = function() {
|
|
||||||
$float.toggleClass("active");
|
|
||||||
setTimeout(function() {
|
|
||||||
$float_menu.toggleClass("active");
|
|
||||||
$mask.toggleClass("active");
|
|
||||||
}, 300);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// -- Scroll To
|
// -- Scroll To
|
||||||
var scroll_to = function(el_list) {
|
var set_scroll_to = function (el_list) {
|
||||||
var offset = 80;
|
el_list.each(function () {
|
||||||
el_list.each(function() {
|
var $link = $(this),
|
||||||
var $link = $(this),
|
target_id = $link.attr("href");
|
||||||
href = $link.attr("href");
|
|
||||||
|
|
||||||
$link.on("click", function() {
|
$link.on("click", function () {
|
||||||
var val = $(href).offset().top - 60;
|
|
||||||
$('html, body').animate({
|
|
||||||
scrollTop: val
|
|
||||||
}, 400);
|
|
||||||
$aside_nav.find("li").removeClass("active");
|
$aside_nav.find("li").removeClass("active");
|
||||||
$link.parents("li").addClass("active");
|
$link.parents("li").addClass("active");
|
||||||
window.location.hash = $link.prop('hash');
|
_scroll_and_set_hash(target_id);
|
||||||
return false;
|
return false;
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
|
||||||
|
$body.scrollspy({
|
||||||
|
target: 'aside',
|
||||||
|
offset: 200,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// -- Ripple buttons
|
// -- Ripple buttons
|
||||||
var ripple_animation = function(el_list) {
|
var ripple_animation = function (el_list) {
|
||||||
el_list.each(function() {
|
el_list.each(function () {
|
||||||
var btn = $(this);
|
var btn = $(this);
|
||||||
btn
|
btn
|
||||||
.css({
|
.css({
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
overflow: 'hidden'
|
overflow: 'hidden'
|
||||||
})
|
})
|
||||||
.bind('mousedown', function(e) {
|
.bind('mousedown', function (e) {
|
||||||
var ripple;
|
var ripple;
|
||||||
if (btn.find('.inner-ripple').length === 0) {
|
if (btn.find('.inner-ripple').length === 0) {
|
||||||
ripple = $('<span class="inner-ripple"/>');
|
ripple = $('<span class="inner-ripple"/>');
|
||||||
@ -186,43 +239,17 @@
|
|||||||
top: y + 'px',
|
top: y + 'px',
|
||||||
left: x + 'px'
|
left: x + 'px'
|
||||||
}).addClass('inner-ripple-animated');
|
}).addClass('inner-ripple-animated');
|
||||||
setTimeout(function() {
|
setTimeout(function () {
|
||||||
ripple.removeClass('inner-ripple-animated');
|
ripple.removeClass('inner-ripple-animated');
|
||||||
}, 351);
|
}, 351);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// -- Cards animation
|
|
||||||
var cards_animate = function(type, speed) {
|
|
||||||
type = type || 'in';
|
|
||||||
speed = speed || 2000;
|
|
||||||
var $container = $("main.index"),
|
|
||||||
$cards = $container.find(".card"),
|
|
||||||
$titles = $container.find("h2");
|
|
||||||
|
|
||||||
$cards.each(function() {
|
|
||||||
var $card = $(this),
|
|
||||||
cardOffset = this.getBoundingClientRect(),
|
|
||||||
offset = cardOffset.left * 0.8 + cardOffset.top,
|
|
||||||
delay = parseFloat(offset / speed).toFixed(2);
|
|
||||||
$card.css("transition-delay", delay + "s");
|
|
||||||
});
|
|
||||||
|
|
||||||
if (type === "in") {
|
|
||||||
$titles.fadeTo(0, 0);
|
|
||||||
$titles.fadeTo(1000, 1);
|
|
||||||
$container.addClass("animating");
|
|
||||||
} else {
|
|
||||||
$titles.fadeTo(300, 0);
|
|
||||||
$container.removeClass("animating");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// -- Header buttons
|
// -- Header buttons
|
||||||
var header_buttons = function () {
|
var header_buttons = function () {
|
||||||
var timer;
|
var timer;
|
||||||
$header.on('click', '.o_primary_nav .dropdown-toggle', function(e) {
|
$header.on('click', '.o_primary_nav .dropdown-toggle', function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
var $a = $(this);
|
var $a = $(this);
|
||||||
@ -233,12 +260,12 @@
|
|||||||
if ($a.closest('.o_primary_nav').children('.open').length > 0) {
|
if ($a.closest('.o_primary_nav').children('.open').length > 0) {
|
||||||
$header.addClass("o_sub_opened");
|
$header.addClass("o_sub_opened");
|
||||||
} else {
|
} else {
|
||||||
timer = setTimeout(function() {
|
timer = setTimeout(function () {
|
||||||
$header.removeClass("o_sub_opened");
|
$header.removeClass("o_sub_opened");
|
||||||
}, 200);
|
}, 200);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$header.on('click', '.o_primary_nav .o_secondary_nav', function(e) {
|
$header.on('click', '.o_primary_nav .o_secondary_nav', function (e) {
|
||||||
if (e.target === e.currentTarget) {
|
if (e.target === e.currentTarget) {
|
||||||
$header.find('.open').removeClass('open');
|
$header.find('.open').removeClass('open');
|
||||||
$header.find('.o_sub_opened').andSelf().removeClass('o_sub_opened');
|
$header.find('.o_sub_opened').andSelf().removeClass('o_sub_opened');
|
||||||
@ -246,28 +273,53 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// -- Mobile menu opening
|
// -- Mobile menu opening
|
||||||
$header.on('click', '.o_mobile_menu_toggle', function(e) {
|
$header.on('click', '.o_mobile_menu_toggle', function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
$(this).find('i').toggleClass('fa-bars fa-times');
|
$(this).find('i').toggleClass('fa-bars fa-times');
|
||||||
$header.toggleClass('o_mobile_menu_opened');
|
$header.toggleClass('o_mobile_menu_opened');
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
var card_top_animation = function (win_top){
|
// -- Attach permalink markers to sections' title
|
||||||
var scrollFactor = 1.6,
|
var attach_permalink_markers = function () {
|
||||||
bannerHeight = Math.max(450, $card_top.outerHeight(true) - 60),
|
$main.find('article.doc-body > section').each( function () {
|
||||||
top = Math.min(win_top, bannerHeight/scrollFactor),
|
var $section = $(this),
|
||||||
base_value = top * (scrollFactor - 1),
|
$title = $section.find('> h2, > h3, > h4, > h5, > h6'),
|
||||||
opacity = top/bannerHeight * scrollFactor;
|
target_id = $section.attr('id'),
|
||||||
|
$icon = $('<i/>').addClass('mdi-content-link');
|
||||||
|
|
||||||
$card_top.css('transform', 'translateY(' + base_value + 'px)');
|
if ($title.length <= 0) {
|
||||||
$card_top_t.css({
|
return;
|
||||||
'transform' : 'translateY( -' + ( base_value - (top/2)) + 'px)',
|
}
|
||||||
'opacity' : 1 - opacity
|
|
||||||
|
$title.addClass('o_has_permalink_marker').append($icon);
|
||||||
|
|
||||||
|
$icon.on('click', function () {
|
||||||
|
_scroll_and_set_hash("#" + target_id);
|
||||||
|
|
||||||
|
$title.addClass('o_marked').delay(1000).queue(function (){
|
||||||
|
$title.removeClass('o_marked').dequeue();
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
$(".content-switcher").each(function(index, switcher) {
|
var cp_animation = function (win_top, cp_end_point){
|
||||||
|
var top = Math.min(win_top, cp_h);
|
||||||
|
|
||||||
|
$cp_image.css({
|
||||||
|
'opacity' : cp_image_alpha - (top * (cp_image_alpha/cp_end_point)),
|
||||||
|
'transform' : 'scale(' + (1 + (top * (0.1/cp_end_point))) +')'
|
||||||
|
});
|
||||||
|
|
||||||
|
$cp_text.css({
|
||||||
|
'transform' : 'translateY(' + (top/4) + 'px)',
|
||||||
|
'opacity' : 1 - (top/cp_h)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$(".content-switcher").each(function (index, switcher) {
|
||||||
var $switcher = $(switcher),
|
var $switcher = $(switcher),
|
||||||
$links = $switcher.find('> ul > li'),
|
$links = $switcher.find('> ul > li'),
|
||||||
$tabs = $switcher.find('> .tabs > *'),
|
$tabs = $switcher.find('> .tabs > *'),
|
||||||
@ -278,66 +330,77 @@
|
|||||||
$links.eq(index).add($tabs.eq(index)).addClass('active');
|
$links.eq(index).add($tabs.eq(index)).addClass('active');
|
||||||
}
|
}
|
||||||
select(0);
|
select(0);
|
||||||
$switcher.on('click', '> ul > li', function() {
|
$switcher.on('click', '> ul > li', function () {
|
||||||
select($(this).index());
|
select($(this).index());
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// ======= Utils ==================
|
||||||
|
// =================================
|
||||||
|
var _scroll_and_set_hash = function (target_id) {
|
||||||
|
$('html, body').animate({
|
||||||
|
scrollTop: $(target_id).offset().top - 60
|
||||||
|
}, 100);
|
||||||
|
window.location.hash = target_id;
|
||||||
|
};
|
||||||
|
|
||||||
|
var _toggle_float = function () {
|
||||||
|
$float.toggleClass("active");
|
||||||
|
setTimeout(function () {
|
||||||
|
$float_menu.toggleClass("active");
|
||||||
|
$mask.toggleClass("active");
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var bind_window_events = function () {
|
||||||
|
// ======= On resize ==============
|
||||||
|
// Update properties and conditionally call functions according to resolution
|
||||||
|
$win.on('resize', function () {
|
||||||
|
// Update size variables
|
||||||
|
win_w = $win.width();
|
||||||
|
body_h = $body.height();
|
||||||
|
cp_h = $cp.outerHeight();
|
||||||
|
main_h = $main.height();
|
||||||
|
cp_end_point = has_cp_image ? cp_h/2 : undefined;
|
||||||
|
|
||||||
|
if (win_w >= screen_md){
|
||||||
|
footer_animation();
|
||||||
|
(has_aside)? set_affix(): '';
|
||||||
|
} else {
|
||||||
|
footer_stop();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ======= On scroll ==============
|
||||||
|
$win.on('scroll', function () {
|
||||||
|
var win_top = $win.scrollTop();
|
||||||
|
|
||||||
|
$win[0].requestAnimationFrame(function () {
|
||||||
|
cp_animation(win_top, cp_end_point);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (win_w >= screen_md) {
|
||||||
|
$header.toggleClass('o_scrolled', win_top > header_h);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
// ======= Onload ==================
|
// ======= Onload ==================
|
||||||
// =================================
|
// =================================
|
||||||
// -- Call default functions
|
// -- Call default functions
|
||||||
layouting();
|
init();
|
||||||
cards_animate();
|
|
||||||
header_buttons();
|
header_buttons();
|
||||||
ripple_animation($(".ripple"));
|
ripple_animation($(".ripple"));
|
||||||
|
|
||||||
if (has_aside) {
|
|
||||||
floating_menu_layout();
|
|
||||||
scroll_to(aside_links);
|
|
||||||
ripple_animation(aside_links);
|
|
||||||
}
|
|
||||||
|
|
||||||
// -- Conditionally call specific functions according to resolution
|
// -- Conditionally call specific functions according to resolution
|
||||||
if (win_w >= screen_md){
|
if (win_w >= screen_md){
|
||||||
footer_animation();
|
footer_animation();
|
||||||
|
(has_aside)? set_affix(): '';
|
||||||
if (has_aside) {
|
}
|
||||||
$win.load(function (){
|
|
||||||
// wait until page load before affix
|
|
||||||
body_h = $body.height();
|
|
||||||
set_affix(body_h);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// ======= On resize ==============
|
|
||||||
// ================================
|
|
||||||
// Update properties and conditionally call functions according to resolution
|
|
||||||
$win.on('resize', function () {
|
|
||||||
win_w = $win.width();
|
|
||||||
body_h = $body.height();
|
|
||||||
|
|
||||||
if (win_w >= screen_md){
|
|
||||||
footer_animation();
|
|
||||||
if (has_aside) { set_affix(body_h); };
|
|
||||||
} else {
|
|
||||||
footer_stop();
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// ======= On scroll ==============
|
|
||||||
// ================================
|
|
||||||
$win.on('scroll', function () {
|
|
||||||
if (win_w >= screen_md) {
|
|
||||||
var win_top = $win.scrollTop();
|
|
||||||
header_h = $header.outerHeight();
|
|
||||||
|
|
||||||
$header.toggleClass('o_scrolled', win_top > header_h);
|
|
||||||
card_top_animation(win_top);
|
|
||||||
} else {
|
|
||||||
$card_top.css('transform', '');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
||||||
|
|||||||
@ -53,7 +53,7 @@
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
background-color: fade(white, 60%);
|
background-color: fade(white, 60%);
|
||||||
color: @header-link-normal;
|
color: @header-link-normal;
|
||||||
font-family: @headings-font-family;
|
font-family: "Work Sans", sans-serif;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
.transition(all .2s ease);
|
.transition(all .2s ease);
|
||||||
.transition-property(~'background, box-shadow' );
|
.transition-property(~'background, box-shadow' );
|
||||||
|
|||||||
114
_extensions/odoo/static/index.less
Normal file
114
_extensions/odoo/static/index.less
Normal file
@ -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,214 +1,164 @@
|
|||||||
.pseudo-col(){
|
// ================================================
|
||||||
position: relative;
|
// ================ Layout =======================
|
||||||
min-height: 1px;
|
// ================================================
|
||||||
padding-right: 15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
float: left;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-col(){
|
|
||||||
content: "";
|
|
||||||
background: @doc_code-bg;
|
|
||||||
.box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3));
|
|
||||||
position: absolute;
|
|
||||||
width: 43%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
// Bootrstrap adaptations
|
||||||
|
// ------------------------------------------------------------------
|
||||||
body, header {
|
body, header {
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Index layout
|
|
||||||
#wrap {
|
|
||||||
> .container.index {
|
|
||||||
background-color: @gray-lightest;
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
> .index {
|
|
||||||
.container;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#main_title {
|
|
||||||
margin: 10px;
|
|
||||||
@media (min-width:@screen-md-min) {
|
|
||||||
margin: 0 0 9px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.container .container {
|
.container .container {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding:0;
|
padding: 0;
|
||||||
margin:0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
article.doc-content *[class^="col-"] {
|
.img-responsive {
|
||||||
padding:0;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
main{
|
.img-responsive.center-block {
|
||||||
|
display: block;
|
||||||
aside, article.doc-body, .doc-content, .doc-aside {
|
|
||||||
.pseudo-col();
|
|
||||||
}
|
|
||||||
.doc-content, .doc-aside {
|
|
||||||
position:relative;
|
|
||||||
}
|
|
||||||
aside {
|
|
||||||
width: 25%;
|
|
||||||
max-width: 300px;
|
|
||||||
position:static;
|
|
||||||
padding:0;
|
|
||||||
display:block;
|
|
||||||
float:left;
|
|
||||||
@media (max-width:@screen-md-min) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
article.doc-body {
|
|
||||||
background: @doc_paper;
|
|
||||||
border-left: 1px solid @gray-lighter;
|
|
||||||
padding: 15px 30px;
|
|
||||||
@media (min-width: @screen-md-min) {
|
|
||||||
width: 75%;
|
|
||||||
&.doc-toc {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> *{
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main.has_code_col{
|
article.doc-content *[class*="col-"] {
|
||||||
.container;
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
aside {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
article.doc-body {
|
// Main Components
|
||||||
width: 100%;
|
// ------------------------------------------------------------------
|
||||||
|
#wrap {
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
background: @gray-lightest;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
> *{
|
main {
|
||||||
max-width: 100%;
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
.o_content {
|
||||||
|
background-color: @doc_paper;
|
||||||
|
.deep-1;
|
||||||
|
|
||||||
|
@media (min-width: @screen-sm-min) {
|
||||||
|
margin: -40px auto 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
section {
|
|
||||||
position: relative;
|
article.doc-body {
|
||||||
display:block;
|
.pseudo-col();
|
||||||
float: left;
|
padding: 15px;
|
||||||
width: 100%;
|
|
||||||
|
@media (min-width: @screen-sm-min) {
|
||||||
|
padding: 15px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: @screen-md-min) {
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: @screen-lg-min) {
|
||||||
|
margin-left: 7%;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main.o_aside_removed, main.o_slim_page {
|
||||||
|
max-width: 700px;
|
||||||
|
|
||||||
@media (min-width: @screen-lg-min) {
|
@media (min-width: @screen-lg-min) {
|
||||||
width: 100%;
|
max-width: 760px;
|
||||||
padding-right: 0;
|
}
|
||||||
&:before {
|
|
||||||
.code-col();
|
article.doc-body {
|
||||||
}
|
@media (min-width: @screen-md-min) {
|
||||||
section {
|
padding-left: 30px;
|
||||||
> * {
|
}
|
||||||
width: 54.633333%;
|
|
||||||
max-width: 600px;
|
|
||||||
float: left;
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
> h1, > h2, > h3, > h4, > h5, > h6 {
|
|
||||||
width: 100%;
|
|
||||||
float: none;
|
|
||||||
clear: none;
|
|
||||||
}
|
|
||||||
.doc-aside {
|
|
||||||
width: 41%;
|
|
||||||
float: none;
|
|
||||||
clear: none;
|
|
||||||
margin-right: 15px;
|
|
||||||
margin-left: 57%;
|
|
||||||
|
|
||||||
.content-switcher{
|
|
||||||
margin-top:0;
|
|
||||||
> ul {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
> ul > li {
|
|
||||||
color: @gray-light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main.index .toctree-wrapper{
|
main.has_code_col {
|
||||||
@media screen and(min-width: @screen-md){
|
max-width: 700px;
|
||||||
|
|
||||||
> .row:first-child { //trigg first section
|
@media (min-width: @screen-lg-min) {
|
||||||
> .col-md-3:nth-child(3), > .col-md-3:nth-child(5) { //trig cards (title + 2, title + 4)
|
max-width: @container-lg;
|
||||||
margin-right: 50%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
position: relative;
|
|
||||||
.toc-single-entry{
|
.doc-aside, .doc-content {
|
||||||
position: absolute;
|
.pseudo-col();
|
||||||
top: 0;
|
|
||||||
right: 0;
|
@media (max-width: @screen-md-max) {
|
||||||
width: 50%;
|
padding: 0;
|
||||||
padding-right: floor((@grid-gutter-width / 2)); // compensate bootstrap default gutter
|
}
|
||||||
> .col-md-3 {
|
}
|
||||||
width: 100%;
|
|
||||||
}
|
aside {
|
||||||
> *[class^="col-"] {
|
display: none;
|
||||||
padding-left: 0; //remove Bootstrap default gutter
|
}
|
||||||
}
|
|
||||||
.card {
|
article.doc-body {
|
||||||
min-height: (@card_min-height * 2 ) + @card_margin-bottom;
|
> section {
|
||||||
}
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: @screen-lg-min) {
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
margin:0;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
.code-col();
|
||||||
|
}
|
||||||
|
|
||||||
|
> section {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
width: 48%;
|
||||||
|
float: left;
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
> h2, > h3, > h4, > h5, > h6, > h1 {
|
||||||
|
width: 48%;
|
||||||
|
float: none;
|
||||||
|
clear: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-aside {
|
||||||
|
width: 49%;
|
||||||
|
float: none;
|
||||||
|
clear: none;
|
||||||
|
margin-left: 51%;
|
||||||
|
color: @gray-light;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.45;
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
article.doc-toc .toctree-wrapper > ul > li > span {
|
article.doc-toc .toctree-wrapper > ul > li > span {
|
||||||
display: block;
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-fields{
|
|
||||||
display: table;
|
|
||||||
width: 100%;
|
|
||||||
.code-field{
|
|
||||||
display: table-row;
|
|
||||||
}
|
|
||||||
.code-field-body{
|
|
||||||
display: block;
|
display: block;
|
||||||
padding-left: 15px;
|
font-size: 28px;
|
||||||
@media screen and (min-width: @screen-md-min){
|
|
||||||
display: table-cell;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.code-field-name{
|
|
||||||
width:auto;
|
|
||||||
display:block;
|
|
||||||
@media screen and (min-width: @screen-md-min){
|
|
||||||
width:20%;
|
|
||||||
padding-right: 20px;
|
|
||||||
display: table-cell;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
margin: .2em 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,6 +2,25 @@
|
|||||||
// ================ Mixins =======================
|
// ================ Mixins =======================
|
||||||
// ================================================
|
// ================================================
|
||||||
|
|
||||||
|
// Code column layout mixins
|
||||||
|
// ------------------------------------------------------------------
|
||||||
|
.pseudo-col() {
|
||||||
|
position: relative;
|
||||||
|
min-height: 1px;
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-col() {
|
||||||
|
content: "";
|
||||||
|
background: @doc_code-bg;
|
||||||
|
.box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3));
|
||||||
|
.o-position-absolute(0,0);
|
||||||
|
.size(50%, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
// Utilities
|
// Utilities
|
||||||
// ------------------------------------------------------------------
|
// ------------------------------------------------------------------
|
||||||
.o-no-select {
|
.o-no-select {
|
||||||
@ -131,65 +150,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Elevation Shadows
|
// Shadows
|
||||||
// Visual cue indicating the amount of separation between surfaces.
|
// --------------------------------------------------
|
||||||
// An object’s elevation determines the appearance of its shadow.
|
.deep-1() {
|
||||||
// ------------------------------------------------------------------
|
|
||||||
.deep-1-shadow() {
|
|
||||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17);
|
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17);
|
||||||
}
|
}
|
||||||
.deep-2-shadow() {
|
|
||||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
.deep-3-shadow() {
|
|
||||||
box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.1), 0 11px 7px 0 rgba(0, 0, 0, 0.09);
|
|
||||||
}
|
|
||||||
.deep-4-shadow() {
|
|
||||||
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1), 0 14px 12px 0 rgba(0, 0, 0, 0.07);
|
|
||||||
}
|
|
||||||
.deep-5-shadow() {
|
|
||||||
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.1), 0 17px 17px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
.deep-transition() {
|
|
||||||
.o-transition(box-shadow, 0.3s, @o-ease);
|
|
||||||
}
|
|
||||||
|
|
||||||
.deep-1() {
|
|
||||||
.deep-1-shadow();
|
|
||||||
|
|
||||||
&.deep_hover:hover {
|
|
||||||
.deep-transition();
|
|
||||||
.deep-2-shadow();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.deep-2() {
|
|
||||||
.deep-2-shadow();
|
|
||||||
|
|
||||||
&.deep_hover:hover {
|
|
||||||
.deep-transition();
|
|
||||||
.deep-3-shadow();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.deep-3() {
|
|
||||||
.deep-3-shadow();
|
|
||||||
|
|
||||||
&.deep_hover:hover {
|
|
||||||
.deep-transition();
|
|
||||||
.deep-4-shadow();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.deep-4() {
|
|
||||||
.deep-4-shadow();
|
|
||||||
|
|
||||||
&.deep_hover:hover {
|
|
||||||
.deep-transition();
|
|
||||||
.deep-5-shadow();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.deep-5() {
|
|
||||||
.deep-5-shadow();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.transform(@args) {
|
.transform(@args) {
|
||||||
-webkit-transform : @args;
|
-webkit-transform : @args;
|
||||||
@ -199,7 +164,8 @@
|
|||||||
transform : @args;
|
transform : @args;
|
||||||
}
|
}
|
||||||
|
|
||||||
//-- Material Design Icons
|
// Material Design Icons
|
||||||
|
// --------------------------------------------------
|
||||||
.mdi-icon(@content) {
|
.mdi-icon(@content) {
|
||||||
font-family: 'Material-Design-Icons';
|
font-family: 'Material-Design-Icons';
|
||||||
content: @content;
|
content: @content;
|
||||||
@ -210,13 +176,8 @@
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
.keyframes(@name; @arguments) {
|
// Documentation Dropdown style
|
||||||
@-moz-keyframes @name { @arguments(); }
|
// --------------------------------------------------
|
||||||
@-webkit-keyframes @name { @arguments(); }
|
|
||||||
@keyframes @name { @arguments(); }
|
|
||||||
}
|
|
||||||
|
|
||||||
//-- Documentation Dropdown style
|
|
||||||
.o-doc-dropdown {
|
.o-doc-dropdown {
|
||||||
> a.dropdown-toggle {
|
> a.dropdown-toggle {
|
||||||
padding: 0 5px 0 10px;
|
padding: 0 5px 0 10px;
|
||||||
@ -314,35 +275,3 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Shadows
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
.shadow-none {
|
|
||||||
.box-shadow(none);
|
|
||||||
}
|
|
||||||
|
|
||||||
.deep-1 {
|
|
||||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17);
|
|
||||||
}
|
|
||||||
.deep-2 {
|
|
||||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
.deep-3 {
|
|
||||||
box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.1), 0 11px 7px 0 rgba(0, 0, 0, 0.09);
|
|
||||||
}
|
|
||||||
.deep-4 {
|
|
||||||
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1), 0 14px 12px 0 rgba(0, 0, 0, 0.07);
|
|
||||||
}
|
|
||||||
.deep-5 {
|
|
||||||
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.1), 0 17px 17px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
// overwrite bootstrap inline forcing
|
|
||||||
.img-responsive {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.img-responsive.center-block {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -5,10 +5,6 @@
|
|||||||
header, footer{
|
header, footer{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.fadeInUp, .fadeIn{
|
|
||||||
.opacity(1)!important;
|
|
||||||
.animation(none);
|
|
||||||
}
|
|
||||||
|
|
||||||
#main_navbar{
|
#main_navbar{
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -6,9 +6,10 @@
|
|||||||
@import "variables";
|
@import "variables";
|
||||||
|
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
@import "animations";
|
|
||||||
@import "typography";
|
@import "typography";
|
||||||
|
@import "components";
|
||||||
@import "layout";
|
@import "layout";
|
||||||
|
@import "index";
|
||||||
@import "header";
|
@import "header";
|
||||||
@import "footer";
|
@import "footer";
|
||||||
@import "aside";
|
@import "aside";
|
||||||
@ -85,7 +86,6 @@
|
|||||||
line-height: @w-sub-nav-height;
|
line-height: @w-sub-nav-height;
|
||||||
letter-spacing: -0.1px;
|
letter-spacing: -0.1px;
|
||||||
word-spacing: -1px;
|
word-spacing: -1px;
|
||||||
font-size: 0.9em;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-width: 80px;
|
max-width: 80px;
|
||||||
@ -266,586 +266,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;
|
|
||||||
padding-top: 56%;
|
|
||||||
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_bold;
|
|
||||||
font-family: @headings-font-family;
|
|
||||||
color: @headings-color;
|
|
||||||
margin: 0;
|
|
||||||
background-color: white;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.2;
|
|
||||||
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));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-single-entry .card figcaption {
|
|
||||||
@media screen and(min-width: @screen-md){
|
|
||||||
font-size: 1.5em;
|
|
||||||
padding: 20px 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-md-6 .card, .col-md-4 .card{
|
|
||||||
@media screen and(min-width: @screen-md){
|
|
||||||
min-height: 300px;
|
|
||||||
figcaption{
|
|
||||||
font-size: 1.5em;
|
|
||||||
padding: 20px 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.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 {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 0 2%;
|
|
||||||
|
|
||||||
.o-gradient();
|
|
||||||
.animation(fadeIn 1s);
|
|
||||||
.box-shadow(none);
|
|
||||||
.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 2%;
|
|
||||||
}
|
|
||||||
@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%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&: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;}
|
|
||||||
|
|
||||||
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-class,
|
|
||||||
.code-staticmethod, .code-classmethod, .code-method, .code-function,
|
|
||||||
.code-attribute, .code-data {
|
|
||||||
// indents *all* content
|
|
||||||
padding-left: 20px;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
// except for item title which gets dedented back
|
|
||||||
> h6 {
|
|
||||||
margin-left: -20px;
|
|
||||||
margin-bottom: 0.3em;
|
|
||||||
.viewcode-link {
|
|
||||||
display: none;
|
|
||||||
float: right
|
|
||||||
}
|
|
||||||
&:hover .viewcode-link {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-bottom: .5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
main.has_code_col{
|
|
||||||
@media (min-width: @screen-lg-min) {
|
|
||||||
.doc-aside {
|
|
||||||
color: @gray-light;
|
|
||||||
|
|
||||||
pre{
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
article.doc-body {
|
|
||||||
background: @doc_paper;
|
|
||||||
section.doc-content:first-of-type{
|
|
||||||
> p:first-child{
|
|
||||||
.lead;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.index-category {
|
|
||||||
min-height: 300px;
|
|
||||||
min-height: 30vh;
|
|
||||||
|
|
||||||
li.toctree-l1 {
|
|
||||||
padding: 5px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-switcher {
|
|
||||||
margin-top: 1.5em;
|
|
||||||
> ul {
|
|
||||||
font-size: 10px;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 0 10px;
|
|
||||||
.transition(all .2s ease);
|
|
||||||
|
|
||||||
> li {
|
|
||||||
color: text-color;
|
|
||||||
font-weight: @fw_semibold;
|
|
||||||
border-bottom: 1px solid transparent;
|
|
||||||
margin: 5px;
|
|
||||||
font-size: 1.3em;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
list-style: none;
|
|
||||||
.transition(all .2s);
|
|
||||||
.opacity(0.6);
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-bottom: 1px solid @brand-primary;
|
|
||||||
.opacity(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover > ul > li {
|
|
||||||
.opacity(1);
|
|
||||||
}
|
|
||||||
> .tabs > * {
|
|
||||||
display: none;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
> .tabs > .active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
background: @doc_code-bg;
|
|
||||||
color: @gray-light;
|
|
||||||
border-radius: @border-radius-base;
|
|
||||||
margin-bottom: (@line-height-computed / 2);
|
|
||||||
pre {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
font-size: 0.8em;
|
|
||||||
color: @gray-light;
|
|
||||||
background: @doc_code-bg;
|
|
||||||
font-family: @font-family-monospace;
|
|
||||||
font-weight: @fw_semibold;
|
|
||||||
position: relative;
|
|
||||||
border: none;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: (@line-height-computed / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
#mask {
|
|
||||||
.opacity(0);
|
|
||||||
position: fixed;
|
|
||||||
z-index: @zIndex--mask;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
.size(100%; 0);
|
|
||||||
background-color: fade(black, 20%);
|
|
||||||
.transition(opacity .3s);
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
.opacity(1);
|
|
||||||
display: block;
|
|
||||||
.square(100%);
|
|
||||||
.transition(opacity .3s);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Special Pages
|
// Special Pages
|
||||||
@ -854,5 +274,3 @@ pre {
|
|||||||
#thinking-modular > .clearfix.themes {
|
#thinking-modular > .clearfix.themes {
|
||||||
margin-bottom: 3em;
|
margin-bottom: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,21 +1,20 @@
|
|||||||
// =============================================================================
|
// =============================================================================
|
||||||
// Typography
|
// Typography
|
||||||
// =============================================================================
|
// =============================================================================
|
||||||
|
@margin-base: 5px;
|
||||||
|
|
||||||
// Font rendering
|
// Font rendering
|
||||||
// ----------------------------------------
|
// ----------------------------------------
|
||||||
body {
|
body {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Headings
|
// Headings
|
||||||
// ----------------------------------------
|
// ----------------------------------------
|
||||||
h1, h2, h3, h4, h5, h6,
|
h1, h2, h3, h4, h5, h6 {
|
||||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
|
||||||
text-rendering: geometricPrecision;
|
text-rendering: geometricPrecision;
|
||||||
letter-spacing: -0.01em;
|
|
||||||
line-height: 1.4;
|
|
||||||
|
|
||||||
@media (min-width: @screen-lg-min) {
|
@media (min-width: @screen-lg-min) {
|
||||||
.has_code_col .doc-aside &{
|
.has_code_col .doc-aside &{
|
||||||
@ -24,35 +23,152 @@ h1, h2, h3, h4, h5, h6,
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, .h1, .h2 {
|
.headings-margin-small () {
|
||||||
margin-top: @line-height-computed * 1.5;
|
> h2, > h3, > h4, > h5, > h6 {
|
||||||
font-weight: @fw_light;
|
margin-top: @margin-base*2;
|
||||||
b, strong, a {
|
|
||||||
font-weight: @fw_regular;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.headings-bordered () {
|
||||||
h3, .h3, h4, .h4, h5, h6, .h5, .h6 {
|
padding-bottom: @margin-base;
|
||||||
font-weight: @fw_regular;
|
border-bottom: 2px solid #f4f6f7;
|
||||||
b, strong, a {
|
|
||||||
font-weight: @fw_medium;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h4, .h4, h5, h6, .h5, .h6 {
|
|
||||||
margin-top: @line-height-computed;
|
|
||||||
margin-bottom: (@line-height-computed / 3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Lists
|
article.doc-body {
|
||||||
// ----------------------------------------
|
|
||||||
|
|
||||||
ul, ol {
|
// Vertical rhythm
|
||||||
&:not(:empty) {
|
> section {
|
||||||
margin-bottom: (@line-height-computed / 2);
|
padding-bottom: @margin-base*2;
|
||||||
|
|
||||||
|
> :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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
ul, ol {
|
|
||||||
&:not(:empty) {
|
// Typography components
|
||||||
margin-bottom: (@line-height-computed / 3);
|
> section {
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 26px;
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dl {
|
||||||
|
dt code {
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin: 2px 0 @grid-gutter-width/2 @grid-gutter-width/2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ol, ul {
|
||||||
|
line-height: 26px;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
counter-reset: a;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 5px 0;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 30px;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
.o-position-absolute(9px, @left: 10px);
|
||||||
|
.square(6px);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #939da3;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3, h4, h5, h6 {
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ol > li:before {
|
||||||
|
counter-increment: a;
|
||||||
|
content: counter(a);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 4px 0;
|
||||||
|
.square(20px);
|
||||||
|
border-radius: 10px;
|
||||||
|
.o-position-absolute(3px, @left: 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.o_has_permalink_marker {
|
||||||
|
transition: all, 0.3s;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
i {
|
||||||
|
cursor: pointer;
|
||||||
|
visibility: hidden;
|
||||||
|
margin-left: 0.1em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding: 0.2em;
|
||||||
|
.rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
i {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.o_marked {
|
||||||
|
padding-left: 10px;
|
||||||
|
background-color: #fff7d1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -78,11 +78,8 @@
|
|||||||
// Typography
|
// Typography
|
||||||
// ===============================================
|
// ===============================================
|
||||||
|
|
||||||
//== Fonts
|
|
||||||
@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&subset=latin,latin-ext);
|
|
||||||
|
|
||||||
//== Font sizes/weigths
|
//== Font sizes/weigths
|
||||||
@font-size-base : 15px;
|
@font-size-base : 16px;
|
||||||
|
|
||||||
@fw_light : 300;
|
@fw_light : 300;
|
||||||
@fw_regular : 400;
|
@fw_regular : 400;
|
||||||
@ -91,19 +88,20 @@
|
|||||||
@fw_bold : 700;
|
@fw_bold : 700;
|
||||||
|
|
||||||
//== Paragraphs
|
//== Paragraphs
|
||||||
@font-family-base : -apple-system, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif;
|
@font-family-base : -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
@text-color : saturate(@gray-dark, 5%);
|
@text-color : #373e42;
|
||||||
|
|
||||||
//== Headings
|
//== Headings
|
||||||
@headings-color : saturate(@gray-darker, 15%);
|
@headings-color : saturate(@gray-darker, 15%);
|
||||||
@headings-font-family : "Work Sans", sans-serif;
|
@headings-font-family : @font-family-base;
|
||||||
@headings-font-weight : @fw_light;
|
@headings-font-weight : @fw_regular;
|
||||||
@headings-small-color : @headings-color;
|
@headings-small-color : @headings-color;
|
||||||
|
|
||||||
@display1-size : 6rem;
|
@font-size-h2: 30px;
|
||||||
@display2-size : 5.5rem;
|
@font-size-h3: 24px;
|
||||||
@display3-size : 4.5rem;
|
@font-size-h4: 19px;
|
||||||
@display4-size : 3.5rem;
|
@font-size-h5: 17px;
|
||||||
|
@font-size-h6: 17px;
|
||||||
|
|
||||||
//== Global textual link color.
|
//== Global textual link color.
|
||||||
@link-color : @o-violet-dark;
|
@link-color : @o-violet-dark;
|
||||||
@ -160,8 +158,7 @@
|
|||||||
|
|
||||||
// Cards
|
// Cards
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
@card_min-height: 200px;
|
@card_margin-bottom: 25px;
|
||||||
@card_margin-bottom: 20px;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user