Skip to content
Snippets Groups Projects
Commit 7fdd7822 authored by danieldeng2's avatar danieldeng2
Browse files

Change px values to the equavalent rem

parent 9ad3839a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 139 additions and 139 deletions
frontend/src/components/atoms/BottomBarItem/style.module.scss
+ 4
− 4
View file @ 7fdd7822
@import "assets/scss/custom"; @import "assets/scss/custom";
@media (max-width: 992px) { @media (max-width: 62rem) {
.btn:active, .btn:active,
.btn:global(.active) { .btn:global(.active) {
border: 0; border: 0;
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
border: 0; border: 0;
box-shadow: none !important; box-shadow: none !important;
outline: 0 !important; outline: 0 !important;
border-radius: 0px; border-radius: 0rem;
width: 25%; width: 25%;
margin-left: 0; margin-left: 0;
color: #000; color: #000;
...@@ -23,11 +23,11 @@ ...@@ -23,11 +23,11 @@
.btn:focus { .btn:focus {
border: 0; border: 0;
box-shadow: 0 0 0 0px; box-shadow: 0 0 0 0rem;
} }
.btn:hover { .btn:hover {
border: 0px; border: 0rem;
background-color: #ced4da; background-color: #ced4da;
color: #000; color: #000;
} }
......
frontend/src/components/atoms/CalendarCard/style.module.scss
+ 9
− 9
View file @ 7fdd7822
...@@ -5,12 +5,12 @@ $labs-background: transparentize($pink-100, 0.5); ...@@ -5,12 +5,12 @@ $labs-background: transparentize($pink-100, 0.5);
$deadline-background: transparentize($teal-100, 0.5); $deadline-background: transparentize($teal-100, 0.5);
.calendarCard { .calendarCard {
margin-top: 5px; margin-top: 0.3125rem;
margin-bottom: 5px; margin-bottom: 0.3125rem;
color: #000; color: #000;
border-width: 0px; border-width: 0rem;
width: 100%; width: 100%;
border-radius: 8px !important; border-radius: 0.5rem !important;
text-align: left; text-align: left;
} }
...@@ -39,21 +39,21 @@ $deadline-background: transparentize($teal-100, 0.5); ...@@ -39,21 +39,21 @@ $deadline-background: transparentize($teal-100, 0.5);
} }
.calendarCard :global(.card-body) { .calendarCard :global(.card-body) {
padding: 8px !important; padding: 0.5rem !important;
} }
.calendarCard :global(.card-title) { .calendarCard :global(.card-title) {
font-size: 18px; font-size: 1.125rem;
font-weight: 500; font-weight: 500;
} }
.calendarCard :global(.card-subtitle) { .calendarCard :global(.card-subtitle) {
font-size: 16px; font-size: 1rem;
font-weight: 500; font-weight: 500;
} }
.calendarCard :global(.card-text) { .calendarCard :global(.card-text) {
font-size: 16px; font-size: 1rem;
} }
.calendarCard:global(.active), .calendarCard:global(.active),
...@@ -62,5 +62,5 @@ $deadline-background: transparentize($teal-100, 0.5); ...@@ -62,5 +62,5 @@ $deadline-background: transparentize($teal-100, 0.5);
background-color: #000 !important; background-color: #000 !important;
font-weight: 500; font-weight: 500;
text-align: left; text-align: left;
border-width: 0px; border-width: 0rem;
} }
frontend/src/components/atoms/ModuleCard/index.tsx
+ 1
− 1
View file @ 7fdd7822
...@@ -16,7 +16,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ ...@@ -16,7 +16,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({
module module
}: ModuleCardProps) => { }: ModuleCardProps) => {
return ( return (
<Col xs={12} sm={6} lg={4} xl={3} style={{ marginTop: "30px" }}> <Col xs={12} sm={6} lg={4} xl={3} style={{ marginTop: "1.875rem" }}>
<Card className={classNames(styles.moduleCard)}> <Card className={classNames(styles.moduleCard)}>
<Card.Header className={classNames(styles.moduleCardHeader)}> <Card.Header className={classNames(styles.moduleCardHeader)}>
{module.code} {module.code}
......
frontend/src/components/atoms/ModuleCard/style.module.scss
+ 14
− 14
View file @ 7fdd7822
...@@ -3,48 +3,48 @@ ...@@ -3,48 +3,48 @@
.moduleCard { .moduleCard {
background: #ffffff; background: #ffffff;
height: 100%; height: 100%;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
border-width: 0px; border-width: 0rem;
border-radius: 8px !important; border-radius: 0.5rem !important;
} }
.moduleCard :global(.card-header) { .moduleCard :global(.card-header) {
background: #fff; background: #fff;
border-radius: 8px !important; border-radius: 0.5rem !important;
border-width: 0px; border-width: 0rem;
color: #000; color: #000;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
text-align: right; text-align: right;
padding: 8px; padding: 0.5rem;
} }
.moduleCard :global(.card-body) { .moduleCard :global(.card-body) {
padding: 8px; padding: 0.5rem;
} }
.moduleCard :global(.card-footer) { .moduleCard :global(.card-footer) {
border-radius: 8px !important; border-radius: 0.5rem !important;
background: #fff; background: #fff;
border-width: 0px; border-width: 0rem;
padding: 8px; padding: 0.5rem;
} }
.moduleCardHeader { .moduleCardHeader {
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 1.125rem;
} }
.moduleCardProgressText { .moduleCardProgressText {
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
color: $green-500; color: $green-500;
font-size: 16px; font-size: 1rem;
} }
@media (max-width: 992px) { @media (max-width: 62rem) {
} }
@media (min-width: 992px) { @media (min-width: 62rem) {
} }
frontend/src/components/atoms/NavBarTabItem/style.module.scss
+ 8
− 8
View file @ 7fdd7822
@import "assets/scss/custom"; @import "assets/scss/custom";
@media (min-width: 992px) { @media (min-width: 62rem) {
.pageButton { .pageButton {
background: $gray-100; background: $gray-100;
border-radius: 8px !important; border-radius: 0.5rem !important;
font-family: "IBM Plex Sans"; font-family: "IBM Plex Sans";
font-size: 17px; font-size: 1rem;
color: $black !important; color: $black !important;
text-align: center; text-align: center;
line-height: 22px; line-height: 1.375rem;
width: 120px; width: 7.5rem;
height: 36px; height: 2.25rem;
margin-right: 10px; margin-right: 0.625rem;
margin-left: 10px; margin-left: 0.625rem;
} }
.pageButton:hover { .pageButton:hover {
......
frontend/src/components/molecules/CalendarGroup/style.module.scss
+ 20
− 20
View file @ 7fdd7822
@import "assets/scss/custom"; @import "assets/scss/custom";
@media (max-width: 992px) { @media (max-width: 62rem) {
.calendarCardGroup { .calendarCardGroup {
margin-top: 20px; margin-top: 1.25rem;
margin-left: 16px; margin-left: 1rem;
margin-right: 16px; margin-right: 1rem;
position: relative; position: relative;
width: 218px !important; width: 13.625rem !important;
} }
.calendarCardGroupHeading { .calendarCardGroupHeading {
font-size: 24px; font-size: 1.5rem;
color: #000000; color: #000000;
text-align: left; text-align: left;
margin-top: 30px; margin-top: 1.875rem;
margin-left: 16px; margin-left: 1rem;
margin-right: 16px; margin-right: 1rem;
position: relative; position: relative;
width: max-content; width: max-content;
margin-bottom: 0px; margin-bottom: 0rem;
} }
} }
@media (min-width: 992px) { @media (min-width: 62rem) {
.calendarCardGroup { .calendarCardGroup {
margin-top: 20px; margin-top: 1.25rem;
margin-left: 32px; margin-left: 2rem;
margin-right: 32px; margin-right: 2rem;
position: relative; position: relative;
width: 186px !important; width: 11.625rem !important;
} }
.calendarCardGroupHeading { .calendarCardGroupHeading {
font-size: 24px; font-size: 1.5rem;
color: #000000; color: #000000;
text-align: left; text-align: left;
margin-top: 30px; margin-top: 1.875rem;
margin-left: 32px; margin-left: 2rem;
margin-right: 32px; margin-right: 2rem;
position: relative; position: relative;
width: max-content; width: max-content;
margin-bottom: 0px; margin-bottom: 0rem;
} }
} }
frontend/src/components/molecules/Dandruff/style.module.scss
+ 2
− 2
View file @ 7fdd7822
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
background: #fff !important; background: #fff !important;
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
padding: 0px; padding: 0rem;
margin-bottom: 30px; margin-bottom: 1.875rem;
} }
.breadcrumbItem * { .breadcrumbItem * {
......
frontend/src/components/molecules/NavBarBrand/style.module.scss
+ 4
− 4
View file @ 7fdd7822
@import "assets/scss/custom"; @import "assets/scss/custom";
.brandImage { .brandImage {
margin-right: 10px; margin-right: 0.625rem;
} }
.brandContainer { .brandContainer {
font-family: "IBM Plex Sans"; font-family: "IBM Plex Sans";
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 1.5rem;
color: #000; color: #000;
text-align: left; text-align: left;
padding: 0px; padding: 0rem;
display: flex; display: flex;
justify-content: left; justify-content: left;
align-items: center; align-items: center;
margin: 0px; margin: 0rem;
} }
.brandContainer a{ .brandContainer a{
......
frontend/src/components/molecules/NavBarTabGroup/style.module.scss
+ 2
− 2
View file @ 7fdd7822
@import "assets/scss/custom"; @import "assets/scss/custom";
@media (min-width: 992px) { @media (min-width: 62rem) {
.pageButtonGroup { .pageButtonGroup {
position: absolute; position: absolute;
top: 50%; top: 50%;
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
} }
} }
@media (max-width: 992px) { @media (max-width: 62rem) {
.pageButtonGroup { .pageButtonGroup {
display: none; display: none;
} }
......
frontend/src/components/organisms/BottomBar/style.module.scss
+ 5
− 5
View file @ 7fdd7822
@import "assets/scss/custom"; @import "assets/scss/custom";
@media (max-width: 992px) { @media (max-width: 62rem) {
.bottomBar { .bottomBar {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 60px; height: 3.75rem;
background-color: #fff; background-color: #fff;
border-top: 1px solid #cdd4db; border-top: 0.0625rem solid #cdd4db;
padding: 0px; padding: 0rem;
} }
.bottomBarButtons{ .bottomBarButtons{
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
} }
} }
@media (min-width: 992px) { @media (min-width: 62rem) {
.bottomBar { .bottomBar {
display: none; display: none;
} }
......
frontend/src/components/organisms/LeftBar/style.module.scss
+ 20
− 20
View file @ 7fdd7822
...@@ -2,16 +2,16 @@ ...@@ -2,16 +2,16 @@
#leftbarWrapper { #leftbarWrapper {
position: fixed; position: fixed;
left: 250px; left: 15.625rem;
width: 0; width: 0;
margin-left: -250px; margin-left: -15.625rem;
height: calc(100vh - 61px); height: calc(100vh - 3.75rem);
padding-bottom: 30px; padding-bottom: 1.875rem;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
overscroll-behavior: contain; overscroll-behavior: contain;
background: #fff; background: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease; -o-transition: all 0.5s ease;
...@@ -20,16 +20,16 @@ ...@@ -20,16 +20,16 @@
} }
:global(#wrapper.toggledLeft) #leftbarWrapper { :global(#wrapper.toggledLeft) #leftbarWrapper {
width: 250px; width: 15.625rem;
} }
@media (max-width: 992px) { @media (max-width: 62rem) {
.leftbarStatus { .leftbarStatus {
margin-top: 30px; margin-top: 1.875rem;
margin-left: 16px; margin-left: 1rem;
margin-right: 16px; margin-right: 1rem;
margin-bottom: 0px; margin-bottom: 0rem;
font-size: 16px; font-size: 1rem;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
letter-spacing: 0; letter-spacing: 0;
...@@ -39,17 +39,17 @@ ...@@ -39,17 +39,17 @@
} }
#leftbarWrapper { #leftbarWrapper {
padding-bottom: 100px; padding-bottom: 6.25rem;
} }
} }
@media (min-width: 992px) { @media (min-width: 62rem) {
.leftbarStatus { .leftbarStatus {
margin-top: 30px; margin-top: 1.875rem;
margin-left: 32px; margin-left: 2rem;
margin-right: 32px; margin-right: 2rem;
margin-bottom: 0px; margin-bottom: 0rem;
font-size: 16px; font-size: 1rem;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
letter-spacing: 0; letter-spacing: 0;
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
} }
#leftbarWrapper { #leftbarWrapper {
width: 250px; width: 15.625rem;
} }
:global(#wrapper.toggledLeft) #leftbarWrapper { :global(#wrapper.toggledLeft) #leftbarWrapper {
......
frontend/src/components/organisms/RightBar/style.module.scss
+ 20
− 20
View file @ 7fdd7822
...@@ -2,16 +2,16 @@ ...@@ -2,16 +2,16 @@
#rightbarWrapper { #rightbarWrapper {
position: fixed; position: fixed;
right: 250px; right: 15.625rem;
width: 0; width: 0;
margin-right: -250px; margin-right: -15.625rem;
height: calc(100vh - 61px); height: calc(100vh - 3.75rem);
padding-bottom: 30px; padding-bottom: 1.875rem;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
overscroll-behavior: contain; overscroll-behavior: contain;
background: #fff; background: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease; -o-transition: all 0.5s ease;
...@@ -29,16 +29,16 @@ ...@@ -29,16 +29,16 @@
} }
:global(#wrapper.toggledRight) #rightbarWrapper { :global(#wrapper.toggledRight) #rightbarWrapper {
width: 250px; width: 15.625rem;
} }
@media (max-width: 992px) { @media (max-width: 62rem) {
.rightbarStatus { .rightbarStatus {
margin-top: 30px; margin-top: 1.875rem;
margin-left: 16px; margin-left: 1rem;
margin-right: 16px; margin-right: 1rem;
margin-bottom: 0px; margin-bottom: 0rem;
font-size: 16px; font-size: 1rem;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
letter-spacing: 0; letter-spacing: 0;
...@@ -48,17 +48,17 @@ ...@@ -48,17 +48,17 @@
} }
#rightbarWrapper { #rightbarWrapper {
padding-bottom: 100px; padding-bottom: 6.25rem;
} }
} }
@media (min-width: 992px) { @media (min-width: 62rem) {
.rightbarStatus { .rightbarStatus {
margin-top: 30px; margin-top: 1.875rem;
margin-left: 32px; margin-left: 2rem;
margin-right: 32px; margin-right: 2rem;
margin-bottom: 0px; margin-bottom: 0rem;
font-size: 16px; font-size: 1rem;
font-weight: 500; font-weight: 500;
text-align: right; text-align: right;
color: #000000; color: #000000;
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
} }
#rightbarWrapper { #rightbarWrapper {
width: 250px; width: 15.625rem;
} }
:global(#wrapper.toggledRight) #rightbarWrapper { :global(#wrapper.toggledRight) #rightbarWrapper {
......
frontend/src/components/organisms/TopBar/style.module.scss
+ 2
− 2
View file @ 7fdd7822
@import "assets/scss/custom"; @import "assets/scss/custom";
.navBar { .navBar {
padding: 12px 16px; padding: 0.75rem 1rem;
background: #fff; background: #fff;
border-bottom: 1px solid #cdd4db; border-bottom: 0.0625rem solid #cdd4db;
} }
\ No newline at end of file
frontend/src/components/pages/ModuleCoursework/style.module.scss
+ 6
− 6
View file @ 7fdd7822
@import "assets/scss/custom"; @import "assets/scss/custom";
.moduleContainer { .moduleContainer {
padding-top: 30px; padding-top: 1.875rem;
margin-bottom: 72px; margin-bottom: 4.5rem;
} }
.moduleSectionHeader { .moduleSectionHeader {
margin-top: 30px; margin-top: 1.875rem;
} }
.moduleParagraph { .moduleParagraph {
margin-top: 15px; margin-top: 1rem;
} }
@media (max-width: 992px) { @media (max-width: 62rem) {
} }
@media (min-width: 992px) { @media (min-width: 62rem) {
} }
frontend/src/components/pages/ModuleList/style.module.scss
+ 6
− 6
View file @ 7fdd7822
@import "assets/scss/custom"; @import "assets/scss/custom";
.moduleContainer { .moduleContainer {
padding-top: 30px; padding-top: 1.875rem;
margin-bottom: 72px; margin-bottom: 4.5rem;
} }
.moduleSectionHeader { .moduleSectionHeader {
margin-top: 30px; margin-top: 1.875rem;
} }
.moduleParagraph { .moduleParagraph {
margin-top: 15px; margin-top: 1rem;
} }
@media (max-width: 992px) { @media (max-width: 62rem) {
} }
@media (min-width: 992px) { @media (min-width: 62rem) {
} }
frontend/src/components/pages/ModuleMaterials/style.module.scss
+ 6
− 6
View file @ 7fdd7822
@import "assets/scss/custom"; @import "assets/scss/custom";
.moduleContainer { .moduleContainer {
padding-top: 30px; padding-top: 1.875rem;
margin-bottom: 72px; margin-bottom: 4.5rem;
} }
.moduleSectionHeader { .moduleSectionHeader {
margin-top: 30px; margin-top: 1.875rem;
} }
.moduleParagraph { .moduleParagraph {
margin-top: 15px; margin-top: 1rem;
} }
@media (max-width: 992px) { @media (max-width: 62rem) {
} }
@media (min-width: 992px) { @media (min-width: 62rem) {
} }
frontend/src/components/pages/ModuleOverview/style.module.scss
+ 6
− 6
View file @ 7fdd7822
@import "assets/scss/custom"; @import "assets/scss/custom";
.moduleContainer { .moduleContainer {
padding-top: 30px; padding-top: 1.875rem;
margin-bottom: 72px; margin-bottom: 4.5rem;
} }
.moduleSectionHeader { .moduleSectionHeader {
margin-top: 30px; margin-top: 1.875rem;
} }
.moduleParagraph { .moduleParagraph {
margin-top: 15px; margin-top: 1rem;
} }
@media (max-width: 992px) { @media (max-width: 62rem) {
} }
@media (min-width: 992px) { @media (min-width: 62rem) {
} }
frontend/src/components/pages/StandardView/style.scss
+ 4
− 4
View file @ 7fdd7822
...@@ -23,10 +23,10 @@ ...@@ -23,10 +23,10 @@
transition: all 0.5s ease; transition: all 0.5s ease;
} }
@media (min-width: 992px) { @media (min-width: 62rem) {
#wrapper { #wrapper {
padding-left: 250px; padding-left: 15.625rem;
padding-right: 250px; padding-right: 15.625rem;
} }
#wrapper.toggledLeft { #wrapper.toggledLeft {
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
} }
} }
@media (max-width: 992px) { @media (max-width: 62rem) {
#wrapper.toggledRight #sidenav-overlay, #wrapper.toggledRight #sidenav-overlay,
#wrapper.toggledLeft #sidenav-overlay { #wrapper.toggledLeft #sidenav-overlay {
visibility:visible; visibility:visible;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment