From 66810cd68464440406aeac97ee1b4acc28c6ba65 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Mon, 3 Aug 2020 20:23:09 +0100
Subject: [PATCH] Move style for left bar to style.css
---
frontend/src/components/App.scss | 231 ------------------
.../components/pages/StandardView/index.tsx | 1 +
.../LeftBar => pages/StandardView}/style.scss | 43 +++-
3 files changed, 36 insertions(+), 239 deletions(-)
rename frontend/src/components/{organisms/LeftBar => pages/StandardView}/style.scss (76%)
diff --git a/frontend/src/components/App.scss b/frontend/src/components/App.scss
index 70f1fc1e2..c6dfd5e05 100644
--- a/frontend/src/components/App.scss
+++ b/frontend/src/components/App.scss
@@ -12,235 +12,4 @@ body {
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
-}
-
-//----------------Bottom Bar -------------------------
-@media (max-width: 992px) {
- .bottom-bar {
- position: fixed;
- bottom: 0;
- width: 100%;
- height: 60px;
- background-color: #fff;
- border-top: 1px solid #cdd4db;
- padding: 0px;
- }
-
- .bottom-bar-buttons,
- .block {
- height: 100%;
- width: 100%;
- }
-
- .btn:active,
- .btn.active {
- border: 0;
- background-color: #000 !important;
- color: #fff;
- }
-
- .bottom-bar-buttons .btn {
- border: 0;
- box-shadow: none !important;
- outline: 0 !important;
- border-radius: 0px;
- width: 25%;
- margin-left: 0;
- color: #000;
- background-color: #fff;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .btn:focus {
- border: 0;
- box-shadow: 0 0 0 0px;
- }
-
- .bottom-bar-buttons .btn:hover {
- border: 0px;
- background-color: #ced4da;
- }
-}
-
-@media (min-width: 992px) {
- .bottom-bar {
- display: none;
- }
-}
-
-//--------------------- Left Bar -----------------
-//TODO: tidy, change classNames away from examen, and make more modular
-#wrapper {
- padding-left: 0;
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
-}
-
-#sidebar-wrapper {
- position: fixed;
- left: 250px;
- width: 0;
- margin-left: -250px;
- height: 100%;
- margin-bottom: 61px;
- overflow-y: auto;
- background: #fff;
- background: #ffffff;
- box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
-}
-
-.exam-outline-button {
- margin-bottom: 10px;
-}
-
-.exam-outline-button-a {
- margin-bottom: 10px;
- border-radius: 8px;
- font-weight: 500;
-}
-
-#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled).active,
-#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled):active{
- color: #fff;
- background-color: #000;
- border-radius: 5px;
- text-align: left;
- border-width: 0px;
- height: 40px;
-}
-
-#sidebar-wrapper .btn-primary {
- color: #000;
- background: #f6f8fa;
- font-size: 17px;
- color: #000000;
- letter-spacing: 0;
- border-width: 0px;
- height: 40px;
- border-radius: 5px;
- text-align: left;
-}
-
-#sidebar-wrapper .btn-group-vertical > .btn-group:not(:last-child) > .btn,
-#sidebar-wrapper
- .btn-group-vertical
- > .btn:not(:last-child):not(.dropdown-toggle) {
- border-radius: 5px;
-}
-
-#sidebar-wrapper
- .btn-group-vertical
- > .btn-group:not(:first-child)
- > #sidebar-wrapper
- .btn,
-.btn-group-vertical > .btn:not(:first-child) {
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
-}
-
-#sidebar-wrapper .btn-primary:hover {
- color: #000;
- background-color: #e5e5e5;
- border-color: #fff;
-}
-
-#wrapper.toggled {
- padding-left: 250px;
-}
-
-#wrapper.toggled #sidebar-wrapper {
- width: 250px;
-}
-
-@media (max-width: 992px) {
- .sidebar-status {
- margin-top: 30px;
- margin-left: 16px;
- margin-right: 16px;
- margin-bottom: 0px;
- font-size: 16px;
- font-weight: 500;
- font-family: "IBM Plex Sans";
- color: #000000;
- letter-spacing: 0;
- position: absolute;
- width: max-content;
- text-transform: uppercase;
- }
-
- .exam-outline-heading {
- font-size: 24px;
- color: #000000;
- text-align: left;
- margin-top: 64px;
- margin-left: 16px;
- margin-right: 16px;
- position: absolute;
- width: max-content;
- margin-bottom: 0px;
- }
-
- #exam-outline-button-group {
- margin-top: 102px;
- margin-left: 16px;
- margin-right: 16px;
- width: 218px;
- }
-}
-
-@media (min-width: 992px) {
- #wrapper {
- padding-left: 250px;
- }
-
- #sidebar-wrapper {
- width: 250px;
- }
-
- .sidebar-status {
- margin-top: 30px;
- margin-left: 32px;
- margin-right: 32px;
- margin-bottom: 0px;
- font-size: 16px;
- color: #000000;
- letter-spacing: 0;
- position: absolute;
- width: max-content;
- }
-
- .exam-outline-heading {
- font-size: 24px;
- color: #000000;
- text-align: left;
- margin-top: 64px;
- margin-left: 32px;
- margin-right: 32px;
- position: absolute;
- width: max-content;
- margin-bottom: 0px;
- }
-
- #exam-outline-button-group {
- margin-top: 102px;
- margin-left: 32px;
- margin-right: 32px;
- width: 186px;
- }
-
- #wrapper.toggled {
- padding-left: 0;
- }
-
- #wrapper.toggled #sidebar-wrapper {
- width: 0;
- }
}
\ No newline at end of file
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index 5438b6cc4..1722d2d5b 100644
--- a/frontend/src/components/pages/StandardView/index.tsx
+++ b/frontend/src/components/pages/StandardView/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import ExamplePage from "components/templates/ExamplePage";
import LeftBar from "components/organisms/LeftBar";
+import "./style.scss"
interface StandardViewProps {
pages: {
diff --git a/frontend/src/components/organisms/LeftBar/style.scss b/frontend/src/components/pages/StandardView/style.scss
similarity index 76%
rename from frontend/src/components/organisms/LeftBar/style.scss
rename to frontend/src/components/pages/StandardView/style.scss
index 888151d39..d6d1ba412 100644
--- a/frontend/src/components/organisms/LeftBar/style.scss
+++ b/frontend/src/components/pages/StandardView/style.scss
@@ -1,5 +1,4 @@
-@import "scss/custom";
-
+//TODO: make into css module
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
@@ -25,16 +24,38 @@
transition: all 0.5s ease;
}
-.module-outline-button {
+.exam-outline-button {
margin-bottom: 10px;
}
-.module-outline-button-a {
+.exam-outline-button-a {
margin-bottom: 10px;
border-radius: 8px;
font-weight: 500;
}
+#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled).active,
+#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled):active{
+ color: #fff;
+ background-color: #000;
+ border-radius: 5px;
+ text-align: left;
+ border-width: 0px;
+ height: 40px;
+}
+
+#sidebar-wrapper .btn-primary {
+ color: #000;
+ background: #f6f8fa;
+ font-size: 17px;
+ color: #000000;
+ letter-spacing: 0;
+ border-width: 0px;
+ height: 40px;
+ border-radius: 5px;
+ text-align: left;
+}
+
#sidebar-wrapper .btn-group-vertical > .btn-group:not(:last-child) > .btn,
#sidebar-wrapper
.btn-group-vertical
@@ -52,6 +73,12 @@
border-top-right-radius: 5px;
}
+#sidebar-wrapper .btn-primary:hover {
+ color: #000;
+ background-color: #e5e5e5;
+ border-color: #fff;
+}
+
#wrapper.toggled {
padding-left: 250px;
}
@@ -76,7 +103,7 @@
text-transform: uppercase;
}
- .module-outline-heading {
+ .exam-outline-heading {
font-size: 24px;
color: #000000;
text-align: left;
@@ -88,7 +115,7 @@
margin-bottom: 0px;
}
- #module-outline-button-group {
+ #exam-outline-button-group {
margin-top: 102px;
margin-left: 16px;
margin-right: 16px;
@@ -117,7 +144,7 @@
width: max-content;
}
- .module-outline-heading {
+ .exam-outline-heading {
font-size: 24px;
color: #000000;
text-align: left;
@@ -129,7 +156,7 @@
margin-bottom: 0px;
}
- #module-outline-button-group {
+ #exam-outline-button-group {
margin-top: 102px;
margin-left: 32px;
margin-right: 32px;
--
GitLab