Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed activity issue refactor css file #1399

Merged
merged 4 commits into from
Aug 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
210 changes: 77 additions & 133 deletions packages/Webkul/Admin/src/Resources/assets/css/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -373,11 +373,83 @@
.tox.tox-silver-sink.tox-tinymce-aux {
z-index: 99999;
}
}

/* -------------------------------- new css end -------------------------------- */
.stage::after {
content: '';
position: absolute;
top: 50%;
right: -10px;
width: 24px;
height: 24px;
z-index: 1;
border-radius: 0 0 0 25px;
transform: translateY(-50%) rotate(45deg);
border-right: 4px solid #f3f4f6;
border-top: 4px solid #f3f4f6;
}

.dark .stage::after {
content: '';
position: absolute;
top: 50%;
right: -10px;
width: 24px;
height: 24px;
z-index: 1;
border-radius: 0 0 0 25px;
transform: translateY(-50%) rotate(45deg);
border-right: 4px solid #030712;
border-top: 4px solid #030712;
}

.shimmer {
animation-duration: 2.2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: skeleton;
animation-timing-function: linear;
background: linear-gradient(
to right,
#f6f6f6 8%,
#f0f0f0 18%,
#f6f6f6 33%
);
background-size: 1250px 100%;
}

.light-shimmer-bg {
background: linear-gradient(
to right,
#fafafa 8%,
#f5f5f5 18%,
#fafafa 33%
);
background-size: 1250px 100%;
}

.dark .shimmer {
background: linear-gradient(
to right,
#1f2937 8%,
#1a2232 18%,
#1f2937 33%
);
}

.primary-button {
@apply bg-brandColor border border-brandColor cursor-pointer flex focus:opacity-[0.9] font-semibold gap-x-1 hover:opacity-[0.9] items-center place-content-center px-3 py-1.5 rounded-md text-gray-50 transition-all;
}

.secondary-button {
@apply flex cursor-pointer place-content-center items-center gap-x-1 whitespace-nowrap rounded-md border-2 border-brandColor bg-white px-3 py-1.5 font-semibold text-brandColor transition-all hover:bg-[#eff6ff61] focus:bg-[#eff6ff61] dark:border-gray-400 dark:bg-gray-800 dark:text-white dark:hover:opacity-80;
}

.transparent-button {
@apply flex cursor-pointer appearance-none place-content-center items-center gap-x-1 whitespace-nowrap rounded-md border-2 border-transparent px-3 py-1.5 font-semibold text-gray-600 transition-all marker:shadow hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-950;
}

/* -------------------------------- old css -------------------------------- */

@layer components {
::-webkit-scrollbar {
width: 12px;
}
Expand Down Expand Up @@ -437,18 +509,6 @@
@apply outline-none;
}

.primary-button {
@apply bg-brandColor border border-brandColor cursor-pointer flex focus:opacity-[0.9] font-semibold gap-x-1 hover:opacity-[0.9] items-center place-content-center px-3 py-1.5 rounded-md text-gray-50 transition-all;
}

.secondary-button {
@apply flex cursor-pointer place-content-center items-center gap-x-1 whitespace-nowrap rounded-md border-2 border-brandColor bg-white px-3 py-1.5 font-semibold text-brandColor transition-all hover:bg-[#eff6ff61] focus:bg-[#eff6ff61] dark:border-gray-400 dark:bg-gray-800 dark:text-white dark:hover:opacity-80;
}

.transparent-button {
@apply flex cursor-pointer appearance-none place-content-center items-center gap-x-1 whitespace-nowrap rounded-md border-2 border-transparent px-3 py-1.5 font-semibold text-gray-600 transition-all marker:shadow hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-950;
}

.journal-scroll::-webkit-scrollbar {
width: 14px;
cursor: pointer;
Expand Down Expand Up @@ -479,6 +539,7 @@
background-position-x: calc(100% - 10px);
background-position-y: 50%;
}

.dark .custom-select{
background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}
Expand All @@ -487,93 +548,6 @@
background-position-x: calc(100% - (100% - 10px));
}

.label-pending,
.label-processing,
.label-closed,
.label-canceled,
.label-info,
.label-fraud,
.label-pending_payment,
.label-completed,
/* .label-active {
@apply text-[12px] text-white font-semibold py-px px-1.5 max-w-max rounded-md;
} */

.label-pending,
.label-pending_payment {
@apply bg-yellow-500;
}

.label-processing{
@apply bg-cyan-600;
}

/* .label-completed,
.label-active {
@apply bg-emerald-200;
} */

.label-closed {
@apply bg-indigo-600;
}

.label-canceled,
.label-fraud {
@apply bg-rose-600;
}

.label-info {
@apply bg-slate-400;
}

/* status */
.status-enable {
@apply text-green-600;
}

.status-disable {
@apply text-red-600;
}

.icon-star-fill:before {
content: "\e938";
color: #ffb600;
}

.shimmer {
animation-duration: 2.2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: skeleton;
animation-timing-function: linear;
background: linear-gradient(
to right,
#f6f6f6 8%,
#f0f0f0 18%,
#f6f6f6 33%
);
background-size: 1250px 100%;
}

.light-shimmer-bg {
background: linear-gradient(
to right,
#fafafa 8%,
#f5f5f5 18%,
#fafafa 33%
);
background-size: 1250px 100%;
}

.dark .shimmer {
background: linear-gradient(
to right,
#1f2937 8%,
#1a2232 18%,
#1f2937 33%
);
}

.draggable-ghost {
@apply border border-dashed !border-gray-300;
}
Expand All @@ -592,37 +566,7 @@
@apply content-['*'];
}

