intern/lib/reporters/html/html.styl

Intern. A next-generation code testing stack for JavaScript.

$bodyBackground = #F7F6F5;
$bodyTextColor = #DEDEDE;
$cellBorderColor = #DEDEDE;
$failedColor = #F15064;
$headingColor = #717171;
$passedColor = #41C645;
$skippedColor = #b0b0b0;
$sectionHeadingBackground = #C4E5E5;
$summaryBorderColor = #DFDFDF;
$summaryBottomBackground = #fff;
$summaryTextColor = #777;
$summaryTopBackground = #F1F0EF;
$testsColor = #59B0C6;
$reportTextColor = #3C3C3C;
$lineHeight = 18px;

statusColors($bg, $color) {
	.column-status {
		background: $bg;
		border: 1px solid darken($bg, 10%);

    .icon {
      path {
        fill: $color;
      }
    }
	}
}

userSelect($value) {
	user-select: $value;
	-ms-user-select: $value;
	-moz-user-select: $value;
	-webkit-user-select: $value;
}

html,
body {
	background: $bodyBackground;
	color: $bodyTextColor;
	font: 14px/normal Helvetica, Arial, sans-serif;
  line-height: $lineHeight;
	margin: 0;
	visibility: visible;
	padding-bottom: 2em;
	padding-top: 0;
}

.icon {
  display: block;
  margin: 0 auto;
}

.internReportContainer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
	margin: 0 auto;
	width: 75%;
  min-width: 800px;
}

