@import "colors"; $dark-grey: #333333; $light-grey: #999999; $default-space: 15px; $new-h1-margin-bottom: 4 * $default-space; $new-h2-margin-bottom: 3 * $default-space; .new-h1, .new-h2 { color: $dark-grey; text-align: center; font-weight: bold; } .new-h1 { margin-bottom: $new-h1-margin-bottom; font-size: 41px; } .new-h2 { margin-bottom: $new-h2-margin-bottom; font-size: 36px; } $statistiques-padding-top: $default-space * 2; .statistiques { width: 1040px; margin: 0 auto; padding-top: $statistiques-padding-top; } .stat-cards { .stat-card:nth-of-type(even) { margin-right: 0px; } } $stat-card-margin-bottom: 3 * $default-space; .stat-card { padding: 15px; margin-bottom: $stat-card-margin-bottom; border-radius: 5px; box-shadow: none; border: 1px solid rgba(0, 0, 0, 0.15); } $stat-card-half-horizontal-spacing: 4 * $default-space; .stat-card-half { width: calc((100% - #{$stat-card-half-horizontal-spacing}) / 2); margin-right: $stat-card-half-horizontal-spacing; } .stat-card-title { color: $dark-grey; font-size: 26px; font-weight: bold; width: 200px; } .stat-card-details { font-size: 13px; font-style: italic; } $segmented-control-margin-top: $default-space; .segmented-control { border-radius: 36px; height: 36px; line-height: 36px; font-size: 0; padding: 0; display: inline-block; margin-top: $segmented-control-margin-top; } $segmented-control-item-horizontal-padding: $default-space; $segmented-control-item-border-radius: 2 * $default-space; .segmented-control-item { display: inline-block; font-size: 15px; border: 2px solid $blue-france-700; margin-right: -2px; padding-left: $segmented-control-item-horizontal-padding; padding-right: $segmented-control-item-horizontal-padding; color: $blue-france-700; &:first-of-type { border-radius: $segmented-control-item-border-radius 0px 0px $segmented-control-item-border-radius; } &:last-of-type { border-radius: 0px $segmented-control-item-border-radius $segmented-control-item-border-radius 0px; margin-right: 0; } &:hover { background-color: $blue-france-500; color: #FFFFFF; cursor: pointer; } } .segmented-control-item-active { background-color: $blue-france-700; color: #FFFFFF; } .chart-container { margin-top: 36px; } .chart { width: 100%; } $big-number-card-padding: 2 * $segmented-control-item-border-radius; .big-number-card { padding: $big-number-card-padding $segmented-control-item-horizontal-padding; } .big-number-card-title { display: block; text-align: center; margin: 0 auto; margin-bottom: 20px; color: $light-grey; &.long-title { margin-left: -30px; margin-right: -30px; } } .big-number-card-number { display: block; text-align: center; font-size: 90px; line-height: 90px; font-weight: bold; color: $blue-france-500; } .big-number-card-detail { display: block; text-align: center; color: $blue-france-500; }