add how to and restyle the website

noi-techpark · Oct 18, 2022 · 20d49f1 · 20d49f1
1 parent 79e6b66
commit 20d49f1
Show file tree

Hide file tree

Showing 11 changed files with 666 additions and 405 deletions.
diff --git a/frontend/src/assets/styles/bootstrap/_variables.scss b/frontend/src/assets/styles/bootstrap/_variables.scss
@@ -2,7 +2,6 @@ $black: #000 !default;
 $gray-88: #888 !default;
 $gray-94: #949494 !default;
 $white: #fff !default;
-
 $primary: #2e3131 !default;
 $secondary: #50742F !default;
 //$success:       #33CC99 !default;
@@ -11,13 +10,12 @@ $secondary: #50742F !default;
 //$danger:        $red !default;
 $light: #e8ecf1 !default;
 $dark: $gray-88 !default;
-
 $body-bg: $white;
 $body-color: $primary;
 $link-color: $gray-88;
-
-$font-family-base: 'Source Sans Pro', arial, sans-serif;
+$font-family-base: 'Open Sans',
+arial,
+sans-serif;
 $font-size-base: 0.9rem;
-
 $enable-shadows: true;
-$enable-gradients: true;
+$enable-gradients: true;
diff --git a/frontend/src/assets/styles/common/_button.scss b/frontend/src/assets/styles/common/_button.scss
@@ -1,105 +1,88 @@
 .btn-circle {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 70px;
-	width: 70px;
-	border-radius: 50%;
-	border: 2px solid $gray-88;
-	text-align: center;
-	vertical-align: middle;
-	cursor: pointer;
-
-	&.filled {
-		background-color: $gray-88;
-		border: unset;
-	}
-
-	&.filled-dark {
-		background-color: $body-color;
-		border: unset;
-	}
-
-	&.outline {
-		border: 2px solid $body-color;
-
-		svg .st0 {
-			fill: $body-color;
-		}
-	}
-
-	&.disabled {
-		border: 2px solid $gray-94;
-		cursor: unset;
-
-		svg .st0 {
-			fill: $gray-94;
-		}
-	}
-
-	img,
-	svg {
-		width: 30px;
-		height: 30px;
-	}
-
-	&.arrow-up img,
-	&.arrow-up svg {
-		transform: rotate(90deg);
-	}
-
-	&.arrow-down img,
-	&.arrow-down svg {
-		transform: rotate(-90deg);
-	}
-
-	&.arrow-right img,
-	&.arrow-right svg {
-		transform: rotate(180deg);
-	}
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 70px;
+    width: 70px;
+    border-radius: 50%;
+    border: 2px solid $gray-88;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    &.filled {
+        background-color: $gray-88;
+        border: unset;
+    }
+    &.filled-dark {
+        background-color: $body-color;
+        border: unset;
+    }
+    &.outline {
+        border: 2px solid $body-color;
+        svg .st0 {
+            fill: $body-color;
+        }
+    }
+    &.disabled {
+        border: 2px solid $gray-94;
+        cursor: unset;
+        svg .st0 {
+            fill: $gray-94;
+        }
+    }
+    img,
+    svg {
+        width: 30px;
+        height: 30px;
+    }
+    &.arrow-up img,
+    &.arrow-up svg {
+        transform: rotate(90deg);
+    }
+    &.arrow-down img,
+    &.arrow-down svg {
+        transform: rotate(-90deg);
+    }
+    &.arrow-right img,
+    &.arrow-right svg {
+        transform: rotate(180deg);
+    }
 }
 
 @media (max-width: 576px) {
-	.btn-circle {
-		height: 35px !important;
-		width: 35px !important;
-
-		&.arrow-right {
-			svg {
-				transform: scale(0.6) rotate(180deg) !important;
-			}
-		}
-
-		&.arrow-left {
-			svg {
-				transform: scale(0.6) !important;
-			}
-		}
-	}
-
-	.btn-circle-footer {
-		position: fixed;
-		height: 70px;
-		width: 70px;
-		bottom: 20px;
-		right: 20px;
-		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
-	}
-
-	.btn-circle-footer-detail {
-		bottom: 60px;
-	}
-
-	.return-button {
-		height: 35px;
-		width: 35px;
-	}
-
-	.return-icon {
-		transform: scale(0.6) !important;
-	}
-
-	.return-icon-up {
-		transform: scale(0.6) rotate(90deg) !important;
-	}
-}
+    .btn-circle {
+        height: 35px !important;
+        width: 35px !important;
+        &.arrow-right {
+            svg {
+                transform: scale(0.6) rotate(180deg) !important;
+            }
+        }
+        &.arrow-left {
+            svg {
+                transform: scale(0.6) !important;
+            }
+        }
+    }
+    .btn-circle-footer {
+        position: fixed;
+        height: 70px;
+        width: 70px;
+        bottom: 20px;
+        right: 20px;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
+    }
+    .btn-circle-footer-detail {
+        bottom: 60px;
+    }
+    .return-button {
+        height: 35px;
+        width: 35px;
+    }
+    .return-icon {
+        transform: scale(0.6) !important;
+    }
+    .return-icon-up {
+        transform: scale(0.6) rotate(90deg) !important;
+    }
+}
diff --git a/frontend/src/assets/styles/common/_typography.scss b/frontend/src/assets/styles/common/_typography.scss
@@ -1,4 +1,3 @@
-
 .font-xx-large {
     font-size: xx-large !important;
 }
@@ -90,4 +89,4 @@ body {
     body {
         font-size: 14px !important;
     }
-}
+}