reactioncommerce/redoc

/* GLOBAL STYLES
-------------------------------------------------- */
html, body {
  letter-spacing: @letter-spacing;
}

main {
  min-height: 80vh;
  // padding: 20px 60px 135px 60px;
  // padding: 20px 0 135px
  background-color: @white;
}

.container-main {
  padding: 20px 60px 135px 60px;
}

/* Fix for hidden modals */
.modal-dialog {
  z-index: 9999;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
@media only screen and (max-width: @screen-sm-max) {
  body {
    font-size: @font-size-small;
  }
  h1 {
    font-size: floor((@font-size-base * 2.15));
  }
  h2 {
    font-size: floor((@font-size-base * 1.7));
  }
}


/* Special fix for bootstrap modal see: https://github.com/twbs/bootstrap/issues/9855 */
body.modal-open {
  margin-right: 0px !important;
}

/* Loading indicator, spreads over whole screen estate to intercept mouse events until view is rendered. */
// .spinner-container {
//   left: 0;
//   position: absolute;
//   top: 0;
// }

.editable-error-block {
    max-width: 100% !important;
    font-size: @font-size-base;
    float: left;

}
/* Inline error block */
.error-block {
  margin: 5px 0;
  padding-left: 30px;
  color: #b94a48;
}

h1 {
  font-family : @headings-font-family-h1;
  color: @headings-color-h1;
  font-weight: @headings-font-weight-h1;
}

h2 {
  font-family : @headings-font-family-h2;
  color: @headings-color-h2;
  font-weight: @headings-font-weight-h2;
}

h3 {
  font-family : @headings-font-family-h3;
  color: @headings-color-h3;
  font-weight: @headings-font-weight-h3;
}



/* Badge Colors
// Contextual variations of badges
// Bootstrap 3.0 removed contexts for badges, we re-introduce them, based on what is done for labels
*/
.badge-default {
  .label-variant(@label-default-bg);
}

.badge-primary {
  .label-variant(@label-primary-bg);
}

.badge-success {
  .label-variant(@label-success-bg);
}

.badge-info {
  .label-variant(@label-info-bg);
}

.badge-warning {
  .label-variant(@label-warning-bg);
}

.badge-danger {
  .label-variant(@label-danger-bg);
}

.badge-low-inv-warning {
  .label-variant(@label-warning-bg);
}

/* ribbon for dashboard */
.ribbon(@size,@color,@textcolor) {
  position: relative;
  &:before, &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }
  &:before {
    width: @size;
    height: @size;
    z-index: 1;
    /* FF3.6+ */
    background:
    -moz-linear-gradient(
    45deg,
    rgba(red(@color),green(@color),blue(@color),0) 0%,
    rgba(red(@color),green(@color),blue(@color),0) 49.9%,
    rgba(red(@color),green(@color),blue(@color),1) 50%,
    rgba(red(@color),green(@color),blue(@color),1) 74.9%,
    rgba(red(@color),green(@color),blue(@color),0) 75%,
    rgba(red(@color),green(@color),blue(@color),0) 100%);
    /* Chrome10+,Safari5.1+ */
    background:
    -webkit-linear-gradient(
    45deg,
    rgba(red(@color),green(@color),blue(@color),0) 0%,
    rgba(red(@color),green(@color),blue(@color),0) 49.9%,
    rgba(red(@color),green(@color),blue(@color),1) 50%,
    rgba(red(@color),green(@color),blue(@color),1) 74.9%,
    rgba(red(@color),green(@color),blue(@color),0) 75%,
    rgba(red(@color),green(@color),blue(@color),0) 100%);
    /* Opera 11.10+ */
    background:
    -o-linear-gradient(
    45deg,
    rgba(red(@color),green(@color),blue(@color),0) 0%,
    rgba(red(@color),green(@color),blue(@color),0) 49.9%,
    rgba(red(@color),green(@color),blue(@color),1) 50%,
    rgba(red(@color),green(@color),blue(@color),1) 74.9%,
    rgba(red(@color),green(@color),blue(@color),0) 75%,
    rgba(red(@color),green(@color),blue(@color),0) 100%);
    /* IE10+ */
    background:
    -ms-linear-gradient(
    45deg,
    rgba(red(@color),green(@color),blue(@color),0) 0%,
    rgba(red(@color),green(@color),blue(@color),0) 49.9%,
    rgba(red(@color),green(@color),blue(@color),1) 50%,
    rgba(red(@color),green(@color),blue(@color),1) 74.9%,
    rgba(red(@color),green(@color),blue(@color),0) 75%,
    rgba(red(@color),green(@color),blue(@color),0) 100%);
    /* W3C */
    background:
    linear-gradient(
    45deg,
    rgba(red(@color),green(@color),blue(@color),0) 0%,
    rgba(red(@color),green(@color),blue(@color),0) 49.9%,
    rgba(red(@color),green(@color),blue(@color),1) 50%,
    rgba(red(@color),green(@color),blue(@color),1) 74.9%,
    rgba(red(@color),green(@color),blue(@color),0) 75%,
    rgba(red(@color),green(@color),blue(@color),0) 100%);
  }
  &:after {
    content: attr(data-ribbon);
    width: @size;
    height: @size;
    z-index: 2;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: (@size / 4);
    right: (@size / 4);
    color: @textcolor;
    text-align: center;
    font-size: (@size / 6.0);
    letter-spacing: (@size / 28);
    line-height: 0;
    text-shadow: 1px 1px 1px darken(@color,30%);
  }

}

