349 lines
9.1 KiB
Plaintext
349 lines
9.1 KiB
Plaintext
|
// ================================================
|
|||
|
|
// ================ Mixins =======================
|
|||
|
|
// ================================================
|
|||
|
|
|
|||
|
|
// 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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Elevation Shadows
|
|||
|
|
// Visual cue indicating the amount of separation between surfaces.
|
|||
|
|
// An object’s elevation determines the appearance of its shadow.
|
|||
|
|
// ------------------------------------------------------------------
|
|||
|
|
.deep-1-shadow() {
|
|||
|
|
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;
|
|||
|
|
-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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.keyframes(@name; @arguments) {
|
|||
|
|
@-moz-keyframes @name { @arguments(); }
|
|||
|
|
@-webkit-keyframes @name { @arguments(); }
|
|||
|
|
@keyframes @name { @arguments(); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//-- 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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 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;
|
|||
|
|
}
|