Skip to content

Commit

Permalink
Merge pull request #264 from ONSvisual/243-removing-margin-on-group-l…
Browse files Browse the repository at this point in the history
…abels-in-css

Removed extra margin on grouped charts and moved to globalStyle
  • Loading branch information
MikeLister authored Oct 11, 2024
2 parents 83b6ffc + 887c542 commit 224dc3e
Show file tree
Hide file tree
Showing 13 changed files with 139 additions and 183 deletions.
7 changes: 1 addition & 6 deletions area-stacked-sm/chart.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
.title {
font-weight: 600;
fill: #414042;
}

#legend{
#legend {
display: grid;
align-items: center;
padding-bottom: 20px;
Expand Down
5 changes: 0 additions & 5 deletions bar-chart-horizontal-grouped-clustered/chart.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,3 @@
font-weight: 600;
font-size: 14px;
}

p.groupLabels{
padding-top:15px;
font-weight: 600;
}
10 changes: 3 additions & 7 deletions bar-chart-horizontal-grouped/chart.css
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
.dataLabels{
.dataLabels {
font-weight: 600;
font-size: 14px;
}

p.groupLabels{
padding-top:15px;
font-weight: 600;
}
text{
text {
forced-color-adjust: auto;
}
}
7 changes: 0 additions & 7 deletions bar-chart-horizontal-stacked-clustered-grouped/chart.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,3 @@
font-weight: 600;
font-size: 14px;
}

p.groupLabels{
padding-top:5px;
margin-top: 5px;
margin-bottom:0em;
font-weight: 600;
}
7 changes: 0 additions & 7 deletions bar-chart-horizontal-stacked-clustered/chart.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,3 @@
font-weight: 600;
font-size: 14px;
}

p.groupLabels{
padding-top:5px;
margin-top: 5px;
margin-bottom:0em;
font-weight: 600;
}
7 changes: 0 additions & 7 deletions bar-chart-horizontal-stacked-grouped/chart.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,3 @@
font-weight: 600;
font-size: 14px;
}

p.groupLabels{
padding-top:5px;
margin-top: 5px;
margin-bottom:0em;
font-weight: 600;
}
5 changes: 0 additions & 5 deletions comet-clustered/chart.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,6 @@
font-weight: 600;
font-size: 14px;
}

p.groupLabels{
padding-top:15px;
font-weight: 600;
}

.legendLabel{
font-size: 14px;
Expand Down
5 changes: 0 additions & 5 deletions comet-plot/chart.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,6 @@
font-size: 14px;
}

p.groupLabels{
padding-top:15px;
font-weight: 600;
}

.legendLabel{
font-size: 14px;
}
6 changes: 6 additions & 0 deletions lib/globalStyle.css
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,12 @@ h5#source {
fill: #414042;
}

/* Chart titles for grouped charts */
p.groupLabels {
padding-top:15px;
font-weight: 600;
margin: 0;
}
@media (max-width: 400px) {
#legend {
flex-flow: column;
Expand Down
80 changes: 40 additions & 40 deletions line-chart-sm-colours/chart.css
Original file line number Diff line number Diff line change
@@ -1,43 +1,43 @@
.grid line {
stroke: #ccc;
stroke-opacity: 0.7;
}

/* Need to discuss this with the team */
.axis path,
.axis line {
stroke: none; /* Changes the color of the axis lines */
}

.grid .tick {
stroke: lightgrey; /* Changes the color of the gridlines */
stroke-opacity: 0.7;
shape-rendering: crispEdges; /* Makes the gridlines appear more crisp */
}
.grid path {
stroke-width: 0; /* Removes the line along the y-axis */
}

.chart-container {
display: inline-block;
vertical-align: top;
}

.chart-container:last-child {
margin-right: 0;
}

.title {
font-weight: 600;
fill: #414042;
}
stroke: #ccc;
stroke-opacity: 0.7;
}

.dataLabel {
font-weight: 600;
font-size: 14px;
}
/* Need to discuss this with the team */
.axis path,
.axis line {
stroke: none;
/* Changes the color of the axis lines */
}

#legend {
margin-top: 10px;
margin-bottom: 10px;
}
.grid .tick {
stroke: lightgrey;
/* Changes the color of the gridlines */
stroke-opacity: 0.7;
shape-rendering: crispEdges;
/* Makes the gridlines appear more crisp */
}

