Skip to content
This repository was archived by the owner on May 12, 2023. It is now read-only.

Commit 08c76cf

Browse files
mgasetamgaseta
authored
fix: changed css units to rem, where necessary (#30)
1 parent fa032cf commit 08c76cf

File tree

7 files changed

+114
-115
lines changed

7 files changed

+114
-115
lines changed

‎src/components/BCGovLogo/styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.logo {
2-
margin-top: 40px;
2+
margin-top: 2.5rem;
33
}

‎src/components/BCHeader/styles.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
}
77

88
.header-link {
9-
margin-left: 15px;
9+
margin-left: 0.9375rem;
1010
color: colors.$white;
1111
}
1212

‎src/components/Card/styles.scss

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@
33

44
.card-header {
55
display: inline-flex;
6-
width: 200px;
7-
max-height: 32px;
6+
width: 12.5rem;
7+
max-height: 2rem;
88
justify-content: space-between;
99
}
1010

1111
.card-icon {
12-
width: 24px !important;
13-
height: 24px !important;
14-
padding: 0px !important;
15-
margin: 0px !important;
12+
width: 1.5rem !important;
13+
height: 1.5rem !important;
14+
padding: 0 !important;
15+
margin: 0 !important;
1616
color: colors.$blue-60;
1717
}
1818

1919
.card-overflow {
20-
padding: 0px !important;
21-
margin: 0px !important;
22-
width: 32px;
23-
height: 32px;
20+
padding: 0 !important;
21+
margin: 0 !important;
22+
width: 2rem;
23+
height: 2rem;
2424
align-items: center;
2525
justify-content: center;
2626
border-radius: 4px;
@@ -32,10 +32,10 @@
3232
display: flex;
3333
flex-direction: column;
3434
align-items: flex-start;
35-
padding: 20px 16px;
36-
margin: 8px;
37-
width: 234px;
38-
height: 158px;
35+
padding: 1.25rem 1rem;
36+
margin: 0.5rem;
37+
width: 14.625rem;
38+
height: 9.875rem;
3939
background: colors.$white;
4040
border: 1px solid colors.$gray-20;
4141
border-radius: 4px;
@@ -58,27 +58,27 @@ h5 {
5858
font-family: 'BC Sans', 'IBM Plex Sans', sans-serif;
5959
font-style: normal;
6060
font-weight: 700;
61-
font-size: 16px;
62-
line-height: 24px;
61+
font-size: 1rem;
62+
line-height: 1.5rem;
6363
color: colors.$gray-100;
6464
display: block;
6565
white-space: nowrap;
6666
overflow: hidden;
6767
text-overflow: ellipsis;
68-
max-width: 200px;
68+
max-width: 12.5rem;
6969
}
7070

7171
.card-content > p {
7272
font-family: 'BC Sans', 'IBM Plex Sans', sans-serif;
7373
font-style: normal;
7474
font-weight: 400;
75-
font-size: 14px;
76-
line-height: 18px;
77-
letter-spacing: 0.16px;
75+
font-size: 0.875rem;
76+
line-height: 1.125rem;
77+
letter-spacing: 0.01rem;
7878
margin-bottom: auto;
7979
color: colors.$gray-70;
8080
display: -webkit-box;
81-
max-width: 200px;
81+
max-width: 12.5rem;
8282
-webkit-line-clamp: 3;
8383
-webkit-box-orient: vertical;
8484
overflow: hidden;
@@ -119,9 +119,9 @@ h5 {
119119
display: flex;
120120
flex-direction: row;
121121
align-items: center;
122-
padding: 16px;
123-
width: 288px;
124-
height: 64px;
122+
padding: 1rem;
123+
width: 18rem;
124+
height: 4rem;
125125
background: colors.$white;
126126
border: 1px solid colors.$gray-20;
127127
border-radius: 4px;

‎src/components/EmptySection/styles.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
.empty-section-icon {
44
width: 3rem !important;
55
height: 3rem !important;
6-
padding: 0px !important;
6+
padding: 0 !important;
77
color: colors.$gray-70;
88
margin-bottom: 1rem;
99
}

‎src/components/PanelSectionName/styles.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
@use '../../theme/variables.scss' as vars;
22

33
.panel-section {
4-
height: 48px;
4+
height: 3rem;
55
display: flex;
66
flex-direction: row;
77
align-items: center;
8-
padding: 15px 16px;
8+
padding: 0.9375rem 1rem;
99
background: var(--#{vars.$bcgov-prefix}-background);
1010
}
1111

1212
.panel-section > span {
1313
font-family: 'BC Sans', 'IBM Plex Sans', sans-serif;
1414
font-style: normal;
15-
font-size: 12px;
15+
font-size: 0.75rem;
1616
font-weight: 400;
17-
line-height: 16px;
18-
letter-spacing: 0.32px;
17+
line-height: 1rem;
18+
letter-spacing: 0.02rem;
1919
color: var(--#{vars.$bcgov-prefix}-text-secondary);
2020
user-select: none;
2121
}

‎src/theme/components-overrides.scss

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -41,15 +41,15 @@
4141

4242
.#{variables.$bcgov-prefix}--time-picker__input > .#{variables.$bcgov-prefix}--text-input {
4343
border-top-left-radius: 4px;
44-
border-top-right-radius: 0px;
44+
border-top-right-radius: 0;
4545
}
4646

4747
.#{variables.$bcgov-prefix}--time-picker__select > .#{variables.$bcgov-prefix}--select-input {
48-
border-radius: 0px;
48+
border-radius: 0;
4949
}
5050

5151
.#{variables.$bcgov-prefix}--time-picker :last-child > .#{variables.$bcgov-prefix}--select-input {
52-
border-top-left-radius: 0px;
52+
border-top-left-radius: 0;
5353
border-top-right-radius: 4px;
5454
}
5555

@@ -58,23 +58,23 @@
5858
}
5959

6060
.#{variables.$bcgov-prefix}--modal-close {
61-
margin-right: 16px;
62-
margin-top: 16px;
61+
margin-right: 1rem;
62+
margin-top: 1rem;
6363
border-radius: 4px;
6464
}
6565
.#{variables.$bcgov-prefix}--modal-footer {
6666
height: auto;
67-
margin: 0 16px 16px;
67+
margin: 0 1rem 1rem;
6868
}
6969

