Skip to content

Commit 70aa4ff

Browse files
dcoadcoa
committed
refactor: update styles to use css variables
1 parent d4c361a commit 70aa4ff

File tree

16 files changed

+100
-109
lines changed

16 files changed

+100
-109
lines changed

‎src/course-home/courseware-search/courseware-search.scss

+12-12
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
height: 100%;
1010
max-width: none;
1111
margin: 0;
12-
border-top: 1px solid $light-300;
13-
z-index: $zindex-modal; // Bootstrap's z-index layer for Modals.
12+
border-top: 1px solid var(--pgn-color-light-300);
13+
z-index: var(--pgn-elevation-modal-zindex); // Bootstrap's z-index layer for Modals.
1414

1515
&__form {
1616
position: relative;
@@ -47,7 +47,7 @@
4747

4848
&__results-summary {
4949
font-size: .9rem;
50-
color: $gray-500;
50+
color: var(--pgn-color-gray-500);
5151
padding: 1rem 0 .5rem;
5252
}
5353

@@ -62,7 +62,7 @@
6262
margin-top: 1.5rem;
6363

6464
&__empty {
65-
color: $gray-500;
65+
color: var(--pgn-color-gray-500);
6666
padding: 6rem 0;
6767
text-align: center;
6868
}
@@ -76,17 +76,17 @@
7676

7777
&:hover {
7878
text-decoration: none;
79-
background: $light-300;
79+
background: var(--pgn-color-light-300);
8080
}
8181

8282
&:not(:first-child) {
83-
border-top: 1px solid $light-300;
83+
border-top: 1px solid var(--pgn-color-light-300);
8484
}
8585
}
8686

8787
&__icon {
8888
padding: 0.375rem 0 0 0.375rem;
89-
color: $gray-300;
89+
color: var(--pgn-color-gray-300);
9090
}
9191

