diff --git a/site/plugins/admin/assets/src/components/button.css b/site/plugins/admin/assets/src/components/button.css new file mode 100644 index 00000000..8f595cb5 --- /dev/null +++ b/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; +} diff --git a/site/plugins/admin/assets/src/dropdown.css b/site/plugins/admin/assets/src/components/dropdown.css similarity index 65% rename from site/plugins/admin/assets/src/dropdown.css rename to site/plugins/admin/assets/src/components/dropdown.css index 6e608a34..5552bb7f 100644 --- a/site/plugins/admin/assets/src/dropdown.css +++ b/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; } diff --git a/site/plugins/admin/assets/src/components/navigation.css b/site/plugins/admin/assets/src/components/navigation.css new file mode 100644 index 00000000..15abaa4f --- /dev/null +++ b/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; +} diff --git a/site/plugins/admin/assets/src/content.css b/site/plugins/admin/assets/src/content.css index 6dc412ad..328ad138 100644 --- a/site/plugins/admin/assets/src/content.css +++ b/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); -} diff --git a/site/plugins/admin/assets/src/main.css b/site/plugins/admin/assets/src/main.css index 61b69842..d541f569 100644 --- a/site/plugins/admin/assets/src/main.css +++ b/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; } diff --git a/site/plugins/admin/assets/src/nav.css b/site/plugins/admin/assets/src/nav.css deleted file mode 100644 index 16907754..00000000 --- a/site/plugins/admin/assets/src/nav.css +++ /dev/null @@ -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); -} diff --git a/site/plugins/admin/assets/src/styles.css b/site/plugins/admin/assets/src/styles.css index 0c9de23e..99192666 100644 --- a/site/plugins/admin/assets/src/styles.css +++ b/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';