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

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

@@ -0,0 +1,9 @@
+.button
+{
+    @apply mt-6 px-4 py-2 border border-black text-white inline-block w-auto bg-black;
+}
+
+.button:hover
+{
+    @apply border-gray-900 bg-gray-900 text-white;
+}

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

@@ -1,19 +1,19 @@
-.dropdown-menu
+.dropdown
 {
     @apply px-10 py-6 absolute hidden;
 }
 
-.dropdown-menu__item
+.dropdown__item
 {
     @apply block py-2 pl-4 pr-12 text-left;
 }
 
-.dropdown-menu__divider
+.dropdown__divider
 {
     @apply bg-gray-800 h-px my-1;
 }
 
-.dropdown-menu__icon
+.dropdown__icon
 {
     @apply mr-2;
 }

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

@@ -0,0 +1,31 @@
+.navigation
+{
+    width: var(--box-size);
+    height: 100vh;
+
+    @apply flex flex-col fixed bg-black text-white justify-between z-20;
+}
+
+.navigation__item
+{
+    box-sizing: border-box;
+    min-width: 0;
+    height: 100%;
+    padding: 15px;
+
+    @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;
+}
+
+.navigation__item--logo
+{
+    width: var(--box-size);
+    height: var(--box-size);
+    @apply font-bold;
+}

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

@@ -34,15 +34,15 @@
     background: black;
 }
 
-.content .top-bar .btn
+.content .top-bar a
 {
     display: table-cell;
 
     padding: 11.5px 20px;
 }
 
-.content .top-bar .btn.active,
-.content .top-bar .btn:hover
+.content .top-bar a.active,
+.content .top-bar a:hover
 {
     opacity: 1;
     background: rgba(255, 255, 255, .13);
@@ -64,10 +64,3 @@
 
     text-align: center;
 }
-
-.content .path-bar .icon.active,
-.content .path-bar .icon:hover
-{
-    opacity: 1;
-    background: rgba(0,0,0,.07);
-}

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

@@ -12,6 +12,5 @@ main
     height: 100vh;
     min-height: 500px;
 
-    color: black;
-    background-color: white;
+    @apply bg-white text-black;
 }

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

@@ -1,49 +0,0 @@
-nav
-{
-    position: fixed;
-    z-index: 20;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    width: var(--box-size);
-    height: 100vh;
-
-    color: white;
-    background-color: black;
-}
-
-nav a
-{
-    position: relative;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    box-sizing: border-box;
-    width: 100%;
-    min-width: 0;
-    height: 100%;
-    padding: 15px;
-
-    cursor: pointer;
-
-    opacity: .7;
-}
-
-nav a.active,
-nav a:hover
-{
-    opacity: 1;
-    background: rgba(255, 255, 255, .13);
-}
-
-nav a.logo
-{
-    font-weight: bold;
-
-    width: var(--box-size);
-    height: var(--box-size);
-}

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

@@ -2,11 +2,12 @@
 
 @import 'vars';
 @import 'main';
-@import 'nav';
 @import 'content';
 @import 'table';
 @import 'form';
-@import 'dropdown';
+@import 'components/navigation';
+@import 'components/button';
+@import 'components/dropdown';
 
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';