3scale/porta

View on GitHub
app/assets/stylesheets/provider/stats/_base.scss

Summary

Maintainability
Test Coverage
@import 'provider/typography'; // needed for dev portals that include this stylesheet directly
 
.Stats {
@include white-box-shadow;
margin-bottom: line-height-times(1);
padding: line-height-times(1);
}
 
.StatsMenu-container,
.StatsMenuContainer,
.StatsSelector-container,
.StatsSelectorContainer {
display: inline-block;
}
 
/* Stats Menu Component */
 
$stats-menu-border-color: $border-color;
$stats-menu-text-color: $font-color;
$stats-menu-link-color: $font-color;
$stats-menu-link-color-selected: $highlight-color;
$stats-menu-help-color: $label-color;
 
.StatsMenu {
border: $border-width solid $stats-menu-border-color;
border-radius: $border-radius;
color: $stats-menu-text-color;
display: inline-block;
Properties should be ordered border, border-radius, color, display, height, margin, padding
`1/2` should be written with a single space on each side of the operator: `1 / 2`
margin: 0 line-height-times(1/2) line-height-times(1) 0;
`1/2` should be written with a single space on each side of the operator: `1 / 2`
padding: line-height-times(1/2);
height: auto;
 
&-period {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
 
&-periodItem {
display: inline-block;
`1/4` should be written with a single space on each side of the operator: `1 / 4`
margin: 0 line-height-times(1/4);
}
 
&-custom {
border-left: $border-width solid $stats-menu-border-color;
display: inline-block;
font-style: italic;
`1/4` should be written with a single space on each side of the operator: `1 / 4`
padding-left: line-height-times(1/4);
 
select {
Properties should be ordered margin, width
width: auto;
`1/4` should be written with a single space on each side of the operator: `1 / 4`
margin: line-height-times(-1/4) 0;
}
}
 
&-link,
&-Link {
color: $stats-menu-link-color;
cursor: pointer;
text-decoration: underline;
 
&:hover,
&.is-selected {
color: $stats-menu-link-color-selected;
}
}
 
&-periodLink,
&-customLink {
&.is-selected {
font-weight: $font-weight-bold;
text-decoration: none;
}
}
 
&-customInput {
display: none;
}
}
 
.Stats-message--notice {
color: $stats-menu-help-color;
font-style: italic;
margin: 0;
 
&.is-hidden {
display: none;
}
}
 
/* Stats Logs Component */
.StatsLogs,
.StatsLogs-loading {
&.is-hidden {
display: none;
}
}
 
/* StatsLogs Pagination */
.StatsLogs-pagination-item {
display: inline-block;
`1/8` should be written with a single space on each side of the operator: `1 / 8`
padding: 0 line-height-times(1/8);
}
 
.StatsLogs-pagination-link {
cursor: pointer;
}
 
/* StatsMessages Components */
.StatsMessages-list {
`1/2` should be written with a single space on each side of the operator: `1 / 2`
margin-bottom: line-height-times(1/2);
padding-left: line-height-times(1);
}
 
.StatsMessages-title {
`1/2` should be written with a single space on each side of the operator: `1 / 2`
margin-bottom: line-height-times(1/2);
}
 
/* StatsCVSLink */
 
.StatsCSVLink-container {
padding-bottom: line-height-times(1);
}
 
.StatsCSVLink {
color: $link-color;
cursor: pointer;
display: inline-block;
float: right;
 
&:hover {
color: $font-color;
}
}
 
.StatsCSVLink-disabled {
color: $disabled-color;
cursor: not-allowed;
display: inline-block;
float: right;
}
 
/* Stats Chart Component */
$stats-chart-border-color: $border-color;
$stats-chart-tooltip-shadow: $box-shadow-color;
$stats-chart-tooltip-bg-color: $content-background;
$stats-chart-tooltip-color: $label-color;
 
.StatsChart-container {
&.is-loading {
background-image: image-url('spinner.svg');
background-position: center;
background-repeat: no-repeat;
content: '';
height: 320px; // Fixed value, comes from stats package
opacity: .5;
}
 
.c3 svg {
font: $font-size-sm 'Lucida Grande', verdana, sans-serif;
}
 
.c3-line {
stroke-width: $border-width-lg;
}
 
Selector should have depth of applicability no greater than 3, but was 4
.c3-grid line.c3-ygrid,
.c3-axis-y .tick line {
stroke: $stats-chart-border-color;
}
 
.c3-ygrid {
stroke-dasharray: 0;
}
 
.c3-axis-y .domain {
display: none;
}
 
.c3-tooltip-container {
Properties should be ordered background, border, border-radius, box-shadow
border: $border-width solid $stats-chart-border-color;
border-radius: $border-radius;
`1/2` should be written with a single space on each side of the operator: `1 / 2`
box-shadow: 0 0 line-height-times(1/2) $stats-chart-tooltip-shadow;
background: rgba($content-background, .99);
//opacity: .98;
}
 
.c3-tooltip {
border: 0;
border-radius: $border-radius;
Avoid vendor prefixes.
-moz-box-shadow: 0 0 0 transparent;
Avoid vendor prefixes.
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
opacity: 1;
}
 
Merge rule `.c3-tooltip th` with rule on line 189
.c3-tooltip th {
background-color: $stats-chart-tooltip-bg-color;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
color: $stats-chart-tooltip-color;
`1/8` should be written with a single space on each side of the operator: `1 / 8`
`1/2` should be written with a single space on each side of the operator: `1 / 2`
padding: line-height-times(1/8) line-height-times(1/2);
}
 
Merge rule `.c3-tooltip tr` with rule on line 189
.c3-tooltip tr {
border: 0;
border-bottom: $border-width solid $stats-chart-border-color;
 
&:last-child {
border-bottom: 0;
 
Selector should have depth of applicability no greater than 3, but was 4
td {
 
Selector should have depth of applicability no greater than 3, but was 4
&:first-child {
border-bottom-left-radius: $border-radius;
}
 
Selector should have depth of applicability no greater than 3, but was 4
&:last-child {
border-bottom-right-radius: $border-radius;
}
}
}
}
 
Merge rule `.c3-tooltip td` with rule on line 189
.c3-tooltip td {
`border-left: 0` is preferred over `border-left: none`
border-left: none;
`1/2` should be written with a single space on each side of the operator: `1 / 2`
padding: 0 line-height-times(1/2);
}
}
 
.StatsChart,
.StatsChart-noDataMessageContainer {
&.is-hidden {
display: none;
}
}
 
// StatsMethodsTable
 
.StatsMethodsTable-name.is-children {
background-image: image-url('child_metric_background.png');
background-position: left center;
background-repeat: no-repeat;
padding-left: line-height-times(1);
}
 
.StatsMethodsTable {
//line-height: 2.6;
margin-bottom: line-height-times(1);
`1/2` should be written with a single space on each side of the operator: `1 / 2`
margin-top: line-height-times(1/2);
width: 100%;
 
td,
th {
border-bottom: $border-width solid $stats-menu-border-color;
}
}
 
// scss-lint:disable ImportantRule -- Force jQuery datepicker to have popover z-index https://github.com/patternfly/patternfly-elements/blob/933a0d6dd06c33d43291e5ed0ab87914fefd9a67/elements/pf-popover/pf-popover.css#L7
.ui-datepicker {
z-index: 9999 !important;
}