Просмотр исходного кода

Add hover effect to tabs in modal

JC Brand 2 лет назад
Родитель
Сommit
782de0165f

+ 12 - 0
src/plugins/modal/styles/_modal.scss

@@ -36,6 +36,18 @@
 
 
     #converse-modals {
     #converse-modals {
         .modal {
         .modal {
+            .nav-item {
+                margin: 0.25em;
+                &:hover {
+                    .nav-link {
+                        background-color: var(--primary-color-light);
+                        &.active {
+                            background-color: var(--primary-color);
+                        }
+                    }
+                }
+            }
+
             .modal-content {
             .modal-content {
                 box-shadow: var(--raised-el-shadow);
                 box-shadow: var(--raised-el-shadow);
             }
             }

+ 2 - 1
src/shared/styles/themes/classic.scss

@@ -4,7 +4,7 @@
     --redder-orange: #E77051;
     --redder-orange: #E77051;
     --orange: #E7A151;
     --orange: #E7A151;
     --light-blue: #578EA9;
     --light-blue: #578EA9;
-    --lighter-blue: #85B47B;
+    --lighter-blue: #eff4f7;
     --dark-red: #D24E2B;
     --dark-red: #D24E2B;
     --comment: #A8ABA1;
     --comment: #A8ABA1;
 
 
@@ -87,6 +87,7 @@
     --highlight-color: #DCF9F6;
     --highlight-color: #DCF9F6;
     --primary-color-dark:  #397491;
     --primary-color-dark:  #397491;
     --primary-color: var(--light-blue);
     --primary-color: var(--light-blue);
+    --primary-color-light: var(--lighter-blue);
     --secondary-color-dark: #585B51;
     --secondary-color-dark: #585B51;
     --secondary-color: #818479; // gray
     --secondary-color: #818479; // gray
     --warning-color-dark: #D2842B;
     --warning-color-dark: #D2842B;

+ 1 - 0
src/shared/styles/themes/dracula.scss

@@ -130,6 +130,7 @@
 
 
     --primary-color: var(--purple);
     --primary-color: var(--purple);
     --primary-color-dark: var(--purple);
     --primary-color-dark: var(--purple);
+    --primary-color-light: var(--pink);
     --danger-color-dark: var(--pink);
     --danger-color-dark: var(--pink);
     --danger-color: var(--pink);
     --danger-color: var(--pink);
     --error-color: var(--red);
     --error-color: var(--red);