arie.bagus.2905/web-antrean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update color palette dan konsultasi pasien

Browse Source
This commit is contained in:
bagus-arie05
2026-01-15 08:01:37 +07:00
parent 89c3549e07
commit a8a55b9e24
3 changed files with 97 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/colors.css
+50 -30
View File
@@ -4,44 +4,46 @@
--neutral-800: #4D4D4D;
--neutral-700: #717171;
--neutral-600: #89939E;
--neutral-500: #ABBED1;
--neutral-400: #E5F7FA;
--neutral-500: #CDD4DC;
--neutral-400: #E1E5EA;
--neutral-300: #F5F7FA;
--neutral-100: #FFFFFF;
/* Primary Colors (Orange) */
--primary-700: #0053AD;
--primary-600: #0663C7;
--primary-500: #0671E0;
--primary-400: #4196F0;
--primary-300: #DBEDFF;
--primary-200: #EEF5FC;
--primary-100: #EEF5FC;
/* Primary Colors (Blue) */
--primary-700: #3556AE;
--primary-600: #3A61C9;
--primary-500: #567EE7;
--primary-400: #7898EC;
--primary-300: #9AB2F1;
--primary-200: #BBCBF5;
--primary-100: #DDE5FA;
/* Secondary Colors (Blue) */
--secondary-700: #0053AD;
--secondary-600: #0671E0;
--secondary-500: #0663C7;
--secondary-400: #4196F0;
--secondary-300: #DBEDFF;
--secondary-200: #EEF5FC;
--secondary-100: #0053AD;
/* Secondary Colors (Orange) */
--secondary-700: #E65A0D;
--secondary-600: #F16F29;
--secondary-500: #FF8441;
--secondary-400: #FF9D67;
--secondary-300: #FFB58D;
--secondary-200: #FFCEB3;
--secondary-100: #FFE6D9;
/* Success Colors (Green) */
--success-700: #1B6E53;
--success-600: #009262;
--success-500: #115B43;
--success-400: #32C997;
--success-300: #84DFC1;
--success-200: #F1FBF8;
--success-700: #008D65;
--success-600: #33A484;
--success-500: #59B59B;
--success-400: #80C6B2;
--success-300: #A6D7C9;
--success-200: #CCE8E0;
--success-100: #E5F4F0;
/* Danger Colors (Red) */
--danger-700: #E01507;
--danger-600: #E02B1D;
--danger-500: #C33025;
--danger-400: #FF5A4F;
--danger-300: #F0857D;
--danger-200: #FFF1F0;
--danger-700: #D82719;
--danger-600: #DE473B;
--danger-500: #E57269;
--danger-400: #EB938C;
--danger-300: #F1B3AE;
--danger-200: #F7D4D1;
--danger-100: #FBE9E8;
}
/* Utility Classes untuk Background */
@@ -68,6 +70,7 @@
.bg-secondary-400 { background-color: var(--secondary-400); }
.bg-secondary-300 { background-color: var(--secondary-300); }
.bg-secondary-200 { background-color: var(--secondary-200); }
.bg-secondary-100 { background-color: var(--secondary-100); }
.bg-success-700 { background-color: var(--success-700); }
.bg-success-600 { background-color: var(--success-600); }
@@ -75,6 +78,7 @@
.bg-success-400 { background-color: var(--success-400); }
.bg-success-300 { background-color: var(--success-300); }
.bg-success-200 { background-color: var(--success-200); }
.bg-success-100 { background-color: var(--success-100); }
.bg-danger-700 { background-color: var(--danger-700); }
.bg-danger-600 { background-color: var(--danger-600); }
@@ -82,6 +86,7 @@
.bg-danger-400 { background-color: var(--danger-400); }
.bg-danger-300 { background-color: var(--danger-300); }
.bg-danger-200 { background-color: var(--danger-200); }
.bg-danger-100 { background-color: var(--danger-100); }
/* Utility Classes untuk Text Color */
.text-neutral-900 { color: var(--neutral-900); }
@@ -95,18 +100,33 @@
.text-primary-600 { color: var(--primary-600); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-400 { color: var(--primary-400); }
.text-primary-300 { color: var(--primary-300); }
.text-primary-200 { color: var(--primary-200); }
.text-primary-100 { color: var(--primary-100); }
.text-secondary-700 { color: var(--secondary-700); }
.text-secondary-600 { color: var(--secondary-600); }
.text-secondary-500 { color: var(--secondary-500); }
.text-secondary-400 { color: var(--secondary-400); }
.text-secondary-300 { color: var(--secondary-300); }
.text-secondary-200 { color: var(--secondary-200); }
.text-secondary-100 { color: var(--secondary-100); }
.text-success-700 { color: var(--success-700); }
.text-success-600 { color: var(--success-600); }
.text-success-500 { color: var(--success-500); }
.text-success-400 { color: var(--success-400); }
.text-success-300 { color: var(--success-300); }
.text-success-200 { color: var(--success-200); }
.text-success-100 { color: var(--success-100); }
.text-danger-700 { color: var(--danger-700); }
.text-danger-600 { color: var(--danger-600); }
.text-danger-500 { color: var(--danger-500); }
.text-danger-400 { color: var(--danger-400); }
.text-danger-300 { color: var(--danger-300); }
.text-danger-200 { color: var(--danger-200); }
.text-danger-100 { color: var(--danger-100); }
/* Utility Classes untuk Border */
.border-primary-500 { border-color: var(--primary-500); }
assets/scss/_colors.scss
+47 -28
View File
@@ -4,39 +4,42 @@ $neutral-900: #212121;
$neutral-800: #4D4D4D;
$neutral-700: #717171;
$neutral-600: #89939E;
$neutral-500: #ABBED1;
$neutral-400: #E5F7FA;
$neutral-500: #CDD4DC;
$neutral-400: #E1E5EA;
$neutral-300: #F5F7FA;
$neutral-100: #FFFFFF;
$primary-700: #FF9B1B;
$primary-600: #FFA532;
$primary-500: #FFB95F;
$primary-400: #FFCD8D;
$primary-300: #FFDCAF;
$primary-200: #FFE6C6;
$primary-100: #EEF5FC;
$primary-700: #3556AE;
$primary-600: #3A61C9;
$primary-500: #567EE7;
$primary-400: #7898EC;
$primary-300: #9AB2F1;
$primary-200: #BBCBF5;
$primary-100: #DDE5FA;
$secondary-700: #0053AD;
$secondary-600: #0671E0;
$secondary-500: #0663C7;
$secondary-400: #4196F0;
$secondary-300: #DBEDFF;
$secondary-200: #EEF5FC;
$secondary-700: #E65A0D;
$secondary-600: #F16F29;
$secondary-500: #FF8441;
$secondary-400: #FF9D67;
$secondary-300: #FFB58D;
$secondary-200: #FFCEB3;
$secondary-100: #FFE6D9;
$success-700: #1B6E53;
$success-600: #009262;
$success-500: #115B43;
$success-400: #32C997;
$success-300: #84DFC1;
$success-200: #F1FBF8;
$success-700: #008D65;
$success-600: #33A484;
$success-500: #59B59B;
$success-400: #80C6B2;
$success-300: #A6D7C9;
$success-200: #CCE8E0;
$success-100: #E5F4F0;
$danger-700: #E01507;
$danger-600: #E02B1D;
$danger-500: #C33025;
$danger-400: #FF5A4F;
$danger-300: #F0857D;
$danger-200: #FFF1F0;
$danger-700: #D82719;
$danger-600: #DE473B;
$danger-500: #E57269;
$danger-400: #EB938C;
$danger-300: #F1B3AE;
$danger-200: #F7D4D1;
$danger-100: #FBE9E8;
// CSS Variables untuk dynamic theming
:root {
@@ -66,6 +69,7 @@ $danger-200: #FFF1F0;
--color-secondary-400: #{$secondary-400};
--color-secondary-300: #{$secondary-300};
--color-secondary-200: #{$secondary-200};
--color-secondary-100: #{$secondary-100};
// Success
--color-success-700: #{$success-700};
@@ -74,6 +78,7 @@ $danger-200: #FFF1F0;
--color-success-400: #{$success-400};
--color-success-300: #{$success-300};
--color-success-200: #{$success-200};
--color-success-100: #{$success-100};
// Danger
--color-danger-700: #{$danger-700};
@@ -82,6 +87,7 @@ $danger-200: #FFF1F0;
--color-danger-400: #{$danger-400};
--color-danger-300: #{$danger-300};
--color-danger-200: #{$danger-200};
--color-danger-100: #{$danger-100};
// Theme colors (akan di-override oleh theme system)
--color-primary: #{$primary-500};
@@ -135,15 +141,28 @@ $colors: (
'primary-400': $primary-400,
'primary-300': $primary-300,
'primary-200': $primary-200,
'primary-100': $primary-100,
'secondary-700': $secondary-700,
'secondary-600': $secondary-600,
'secondary-500': $secondary-500,
'secondary-400': $secondary-400,
'secondary-300': $secondary-300,
'secondary-200': $secondary-200,
'secondary-100': $secondary-100,
'success-700': $success-700,
'success-600': $success-600,
'success-500': $success-500,
'success-400': $success-400,
'success-300': $success-300,
'success-200': $success-200,
'success-100': $success-100,
'danger-700': $danger-700,
'danger-600': $danger-600,
'danger-500': $danger-500
'danger-500': $danger-500,
'danger-400': $danger-400,
'danger-300': $danger-300,
'danger-200': $danger-200,
'danger-100': $danger-100
);
@each $name, $color in $colors {
pages/AdminKlinikRuang/[kodeKlinik].vue
-10
View File
@@ -344,7 +344,6 @@
>
<v-icon size="32" color="primary-600" class="mb-2">mdi-swap-horizontal</v-icon>
<div class="action-selection-name">Pindah Ruang</div>
<div class="action-selection-desc">Pindah ke ruang lain di klinik yang sama</div>
</div>
<div
class="action-selection-card"
@@ -352,7 +351,6 @@
>
<v-icon size="32" color="secondary-600" class="mb-2">mdi-hospital-building</v-icon>
<div class="action-selection-name">Pindah Klinik</div>
<div class="action-selection-desc">Pindah ke klinik ruang lain, nomor antrian tetap</div>
</div>
<div
class="action-selection-card"
@@ -360,7 +358,6 @@
>
<v-icon size="32" color="success-600" class="mb-2">mdi-stethoscope</v-icon>
<div class="action-selection-name">Konsultasi</div>
<div class="action-selection-desc">Konsultasi ke klinik ruang lain dengan nomor antrian baru</div>
</div>
</div>
</div>
@@ -2770,13 +2767,6 @@ onMounted(() => {
margin-bottom: 4px;
}
.action-selection-desc {
font-size: 12px;
line-height: 16px;
color: var(--color-neutral-600);
text-align: center;
}
/* Klinik Ruang Selection Styles */
.klinik-ruang-selection-list {
max-height: 400px;