api 마켓 스타일 적용
This commit is contained in:
현성필
+1007
-560
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 959 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 910 B |
@@ -12,5 +12,4 @@ html {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
//transform: translateY(-5px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
}
|
||||
@@ -141,4 +141,4 @@
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,11 +28,6 @@ $gray-800: #1F2937; // Dark gray
|
||||
$gray-900: #111827; // Darker gray
|
||||
|
||||
|
||||
// Gradients
|
||||
$gradient-primary: linear-gradient(135deg, $primary-blue 0%, $secondary-blue 100%);
|
||||
$gradient-accent: linear-gradient(135deg, $accent-cyan 0%, $primary-blue 100%);
|
||||
$gradient-warm: linear-gradient(135deg, $accent-yellow 0%, $accent-orange 100%);
|
||||
|
||||
// Shadows
|
||||
$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
$shadow-md: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
|
||||
@@ -313,12 +313,6 @@
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
transparent 30%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
transparent 70%
|
||||
);
|
||||
transform: rotate(45deg);
|
||||
transition: transform 0.6s ease;
|
||||
transform: translateX(-200%);
|
||||
@@ -327,4 +321,4 @@
|
||||
&:hover::before {
|
||||
transform: translateX(200%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,19 +76,6 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
// Text utilities
|
||||
.text-gradient {
|
||||
@include gradient-text($gradient-primary);
|
||||
}
|
||||
|
||||
.text-gradient-accent {
|
||||
@include gradient-text($gradient-accent);
|
||||
}
|
||||
|
||||
.text-gradient-warm {
|
||||
@include gradient-text($gradient-warm);
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: $primary-blue;
|
||||
}
|
||||
@@ -216,4 +203,4 @@ hr {
|
||||
border: none;
|
||||
border-top: 1px solid $border-gray;
|
||||
margin: $spacing-xl 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -280,16 +280,9 @@
|
||||
}
|
||||
|
||||
.bg-gradient-primary {
|
||||
background: $gradient-primary;
|
||||
|
||||
}
|
||||
|
||||
.bg-gradient-accent {
|
||||
background: $gradient-accent;
|
||||
}
|
||||
|
||||
.bg-gradient-warm {
|
||||
background: $gradient-warm;
|
||||
}
|
||||
|
||||
// Border utilities
|
||||
.border {
|
||||
@@ -494,4 +487,4 @@
|
||||
|
||||
.transition-none {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,9 +23,6 @@
|
||||
.faq-question {
|
||||
color: $primary-blue;
|
||||
|
||||
//&::before {
|
||||
// background: $gradient-primary;
|
||||
//}
|
||||
|
||||
.faq-icon {
|
||||
transform: rotate(180deg);
|
||||
@@ -240,7 +237,7 @@
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-dark;
|
||||
margin-bottom: $spacing-md;
|
||||
background: $gradient-primary;
|
||||
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
||||
@@ -46,8 +46,8 @@
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
background: $secondary-blue;
|
||||
color: #6e7780;
|
||||
background: #E5E7EB;
|
||||
color: #5F666C;
|
||||
|
||||
&:hover {
|
||||
background: $light-bg;
|
||||
@@ -56,7 +56,6 @@
|
||||
}
|
||||
|
||||
&-accent {
|
||||
background: $gradient-accent;
|
||||
color: $white;
|
||||
box-shadow: $shadow-md;
|
||||
|
||||
@@ -67,7 +66,6 @@
|
||||
}
|
||||
|
||||
&-warm {
|
||||
background: $gradient-warm;
|
||||
color: $white;
|
||||
box-shadow: $shadow-md;
|
||||
|
||||
@@ -200,7 +198,7 @@
|
||||
right: $spacing-xl;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: $gradient-primary;
|
||||
|
||||
border: none;
|
||||
border-radius: $border-radius-circle;
|
||||
color: $white;
|
||||
@@ -306,7 +304,7 @@
|
||||
// Primary action buttons (new, submit, confirm)
|
||||
.action-btn-new,
|
||||
.action-btn-primary {
|
||||
background: $gradient-primary;
|
||||
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
@@ -383,7 +381,7 @@
|
||||
}
|
||||
|
||||
&.btn-edit {
|
||||
background: $gradient-primary;
|
||||
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
@@ -430,7 +428,7 @@
|
||||
|
||||
.btn-action {
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
background: $gradient-primary;
|
||||
|
||||
color: $white;
|
||||
border: none;
|
||||
border-radius: $border-radius-md;
|
||||
|
||||
@@ -16,12 +16,7 @@
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
transparent 30%,
|
||||
rgba($primary-blue, 0.03) 50%,
|
||||
transparent 70%
|
||||
);
|
||||
background: #3BA4ED;
|
||||
transform: rotate(45deg);
|
||||
transition: $transition-slow;
|
||||
opacity: 0;
|
||||
@@ -41,19 +36,17 @@
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-blue;
|
||||
transform: translateY(-8px);
|
||||
//transform: translateY(-8px);
|
||||
}
|
||||
|
||||
// Popular variant
|
||||
&-popular {
|
||||
border-color: $accent-yellow;
|
||||
background: linear-gradient(180deg, rgba($accent-yellow, 0.05) 0%, $white 100%);
|
||||
}
|
||||
|
||||
// New variant
|
||||
&-new {
|
||||
border-color: $accent-green;
|
||||
background: linear-gradient(180deg, rgba($accent-green, 0.05) 0%, $white 100%);
|
||||
}
|
||||
|
||||
// API badge
|
||||
@@ -95,7 +88,7 @@
|
||||
|
||||
&:hover .api-icon {
|
||||
transform: scale(1.1);
|
||||
background: $gradient-primary;
|
||||
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@@ -160,7 +153,7 @@
|
||||
margin: 0 auto $spacing-lg;
|
||||
@include flex-center;
|
||||
font-size: $font-size-xl;
|
||||
background: $gradient-primary;
|
||||
|
||||
color: $white;
|
||||
border-radius: $border-radius-xl;
|
||||
}
|
||||
@@ -213,7 +206,7 @@
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
@include flex-center;
|
||||
background: $gradient-primary;
|
||||
|
||||
color: $white;
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: $font-size-xl;
|
||||
@@ -306,7 +299,7 @@
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: $spacing-xs $spacing-md;
|
||||
background: $gradient-primary;
|
||||
|
||||
color: $white;
|
||||
border-radius: $border-radius-full;
|
||||
font-size: $font-size-xs;
|
||||
@@ -341,7 +334,6 @@
|
||||
.amount {
|
||||
font-size: $font-size-4xl;
|
||||
font-weight: $font-weight-extrabold;
|
||||
@include gradient-text($gradient-primary);
|
||||
}
|
||||
|
||||
.period {
|
||||
@@ -383,4 +375,4 @@
|
||||
.pricing-cta {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,6 @@
|
||||
.final-cta {
|
||||
position: relative;
|
||||
padding: $spacing-6xl * 1.5 0;
|
||||
background: $gradient-primary;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -283,7 +283,7 @@ select.form-control {
|
||||
// File upload button (label)
|
||||
.file-upload-btn {
|
||||
padding: $spacing-md $spacing-lg;
|
||||
background: $gradient-primary;
|
||||
|
||||
color: $white;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: $font-size-sm;
|
||||
@@ -375,4 +375,4 @@ select.form-control {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
|
||||
.profile-header {
|
||||
padding: $spacing-lg;
|
||||
background: $gradient-primary;
|
||||
|
||||
color: $white;
|
||||
text-align: center;
|
||||
|
||||
@@ -222,7 +222,7 @@
|
||||
// ===========================
|
||||
.drawer-user-info {
|
||||
padding: $spacing-lg;
|
||||
background: $gradient-primary;
|
||||
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
.drawer-profile {
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// Modal styles
|
||||
// Modal styles - KJBank Design (Figma node 985:1912)
|
||||
// Close button positioned outside the modal (top-right)
|
||||
// Gradient header with light blue to white
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// Modal backdrop
|
||||
@@ -9,7 +11,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: $z-index-modal-backdrop;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@@ -26,53 +28,121 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: $z-index-modal;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacing-lg;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: $transition-base;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
pointer-events: none;
|
||||
overflow-y: auto;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
|
||||
.modal-dialog {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal container (includes close button outside)
|
||||
.modal-container {
|
||||
position: relative;
|
||||
max-width: 820px;
|
||||
width: 100%;
|
||||
|
||||
|
||||
// Size variations
|
||||
&.modal-sm {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
&.modal-lg {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
&.modal-xl {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Close button - positioned outside modal (top-right)
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(100%, -100%);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #0049b4;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: $z-index-modal;
|
||||
transition: $transition-base;
|
||||
box-shadow: $shadow-lg;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal dialog
|
||||
.modal-dialog {
|
||||
margin-top: 150px;
|
||||
position: relative;
|
||||
background: $white;
|
||||
border-radius: $border-radius-xl;
|
||||
box-shadow: $shadow-xl;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
border-radius: $border-radius-lg;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
max-width: 700px;
|
||||
width: calc(100% - 2 * $spacing-lg);
|
||||
max-height: 85vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: scale(0.95);
|
||||
transition: $transition-base;
|
||||
|
||||
// Size variations
|
||||
&.modal-sm {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
&.modal-lg {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
&.modal-xl {
|
||||
max-width: 1200px;
|
||||
}
|
||||
transition: transform 0.3s ease;
|
||||
z-index: $z-index-modal;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&.modal-fullscreen {
|
||||
max-width: 100%;
|
||||
@@ -83,75 +153,146 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Modal header
|
||||
// Modal header with gradient background
|
||||
.modal-header {
|
||||
padding: $spacing-lg;
|
||||
border-bottom: 1px solid $border-gray;
|
||||
padding: 30px 50px 20px;
|
||||
background: #C7EAFF;
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top-left-radius: $border-radius-lg;
|
||||
border-top-right-radius: $border-radius-lg;
|
||||
|
||||
.modal-title {
|
||||
font-size: $font-size-xl;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-dark;
|
||||
color: #212529;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@include flex-center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: $border-radius-md;
|
||||
color: $text-gray;
|
||||
font-size: $font-size-xl;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 20px 24px 16px;
|
||||
|
||||
&:hover {
|
||||
background: $gray-bg;
|
||||
color: $text-dark;
|
||||
.modal-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal body
|
||||
.modal-body {
|
||||
padding: $spacing-lg;
|
||||
padding: 30px 50px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
color: $text-dark;
|
||||
color: #212529;
|
||||
font-size: 20px;
|
||||
line-height: $line-height-normal;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
||||
& + p {
|
||||
margin-top: $spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
// Center text variant
|
||||
&.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 20px 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal footer
|
||||
// Modal footer with buttons
|
||||
.modal-footer {
|
||||
padding: $spacing-lg;
|
||||
border-top: 1px solid $border-gray;
|
||||
padding: 20px 50px 40px;
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
border-top: none;
|
||||
|
||||
&.modal-footer-center {
|
||||
justify-content: center;
|
||||
&.modal-footer-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&.modal-footer-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// Cancel button (Figma node 985:1990)
|
||||
.btn-modal-cancel {
|
||||
min-width: 150px;
|
||||
height: 50px;
|
||||
padding: 10px 40px;
|
||||
background: $white;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-bold;
|
||||
color: #5f666c;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
border-color: #c0c0c0;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
// Confirm button (Figma node 985:1989)
|
||||
.btn-modal-confirm {
|
||||
min-width: 150px;
|
||||
height: 50px;
|
||||
padding: 10px 40px;
|
||||
background: #0049b4;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
background: #003a91;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 16px 24px 24px;
|
||||
flex-direction: column;
|
||||
|
||||
.btn-modal-cancel,
|
||||
.btn-modal-confirm {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alert modal
|
||||
.modal-alert {
|
||||
.modal-dialog {
|
||||
max-width: 400px;
|
||||
.modal-container {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
text-align: center;
|
||||
padding: $spacing-xl;
|
||||
padding: $spacing-xl 50px;
|
||||
|
||||
.alert-icon {
|
||||
width: 64px;
|
||||
@@ -191,6 +332,7 @@
|
||||
|
||||
.alert-message {
|
||||
color: $text-gray;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -334,7 +334,7 @@
|
||||
|
||||
//button {
|
||||
// padding: $spacing-sm $spacing-lg;
|
||||
// background: $gradient-primary;
|
||||
//
|
||||
// color: $white;
|
||||
// border: none;
|
||||
// border-radius: $border-radius-md;
|
||||
|
||||
@@ -63,16 +63,7 @@
|
||||
background: $light-bg;
|
||||
}
|
||||
|
||||
&-gradient {
|
||||
background: linear-gradient(180deg, $white 0%, $light-bg 100%);
|
||||
}
|
||||
|
||||
&-gradient-reverse {
|
||||
background: linear-gradient(180deg, $light-bg 0%, $white 100%);
|
||||
}
|
||||
|
||||
&-primary {
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@@ -115,7 +106,6 @@
|
||||
}
|
||||
|
||||
.title-highlight {
|
||||
@include gradient-text($gradient-accent);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -155,4 +145,4 @@
|
||||
.inner-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,11 +22,6 @@
|
||||
--light-bg: #EFF6FF;
|
||||
--border-gray: #E2E8F0;
|
||||
|
||||
// Gradients
|
||||
--gradient-primary: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
|
||||
--gradient-accent: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
|
||||
--gradient-warm: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
|
||||
|
||||
// Shadows
|
||||
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
@@ -429,7 +424,6 @@
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 14px 20px;
|
||||
background: var(--gradient-primary);
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
@@ -706,7 +700,6 @@
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
background: var(--gradient-primary);
|
||||
color: var(--white);
|
||||
padding: 12px 24px;
|
||||
border-radius: 50px;
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
@import 'components/header-auth';
|
||||
@import 'components/tables';
|
||||
@import 'components/accordion';
|
||||
@import 'components/page-title-banner';
|
||||
|
||||
// 5. Page-specific styles
|
||||
@import 'pages/index';
|
||||
|
||||
@@ -8,18 +8,18 @@
|
||||
min-height: 100vh;
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// Sidebar Navigation
|
||||
.api-market-sidebar {
|
||||
width: 283px;
|
||||
background-color: #FDFDFD;
|
||||
background-color: #F8FBFD;
|
||||
border-radius: 20px;
|
||||
padding: $spacing-2xl $spacing-lg;
|
||||
position: sticky;
|
||||
top: $spacing-lg;
|
||||
height: calc(100vh - 32px);
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
margin: $spacing-md;
|
||||
|
||||
@@ -69,8 +69,8 @@
|
||||
|
||||
.menu-title {
|
||||
padding: 16px 10px;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-regular;
|
||||
color: $text-dark;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
@@ -84,20 +84,8 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $secondary-blue;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 6px 0 6px 8px;
|
||||
border-color: transparent transparent transparent $text-dark;
|
||||
}
|
||||
font-weight: $font-weight-bold;
|
||||
color: $primary-blue;
|
||||
}
|
||||
|
||||
.api-count {
|
||||
@@ -121,11 +109,60 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Level 2: API List
|
||||
// Accordion Section
|
||||
.accordion-section {
|
||||
.menu-title.accordion-trigger {
|
||||
.menu-title-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.accordion-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
color: $text-gray;
|
||||
transition: $transition-base;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .accordion-icon i {
|
||||
color: $primary-blue;
|
||||
}
|
||||
|
||||
&.expanded .accordion-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&.active .accordion-icon i {
|
||||
color: $primary-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Level 2: API List (Accordion Content)
|
||||
.api-list {
|
||||
padding-left: $spacing-md;
|
||||
margin-top: $spacing-xs;
|
||||
margin-bottom: $spacing-sm;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Accordion animation
|
||||
&.accordion-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
|
||||
|
||||
&.expanded {
|
||||
max-height: 500px; // Enough height for content
|
||||
margin-top: $spacing-xs;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.api-item {
|
||||
@@ -179,7 +216,9 @@
|
||||
// Main Content Area
|
||||
.api-market-content {
|
||||
flex: 1;
|
||||
padding: $spacing-2xl $spacing-3xl;
|
||||
padding-top: $spacing-5xl;
|
||||
padding-left: $spacing-sm;
|
||||
padding-right: $spacing-sm;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -187,6 +226,18 @@
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-lg $spacing-md;
|
||||
}
|
||||
|
||||
// Result Count (inside header)
|
||||
.api-result-count {
|
||||
font-size: $font-size-lg;
|
||||
color: $black;
|
||||
white-space: nowrap;
|
||||
|
||||
strong {
|
||||
color: $primary-blue;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile Menu Toggle
|
||||
@@ -197,7 +248,7 @@
|
||||
right: $spacing-lg;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: $gradient-primary;
|
||||
|
||||
border-radius: $border-radius-circle;
|
||||
border: none;
|
||||
color: $white;
|
||||
@@ -228,7 +279,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: $spacing-2xl;
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
@@ -320,17 +371,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Result Count
|
||||
.api-result-count {
|
||||
font-size: $font-size-base;
|
||||
color: $text-gray;
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
strong {
|
||||
color: $primary-blue;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
// Card Grid
|
||||
.api-card-grid {
|
||||
@@ -555,12 +596,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
// API Overview Card
|
||||
// API Overview Card (Flat Style)
|
||||
.api-overview-card {
|
||||
background: $white;
|
||||
border-radius: $border-radius-lg;
|
||||
padding: $spacing-xl;
|
||||
box-shadow: $shadow-sm;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
padding-bottom: $spacing-xl;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-lg;
|
||||
@@ -578,12 +619,14 @@
|
||||
}
|
||||
|
||||
.api-method-badge {
|
||||
background: $primary-blue;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
padding: 8px 16px;
|
||||
background: $gradient-primary;
|
||||
height: 100%;
|
||||
|
||||
color: $white;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
@@ -637,16 +680,17 @@
|
||||
gap: $spacing-lg;
|
||||
}
|
||||
|
||||
// API Detail Card
|
||||
// API Detail Card (Flat Style)
|
||||
.api-detail-card {
|
||||
background: $white;
|
||||
border-radius: $border-radius-lg;
|
||||
padding: $spacing-xl;
|
||||
box-shadow: $shadow-sm;
|
||||
transition: $transition-base;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
padding-bottom: $spacing-xl;
|
||||
border-bottom: 1px solid $border-gray;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $shadow-md;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@@ -654,8 +698,8 @@
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-dark;
|
||||
margin-bottom: $spacing-md;
|
||||
padding-bottom: $spacing-sm;
|
||||
border-bottom: 2px solid $light-bg;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1464,13 +1464,6 @@
|
||||
.stats-divider {
|
||||
width: 1px;
|
||||
height: 240px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.2) 20%,
|
||||
rgba(255, 255, 255, 0.2) 80%,
|
||||
transparent 100%
|
||||
);
|
||||
margin: 0 60px;
|
||||
flex-shrink: 0;
|
||||
|
||||
|
||||
@@ -31,7 +31,6 @@
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-dark;
|
||||
margin-bottom: $spacing-md;
|
||||
background: $gradient-primary;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
@@ -320,7 +319,6 @@
|
||||
.detail-header {
|
||||
padding: $spacing-3xl $spacing-2xl $spacing-xl;
|
||||
border-bottom: 2px solid $border-gray;
|
||||
background: linear-gradient(180deg, $light-bg 0%, $white 100%);
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-2xl $spacing-lg $spacing-md;
|
||||
@@ -542,7 +540,6 @@
|
||||
}
|
||||
|
||||
&.btn-edit {
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -51,7 +51,6 @@
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
padding: 12px 24px;
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
@@ -121,7 +120,6 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: $gradient-primary;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
transition: transform 0.3s ease;
|
||||
@@ -273,7 +271,6 @@
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
padding: 14px 32px;
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
@@ -340,4 +337,4 @@
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,7 +31,6 @@
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-dark;
|
||||
margin-bottom: $spacing-md;
|
||||
background: $gradient-primary;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
@@ -89,7 +88,6 @@
|
||||
.detail-header {
|
||||
padding: $spacing-3xl $spacing-2xl $spacing-xl;
|
||||
border-bottom: 2px solid $border-gray;
|
||||
background: linear-gradient(180deg, $light-bg 0%, $white 100%);
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-2xl $spacing-lg $spacing-md;
|
||||
|
||||
@@ -4,63 +4,6 @@
|
||||
@import '../abstracts/variables';
|
||||
@import '../abstracts/mixins';
|
||||
|
||||
// Page Title Banner
|
||||
.page-title-banner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
background: linear-gradient(to right, #E8F4FD 0%, #F0F8FF 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h100v100H0z' fill='%23ffffff' opacity='0.03'/%3E%3C/svg%3E");
|
||||
background-size: 50px 50px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.title-image {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 220px;
|
||||
width: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
position: relative;
|
||||
font-size: $font-size-3xl;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-dark;
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
height: 120px;
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
.title-image {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main Registration Container
|
||||
.org-register-page {
|
||||
min-height: 100vh;
|
||||
@@ -169,7 +112,6 @@
|
||||
|
||||
// Info Notice
|
||||
.org-info-notice {
|
||||
background: linear-gradient(135deg, #EFF6FF 0%, #F0F9FF 100%);
|
||||
padding: $spacing-lg;
|
||||
border-radius: $border-radius-md;
|
||||
margin-bottom: $spacing-xl;
|
||||
@@ -421,12 +363,8 @@
|
||||
}
|
||||
|
||||
.org-btn-primary {
|
||||
background: linear-gradient(135deg, $primary-blue 0%, $secondary-blue 100%);
|
||||
color: $white;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: linear-gradient(135deg, $secondary-blue 0%, $primary-blue 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.org-btn-secondary {
|
||||
@@ -511,7 +449,6 @@
|
||||
.org-file-notice {
|
||||
margin-top: $spacing-md;
|
||||
padding: $spacing-md;
|
||||
background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
|
||||
border-radius: $border-radius-sm;
|
||||
|
||||
p {
|
||||
|
||||
@@ -106,27 +106,11 @@
|
||||
}
|
||||
|
||||
.signup-btn-individual {
|
||||
background: linear-gradient(90deg, #0049B4 0%, #0049B4 100%);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, darken(#0049B4, 5%) 0%, darken(#0049B4, 5%) 100%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(90deg, darken(#0049B4, 10%) 0%, darken(#0049B4, 10%) 100%);
|
||||
}
|
||||
background: #0049B4;
|
||||
}
|
||||
|
||||
.signup-btn-organization {
|
||||
background: linear-gradient(90deg, #00A1D7 0%, #00A1D7 100%);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, darken(#00A1D7, 5%) 0%, darken(#00A1D7, 5%) 100%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(90deg, darken(#00A1D7, 10%) 0%, darken(#00A1D7, 10%) 100%);
|
||||
}
|
||||
background: #00A1D7;
|
||||
}
|
||||
|
||||
.signup-navigation {
|
||||
|
||||
@@ -32,7 +32,6 @@
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-dark;
|
||||
margin-bottom: $spacing-md;
|
||||
background: $gradient-primary;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
||||
@@ -328,7 +328,6 @@
|
||||
|
||||
// Profile Card
|
||||
.user-profile-card {
|
||||
background: linear-gradient(135deg, $primary-blue 0%, $secondary-blue 100%);
|
||||
color: $white;
|
||||
margin-bottom: $spacing-xl;
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user