.grid path {
stroke-width: 0;
/* Removes the line along the y-axis */
}

.chart-container {
display: inline-block;
vertical-align: top;
}

.chart-container:last-child {
margin-right: 0;
}

.dataLabel {
font-weight: 600;
font-size: 14px;
}

#legend {
margin-top: 10px;
margin-bottom: 10px;
}
80 changes: 40 additions & 40 deletions line-chart-sm/chart.css
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
.grid line {
stroke: #ccc;
stroke-opacity: 0.7;
}

/* Need to discuss this with the team */
.axis path,
.axis line {
stroke: none; /* Changes the color of the axis lines */
}

.grid .tick {
stroke: lightgrey; /* Changes the color of the gridlines */
stroke-opacity: 0.7;
shape-rendering: crispEdges; /* Makes the gridlines appear more crisp */
}
.grid path {
stroke-width: 0; /* Removes the line along the y-axis */
}

.chart-container {
display: inline-block;
vertical-align: top;
}

.chart-container:last-child {
margin-right: 0;
}

.title {
font-weight: 600;
fill: #414042;
}
stroke: #ccc;
stroke-opacity: 0.7;
}

.dataLabel {
font-weight: 600;
font-size: 14px;
}
/* Need to discuss this with the team */
.axis path,
.axis line {
stroke: none;
/* Changes the color of the axis lines */
}

.grid .tick {
stroke: lightgrey;
/* Changes the color of the gridlines */
stroke-opacity: 0.7;
shape-rendering: crispEdges;
/* Makes the gridlines appear more crisp */
}

.grid path {
stroke-width: 0;
/* Removes the line along the y-axis */
}

.chart-container {
display: inline-block;
vertical-align: top;
}

.chart-container:last-child {
margin-right: 0;
}

.dataLabel {
font-weight: 600;
font-size: 14px;
}

@media (forced-colors: active) {
.other {
stroke: grey
}
@media (forced-colors: active) {
.other {
stroke: grey
}
}
98 changes: 49 additions & 49 deletions line-chart-with-ci-sm/chart.css
Original file line number Diff line number Diff line change
@@ -1,57 +1,57 @@
.grid line {
stroke: #ccc;
stroke-opacity: 0.7;
}

/* Need to discuss this with the team */
.axis path,
.axis line {
stroke: none; /* Changes the color of the axis lines */
}

.grid .tick {
stroke: lightgrey; /* Changes the color of the gridlines */
stroke-opacity: 0.7;
shape-rendering: crispEdges; /* Makes the gridlines appear more crisp */
}
.grid path {
stroke-width: 0; /* Removes the line along the y-axis */
}

.chart-container {
display: inline-block;
vertical-align: top;
}

.chart-container:last-child {
margin-right: 0;
}

.title {
font-weight: 600;
fill: #414042;
}
stroke: #ccc;
stroke-opacity: 0.7;
}

.dataLabel {
font-weight: 600;
font-size: 14px;
}
/* Need to discuss this with the team */
.axis path,
.axis line {
stroke: none;
/* Changes the color of the axis lines */
}

#legend {
margin-top: 10px;
margin-bottom: 10px;
}
.grid .tick {
stroke: lightgrey;
/* Changes the color of the gridlines */
stroke-opacity: 0.7;
shape-rendering: crispEdges;
/* Makes the gridlines appear more crisp */
}


.legend--icon--rect {
height: 12px;
width: 12px;
align-self: center;
flex-shrink: 0;
forced-color-adjust: none;
}
.grid path {
stroke-width: 0;
/* Removes the line along the y-axis */
}

.chart-container {
display: inline-block;
vertical-align: top;
}

.chart-container:last-child {
margin-right: 0;
}

.dataLabel {
font-weight: 600;
font-size: 14px;
}

#legend {
margin-top: 10px;
margin-bottom: 10px;
}


.legend--icon--rect {
height: 12px;
width: 12px;
align-self: center;
flex-shrink: 0;
forced-color-adjust: none;
}

.legend--itemCI {
.legend--itemCI {
display: flex;
padding-right: 40px;
padding-bottom: 12px;
Expand Down
5 changes: 0 additions & 5 deletions range-plot/chart.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,3 @@ line.between{
font-weight: 600;
font-size: 14px;
}

p.groupLabels{
padding-top:15px;
font-weight: 600;
}

0 comments on commit 224dc3e

Please sign in to comment.