7070
.#{variables.$bcgov-prefix}--modal-footer .#{variables.$bcgov-prefix}--btn {
7171
max-width: none;
72-
height: 48px;
73-
padding-bottom: 16px;
72+
height: 3rem;
73+
padding-bottom: 1rem;
7474
}
7575

7676
.#{variables.$bcgov-prefix}--modal-footer .#{variables.$bcgov-prefix}--btn:not(.#{variables.$bcgov-prefix}--btn--primary) {
77-
margin-right: 4px;
77+
margin-right: 0.25rem;
7878
}
7979

8080
.#{variables.$bcgov-prefix}--pagination .#{variables.$bcgov-prefix}--select__item-count .#{variables.$bcgov-prefix}--select-input__wrapper select.#{variables.$bcgov-prefix}--select-input,
@@ -85,7 +85,7 @@
8585

8686
.#{variables.$bcgov-prefix}--pagination .#{variables.$bcgov-prefix}--select__item-count .#{variables.$bcgov-prefix}--select-input__wrapper,
8787
.#{variables.$bcgov-prefix}--pagination .#{variables.$bcgov-prefix}--select__page-number .#{variables.$bcgov-prefix}--select-input__wrapper {
88-
margin: 4px;
88+
margin: 0.25rem;
8989
}
9090

9191
.#{variables.$bcgov-prefix}--pagination .#{variables.$bcgov-prefix}--select__item-count .#{variables.$bcgov-prefix}--select-input--inline__wrapper {
@@ -98,91 +98,90 @@
9898

9999
.#{variables.$bcgov-prefix}--pagination--sm,
100100
.#{variables.$bcgov-prefix}--pagination--sm .#{variables.$bcgov-prefix}--pagination__control-buttons .#{variables.$bcgov-prefix}--popover-container {
101-
height: 40px;
101+
height: 2.5rem;
102102
}
103103

104104
.#{variables.$bcgov-prefix}--pagination--md,
105105
.#{variables.$bcgov-prefix}--pagination--md .#{variables.$bcgov-prefix}--pagination__control-buttons .#{variables.$bcgov-prefix}--popover-container {
106-
height: 48px;
106+
height: 3rem;
107107
}
108108