.reportHeader {
	background: #fff;
	box-shadow: 0px 1px 2px 0px rgba(#000, 15%);
	margin: 0 0 1em 0;
	padding: 0.6em;
	text-align: center;

	.headerLogo {
		height: 45px;
		margin-right: 10px;
		vertical-align: middle;
		width: 45px;
	}

	.headerTitle {
		color: $headingColor;
		font-size: 1em;
		font-weight: 300;
		padding-top: 3px;
		vertical-align: middle;
	}
}

.summary {
	border-collapse: collapse;
	margin-bottom: 2.5em;
	width: 100%;
  display: flex;

  .summaryContent {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: space-evenly;

		font-size: 1em;
    background: $summaryTopBackground;
    border: 1px solid $summaryBorderColor;
    border-radius: 6px 6px 0 0;
    box-shadow: 0px 1px 2px 0px rgba(#000, 15%);
    margin: 0 1em 0 auto;
    color: $summaryTextColor;

    .icon {
      margin-top: 10px;
      width: 42px;
      height: 42px;
    }

    &.suites,
    &.tests,
    &.duration,
    &.skipped {
      svg path {
        fill: $summaryTextColor;
      }
    }

    &.failed,
    &.success,
    &.successRate {
      svg path {
        fill: white;
      }
    }

    &.failed,
    &.successRate.failed {
      background: $failedColor;
      color: #fff;

      .summaryTitle {
        border-color: darken($failedColor, 20%);
        color: $summaryTextColor;
      }

      &.success {
        margin-right: 1em;
      }
    }

    &.success,
    &.successRate {
      background: darken($passedColor, 20%);
      color: #fff;
      margin-right: 0;

      .summaryTitle {
        border-color: darken($passedColor, 20%);
        color: $summaryTextColor;
      }
    }

    .summaryTitle {
      flex-grow: 0;
      background: #fff;
      border: 1px solid $summaryBorderColor;
      border-radius: 14px;
      display: inline-block;
      padding: 0.2em 1em;
      position: relative;
      top: 10px;
      z-index: 1;
    }

    .summaryData {
      flex-grow: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      background: $summaryBottomBackground;
      box-sizing: border-box;
      color: $summaryTextColor;
      font-size: 28px;
      font-weight: 300;
      padding: 26px 0 16px 0;
    }
  }
}

.toggleFilter {
	color: $reportTextColor;
	input {
		margin-left: 0.5em;
		margin-right: 0.5em;
	}
}

.report {
	background-color: #fff;
	border-collapse: collapse;
	color: $reportTextColor;
  table-layout: fixed;
  width: 100%;

	a {
		text-decoration: none;
	}

	a:hover {
		text-decoration: underline;
	}

	a,
	a:visited {
		color: inherit;
	}

	td {
		padding: 0.7em;
		border-left: 1px solid $cellBorderColor;
		border-right: 1px solid $cellBorderColor;
    vertical-align: top;
	}

  .column-status {
    padding: 0;

    .statusContent {
      position: relative;
      padding: 0.7em 0;
      text-align: center;
    }
  }

	.suite {
		background: $sectionHeadingBackground;

    .column-status {
      .icon {
        width: 21px;
        height: 21px;
      }

      .statusContent:after {
        bottom: 0;
        content: '\25bc';
        display: block;
        font-size: 9px;
        position: absolute;
        right: 2px;
      }
    }

		statusColors(darken($sectionHeadingBackground, 10%), darken($sectionHeadingBackground, 60%));

		td {
			border: 1px solid darken($sectionHeadingBackground, 20%);

			&.title {
				font-size: 15px;
				font-weight: bold;
			}

			&.duration {
				text-align:right;
			}
		}

		.column-info {
			span {
				margin-right: 1em;
			}

			.success {
				color: darken($passedColor, 30%);
			}

			.failed {
				color: darken($failedColor, 30%);
			}

			.skipped {
				color: darken($skippedColor, 30%);
			}
		}

		&.collapsed {
			.column-status .statusContent:after {
				content: '\25b6';
			}
		}

		&.indent {
      $bgColor = lighten($sectionHeadingBackground, 60%);
			background: $bgColor;

			td {
				border-color: darken($bgColor, 10%);
			}

      statusColors(darken($bgColor, 15%), darken($bgColor, 60%));
		}

		&.skipped {
			statusColors(lighten($skippedColor, 80%), $skippedColor)

			color: $skippedColor;
			background-color: #fff;

			td {
				border-color: darken(#fff, 10%);
			}
		}
	}

	.testResult {
		transition: background 0.3s ease;

    .icon {
      width: 21px;
      height: 21px;
    }


		td {
			border: 1px solid $cellBorderColor;

			&.duration {
				text-align: right;
			}
		}

		&.passed {
			statusColors(lighten($passedColor, 70%), $passedColor)

			&:hover {
				background: lighten($passedColor, 90%);
			}
		}

		&.failed {
			background: lighten($failedColor, 65%);
			statusColors(lighten($failedColor, 70%), $failedColor);

			&:hover {
				background:lighten(@background, 20%);
			}

			td {
				border-color:lighten($failedColor, 40%);
				border-bottom:0;
			}

      .testError {
        pre {
          margin: 0;
        }
      }
		}

		&.skipped {
			statusColors(lighten($skippedColor, 80%), $skippedColor)
			color: $skippedColor;
		}
	}

	.indent1 { padding-left: 1.5em; }
	.indent2 { padding-left: 3em; }
	.indent3 { padding-left: 4.5em; }
	.indent4 { padding-left: 6em; }
	.indent5 { padding-left: 7.5em; }
}

.truncateText {
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.scrollText {
  overflow: auto;
}

.column-status {
	width: 40px;
}

.column-id {
  width: 20%;
}

.column-info {
  width: 60%;
}

.column-time {
  width: 70px;
}

.hidePassed .report {
	.passed {
		display: none;
	}
}

.hideSkipped .report {
	.skipped {
		display: none;
	}
}

.reportControls {
	margin-bottom: 0.75em;
	color: $summaryTextColor;

	> * {
		width: 50%;
	}

	* {
		display: inline-block;
	}

	> :last-child {
		text-align: right;
    > * {
      margin-left: 1em;
    }
	}
}

.linkButton {
	padding: 1px 4px 3px 4px;
	border-radius: 4px;
	background: $summaryTopBackground;
	border: 1px solid $summaryBorderColor;
	display: inline-block;
	font-size: 0.8em;
	cursor: pointer;
	userSelect(none);
}