feat(admin-plugin): refactor css, update all components #211

site/plugins/admin/assets/src/components/navigations.css

@@ -3,7 +3,7 @@
     width: var(--box-size);
     height: 100vh;
 
-    @apply flex flex-col fixed bg-black text-white justify-between z-20;
+    @apply flex flex-col fixed bg-gray-1000 text-white justify-between z-20;
 }
 
 .navigation__item
@@ -13,14 +13,13 @@
     height: 100%;
     padding: 15px;
 
-    @apply w-full h-full relative flex items-center justify-center opacity-75 cursor-pointer ;
+    @apply w-full h-full relative flex items-center justify-center opacity-75 cursor-pointer;
 }
 
 .navigation__item--active,
 .navigation__item:hover
 {
-    background: rgba(255, 255, 255, .13);
-    @apply opacity-100;
+    @apply opacity-100 bg-gray-900;
 }
 
 .navigation__item--logo

site/plugins/admin/assets/src/components/tables.css

@@ -0,0 +1,31 @@
+.table
+{
+    @apply w-full;
+}
+
+.table tr:first-of-type th,
+.table tr:first-of-type td
+{
+    @apply border-t-0;
+}
+
+.table > thead > tr > th
+{
+    @apply font-bold text-left text-black border-gray-000 border-b;
+}
+
+.table > tbody > tr > td,
+.table > thead > tr > td,
+.table > tfoot > tr > td,
+.table > tbody > tr > th,
+.table > thead > tr > th,
+.table > tfoot > tr > th
+{
+    @apply align-middle text-black border-gray-000 border-t border-b px-3 py-2;
+}
+
+.table tbody tr:hover td,
+.table tbody tr:hover th
+{
+    @apply bg-gray-000;
+}

site/plugins/admin/assets/src/styles.css

@@ -3,11 +3,11 @@
 @import 'vars';
 @import 'main';
 @import 'content';
-@import 'table';
 @import 'form';
-@import 'components/navigation';
-@import 'components/button';
-@import 'components/dropdown';
+@import 'components/tables';
+@import 'components/navigations';
+@import 'components/buttons';
+@import 'components/dropdowns';
 
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';

site/plugins/admin/assets/src/table.css

@@ -1,43 +0,0 @@
-table
-{
-    width: 100%;
-}
-
-table tr:first-of-type td
-{
-    border-top: 0;
-}
-
-table > thead > tr > th
-{
-    font-weight: bold;
-
-    text-align: left;
-    text-transform: none;
-
-    color: black;
-    border-color: rgba(224, 224, 224, .1);
-    border-bottom-width: 1px;
-}
-
-table > tbody > tr > td,
-table > thead > tr > td,
-table > tfoot > tr > td,
-table > tbody > tr > th,
-table > thead > tr > th,
-table > tfoot > tr > th
-{
-    vertical-align: middle;
-
-    color: black;
-    border-color: rgba(224, 224, 224, .13);
-    border-top-width: 1px;
-    border-bottom-width: 1px;
-    @apply px-3 py-2;
-}
-
-table tbody tr:hover td,
-table tbody tr:hover th
-{
-    background: rgba(224, 224, 224, .13);
-}