@import "./miniui.scss";

// page
body { font-size: 14px;}

header.header {
	position: relative;
  z-index: 100;
  max-width: 100%;
  background: #fff;
  -webkit-box-shadow: 0 2px 8px #f0f1f2;
  box-shadow: 0 2px 8px #f0f1f2;

	.logo {
    padding: 16px 36px;
    font-family: 'optima';
	}
}

main.main {
  padding-top: 36px;
}

.miniui-summary {
  height: 100vh;
	width: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  & > ul {
    border-right: 1px solid #e8e8e8;
    ul {
      padding-left: 20px;
    }
    li {
      &.header {
        padding: 10px 15px;
        padding-top: 20px;
        text-transform: uppercase;
        color: #939da3;
      }
      a {
        display: block;
        padding: 10px 15px;
        border-bottom: none;
        color: #364149;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        position: relative;

        .comment {
          opacity: 0.7;
          margin-left: 0.5em;
          font-size: 12px;
        }
      }
    }
  }

	&.fixed {
		position: fixed;
		top: 0;
		left: 0;
	}

}

.miniui-body {
	margin: 0 auto 80px;
	max-width: 1000px;
}

.demo-row {
	margin-bottom: 8px;
	&.align-center {
		text-align: center;
	}
	&>div {
		padding: 10px 0;
	}
}

.demo-icon {
	width: 22%;
	font-size: 16px;
	margin: 1.5%;
	i {
		margin-right: 12px;
	}
}