(refactor) move menu css in separate file

Author: antoine92190

src/ChatWindow/ChatMessage.vue

@@ -267,7 +267,7 @@ export default {
 				const optionsTopPosition =
 					roomFooterTop - actionIconTop > menuOptionsHeight + 50
 
-				if (optionsTopPosition) this.menuOptionsHeight = 28
+				if (optionsTopPosition) this.menuOptionsHeight = 30
 				else this.menuOptionsHeight = -menuOptionsHeight
 			}, 0)
 		},
@@ -495,73 +495,13 @@ export default {
 }
 
 .menu-options {
-	position: absolute;
 	right: 15px;
-	top: 28px;
-	z-index: 9999;
-	min-width: 150px;
-	display: inline-block;
-	border-radius: 4px;
-	max-width: 80%;
-	font-size: 15px;
-	overflow-y: auto;
-	overflow-x: hidden;
-	contain: content;
-	box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-		0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .menu-left {
 	right: -118px;
 }
 
-.menu-list {
-	border-radius: 4px;
-	display: block;
-	cursor: pointer;
-	background: var(--chat-bg-menu);
-
-	:hover {
-		background: var(--chat-bg-menu-hover);
-		-webkit-transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-	}
-
-	:not(:hover) {
-		-webkit-transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-	}
-}
-
-.menu-item {
-	-webkit-box-align: center;
-	-ms-flex-align: center;
-	align-items: center;
-	display: -webkit-box;
-	display: -ms-flexbox;
-	display: flex;
-	-webkit-box-flex: 1;
-	-ms-flex: 1 1 100%;
-	flex: 1 1 100%;
-	min-height: 30px;
-	padding: 8px 16px;
-	position: relative;
-}
-
-.menu-divider {
-	display: block;
-	-webkit-box-flex: 1;
-	-ms-flex: 1 1 0px;
-	flex: 1 1 0px;
-	max-width: 100%;
-	height: 0;
-	max-height: 0;
-	border: solid;
-	border-width: thin 0 0 0;
-	border-color: rgba(0, 0, 0, 0.12);
-	margin: 0;
-}
-
 .icon-check {
 	height: 14px;
 	width: 14px;

src/ChatWindow/MessagesList.vue

@@ -442,70 +442,6 @@ export default {
 	margin-left: auto;
 }
 
-.menu-options {
-	position: absolute;
-	right: 10px;
-	top: 20px;
-	z-index: 9999;
-	min-width: 150px;
-	display: inline-block;
-	border-radius: 4px;
-	max-width: 80%;
-	font-size: 15px;
-	overflow-y: auto;
-	overflow-x: hidden;
-	contain: content;
-	box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-		0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.menu-list {
-	border-radius: 4px;
-	display: block;
-	cursor: pointer;
-	background: var(--chat-bg-menu);
-
-	:hover {
-		background: var(--chat-bg-menu-hover);
-		-webkit-transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-	}
-
-	:not(:hover) {
-		-webkit-transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-	}
-}
-
-.menu-item {
-	-webkit-box-align: center;
-	-ms-flex-align: center;
-	align-items: center;
-	display: -webkit-box;
-	display: -ms-flexbox;
-	display: flex;
-	-webkit-box-flex: 1;
-	-ms-flex: 1 1 100%;
-	flex: 1 1 100%;
-	min-height: 35px;
-	padding: 8px 16px;
-	position: relative;
-}
-
-.menu-divider {
-	display: block;
-	-webkit-box-flex: 1;
-	-ms-flex: 1 1 0px;
-	flex: 1 1 0px;
-	max-width: 100%;
-	height: 0;
-	max-height: 0;
-	border: solid;
-	border-width: thin 0 0 0;
-	border-color: rgba(0, 0, 0, 0.12);
-	margin: 0;
-}
-
 .container-scroll {
 	background: var(--chat-bg-color-content);
 	height: calc(100% - 120px);

src/styles/index.scss

@@ -1 +1,2 @@
 @import 'animation';
+@import 'menu';

src/styles/menu.scss

@@ -0,0 +1,63 @@
+.menu-list {
+	border-radius: 4px;
+	display: block;
+	cursor: pointer;
+	background: var(--chat-bg-menu);
+
+	:hover {
+		background: var(--chat-bg-menu-hover);
+		-webkit-transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+	}
+
+	:not(:hover) {
+		-webkit-transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+	}
+}
+
+.menu-item {
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-flex: 1;
+	-ms-flex: 1 1 100%;
+	flex: 1 1 100%;
+	min-height: 30px;
+	padding: 8px 16px;
+	position: relative;
+}
+
+.menu-divider {
+	display: block;
+	-webkit-box-flex: 1;
+	-ms-flex: 1 1 0px;
+	flex: 1 1 0px;
+	max-width: 100%;
+	height: 0;
+	max-height: 0;
+	border: solid;
+	border-width: thin 0 0 0;
+	border-color: rgba(0, 0, 0, 0.12);
+	margin: 0;
+}
+
+.menu-options {
+	position: absolute;
+	right: 10px;
+	top: 20px;
+	z-index: 9999;
+	min-width: 150px;
+	display: inline-block;
+	border-radius: 4px;
+	max-width: 80%;
+	font-size: 15px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	contain: content;
+	box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+		0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}