documentation/extensions/odoo_theme/static/scss/_mixins.scss

// ================================================
// ================  Mixins =======================
// ================================================

// Utilities
// ------------------------------------------------------------------
.o-no-select {
    pointer-events: none;
    cursor: default;
    &, & * {
        &::selection {
            background: transparent;
        }
        &::-moz-selection {
            background: transparent;
        }
    }
}

@mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto){
    position: absolute;
    top: $top;
    left: $left;
    bottom: $bottom;
    right: $right;
}

@mixin 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;
}

@mixin 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
// ------------------------------------------------------------------
@mixin 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;
}

@mixin 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: url("img/${folder}${website-2x-prefix}${img}");
    }
}

@mixin o-gradient($deg: 99deg , $startColor: $o-violet, $endColor: #62495B, $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);
}

@mixin o-transform($args){
  -webkit-transform : $args;
  -moz-transform    : $args;
  -ms-transform     : $args;
  -o-transform      : $args;
  transform         : $args;
}

//-- add icon

@mixin o-inline-icon($icon-content, $margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $fw_regular) {
    content: '#{$icon-content}';
    font-family: 'icomoon' !important;
    @include font-size($font-size);
    font-weight: $font-weight;
    vertical-align: $v-align;
    margin: $margin;
}

//-- fix scroll issue

@mixin o-scroll-padding() {
    content: '';
    display: block;
    width: 0;
    height: 0;
    padding-top:  $o-header-height + 10px;
    margin-top:  -$o-header-height - 10px;
}


//-- has_col

@mixin o-pseudo-col(){
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
  width: 100%;
}

@mixin o-code-col(){
  /* content: ""; Deactivating o_has_code_column background */
  background: $doc_code-bg;
  /* @include box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3)); */
  @include o-position-absolute($top: 3rem, $right:0);
  width: 43%;
  height: calc(100% - 3rem);
}

@mixin o-easter-egg($width: 100%, $height: 100%, $img: 'img/poule.svg' ){
    position: relative;
        // Easter Egg on hover 5s
        &:after {
            content: '';
            display: block;
            width: $width;
            height: $height;
            @include o-position-absolute(auto, 0, 0, 0);
            background-image: url('#{$img}');
            background-color: $white;
            background-repeat: no-repeat;
            opacity: 0;
            visibility: hidden;
            @include o-transition(all, .5s, ease-out, .5s);
        }
        &:hover:after {
                opacity: 1;
                visibility: visible;
                @include o-transition(all, .5s, ease-in, 5s);
        }
}

@function valid-radius($radius) {
  $return: ();
  @each $value in $radius {
    @if type-of($value) == number {
      $return: append($return, max($value, 0));
    } @else {
      $return: append($return, $value);
    }
  }
  @return $return;
}