.CodeMirror {
@apply !h-[calc(100vh-367px)];
}

.stage::after {
content: '';
position: absolute;
top: 50%;
right: -10px;
width: 24px;
height: 24px;
z-index: 1;
border-radius: 0 0 0 25px;
transform: translateY(-50%) rotate(45deg);
border-right: 4px solid #f3f4f6;
border-top: 4px solid #f3f4f6;
}

.dark .stage::after {
content: '';
position: absolute;
top: 50%;
right: -10px;
width: 24px;
height: 24px;
z-index: 1;
border-radius: 0 0 0 25px;
transform: translateY(-50%) rotate(45deg);
border-right: 4px solid #030712;
border-top: 4px solid #030712;
}

}

.tox .tox-toolbar__group:last-child button {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,18 +56,18 @@ class="flex h-[74px] w-[84px] flex-col items-center justify-center gap-1 rounded
<x-slot:content>
<!-- Activity Type -->
<x-admin::form.control-group.control
type="hidden"
type="text"
name="type"
::value="selectedType.value"
v-model="selectedType.value"
/>

<!-- Id -->
<x-admin::form.control-group.control
type="hidden"
::name="entityControlName"
::value="entity.id"
/>

<!-- Title -->
<x-admin::form.control-group>
<x-admin::form.control-group.label class="required">
Expand Down Expand Up @@ -202,7 +202,7 @@ class="primary-button"
value: 'meeting'
}, {
label: "{{ trans('admin::app.components.activities.actions.activity.lunch') }}",
value: 'task'
value: 'lunch'
},
]
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ class="duration-80 fixed top-14 z-[1000] h-full w-[190px] bg-white pt-4 transiti
@mouseover="handleMouseOver"
@mouseleave="handleMouseLeave"
>
<div class="journal-scroll h-[calc(100vh-100px)] overflow-auto group-[.sidebar-collapsed]/container:overflow-visible">
<div class="journal-scroll h-[calc(100vh-100px)] overflow-hidden group-[.sidebar-collapsed]/container:overflow-visible">
<nav class="sidebar-rounded grid w-full gap-2">
<!-- Navigation Menu -->
@foreach (menu()->getItems('admin') as $menuItem)
Expand Down Expand Up @@ -37,7 +37,7 @@ class="absolute top-0 hidden w-[200px] flex-col bg-gray-100 ltr:left-[190px] rtl
:class="[isMenuActive && (hoveringMenu == '{{$menuItem->getKey()}}') ? '!flex' : 'hidden']"
>
<div class="sidebar-rounded fixed top-14 z-[1000] h-full w-[140px] border bg-white pt-4 dark:border-gray-800 dark:bg-gray-900 max-lg:hidden">
<div class="journal-scroll h-[calc(100vh-100px)] overflow-auto">
<div class="journal-scroll h-[calc(100vh-100px)] overflow-hidden">
<nav class="grid w-full gap-2">
@foreach ($menuItem->getChildren() as $subMenuItem)
<div class="px-4 group/item {{ $menuItem->isActive() ? 'active' : 'inactive' }}">
Expand Down
1 change: 1 addition & 0 deletions public/admin/build/assets/app-0d36d34a.css

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion public/admin/build/assets/app-65c23fd5.css

This file was deleted.

Loading
Loading