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