kosen-venture/RocketAnswer

View on GitHub
app/assets/stylesheets/answers.css.scss

Summary

Maintainability
Test Coverage
// 画像ビューア
.viewer {
  // サムネイル
  .thumbs {
    max-height: 1000px;
    overflow: auto;
    background-color: #fafafa;
    padding: 15px 10px;

    // 一覧
    ol {
      text-align: center;
      counter-reset: number;
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        position: relative;
        margin-bottom: 15px;
        padding-top: 1.5em;
      }
      li:before { // 番号
        counter-increment: number;
        content: counter(number);
        position: absolute;
        top: 0;
        left: 0.5em;
      }
    }

    img {
      width: 100%;
      max-width: 150px;
      box-shadow: 2px 2px 1px rgba(0,0,0,0.4);
    }
  }

  // プレビュー部分
  .preview {
    max-height: 1000px;
    overflow: auto;
    background-color: #fafafa;
    text-align: center;
    padding: 10px 10px;

    img {
      width: 100%;
      max-width: 800px;
      margin-bottom: 20px;
      box-shadow: 5px 5px 3px rgba(0,0,0,0.4);
    }
  }
}