Skip to content

M
myAppraisal
Commit 121a3293 by Nattana Chaiyamat
Options

modal

parent 38921ef9
Showing with 465 additions and 17 deletions
src/app/components/company-registration/branch-business-unit/department-register/department-register.component.html
...@@ -8,7 +8,9 @@ ...@@ -8,7 +8,9 @@
</div> </div>
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="button-blue-light"><i class="ri-add-line"></i>Add</button> <button type="button" class="button-blue-light" (click)="openModal('add','m',false)">
<i class="ri-add-line"></i>Add
</button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="button-purple-light"><i class="ri-printer-line"></i> Print</button> <button type="button" class="button-purple-light"><i class="ri-printer-line"></i> Print</button>
...@@ -96,7 +98,8 @@ ...@@ -96,7 +98,8 @@
<td class="body-table-center"> <td class="body-table-center">
<div class="px-1"> <div class="px-1">
<svg width="16" height="16" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" <svg width="16" height="16" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" fill="#64748b" stroke="#64748b"> xmlns="http://www.w3.org/2000/svg" fill="#64748b" stroke="#64748b"
class="cursor-pointer" (click)="openModal('edit','m',false)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier"> <g id="SVGRepo_iconCarrier">
...@@ -121,7 +124,7 @@ ...@@ -121,7 +124,7 @@
</div> </div>
<div class="px-1"> <div class="px-1">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" stroke="#64748b"> xmlns="http://www.w3.org/2000/svg" stroke="#64748b" class="cursor-pointer">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier"> <g id="SVGRepo_iconCarrier">
...@@ -150,3 +153,249 @@ ...@@ -150,3 +153,249 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Backdrop add -->
<div class="modal-backdrop" *ngIf="modalOptions['add'].isModalOpen"
[ngClass]="{ 'no-close': !modalOptions['add'].backdropClose }"
(click)="modalOptions['add'].backdropClose && closeModal('add')"></div>
<!-- Modal add -->
<div class="modal" [ngClass]="modalOptions['add'].modalSize" *ngIf="modalOptions['add'].isModalOpen">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<div class="modal-head-title">เพิ่มข้อมูลทะเบียนฝ่าย</div>
<button (click)="closeModal('add')">
<svg width="20" height="20" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
fill="#f23354" stroke="#f23354">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title>cross-circle</title>
<desc>Created with Sketch Beta.</desc>
<defs> </defs>
<g id="Page-1" stroke-width="0.41600000000000004" fill="none" fill-rule="evenodd"
sketch:type="MSPage">
<g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-568.000000, -1087.000000)"
fill="#f23354">
<path
d="M584,1117 C576.268,1117 570,1110.73 570,1103 C570,1095.27 576.268,1089 584,1089 C591.732,1089 598,1095.27 598,1103 C598,1110.73 591.732,1117 584,1117 L584,1117 Z M584,1087 C575.163,1087 568,1094.16 568,1103 C568,1111.84 575.163,1119 584,1119 C592.837,1119 600,1111.84 600,1103 C600,1094.16 592.837,1087 584,1087 L584,1087 Z M589.717,1097.28 C589.323,1096.89 588.686,1096.89 588.292,1097.28 L583.994,1101.58 L579.758,1097.34 C579.367,1096.95 578.733,1096.95 578.344,1097.34 C577.953,1097.73 577.953,1098.37 578.344,1098.76 L582.58,1102.99 L578.314,1107.26 C577.921,1107.65 577.921,1108.29 578.314,1108.69 C578.708,1109.08 579.346,1109.08 579.74,1108.69 L584.006,1104.42 L588.242,1108.66 C588.633,1109.05 589.267,1109.05 589.657,1108.66 C590.048,1108.27 590.048,1107.63 589.657,1107.24 L585.42,1103.01 L589.717,1098.71 C590.11,1098.31 590.11,1097.68 589.717,1097.28 L589.717,1097.28 Z"
id="cross-circle" sketch:type="MSShapeGroup"> </path>
</g>
</g>
</g>
</svg>
</button>
<div class="button-clear">
<button type="button" class="button-indigo-light modal-button">
<svg width="16" height="16" viewBox="0 0 64.00 64.00" xmlns="http://www.w3.org/2000/svg" fill="none"
stroke="#595BEA" stroke-width="3.84" transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="button-help">
<button type="button" class="button-yellow-light modal-button">
<svg width="16" height="16" viewBox="-2.4 -2.4 28.80 28.80" fill="none"
xmlns="http://www.w3.org/2000/svg" stroke="#E7A927" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#ffffff"
stroke-width="2.4">
<path d="M12 6.5V18.5" stroke="#E7A927" stroke-linecap="round"></path>
<path d="M20.5 6.5V18.5" stroke="#E7A927" stroke-linecap="round"></path>
<path d="M3.5 6.5V18.5" stroke="#E7A927" stroke-linecap="round"></path>
<path d="M20.5 18.5C20.5 18.5 19.5 16.5 16 16.5C12.5 16.5 12 18.5 12 18.5" stroke="#E7A927"
stroke-linecap="round"></path>
<path d="M3.5 18.5C3.5 18.5 4.5 16.5 8 16.5C11.5 16.5 12 18.5 12 18.5" stroke="#E7A927"
stroke-linecap="round"></path>
<path d="M20.5 6.5C20.5 6.5 19.5 4.5 16 4.5C12.5 4.5 12 6.5 12 6.5" stroke="#E7A927"
stroke-linecap="round"></path>
<path d="M3.5 6.5C3.5 6.5 4.5 4.5 8 4.5C11.5 4.5 12 6.5 12 6.5" stroke="#E7A927"
stroke-linecap="round">
</path>
</g>
<g id="SVGRepo_iconCarrier">
<path d="M12 6.5V18.5" stroke="#E7A927" stroke-linecap="round"></path>
<path d="M20.5 6.5V18.5" stroke="#E7A927" stroke-linecap="round"></path>
<path d="M3.5 6.5V18.5" stroke="#E7A927" stroke-linecap="round"></path>
<path d="M20.5 18.5C20.5 18.5 19.5 16.5 16 16.5C12.5 16.5 12 18.5 12 18.5" stroke="#E7A927"
stroke-linecap="round"></path>
<path d="M3.5 18.5C3.5 18.5 4.5 16.5 8 16.5C11.5 16.5 12 18.5 12 18.5" stroke="#E7A927"
stroke-linecap="round"></path>
<path d="M20.5 6.5C20.5 6.5 19.5 4.5 16 4.5C12.5 4.5 12 6.5 12 6.5" stroke="#E7A927"
stroke-linecap="round"></path>
<path d="M3.5 6.5C3.5 6.5 4.5 4.5 8 4.5C11.5 4.5 12 6.5 12 6.5" stroke="#E7A927"
stroke-linecap="round">
</path>
</g>
</svg>Help
</button>
</div>
</div>
<!-- Body -->
<div class="modal-body">
<label for="department" class="block text-sm mb-2 dark:text-white">ฝ่าย</label>
<div class="flex mb-5">
<div class="relative w-full">
<input type="text" id="department" name="department"
class="py-2 px-3 border-gray-200 rounded-sm text-sm modal-input-small">
</div>
</div>
<label for="detail_th" class="block text-sm mb-2 dark:text-white">รายละเอียดฝ่าย (ไทย)</label>
<div class="flex mb-5">
<div class="relative w-full">
<input type="text" id="detail_th" name="detailth"
class="py-2 px-3 border-gray-200 rounded-sm text-sm modal-input-full">
</div>
</div>
<label for="detail_eng" class="block text-sm mb-2 dark:text-white">รายละเอียดฝ่าย (อังกฤษ)</label>
<div class="flex mb-5">
<div class="relative w-full">
<input type="text" id="detail_eng" name="detail_eng"
class="py-2 px-3 border-gray-200 rounded-sm text-sm modal-input-full">
</div>
</div>
<div class="flex justify-end">
<button type="button" class="modal-button-white mr-1" (click)="closeModal('add')">
ย้อนกลับ
</button>
<button type="button" class="modal-button-green ml-1" (click)="closeModal('add')">
บันทึกข้อมูล
</button>
</div>
</div>
</div>
</div>
<!-- Backdrop edit -->
<div class="modal-backdrop" *ngIf="modalOptions['edit'].isModalOpen"
[ngClass]="{ 'no-close': !modalOptions['edit'].backdropClose }"
(click)="modalOptions['edit'].backdropClose && closeModal('edit')"></div>
<!-- Modal edit -->
<div class="modal" [ngClass]="modalOptions['edit'].modalSize" *ngIf="modalOptions['edit'].isModalOpen">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<div class="modal-head-title">แก้ไขข้อมูลทะเบียนฝ่าย</div>
<button (click)="closeModal('edit')">
<svg width="20" height="20" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
fill="#f23354" stroke="#f23354">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title>cross-circle</title>
<desc>Created with Sketch Beta.</desc>
<defs> </defs>
<g id="Page-1" stroke-width="0.41600000000000004" fill="none" fill-rule="evenodd"
sketch:type="MSPage">
<g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-568.000000, -1087.000000)"
fill="#f23354">
<path
d="M584,1117 C576.268,1117 570,1110.73 570,1103 C570,1095.27 576.268,1089 584,1089 C591.732,1089 598,1095.27 598,1103 C598,1110.73 591.732,1117 584,1117 L584,1117 Z M584,1087 C575.163,1087 568,1094.16 568,1103 C568,1111.84 575.163,1119 584,1119 C592.837,1119 600,1111.84 600,1103 C600,1094.16 592.837,1087 584,1087 L584,1087 Z M589.717,1097.28 C589.323,1096.89 588.686,1096.89 588.292,1097.28 L583.994,1101.58 L579.758,1097.34 C579.367,1096.95 578.733,1096.95 578.344,1097.34 C577.953,1097.73 577.953,1098.37 578.344,1098.76 L582.58,1102.99 L578.314,1107.26 C577.921,1107.65 577.921,1108.29 578.314,1108.69 C578.708,1109.08 579.346,1109.08 579.74,1108.69 L584.006,1104.42 L588.242,1108.66 C588.633,1109.05 589.267,1109.05 589.657,1108.66 C590.048,1108.27 590.048,1107.63 589.657,1107.24 L585.42,1103.01 L589.717,1098.71 C590.11,1098.31 590.11,1097.68 589.717,1097.28 L589.717,1097.28 Z"
id="cross-circle" sketch:type="MSShapeGroup"> </path>
</g>
</g>
</g>
</svg>
</button>
<div class="button-clear">
<button type="button" class="button-indigo-light modal-button">
<svg width="16" height="16" viewBox="0 0 64.00 64.00" xmlns="http://www.w3.org/2000/svg" fill="none"
stroke="#595BEA" stroke-width="3.84" transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="button-help">
<button type="button" class="button-yellow-light modal-button">
<svg width="16" height="16" viewBox="-2.4 -2.4 28.80 28.80" fill="none"
xmlns="http://www.w3.org/2000/svg" stroke="#E7A927" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#ffffff"
stroke-width="2.4">
<path d="M12 6.5V18.5" stroke="#E7A927" stroke-linecap="round"></path>
<path d="M20.5 6.5V18.5" stroke="#E7A927" stroke-linecap="round"></path>
<path d="M3.5 6.5V18.5" stroke="#E7A927" stroke-linecap="round"></path>
<path d="M20.5 18.5C20.5 18.5 19.5 16.5 16 16.5C12.5 16.5 12 18.5 12 18.5" stroke="#E7A927"
stroke-linecap="round"></path>
<path d="M3.5 18.5C3.5 18.5 4.5 16.5 8 16.5C11.5 16.5 12 18.5 12 18.5" stroke="#E7A927"
stroke-linecap="round"></path>
<path d="M20.5 6.5C20.5 6.5 19.5 4.5 16 4.5C12.5 4.5 12 6.5 12 6.5" stroke="#E7A927"
stroke-linecap="round"></path>
<path d="M3.5 6.5C3.5 6.5 4.5 4.5 8 4.5C11.5 4.5 12 6.5 12 6.5" stroke="#E7A927"
stroke-linecap="round">
</path>
</g>
<g id="SVGRepo_iconCarrier">
<path d="M12 6.5V18.5" stroke="#E7A927" stroke-linecap="round"></path>
<path d="M20.5 6.5V18.5" stroke="#E7A927" stroke-linecap="round"></path>
<path d="M3.5 6.5V18.5" stroke="#E7A927" stroke-linecap="round"></path>
<path d="M20.5 18.5C20.5 18.5 19.5 16.5 16 16.5C12.5 16.5 12 18.5 12 18.5" stroke="#E7A927"
stroke-linecap="round"></path>
<path d="M3.5 18.5C3.5 18.5 4.5 16.5 8 16.5C11.5 16.5 12 18.5 12 18.5" stroke="#E7A927"
stroke-linecap="round"></path>
<path d="M20.5 6.5C20.5 6.5 19.5 4.5 16 4.5C12.5 4.5 12 6.5 12 6.5" stroke="#E7A927"
stroke-linecap="round"></path>
<path d="M3.5 6.5C3.5 6.5 4.5 4.5 8 4.5C11.5 4.5 12 6.5 12 6.5" stroke="#E7A927"
stroke-linecap="round">
</path>
</g>
</svg>Help
</button>
</div>
</div>
<!-- Body -->
<div class="modal-body">
<label for="department" class="block text-sm mb-2 dark:text-white">ฝ่าย</label>
<div class="flex mb-5">
<div class="relative w-full">
<input type="text" id="department" name="department"
class="py-2 px-3 border-gray-200 rounded-sm text-sm modal-input-small input-disabled" disabled
value="01">
</div>
</div>
<label for="detail_th" class="block text-sm mb-2 dark:text-white">รายละเอียดฝ่าย (ไทย)</label>
<div class="flex mb-5">
<div class="relative w-full">
<input type="text" id="detail_th" name="detailth"
class="py-2 px-3 border-gray-200 rounded-sm text-sm modal-input-full" value="ฝ่าย 1">
</div>
</div>
<label for="detail_eng" class="block text-sm mb-2 dark:text-white">รายละเอียดฝ่าย (อังกฤษ)</label>
<div class="flex mb-5">
<div class="relative w-full">
<input type="text" id="detail_eng" name="detail_eng"
class="py-2 px-3 border-gray-200 rounded-sm text-sm modal-input-full" value="department 1">
</div>
</div>
<div class="flex justify-end">
<button type="button" class="modal-button-white mr-1" (click)="closeModal('edit')">
ย้อนกลับ
</button>
<button type="button" class="modal-button-green ml-1" (click)="closeModal('edit')">
บันทึกข้อมูล
</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/company-registration/branch-business-unit/department-register/department-register.component.scss
...@@ -56,3 +56,163 @@ ...@@ -56,3 +56,163 @@
color: #569bf5; color: #569bf5;
border-bottom: 3.5px solid #569bf5; border-bottom: 3.5px solid #569bf5;
} }
//modal
$modal-padding: 20px;
$header-footer-color: #f4f4f400;
$border-color: #ddd;
$header-footer-height: 60px; // กำหนดความสูงของ header + footer รวมกัน
$modal-sizes: (
s: 300px,
m: 500px,
l: 800px,
vw10: 10vw,
vw20: 20vw,
vw30: 30vw,
vw40: 40vw,
vw50: 50vw,
vw60: 60vw,
vw70: 70vw,
vw80: 80vw,
vw90: 90vw,
vw100: 100vw
);
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: flex;
flex-direction: column;
max-height: 80vh; // จำกัดความสูงของ Modal ทั้งหมด
@each $size, $width in $modal-sizes {
&.#{$size} {
width: $width;
}
}
.modal-content {
display: flex;
flex-direction: column;
height: 100%;
}
.modal-header {
background-color: $header-footer-color;
padding: $modal-padding;
border-bottom: 1px solid $border-color;
display: flex;
justify-content: space-between;
align-items: center;
height: $header-footer-height; // กำหนดความสูงของ Header
.modal-head-title {
color: rgb(var(--color-primary));
font-weight: 700;
font-size: large;
}
}
.modal-body {
flex: 1;
overflow-y: auto; // ทำให้สามารถ scroll ได้
padding: $modal-padding;
max-height: calc(80vh - #{$header-footer-height * 2}); // คำนวณความสูงของ Body หลังจากหัก Header และ Footer
}
.modal-footer {
background-color: $header-footer-color;
padding: $modal-padding;
border-top: 1px solid $border-color;
display: flex;
justify-content: flex-end;
height: $header-footer-height; // กำหนดความสูงของ Footer
}
.button-clear {
position: absolute;
right: 105px;
top: 60px;
z-index: 1;
.modal-button {
border-radius: 7px !important;
}
}
.button-help {
position: absolute;
right: 15px;
top: 60px;
z-index: 1;
.modal-button {
border-radius: 7px !important;
}
}
.modal-input-small {
width: 50%;
}
.modal-input-full {
width: 100%;
}
.modal-button-green {
min-width: 5rem;
background-color: #1dbe5a;
--tw-text-opacity: 1;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
border-width: 1px;
border-color: transparent;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.modal-button-white {
min-width: 5rem;
background-color: #ffffff;
--tw-text-opacity: 1;
color: #475569;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
border-width: 1px;
border-color: transparent;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
--tw-border-opacity: 1;
border-color: rgb(226 232 240 / var(--tw-border-opacity));
}
}
src/app/components/company-registration/branch-business-unit/department-register/department-register.component.ts
...@@ -6,4 +6,43 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; ...@@ -6,4 +6,43 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
styleUrls: ['./department-register.component.scss'] styleUrls: ['./department-register.component.scss']
}) })
export class DepartmentRegisterComponent { export class DepartmentRegisterComponent {
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
} }
src/assets/css/style.css
...@@ -1604,7 +1604,7 @@ select option:active, ...@@ -1604,7 +1604,7 @@ select option:active,
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
} }
.box-body{ .box-body{
padding: 0rem; padding: 1.5rem;
} }
.box-footer{ .box-footer{
border-bottom-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
......
src/styles.scss
...@@ -357,8 +357,6 @@ ngx-dropzone { ...@@ -357,8 +357,6 @@ ngx-dropzone {
display: flex; display: flex;
padding: 1rem 1rem 0.5rem 1rem; padding: 1rem 1rem 0.5rem 1rem;
font-size: x-large; font-size: x-large;
margin-bottom: 10px;
margin-left: 15px;
} }
.bg-card-white { .bg-card-white {
background-color: #ffffff; background-color: #ffffff;
...@@ -479,9 +477,9 @@ ngx-dropzone { ...@@ -479,9 +477,9 @@ ngx-dropzone {
} }
.button-red-light { .button-red-light {
min-width: 5rem; min-width: 5rem;
background-color: #FEDDDE; background-color: #feddde;
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: #F23354; color: #f23354;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -500,12 +498,11 @@ ngx-dropzone { ...@@ -500,12 +498,11 @@ ngx-dropzone {
transition-duration: 150ms; transition-duration: 150ms;
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px; box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
} }
.button-indigo-light {
.button-red-light {
min-width: 5rem; min-width: 5rem;
background-color: #FEDDDE; background-color: #dce3fe;
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: #F23354; color: #595bea;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -524,7 +521,6 @@ ngx-dropzone { ...@@ -524,7 +521,6 @@ ngx-dropzone {
transition-duration: 150ms; transition-duration: 150ms;
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px; box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
} }
.shadow-gray-smoke { .shadow-gray-smoke {
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px; box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
} }
...@@ -532,10 +528,9 @@ ngx-dropzone { ...@@ -532,10 +528,9 @@ ngx-dropzone {
.head-table { .head-table {
padding: 10px 20px; /* เพิ่มระยะขอบ */ padding: 10px 20px; /* เพิ่มระยะขอบ */
font-weight: bold !important; font-weight: bold !important;
font-size: 12px !important; font-size: large !important;
background-color: #E6F0FF !important; /* พื้นหลังสำหรับ header */ background-color: #e6f0ff !important; /* พื้นหลังสำหรับ header */
color: rgb(var(--color-primary)); color: rgb(var(--color-primary));
text-align: center !important;
} }
.head-table-icon { .head-table-icon {
...@@ -546,7 +541,11 @@ ngx-dropzone { ...@@ -546,7 +541,11 @@ ngx-dropzone {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.body-table-left{ .body-table-left {
display: flex; display: flex;
margin-left: 20px; margin-left: 20px;
} }
.input-disabled {
background-color: #aaaaaa !important;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment