wikijs/client/scss/components/panel.scss

.panel-aside {
	background-color: mc('blue-grey', '800');
	border: 1px solid mc('blue-grey', '800');
	border-bottom-left-radius: 8px;
	padding: 20px;
	color: mc('blue-grey','100');

	label {
		color: #FFF;
	}

}

.panel {
  background-color: #FFF;
  box-shadow: 0 0 12px 0 rgba(mc('grey','800'), .10), 1px 6px 8px 0 rgba(mc('grey','800'), .10);
  padding: 0 0 1px 0;
  border-radius: 4px;

  .panel-title {
    border-bottom: 1px solid darken($color-bg, 5%);
    padding: 0 15px;
    color: $color-text;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;

    &.is-featured {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background-color: mc($primary, '400');
      border-bottom-color: mc($primary, '500');
      color: #FFF;

      > i::before {
        @include spinner(#FFF, 0.4s, 18px);
      }

    }

    > span {
      font-weight: 500;
    }

    > i {
      display: flex;
      width: 18px;
      align-items: center;

      &::before {
        content: " ";
        @include spinner(mc($primary,'500'), 0.4s, 18px);
      }
    }

  }

  .panel-content {
    padding: 0 15px;

    &.is-text {
      padding: 25px;

      p + p, p + h3 {
        margin-top: 25px;
      }

      h3 {
        margin-bottom: 15px;
        font-weight: 500;
      }

      ul li {
        color: mc('grey', '700');
      }

      strong {
        font-weight: 500;
        color: mc($primary,'800');
      }

    }

  }

  .panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50px;
    background-color: $color-bg;
    padding: 0 15px;
    margin: 0 1px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: relative;

    .button + .button {
      margin-left: 10px;
    }

  }

  + .panel {
    margin-top: 25px;
  }

}