9292
&__info {
@@ -99,7 +99,7 @@
9999
align-items: center;
100100
line-height: 2.5;
101101
font-size: 0.875rem;
102-
color: $black;
102+
color: var(--pgn-color-black);
103103

104104
> span {
105105
display: block;
@@ -113,7 +113,7 @@
113113
font-variant-numeric: lining-nums tabular-nums;
114114
min-width: 1.25rem;
115115
line-height: 1rem;
116-
background: $light-300;
116+
background: var(--pgn-color-light-300);
117117
border-radius: 99rem;
118118
font-style: normal;
119119
margin-left: 0.375rem;
@@ -125,7 +125,7 @@
125125
&__breadcrumbs {
126126
display: flex;
127127
gap: 1.25rem;
128-
color: $gray-500;
128+
color: var(--pgn-color-gray-500);
129129
overflow: hidden;
130130
list-style: none;
131131
padding: 0;
@@ -156,14 +156,14 @@
156156
}
157157

158158
.courseware-search-results-tabs {
159-
border-bottom-color: $gray-400 !important;
159+
border-bottom-color: var(--pgn-color-gray-400) !important;
160160

161161
&.nav-tabs .nav-link.active {
162162
border-bottom-width: 4px !important;
163163
}
164164
}
165165

166-
@media (min-width: map-get($grid-breakpoints, 'md')) {
166+
@media (--pgn-size-breakpoint-min-width-md) {
167167
.courseware-search {
168168
&__close {
169169
right: -2.5rem;

‎src/course-home/outline-tab/widgets/FlagButton.scss

+9-10
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
1-
@import "~@edx/brand/paragon/variables";
2-
@import "~@openedx/paragon/scss/core/core";
3-
@import "~@edx/brand/paragon/overrides";
1+
2+
@use "~@edx/brand/paragon/overrides";
43

54
.flag-button {
6-
background-color: $white;
7-
border: 1px solid $light-400;
5+
background-color: var(--pgn-color-white);
6+
border: 1px solid var(--pgn-color-light-400);
87
border-radius: .2rem;
9-
box-shadow: 0 0 0 2px $light-400;
8+
box-shadow: 0 0 0 2px var(--pgn-color-light-400);
109

1110
&:hover {
12-
border: 1px solid $primary-300;
13-
box-shadow: 0 0 0 2px $white;
11+
border: 1px solid var(--pgn-color-primary-300);
12+
box-shadow: 0 0 0 2px var(--pgn-color-white);
1413
}
1514
}
1615

1716
.flag-button-selected {
18-
border: 1px solid $primary-300;
19-
box-shadow: 0 0 0 2px $primary-300;
17+
border: 1px solid var(--pgn-color-primary-300);
18+
box-shadow: 0 0 0 2px var(--pgn-color-primary-300);
2019
pointer-events: none;
2120
}
2221

‎src/course-home/outline-tab/widgets/ProctoringInfoPanel.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.outline-sidebar-proctoring-panel {
2-
border: 1px solid $dark-500;
3-
border-top: 5px solid $brand-600;
2+
border: 1px solid var(--pgn-color-dark-500);
3+
border-top: 5px solid var(--pgn-color-brand-600);
44
}
55
.proctoring-onboarding-success {
6-
border-top: 5px solid $primary-500;
6+
border-top: 5px solid var(--pgn-color-primary-500);
77
}
88
.proctoring-onboarding-submitted {
9-
border-top: 5px solid $dark-500;
9+
border-top: 5px solid var(--pgn-color-dark-500);
1010
}

‎src/course-home/progress-tab/course-completion/CompletionDonutChart.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@
77

88
.donut-chart-label {
99
font: {
10-
family: $font-family-sans-serif;
10+
family: var(--pgn-typography-font-family-sans-serif);
1111
size: .2rem;
12-
weight: $font-weight-normal;
12+
weight: var(--pgn-typography-font-weight-normal);
1313
}
1414
text-anchor: middle;
1515
}
1616

1717
.donut-chart-number {
1818
font: {
19-
family: $font-family-monospace;
19+
family: var(--pgn-typography-font-family-monospace);
2020
size: .5rem;
21-
weight: $font-weight-bold;
21+
weight: var(--pgn-typography-font-weight-bold);
2222
}
2323
line-height: 1rem;
2424
text-anchor: middle;
@@ -29,7 +29,7 @@
2929
}
3030

3131
.donut-chart-text {
32-
fill: $primary-500;
32+
fill: var(--pgn-color-primary-500);
3333
-moz-transform: translateY(0.25em);
3434
-ms-transform: translateY(0.25em);
3535
-webkit-transform: translateY(0.25em);
@@ -56,7 +56,7 @@
5656

5757
.donut-ring, .donut-segment, .donut-hole {
5858
&.complete-stroke {
59-
stroke: $info-500;
59+
stroke: var(--pgn-color-info-500);
6060
}
6161

6262
&.divider-stroke {
@@ -65,10 +65,10 @@
6565
}
6666

6767
&.incomplete-stroke {
68-
stroke: $light-300;
68+
stroke: var(--pgn-color-light-300);
6969
}
7070

7171
&.locked-stroke {
72-
stroke: $primary-500;
72+
stroke: var(--pgn-color-primary-500);
7373
}
7474
}

‎src/course-home/progress-tab/grades/course-grade/GradeBar.scss

+10-10
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,24 @@
44
}
55

66
.grade-bar__base {
7-
fill: $light-300;
7+
fill: var(--pgn-color-light-300);
88
}
99

1010
.grade-bar__divider {
11-
fill: $primary-500;
11+
fill: var(--pgn-color-primary-500);
1212
width: 1px;
1313
}
1414

1515
.grade-bar--passing {
16-
fill: $primary-500;
16+
fill: var(--pgn-color-primary-500);
1717
}
1818

1919
.grade-bar--current-passing {
20-
fill: $success-500;
20+
fill: var(--pgn-color-success-500);
2121
}
2222

2323
.grade-bar--current-non-passing {
24-
fill: $accent-b;
24+
fill: var(--pgn-color-accent-b);
2525
}
2626
}
2727

@@ -31,22 +31,22 @@
3131

3232
#minimum-grade-tooltip {
3333
.arrow::after {
34-
border-bottom-color: $primary-500;
34+
border-bottom-color: var(--pgn-color-primary-500);
3535
}
3636
}
3737

3838
#passing-grade-tooltip {
39-
background: $success-500;
39+
background: var(--pgn-color-success-500);
4040

4141
.arrow::after {
42-
border-top-color: $success-500;
42+
border-top-color: var(--pgn-color-success-500);
4343
}
4444
}
4545

4646
#non-passing-grade-tooltip {
47-
background: $accent-b;
47+
background: var(--pgn-color-accent-b);
4848

4949
.arrow::after {
50-
border-top-color: $accent-b;
50+
border-top-color: var(--pgn-color-accent-b);
5151
}
5252
}

‎src/course-tabs/course-tabs-navigation.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
.nav a,
66
.nav button {
77
&:hover {
8-
background-color: $light-400;
8+
background-color: var(--pgn-color-light-400);
99
}
1010
}
1111

1212
.nav a {
1313
&:not(.active):hover {
14-
background-color: $light-400;
14+
background-color: var(--pgn-color-light-400);
1515
border-bottom: none;
1616
}
1717
}

‎src/courseware/course/celebration/CelebrationModal.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const CelebrationModal = ({
3535
<StandardModal
3636
footerNode={(
3737
<ActionRow isStacked className="pb-2">
38-
<Button onClick={onClose}>{intl.formatMessage(messages.forward)}</Button>
38+
<Button className="btn-primary" onClick={onClose}>{intl.formatMessage(messages.forward)}</Button>
3939
</ActionRow>
4040
)}
4141
hasCloseButton={false}

‎src/courseware/course/celebration/CelebrationModal.scss

-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
justify-content: center;
2323

2424
button {
25-
@extend .btn-primary;
2625
font-size: 1.2rem;
2726
width: 50%;
2827
}

‎src/courseware/course/sequence/lock-paywall/LockPaywall.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
}
55

66
.lock-paywall-container svg {
7-
color: $primary-700;
7+
color: var(--pgn-color-primary-700);
88
}
99

1010
@media only screen and (min-width: 992px) and (max-width: 1100px) {

‎src/courseware/course/sidebar/common/SidebarBase.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
#course-sidebar {
2-
@media (max-width: -1 + map-get($grid-breakpoints, "lg")) {
2+
@media (--pgn-size-breakpoint-max-width-lg) {
33
overflow-y: scroll;
44
padding: 0 .625rem !important;
55
}

‎src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss

+12-16
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
}
88

99
.outline-sidebar {
10-
@media (min-width: map-get($grid-breakpoints, "xl")) {
10+
@media (--pgn-size-breakpoint-min-width-xl) {
1111
position: absolute;
1212
left: 0;
1313
top: 0;
@@ -25,12 +25,12 @@
2525
}
2626

2727
.outline-sidebar-heading {
28-
font-weight: $font-weight-bold;
28+
font-weight: var(--pgn-typography-font-weight-bold);
2929
}
3030
}
3131

3232
.course-sidebar-section {
33-
background: $white;
33+
background: var(--pgn-color-white);
3434
border: 1px solid #d7d3d1;
3535

3636
button {
@@ -54,7 +54,7 @@
5454
#outline-sidebar-outline {
5555
margin-top: -1px;
5656

57-
@media (min-width: map-get($grid-breakpoints, "xl")) {
57+
@media (--pgn-size-breakpoint-min-width-xl) {
5858
margin-bottom: 0;
5959
}
6060

@@ -64,39 +64,35 @@
6464

6565
.collapsible-trigger {
6666
border-radius: 0;
67-
padding: map-get($spacers, 3\.5) map-get($spacers, 4) map-get($spacers, 3\.5) map-get($spacers, 5);
67+
padding: var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-4) var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-5);
6868

69-
@media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
70-
padding-left: map-get($spacers, 4);
69+
@media (--pgn-size-breakpoint-max-width-sm) {
70+
padding-left: var(--pgn-spacing-spacer-4);
7171
}
7272

7373
&:hover {
74-
background-color: $light-500;
74+
background-color: var(--pgn-color-light-500);
7575
}
7676

7777
.collapsible-icon {
7878
margin-inline-start: initial;
7979
}
8080
}
81-
82-
&:last-child .pgn_collapsible {
83-
@extend .mb-0;
84-
}
8581
}
8682

8783
.collapsible-body {
8884
padding: 0;
8985

9086
ol li > a {
91-
padding: map-get($spacers, 3\.5) map-get($spacers, 4) map-get($spacers, 3\.5) map-get($spacers, 5\.5);
87+
padding: var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-4) var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-5-5);
9288

93-
@media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
94-
padding-left: map-get($spacers, 4\.5);
89+
@media (--pgn-size-breakpoint-max-width-sm) {
90+
padding-left: var(--pgn-spacing-spacer-4-5);
9591
}
9692

9793
&:hover {
9894
text-decoration: none;
99-
background-color: $light-500;
95+
background-color: var(--pgn-color-light-500);
10096
}
10197
}
10298
}

‎src/courseware/course/sidebar/sidebars/discussions/Discussions.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.discussions-sidebar-frame {
2-
@media (max-width: -1 + map-get($grid-breakpoints, "xl")) {
2+
@media (--pgn-size-breakpoint-max-width-xl) {
33
max-height: calc(100vh - 65px);
44
}
55
}

0 commit comments

Comments
 (0)