/* RTL mixins
-------------------------------------------------- */

.rtl(@rules) {
  html.rtl & {
    @rules();
  }
}
.ltr(@rules) {
  html:not(.rtl) & {
    @rules();
  }
}

.left(@n) {
  .ltr({ left: @n; });
  .rtl({ right: @n; });
}
.right(@n) {
  .ltr({ right: @n; });
  .rtl({ left: @n; });
}
.margin-left(@n) {
  .ltr({ margin-left: @n; });
  .rtl({ margin-right: @n; });
}
.margin-right(@n) {
  .ltr({ margin-right: @n; });
  .rtl({ margin-left: @n; });
}
.padding-left(@n) {
  .ltr({ padding-left: @n; });
  .rtl({ padding-right: @n; });
}
.padding-right(@n) {
  .ltr({ padding-right: @n; });
  .rtl({ padding-left: @n; });
}

.float(@n) when (@n = left) {
  .ltr({ float: left; });
  .rtl({ float: right; });
}
.float(@n) when (@n = right) {
  .ltr({ float: right; });
  .rtl({ float: left; });
}
.float(@n) when not (@n = left) and not (@n = right) {
  float: @n;
}

.clear(@n) when (@n = left) {
  .ltr({ clear: left; });
  .rtl({ clear: right; });
}
.clear(@n) when (@n = right) {
  .ltr({ clear: right; });
  .rtl({ clear: left; });
}
.clear(@n) when not (@n = left) and not (@n = right) {
  clear: @n;
}

.text-align(@n) when (@n = left) {
  .ltr({ text-align: left; });
  .rtl({ text-align: right; });
}
.text-align(@n) when (@n = right) {
  .ltr({ text-align: right; });
  .rtl({ text-align: left; });
}
.text-align(@n) when not (@n = left) and not (@n = right) {
  text-align: @n;
}

/* end of RTL mixins */

/* Flexbox Mixins
Slightly modified from: https://gist.github.com/jayj/4012969
-------------------------------------------------- */

// Flexbox display
// flex or inline-flex
.display(@display: flex) {
  display: ~"-webkit-@{display}";
  display: ~"-moz-@{display}";
  display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
  display: ~"-ms-@{display}"; // IE11
  display: @display;
}

// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
.flex(@columns: initial) {
  -webkit-flex: @columns;
     -moz-flex: @columns;
      -ms-flex: @columns;
          flex: @columns;
}

// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
.flex-direction(@direction: row) {
  -webkit-flex-direction: @direction;
     -moz-flex-direction: @direction;
      -ms-flex-direction: @direction;
          flex-direction: @direction;
}

// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
.flex-wrap(@wrap: nowrap) {
  -webkit-flex-wrap: @wrap;
     -moz-flex-wrap: @wrap;
      -ms-flex-wrap: @wrap;
          flex-wrap: @wrap;
}

// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
.flex-flow(@flow) {
  -webkit-flex-flow: @flow;
     -moz-flex-flow: @flow;
      -ms-flex-flow: @flow;
          flex-flow: @flow;
}

// Display Order
// - applies to: flex items
// <integer>
.flex-order(@order: 0) {
  -webkit-order: @order;
     -moz-order: @order;
      -ms-order: @order;
          order: @order;
}

// Flex grow factor
// - applies to: flex items
// <number>
.flex-grow(@grow: 0) {
  -webkit-flex-grow: @grow;
     -moz-flex-grow: @grow;
      -ms-flex-grow: @grow;
          flex-grow: @grow;
}

// Flex shrink
// - applies to: flex item shrink factor
// <number>
.flex-shrink(@shrink: 1) {
  -webkit-flex-shrink: @shrink;
     -moz-flex-shrink: @shrink;
      -ms-flex-shrink: @shrink;
          flex-shrink: @shrink;
}

// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width>
.flex-basis(@width: auto) {
  -webkit-flex-basis: @width;
     -moz-flex-basis: @width;
      -ms-flex-basis: @width;
          flex-basis: @width;
}

// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around
.justify-content(@justify: flex-start) {
  -webkit-justify-content: @justify;
     -moz-justify-content: @justify;
      -ms-justify-content: @justify;
          justify-content: @justify;
}

// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch
.align-content(@align: stretch) {
  -webkit-align-content: @align;
     -moz-align-content: @align;
      -ms-align-content: @align;
          align-content: @align;
}

// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
.align-items(@align: stretch) {
  -webkit-align-items: @align;
     -moz-align-items: @align;
      -ms-align-items: @align;
          align-items: @align;
}

// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch
.align-self(@align: auto) {
  -webkit-align-self: @align;
     -moz-align-self: @align;
      -ms-align-self: @align;
          align-self: @align;
}