Gagandeep/syscom-master-admin-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new changes in dark mode

Browse Source
This commit is contained in:
Anas Qureshi
2026-07-27 10:57:52 +05:30
parent b3f8ee4356
commit a39e57fcfd
13 changed files with 582 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/style.css
+1 -1
View File
@@ -16188,7 +16188,7 @@ html.dark,
--color-darkbg: rgb(37 39 41);
--color-light: rgb(43 46 49);
--color-dark: rgb(240 245 248);
--color-inputborder: rgb(49 51 53);
--color-inputborder: rgb(115 122 130);
--color-formcontrolbg: rgb(35 38 40);
--color-defaulttextcolor: rgb(255 255 255);
--color-gray-100: rgb(249, 250, 251);
public/assets/css/tailwind.css
+1 -1
View File
@@ -13048,7 +13048,7 @@ html.dark,
--color-darkbg: rgb(37 39 41);
--color-light: rgb(43 46 49);
--color-dark: rgb(240 245 248);
--color-inputborder: rgb(49 51 53);
--color-inputborder: rgb(115 122 130);
--color-formcontrolbg: rgb(35 38 40);
--color-defaulttextcolor: rgb(255 255 255);
--color-gray-100: rgb(249,250,251);
public/assets/scss/tailwind.css
+1 -1
View File
@@ -121,7 +121,7 @@ html.dark,
--color-darkbg: rgb(37 39 41);
--color-light: rgb(43 46 49);
--color-dark: rgb(240 245 248);
--color-inputborder: rgb(49 51 53);
--color-inputborder: rgb(115 122 130);
--color-formcontrolbg: rgb(35 38 40);
--color-defaulttextcolor: rgb(255 255 255);
--color-gray-100: rgb(249,250,251);
src/app/features/global-masters/currencies/pages/currency-list/currency-list.html
+2 -6
View File
@@ -144,8 +144,7 @@
</div>
<!-- Currency Code -->
<!--
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field"
@@ -198,7 +197,6 @@
<!-- Currency Symbol -->
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field"
@@ -258,7 +256,6 @@
<!-- Numeric Code -->
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field"
@@ -315,7 +312,6 @@
<!-- Decimal Digits -->
<div class="col-span-12 md:col-span-4">
@@ -377,7 +373,7 @@
</div>
-->
</form>
src/app/shared/components/modal/modal.scss
+120
View File
@@ -664,6 +664,126 @@
}
/* ==========================================================
Dark Mode
========================================================== */
:host-context(.dark) .modern-modal {
background: var(--color-bodybg) !important;
box-shadow:
0 15px 40px rgba(0, 0, 0, .25),
0 30px 80px rgba(0, 0, 0, .35);
}
:host-context(.dark) .modern-modal-body {
color: var(--color-defaulttextcolor) !important;
}
:host-context(.dark) .modern-modal-body::-webkit-scrollbar-thumb {
background: var(--color-inputborder) !important;
}
:host-context(.dark) .modern-modal-body::-webkit-scrollbar-thumb:hover {
background: var(--color-textmuted) !important;
}
:host-context(.dark) .modern-modal-footer {
background: var(--color-bodybg) !important;
border-top: 1px solid var(--color-inputborder) !important;
}
:host-context(.dark) ::ng-deep .modern-modal-footer app-button:first-child button {
background: var(--color-light) !important;
border-color: var(--color-inputborder) !important;
color: var(--color-defaulttextcolor) !important;
}
:host-context(.dark) ::ng-deep .modern-modal-footer app-button:first-child button:hover {
background: var(--color-bodybg) !important;
border-color: var(--color-textmuted) !important;
}
:host-context(.dark) ::ng-deep .modern-modal-footer app-button:last-child button {
box-shadow:
0 8px 20px rgba(125, 61, 235, 0.55) !important;
}
:host-context(.dark) ::ng-deep .modern-modal-footer app-button:last-child button:hover {
box-shadow:
0 12px 28px rgba(125, 61, 235, .65) !important;
}
/* ==========================================================
Modal form-control borders in dark mode
========================================================== */
:host-context(.dark) ::ng-deep .modern-modal {
.shared-form-input,
.custom-floating-input,
.form-control,
.form-select,
.ti-form-input,
.ti-form-select,
.ti-form-control,
.ng-select-container,
textarea,
input[type="text"],
input:not([type]),
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
border-color: rgb(115 122 130) !important;
}
.form-check-input:not(:checked) {
border-color: rgb(115 122 130) !important;
}
/* keep focus / validation colors */
.shared-form-control.is-focused .shared-form-input,
.shared-form-input:focus,
.custom-floating-input:focus,
.form-control:focus,
.form-select:focus,
.ti-form-input:focus,
.ti-form-select:focus,
.ti-form-control:focus,
.ng-select.ng-select-focused .ng-select-container,
textarea:focus {
border-color: var(--color-primary) !important;
}
.form-control.is-invalid,
.form-select.is-invalid,
.ti-form-input.is-invalid,
.ti-form-select.is-invalid,
.ti-form-control.is-invalid,
textarea.is-invalid,
.has-error .shared-form-input,
.ng-invalid.ng-touched,
.custom-floating-input.ng-invalid.ng-touched {
border-color: var(--color-danger) !important;
}
.form-check-input:checked,
.form-check-input.is-invalid {
border-color: var(--color-primary) !important;
}
.form-check-input.is-invalid:not(:checked) {
border-color: var(--color-danger) !important;
}
}
/* ==========================================================
Mobile
========================================================== */
src/app/shared/components/stepper-four/stepper-four.component.html
+11 -11
View File
@@ -147,19 +147,19 @@
</div>
<div class="col-span-12 md:col-span-3">
<div class="custom-floating-field">
<input id="f1-arrival" type="text" value="London" placeholder=" " class="custom-floating-input" />
<input id="f1-arrival" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="f1-arrival" class="custom-floating-label">Arrival City</label>
</div>
</div>
<div class="col-span-12 md:col-span-3">
<div class="custom-floating-field">
<input id="f1-depart-date" type="text" value="2026-08-15" placeholder=" " class="custom-floating-input" />
<input id="f1-depart-date" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="f1-depart-date" class="custom-floating-label">Departure Date</label>
</div>
</div>
<div class="col-span-12 md:col-span-3">
<div class="custom-floating-field">
<input id="f1-return-date" type="text" value="2026-08-22" placeholder=" " class="custom-floating-input" />
<input id="f1-return-date" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="f1-return-date" class="custom-floating-label">Return Date</label>
</div>
</div>
@@ -185,7 +185,7 @@
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="f2-passenger" type="text" value="John Doe" placeholder=" " class="custom-floating-input" />
<input id="f2-passenger" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="f2-passenger" class="custom-floating-label">Primary Passenger</label>
</div>
</div>
@@ -197,7 +197,7 @@
</div>
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="f2-phone" type="text" value="+1 555 123 4567" placeholder=" " class="custom-floating-input" />
<input id="f2-phone" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="f2-phone" class="custom-floating-label">Phone Number</label>
</div>
</div>
@@ -236,7 +236,7 @@
</div>
<div class="col-span-12 md:col-span-6">
<div class="custom-floating-field">
<input id="f3-seat" type="text" value="Window" placeholder=" " class="custom-floating-input" />
<input id="f3-seat" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="f3-seat" class="custom-floating-label">Seat Preference</label>
</div>
</div>
@@ -275,13 +275,13 @@
</div>
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="f4-checked" type="number" value="2" placeholder=" " class="custom-floating-input" />
<input id="f4-checked" type="number" value="" placeholder=" " class="custom-floating-input" />
<label for="f4-checked" class="custom-floating-label">Checked Bags</label>
</div>
</div>
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="f4-weight" type="number" value="23" placeholder=" " class="custom-floating-input" />
<input id="f4-weight" type="number" value="" placeholder=" " class="custom-floating-input" />
<label for="f4-weight" class="custom-floating-label">Extra Weight (kg)</label>
</div>
</div>
@@ -320,7 +320,7 @@
</div>
<div class="col-span-12 md:col-span-6">
<div class="custom-floating-field">
<input id="f5-wifi" type="text" value="Yes" placeholder=" " class="custom-floating-input" />
<input id="f5-wifi" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="f5-wifi" class="custom-floating-label">Wi-Fi Access</label>
</div>
</div>
@@ -353,7 +353,7 @@
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
<div class="col-span-12 md:col-span-3">
<div class="custom-floating-field">
<input id="f6-holder" type="text" value="John Doe" placeholder=" " class="custom-floating-input" />
<input id="f6-holder" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="f6-holder" class="custom-floating-label">Card Holder</label>
</div>
</div>
@@ -365,7 +365,7 @@
</div>
<div class="col-span-12 md:col-span-3">
<div class="custom-floating-field">
<input id="f6-expiry" type="text" value="12/28" placeholder=" " class="custom-floating-input" />
<input id="f6-expiry" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="f6-expiry" class="custom-floating-label">Expiry Date</label>
</div>
</div>
src/app/shared/components/stepper-four/stepper-four.component.scss
+91
View File
@@ -339,6 +339,97 @@ $white: #ffffff;
}
}
/* ==========================================================
Dark Mode
========================================================== */
:host-context(.dark) .custom-stepper-wrapper {
background: var(--color-bodybg) !important;
}
:host-context(.dark) .step-button {
color: var(--color-defaulttextcolor) !important;
}
:host-context(.dark) .step-icon {
background: var(--color-light) !important;
border-color: var(--color-inputborder) !important;
color: var(--color-textmuted) !important;
}
:host-context(.dark) .step-icon.active {
background: rgba(124, 92, 250, 0.15) !important;
border-color: $purple !important;
color: $purple !important;
box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
}
:host-context(.dark) .step-icon.completed {
background: $purple !important;
border-color: $purple !important;
color: #ffffff !important;
}
:host-context(.dark) .step-label {
color: var(--color-textmuted) !important;
}
:host-context(.dark) .step-label.active,
:host-context(.dark) .step-label.completed {
color: $purple !important;
}
:host-context(.dark) .step-separator {
border-color: var(--color-inputborder) !important;
}
:host-context(.dark) .step-separator.completed {
border-color: $purple !important;
}
:host-context(.dark) .panel-form {
background: var(--color-light) !important;
}
:host-context(.dark) .custom-floating-input {
background: var(--color-light) !important;
border: 1px solid rgb(115, 122, 130) !important;
color: var(--color-defaulttextcolor) !important;
}
:host-context(.dark) .custom-floating-input::placeholder {
color: transparent !important;
}
:host-context(.dark) .custom-floating-label {
background: var(--color-light) !important;
color: var(--color-textmuted) !important;
}
:host-context(.dark) .custom-floating-input:focus,
:host-context(.dark) .custom-floating-input:not(:placeholder-shown),
:host-context(.dark) .custom-floating-input:active {
border-color: $purple !important;
box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
}
:host-context(.dark) .custom-floating-input:focus~.custom-floating-label,
:host-context(.dark) .custom-floating-input:not(:placeholder-shown)~.custom-floating-label {
color: $purple !important;
}
:host-context(.dark) ::ng-deep .step-btn-back {
background: var(--color-light) !important;
color: var(--color-defaulttextcolor) !important;
border-color: rgb(115 122 130) !important;
}
:host-context(.dark) ::ng-deep .step-btn-back:hover {
background: var(--color-bodybg) !important;
border-color: $purple !important;
color: $purple !important;
}
@media (max-width: 768px) {
.custom-stepper-wrapper {
src/app/shared/components/stepper-three/stepper-three.component.html
+6 -6
View File
@@ -20,13 +20,13 @@
</div>
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="s1-last-name" type="text" value="Doe" placeholder=" " class="custom-floating-input" />
<input id="s1-last-name" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="s1-last-name" class="custom-floating-label">Last Name</label>
</div>
</div>
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="s1-email" type="email" value="john.doe@mail.com" placeholder=" " class="custom-floating-input" />
<input id="s1-email" type="email" value="" placeholder=" " class="custom-floating-input" />
<label for="s1-email" class="custom-floating-label">Email Address</label>
</div>
</div>
@@ -59,7 +59,7 @@
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="s2-street" type="text" value="742 Maple Avenue" placeholder=" " class="custom-floating-input" />
<input id="s2-street" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="s2-street" class="custom-floating-label">Street</label>
</div>
</div>
@@ -71,7 +71,7 @@
</div>
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="s2-postal" type="text" value="73301" placeholder=" " class="custom-floating-input" />
<input id="s2-postal" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="s2-postal" class="custom-floating-label">Postal Code</label>
</div>
</div>
@@ -110,7 +110,7 @@
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="s3-username" type="text" value="johndoe" placeholder=" " class="custom-floating-input" />
<input id="s3-username" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="s3-username" class="custom-floating-label">Username</label>
</div>
</div>
@@ -122,7 +122,7 @@
</div>
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="s3-country" type="text" value="United States" placeholder=" " class="custom-floating-input" />
<input id="s3-country" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="s3-country" class="custom-floating-label">Country</label>
</div>
</div>
src/app/shared/components/stepper-three/stepper-three.component.scss
+136
View File
@@ -296,6 +296,142 @@ $step-gap-mobile: 10px;
}
}
::ng-deep {
.step-btn-next {
background: linear-gradient(135deg, #7c5cfa, #a78bfa) !important;
color: $white !important;
border: none !important;
border-radius: 9999px !important;
padding: 0.55rem 1.4rem !important;
font-weight: 600 !important;
box-shadow: 0 4px 12px rgba(124, 92, 250, 0.35) !important;
transition: transform .2s, box-shadow .2s, filter .2s !important;
}
.step-btn-next:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(124, 92, 250, 0.45) !important;
filter: brightness(1.05);
}
.step-btn-back {
background: $white !important;
color: $pending-text !important;
border: 1px solid $line-grey !important;
border-radius: 9999px !important;
padding: 0.55rem 1.4rem !important;
font-weight: 600 !important;
transition: transform .2s, border-color .2s, color .2s, background .2s !important;
}
.step-btn-back:hover {
transform: translateY(-2px);
border-color: $purple !important;
color: $purple !important;
background: #f9fafb !important;
}
}
/* ==========================================================
Dark Mode
========================================================== */
:host-context(.dark) .card {
background: var(--color-bodybg) !important;
}
:host-context(.dark) ::ng-deep {
.p-stepper .p-stepitem:not(:last-child)::after {
background: var(--color-textmuted) !important;
}
.p-stepper .p-stepitem.done:not(:last-child)::after {
background: linear-gradient(180deg, #a78bfa 0%, #7c5cfa 100%) !important;
}
.p-stepper .p-step-number {
background: var(--color-light) !important;
border-color: var(--color-inputborder) !important;
color: var(--color-textmuted) !important;
}
.p-stepper .p-step-active .p-step-number {
background: rgba(124, 92, 250, 0.15) !important;
border-color: $purple !important;
color: $purple !important;
box-shadow: 0 0 0 5px rgba(124, 92, 250, 0.25) !important;
}
.p-stepper .p-stepitem.done .p-step-number {
background: $purple !important;
border-color: $purple !important;
color: transparent !important;
}
.p-stepper .p-step-title {
color: var(--color-defaulttextcolor) !important;
}
.p-stepper .p-step-active .p-step-title,
.p-stepper .p-stepitem.done .p-step-title {
color: $purple !important;
}
.p-stepper .p-steppanel-content {
color: var(--color-defaulttextcolor) !important;
}
}
:host-context(.dark) .panel-form form {
background: var(--color-light) !important;
border-color: var(--color-inputborder) !important;
}
:host-context(.dark) .custom-floating-input {
background: var(--color-light) !important;
border-color: var(--color-inputborder) !important;
color: var(--color-defaulttextcolor) !important;
}
:host-context(.dark) .custom-floating-input::placeholder {
color: transparent !important;
}
:host-context(.dark) .custom-floating-label {
background: var(--color-light) !important;
color: var(--color-textmuted) !important;
}
:host-context(.dark) .custom-floating-input:focus,
:host-context(.dark) .custom-floating-input:not(:placeholder-shown),
:host-context(.dark) .custom-floating-input:active {
border-color: $purple !important;
box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
}
:host-context(.dark) .custom-floating-input:focus~.custom-floating-label,
:host-context(.dark) .custom-floating-input:not(:placeholder-shown)~.custom-floating-label {
color: $purple !important;
}
:host-context(.dark) ::ng-deep .step-btn-back {
background: var(--color-light) !important;
color: var(--color-defaulttextcolor) !important;
border-color: var(--color-inputborder) !important;
}
:host-context(.dark) ::ng-deep .step-btn-back:hover {
background: var(--color-bodybg) !important;
border-color: $purple !important;
color: $purple !important;
}
@media (max-width: 768px) {
.card {
src/app/shared/components/stepper-two/stepper-two.component.html
+10 -10
View File
@@ -293,7 +293,7 @@
</div>
<div class="col-span-12 md:col-span-6">
<div class="custom-floating-field">
<input id="t1-owner" type="text" value="Sarah Chen" placeholder=" " class="custom-floating-input" />
<input id="t1-owner" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="t1-owner" class="custom-floating-label">Owner</label>
</div>
</div>
@@ -326,7 +326,7 @@
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="t2-tool" type="text" value="Figma" placeholder=" " class="custom-floating-input" />
<input id="t2-tool" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="t2-tool" class="custom-floating-label">Design Tool</label>
</div>
</div>
@@ -338,7 +338,7 @@
</div>
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="t2-deadline" type="text" value="2026-08-30" placeholder=" " class="custom-floating-input" />
<input id="t2-deadline" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="t2-deadline" class="custom-floating-label">Deadline</label>
</div>
</div>
@@ -385,7 +385,7 @@
</div>
<div class="col-span-12 md:col-span-3">
<div class="custom-floating-field">
<input id="t3-branch" type="text" value="main" placeholder=" " class="custom-floating-input" />
<input id="t3-branch" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="t3-branch" class="custom-floating-label">Branch</label>
</div>
</div>
@@ -397,7 +397,7 @@
</div>
<div class="col-span-12 md:col-span-3">
<div class="custom-floating-field">
<input id="t3-build" type="text" value="stable" placeholder=" " class="custom-floating-input" />
<input id="t3-build" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="t3-build" class="custom-floating-label">Build Type</label>
</div>
</div>
@@ -438,13 +438,13 @@
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
<div class="col-span-12 md:col-span-6">
<div class="custom-floating-field">
<input id="t4-env" type="text" value="Staging" placeholder=" " class="custom-floating-input" />
<input id="t4-env" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="t4-env" class="custom-floating-label">Environment</label>
</div>
</div>
<div class="col-span-12 md:col-span-6">
<div class="custom-floating-field">
<input id="t4-cases" type="number" value="156" placeholder=" " class="custom-floating-input" />
<input id="t4-cases" type="number" value="" placeholder=" " class="custom-floating-input" />
<label for="t4-cases" class="custom-floating-label">Test Cases</label>
</div>
</div>
@@ -485,13 +485,13 @@
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="t5-server" type="text" value="AWS" placeholder=" " class="custom-floating-input" />
<input id="t5-server" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="t5-server" class="custom-floating-label">Server</label>
</div>
</div>
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="t5-region" type="text" value="us-east-1" placeholder=" " class="custom-floating-input" />
<input id="t5-region" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="t5-region" class="custom-floating-label">Region</label>
</div>
</div>
@@ -538,7 +538,7 @@
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
<div class="col-span-12 md:col-span-6">
<div class="custom-floating-field">
<input id="t6-release" type="text" value="2026-09-01" placeholder=" " class="custom-floating-input" />
<input id="t6-release" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="t6-release" class="custom-floating-label">Release Date</label>
</div>
</div>
src/app/shared/components/stepper-two/stepper-two.component.scss
+99
View File
@@ -327,6 +327,105 @@ $subtitle-color: #6b7280;
}
}
/* ==========================================================
Dark Mode
========================================================== */
:host-context(.dark) .custom-stepper-wrapper {
background: var(--color-bodybg) !important;
}
:host-context(.dark) ::ng-deep .p-step:not(:last-child)::after {
background: var(--color-textmuted) !important;
}
:host-context(.dark) ::ng-deep .p-step.done:not(:last-child)::after {
background: linear-gradient(90deg, $purple 0%, #a78bfa 100%) !important;
}
:host-context(.dark) .step-circle {
background: var(--color-light) !important;
border-color: var(--color-inputborder) !important;
}
:host-context(.dark) .step-number {
color: var(--color-textmuted) !important;
}
:host-context(.dark) .step-circle.active {
background: rgba(124, 92, 250, 0.15) !important;
border-color: $purple !important;
box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
}
:host-context(.dark) .step-circle.active .step-number {
color: $purple !important;
}
:host-context(.dark) .step-circle.completed {
background: $purple !important;
border-color: $purple !important;
}
:host-context(.dark) .step-text.active .step-title,
:host-context(.dark) .step-text.active .step-subtitle,
:host-context(.dark) .step-text.completed .step-title,
:host-context(.dark) .step-text.completed .step-subtitle {
color: $purple !important;
}
:host-context(.dark) .step-text .step-title {
color: var(--color-defaulttextcolor) !important;
}
:host-context(.dark) .step-text .step-subtitle {
color: var(--color-textmuted) !important;
}
:host-context(.dark) .panel-box {
background: var(--color-light) !important;
border-color: var(--color-inputborder) !important;
}
:host-context(.dark) .custom-floating-input {
background: var(--color-light) !important;
border: 1px solid rgb(115, 122, 130) !important;
color: var(--color-defaulttextcolor) !important;
}
:host-context(.dark) .custom-floating-input::placeholder {
color: transparent !important;
}
:host-context(.dark) .custom-floating-label {
background: var(--color-light) !important;
color: var(--color-textmuted) !important;
}
:host-context(.dark) .custom-floating-input:focus,
:host-context(.dark) .custom-floating-input:not(:placeholder-shown),
:host-context(.dark) .custom-floating-input:active {
border-color: $purple !important;
box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
}
:host-context(.dark) .custom-floating-input:focus~.custom-floating-label,
:host-context(.dark) .custom-floating-input:not(:placeholder-shown)~.custom-floating-label {
color: $purple !important;
}
:host-context(.dark) ::ng-deep .step-btn-back {
background: var(--color-light) !important;
color: var(--color-defaulttextcolor) !important;
border-color: var(--color-inputborder) !important;
}
:host-context(.dark) ::ng-deep .step-btn-back:hover {
background: var(--color-bodybg) !important;
border-color: $purple !important;
color: $purple !important;
}
@media (max-width: 768px) {
.step-text .step-title {
src/app/shared/components/stepper/stepper.component.html
+5 -5
View File
@@ -164,7 +164,7 @@
</div>
<div class="col-span-12 md:col-span-6">
<div class="custom-floating-field">
<input id="s1-owner" type="text" value="Alice Smith" placeholder=" " class="custom-floating-input" />
<input id="s1-owner" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="s1-owner" class="custom-floating-label">Project Owner</label>
</div>
</div>
@@ -197,7 +197,7 @@
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="s2-card" type="text" value="4242 4242 4242 4242" placeholder=" " class="custom-floating-input" />
<input id="s2-card" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="s2-card" class="custom-floating-label">Card Number</label>
</div>
</div>
@@ -209,7 +209,7 @@
</div>
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="s2-cvv" type="number" value="123" placeholder=" " class="custom-floating-input" />
<input id="s2-cvv" type="number" value="" placeholder=" " class="custom-floating-input" />
<label for="s2-cvv" class="custom-floating-label">CVV</label>
</div>
</div>
@@ -250,13 +250,13 @@
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="s3-code" type="text" value="CONF-8829-X" placeholder=" " class="custom-floating-input" />
<input id="s3-code" type="text" value="" placeholder=" " class="custom-floating-input" />
<label for="s3-code" class="custom-floating-label">Confirmation Code</label>
</div>
</div>
<div class="col-span-12 md:col-span-4">
<div class="custom-floating-field">
<input id="s3-email" type="email" value="client@mail.com" placeholder=" " class="custom-floating-input" />
<input id="s3-email" type="email" value="" placeholder=" " class="custom-floating-input" />
<label for="s3-email" class="custom-floating-label">Notification Email</label>
</div>
</div>
src/app/shared/components/stepper/stepper.component.scss
+99
View File
@@ -326,6 +326,105 @@ $subtitle-color: #6b7280;
}
}
/* ==========================================================
Dark Mode
========================================================== */
:host-context(.dark) .custom-stepper-wrapper {
background: var(--color-bodybg) !important;
}
:host-context(.dark) ::ng-deep .p-step-list::before {
background: var(--color-inputborder) !important;
}
:host-context(.dark) .step-circle {
background: var(--color-light) !important;
border-color: var(--color-inputborder) !important;
}
:host-context(.dark) .step-number {
color: var(--color-textmuted) !important;
}
:host-context(.dark) .step-circle.active {
background: rgba(124, 92, 250, 0.15) !important;
border-color: $purple !important;
box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
}
:host-context(.dark) .step-circle.active .dot {
background: $purple !important;
}
:host-context(.dark) .step-circle.completed {
background: $purple !important;
border-color: $purple !important;
}
:host-context(.dark) .step-text.active .step-title,
:host-context(.dark) .step-text.active .step-subtitle,
:host-context(.dark) .step-text.completed .step-title,
:host-context(.dark) .step-text.completed .step-subtitle {
color: $purple !important;
}
:host-context(.dark) .grey-dot {
background: var(--color-textmuted) !important;
}
:host-context(.dark) .step-text .step-title {
color: var(--color-defaulttextcolor) !important;
}
:host-context(.dark) .step-text .step-subtitle {
color: var(--color-textmuted) !important;
}
:host-context(.dark) .panel-box {
background: var(--color-light) !important;
border-color: var(--color-inputborder) !important;
}
:host-context(.dark) .custom-floating-input {
background: var(--color-light) !important;
border-color: var(--color-inputborder) !important;
color: var(--color-defaulttextcolor) !important;
}
:host-context(.dark) .custom-floating-input::placeholder {
color: transparent !important;
}
:host-context(.dark) .custom-floating-label {
background: var(--color-light) !important;
color: var(--color-textmuted) !important;
}
:host-context(.dark) .custom-floating-input:focus,
:host-context(.dark) .custom-floating-input:not(:placeholder-shown),
:host-context(.dark) .custom-floating-input:active {
border-color: $purple !important;
box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
}
:host-context(.dark) .custom-floating-input:focus~.custom-floating-label,
:host-context(.dark) .custom-floating-input:not(:placeholder-shown)~.custom-floating-label {
color: $purple !important;
}
:host-context(.dark) ::ng-deep .step-btn-back {
background: var(--color-light) !important;
color: var(--color-defaulttextcolor) !important;
border-color: var(--color-inputborder) !important;
}
:host-context(.dark) ::ng-deep .step-btn-back:hover {
background: var(--color-bodybg) !important;
border-color: $purple !important;
color: $purple !important;
}
@media (max-width: 768px) {
.step-text .step-title {