Explorar el Código

Use more aesthetically pleasing tab bar

sbkwgh hace 8 años
padre
commit
4809afa7a9

+ 23 - 7
src/assets/scss/variables.scss

@@ -126,13 +126,14 @@ $color__lightblue--primary: #03A9F4;
 
 
 .tab_button {
-	padding: 0.5rem 1rem;
-	border-radius: 0.2rem;
+	padding: 0.5rem 0.75rem;
+	border-radius: 3rem;
 	cursor: pointer;
 	transition: all 0.2s;
 	margin-right: 0.5rem;
-	border-bottom: #d4d4d4 0.2rem solid;
 	display: inline-block;
+	position: relative;
+	top: -0.1rem; 
 
 	@include user-select(none);
 
@@ -143,13 +144,28 @@ $color__lightblue--primary: #03A9F4;
 		background-color: #dcdcdc;
 	}
 
+	&::after {
+		content: '';
+		position: absolute;
+		background-color: $color__blue--primary;
+		width: calc(100% - 1rem);
+		left: 0.5rem;
+		bottom: -0.3rem;
+		height: 0.2rem;
+		opacity: 0;
+		transition: all 0.2s;
+	}
+
 	@at-root #{&}--selected {
-		border-bottom: #c1c1c1 0.2rem solid;
-		background-color: $color__lightgray--darker;
 		cursor: default;
+		font-weight: bold;
+
+		&:active, &:hover {
+			background-color: transparent;
+		}
 
-		&:active {
-			background-color: $color__lightgray--darker;
+		&::after {
+			opacity: 1;
 		}
 	}
 }

+ 3 - 0
src/components/routes/AdminModerationBannedUsers.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class='admin_moderation'>
+		<h1 style='margin: 0.5rem 0;'>Moderation</h1>
 		<div class='admin_moderation__tabs'>
 			<div class='tab_button' @click='$router.push("reports")'>Reports</div>
 			<div class='tab_button tab_button--selected'>Banned users</div>
@@ -193,6 +194,8 @@
 
 		@at-root #{&}__tabs {
 			margin-bottom: 1rem;
+			border-bottom: 0.2rem solid $color__gray--darker;
+			width: 15rem;
 		}
 
 		@at-root #{&}__header {

+ 3 - 0
src/components/routes/AdminModerationReports.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class='admin_moderation'>
+		<h1 style='margin: 0.5rem 0;'>Moderation</h1>	
 		<div class='admin_moderation__tabs'>
 			<div class='tab_button tab_button--selected'>Reports</div>
 			<div class='tab_button' @click='$router.push("bans")'>Banned users</div>
@@ -160,6 +161,8 @@
 
 		@at-root #{&}__tabs {
 			margin-bottom: 1rem;
+			border-bottom: 0.2rem solid $color__gray--darker;
+			width: 15rem;
 		}
 
 		@at-root #{&}__reports {