rubyon/farmitry_hvac
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

화면 레이아웃 구성

Browse Source
This commit is contained in:
ming
2025-04-17 04:14:43 +09:00
parent 4b9c59b6e0
commit f90962c54f
7 changed files with 146 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/assets/stylesheets/application.tailwind.css
View File

@@ -2,14 +2,14 @@
@theme {
--color-default: rgb(226, 232, 240);
--color-defaultSlate: rgb(100, 116, 139);
--color-defaultSlateDark: rgb(71, 85, 105);
--color-default-slate: rgb(100, 116, 139);
--color-default-slate-dark: rgb(71, 85, 105);
--color-primary: rgb(66, 165, 245);
--color-notice: rgb(19, 198, 154);
--color-warning: rgb(255, 202, 40);
--color-accept: rgb(121, 134, 203);
--color-danger: rgb(239, 83, 80);
--color-tableBorder: rgb(203, 213, 225);
--color-table-border: rgb(203, 213, 225);
--base-font-size: 0.85rem;
--text-xs: calc(var(--base-font-size) * 0.75);
@@ -42,11 +42,11 @@
@layer base {
body {
@apply text-sm text-defaultSlateDark
@apply text-sm text-default-slate-dark
}
hr {
@apply border-tableBorder
@apply border-table-border
}
a.disabled {
@@ -58,33 +58,41 @@
}
.btn {
@apply justify-center rounded-xs bg-defaultSlate px-2 py-0.5 text-sm font-semibold leading-6 text-white
@apply justify-center rounded-md bg-default-slate px-4 py-2 text-sm font-semibold leading-6 text-white
shadow-xs hover:opacity-80 cursor-pointer
}
.card {
@apply bg-white border border-tableBorder rounded-xs shadow-xs
@apply bg-white border border-table-border rounded-xs shadow-xs
}
/*Form*/
.label-style {
@apply block my-1 font-bold text-defaultSlateDark
@apply block my-1 font-bold text-default-slate-dark
}
.select-style {
@apply block w-full h-8 px-3 py-1.5 border border-defaultSlate/50 rounded-xs
@apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs
}
.input-style {
@apply block w-full h-8 px-3 py-1.5 border border-defaultSlate/50 rounded-xs
@apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs
}
.textarea-style {
@apply block w-full pl-4 flex-1 py-1.5 ring-1 ring-inset ring-defaultSlate/50 rounded-xs
@apply block w-full pl-4 flex-1 py-1.5 ring-1 ring-inset ring-default-slate/50 rounded-xs
}
}
@layer utilities {
.header {
@apply p-4 text-lg font-bold h-16 flex justify-between;
}
.side-bar {
@apply w-64 px-4 text-lg font-bold divide-y divide-default-slate-dark;
}
.page-title {
@apply text-xl font-bold;
}
@@ -94,7 +102,7 @@
}
.form-title {
@apply text-center text-3xl font-bold tracking-tight text-defaultSlateDark
@apply text-center text-3xl font-bold tracking-tight text-default-slate-dark
}
.field {
@@ -107,15 +115,15 @@
/*Menu*/
.menu-group {
@apply py-2 px-4
@apply flex flex-row py-6 px-4 gap-x-4 justify-between items-center w-full
}
.menu-group-title {
@apply py-1 text-sm text-defaultSlateDark font-medium
.menu-group-icon {
@apply py-1 text-sm text-default-slate-dark font-medium justify-center
}
.menu-group-items {
@apply p-1
.menu-group-name {
@apply p-1 flex-1
}
.menu-group-items-title {
@@ -123,16 +131,16 @@
}
.copyright {
@apply text-defaultSlateDark text-center
@apply text-default-slate-dark text-center
}
/*Pagy*/
.pagy {
@apply flex items-center justify-center space-x-1 font-semibold text-sm text-defaultSlate;
@apply flex items-center justify-center space-x-1 font-semibold text-sm text-default-slate;
}
.pagy a:not(.gap) {
@apply block rounded-xs px-2 py-1 border border-defaultSlate/50;
@apply block rounded-xs px-2 py-1 border border-default-slate/50;
}
.pagy a:not(.gap):hover {
@@ -140,11 +148,11 @@
}
.pagy a:not(.gap):not([href]) {
@apply text-defaultSlate/50 border border-defaultSlate/25 cursor-default
@apply text-default-slate/50 border border-default-slate/25 cursor-default
}
.pagy a:not(.gap).current {
@apply text-white bg-defaultSlate
@apply text-white bg-default-slate
}
.pagy a.gap {
@@ -161,15 +169,15 @@
/*Base Table*/
.base-table {
@apply min-w-full divide-y divide-tableBorder whitespace-nowrap
@apply min-w-full divide-y divide-table-border whitespace-nowrap border border-table-border
}
.base-table th {
@apply bg-default px-2 py-2 text-left font-semibold text-defaultSlateDark lg:table-cell
@apply bg-default px-2 py-2 text-left font-semibold text-default-slate-dark lg:table-cell
}
.base-table td {
@apply border-t border-tableBorder px-2 py-1 text-defaultSlate lg:table-cell whitespace-nowrap
@apply border-t border-table-border px-2 py-1 text-default-slate lg:table-cell whitespace-nowrap
}
}