@import "ui-mixins";
@import "ui-variables";

.ui-demo {
  overflow: auto;
  color: @text-color;
  background-color: lighten(@tool-panel-background-color, 5%);

  section.collapsed {
    opacity: .6;
    padding-top: @component-padding;
    padding-bottom: @component-padding;
    &:hover { opacity: 1; }

    > .section-heading {
      display: block;
      margin: 0;
    }

    > * {
      display: none
    }
  }

  section .section-heading {
    cursor: pointer;
    &:hover {
      .text(highlighted);
      cursor: pointer;
    }
  }

  .overlay {
    position: relative;
  }

  .select-list {
    .editor.mini { height: 27px; }
  }
}

.example-code {
  position: relative;
  border: 1px solid @tool-panel-border-color;
  border-radius: @component-border-radius;
  margin: @component-padding 0;

  .example {
    padding: @component-padding;
    background: lighten(@tool-panel-background-color, 2%);
    border-radius: @component-border-radius @component-border-radius 0 0;
  }
}

@import "ui-mixins";
@import "ui-variables";

.ui-demo {
  overflow: auto;
  color: @text-color;
  background-color: lighten(@tool-panel-background-color, 5%);

  section.collapsed {
    opacity: .6;
    padding-top: @component-padding;
    padding-bottom: @component-padding;
    &:hover { opacity: 1; }

    > .section-heading {
      display: block;
      margin: 0;
    }

    > * {
      display: none
    }
  }

  section .section-heading {
    cursor: pointer;
    &:hover {
      .text(highlighted);
      cursor: pointer;
    }
  }

  .overlay {
    position: relative;
  }

  .select-list {
    .editor.mini { height: 27px; }
  }
}

.example-code {
  display: -webkit-flex;
  border: 1px solid @tool-panel-border-color;
  border-radius: @component-border-radius;
  margin: @component-padding 0;

  > * { width: 50%; }

  .example {
    position: relative;
    padding: @component-padding;
    background: lighten(@tool-panel-background-color, 2%);
    border-radius: @component-border-radius 0 0 @component-border-radius;
  }

  pre {
    border-radius: 0 @component-border-radius @component-border-radius 0;
  }
}

Make examples go side by side
Make examples go side by side