Skip to content

Commit 4b6b751

Browse files
pierrespierres
committed
Refactor SCSS: split monolithic main.scss into focused partials
- Co-locate component styles with their TS files (popularity-chart, country-map, swagger-ui-wrapper) - Merge svgmap theme config into components/country-map.scss - Extract Bootstrap variable overrides into _bootstrap.scss - Extract layout into _layout.scss, fun-page styles into _fun.scss, generic overrides into _overrides.scss
1 parent 634744d commit 4b6b751

8 files changed

Lines changed: 111 additions & 112 deletions

File tree

‎src/_bootstrap.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
$primary: #08c;
2+
$secondary: #333;
3+
$dark: $secondary;
4+
$light: #f6f9fc;
5+
$enable-rounded: false;
6+
$body-bg: $light;
7+
$body-color: $dark;
8+
$link-hover-color: #666;
9+
$navbar-dark-hover-color: #fff;
10+
$font-size-base: 0.875rem;
11+
$navbar-brand-padding-y: 0.14rem;
12+
$min-contrast-ratio: 3;
13+
$link-decoration: none;
14+
$link-hover-decoration: underline;
15+
$color-mode-type: media-query;

‎src/_fun.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.chart-preview-grid {
2+
display: none;
3+
4+
@include media-breakpoint-up(lg) {
5+
display: grid;
6+
grid-template-columns: repeat(5, 1fr);
7+
}
8+
}
9+
10+
.chart-preview-overlapping {
11+
grid-row: 1 / span 2;
12+
grid-column: 1 / span 3;
13+
z-index: 2;
14+
}
15+
16+
.chart-preview-underlying {
17+
grid-row: 2 / span 4;
18+
grid-column: 2 / span 3;
19+
}

‎src/_layout.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
#page {
2+
min-height: 100vh;
3+
display: flex;
4+
flex-direction: column;
5+
}
6+
7+
#content {
8+
flex: 1 0 auto;
9+
}
10+
11+
#footer {
12+
flex-shrink: 0;
13+
}

‎src/_overrides.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@use "sass:map";
2+
3+
.navbar-border-brand {
4+
border-bottom: 0.3125rem solid $primary;
5+
}
6+
7+
.progress-large {
8+
height: 2em;
9+
}
10+
11+
pre:has(> code) {
12+
background-color: var(--bs-secondary-bg);
13+
color: var(--bs-secondary-color);
14+
border-width: $border-width;
15+
border-style: $border-style;
16+
border-color: var(--bs-border-color);
17+
padding: map.get($gutters, 2);
18+
}
19+
20+
.code-link {
21+
color: inherit;
22+
23+
&:hover {
24+
color: inherit;
25+
}
26+
}

‎src/components/country-map.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// TODO: load this only on the countries page once per-page CSS loading is supported
2+
@use "svgmap-variables" with (
3+
$textColor: var(--bs-body-color),
4+
$textColorLight: var(--bs-secondary-color),
5+
$oceanColor: transparent,
6+
$mapActiveStrokeColor: var(--bs-link-hover-color),
7+
$mapControlsColor: var(--bs-body-color),
8+
$mapControlsBackgroundColor: var(--bs-body-bg),
9+
$mapTooltipColor: var(--bs-body-color),
10+
$mapTooltipBackgroundColor: var(--bs-body-bg),
11+
);
12+
@use "svgmap-styles";
13+
14+
country-map {
15+
display: block;
16+
aspect-ratio: auto 2 / 1;
17+
}

‎src/components/popularity-chart.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
popularity-chart {
2+
display: block;
3+
aspect-ratio: auto 16 / 9;
4+
5+
// prevent scroll bars during graph rendering
6+
canvas {
7+
display: none;
8+
}
9+
}

‎src/components/swagger-ui-wrapper.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
swagger-ui-wrapper {
2+
display: block;
3+
min-height: 300px;
4+
}

‎src/main.scss‎

Lines changed: 8 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,10 @@
1-
@use "sass:map";
2-
3-
// we should configure the global css first
4-
// css specific to single pages (map or chart) should only be loaded on those pages
5-
@use "svgmap-variables" with (
6-
$textColor: var(--bs-body-color),
7-
$textColorLight: var(--bs-secondary-color),
8-
$oceanColor: transparent,
9-
$mapActiveStrokeColor: var(--bs-link-hover-color),
10-
$mapControlsColor: var(--bs-body-color),
11-
$mapControlsBackgroundColor: var(--bs-body-bg),
12-
$mapTooltipColor: var(--bs-body-color),
13-
$mapTooltipBackgroundColor: var(--bs-body-bg),
14-
);
15-
@use "svgmap-styles";
16-
17-
$primary: #08c;
18-
$secondary: #333;
19-
$dark: $secondary;
20-
$light: #f6f9fc;
21-
$enable-rounded: false;
22-
$body-bg: $light;
23-
$body-color: $dark;
24-
$link-hover-color: #666;
25-
$navbar-dark-hover-color: #fff;
26-
$font-size-base: 0.875rem;
27-
$navbar-brand-padding-y: 0.14rem;
28-
$min-contrast-ratio: 3;
29-
$link-decoration: none;
30-
$link-hover-decoration: underline;
31-
$color-mode-type: media-query;
1+
// @use rules must precede all @import rules
2+
@use "./components/country-map";
323

4+
@import "bootstrap";
335
@import "bootstrap/scss/bootstrap.scss";
34-
35-
.navbar-border-brand {
36-
border-bottom: 0.313rem solid $primary;
37-
}
38-
39-
.progress-large {
40-
height: 2em;
41-
}
42-
43-
pre:has(> code) {
44-
background-color: var(--bs-secondary-bg);
45-
color: var(--bs-secondary-color);
46-
border-width: $border-width;
47-
border-style: $border-style;
48-
border-color: var(--bs-border-color);
49-
padding: map.get($gutters, 2);
50-
}
51-
52-
#page {
53-
position: relative;
54-
min-height: 100vh;
55-
}
56-
57-
#content {
58-
padding-bottom: 2.3rem;
59-
}
60-
61-
#footer {
62-
position: absolute;
63-
bottom: 0;
64-
width: 100%;
65-
height: 2.3rem;
66-
}
67-
68-
.code-link {
69-
color: inherit;
70-
71-
&:hover {
72-
color: inherit;
73-
}
74-
}
75-
76-
.chart-preview-grid {
77-
display: none;
78-
79-
@include media-breakpoint-up(lg) {
80-
display: grid;
81-
grid-template-columns: repeat(5, 1fr);
82-
}
83-
}
84-
85-
.chart-preview-overlapping {
86-
grid-row: 1 / span 2;
87-
grid-column: 1 / span 3;
88-
z-index: 2;
89-
}
90-
91-
.chart-preview-underlying {
92-
grid-row: 2 / span 4;
93-
grid-column: 2 / span 3;
94-
}
95-
96-
popularity-chart {
97-
display: block;
98-
aspect-ratio: auto 16 / 9;
99-
100-
// prevent scroll bars during graph rendering
101-
& canvas {
102-
display: none;
103-
}
104-
}
105-
106-
country-map {
107-
display: block;
108-
aspect-ratio: auto 2 / 1;
109-
}
110-
111-
swagger-ui-wrapper {
112-
display: block;
113-
min-height: 300px;
114-
}
6+
@import "layout";
7+
@import "overrides";
8+
@import "fun";
9+
@import "components/popularity-chart";
10+
@import "components/swagger-ui-wrapper";

0 commit comments

Comments
 (0)