109109
.#{variables.$bcgov-prefix}--pagination--lg,
110110
.#{variables.$bcgov-prefix}--pagination--lg .#{variables.$bcgov-prefix}--pagination__control-buttons .#{variables.$bcgov-prefix}--popover-container {
111-
height: 56px;
111+
height: 3.5rem;
112112
}
113113

114114
.#{variables.$bcgov-prefix}--pagination__control-buttons .#{variables.$bcgov-prefix}--popover-container {
115115
border-left: 1px solid var(--#{variables.$bcgov-prefix}-border-subtle);
116116
}
117117

118118
.#{variables.$bcgov-prefix}--pagination__control-buttons .#{variables.$bcgov-prefix}--pagination__button {
119-
margin: 4px;
119+
margin: 0.25rem;
120120
border: 0;
121121
}
122122

123123
.#{variables.$bcgov-prefix}--side-nav {
124-
box-shadow: inset -1px 0px 0px colors.$gray-20;
124+
box-shadow: inset -1px 0 0 colors.$gray-20;
125125
}
126126

127127
.#{variables.$bcgov-prefix}--side-nav__items {
128-
padding: 16px;
128+
padding: 1rem;
129129
}
130130

131131
.#{variables.$bcgov-prefix}--side-nav__link {
132-
padding: 16px !important;
133-
margin: 0px;
134-
width: 256px;
132+
padding: 1rem !important;
133+
margin: 0;
134+
width: 16rem;
135135
}
136136

137137
.#{variables.$bcgov-prefix}--grid {
138-
padding: 0px !important;
138+
padding: 0 !important;
139139
}
140140

141141
.#{variables.$bcgov-prefix}--tab-content {
142-
padding: 0px !important;
142+
padding: 0 !important;
143143
}
144144

145145
.#{variables.$bcgov-prefix}--tabs button.#{variables.$bcgov-prefix}--tabs__nav-item--selected {
146146
font-weight: bold;
147147
}
148148

149149
.#{variables.$bcgov-prefix}--data-table {
150-
padding: 0px !important;
150+
padding: 0 !important;
151151
}
152152

153153
.#{variables.$bcgov-prefix}--table-header-label {
154154
font-weight: bold;
155155
}
156156

157157
.#{variables.$bcgov-prefix}--content {
158-
padding: 0px !important;
158+
padding: 0 !important;
159159
}
160160

161161
.#{variables.$bcgov-prefix}--header {
162162
background-color: colors.$blue-60 !important;
163163
}
164164

165165
.#{variables.$bcgov-prefix}--row h1 {
166-
font-size: 32px;
167-
line-height: 40px;
166+
font-size: 2rem;
167+
line-height: 2.5rem;
168168
color: colors.$gray-100;
169169
}
170170

171171
.#{variables.$bcgov-prefix}--row h4 {
172-
font-size: 14px;
173-
line-height: 18px;
174-
letter-spacing: 0.16px;
172+
font-size: 0.875rem;
173+
line-height: 1.125rem;
174+
letter-spacing: 0.01rem;
175175
color: colors.$gray-70;
176176
}
177177

178178
.#{variables.$bcgov-prefix}--side-nav__menu .#{variables.$bcgov-prefix}--side-nav__menu-item a.#{variables.$bcgov-prefix}--side-nav__link,
179179
button.#{variables.$bcgov-prefix}--side-nav__submenu,
180-
.#{variables.$bcgov-prefix}--side-nav__link
181-
{
182-
height: 48px;
180+
.#{variables.$bcgov-prefix}--side-nav__link {
181+
height: 3rem;
183182
}
184183

185-
div.#{variables.$bcgov-prefix}--side-nav__icon > svg{
184+
div.#{variables.$bcgov-prefix}--side-nav__icon > svg {
186185
fill: var(--#{variables.$bcgov-prefix}-link-secondary)
187186
}
188187

@@ -192,7 +191,7 @@ div.#{variables.$bcgov-prefix}--side-nav__icon > svg{
192191
}
193192

194193
div.#{variables.$bcgov-prefix}--inline-notification--low-contrast::before{
195-
border-radius: 0px 4px 4px 0px;
194+
border-radius: 0 4px 4px 0;
196195
filter: none;
197196
}
198197

0 commit comments

Comments
 (0)