defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add design token for sidebar

Browse Source
This commit is contained in:
Dede Fuji Abdul
2023-10-23 16:26:03 +07:00
parent 92bd068430
commit 26649417f8
5 changed files with 174 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/assets/css/style.css
View File

@ -705,6 +705,139 @@ select {
--tw-backdrop-sepia: ;
}
/* NavBar */
.menu-item {
display: block;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
text-align: left;
font-size: 1rem;
line-height: 1.5rem;
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.menu-item-active {
display: block;
width: 100%;
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
text-align: left;
font-size: 1rem;
line-height: 1.5rem;
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.container-menu-item {
position: absolute;
right: 0px;
z-index: 10;
margin-top: 0.5rem;
width: 12rem;
transform-origin: top right;
overflow: hidden;
border-radius: 0.5rem;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
--tw-ring-opacity: 0.05;
}
.container-menu-item:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.container-menu-profile {
display: block;
flex-shrink: 0;
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(249 250 251 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(3 91 113 / var(--tw-bg-opacity));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* Aside */
.aside-single-item-active {
display: flex;
width: 100%;
align-items: center;
border-radius: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
padding-right: 1rem;
font-size: 0.75rem;
line-height: 1rem;
--tw-bg-opacity: 1;
background-color: rgb(3 91 113 / var(--tw-bg-opacity));
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.aside-single-item-inactive {
display: flex;
width: 100%;
align-items: center;
border-radius: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
padding-right: 1rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 600;
color: rgb(46 53 54 / var(--tw-text-opacity));
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.group:hover .aside-single-item-inactive {
background-color: rgb(205 222 227 / var(--tw-bg-opacity));
--tw-bg-opacity: 1;
background-color: rgb(3 91 113 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.aside-single-item-icon {
height: 1.5rem;
width: 1.5rem;
}
.aside-single-item-icon-inactive {
height: 1.5rem;
width: 1.5rem;
--tw-text-opacity: 1;
color: rgb(46 53 54 / var(--tw-text-opacity));
}
.group:hover .aside-single-item-icon-inactive {
stroke: #fff;
}
.sr-only {
position: absolute;
width: 1px;
@ -1128,10 +1261,6 @@ select {
width: 10rem;
}
.w-48 {
width: 12rem;
}
.w-5 {
width: 1.25rem;
}
@ -1524,11 +1653,6 @@ select {
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-gray-50 {
--tw-border-opacity: 1;
border-color: rgb(249 250 251 / var(--tw-border-opacity));
}
.border-transparent {
border-color: transparent;
}
@ -1833,10 +1957,6 @@ select {
padding-left: 2.75rem;
}
.pl-2 {
padding-left: 0.5rem;
}
.pl-3 {
padding-left: 0.75rem;
}
@ -2039,11 +2159,6 @@ select {
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
@ -2238,10 +2353,6 @@ select {
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}
.ring-transparent {
--tw-ring-color: transparent;
}
.ring-opacity-5 {
--tw-ring-opacity: 0.05;
}
@ -2446,10 +2557,6 @@ select {
border-color: rgb(243 244 246 / var(--tw-border-opacity));
}
.focus\:border-transparent:focus {
border-color: transparent;
}
.focus\:border-vtd-primary-300:focus {
--tw-border-opacity: 1;
border-color: rgb(104 157 170 / var(--tw-border-opacity));
@ -2554,16 +2661,6 @@ select {
background-color: rgb(53 124 141 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-primary-100 {
--tw-bg-opacity: 1;
background-color: rgb(205 222 227 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-primary-500 {
--tw-bg-opacity: 1;
background-color: rgb(3 91 113 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:fill-gray-500 {
fill: #6b7280;
}
@ -2572,10 +2669,6 @@ select {
fill: #fff;
}
.group:hover .group-hover\:stroke-white {
stroke: #fff;
}
.group:hover .group-hover\:text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
@ -2936,10 +3029,6 @@ select {
bottom: 0px;
}
.md\:ml-0 {
margin-left: 0px;
}
.md\:ml-6 {
margin-left: 1.5rem;
}

35
src/assets/css/tailwind.css
View File

@ -3,7 +3,36 @@
@tailwind utilities;
@layer components {
.btn {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
/* NavBar */
.menu-item {
@apply w-full text-left block px-4 py-3 text-base text-gray-800;
}
.menu-item-active {
@apply bg-gray-100 w-full text-left block px-4 py-3 text-base text-gray-800;
}
.container-menu-item {
@apply absolute right-0 z-10 w-48 mt-2 overflow-hidden origin-top-right bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
}
.container-menu-profile {
@apply flex-shrink-0 block px-4 py-2 border-b bg-primary-500 border-gray-50;
}
/* Aside */
.aside-single-item {
@apply w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl;
}
.aside-single-item-active {
@apply aside-single-item bg-primary-500 text-white font-bold;
}
.aside-single-item-inactive {
@apply aside-single-item font-semibold text-aside group-hover:bg-primary-100 text-gray-600 group-hover:text-white group-hover:bg-primary-500;
}
.aside-single-item-icon{
@apply h-6 w-6;
}
.aside-single-item-icon-active{
@apply aside-single-item-icon stroke-white;
}
.aside-single-item-icon-inactive{
@apply aside-single-item-icon text-aside group-hover:stroke-white;
}
}