ocular/base/styles/_demo.scss

// Copyright (c) 2018 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

@import 'variables';

.markdown {
  width: calc(100% - #{$toc-width});
  position: absolute;
}

@media screen and (max-width: $mobile) {
  .markdown {
    width: 100%;
  }
}

.markdown-body {
  padding: 40px 36px 96px;
}

.overlays {
  cursor: crosshair;
}

.container.page {
  max-width: inherit;
}

.demo {
  position: relative;
  overflow: hidden !important;
  height: 35vh;
  transition: height 600ms cubic-bezier(0.22, 0.61, 0.36, 1);

  h2 {
    margin-bottom: 0;
    font-size: 1rem;
  }

  > div:first-child {
    margin-top: -20vh;
    transition: margin-top 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  &:hover {
    height: 70vh;
    > div:first-child {
      margin-top: 0;
    }
  }
}

.guideline-chart {
  border: 1px solid #e5e5e4;
  padding: 20px;
  max-width: 700px;
}

.inline-code {
  padding: 1rem 2rem;
  overflow-x: hidden;
}