mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +08:00
90 lines
2.7 KiB
SCSS
90 lines
2.7 KiB
SCSS
$color-white: #fff;
|
|
$color-black: #000;
|
|
$color-blue: #1D35B4;
|
|
$color-blueberry: #3858E9;
|
|
$color-gray-900: #1E1E1E;
|
|
$color-gray-800: #2F2F2F;
|
|
$color-gray-700: #757575;
|
|
$color-gray-600: #949494;
|
|
$color-gray-500: #BBBBBB;
|
|
$color-gray-400: #CCCCCC;
|
|
$color-gray-300: #EBEBEB;
|
|
$color-gray-200: #E0E0E0;
|
|
$color-gray-100: #F0F0F0;
|
|
$color-gray: #646970;
|
|
$color-text-tertiary: #505050;
|
|
$color-text-text: #070707;
|
|
$color-border: #AEAEAE;
|
|
$color-divider: #F0F0F0;
|
|
$color-error-red: #cc1818;
|
|
$color-warning: #e2a030;
|
|
|
|
$shadow-card: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
|
|
$color-gradient-dark: #001435;
|
|
$gradient-header: linear-gradient(87.03deg, #003087 -0.49%, #001E51 29.22%, $color-gradient-dark 100%);
|
|
|
|
$max-width-onboarding: 1024px;
|
|
$max-width-onboarding-content: 500px;
|
|
$max-width-settings: 938px;
|
|
|
|
$card-vertical-gap: 48px;
|
|
|
|
/* define custom theming options */
|
|
|
|
:root {
|
|
--ppcp-color-app-bg: #{$color-white};
|
|
}
|
|
|
|
#ppcp-settings-container {
|
|
--max-width-settings: #{$max-width-settings};
|
|
--max-width-onboarding: #{$max-width-onboarding};
|
|
--max-width-onboarding-content: #{$max-width-onboarding-content};
|
|
|
|
--max-container-width: var(--max-width-settings);
|
|
|
|
--color-black: #{$color-black};
|
|
--color-white: #{$color-white};
|
|
--color-blueberry: #{$color-blueberry};
|
|
--color-gray-900: #{$color-gray-900};
|
|
--color-gray-800: #{$color-gray-800};
|
|
--color-gray-700: #{$color-gray-700};
|
|
--color-gray-600: #{$color-gray-600};
|
|
--color-gray-500: #{$color-gray-500};
|
|
--color-gray-400: #{$color-gray-400};
|
|
--color-gray-300: #{$color-gray-300};
|
|
--color-gray-200: #{$color-gray-200};
|
|
--color-gray-100: #{$color-gray-100};
|
|
--color-gradient-dark: #{$color-gradient-dark};
|
|
--color-success-background: #DAFFE0;
|
|
--color-success-text: #144722;
|
|
--color-failure-background: #faeded;
|
|
--color-failure-text: #5c0000;
|
|
|
|
--color-preview-background: #FAF8F5;
|
|
--color-separators: #{$color-gray-200};
|
|
--color-text-title: #{$color-gray-900};
|
|
--color-text-main: #{$color-text-text};
|
|
--color-text-teriary: #{$color-text-tertiary};
|
|
--color-text-description: #{$color-gray-700};
|
|
--color-error: #{$color-error-red};
|
|
--color-warning: #{$color-warning};
|
|
|
|
// Default settings-block theme.
|
|
--block-item-gap: 16px;
|
|
--block-header-gap: 6px;
|
|
--block-separator-gap: 32px;
|
|
--block-separator-size: 1px;
|
|
--block-separator-color: var(--color-gray-200);
|
|
--block-action-gap: 16px; // Space between two consecutive action blocks.
|
|
|
|
// Default visual effects.
|
|
--box-shadow-active-item: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
|
--container-border-radius: 8px;
|
|
|
|
// Spinner/loader.
|
|
--spinner-size: 20px;
|
|
--spinner-overlay-width: 320px;
|
|
--spinner-overlay-height: 320px;
|
|
--spinner-overlay-color: #fafafa;
|
|
--spinner-overlay-box-shadow: var(--box-shadow-active-item);
|
|
}
|
