rhodecode/public/css/mixins.less

/* inset border for buttons - does not work in ie */
.inner-border(@size:1px,@border-color:#000) {
    -webkit-box-shadow: inset 0 0 0 @size @border-color;
       -moz-box-shadow: inset 0 0 0 @size @border-color;
            box-shadow: inset 0 0 0 @size @border-color;
            -ms-filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=@size,MakeShadow=true,ShadowOpacity=1);
                filter:  progid:DXImageTransform.Microsoft.Blur(PixelRadius=@size,MakeShadow=true,ShadowOpacity=1);
            zoom: 1;
}

.border(@size:1px,@border-color:#000) {
  border: @size solid @border-color;
}

.inner-border-bottom(@size:1px,@border-color:#000) {
    -webkit-box-shadow: inset 0 (-@size*2) 0 -@size @border-color;
       -moz-box-shadow: inset 0 (-@size*2) 0 -@size @border-color;
            box-shadow: inset 0 (-@size*2) 0 -@size @border-color;
}

/* rounded borders */
.border-radius(@radius: 2px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

/* rounded borders - bottom only */
.border-radius-bottom(@radius: 2px) {
  -webkit-border-bottom-right-radius: @radius;
   -webkit-border-bottom-left-radius: @radius;
      -moz-border-radius-bottomright: @radius;
       -moz-border-radius-bottomleft: @radius;
          border-bottom-right-radius: @radius;
           border-bottom-left-radius: @radius;
}

/* rounded borders - top only */
.border-radius-top(@radius: 2px) {
  -webkit-border-top-right-radius: @radius;
   -webkit-border-top-left-radius: @radius;
      -moz-border-radius-topright: @radius;
       -moz-border-radius-topleft: @radius;
          border-top-right-radius: @radius;
           border-top-left-radius: @radius;
}

/* text shadow */
.text-shadow(@width:1px) {
    text-shadow: 0 @width 0 rgba(0,0,0,.75);
}

/* centers text in a circle - input diameter of circle and color */
.circle (@radius:20,@color:#000) {
    height: @radius;
    width: @radius;
    padding: round(@radius/2);
    font-size: @radius;
    line-height:1em;
    .border-radius(50%);
    text-align: center;
    vertical-align: middle;
    background-color: @color;
    color: white;
}

/* pill version of the circle */
.pill (@radius:20,@color:#000) {
    height: @radius;
    width: @radius;
    padding: 1px round(@radius*1.2);
    font-size: @radius;
    line-height:1em;
    .border-radius(round(@radius*1.2));
    text-align: center;
    vertical-align: middle;
    background-color: @color;
    color: white;
}

.absolute-center {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

// rotates
.rotate(@degrees:180deg) {
  -ms-transform: rotate(@degrees);
  -webkit-transform: rotate(@degrees);
  transform: rotate(@degrees);
}


// Box sizing
.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
     -moz-box-sizing: @boxmodel;
          box-sizing: @boxmodel;
}

// WebKit-style focus
.tab-focus() {
  // Default
  outline: thin dotted;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

//box-shadow
.box-shadow(@shadow) {
    -webkit-box-shadow: @shadow;
       -moz-box-shadow: @shadow;
            box-shadow: @shadow; // iOS <4.3 & Android <4.1
}


// Transitions

.transition(@transition) {
  -webkit-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}


// Placeholder text
.placeholder(@color: @input-color-placeholder) {
  // Firefox
  &::-moz-placeholder {
    color: @color;
    opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
  }
  &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

// Rounded Corners
// these are used to generate graphics in code-block.html

.top-left-rounded-corner {
    -webkit-border-top-left-radius: @border-radius;
    -khtml-border-radius-topleft: @border-radius;
    border-top-left-radius: @border-radius;
}

.top-right-rounded-corner {
    -webkit-border-top-right-radius: @border-radius;
    -khtml-border-radius-topright: @border-radius;
    border-top-right-radius: @border-radius;
}

.bottom-left-rounded-corner {
    -webkit-border-bottom-left-radius: @border-radius;
    -khtml-border-radius-bottomleft: @border-radius;
    border-bottom-left-radius: @border-radius;
}

.bottom-right-rounded-corner {
    -webkit-border-bottom-right-radius: @border-radius;
    -khtml-border-radius-bottomright: @border-radius;
    border-bottom-right-radius: @border-radius;
}

.top-left-rounded-corner-mid {
    -webkit-border-top-left-radius: @border-radius;
    -khtml-border-radius-topleft: @border-radius;
    border-top-left-radius: @border-radius;
}

.top-right-rounded-corner-mid {
    -webkit-border-top-right-radius: @border-radius;
    -khtml-border-radius-topright: @border-radius;
    border-top-right-radius: @border-radius;
}

.bottom-left-rounded-corner-mid {
    -webkit-border-bottom-left-radius: @border-radius;
    -khtml-border-radius-bottomleft: @border-radius;
    border-bottom-left-radius: @border-radius;
}

.bottom-right-rounded-corner-mid {
    -webkit-border-bottom-right-radius: @border-radius;
    -khtml-border-radius-bottomright: @border-radius;
    border-bottom-right-radius: @border-radius;
}

// For Bootstrap
.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
  border-color: @border;

  & > .panel-heading {
    color: @heading-text-color;
    background-color: @heading-bg-color;
    border-color: @heading-border;

    + .panel-collapse > .panel-body {
      border-top-color: @border;
    }
    .badge {
      color: @heading-bg-color;
      background-color: @heading-text-color;
    }
  }
  & > .panel-footer {
    + .panel-collapse > .panel-body {
      border-bottom-color: @border;
    }
  }
}