flectra/doc/_extensions/odoo_ext/static/mixins.less
flectra-admin 769eafb483 [INIT] Inception of Flectra from Odoo
Flectra is Forked from Odoo v11 commit : (6135e82d73)
2018-01-16 11:45:59 +05:30

278 lines
7.6 KiB
Plaintext

// ================================================
// ================ 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 {
pointer-events: none;
cursor: default;
&, & * {
&::selection {
background: transparent;
}
&::-moz-selection {
background: transparent;
}
}
}
.o-position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) {
position: absolute;
top: @top;
left: @left;
bottom: @bottom;
right: @right;
}
.o-transform-origin(@x: 50%, @y: 50%, @z: 0) {
-ms-transform-origin: @x @y @z;
-webkit-transform-origin: @x @y @z;
-moz-transform-origin: @x @y @z;
transform-origin: @x @y @z;
}
.o-transition(@property: all, @duration: 0s, @timing-function: ease, @transition-delay: 0s) {
-webkit-transition: @property @duration @timing-function @transition-delay;
-moz-transition: @property @duration @timing-function @transition-delay;
-o-transition: @property @duration @timing-function @transition-delay;
transition: @property @duration @timing-function @transition-delay;
}
// Backgrounds
// ------------------------------------------------------------------
.o-svg-bg(@file_name,@file_ext,@x:50%, @y:50%, @repeat: no-repeat, @folder: '') {
@std-url: url("img/@{folder}@{file_name}.@{file_ext}");
@svg-url: url("img/@{folder}@{file_name}.svg");
background-image: @std-url;
background-image: @svg-url;
background-position: @x @y;
background-repeat: @repeat;
}
.o-retina-bg(@img,@x:50%, @y:50%, @repeat: no-repeat, @folder: '') {
@std-url: url("img/@{folder}@{img}");
background-image: @std-url;
background-position: @x @y;
background-repeat: @repeat;
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
@2x-url: url("img/@{folder}@{website-2x-prefix}@{img}");
background-image: @2x-url;
}
}
.o-gradient(@deg: 99deg , @startColor: @o-violet-dark, @endColor: @o-violet-darker, @startOffset: 10%, @endOffset: 90%) {
background: mix(@startColor, @endColor);
background: -webkit-linear-gradient(@deg, @startColor @startOffset, @endColor @endOffset);
background: -moz-linear-gradient(@deg, @startColor @startOffset, @endColor @endOffset);
background: -ms-linear-gradient(@deg, @startColor @startOffset, @endColor @endOffset);
background: -o-linear-gradient(@deg, @startColor @startOffset, @endColor @endOffset);
background: linear-gradient(@deg, @startColor @startOffset, @endColor @endOffset);
}
// Logos
// ------------------------------------------------------------------
.o-logo-size(@height) {
@ratio: 3.135;
.size((@height * @ratio), @height);
background-size: auto @height;
}
.generate-logo-classes(@n, @i: 15) when (@i =< @n) {
.o_logo_@{i} {
.o-logo-size(@i*1px)
}
.generate-logo-classes(@n, (@i * 2));
}
.o_logo {
.o-svg-bg("odoo_logo","png", 0, 0, no-repeat, "logos/" );
display: inline-block;
.o-logo-size(30px); // 30px height is default size
&.center-block,
&.o_logo_responsive_half {
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
}
&.o_logo_responsive {
background-size: cover;
width: 100%;
height: 0;
padding-bottom: 31.9%;
}
&.o_logo_responsive_half {
background-size: cover;
width: 50%;
height: 0;
padding-bottom: 15.94%;
}
}
// Generate Logo's sizes classes
// heights: 15 - 30 - 60 - 120 - 240
// ------------------------------------------------------------------
.generate-logo-classes(240);
&.o_logo_inverse {
background-position: 100% 0;
&.o_logo_15.center-block {
background-position: 102% 0;
}
}
// Shadows
// --------------------------------------------------
.deep-1() {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17);
}
.transform(@args) {
-webkit-transform : @args;
-moz-transform : @args;
-ms-transform : @args;
-o-transform : @args;
transform : @args;
}
// Material Design Icons
// --------------------------------------------------
.mdi-icon(@content) {
font-family: 'Material-Design-Icons';
content: @content;
display: inline-block;
text-rendering: geometricPrecision;
font-size: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Documentation Dropdown style
// --------------------------------------------------
.o-doc-dropdown {
> a.dropdown-toggle {
padding: 0 5px 0 10px;
&:after {
.mdi-icon( "\e7c1");
@media screen and (max-width: @screen-xs-max) {
font-size: 1.5em
}
}
}
&.open {
z-index: 1;
position: relative;
background-color: @gray-light;
color: @header-link-normal;
@media screen and (min-width: @screen-sm-min){
background-color: @w-header-white;
}
.dropdown-toggle {
color: @header-link-normal;
&:hover {
color: @headings-color;
}
}
.dropdown-menu {
margin-top: 0;
border: none;
border-radius: 0;
text-align: left;
min-width: 100%;
background-color: @w-header-white;
padding-bottom: @w-header-height/4;
.deep-1();
> li > a {
font-size: 12px;
display: block;
color: @header-link-normal;
float: none;
text-transform: none;
font-weight: @fw_medium;
@media screen and (max-width: @screen-xs-max) {
padding-left: 10px;
}
}
> li.active > a {
color: white;
background-color: desaturate(@brand-primary, 40%);
}
@media screen and (max-width: @screen-xs-max) {
position: static;
}
@media screen and (min-width: @screen-sm-min) {
background-color: @w-header-white;
}
}
}
&.o_dropdown_mobile_nav {
margin-left: 0;
> .dropdown-toggle {
&:after {
.o-position-absolute(0, 0);
}
}
.o_breadcrumb_dropdown_menu > li{
> a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
> a:before {
content: "|";
margin-right: 0.5em;
}
&:nth-child(1) > a:before {
display: none;
}
&:nth-child(2) > a:before {
padding-left: 0.5em;
}
&:nth-child(3) > a:before {
padding-left: 1em;
}
}
}
}