Files
awx/awx/ui/client/src/dashboard/counts/dashboard-counts.block.less
2016-05-05 16:17:51 -04:00

89 lines
1.8 KiB
Plaintext

@import "../../shared/branding/colors.default.less";
/** @define DashboardCounts */
.DashboardCounts {
display: flex;
flex-direction: row;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
padding-top: 0;
margin-top: 0;
}
.DashboardCounts-buttonStyle {
text-align: center;
padding: 8px;
padding-bottom: 11px;
padding-left: 15px;
padding-right: 15px;
border-radius: 5px;
background-color: @db-panel-bg;
border: 1px solid @db-panel-border;
flex: 1 0 auto;
max-width: ~"calc(16.6% - 15px)";
flex-basis: ~"calc(16.6% - 15px)";
transition: background-color 0.2s, border-color 0.2s;
}
.DashboardCounts-buttonStyle:hover {
background-color: @db-count-succ;
border-color: @db-count-succ;
.DashboardCounts-number,
.DashboardCounts-label {
color: @db-count-label-hov;
}
}
.DashboardCounts-buttonStyle.is-failure:hover {
background-color: @db-count-fail;
border-color: @db-count-fail;
.DashboardCounts-number,
.DashboardCounts-label {
color: @db-count-label-hov;
}
}
.DashboardCounts-number {
font-size: 30px;
line-height: 26px;
flex: 1;
transition: color 0.2s;
}
.DashboardCounts-number.is-failure {
color: @db-count-fail;
}
.DashboardCounts-label {
flex: 1;
margin-bottom: 0px;
color: @db-count-label;
text-transform: uppercase;
transition: color 0.2s;
}
@media only screen and (max-width: 710px) {
.DashboardCounts {
margin-bottom: -15px;
}
.DashboardCounts-buttonStyle {
margin-bottom: 15px;
width: 33%;
flex-basis: ~"calc(33% - 7px)";
max-width: ~"calc(33% - 7px)";
height: 96px;
}
}
@media only screen and (max-width: 360px) {
.DashboardCounts-label {
font-size: 10px;
}
}