Skip to content

M
myAppraisal
Commit e469058b by Nattana Chaiyamat
Options

แก้ไขหน้าจอ รายละเอียดสาขาและหน่วยธุรกิจ

parent aafdd4e1
Showing with 599 additions and 531 deletions
src/app/components/company-registration/branch-business-unit/branch-business-unit.component.html
<div class="head-title">
<div class="text-xxl font-bold pt-2rem pb-1rem text-primary">
รายละเอียดสาขาและหน่วยธุรกิจ
</div>
<div class="body-content">
<ul class="nav-tabs">
<li class="nav-item" *ngFor="let item of [{id:'tab1',text:'ทะเบียนฝ่าย'},
{id:'tab2',text:'ทะเบียนแผนก'},
{id:'tab3',text:'ทะเบียนส่วน'},
{id:'tab4',text:'ส่วนย่อย1'},
{id:'tab5',text:'ส่วนย่อย2'},
{id:'tab6',text:'ส่วนย่อย3'},
{id:'tab7',text:'ส่วนย่อย4'}]" (click)="changeTab(item)">
<a [class.active]="activeTab === item.id" class="nav-link">{{item.text}}</a>
</li>
</ul>
<div class="tab-content">
<div *ngIf="activeTab === 'tab1'" class="tab-pane">
<div class="page">
<div class="border-b border-gray-200 dark:border-white/10">
<nav class="flex space-x-2 rtl:space-x-reverse">
<a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 active"
href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1" aria-controls="card-type-1">
ทะเบียนฝ่าย
</a>
<a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
href="javascript:void(0);" id="card-type-item-2" data-hs-tab="#card-type-2" aria-controls="card-type-2">
ทะเบียนแผนก
</a>
<a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
href="javascript:void(0);" id="card-type-item-3" data-hs-tab="#card-type-3" aria-controls="card-type-3">
ทะเบียนส่วน
</a>
<a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
href="javascript:void(0);" id="card-type-item-4" data-hs-tab="#card-type-4" aria-controls="card-type-4">
ส่วนย่อย1
</a>
<a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
href="javascript:void(0);" id="card-type-item-5" data-hs-tab="#card-type-5" aria-controls="card-type-5">
ส่วนย่อย2
</a>
<a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
href="javascript:void(0);" id="card-type-item-6" data-hs-tab="#card-type-6" aria-controls="card-type-6">
ส่วนย่อย3
</a>
<a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
href="javascript:void(0);" id="card-type-item-7" data-hs-tab="#card-type-7" aria-controls="card-type-7">
ส่วนย่อย4
</a>
</nav>
</div>
<div class="">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<app-department-register></app-department-register>
</div>
<div *ngIf="activeTab === 'tab2'" class="tab-pane">
<div id="card-type-2" class="hidden" role="tabpanel" aria-labelledby="card-type-item-2">
<app-department-list></app-department-list>
</div>
<div *ngIf="activeTab === 'tab3'" class="tab-pane">
<div id="card-type-3" class="hidden" role="tabpanel" aria-labelledby="card-type-item-3">
<app-section-registration></app-section-registration>
</div>
<div *ngIf="activeTab === 'tab4'" class="tab-pane">
<div id="card-type-4" class="hidden" role="tabpanel" aria-labelledby="card-type-item-4">
<app-sub-department-one></app-sub-department-one>
</div>
<div *ngIf="activeTab === 'tab5'" class="tab-pane">
<div id="card-type-5" class="hidden" role="tabpanel" aria-labelledby="card-type-item-5">
<app-sub-department-two></app-sub-department-two>
</div>
<div *ngIf="activeTab === 'tab6'" class="tab-pane">
<div id="card-type-6" class="hidden" role="tabpanel" aria-labelledby="card-type-item-6">
<app-sub-department-three></app-sub-department-three>
</div>
<div *ngIf="activeTab === 'tab7'" class="tab-pane">
<div id="card-type-7" class="hidden" role="tabpanel" aria-labelledby="card-type-item-7">
<app-sub-department-four></app-sub-department-four>
</div>
</div>
......
src/app/components/company-registration/branch-business-unit/branch-business-unit.component.scss
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
border-bottom: 2px solid #ccc; /* เส้นใต้ */
width: 100%;
cursor: pointer;
}
.nav-item {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: large;
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: #ccc;
border-radius: 5px 5px 0px 0px;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #ffffff; /* สีตัวอักษรในสถานะ active */
font-size: large;
border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
background-color: rgb(var(--color-primary));
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: rgb(var(--color-primary));
border-radius: 5px 5px 0px 0px;
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
src/app/components/company-registration/branch-business-unit/department-register/department-register.component.scss
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
border-bottom: 2px solid #ccc; /* เส้นใต้ */
width: 100%;
cursor: pointer;
}
.nav-item {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: large;
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: #ccc;
border-radius: 5px 5px 0px 0px;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #ffffff; /* สีตัวอักษรในสถานะ active */
font-size: large;
border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
background-color: rgb(var(--color-primary));
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: rgb(var(--color-primary));
border-radius: 5px 5px 0px 0px;
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
.nav-item-text {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link-text {
text-decoration: none;
display: inline-block;
font-size: large;
color: #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));
}
.button-clear {
position: absolute;
top: 96px;
z-index: 1;
right: 41vw;
}
.button-help {
position: absolute;
top: 96px;
z-index: 1;
right: 35vw;
}
src/app/components/company-registration/company-registration.component.html
......@@ -2,25 +2,33 @@
<div class="bg-card-white">
</div>
<div class="block-main-content">
<div class="head-title">
<div class="text-xxl font-bold py-2 px-4 text-primary">
ทะเบียนบริษัท
</div>
<div class="body-content">
<ul class="nav-tabs">
<li class="nav-item" *ngFor="let item of [{id:'tab1',text:'ทะเบียนบริษัท'},
{id:'tab2',text:'สาขาและหน่วยธุรกิจ'}]" (click)="changeTab(item)">
<a [class.active]="activeTab === item.id" class="nav-link">{{item.text}}</a>
</li>
</ul>
<div class="tab-content">
<div *ngIf="activeTab === 'tab1'" class="tab-pane">
<p>ทะเบียนบริษัท</p>
<div class="page">
<div class="border-b border-gray-200 dark:border-white/10">
<nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
<a class="pl-8 text-xxl font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary active"
href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
aria-controls="underline-1"
(click)="pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท','ทะเบียนบริษัท']">
ทะเบียนบริษัท
</a>
<a class="text-xxl font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary"
href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
aria-controls="underline-2"
(click)="pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท','สาขาและหน่วยธุรกิจ' ,'ทะเบียนฝ่าย']">
สาขาและหน่วยธุรกิจ
</a>
</nav>
</div>
<div class="mt-3 px-3rem">
<div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
รายละเอียดทะเบียนบริษัท
</div>
<div *ngIf="activeTab === 'tab2'" class="tab-pane">
<div class="mt-5"></div>
<div id="underline-2" class="hidden" role="tabpanel" aria-labelledby="underline-item-2">
<app-branch-business-unit [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-branch-business-unit>
</div>
</div>
</div>
</div>
\ No newline at end of file
</div>
\ No newline at end of file
src/app/components/company-registration/company-registration.component.scss
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
border-bottom: 2px solid #ccc; /* เส้นใต้ */
width: 100%;
cursor: pointer;
}
.nav-item {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: large;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #569bf5; /* สีตัวอักษรในสถานะ active */
font-size: large;
border-bottom: 3.5px solid #569bf5; /* เส้นใต้ */
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
src/app/components/company-registration/company-registration.component.ts
......@@ -7,11 +7,4 @@ import { Component } from '@angular/core';
})
export class CompanyRegistrationComponent {
pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'ทะเบียนบริษัท']
activeTab: string = 'tab1';
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', tab.text]
this.activeTab = tab.id
}
}
src/app/shared/components/page-header/page-header.component.html
......@@ -5,12 +5,16 @@
<!-- Page Header New -->
<div class="block justify-between page-header sm:flex">
<ol class="flex items-center whitespace-nowrap min-w-0">
<li class="text-sm text-gray-500 hover:text-primary dark:text-white/70 " aria-current="page"
*ngFor="let item of pathTitle;let l = last">
<span class="flex items-center">
<li class="text-sm" *ngFor="let item of pathTitle;let l = last">
<a class="flex items-center text-gray-500 hover:text-primary dark:text-white" href="javascript:void(0);">
{{item}}
<i *ngIf="!l" class="ri-arrow-right-s-line mx-3 text-gray-500"></i>
</span>
<svg *ngIf="!l"
class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-300 dark:text-white/10 rtl:rotate-180"
width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor"
stroke-width="2" stroke-linecap="round" />
</svg>
</a>
</li>
</ol>
</div>
......
src/assets/css/style.css
......@@ -3897,6 +3897,9 @@ select option:active,
.ms-1{
margin-inline-start: 0.25rem;
}
.m-auto{
margin: auto;
}
.mt-0{
margin-top: 0px;
}
......@@ -4095,6 +4098,9 @@ select option:active,
.h-\[500px\]{
height: 500px;
}
.h-45px{
height: 45px;
}
.h-\[calc\(100\%-3\.5rem\)\]{
height: calc(100% - 3.5rem);
}
......@@ -5481,6 +5487,9 @@ select option:active,
.bg-pink-800\/20{
background-color: rgb(157 23 77 / 0.2);
}
.bg-soft-secondary{
background-color: rgb(var(--color-secondary) / 0.1) !important;
}
.bg-primary{
background-color: rgb(var(--color-primary));
}
......@@ -5957,6 +5966,12 @@ select option:active,
.pl-3{
padding-left: 0.75rem;
}
.pl-8{
padding-left: 2rem;
}
.pr-8{
padding-right: 2rem;
}
.pr-3{
padding-right: 0.75rem;
}
......@@ -5975,6 +5990,206 @@ select option:active,
.pt-3{
padding-top: 0.75rem;
}
.pt-1rem{
padding-top: 1rem;
}
.pt-2rem{
padding-top: 2rem;
}
.pt-3rem{
padding-top: 3rem;
}
.pt-4rem{
padding-top: 4rem;
}
.pt-5rem{
padding-top: 5rem;
}
.pb-1rem{
padding-bottom: 1rem;
}
.pb-2rem{
padding-bottom: 2rem;
}
.pb-3rem{
padding-bottom: 3rem;
}
.pb-4rem{
padding-bottom: 4rem;
}
.pb-5rem{
padding-bottom: 5rem;
}
.pl-1rem{
padding-left: 1rem;
}
.pl-2rem{
padding-left: 2rem;
}
.pl-3rem{
padding-left: 3rem;
}
.pl-4rem{
padding-left: 4rem;
}
.pl-5rem{
padding-left: 5rem;
}
.pr-1rem{
padding-right: 1rem;
}
.pr-2rem{
padding-right: 2rem;
}
.pr-3rem{
padding-right: 3rem;
}
.pr-4rem{
padding-right: 4rem;
}
.pr-5rem{
padding-right: 5rem;
}
.px-1rem{
padding-left: 1rem;
padding-right: 1rem;
}
.px-2rem{
padding-left: 2rem;
padding-right: 2rem;
}
.px-3rem{
padding-left: 3rem;
padding-right: 3rem;
}
.px-4rem{
padding-left: 4rem;
padding-right: 4rem;
}
.px-5rem{
padding-left: 5rem;
padding-right: 5rem;
}
.py-1rem{
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-2rem{
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-3rem{
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-4rem{
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-5rem{
padding-top: 5rem;
padding-bottom: 5rem;
}
.pt-10px{
padding-top: 10px;
}
.pt-20px{
padding-top: 20px;
}
.pt-30px{
padding-top: 30px;
}
.pt-40px{
padding-top: 40px;
}
.pt-50px{
padding-top: 50px;
}
.pb-10px{
padding-bottom: 10px;
}
.pb-20px{
padding-bottom: 20px;
}
.pb-30px{
padding-bottom: 30px;
}
.pb-40px{
padding-bottom: 40px;
}
.pb-50px{
padding-bottom: 50px;
}
.pl-10px{
padding-left: 10px;
}
.pl-20px{
padding-left: 20px;
}
.pl-30px{
padding-left: 30px;
}
.pl-40px{
padding-left: 40px;
}
.pl-50px{
padding-left: 50px;
}
.pr-10px{
padding-right: 10px;
}
.pr-20px{
padding-right: 20px;
}
.pr-30px{
padding-right: 30px;
}
.pr-40px{
padding-right: 40px;
}
.pr-50px{
padding-right: 50px;
}
.px-10px{
padding-left: 10px;
padding-right: 10px;
}
.px-20px{
padding-left: 20px;
padding-right: 20px;
}
.px-30px{
padding-left: 30px;
padding-right: 30px;
}
.px-40px{
padding-left: 40px;
padding-right: 40px;
}
.px-50px{
padding-left: 50px;
padding-right: 50px;
}
.py-10px{
padding-top: 10px;
padding-bottom: 10px;
}
.py-20px{
padding-top: 20px;
padding-bottom: 20px;
}
.py-30px{
padding-top: 30px;
padding-bottom: 30px;
}
.py-40px{
padding-top: 40px;
padding-bottom: 40px;
}
.py-50px{
padding-top: 50px;
padding-bottom: 50px;
}
.text-left{
text-align: left;
}
......@@ -6056,6 +6271,10 @@ select option:active,
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xxl{
font-size: 1.5rem;
line-height: 1.75rem;
}
.text-xl{
font-size: 1.25rem;
line-height: 1.75rem;
......@@ -6636,10 +6855,10 @@ select option:active,
--color-primary: 21 76 156;
--color-primary-rgb: 21,76,156;
--color-secondary: 96 165 250;
--color-success: 34 197 94;
--color-info: 76 117 207;
--color-warning: 234 179 8;
--color-danger: 244 63 94;
--color-success: 29 190 90;
--color-info: 159 73 241;
--color-warning: 231 169 39;
--color-danger: 242 51 84;
--body-bg: 242 246 249;
--default-text-color: 71 85 105;
--default-border: 243 243 243;
......@@ -6653,6 +6872,7 @@ select option:active,
--header-border-color: 243 243 243;
--dark-bg: 30 41 59;
--dark-bg2: 249 250 251;
--color-indigo : 89 91 234;
}
.dark {
--body-bg: 41 53 73;
......@@ -21207,3 +21427,287 @@ div:where(.swal2-container) div:where(.swal2-validation-message){
}
}
/*# sourceMappingURL=style.css.map */
.ti-btn-soft-warning .svg-warning{
stroke: #E7A927;
}
.ti-btn-soft-warning:hover .svg-warning path {
stroke: white;
}
.svg-primary{
stroke: #194C9C;
}
.align-items-end{
align-items: end;
}
.fs-l{
font-size: large;
}
.fs-xl{
font-size: x-large;
}
.fs-xxl{
font-size: xx-large;
}
.fw-b{
font-weight: bolder;
}
.mt-1rem{
margin-top: 1rem;
}
.mt-2rem{
margin-top: 2rem;
}
.mt-3rem{
margin-top: 3rem;
}
.mt-4rem{
margin-top: 4rem;
}
.mt-5rem{
margin-top: 5rem;
}
.mb-1rem{
margin-bottom: 1rem;
}
.mb-2rem{
margin-bottom: 2rem;
}
.mb-3rem{
margin-bottom: 3rem;
}
.mb-4rem{
margin-bottom: 4rem;
}
.mb-5rem{
margin-bottom: 5rem;
}
.ml-1rem{
margin-left: 1rem;
}
.ml-2rem{
margin-left: 2rem;
}
.ml-3rem{
margin-left: 3rem;
}
.ml-4rem{
margin-left: 4rem;
}
.ml-5rem{
margin-left: 5rem;
}
.mr-1rem{
margin-right: 1rem;
}
.mr-2rem{
margin-right: 2rem;
}
.mr-3rem{
margin-right: 3rem;
}
.mr-4rem{
margin-right: 4rem;
}
.mr-5rem{
margin-right: 5rem;
}
.mx-1rem{
margin-left: 1rem;
margin-right: 1rem;
}
.mx-2rem{
margin-left: 2rem;
margin-right: 2rem;
}
.mx-3rem{
margin-left: 3rem;
margin-right: 3rem;
}
.mx-4rem{
margin-left: 4rem;
margin-right: 4rem;
}
.mx-5rem{
margin-left: 5rem;
margin-right: 5rem;
}
.my-1rem{
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-2rem{
margin-top: 2rem;
margin-bottom: 2rem;
}
.my-3rem{
margin-top: 3rem;
margin-bottom: 3rem;
}
.my-4rem{
margin-top: 4rem;
margin-bottom: 4rem;
}
.my-5rem{
margin-top: 5rem;
margin-bottom: 5rem;
}
.mt-10px{
margin-top: 10px;
}
.mt-20px{
margin-top: 20px;
}
.mt-30px{
margin-top: 30px;
}
.mt-40px{
margin-top: 40px;
}
.mt-50px{
margin-top: 50px;
}
.mb-10px{
margin-bottom: 10px;
}
.mb-20px{
margin-bottom: 20px;
}
.mb-30px{
margin-bottom: 30px;
}
.mb-40px{
margin-bottom: 40px;
}
.mb-50px{
margin-bottom: 50px;
}
.ml-10px{
margin-left: 10px;
}
.ml-20px{
margin-left: 20px;
}
.ml-30px{
margin-left: 30px;
}
.ml-40px{
margin-left: 40px;
}
.ml-50px{
margin-left: 50px;
}
.mr-10px{
margin-right: 10px;
}
.mr-20px{
margin-right: 20px;
}
.mr-30px{
margin-right: 30px;
}
.mr-40px{
margin-right: 40px;
}
.mr-50px{
margin-right: 50px;
}
.mx-10px{
margin-left: 10px;
margin-right: 10px;
}
.mx-20px{
margin-left: 20px;
margin-right: 20px;
}
.mx-30px{
margin-left: 30px;
margin-right: 30px;
}
.mx-40px{
margin-left: 40px;
margin-right: 40px;
}
.mx-50px{
margin-left: 50px;
margin-right: 50px;
}
.my-10px{
margin-top: 10px;
margin-bottom: 10px;
}
.my-20px{
margin-top: 20px;
margin-bottom: 20px;
}
.my-30px{
margin-top: 30px;
margin-bottom: 30px;
}
.my-40px{
margin-top: 40px;
margin-bottom: 40px;
}
.my-50px{
margin-top: 50px;
margin-bottom: 50px;
}
.i-gray{
--tw-text-opacity: 1 !important;
color: rgb(100 116 139 / var(--tw-text-opacity)) !important;
}
.i-gray:hover{
--tw-text-opacity: 1;
color: rgb(15 23 42 / var(--tw-text-opacity)) !important;
}
.ti-btn-soft-indigo{
background-color: rgb(var(--color-indigo) / 0.1);
color: rgb(var(--color-indigo));
--tw-ring-offset-color: #fff;
}
.ti-btn-soft-indigo:hover{
background-color: rgb(var(--color-indigo));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.ti-btn-soft-indigo:focus{
--tw-ring-color: rgb(var(--color-indigo));
}
.ti-btn-indigo{
background-color: rgb(var(--color-indigo));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.ti-btn-indigo:hover{
background-color: rgb(var(--color-indigo));
}
.ti-btn-indigo:focus{
--tw-ring-color: rgb(var(--color-indigo));
}
.ti-btn-soft-indigo .svg-indigo{
stroke: #595bea;
}
.ti-btn-soft-indigo:hover .svg-indigo path {
stroke: white;
}
.ti-modal .ti-modal-header-button{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom-width: 1px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1rem;
padding-right: 1rem;
}
.bg-input-readonly{
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}
\ No newline at end of file
src/styles.scss
......@@ -346,18 +346,7 @@ ngx-dropzone {
}
/* colorpicker */
.body-content {
display: flex;
flex-direction: column;
padding: 0.5rem 1rem 1rem 1rem;
}
.head-title {
color: rgb(var(--color-primary));
font-weight: 700;
display: flex;
padding: 1rem 1rem 0.5rem 1rem;
font-size: x-large;
}
.bg-card-white {
background-color: #ffffff;
height: 100vh;
......@@ -383,169 +372,4 @@ ngx-dropzone {
background: white;
margin-left: -1.75rem;
}
}
.input-wrapper {
position: relative;
max-width: 20rem;
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
display: flex;
align-items: center; // จัดให้อยู่กลางในแนวตั้ง
justify-content: space-between; // จัดไอคอนให้ไปอยู่ข้างขวา
}
.input-wrapper input {
font-family: Montserrat !important;
padding: 0.5rem;
padding-left: 2.5rem; // เพิ่มพื้นที่สำหรับไอคอน
}
.input-wrapper .icon {
position: absolute;
left: 1rem; // ตำแหน่งไอคอนที่ซ้าย
pointer-events: none; // ไอคอนไม่ทำให้การคลิกใน input หยุด
}
.button-blue-light {
min-width: 5rem;
background-color: #e6f0ff;
--tw-text-opacity: 1;
color: #569bf5;
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;
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
}
.button-purple-light {
min-width: 5rem;
background-color: #f1e4fe;
--tw-text-opacity: 1;
color: #9f49f1;
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;
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
}
.button-yellow-light {
min-width: 5rem;
background-color: #fef8bf;
--tw-text-opacity: 1;
color: #e7a927;
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;
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
}
.button-red-light {
min-width: 5rem;
background-color: #feddde;
--tw-text-opacity: 1;
color: #f23354;
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;
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
}
.button-indigo-light {
min-width: 5rem;
background-color: #dce3fe;
--tw-text-opacity: 1;
color: #595bea;
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;
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
}
.shadow-gray-smoke {
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
}
.head-table {
padding: 10px 20px; /* เพิ่มระยะขอบ */
font-weight: bold !important;
font-size: large !important;
background-color: #e6f0ff !important; /* พื้นหลังสำหรับ header */
color: rgb(var(--color-primary));
}
.head-table-icon {
fill: rgb(var(--color-primary)); /* สีไอคอน */
margin: auto;
}
.body-table-center {
display: flex;
justify-content: center;
}
.body-table-left {
display: flex;
margin-left: 20px;
}
.input-disabled {
background-color: #aaaaaa !important;
}
}
\ No newline at end of file
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