인증키 요청 조회, 인증키 상세 조회 디자인 반영
This commit is contained in:
현성필
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: 13 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
@@ -7,25 +7,6 @@
|
||||
@include card;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Card hover effect
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: #3BA4ED;
|
||||
transform: rotate(45deg);
|
||||
transition: $transition-slow;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
animation: shimmer 0.6s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// API showcase cards
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
//background-color: #C3DFEA;
|
||||
background-color: #E5F8FF;
|
||||
background-color: #ffffff;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
z-index: 1000;
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
@import 'components/buttons';
|
||||
@import 'components/badges';
|
||||
@import 'components/cards';
|
||||
@import 'components/apikey-common';
|
||||
@import 'components/forms';
|
||||
@import 'components/modals';
|
||||
@import 'components/navigation';
|
||||
@@ -47,6 +48,7 @@
|
||||
@import 'pages/mypage';
|
||||
@import 'pages/apikey-register';
|
||||
@import 'pages/apikey-detail';
|
||||
@import 'pages/apikey-list';
|
||||
@import 'pages/notice';
|
||||
@import 'pages/inquiry';
|
||||
@import 'pages/org-register';
|
||||
|
||||
@@ -3,17 +3,16 @@
|
||||
// ====================================
|
||||
// API Key Detail Pages Styles
|
||||
// For appRequestDetail.html and credentialDetail.html
|
||||
// Uses common styles from components/_apikey-common.scss
|
||||
// ====================================
|
||||
|
||||
// Container Styles
|
||||
// Container Styles - extends common
|
||||
.apikey-detail-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: $spacing-4xl;
|
||||
padding-top: 0;
|
||||
@extend .apikey-container;
|
||||
padding: $spacing-2xl $spacing-lg;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-md;
|
||||
padding: $spacing-lg $spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,12 +39,9 @@
|
||||
margin-bottom: $spacing-4xl;
|
||||
}
|
||||
|
||||
// Status Badge - extends common with light style
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
border-radius: $border-radius-full;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: $font-size-sm;
|
||||
@extend .apikey-status-badge;
|
||||
|
||||
&.badge-pending {
|
||||
background-color: #FFF3CD;
|
||||
@@ -63,17 +59,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Detail Section
|
||||
// Detail Section - extends common
|
||||
.detail-section {
|
||||
background: $white;
|
||||
border-radius: $border-radius-lg;
|
||||
padding: $spacing-4xl;
|
||||
margin-bottom: $spacing-lg;
|
||||
box-shadow: $shadow-md;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-xl;
|
||||
}
|
||||
@extend .apikey-detail-section;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -82,28 +70,15 @@
|
||||
color: $text-dark;
|
||||
margin-bottom: $spacing-lg;
|
||||
padding-bottom: $spacing-md;
|
||||
//border-bottom: 2px solid $border-gray;
|
||||
}
|
||||
|
||||
// Detail Grid
|
||||
// Detail Grid - extends common
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: $spacing-lg;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@extend .apikey-detail-grid;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-sm;
|
||||
|
||||
&.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
@extend .apikey-detail-item;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
@@ -118,106 +93,46 @@
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
// App Icon
|
||||
// App Icon - extends common
|
||||
.app-icon-display {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
@extend .apikey-icon-display;
|
||||
}
|
||||
|
||||
.app-icon-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: $border-radius-lg;
|
||||
border: 2px solid $border-gray;
|
||||
@extend .apikey-icon-image;
|
||||
}
|
||||
|
||||
.app-icon-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $gray-bg;
|
||||
border-radius: $border-radius-lg;
|
||||
border: 2px dashed $text-light;
|
||||
font-size: 48px;
|
||||
@extend .apikey-icon-placeholder;
|
||||
}
|
||||
|
||||
// IP List
|
||||
// IP List - extends common
|
||||
.ip-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacing-sm;
|
||||
@extend .apikey-ip-list;
|
||||
}
|
||||
|
||||
.ip-tag {
|
||||
display: inline-block;
|
||||
padding: $spacing-xs $spacing-md;
|
||||
background-color: $light-bg;
|
||||
color: $secondary-blue;
|
||||
border-radius: $border-radius-sm;
|
||||
font-size: $font-size-sm;
|
||||
font-family: $font-family-mono;
|
||||
@extend .apikey-ip-tag;
|
||||
}
|
||||
|
||||
// Credential Code
|
||||
// Credential Code - extends common
|
||||
.credential-code {
|
||||
display: inline-block;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
background-color: $gray-bg;
|
||||
border: 1px solid $border-gray;
|
||||
border-radius: $border-radius-sm;
|
||||
font-family: $font-family-mono;
|
||||
font-size: $font-size-sm;
|
||||
color: $secondary-blue;
|
||||
@extend .apikey-credential-code;
|
||||
}
|
||||
|
||||
// Secret Box
|
||||
// Secret Box - extends common
|
||||
.secret-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-md;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
@extend .apikey-secret-box;
|
||||
}
|
||||
|
||||
// Note: .btn-copy styles now in components/_buttons.scss
|
||||
// Keeping this for page-specific override if needed
|
||||
// Copy Button - extends common
|
||||
.btn-copy {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
align-self: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
@extend .apikey-btn-copy;
|
||||
}
|
||||
|
||||
// Status Indicator
|
||||
// Status Indicator - extends common
|
||||
.status-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
padding: $spacing-xs $spacing-md;
|
||||
border-radius: $border-radius-xl;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
|
||||
&.status-active {
|
||||
background-color: #D4EDDA;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
&.status-inactive {
|
||||
background-color: #F8D7DA;
|
||||
color: #721C24;
|
||||
}
|
||||
@extend .apikey-status-indicator;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
@@ -227,31 +142,20 @@
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
// API Detail List
|
||||
// API Detail List - extends common
|
||||
.api-detail-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-sm;
|
||||
@extend .apikey-api-list;
|
||||
}
|
||||
|
||||
.api-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-md;
|
||||
padding: $spacing-md $spacing-lg;
|
||||
background: $white;
|
||||
border: 1px solid $border-gray;
|
||||
border-radius: $border-radius-md;
|
||||
transition: all 0.2s;
|
||||
@extend .apikey-api-item;
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-blue;
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-md;
|
||||
gap: $spacing-sm;
|
||||
.api-name {
|
||||
flex: 1;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-medium;
|
||||
color: $text-dark;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -291,14 +195,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.api-list-item .api-name {
|
||||
flex: 1;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-medium;
|
||||
color: $text-dark;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.api-status {
|
||||
padding: $spacing-xs $spacing-md;
|
||||
border-radius: $border-radius-lg;
|
||||
@@ -350,36 +246,16 @@
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
// Empty State
|
||||
// Empty State - extends common
|
||||
.empty-state {
|
||||
@extend .apikey-empty-state;
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 48px $spacing-lg;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $font-size-base;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
|
||||
// Action Buttons
|
||||
// Action Buttons - extends common
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: $spacing-md;
|
||||
flex-wrap: wrap;
|
||||
margin-top: $spacing-4xl;
|
||||
padding-top: $spacing-4xl;
|
||||
border-top: 1px solid $border-gray;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
}
|
||||
@extend .apikey-form-actions;
|
||||
}
|
||||
|
||||
// Note: Button styles now in components/_buttons.scss
|
||||
@@ -391,3 +267,353 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================================
|
||||
// App Info Card (Figma Design)
|
||||
// For credentialDetail.html and appRequestDetail.html
|
||||
// ====================================
|
||||
|
||||
.app-info-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-xl;
|
||||
padding: 0;
|
||||
padding-top: 27px;
|
||||
margin-bottom: $spacing-4xl;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: $spacing-lg 0;
|
||||
gap: $spacing-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-icon {
|
||||
flex-shrink: 0;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: $border-radius-xl;
|
||||
overflow: hidden;
|
||||
background: $gray-bg;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 87px;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.app-icon-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.app-icon-placeholder {
|
||||
color: $text-light;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
.app-status-badge {
|
||||
display: inline-block;
|
||||
padding: $spacing-xs $spacing-lg;
|
||||
border-radius: $border-radius-full;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
width: fit-content;
|
||||
|
||||
&.status-approved {
|
||||
background-color: #0049b4;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.status-pending {
|
||||
background-color: #FFF3CD;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
&.status-inactive {
|
||||
background-color: $border-gray;
|
||||
color: $text-gray;
|
||||
}
|
||||
|
||||
&.status-rejected {
|
||||
background-color: #F8D7DA;
|
||||
color: #721C24;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-name {
|
||||
font-size: 24px;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-dark;
|
||||
margin: 0;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-description {
|
||||
font-size: 18px;
|
||||
color: #515151;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================================
|
||||
// API Key Info Section
|
||||
// For credential details display
|
||||
// Figma Design: node 985-1365
|
||||
// ====================================
|
||||
|
||||
.apikey-info-section {
|
||||
background: #F6F9FB;
|
||||
border-radius: $border-radius-lg;
|
||||
padding: $spacing-3xl $spacing-2xl;
|
||||
margin-bottom: $spacing-2xl;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xl;
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.info-row-vertical {
|
||||
align-items: flex-start;
|
||||
|
||||
.info-value {
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-label {
|
||||
flex-shrink: 0;
|
||||
width: 140px;
|
||||
font-size: 20px;
|
||||
font-weight: $font-weight-bold;
|
||||
color: #212529;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 100%;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
font-size: $font-size-base;
|
||||
color: $text-dark;
|
||||
word-break: break-word;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Info Value Box Styles (Figma)
|
||||
.info-value-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
padding: 0 $spacing-lg;
|
||||
background: #DDDDDD;
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: 20px;
|
||||
color: #515151;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
height: 50px;
|
||||
font-size: $font-size-base;
|
||||
padding: 0 $spacing-md;
|
||||
}
|
||||
|
||||
&.with-copy {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Client ID Row with Copy Button
|
||||
.info-row-with-action {
|
||||
.info-value {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-copy-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacing-xs;
|
||||
height: 60px;
|
||||
width: 158px;
|
||||
padding: 0 $spacing-lg;
|
||||
background: #A4D6EA;
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: 20px;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: darken(#A4D6EA, 10%);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
height: 50px;
|
||||
font-size: $font-size-base;
|
||||
padding: 0 $spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
// Client Secret View Button
|
||||
.btn-view-secret {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacing-sm;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: #3BA4ED;
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: 20px;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: darken(#3BA4ED, 10%);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
max-width: 100%;
|
||||
height: 50px;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
// API List Box (White background)
|
||||
.api-list-box {
|
||||
width: 100%;
|
||||
background: $white;
|
||||
border: 1px solid #DADADA;
|
||||
border-radius: $border-radius-lg;
|
||||
padding: $spacing-lg;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
max-width: 100%;
|
||||
padding: $spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
// API List Item (Figma style)
|
||||
.api-list-item-figma {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $spacing-md 0;
|
||||
border-bottom: 1px solid #DADADA;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.api-item-name {
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
.api-item-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 100px;
|
||||
height: 30px;
|
||||
padding: 0 $spacing-lg;
|
||||
background: #ECEFF4;
|
||||
border-radius: $border-radius-full;
|
||||
font-size: $font-size-base;
|
||||
color: #515151;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
min-width: 80px;
|
||||
font-size: $font-size-sm;
|
||||
padding: 0 $spacing-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================================
|
||||
// Form Actions Center
|
||||
// ====================================
|
||||
|
||||
.form-actions-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: $spacing-md;
|
||||
margin-top: $spacing-2xl;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// API Key Registration Wizard Styles
|
||||
// Reference: apps/mypage/apiKeyRegisterStep1.html, Step2, Step3
|
||||
// Uses common styles from components/_apikey-common.scss
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// =============================================================================
|
||||
// STEP 1: App Information Input (New Figma Design)
|
||||
// =============================================================================
|
||||
|
||||
// Title Bar
|
||||
// Title Bar - extends common with flex layout
|
||||
.register-title-bar {
|
||||
background-color: #f6f9fb;
|
||||
border-radius: $border-radius-lg;
|
||||
@extend .apikey-title-bar;
|
||||
padding: 18px 45px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 16px;
|
||||
@@ -116,10 +115,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Form Container (Step 1)
|
||||
// Form Container (Step 1) - extends common
|
||||
.register-form-container {
|
||||
background-color: #f6f9fb;
|
||||
border-radius: $border-radius-lg;
|
||||
@extend .apikey-section-box;
|
||||
padding: 50px 45px;
|
||||
|
||||
@include respond-to('md') {
|
||||
@@ -483,39 +481,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Submit Button - Step 1 Style
|
||||
// Submit Button - Step 1 Style - extends common
|
||||
.btn-submit {
|
||||
width: 220px;
|
||||
height: 60px;
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: 18px;
|
||||
font-weight: $font-weight-bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
@extend .apikey-action-btn;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// STEP 2 & STEP 3: Original Styles
|
||||
// =============================================================================
|
||||
|
||||
// Container with sidebar layout (Step 2)
|
||||
// Container with sidebar layout (Step 2) - extends common
|
||||
.apikey-register-container {
|
||||
max-width: $container-max-width;
|
||||
margin: 0 auto;
|
||||
@extend .apikey-container;
|
||||
padding: $spacing-2xl $spacing-lg;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
@@ -1167,29 +1144,10 @@ input[type="checkbox"]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
// Empty state for API selection
|
||||
// Empty state for API selection - extends common
|
||||
.empty-api-state {
|
||||
@extend .apikey-empty-state;
|
||||
padding: $spacing-3xl;
|
||||
text-align: center;
|
||||
color: $text-gray;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 60px;
|
||||
margin-bottom: $spacing-lg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-dark;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $font-size-base;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading state for API selection
|
||||
@@ -1563,17 +1521,16 @@ input[type="checkbox"]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
// Form Actions
|
||||
// Form Actions - extends common
|
||||
.form-actions {
|
||||
display: flex;
|
||||
@extend .apikey-form-actions;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: $spacing-2xl;
|
||||
padding: 0 $spacing-lg $spacing-lg;
|
||||
gap: $spacing-md;
|
||||
margin-top: $spacing-2xl;
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
padding: 0 $spacing-md $spacing-md;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
@@ -1602,16 +1559,21 @@ input[type="checkbox"]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
// Result Page (Step 3)
|
||||
// Result Page (Step 3) - extends common section box
|
||||
.register-result {
|
||||
@extend .apikey-section-box;
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
height: 1045px;
|
||||
padding-top: 262px;
|
||||
|
||||
&.success {
|
||||
.result-icon {
|
||||
background: rgba($accent-green, 0.1);
|
||||
color: $accent-green;
|
||||
|
||||
img {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1626,9 +1588,6 @@ input[type="checkbox"]:checked + .custom-checkbox {
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
.result-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: $border-radius-circle;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1641,16 +1600,15 @@ input[type="checkbox"]:checked + .custom-checkbox {
|
||||
margin-bottom: $spacing-2xl;
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-2xl;
|
||||
font-size: $font-size-xl;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-dark;
|
||||
color: $primary-blue;
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.result-description {
|
||||
font-size: $font-size-base;
|
||||
color: $text-gray;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -241,21 +241,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Animation for form elements
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.partnership-card {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
// Focus states for better accessibility
|
||||
.partnership-card {
|
||||
|
||||
Reference in New Issue
Block a user