documentation/extensions/odoo_theme/static/scss/_mixins.scss
Elisabeth Dickinson 81d1f2d21b [IMP] odoo_theme: design improvements
Revamp of the side menu;
Round all borders for consistency with the buttons;
Improve .sig-* and .o_code elements;
Improve sphinx-tabs hover effect;

task-3046383

closes odoo/documentation#4114

X-original-commit: 3056c7b62d
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
2023-04-12 12:26:14 +02:00

75 lines
2.2 KiB
SCSS

// ================================================
// ================ Mixins =======================
// ================================================
// Utilities
// ------------------------------------------------------------------
@mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto){
position: absolute;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
// Backgrounds
// ------------------------------------------------------------------
@mixin o-gradient($deg: 99deg , $startColor: $secondary, $endColor: #62495B, $startOffset: 10%, $endOffset: 90%){
background: mix($startColor, $endColor);
background: linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
}
//-- add icon
@mixin o-inline-icon($margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $font-weight-normal) {
vertical-align: $v-align;
margin: $margin;
@include font-size($font-size);
font-family: 'icomoon' !important;
font-weight: $font-weight;
}
//-- fix scroll issue
@mixin o-scroll-padding() {
content: '';
display: block;
width: 0;
height: 0;
margin-top: -$o-headers-height - 10px;
padding-top: calc(#{$o-headers-height} + 10px);
}
@mixin o-easter-egg($width: 100%, $height: 100%, $img: 'img/poule.svg' ){
position: relative;
// Easter Egg on hover 5s
&:after {
content: '';
@include o-position-absolute(auto, 0, 0, 0);
display: block;
width: $width;
height: $height;
background-image: url('#{$img}');
background-color: $white;
background-repeat: no-repeat;
opacity: 0;
visibility: hidden;
transition: all .5s ease-out 5s;
}
&:hover:after {
opacity: 1;
visibility: visible;
transition: all .5s ease-in 5s;
}
}
@mixin o-code {
display: inline-block;
overflow-wrap: anywhere;
background: $o-literals-bg;
font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
font-weight: inherit;
color: inherit;
}